@arc-ui/components 11.22.0 → 11.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/dist/Alert/Alert.cjs.js +1 -1
  2. package/dist/Alert/Alert.esm.js +1 -1
  3. package/dist/Avatar/Avatar.cjs.js +1 -1
  4. package/dist/Avatar/Avatar.esm.js +1 -1
  5. package/dist/AvatarGroup/AvatarGroup.cjs.js +2 -1
  6. package/dist/AvatarGroup/AvatarGroup.esm.js +2 -1
  7. package/dist/Badge/Badge.cjs.js +1 -1
  8. package/dist/Badge/Badge.esm.js +1 -1
  9. package/dist/Button/Button.cjs.js +1 -1
  10. package/dist/Button/Button.esm.js +1 -1
  11. package/dist/Calendar/Calendar.cjs.js +2 -2
  12. package/dist/Calendar/Calendar.esm.js +2 -2
  13. package/dist/Checkbox/Checkbox.cjs.js +4 -4
  14. package/dist/Checkbox/Checkbox.esm.js +4 -4
  15. package/dist/DatePicker/DatePicker.cjs.js +8 -5
  16. package/dist/DatePicker/DatePicker.esm.js +8 -5
  17. package/dist/Disclosure/Disclosure.cjs.js +1 -2
  18. package/dist/Disclosure/Disclosure.esm.js +1 -2
  19. package/dist/DisclosureMini/DisclosureMini.cjs.js +1 -1
  20. package/dist/DisclosureMini/DisclosureMini.esm.js +1 -1
  21. package/dist/Filter/Filter.cjs.js +2 -1
  22. package/dist/Filter/Filter.esm.js +2 -1
  23. package/dist/FormControl/FormControl.cjs.js +3 -3
  24. package/dist/FormControl/FormControl.esm.js +3 -3
  25. package/dist/Grid/Grid.cjs.js +13 -0
  26. package/dist/Grid/Grid.esm.js +5 -0
  27. package/dist/Grid/package.json +7 -0
  28. package/dist/Hidden/Hidden.cjs.js +24 -0
  29. package/dist/Hidden/Hidden.esm.js +16 -0
  30. package/dist/Hidden/package.json +7 -0
  31. package/dist/ImpactCard/ImpactCard.cjs.js +1 -0
  32. package/dist/ImpactCard/ImpactCard.esm.js +1 -0
  33. package/dist/InformationCard/InformationCard.cjs.js +3 -2
  34. package/dist/InformationCard/InformationCard.esm.js +3 -2
  35. package/dist/Link/Link.cjs.js +76 -0
  36. package/dist/Link/Link.esm.js +68 -0
  37. package/dist/Link/package.json +7 -0
  38. package/dist/Modal/Modal.cjs.js +3 -3
  39. package/dist/Modal/Modal.esm.js +3 -3
  40. package/dist/Pagination/Pagination.cjs.js +1 -1
  41. package/dist/Pagination/Pagination.esm.js +1 -1
  42. package/dist/PaginationSimple/PaginationSimple.cjs.js +6 -10
  43. package/dist/PaginationSimple/PaginationSimple.esm.js +6 -10
  44. package/dist/ProgressBar/ProgressBar.cjs.js +8 -2
  45. package/dist/ProgressBar/ProgressBar.esm.js +8 -2
  46. package/dist/ProgressStepper/ProgressStepper.cjs.js +2 -2
  47. package/dist/ProgressStepper/ProgressStepper.esm.js +2 -2
  48. package/dist/RadioGroup/RadioGroup.cjs.js +4 -4
  49. package/dist/RadioGroup/RadioGroup.esm.js +4 -4
  50. package/dist/Select/Select.cjs.js +3 -3
  51. package/dist/Select/Select.esm.js +3 -3
  52. package/dist/SiteHeader/SiteHeader.cjs.js +2 -2
  53. package/dist/SiteHeader/SiteHeader.esm.js +2 -2
  54. package/dist/SiteHeaderV2/SiteHeaderV2.cjs.js +2 -2
  55. package/dist/SiteHeaderV2/SiteHeaderV2.esm.js +2 -2
  56. package/dist/SkipLink/SkipLink.cjs.js +1 -0
  57. package/dist/SkipLink/SkipLink.esm.js +1 -0
  58. package/dist/Switch/Switch.cjs.js +4 -4
  59. package/dist/Switch/Switch.esm.js +4 -4
  60. package/dist/Tabs/Tabs.cjs.js +1 -1
  61. package/dist/Tabs/Tabs.esm.js +1 -1
  62. package/dist/Tag/Tag.cjs.js +1 -1
  63. package/dist/Tag/Tag.esm.js +1 -1
  64. package/dist/TextArea/TextArea.cjs.js +16 -15
  65. package/dist/TextArea/TextArea.esm.js +16 -15
  66. package/dist/TextInput/TextInput.cjs.js +4 -4
  67. package/dist/TextInput/TextInput.esm.js +4 -4
  68. package/dist/Toast/Toast.cjs.js +1 -1
  69. package/dist/Toast/Toast.esm.js +1 -1
  70. package/dist/TypographyCard/TypographyCard.cjs.js +1 -0
  71. package/dist/TypographyCard/TypographyCard.esm.js +1 -0
  72. package/dist/Visible/Visible.cjs.js +24 -0
  73. package/dist/Visible/Visible.esm.js +16 -0
  74. package/dist/Visible/package.json +7 -0
  75. package/dist/VisuallyHidden/VisuallyHidden.cjs.js +1 -1
  76. package/dist/VisuallyHidden/VisuallyHidden.esm.js +1 -1
  77. package/dist/_shared/cjs/{Avatar-12ece0dd.js → Avatar-f1b1c129.js} +1 -0
  78. package/dist/_shared/cjs/{Button-84533dc8.js → Button-6ba21d3b.js} +1 -1
  79. package/dist/_shared/cjs/{Calendar-c6ed5f2c.js → Calendar-b022545c.js} +4 -3
  80. package/dist/_shared/cjs/{Checkbox-8915fcd9.js → Checkbox-0253327b.js} +2 -2
  81. package/dist/_shared/cjs/{DisclosureMini-d0eeb6bb.js → DisclosureMini-09c749e5.js} +1 -2
  82. package/dist/_shared/cjs/{Filter-f4b73f5d.js → Filter-f9506dfa.js} +6 -2
  83. package/dist/_shared/cjs/{FormControl-5f3b6ce4.js → FormControl-68258ce1.js} +2 -2
  84. package/dist/_shared/cjs/Grid-da776e77.js +45 -0
  85. package/dist/_shared/cjs/{ProgressStepper-20a61620.js → ProgressStepper-57cfef1e.js} +3 -3
  86. package/dist/_shared/cjs/{RadioGroup-07bb155e.js → RadioGroup-85eda600.js} +2 -2
  87. package/dist/_shared/cjs/{SiteHeader.rehydrator-ea49f8d5.js → SiteHeader.rehydrator-b76b0889.js} +1 -1
  88. package/dist/_shared/cjs/{SiteHeaderV2-e0735a9d.js → SiteHeaderV2-ce1c8737.js} +1 -1
  89. package/dist/_shared/cjs/{Tabs-24e6f45b.js → Tabs-bc9fac46.js} +1 -0
  90. package/dist/_shared/cjs/{Tag-8723b324.js → Tag-73a59171.js} +5 -5
  91. package/dist/_shared/cjs/{TextInput-5da70ec2.js → TextInput-8d139489.js} +7 -7
  92. package/dist/_shared/cjs/{Toast-7a20d1b9.js → Toast-26207fef.js} +1 -1
  93. package/dist/_shared/cjs/{VisuallyHidden-e2c8b291.js → VisuallyHidden-b0de4c7b.js} +1 -1
  94. package/dist/_shared/esm/{Avatar-d01e2b7b.js → Avatar-320313f0.js} +1 -0
  95. package/dist/_shared/esm/{Button-3f294e64.js → Button-a7d134c6.js} +1 -1
  96. package/dist/_shared/esm/{Calendar-753ef6f1.js → Calendar-ea232839.js} +4 -3
  97. package/dist/_shared/esm/{Checkbox-0e051546.js → Checkbox-588619c7.js} +2 -2
  98. package/dist/_shared/esm/{DisclosureMini-ec17b008.js → DisclosureMini-56719716.js} +1 -2
  99. package/dist/_shared/esm/{Filter-ad254e3d.js → Filter-258ba675.js} +6 -2
  100. package/dist/_shared/esm/{FormControl-cc99cde0.js → FormControl-8e836656.js} +2 -2
  101. package/dist/_shared/esm/Grid-07dbf4bd.js +39 -0
  102. package/dist/_shared/esm/{ProgressStepper-74d48612.js → ProgressStepper-6c811282.js} +3 -3
  103. package/dist/_shared/esm/{RadioGroup-362be63f.js → RadioGroup-6c8f8454.js} +2 -2
  104. package/dist/_shared/esm/{SiteHeader.rehydrator-65c8cf71.js → SiteHeader.rehydrator-8ad7651b.js} +1 -1
  105. package/dist/_shared/esm/{SiteHeaderV2-c74b811b.js → SiteHeaderV2-a7c1b1cb.js} +1 -1
  106. package/dist/_shared/esm/{Tabs-a85af483.js → Tabs-9485cab6.js} +1 -0
  107. package/dist/_shared/esm/{Tag-664b85c8.js → Tag-cb35d57b.js} +5 -5
  108. package/dist/_shared/esm/{TextInput-1d1c5fd6.js → TextInput-c0388103.js} +7 -7
  109. package/dist/_shared/esm/{Toast-7a232e15.js → Toast-fcbfc194.js} +1 -1
  110. package/dist/_shared/esm/{VisuallyHidden-b9eebf71.js → VisuallyHidden-06692fd3.js} +1 -1
  111. package/dist/index.es.js +170 -47
  112. package/dist/index.es.js.map +1 -1
  113. package/dist/index.js +173 -46
  114. package/dist/index.js.map +1 -1
  115. package/dist/styles.css +3 -3
  116. package/dist/types/components/Alert/Alert.d.ts +1 -1
  117. package/dist/types/components/Avatar/Avatar.d.ts +1 -0
  118. package/dist/types/components/AvatarGroup/AvatarGroup.d.ts +1 -0
  119. package/dist/types/components/Badge/Badge.d.ts +1 -1
  120. package/dist/types/components/Button/Button.d.ts +1 -1
  121. package/dist/types/components/Calendar/Calendar.d.ts +1 -0
  122. package/dist/types/components/DatePicker/DatePicker.d.ts +3 -0
  123. package/dist/types/components/Disclosure/Disclosure.d.ts +1 -2
  124. package/dist/types/components/DisclosureMini/DisclosureMini.d.ts +1 -2
  125. package/dist/types/components/Filter/Filter.d.ts +1 -1
  126. package/dist/types/components/Filter/FilterItems/FilterItems.d.ts +4 -1
  127. package/dist/types/components/Grid/Grid.constants.d.ts +1 -0
  128. package/dist/types/components/Grid/Grid.d.ts +28 -0
  129. package/dist/types/components/Grid/Grid.types.d.ts +8 -0
  130. package/dist/types/components/Grid/components/Col/Col.d.ts +9 -0
  131. package/dist/types/components/Grid/components/Col/index.d.ts +1 -0
  132. package/dist/types/components/Grid/components/Row/Row.d.ts +9 -0
  133. package/dist/types/components/Grid/components/Row/index.d.ts +1 -0
  134. package/dist/types/components/Grid/index.d.ts +2 -0
  135. package/dist/types/components/Hidden/Hidden.d.ts +11 -0
  136. package/dist/types/components/Hidden/index.d.ts +1 -0
  137. package/dist/types/components/ImpactCard/ImpactCard.d.ts +1 -0
  138. package/dist/types/components/InformationCard/InformationCard.d.ts +1 -0
  139. package/dist/types/components/Link/Link.d.ts +52 -0
  140. package/dist/types/components/Link/index.d.ts +1 -0
  141. package/dist/types/components/Modal/Modal.d.ts +1 -1
  142. package/dist/types/components/Pagination/Pagination.d.ts +1 -1
  143. package/dist/types/components/PaginationSimple/PaginationSimple.d.ts +12 -4
  144. package/dist/types/components/ProgressBar/ProgressBar.d.ts +4 -0
  145. package/dist/types/components/ProgressStepper/ProgressStepper.d.ts +1 -1
  146. package/dist/types/components/SkipLink/SkipLink.d.ts +1 -0
  147. package/dist/types/components/Switch/Switch.d.ts +1 -1
  148. package/dist/types/components/Tabs/Tabs.d.ts +1 -0
  149. package/dist/types/components/Tag/Tag.d.ts +5 -1
  150. package/dist/types/components/TextArea/TextArea.d.ts +5 -0
  151. package/dist/types/components/TextInput/TextInput.d.ts +8 -0
  152. package/dist/types/components/Toast/Toast.d.ts +1 -1
  153. package/dist/types/components/TypographyCard/TypographyCard.d.ts +1 -0
  154. package/dist/types/components/Visible/Visible.d.ts +11 -0
  155. package/dist/types/components/Visible/index.d.ts +1 -0
  156. package/dist/types/components/VisuallyHidden/VisuallyHidden.d.ts +1 -1
  157. package/dist/types/components/index.d.ts +4 -0
  158. package/dist/types/styles.d.ts +4 -0
  159. package/dist/types/types/auto-complete-types.d.ts +1 -0
  160. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -557,7 +557,7 @@ const BtIconTick = (props) =>
557
557
  ),
558
558
  );
559
559
 
560
- /** use `Alert` to display persistent messages, either permanent or dismissible. */
560
+ /** Use `Alert` to inform the user of important changes or actions. */
561
561
  var Alert = function (_a) {
562
562
  var _b;
563
563
  var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
@@ -802,6 +802,7 @@ var AvatarContent = function (_a) {
802
802
  return React__default.createElement(Icon, { size: iconSize[size], icon: BtIconUser });
803
803
  };
804
804
 
805
+ /** Use `Avatar` to visually represent a user. */
805
806
  var Avatar = function (_a) {
806
807
  var img = _a.img, initials = _a.initials, href = _a.href, title = _a.title, ariaLabel = _a.ariaLabel, onClick = _a.onClick, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["img", "initials", "href", "title", "ariaLabel", "onClick", "size"]);
807
808
  var wrapperAttrs = __assign({ className: classNames("arc-Avatar", "arc-Avatar--".concat(size), {
@@ -819,6 +820,7 @@ var getAvatars = function (avatars, max) {
819
820
  : []), true);
820
821
  };
821
822
 
823
+ /** Use `AvatarGroup` to visually represent a group of users. */
822
824
  var AvatarGroup = function (_a) {
823
825
  var title = _a.title, ariaLabel = _a.ariaLabel, href = _a.href, avatars = _a.avatars, onClick = _a.onClick, max = _a.max, _b = _a.size, size = _b === void 0 ? "xl" : _b, props = __rest(_a, ["title", "ariaLabel", "href", "avatars", "onClick", "max", "size"]);
824
826
  var id = useId();
@@ -828,7 +830,7 @@ var AvatarGroup = function (_a) {
828
830
  React__default.createElement(Avatar, __assign({ size: size }, props)))); }))));
829
831
  };
830
832
 
831
- /** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
833
+ /** Use `Badge` as a static, non-interactive way to provide short updates. */
832
834
  var Badge = function (_a) {
833
835
  var _b, _c;
834
836
  var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel, ariaRole = _a.ariaRole, props = __rest(_a, ["children", "state", "size", "fill", "ariaLabel", "ariaRole"]);
@@ -1608,7 +1610,7 @@ const BtIconChevronRightMid = (props) =>
1608
1610
  );
1609
1611
 
1610
1612
  /**
1611
- * Use `Button` to allow users to take actions with clicks and taps.
1613
+ * Use `Button` to let a user complete an action like ‘Log in’ or ‘Register’.
1612
1614
  */
1613
1615
  var Button = forwardRef(function (_a, ref) {
1614
1616
  var _b;
@@ -1877,8 +1879,7 @@ const BtIconChevronDown2Px = (props) =>
1877
1879
  );
1878
1880
 
1879
1881
  /**
1880
- * Use `DisclosureMini` to display content that is only visible when toggled into
1881
- * an "open" state.
1882
+ * Use `DisclosureMini` to show and hide sections of content.
1882
1883
  */
1883
1884
  var DisclosureMini = function (_a) {
1884
1885
  var children = _a.children, summary = _a.summary, onClick = _a.onClick, id = _a.id, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? "left" : _c, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "summary", "onClick", "id", "isOpen", "iconPosition", "size"]);
@@ -1907,7 +1908,7 @@ var DisclosureMini = function (_a) {
1907
1908
  };
1908
1909
 
1909
1910
  /**
1910
- * Provides text for screen readers that is visually hidden.
1911
+ * Use `VisuallyHidden` to provide text for screen readers that is visually hidden on screen.
1911
1912
  */
1912
1913
  var VisuallyHidden = function (_a) {
1913
1914
  var children = _a.children;
@@ -2010,7 +2011,7 @@ var Checkbox = forwardRef(function (_a, ref) {
2010
2011
  React__default.createElement("label", { id: idLabel, htmlFor: id, className: classNames("arc-Checkbox-label", {
2011
2012
  "arc-Checkbox-label--top": checkboxAlignment === "top"
2012
2013
  }) },
2013
- React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
2014
+ React__default.createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", "aria-checked": checked ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
2014
2015
  React__default.createElement("span", { className: "arc-Checkbox-box" },
2015
2016
  React__default.createElement(BtIconTickAlt2Px, null)),
2016
2017
  React__default.createElement("span", __assign({}, (checkboxAlignment === "top" && {
@@ -2062,7 +2063,7 @@ var Columns = function (_a) {
2062
2063
  var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isGutterless"]);
2063
2064
  useEffect(function () {
2064
2065
  React__default.Children.map(children, function (item) {
2065
- if (item && item.type !== Col) {
2066
+ if (item && item.type !== Col$1) {
2066
2067
  throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
2067
2068
  }
2068
2069
  });
@@ -2073,7 +2074,7 @@ var Columns = function (_a) {
2073
2074
  }) }, filterDataAttrs(props)),
2074
2075
  React__default.createElement("div", { className: "arc-Columns-inner" }, children)));
2075
2076
  };
2076
- var Col = function (_a) {
2077
+ var Col$1 = function (_a) {
2077
2078
  var _b;
2078
2079
  var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
2079
2080
  return (React__default.createElement("div", __assign({ className: classNames((_b = {},
@@ -2097,7 +2098,7 @@ var Col = function (_a) {
2097
2098
  _b["arc-Columns-col--debugVisible"] = isDebugVisible,
2098
2099
  _b)) }, filterDataAttrs(props)), children));
2099
2100
  };
2100
- Columns.Col = Col;
2101
+ Columns.Col = Col$1;
2101
2102
 
2102
2103
  /**
2103
2104
  #### Deprecation Notice
@@ -2121,8 +2122,7 @@ var Curve = function (_a) {
2121
2122
  };
2122
2123
 
2123
2124
  /**
2124
- * Use `Disclosure` to display content that is only visible when toggled into
2125
- * an "open" state.
2125
+ * Use `Disclosure` to show and hide sections of content.
2126
2126
  */
2127
2127
  var Disclosure = function (_a) {
2128
2128
  var children = _a.children, headingLevel = _a.headingLevel, _b = _a.indentDetails, indentDetails = _b === void 0 ? false : _b, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, summary = _a.summary, props = __rest(_a, ["children", "headingLevel", "indentDetails", "isOpen", "summary"]);
@@ -2169,7 +2169,10 @@ var FilterControl = function (_a) {
2169
2169
  "arc-FilterControl--onDarkSurface": surface === "dark",
2170
2170
  "arc-FilterControl--selected": selected
2171
2171
  }), onClick: onClickHandler, tabIndex: 0, "aria-pressed": selected },
2172
- React__default.createElement("div", { className: "arc-FilterControl-text" }, children)));
2172
+ React__default.createElement("div", { className: "arc-FilterControl-text" },
2173
+ React__default.createElement(VisuallyHidden, null, "Filter by"),
2174
+ " ",
2175
+ children)));
2173
2176
  };
2174
2177
 
2175
2178
  var FilterControls = function (_a) {
@@ -2202,7 +2205,7 @@ var FilterItems = function (_a) {
2202
2205
  : children))) : (React__default.createElement("div", { "aria-live": "assertive" }, error));
2203
2206
  };
2204
2207
 
2205
- /** use `Filter` for interactive elements that filter and categorise page content. */
2208
+ /** Use `Filter` to filter and categorise page content. */
2206
2209
  var Filter = function (_a) {
2207
2210
  var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
2208
2211
  var _c = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
@@ -2266,6 +2269,39 @@ Filter.Control = FilterControl;
2266
2269
  Filter.Items = FilterItems;
2267
2270
  Filter.Item = FilterItem;
2268
2271
 
2272
+ var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
2273
+
2274
+ var Col = function (props) {
2275
+ return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
2276
+ var _a;
2277
+ var _b, _c;
2278
+ var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
2279
+ var orderValue = (_b = props.order) === null || _b === void 0 ? void 0 : _b[bp];
2280
+ var offsetValue = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[bp];
2281
+ return __assign(__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a));
2282
+ }, {})) }, filterDataAttrs(props)), props.children));
2283
+ };
2284
+
2285
+ var Row = function (_a) {
2286
+ var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = __rest(_a, ["direction", "align", "justify", "children"]);
2287
+ return (React__default.createElement("div", __assign({ className: classNames("arc-Grid-row", "".concat(suffixModifier("arc-Grid-row--direction", direction)), "".concat(suffixModifier("arc-Grid-row--justify", justify)), "".concat(suffixModifier("arc-Grid-row--align", align))) }, filterDataAttrs(props)), children));
2288
+ };
2289
+
2290
+ /**
2291
+ * Use `Grid` to compose layouts on a 12-column grid.
2292
+ */
2293
+ var Grid = function (_a) {
2294
+ var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = __rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
2295
+ return (React__default.createElement("div", __assign({ className: classNames("arc-Grid", {
2296
+ "arc-Grid--fluid": isFluid,
2297
+ "arc-Grid--debugVisible": isDebugVisible,
2298
+ "arc-Grid--gutterless": isGutterless
2299
+ }) }, filterDataAttrs(props)),
2300
+ React__default.createElement("div", { className: "arc-Grid-inner" }, children)));
2301
+ };
2302
+ Grid.Row = Row;
2303
+ Grid.Col = Col;
2304
+
2269
2305
  /**
2270
2306
  * Use `Group` to arrange flexible items in a row.
2271
2307
  */
@@ -2301,6 +2337,17 @@ var GroupItem = function (_a) {
2301
2337
  };
2302
2338
  Group.Item = GroupItem;
2303
2339
 
2340
+ var Hidden = function (_a) {
2341
+ var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
2342
+ return (React__default.createElement("div", __assign({ className: classNames({
2343
+ "arc-Hidden--xs": xs,
2344
+ "arc-Hidden--s": s,
2345
+ "arc-Hidden--m": m,
2346
+ "arc-Hidden--l": l,
2347
+ "arc-Hidden--xl": xl
2348
+ }) }, filterDataAttrs(props)), children));
2349
+ };
2350
+
2304
2351
  /**
2305
2352
  * Do not edit directly
2306
2353
  * Generated file
@@ -2348,10 +2395,10 @@ const BtIconCrossFill = (props) =>
2348
2395
  );
2349
2396
 
2350
2397
  /**
2351
- * use `Tag` to promote features and manage filtering.
2398
+ * Use `Tag` to promote features and manage filtering.
2352
2399
  */
2353
2400
  var Tag = function (_a) {
2354
- var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove"]);
2401
+ var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
2355
2402
  var surface = useContext(Context$5).surface;
2356
2403
  var _b = useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
2357
2404
  var onRemoveHandler = function () {
@@ -2368,13 +2415,13 @@ var Tag = function (_a) {
2368
2415
  link ? (React__default.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
2369
2416
  icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
2370
2417
  React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
2371
- React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
2418
+ React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement(React__default.Fragment, null, onClick ? (React__default.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
2372
2419
  icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
2373
2420
  React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
2374
- React__default.createElement("div", { className: "arc-Tag-label" }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
2421
+ React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React__default.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
2375
2422
  icon && (React__default.createElement("span", { className: "arc-Tag-icon" },
2376
2423
  React__default.createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
2377
- React__default.createElement("div", { className: "arc-Tag-label" }, children))))),
2424
+ React__default.createElement("div", { className: "arc-Tag-label", title: title }, children))))),
2378
2425
  isRemovable && (React__default.createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
2379
2426
  React__default.createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
2380
2427
  React__default.createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
@@ -2398,6 +2445,7 @@ var VerticalSpace = function (_a) {
2398
2445
  _b)) }, filterDataAttrs(props))));
2399
2446
  };
2400
2447
 
2448
+ /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
2401
2449
  var InformationCard = function (_a) {
2402
2450
  var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "minHeight", "headingLevel"]);
2403
2451
  var surface = useContext(Context$5).surface;
@@ -2444,6 +2492,7 @@ var InformationCard = function (_a) {
2444
2492
  React__default.createElement(Image, __assign({}, footerLogo))))))));
2445
2493
  };
2446
2494
 
2495
+ /** Use `ImpactCard` for important content that needs additional hierarchy and prominence. */
2447
2496
  var ImpactCard = function (_a) {
2448
2497
  var url = _a.url, onClick = _a.onClick, heading = _a.heading, img = _a.img, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.buttonIcon, buttonIcon = _e === void 0 ? "arrow" : _e, props = __rest(_a, ["url", "onClick", "heading", "img", "label", "minHeight", "linkData", "pathway", "headingLevel", "buttonIcon"]);
2449
2498
  var _f = useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
@@ -35410,7 +35459,7 @@ const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d95
35410
35459
  const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
35411
35460
  const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
35412
35461
 
35413
- /** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
35462
+ /** Use `Modal` to display information that needs immediate action from a user. */
35414
35463
  var Modal = function (_a) {
35415
35464
  var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
35416
35465
  var arcRootElement = useContext(ArcRootElementContext);
@@ -35435,7 +35484,7 @@ var Modal = function (_a) {
35435
35484
  return (React__default.createElement($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { open: isOpen },
35436
35485
  React__default.createElement($5d3850c4d0b4e6c7$export$602eac185826482c, { container: arcRootElement || undefined },
35437
35486
  React__default.createElement($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: "arc-Modal-overlay" },
35438
- React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
35487
+ React__default.createElement($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
35439
35488
  "arc-Modal-dialog--maxHeightWindow": isContentScrollable
35440
35489
  }) }, filterDataAttrs(props)),
35441
35490
  React__default.createElement("div", { className: "arc-Modal-section" },
@@ -35493,7 +35542,7 @@ var usePagination = function (pageCount, selectedPage) {
35493
35542
  };
35494
35543
 
35495
35544
  /**
35496
- * Use `Pagination` to navigate multiple pages.
35545
+ * Use `Pagination` to navigate through multiple pages of content.
35497
35546
  */
35498
35547
  var Pagination = function (_a) {
35499
35548
  var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = __rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
@@ -35526,10 +35575,10 @@ var Pagination = function (_a) {
35526
35575
  };
35527
35576
 
35528
35577
  /**
35529
- * Use `PaginationSimple` to navigate multiple pages.
35578
+ * Use `PaginationSimple` to navigate through multiple pages of content.
35530
35579
  */
35531
35580
  var PaginationSimple = function (_a) {
35532
- var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "onPrevPage", "onNextPage", "isFluid"]);
35581
+ var hidePrev = _a.hidePrev, hideNext = _a.hideNext, prevHref = _a.prevHref, nextHref = _a.nextHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = __rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
35533
35582
  var surface = useContext(Context$5).surface;
35534
35583
  return (React__default.createElement("nav", __assign({ className: classNames("arc-PaginationSimple", {
35535
35584
  "arc-PaginationSimple--onDarkSurface": surface === "dark",
@@ -35538,20 +35587,16 @@ var PaginationSimple = function (_a) {
35538
35587
  }) }, filterDataAttrs(props)),
35539
35588
  React__default.createElement("ul", { className: "arc-PaginationSimple-list" },
35540
35589
  React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
35541
- React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
35590
+ React__default.createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
35542
35591
  "arc-PaginationSimple-navigationButton--hidden": hidePrev
35543
- }), onClick: function () {
35544
- onPrevPage();
35545
- } },
35592
+ }), onClick: onPrevPage },
35546
35593
  React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
35547
35594
  React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid })),
35548
35595
  React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
35549
35596
  React__default.createElement("li", { className: "arc-PaginationSimple-listItem" },
35550
- React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
35597
+ React__default.createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: classNames("arc-PaginationSimple-navigationButton", {
35551
35598
  "arc-PaginationSimple-navigationButton--hidden": hideNext
35552
- }), onClick: function () {
35553
- onNextPage();
35554
- } },
35599
+ }), onClick: onNextPage },
35555
35600
  React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
35556
35601
  React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
35557
35602
  React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))))));
@@ -35630,10 +35675,16 @@ var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
35630
35675
  return isIndeterminate ? indeterminateProps : determinateProps;
35631
35676
  };
35632
35677
 
35678
+ /**
35679
+ * Use `ProgressBar` to show the progress of a specific task within a page.
35680
+ */
35633
35681
  var ProgressBar = function (_a) {
35634
35682
  var _b = _a.state, state = _b === void 0 ? "loading" : _b, _c = _a.value, value = _c === void 0 ? 0 : _c, _d = _a.isIndeterminate, isIndeterminate = _d === void 0 ? false : _d, headline = _a.headline, ariaLabel = _a.ariaLabel, action = _a.action, title = _a.title, description = _a.description, displayValue = _a.displayValue, props = __rest(_a, ["state", "value", "isIndeterminate", "headline", "ariaLabel", "action", "title", "description", "displayValue"]);
35635
35683
  var surface = useContext(Context$5).surface;
35636
35684
  var progressValue = Math.min(100, Math.max(0, value));
35685
+ var autoFocusRef = function (canFocus) { return function (el) {
35686
+ canFocus && el && el.focus();
35687
+ }; };
35637
35688
  return (React__default.createElement("div", __assign({ "data-testid": "progress", className: classNames("arc-ProgressBar", "arc-ProgressBar--".concat(state), {
35638
35689
  "arc-ProgressBar--onDarkSurface": surface === "dark"
35639
35690
  }) }, filterDataAttrs(props)),
@@ -35647,11 +35698,11 @@ var ProgressBar = function (_a) {
35647
35698
  React__default.createElement("div", { className: "arc-ProgressBar-container" },
35648
35699
  React__default.createElement("div", { className: "arc-ProgressBar-outerBar" },
35649
35700
  React__default.createElement("div", __assign({}, getProgressBarProps(isIndeterminate, progressValue, ariaLabel)))),
35650
- description && (React__default.createElement("div", { className: "arc-ProgressBar-description" },
35701
+ description && (React__default.createElement("div", { className: "arc-ProgressBar-description", role: "status" },
35651
35702
  React__default.createElement(Text, { tone: state !== "error" ? "supporting" : "default" }, description))),
35652
35703
  action && (React__default.createElement(React__default.Fragment, null,
35653
35704
  React__default.createElement(VerticalSpace, { size: "8" }),
35654
- React__default.createElement("button", { className: "arc-ProgressBar-actionButton", onClick: action.action },
35705
+ React__default.createElement("button", { ref: autoFocusRef(action.autofocusOnMount), className: "arc-ProgressBar-actionButton", onClick: action.action },
35655
35706
  React__default.createElement("div", { className: "arc-ProgressBar-actionContainer" },
35656
35707
  React__default.createElement(Text, null, action.text),
35657
35708
  action.icon && (React__default.createElement("div", { className: "arc-ProgressBar-actionIcon" },
@@ -35723,13 +35774,13 @@ var ProgressStepperItem = function (_a) {
35723
35774
  status !== "todo" && (React__default.createElement(VisuallyHidden, null,
35724
35775
  capitaliseFirstLetter(status),
35725
35776
  ":")),
35726
- titleHref ? (React__default.createElement("a", { href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
35777
+ titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler }, title)) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" }, title)),
35727
35778
  React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
35728
35779
  stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
35729
35780
  React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
35730
35781
  };
35731
35782
 
35732
- /** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards. */
35783
+ /** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
35733
35784
  var ProgressStepper = function (_a) {
35734
35785
  var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable"]);
35735
35786
  var items = React__default.Children.toArray(children);
@@ -35770,7 +35821,7 @@ var RadioButton = forwardRef(function (_a, ref) {
35770
35821
  React__default.createElement("label", { className: classNames("arc-RadioButton-label", {
35771
35822
  "arc-RadioButton-label--alignTop": radioButtonAlignment === "top"
35772
35823
  }), htmlFor: id, id: idLabel },
35773
- React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
35824
+ React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value, "aria-checked": checked }),
35774
35825
  React__default.createElement("span", { className: classNames({
35775
35826
  "arc-RadioButton-label--marginTop": radioButtonAlignment === "top"
35776
35827
  }) },
@@ -41174,7 +41225,7 @@ function $6be4966fd9bbc698$var$getState(checked) {
41174
41225
  const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
41175
41226
  const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
41176
41227
 
41177
- /** Use `Switch` to toggle between checked and not checked. */
41228
+ /** Use `Switch` to allow users to immediately toggle between two states. */
41178
41229
  var Switch = function (_a) {
41179
41230
  var defaultChecked = _a.defaultChecked, onCheckedChange = _a.onCheckedChange, label = _a.label, name = _a.name, onBlur = _a.onBlur, value = _a.value, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, id = _a.id, _c = _a.labelSize, labelSize = _c === void 0 ? "s" : _c, statusText = _a.statusText, _d = _a.hideLabel, hideLabel = _d === void 0 ? false : _d, props = __rest(_a, ["defaultChecked", "onCheckedChange", "label", "name", "onBlur", "value", "isDisabled", "errorMessage", "id", "labelSize", "statusText", "hideLabel"]);
41180
41231
  var surface = useContext(Context$5).surface;
@@ -41654,6 +41705,7 @@ var TabsList = function (_a) {
41654
41705
  React__default.createElement(Icon, { icon: BtIconArrowRightFill, size: 40, color: "brand" })))));
41655
41706
  };
41656
41707
 
41708
+ /** Use `Tabs` to allow users to navigate between different sections of relevant content. */
41657
41709
  var Tabs = function (_a) {
41658
41710
  var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
41659
41711
  return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
@@ -41664,7 +41716,7 @@ Tabs.Content = TabContent;
41664
41716
 
41665
41717
  /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
41666
41718
  var TextArea = forwardRef(function (_a, ref) {
41667
- var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _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, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width"]);
41719
+ var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _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, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete"]);
41668
41720
  var surface = useContext(Context$5).surface;
41669
41721
  var ourRef = useRef(null);
41670
41722
  var _j = useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _j[0], setCharacterCount = _j[1];
@@ -41699,15 +41751,12 @@ var TextArea = forwardRef(function (_a, ref) {
41699
41751
  "arc-TextArea--noResize": resize !== "manual",
41700
41752
  "arc-TextArea--onDarkSurface": surface === "dark",
41701
41753
  "arc-TextArea--invalid": errorMessage
41702
- }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper") })));
41754
+ }), defaultValue: typeof value !== "undefined" ? undefined : defaultValue, disabled: isDisabled, value: value, readOnly: isReadOnly, maxLength: maxLength, name: name, onChange: handleOnChange, onBlur: onBlur, ref: getTextAreaRef, style: { width: width }, "aria-describedby": "".concat(id, "-helper"), autoComplete: autoComplete })));
41703
41755
  });
41704
41756
 
41705
- /**
41706
- * Use `TextInput` to allow custom user text entry with a keyboard.
41707
- */
41708
41757
  var TextInputComponent = forwardRef(function (_a, ref) {
41709
41758
  var _b;
41710
- var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, 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, placeholder = _a.placeholder, 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, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width"]);
41759
+ var _c = _a.defaultValue, defaultValue = _c === void 0 ? "" : _c, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, 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, placeholder = _a.placeholder, 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, iconButton = _a.iconButton, prefix = _a.prefix, suffix = _a.suffix, _l = _a.inputAlignment, inputAlignment = _l === void 0 ? "left" : _l, width = _a.width, autoComplete = _a.autoComplete, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "hideLabel", "id", "inputMode", "isDisabled", "isReadOnly", "isRequired", "label", "labelSize", "maxLength", "minLength", "name", "onBlur", "onChange", "placeholder", "onClickDisclosure", "pattern", "type", "showPassword", "value", "disclosureTitle", "disclosureText", "inputSize", "iconButton", "prefix", "suffix", "inputAlignment", "width", "autoComplete"]);
41711
41760
  var surface = useContext(Context$5).surface;
41712
41761
  var _m = useState(false), showPasswordToggle = _m[0], setShowPasswordToggle = _m[1];
41713
41762
  var inferredInputProps = useNumericInput({
@@ -41743,7 +41792,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
41743
41792
  React__default.createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, isDisabled: isDisabled, label: label, hideLabel: hideLabel, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", disclosureTitle: disclosureTitle, disclosureText: disclosureText, onClickDisclosure: onClickDisclosure },
41744
41793
  React__default.createElement("div", { className: "arc-TextInput-inputWrapper", style: { width: width } },
41745
41794
  prefix && (React__default.createElement("span", { className: "arc-TextInput-prefix", "aria-hidden": true }, prefix)),
41746
- React__default.createElement("input", __assign({ placeholder: placeholder, "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)),
41795
+ React__default.createElement("input", __assign({ placeholder: placeholder, "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, autoComplete: autoComplete }, inferredInputProps)),
41747
41796
  iconButton && !showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
41748
41797
  React__default.createElement("button", { ref: iconButton.ref, className: "arc-TextInput-iconButton", disabled: isReadOnly || isDisabled, "aria-label": iconButton.label, onFocus: iconButton.onFocus, onClick: function (e) {
41749
41798
  e.preventDefault();
@@ -41759,6 +41808,9 @@ var TextInputComponent = forwardRef(function (_a, ref) {
41759
41808
  ? "Your password is shown"
41760
41809
  : "Your password is hidden")))))))));
41761
41810
  });
41811
+ /**
41812
+ * Use `TextInput` to allow users to enter short form text.
41813
+ */
41762
41814
  var TextInput = forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
41763
41815
  forwardRef(function (props, ref) { return React__default.createElement(TextInputComponent, __assign({ ref: ref }, props)); });
41764
41816
 
@@ -42700,7 +42752,7 @@ var ToastNotification = function (_a) {
42700
42752
  React__default.createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
42701
42753
  };
42702
42754
 
42703
- /** Use `Toast` to display temporary messages at the bottom of the viewport. */
42755
+ /** Use `Toast` to display temporary messages at the bottom of the screen. */
42704
42756
  var Toast = function (_a) {
42705
42757
  var children = _a.children, _b = _a.colorScheme, colorScheme = _b === void 0 ? "default" : _b, props = __rest(_a, ["children", "colorScheme"]);
42706
42758
  return (React__default.createElement($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", duration: 6000 },
@@ -42715,6 +42767,7 @@ var Truncate = function (_a) {
42715
42767
  return (React__default.createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
42716
42768
  };
42717
42769
 
42770
+ /** Use `TypographyCard` for content that benefits from larger and energetic typography. */
42718
42771
  var TypographyCard = function (_a) {
42719
42772
  var url = _a.url, onClick = _a.onClick, heading = _a.heading, metaText = _a.metaText, label = _a.label, minHeight = _a.minHeight, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, _c = _a.pathway, pathway = _c === void 0 ? "light" : _c, _d = _a.buttonIcon, buttonIcon = _d === void 0 ? "arrow" : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["url", "onClick", "heading", "metaText", "label", "minHeight", "linkData", "pathway", "buttonIcon", "headingLevel"]);
42720
42773
  var surface = useContext(Context$5).surface;
@@ -42759,5 +42812,75 @@ var UniversalHeaderItem = function (_a) {
42759
42812
  };
42760
42813
  UniversalHeader.Item = UniversalHeaderItem;
42761
42814
 
42762
- export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Group, Heading, Icon, Image, ImpactCard, InformationCard, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, VisuallyHidden };
42815
+ var Visible = function (_a) {
42816
+ var children = _a.children, xs = _a.xs, s = _a.s, m = _a.m, l = _a.l, xl = _a.xl, props = __rest(_a, ["children", "xs", "s", "m", "l", "xl"]);
42817
+ return (React__default.createElement("div", __assign({ className: classNames("arc-Visible", {
42818
+ "arc-Visible--xs": xs,
42819
+ "arc-Visible--s": s,
42820
+ "arc-Visible--m": m,
42821
+ "arc-Visible--l": l,
42822
+ "arc-Visible--xl": xl
42823
+ }) }, filterDataAttrs(props)), children));
42824
+ };
42825
+
42826
+ const BtIconNewWindow = (props) =>
42827
+ /*#__PURE__*/ React__default.createElement(
42828
+ "svg",
42829
+ Object.assign(
42830
+ {
42831
+ xmlns: "http://www.w3.org/2000/svg",
42832
+ viewBox: "0 0 32 32",
42833
+ },
42834
+ props,
42835
+ ),
42836
+ /*#__PURE__*/ React__default.createElement("defs", null),
42837
+ /*#__PURE__*/ React__default.createElement("path", {
42838
+ d: "M24.70166,7.01794a.49968.49968,0,0,0-.19092-.03845H17.50586a.5.5,0,0,0,0,1h5.79785l-8.15918,8.15918a.49995.49995,0,1,0,.707.707l8.15918-8.15918v5.77393a.5.5,0,1,0,1,0v-6.981a.50171.50171,0,0,0-.30908-.46155Z",
42839
+ fill: "currentColor",
42840
+ }),
42841
+ /*#__PURE__*/ React__default.createElement("path", {
42842
+ d: "M26.85156,3.99072H5.18359A1.20156,1.20156,0,0,0,3.9834,5.19141V26.89062a1.10362,1.10362,0,0,0,1.10254,1.103H26.85156a1.17979,1.17979,0,0,0,1.17871-1.17871V5.16943A1.17979,1.17979,0,0,0,26.85156,3.99072Zm.17871,22.82422a.17891.17891,0,0,1-.17871.17871H5.08594a.10419.10419,0,0,1-.10254-.103V5.19141a.20069.20069,0,0,1,.20019-.20069h21.668a.17888.17888,0,0,1,.17871.17871Z",
42843
+ fill: "currentColor",
42844
+ }),
42845
+ );
42846
+
42847
+ /**
42848
+ * Use `Link` to direct users to a new page or piece of information.
42849
+ */
42850
+ var Link = function (_a) {
42851
+ var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
42852
+ var surface = useContext(Context$5).surface;
42853
+ var isExternalLink = target === "_blank";
42854
+ var textArray = children.split(" ");
42855
+ var firstText = textArray.slice(0, -1).join(" ");
42856
+ var lastWord = textArray[textArray.length - 1];
42857
+ var commonProps = {
42858
+ id: id,
42859
+ onClick: onClick,
42860
+ className: classNames("arc-Link", "arc-Link--".concat(size), {
42861
+ "arc-Link--onDarkSurface": surface === "dark",
42862
+ "arc-Link--onLightSurface": surface !== "dark",
42863
+ "arc-Link--isImplied": isImplied
42864
+ })
42865
+ };
42866
+ var elementProps = {
42867
+ a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
42868
+ button: __assign({}, commonProps),
42869
+ span: __assign({}, commonProps)
42870
+ };
42871
+ var LinkElement = isButton ? "button" : href ? "a" : "span";
42872
+ return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterDataAttrs(props)),
42873
+ React__default.createElement("div", { className: "arc-Link-wrapper" },
42874
+ React__default.createElement(VisuallyHidden, null,
42875
+ screenReaderText || children,
42876
+ isExternalLink && " (Opens in new window)"),
42877
+ React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
42878
+ firstText,
42879
+ "\u00A0"),
42880
+ React__default.createElement("span", { className: "arc-Link-iconWrapper" },
42881
+ React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
42882
+ isExternalLink && (React__default.createElement(Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
42883
+ };
42884
+
42885
+ export { Alert, Align, Avatar, AvatarGroup, Badge, Base, Box, BrandLogo, Breadcrumbs, Button, Card, Checkbox, Clock, Clock_rehydrator as ClockRehydrator, Columns, Curve, Disclosure, DisclosureMini, Elevation, Filter, FormControl, Grid, Group, Heading, Hidden, Icon, Image, ImpactCard, InformationCard, Link, Markup, MediaCard, Modal, Pagination, PaginationSimple, Poster, ProgressBar, ProgressStepper, RadioGroup, Rule, ScrollToTop, Section, Select, SiteFooter, SiteFooter_rehydrator as SiteFooterRehydrator, SiteHeader, SiteHeaderRehydrator, SiteHeaderV2, Surface, Context$5 as SurfaceContext, Switch, Tabs, Tag, Text, TextArea, TextInput, Toast, Truncate, TypographyCard, UniversalHeader, VerticalSpace, Visible, VisuallyHidden };
42763
42886
  //# sourceMappingURL=index.es.js.map