@arc-ui/components 11.13.0 → 11.14.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 (34) hide show
  1. package/dist/Box/Box.cjs.js +0 -1
  2. package/dist/Box/Box.esm.js +0 -1
  3. package/dist/InformationCard/InformationCard.cjs.js +85 -0
  4. package/dist/InformationCard/InformationCard.esm.js +77 -0
  5. package/dist/InformationCard/package.json +7 -0
  6. package/dist/Select/Select.cjs.js +3 -3
  7. package/dist/Select/Select.esm.js +3 -3
  8. package/dist/SiteFooter/SiteFooter.cjs.js +2 -2
  9. package/dist/SiteFooter/SiteFooter.esm.js +3 -3
  10. package/dist/SiteHeader/SiteHeader.cjs.js +2 -2
  11. package/dist/SiteHeader/SiteHeader.esm.js +2 -2
  12. package/dist/Tag/Tag.cjs.js +7 -79
  13. package/dist/Tag/Tag.esm.js +6 -78
  14. package/dist/TextArea/TextArea.cjs.js +3 -3
  15. package/dist/TextArea/TextArea.esm.js +3 -3
  16. package/dist/_shared/cjs/{SiteFooter-6381ac4a.js → SiteFooter-97c27b29.js} +1 -1
  17. package/dist/_shared/cjs/{SiteHeader.rehydrator-a3f07c9e.js → SiteHeader.rehydrator-af3dddef.js} +1 -1
  18. package/dist/_shared/cjs/Tag-42ddca45.js +84 -0
  19. package/dist/_shared/cjs/{index.es-77def0c9.js → index.es-26dd8c5d.js} +2 -0
  20. package/dist/_shared/esm/{SiteFooter-233bb926.js → SiteFooter-94316b8b.js} +1 -1
  21. package/dist/_shared/esm/{SiteHeader.rehydrator-8f554bfd.js → SiteHeader.rehydrator-1b507253.js} +1 -1
  22. package/dist/_shared/esm/Tag-92c088a9.js +78 -0
  23. package/dist/_shared/esm/{index.es-00cb3bcb.js → index.es-c552c0ea.js} +2 -1
  24. package/dist/index.es.js +162 -101
  25. package/dist/index.es.js.map +1 -1
  26. package/dist/index.js +162 -100
  27. package/dist/index.js.map +1 -1
  28. package/dist/styles.css +2 -2
  29. package/dist/types/components/InformationCard/InformationCard.d.ts +57 -0
  30. package/dist/types/components/InformationCard/index.d.ts +1 -0
  31. package/dist/types/components/Select/Select.d.ts +1 -0
  32. package/dist/types/components/index.d.ts +1 -0
  33. package/dist/types/styles.d.ts +1 -0
  34. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -653,7 +653,6 @@ var Base = function (_a) {
653
653
  React__default["default"].createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
654
654
  };
655
655
 
656
- // Do equal height boxes story
657
656
  /**
658
657
  * Use `Box` as a simple way to group bespoke content and interactive elements together.
659
658
  */
@@ -2100,6 +2099,164 @@ var GroupItem = function (_a) {
2100
2099
  };
2101
2100
  Group.Item = GroupItem;
2102
2101
 
2102
+ /**
2103
+ * Do not edit directly
2104
+ * Generated file
2105
+ */
2106
+ var ArcBreakpointS = 636;
2107
+ var ArcBreakpointM = 768;
2108
+ var ArcBreakpointL = 1024;
2109
+
2110
+ const BtIconArrowRight = (props) =>
2111
+ /*#__PURE__*/ React__default["default"].createElement(
2112
+ "svg",
2113
+ Object.assign(
2114
+ {
2115
+ xmlns: "http://www.w3.org/2000/svg",
2116
+ viewBox: "0 0 32 32",
2117
+ },
2118
+ props,
2119
+ ),
2120
+ /*#__PURE__*/ React__default["default"].createElement("defs", null),
2121
+ /*#__PURE__*/ React__default["default"].createElement("path", {
2122
+ 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",
2123
+ fill: "currentColor",
2124
+ }),
2125
+ /*#__PURE__*/ React__default["default"].createElement("path", {
2126
+ d: "M18.14648,11.64648a.49983.49983,0,0,0,0,.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.5.5,0,1,0,.707.707L23.207,16l-4.35351-4.35352A.49983.49983,0,0,0,18.14648,11.64648Z",
2127
+ fill: "currentColor",
2128
+ }),
2129
+ );
2130
+
2131
+ const BtIconCross = (props) =>
2132
+ /*#__PURE__*/ React__default["default"].createElement(
2133
+ "svg",
2134
+ Object.assign(
2135
+ {
2136
+ xmlns: "http://www.w3.org/2000/svg",
2137
+ viewBox: "0 0 32 32",
2138
+ },
2139
+ props,
2140
+ ),
2141
+ /*#__PURE__*/ React__default["default"].createElement("defs", null),
2142
+ /*#__PURE__*/ React__default["default"].createElement("path", {
2143
+ 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",
2144
+ fill: "currentColor",
2145
+ }),
2146
+ /*#__PURE__*/ React__default["default"].createElement("path", {
2147
+ 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",
2148
+ fill: "currentColor",
2149
+ }),
2150
+ );
2151
+
2152
+ const BtIconCrossFill = (props) =>
2153
+ /*#__PURE__*/ React__default["default"].createElement(
2154
+ "svg",
2155
+ Object.assign(
2156
+ {
2157
+ xmlns: "http://www.w3.org/2000/svg",
2158
+ viewBox: "0 0 32 32",
2159
+ },
2160
+ props,
2161
+ ),
2162
+ /*#__PURE__*/ React__default["default"].createElement("defs", null),
2163
+ /*#__PURE__*/ React__default["default"].createElement("path", {
2164
+ 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",
2165
+ fill: "currentColor",
2166
+ }),
2167
+ );
2168
+
2169
+ /**
2170
+ * use `Tag` to promote features and manage filtering.
2171
+ */
2172
+ var Tag = function (_a) {
2173
+ 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"]);
2174
+ var surface = React.useContext(Context$3).surface;
2175
+ var _b = React.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
2176
+ var onRemoveHandler = function () {
2177
+ setIsRemoved(function (p) { return !p; });
2178
+ onRemove && onRemove();
2179
+ };
2180
+ return (React__default["default"].createElement("div", __assign({ className: classNames("arc-Tag", {
2181
+ "arc-Tag--onDarkSurface": surface === "dark",
2182
+ "arc-Tag--isRemovable": isRemovable,
2183
+ "arc-Tag--hasIcon": icon,
2184
+ "arc-Tag--hasLink": link || onClick,
2185
+ "arc-Tag--removed": isRemoved
2186
+ }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
2187
+ link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
2188
+ icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
2189
+ React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
2190
+ React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
2191
+ icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
2192
+ React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
2193
+ React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
2194
+ icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
2195
+ React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
2196
+ React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
2197
+ isRemovable && (React__default["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" },
2198
+ React__default["default"].createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
2199
+ React__default["default"].createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
2200
+ };
2201
+
2202
+ /**
2203
+ * Use `VerticalSpace` to create vertical space between components.
2204
+ */
2205
+ var VerticalSpace = function (_a) {
2206
+ var _b;
2207
+ var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
2208
+ return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
2209
+ "arc-VerticalSpace": true
2210
+ },
2211
+ _b["arc-VerticalSpace--size".concat(size)] = size,
2212
+ _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
2213
+ _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
2214
+ _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
2215
+ _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
2216
+ _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
2217
+ _b)) }, filterDataAttrs(props))));
2218
+ };
2219
+
2220
+ var InformationCard = function (_a) {
2221
+ 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, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "headingLevel"]);
2222
+ var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(ArcBreakpointS, "px)"));
2223
+ var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
2224
+ var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
2225
+ var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
2226
+ var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
2227
+ var HeadingElement = "h".concat(headingLevel);
2228
+ return (React__default["default"].createElement("div", __assign({ className: classNames("arc-InformationCard", {
2229
+ "arc-InformationCard--interactive": cardUrl
2230
+ }) }, filterDataAttrs(props)),
2231
+ React__default["default"].createElement(Surface, { growVertically: true, padding: containerSpacing, background: "white" },
2232
+ image && (React__default["default"].createElement("div", { className: "arc-InformationCard-img" },
2233
+ React__default["default"].createElement(Image, __assign({}, image)),
2234
+ React__default["default"].createElement(VerticalSpace, { size: assetSpacing }))),
2235
+ icon && (React__default["default"].createElement(React__default["default"].Fragment, null,
2236
+ React__default["default"].createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
2237
+ React__default["default"].createElement(VerticalSpace, { size: assetSpacing }))),
2238
+ label && (React__default["default"].createElement(React__default["default"].Fragment, null,
2239
+ React__default["default"].createElement("span", { className: "arc-InformationCard-label" }, label),
2240
+ React__default["default"].createElement(VerticalSpace, { size: headingSpacing }))),
2241
+ React__default["default"].createElement(HeadingElement, { className: "arc-InformationCard-heading" }, cardUrl ? (React__default["default"].createElement("a", { className: "arc-InformationCard-headingLink", href: cardUrl, onClick: onClick }, heading)) : (heading)),
2242
+ React__default["default"].createElement("div", { className: "arc-InformationCard-textContainer" }, text && (React__default["default"].createElement(React__default["default"].Fragment, null,
2243
+ React__default["default"].createElement(VerticalSpace, { size: headingSpacing }),
2244
+ React__default["default"].createElement(Text, null, text),
2245
+ (button || tags || footerLogo) && React__default["default"].createElement(VerticalSpace, { size: "24" })))),
2246
+ tags && (React__default["default"].createElement(React__default["default"].Fragment, null,
2247
+ React__default["default"].createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
2248
+ var text = _a.text, tagProps = __rest(_a, ["text"]);
2249
+ return (React__default["default"].createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
2250
+ React__default["default"].createElement(Tag, __assign({}, tagProps), text)));
2251
+ })),
2252
+ (button || footerLogo) && React__default["default"].createElement(VerticalSpace, { size: "24" }))),
2253
+ React__default["default"].createElement("div", { className: "arc-InformationCard-footer" },
2254
+ button && !cardUrl && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
2255
+ React__default["default"].createElement(Button, __assign({}, button, { iconPosition: "beforeText", fill: "flat", icon: BtIconArrowRight })))),
2256
+ footerLogo && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
2257
+ React__default["default"].createElement(Image, __assign({}, footerLogo))))))));
2258
+ };
2259
+
2103
2260
  /**
2104
2261
  * Use `Markup` to display HTML-formatted text.
2105
2262
  */
@@ -35051,24 +35208,6 @@ const $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2 = $5d3850c4d0b4e6c7$export$b6d95
35051
35208
  const $5d3850c4d0b4e6c7$export$f99233281efd08a0 = $5d3850c4d0b4e6c7$export$16f7638e4a34b909;
35052
35209
  const $5d3850c4d0b4e6c7$export$393edc798c47379d = $5d3850c4d0b4e6c7$export$94e94c2ec2c954d5;
35053
35210
 
35054
- /**
35055
- * Use `VerticalSpace` to create vertical space between components.
35056
- */
35057
- var VerticalSpace = function (_a) {
35058
- var _b;
35059
- var _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "24" : _d, sizeS = _a.sizeS, sizeM = _a.sizeM, sizeL = _a.sizeL, sizeXL = _a.sizeXL, props = __rest(_a, ["isDebugVisible", "size", "sizeS", "sizeM", "sizeL", "sizeXL"]);
35060
- return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
35061
- "arc-VerticalSpace": true
35062
- },
35063
- _b["arc-VerticalSpace--size".concat(size)] = size,
35064
- _b["arc-VerticalSpace--sizeS".concat(sizeS)] = sizeS && sizeS,
35065
- _b["arc-VerticalSpace--sizeM".concat(sizeM)] = sizeM && sizeM,
35066
- _b["arc-VerticalSpace--sizeL".concat(sizeL)] = sizeL && sizeL,
35067
- _b["arc-VerticalSpace--sizeXL".concat(sizeXL)] = sizeXL && sizeXL,
35068
- _b["arc-VerticalSpace--debugVisible"] = isDebugVisible,
35069
- _b)) }, filterDataAttrs(props))));
35070
- };
35071
-
35072
35211
  /** Use `Modal` to focus a user's attention to an urgent or required prompt for interaction or input. */
35073
35212
  var Modal = function (_a) {
35074
35213
  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"]);
@@ -37621,11 +37760,11 @@ const BtIconChevronUp2Px = (props) =>
37621
37760
  /** Use `Select` to choose from a dropdown list of options. */
37622
37761
  var Select = function (_a) {
37623
37762
  var _b;
37624
- 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"]);
37763
+ var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, 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, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "name", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
37625
37764
  var id = React.useId();
37626
37765
  var arcRootElement = React.useContext(ArcRootElementContext);
37627
37766
  var surface = React.useContext(Context$3).surface;
37628
- var _d = React.useState(defaultValue), selectedValue = _d[0], setSelectedValue = _d[1];
37767
+ var _e = React.useState(defaultValue), selectedValue = _e[0], setSelectedValue = _e[1];
37629
37768
  var onValueChange = function (value) {
37630
37769
  onChange && onChange(value);
37631
37770
  setSelectedValue(value);
@@ -37646,7 +37785,7 @@ var Select = function (_a) {
37646
37785
  };
37647
37786
  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 },
37648
37787
  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); } },
37649
- React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, className: classNames("arc-Select-trigger", (_b = {
37788
+ React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, "aria-label": ariaLabel, className: classNames("arc-Select-trigger", (_b = {
37650
37789
  "arc-Select-trigger--constrained": !isFluid,
37651
37790
  "arc-Select-trigger--onDarkSurface": surface === "dark",
37652
37791
  "arc-Select-trigger--invalid": errorMessage
@@ -37675,13 +37814,6 @@ var Select = function (_a) {
37675
37814
  React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px, size: 16 })))))));
37676
37815
  };
37677
37816
 
37678
- /**
37679
- * Do not edit directly
37680
- * Generated file
37681
- */
37682
- var ArcBreakpointM = 768;
37683
- var ArcBreakpointL = 1024;
37684
-
37685
37817
  /**
37686
37818
  * Use `SiteFooter` to display information at the bottom of a page.
37687
37819
  */
@@ -39160,77 +39292,6 @@ Tabs.Tab = Tab;
39160
39292
  Tabs.List = TabsList;
39161
39293
  Tabs.Content = TabContent;
39162
39294
 
39163
- const BtIconCross = (props) =>
39164
- /*#__PURE__*/ React__default["default"].createElement(
39165
- "svg",
39166
- Object.assign(
39167
- {
39168
- xmlns: "http://www.w3.org/2000/svg",
39169
- viewBox: "0 0 32 32",
39170
- },
39171
- props,
39172
- ),
39173
- /*#__PURE__*/ React__default["default"].createElement("defs", null),
39174
- /*#__PURE__*/ React__default["default"].createElement("path", {
39175
- 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",
39176
- fill: "currentColor",
39177
- }),
39178
- /*#__PURE__*/ React__default["default"].createElement("path", {
39179
- 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",
39180
- fill: "currentColor",
39181
- }),
39182
- );
39183
-
39184
- const BtIconCrossFill = (props) =>
39185
- /*#__PURE__*/ React__default["default"].createElement(
39186
- "svg",
39187
- Object.assign(
39188
- {
39189
- xmlns: "http://www.w3.org/2000/svg",
39190
- viewBox: "0 0 32 32",
39191
- },
39192
- props,
39193
- ),
39194
- /*#__PURE__*/ React__default["default"].createElement("defs", null),
39195
- /*#__PURE__*/ React__default["default"].createElement("path", {
39196
- 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",
39197
- fill: "currentColor",
39198
- }),
39199
- );
39200
-
39201
- /**
39202
- * use `Tag` to promote features and manage filtering.
39203
- */
39204
- var Tag = function (_a) {
39205
- 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"]);
39206
- var surface = React.useContext(Context$3).surface;
39207
- var _b = React.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
39208
- var onRemoveHandler = function () {
39209
- setIsRemoved(function (p) { return !p; });
39210
- onRemove && onRemove();
39211
- };
39212
- return (React__default["default"].createElement("div", __assign({ className: classNames("arc-Tag", {
39213
- "arc-Tag--onDarkSurface": surface === "dark",
39214
- "arc-Tag--isRemovable": isRemovable,
39215
- "arc-Tag--hasIcon": icon,
39216
- "arc-Tag--hasLink": link || onClick,
39217
- "arc-Tag--removed": isRemoved
39218
- }) }, (isRemoved && { "aria-hidden": true }), filterDataAttrs(props)),
39219
- link ? (React__default["default"].createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
39220
- icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
39221
- React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
39222
- React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement(React__default["default"].Fragment, null, onClick ? (React__default["default"].createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
39223
- icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
39224
- React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
39225
- React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))) : (React__default["default"].createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
39226
- icon && (React__default["default"].createElement("span", { className: "arc-Tag-icon" },
39227
- React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
39228
- React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
39229
- isRemovable && (React__default["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" },
39230
- React__default["default"].createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
39231
- React__default["default"].createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
39232
- };
39233
-
39234
39295
  /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
39235
39296
  var TextArea = React.forwardRef(function (_a, ref) {
39236
39297
  var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, 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, props = __rest(_a, ["defaultValue", "errorMessage", "helper", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText"]);
@@ -40072,6 +40133,7 @@ exports.Group = Group;
40072
40133
  exports.Heading = Heading;
40073
40134
  exports.Icon = Icon;
40074
40135
  exports.Image = Image;
40136
+ exports.InformationCard = InformationCard;
40075
40137
  exports.Markup = Markup;
40076
40138
  exports.MediaCard = MediaCard;
40077
40139
  exports.Modal = Modal;