@thecb/components 11.11.0-beta.4 → 11.11.0-beta.7

package/dist/index.esm.js

@@ -15814,7 +15814,7 @@ var GenericCardLarge = function GenericCardLarge() {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
-    "aria-label": "Card Payment"
+    "aria-label": "Credit card"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "36",
     height: "24",
@@ -18692,7 +18692,9 @@ var VisaSmallIcon = function VisaSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Visa"
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18719,7 +18721,9 @@ var AmExSmallIcon = function AmExSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "American Express"
   }, /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_3693_1095)"
   }, /*#__PURE__*/React__default.createElement("g", {
@@ -18818,7 +18822,9 @@ var DiscoverSmallIcon = function DiscoverSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Discover"
   }, /*#__PURE__*/React__default.createElement("g", {
     clipPath: "url(#clip0_3818_267)"
   }, /*#__PURE__*/React__default.createElement("path", {
@@ -18943,7 +18949,9 @@ var GenericSmallIcon = function GenericSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Credit card"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "24",
     height: "16",
@@ -18964,7 +18972,9 @@ var MasterCardSmallIcon = function MasterCardSmallIcon() {
     height: "16",
     viewBox: "0 0 24 16",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Mastercard"
   }, /*#__PURE__*/React__default.createElement("rect", {
     width: "24",
     height: "16",
@@ -22615,6 +22625,7 @@ var SortableTableHeading$1 = themeComponent(SortableTableHeading, "SortableTable
 
 var DropdownIcon = function DropdownIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
+    "aria-hidden": "true",
     version: "1.2",
     xmlns: "http://www.w3.org/2000/svg",
     overflow: "visible",
@@ -23964,7 +23975,7 @@ var IconWrapper = styled.div.withConfig({
 var DropdownContentWrapper = styled.div.withConfig({
   displayName: "Dropdown__DropdownContentWrapper",
   componentId: "sc-pn6m0h-1"
-})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE, function (_ref2) {
+})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], STORM_GREY, WHITE, function (_ref2) {
   var widthFitOptions = _ref2.widthFitOptions;
   return widthFitOptions ? "fit-content" : "100%";
 }, function (_ref3) {
@@ -24269,7 +24280,7 @@ var Dropdown = function Dropdown(_ref13) {
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
-    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
+    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : STORM_GREY,
     dataQa: placeholder,
     extraStyles: disabled ? "".concat(inputPlaceholderTextStyle).concat(inputDisabledStyle) : inputPlaceholderTextStyle,
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
@@ -25927,7 +25938,8 @@ var FormInput = function FormInput(_ref15) {
     minWidth: "100%"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
-    align: "center"
+    align: "center",
+    overflow: true
   }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     color: themeValues.labelColor,
@@ -25935,22 +25947,16 @@ var FormInput = function FormInput(_ref15) {
     fontWeight: themeValues.fontWeight,
     extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
     id: createIdFromString(labelTextWhenNoError)
-  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(Text$1, {
-    variant: labelTextVariant,
-    color: themeValues.linkColor,
-    weight: themeValues.fontWeight,
-    hoverStyles: themeValues.hoverFocusStyles,
-    extraStyles: "text-decoration: underline; cursor: pointer; &:focus { outline-offset: -2px; }",
-    onClick: function onClick() {
+  }, labelTextWhenNoError), type === "password" && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "smallGhost",
+    text: showPassword ? "Hide" : "Show",
+    action: function action() {
       return setShowPassword(!showPassword);
     },
-    tabIndex: "0",
     "aria-label": showPassword ? "Hide Password" : "Show password",
-    "aria-live": "polite",
-    onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && setShowPassword(!showPassword);
-    }
-  }, showPassword ? "Hide" : "Show"), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
+    extraStyles: "margin: 0; min-width: auto;",
+    textExtraStyles: "color: ".concat(themeValues.linkColor, ";")
+  }), isMobile && decorator && /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 0 auto"
   }, decorator)))), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -26290,7 +26296,7 @@ var FormattedAddress = function FormattedAddress(_ref) {
 var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$n, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
-var autopayTextColor = "".concat(REGENT_GREY);
+var autopayTextColor = "".concat(SEA_GREEN);
 var fallbackValues$o = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
@@ -26326,8 +26332,8 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
   }, "Savings Account ending in ", lastFour), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
-    extraStyles: "font-style: italic;"
-  }, "Autopay Enabled")));
+    extraStyles: "font-style: italic; font-size: .75rem;"
+  }, "Autopay On")));
 };
 var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
@@ -26358,21 +26364,25 @@ var cardBrands = {
     large: GenericCardLarge
   }
 };
+var normalizeType = function normalizeType(type) {
+  if (!type) return undefined;
+  var lower = type.toLowerCase();
+  if (lower === "mastercard") return "master_card";
+  return lower;
+};
 var CardType = function CardType(_ref) {
   var type = _ref.type,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "small" : _ref$size;
-  var _ref2 = cardBrands[type] || cardBrands["default"],
+  var normalizedType = normalizeType(type);
+  var _ref2 = cardBrands[normalizedType] || cardBrands["default"],
     label = _ref2.label,
     IconComponent = _ref2[size];
-  return /*#__PURE__*/React__default.createElement("span", {
-    role: "img",
-    "aria-label": label
-  }, /*#__PURE__*/React__default.createElement(IconComponent, null));
+  return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconComponent, null));
 };
 
 var textColor$2 = "".concat(CHARADE_GREY);
-var autopayTextColor$1 = "".concat(REGENT_GREY);
+var autopayTextColor$1 = "".concat(SEA_GREEN);
 var fallbackValues$p = {
   textColor: textColor$2,
   autopayTextColor: autopayTextColor$1
@@ -26401,13 +26411,15 @@ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        color: ASH_GREY,
+        fontSize: ".75rem",
+        color: STORM_GREY,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Exp Date ", expireDate);
     case EXPIRING_SOON:
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
+        fontSize: ".75rem",
         color: FIRE_YELLOW,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Expiring Soon ", expireDate);
@@ -26415,7 +26427,8 @@ var renderCardStatus = function renderCardStatus(expirationStatus, expireDate) {
       return /*#__PURE__*/React__default.createElement(Text$1, {
         as: as,
         variant: "pXS",
-        color: ASH_GREY,
+        fontSize: ".75rem",
+        color: STORM_GREY,
         extraStyles: "text-align: ".concat(textAlign, "; margin: ").concat(textMargin, ";")
       }, "Expired");
   }
@@ -26442,7 +26455,7 @@ var CreditCardWrapper = styled.div.withConfig({
 var CCIconWrapper = styled.div.withConfig({
   displayName: "FormattedCreditCard__CCIconWrapper",
   componentId: "sc-s0ta5l-1"
-})(["margin-right:16px;width:30px;height:auto;display:flex;"]);
+})(["margin-right:16px;width:36px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
     type = _ref.type,
@@ -26450,23 +26463,26 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     expireDate = _ref.expireDate,
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
+  var _useContext = useContext(ThemeContext),
+    isMobile = _useContext.isMobile;
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(CardType, {
-    type: type
+    type: type,
+    size: isMobile ? "small" : "large"
   })), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
-    padding: "0 0 0 8px",
+    padding: "0",
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
   }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(Fragment$1, null, renderCardStatus(expirationStatus, expireDate, "left", "p"))), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
-    extraStyles: "font-style: italic;"
-  }, "Autopay Enabled")));
+    extraStyles: "font-style: italic; font-size: .75rem;"
+  }, "Autopay On")));
 };
 var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$p);
 
@@ -41149,7 +41165,7 @@ var EmailForm = function EmailForm(_ref) {
     }, []);
   }
   useConditionallyAddValidator(isRequired, required, actions.fields.email.addValidator, actions.fields.email.removeValidator);
-  var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
+  var emailFieldErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   return /*#__PURE__*/React__default.createElement(FormContainer$1, {
     variant: variant,
     role: "form",
@@ -41241,7 +41257,7 @@ var ForgotPasswordForm = function ForgotPasswordForm(_ref) {
       };
     }, []);
   }
-  var EmailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Email address is not valid");
+  var EmailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   return /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Email address",
     errorMessages: EmailErrorMessages,
@@ -45940,7 +45956,7 @@ var LoginForm = function LoginForm(_ref) {
       };
     }, []);
   }
-  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Invalid email address");
+  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email address is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   var passwordErrorMessages = _defineProperty({}, required.error, "Password is required");
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {
     role: "form",
@@ -48068,7 +48084,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
     textDecoration: themeValues.modalLinkTextDecoration,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;",
     role: "button" // This should always be a "button" since it opens a modal
     ,
     className: "modal-trigger"
@@ -48907,10 +48923,10 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     componentId: "sc-1wtp6qc-0"
   })(["height:", ";width:", ";", " transition:opacity 0.3s ease;"], function (_ref2) {
     var isMobile = _ref2.isMobile;
-    return isMobile ? "14px" : "18px";
+    return isMobile ? "16px" : "24px";
   }, function (_ref3) {
     var isMobile = _ref3.isMobile;
-    return isMobile ? "22px" : "28px";
+    return isMobile ? "24px" : "36px";
   }, function (_ref4) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";
@@ -48982,7 +48998,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     padding: section.titleIcon ? "0 0 0 8px" : "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
-    htmlFor: "radio-input-".concat(idString(section)),
+    htmlFor: "radio-".concat(idString(section)),
     color: CHARADE_GREY
   }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
     id: "right-icons-".concat(idString(section)),
@@ -49313,7 +49329,7 @@ var RegistrationForm = function RegistrationForm(_ref) {
   }
   var firstNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "First name is required"), validName.error, "First name contains invalid characters");
   var lastNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "Last name is required"), validName.error, "Last name contains invalid characters");
-  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Invalid email address");
+  var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Please enter a valid email address in the format user@example.com");
   var passwordErrorMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, required.error, "Password is required"), hasLength.error, "Password must have at least 8 characters"), hasNumber.error, "Password must contain at least one number"), hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)");
   var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
   return /*#__PURE__*/React__default.createElement(FormInputColumn, {
@@ -50262,6 +50278,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
     props = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
+    "aria-hidden": "true",
     width: width,
     height: height,
     viewBox: "0 0 ".concat(width, " ").concat(height),
@@ -51444,16 +51461,15 @@ var TurnstileWidget = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   }, error)));
 });
 
-var hoverColor$6 = SAPPHIRE_BLUE;
-var activeColor$b = PEACOCK_BLUE;
-var linkColor$6 = MATISSE_BLUE;
-var borderColor$7 = "rgba(255, 255, 255, 0.85)";
-var TOOLTIP_THEME_SOURCE = "Button";
+var hoverColor$6 = ROYAL_BLUE;
+var activeColor$b = CONGRESS_BLUE;
+var linkColor$6 = ROYAL_BLUE_VIVID;
+var textColor$5 = CHARADE_GREY;
 var fallbackValues$12 = {
-  borderColor: borderColor$7,
   linkColor: linkColor$6,
   hoverColor: hoverColor$6,
-  activeColor: activeColor$b
+  activeColor: activeColor$b,
+  textColor: textColor$5
 };
 
 var Tooltip = function Tooltip(_ref) {
@@ -51493,14 +51509,15 @@ var Tooltip = function Tooltip(_ref) {
       arrowBottom: "-8px",
       arrowLeft: "auto"
     } : _ref$arrowPosition,
-    arrowColor = _ref.arrowColor;
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? WHITE : _ref$backgroundColor;
   var closeTimeoutRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipOpen = _useState2[0],
     setTooltipOpen = _useState2[1];
   var themeContext = useContext(ThemeContext);
-  var themeValues = createThemeValues(themeContext, fallbackValues$12, TOOLTIP_THEME_SOURCE);
+  var themeValues = createThemeValues(themeContext, fallbackValues$12, "Tooltip");
   var top = contentPosition.top,
     right = contentPosition.right,
     bottom = contentPosition.bottom,
@@ -51540,19 +51557,30 @@ var Tooltip = function Tooltip(_ref) {
   }, []);
   var renderTrigger = function renderTrigger() {
     if (hasCustomTrigger && children) {
-      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+      var _child$props, _child$props2;
+      var child = React__default.Children.only(children);
+      var _ref2 = (_child$props = child.props) !== null && _child$props !== void 0 ? _child$props : {},
+        childOnFocus = _ref2.onFocus,
+        childOnBlur = _ref2.onBlur,
+        childOnKeyDown = _ref2.onKeyDown;
+      return /*#__PURE__*/React__default.cloneElement(child, {
         "aria-describedby": tooltipID,
-        onFocus: function onFocus() {
-          return handleToggleTooltip(true);
+        onFocus: function onFocus(e) {
+          childOnFocus === null || childOnFocus === void 0 || childOnFocus(e);
+          handleToggleTooltip(true);
         },
-        onBlur: function onBlur() {
-          return handleToggleTooltip(false);
+        onBlur: function onBlur(e) {
+          childOnBlur === null || childOnBlur === void 0 || childOnBlur(e);
+          handleToggleTooltip(false);
+        },
+        onKeyDown: function onKeyDown(e) {
+          childOnKeyDown === null || childOnKeyDown === void 0 || childOnKeyDown(e);
+          handleKeyDown(e);
         },
-        onKeyDown: handleKeyDown,
         tabIndex: "0",
-        style: {
+        style: _objectSpread2(_objectSpread2({}, (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.style), {}, {
           cursor: "pointer"
-        }
+        })
       });
     }
     return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -51585,19 +51613,19 @@ var Tooltip = function Tooltip(_ref) {
     role: "tooltip",
     id: tooltipID,
     "aria-hidden": !tooltipOpen,
-    background: themeValues.borderColor,
+    background: backgroundColor,
     "data-qa": "tooltip-contents",
-    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(contentExtraStyles, "\n        "),
+    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          color: ").concat(themeValues.textColor, ";\n          ").concat(contentExtraStyles, "\n        "),
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
     border: "1px solid transparent",
     borderRadius: "4px",
     minWidth: minWidth,
     maxWidth: maxWidth
   }, typeof content === "string" ? /*#__PURE__*/React__default.createElement(Text$1, {
-    color: themeValues.linkColor
+    color: themeValues.textColor
   }, content) : content, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowColor || themeValues.borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(backgroundColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };