@thecb/components 12.0.4 → 12.0.6-beta.0

package/dist/index.esm.js

@@ -14066,8 +14066,13 @@ var PaymentMethodIcon = function PaymentMethodIcon(_ref) {
 };
 var PaymentMethodIcon$1 = themeComponent(PaymentMethodIcon, "Icons", fallbackValues$2, "info");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var AccountsIconSmall = function AccountsIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? true : _ref$ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "22px",
     height: "22px",
@@ -14078,7 +14083,8 @@ var AccountsIconSmall = function AccountsIconSmall(_ref) {
     style: {
       display: "inline-block",
       verticalAlign: "text-bottom"
-    }
+    },
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("rect", {
     id: "path-1-accountssmall",
     x: "0",
@@ -14245,8 +14251,13 @@ var ProfileIconSmall = function ProfileIconSmall(_ref) {
 };
 var ProfileIconSmall$1 = themeComponent(ProfileIconSmall, "Icons", fallbackValues$2, "primary");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var SettingsIconSmall = function SettingsIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? true : _ref$ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "22px",
     height: "22px",
@@ -14257,7 +14268,8 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
     style: {
       display: "inline-block",
       verticalAlign: "text-bottom"
-    }
+    },
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("rect", {
     id: "path-1-paymentssmall",
     x: "0",
@@ -14295,17 +14307,23 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
 };
 var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$2, "primary");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var WalletIconSmall = function WalletIconSmall(_ref) {
   var themeValues = _ref.themeValues,
     _ref$iconIndex = _ref.iconIndex,
     iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
-    colorOverride = _ref.colorOverride;
+    colorOverride = _ref.colorOverride,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? true : _ref$ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -14445,8 +14463,13 @@ var PropertiesAddIcon = function PropertiesAddIcon(_ref) {
 };
 var PropertiesAddIcon$1 = themeComponent(PropertiesAddIcon, "Icons", fallbackValues$2, "info");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? true : _ref$ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "22px",
@@ -14457,7 +14480,8 @@ var PropertiesIconSmall = function PropertiesIconSmall(_ref) {
     style: {
       display: "inline-block",
       verticalAlign: "text-bottom"
-    }
+    },
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
@@ -17223,17 +17247,23 @@ var CashieringImage = function CashieringImage() {
   })));
 };
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var FindIconSmall = function FindIconSmall(_ref) {
   var themeValues = _ref.themeValues,
     _ref$iconIndex = _ref.iconIndex,
-    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex;
+    iconIndex = _ref$iconIndex === void 0 ? 0 : _ref$iconIndex,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? true : _ref$ariaHidden;
   var maskId = "find-icon-mask-".concat(iconIndex);
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -17264,14 +17294,20 @@ var FindIconSmall = function FindIconSmall(_ref) {
 };
 var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
 
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
 var HistoryIconSmall = function HistoryIconSmall(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+    _ref$ariaHidden = _ref.ariaHidden,
+    ariaHidden = _ref$ariaHidden === void 0 ? true : _ref$ariaHidden;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": ariaHidden ? "true" : undefined
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M3.33337 8.33333C3.33337 7.8731 3.70647 7.5 4.16671 7.5H15.8334C16.2936 7.5 16.6667 7.8731 16.6667 8.33333V16.6667C16.6667 17.1269 16.2936 17.5 15.8334 17.5H4.16671C3.70647 17.5 3.33337 17.1269 3.33337 16.6667V8.33333Z",
     fill: themeValues.singleIconColor