@telus-uds/components-web 2.13.0 → 2.15.0

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -133,10 +133,11 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     nonIndexedContent,
     tokens,
     variant = {},
+    dictionary = _dictionary.default,
     ...rest
   } = _ref6;
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const hasIndexedContent = indexedContent.length > 0;
@@ -199,7 +200,14 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     })]
   });
 });
-TermsAndConditions.displayName = 'TermsAndConditions';
+TermsAndConditions.displayName = 'TermsAndConditions'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = _propTypes.default.shape({
+  headingHide: _propTypes.default.string.isRequired,
+  headingView: _propTypes.default.string.isRequired,
+  nonIndexedTitle: _propTypes.default.string.isRequired
+});
+
 TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
 
   /**
@@ -225,12 +233,21 @@ TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
    *
    * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
    */
-  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]))
+  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])),
+
+  /**
+   * Custom dictionary containing the labels to use for `TermsAndConditions`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
-  nonIndexedContent: []
+  nonIndexedContent: [],
+  dictionary: _dictionary.default
 };
 var _default = TermsAndConditions;
 exports.default = _default;

package/lib/Testimonial/Testimonial.js

@@ -104,11 +104,13 @@ const Testimonial = _ref5 => {
     imageSrc,
     image = imageSrc,
     additionalInfo,
-    testimonialStyle = 'heading',
+    testimonialStyle = 'large',
     tokens,
+    copy = 'en',
     variant = {},
     ...rest
   } = _ref5;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     testimonialContainerGap,
     quoteContainerGap,
@@ -117,9 +119,34 @@ const Testimonial = _ref5 => {
     figcaptionGap,
     textColor,
     icon,
+    iconFr,
     iconColor,
-    imageSize
-  } = (0, _componentsBase.useThemeTokens)('Testimonial', tokens, variant);
+    imageSize,
+    testimonialFontSizeLarge,
+    testimonialLineHeightLarge,
+    testimonialFontWeightLarge,
+    testimonialFontSizeHeading,
+    testimonialLineHeightHeading,
+    testimonialFontNameHeading,
+    testimonialFontWeightHeading,
+    authorFontSize,
+    authorLineHeight,
+    authorFontName,
+    authorFontWeight,
+    additionalFontSize,
+    additionalLineHeight,
+    additionalFontName,
+    additionalFontWeight
+  } = (0, _componentsBase.useThemeTokens)('Testimonial', tokens, variant, {
+    viewport
+  });
+
+  const getQuoteTestimonial = open => {
+    let quote = '';
+    if (copy === 'en') quote = open ? '\u201C' : '\u201D';else quote = open ? '\u00AB ' : ' \u00BB';
+    return quote;
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
     ...selectProps(rest),
@@ -132,7 +159,7 @@ const Testimonial = _ref5 => {
         variant: {
           size: 'micro'
         },
-        icon: icon
+        icon: copy === 'en' ? icon : iconFr
       }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
         dividerBackgroundColor: dividerBackgroundColor,
         dividerBorder: dividerBorder,
@@ -145,9 +172,12 @@ const Testimonial = _ref5 => {
         },
         tokens: {
           color: textColor,
-          fontWeight: '400'
+          fontSize: testimonialStyle === 'heading' ? testimonialFontSizeHeading : testimonialFontSizeLarge,
+          lineHeight: testimonialStyle === 'heading' ? testimonialLineHeightHeading : testimonialLineHeightLarge,
+          fontName: testimonialFontNameHeading,
+          fontWeight: testimonialStyle === 'heading' ? testimonialFontWeightHeading : testimonialFontWeightLarge
         },
-        children: `\u201C${testimonial}\u201D`
+        children: `${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`
       })
     }), (image || title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Figcaption, {
       figcaptionGap: figcaptionGap,
@@ -160,20 +190,26 @@ const Testimonial = _ref5 => {
       }) : image), (title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorInfoContainer, {
         children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {
-            size: 'small',
-            colour: 'secondary'
+            size: 'small'
           },
           tokens: {
-            fontWeight: '500'
+            color: textColor,
+            fontSize: authorFontSize,
+            lineHeight: authorLineHeight,
+            fontName: authorFontName,
+            fontWeight: authorFontWeight
           },
           children: title
         }), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {
-            size: 'micro',
-            colour: 'secondary'
+            size: 'small'
           },
           tokens: {
-            fontWeight: '400'
+            color: textColor,
+            fontSize: additionalFontSize,
+            lineHeight: additionalLineHeight,
+            fontName: additionalFontName,
+            fontWeight: additionalFontWeight
           },
           children: additionalInfo
         })]

package/lib/Toast/Toast.js

@@ -39,19 +39,29 @@ const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s f
 const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
-    containerBackgroundColor
+    padding
   } = _ref;
-  return containerBackgroundColor;
+  return padding;
 }, _ref2 => {
   let {
-    containerGap
+    padding
   } = _ref2;
+  return padding;
+}, _ref3 => {
+  let {
+    containerBackgroundColor
+  } = _ref3;
+  return containerBackgroundColor;
+}, _ref4 => {
+  let {
+    containerGap
+  } = _ref4;
   return containerGap;
 }, animation);
 
-const Toast = _ref3 => {
+const Toast = _ref5 => {
   let {
     toast,
     copy,
@@ -60,7 +70,7 @@ const Toast = _ref3 => {
     tokens,
     variant = {},
     ...rest
-  } = _ref3;
+  } = _ref5;
   // viewport hook added to work adjust the padding to different sizes
   const viewport = (0, _componentsBase.useViewport)();
   const {
@@ -76,7 +86,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter,
     animationColorBefore,
     animationColorAfter,
-    chevronlinkFontWeight
+    chevronlinkFontWeight,
+    ...extraTokens
   } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
     viewport
   }); // inherit ChevronLink tokens for animation colors
@@ -109,6 +120,7 @@ const Toast = _ref3 => {
     animationColorAfter: animationColorAfter,
     animationFillColorBefore: chevronInverseColor,
     animationFillColorAfter: chevronDefaultColor,
+    ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       variant: {

package/lib-module/Badge/Badge.js

@@ -61,7 +61,8 @@ const Badge = _ref6 => {
     paddingTop,
     paddingBottom,
     fontName,
-    fontWeight
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant);
   const semanticGradient = gradient && transformGradient(gradient);
   const {
@@ -78,6 +79,11 @@ const Badge = _ref6 => {
     background = semanticGradient;
   }
 
+  const fontSizeMapping = {
+    12: 'micro',
+    14: 'small',
+    16: 'h6'
+  };
   return /*#__PURE__*/_jsx(BadgeContainer, {
     isOutlineOffer: isOutlineOffer,
     isAlternative: alternative,
@@ -95,6 +101,9 @@ const Badge = _ref6 => {
         fontWeight,
         color
       },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });

package/lib-module/Card/CardContent.js

@@ -19,7 +19,8 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent
+    contentJustifyContent: justifyContent,
+    borderWidth
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
@@ -28,10 +29,10 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     borderBottomRightRadius: withFooter ? 0 : borderRadius,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
+    paddingBottom: paddingBottom - borderWidth,
+    paddingLeft: paddingLeft - borderWidth,
+    paddingRight: paddingRight - borderWidth,
+    paddingTop: paddingTop - borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,

package/lib-module/DatePicker/DatePicker.js

@@ -7,6 +7,7 @@ import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
 import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
 import moment from 'moment';
+import { isUndefined } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
@@ -20,29 +21,23 @@ const dateFormatWithoutSpaces = 'DD/MM/YYYY';
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-  let responsiveDaySize;
 
   if (viewport === 'xs') {
-    responsiveDaySize = inline ? undefined : 36;
-  } else {
-    responsiveDaySize = inline ? 60 : 44;
+    return inline ? undefined : 36;
   }
 
-  return responsiveDaySize;
+  return inline ? 60 : 44;
 };
 
 const getResponsiveCircleSize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-  let responsiveCircleSize;
 
   if (viewport === 'xs') {
-    responsiveCircleSize = 26;
-  } else {
-    responsiveCircleSize = inline ? 44 : 26;
+    return 26;
   }
 
-  return responsiveCircleSize;
+  return inline ? 44 : 26;
 };
 
 const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
@@ -111,7 +106,11 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     copy
   });
   useEffect(() => {
-    if (!moment(date).isSame(inputDate)) {
+    /**
+     * `date` could be passed as `null` to reset the value so explicitly
+     * checking for not being `undefined`
+     */
+    if (!isUndefined(date) && !moment(date).isSame(inputDate)) {
       setInputDate(date);
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
@@ -153,6 +152,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const onChange = value => {
     setInputDate(value);
     setInputText(value.format(dateFormat));
+    setIsFocused(false);
     if (onDateChange) onDateChange(value);
   };
 

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { getThemeTokens, Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokens, useTheme } from '@telus-uds/components-base';
-import IconButton from '../IconButton';
-import { InputField, InputWrapper, LeftButtonWrapper, RightButtonWrapper } from './styles';
+import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback } from '@telus-uds/components-base';
+import { InputField, InputWrapper } from './styles';
 import defaultDictionary from './dictionary';
+import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
@@ -20,6 +20,7 @@ const QuantitySelector = _ref => {
     minNumber,
     maxNumber,
     defaultValue,
+    value,
     label,
     hint,
     hintPosition,
@@ -33,19 +34,9 @@ const QuantitySelector = _ref => {
     testID
   } = _ref;
   const {
-    components: {
-      QuantitySelector: componentTheme
-    }
-  } = useTheme();
-  const {
-    leftIcon,
-    rightIcon,
-    padding
-  } = useThemeTokens('QuantitySelector', tokens, variant);
-  const [error, setError] = useState('');
-  const {
-    alternative
+    disabled
   } = variant;
+  const [error, setError] = useState('');
   const getCopy = useCopy({
     dictionary,
     copy
@@ -58,17 +49,16 @@ const QuantitySelector = _ref => {
     return numberToEvaluate;
   };
 
-  const initialValue = getValidatedNumber(defaultValue);
   const {
     currentValue: number,
     setValue: setNumber
   } = useInputValue({
-    value: undefined,
-    initialValue,
+    value: getValidatedNumber(value),
+    initialValue: getValidatedNumber(defaultValue),
     onChange
   });
-  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !isNumber(maxNumber) || number < maxNumber;
+  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
   const inputValue = isNumber(number) ? number.toString() : '';
 
   const updateNumber = (newNumber, originalInputEvent) => {
@@ -100,20 +90,31 @@ const QuantitySelector = _ref => {
     tooltip: tooltip
   }) : null;
 
+  const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant);
+
   const renderTextInput = () => /*#__PURE__*/_jsx(TextInput, {
     nativeID: id,
     value: inputValue,
+    defaultValue: defaultValue,
     tokens: textInputState => {
       const {
+        inputWidth,
+        inputBorderWidth,
         inputBorderColor,
-        inputBackgroundColor
-      } = getThemeTokens(componentTheme, tokens, variant, textInputState);
-      return {
-        borderRadius: 0,
-        margin: 0,
-        padding: 0,
+        textColor,
+        inputBackgroundColor,
+        ...rest
+      } = getTokens({ ...textInputState
+      });
+      return { ...rest,
+        order: 1,
+        borderWidth: inputBorderWidth,
+        backgroundColor: inputBackgroundColor,
+        color: textColor,
+        width: inputWidth,
         borderColor: inputBorderColor,
-        backgroundColor: inputBackgroundColor
+        borderRadius: 0,
+        outerBorderWidth: 0
       };
     },
     onChange: inputChangeHandler // Using title as an accessibility workaround
@@ -127,38 +128,6 @@ const QuantitySelector = _ref => {
     accessibilityValueNow: number
   });
 
-  const getButtonTokens = isEnabled => buttonState => {
-    const disabled = !isEnabled;
-    const { ...buttonTokens
-    } = getThemeTokens(componentTheme, tokens, variant, { ...buttonState,
-      disabled
-    });
-    return { ...buttonTokens,
-      outerBorderGap: 0,
-      padding
-    };
-  };
-
-  const renderLeftButton = () => {
-    return /*#__PURE__*/_jsx(IconButton, {
-      icon: leftIcon,
-      tokens: getButtonTokens(isDecreaseEnabled),
-      onPress: event => updateNumber(number - 1, event),
-      onDoubleClick: event => updateNumber(number - 1, event),
-      accessibilityLabel: getCopy('accessibility').decreaseButton,
-      accessibilityDisabled: !isDecreaseEnabled
-    });
-  };
-
-  const renderRightButton = () => /*#__PURE__*/_jsx(IconButton, {
-    icon: rightIcon,
-    tokens: getButtonTokens(isIncreaseEnabled),
-    onPress: () => updateNumber(number + 1),
-    onDoubleClick: () => updateNumber(number + 1),
-    accessibilityLabel: getCopy('accessibility').increaseButton,
-    accessibilityDisabled: !isIncreaseEnabled
-  });
-
   return /*#__PURE__*/_jsxs(Box, {
     space: 2,
     testID: testID,
@@ -166,14 +135,39 @@ const QuantitySelector = _ref => {
       space: 2
     }), /*#__PURE__*/_jsxs(InputWrapper, {
       children: [/*#__PURE__*/_jsx(InputField, {
-        className: `${alternative ? 'alternative' : ''}`,
         children: renderTextInput()
-      }), /*#__PURE__*/_jsx(RightButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderRightButton()
-      }), /*#__PURE__*/_jsx(LeftButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderLeftButton()
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          order: 0
+        },
+        children: /*#__PURE__*/_jsx(SideButton, {
+          isEnabled: isDecreaseEnabled,
+          onPress: () => updateNumber(number - 1),
+          onDoubleClick: () => updateNumber(number - 1),
+          tokens: tokens,
+          variant: {
+            decrease: true,
+            ...variant
+          },
+          accessibilityLabel: getCopy('accessibility').decreaseButton,
+          accessibilityDisabled: !isDecreaseEnabled
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          order: 2
+        },
+        children: /*#__PURE__*/_jsx(SideButton, {
+          isEnabled: isIncreaseEnabled,
+          onPress: () => updateNumber(number + 1),
+          onDoubleClick: () => updateNumber(number + 1),
+          accessibilityLabel: getCopy('accessibility').increaseButton,
+          accessibilityDisabled: !isIncreaseEnabled,
+          tokens: tokens,
+          variant: {
+            increase: true,
+            ...variant
+          }
+        })
       })]
     }), error ? /*#__PURE__*/_jsx(Box, {
       vertical: 2,
@@ -224,6 +218,12 @@ QuantitySelector.propTypes = {
    */
   defaultValue: PropTypes.number,
 
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: PropTypes.number,
+
   /**
    * The label of the input field
    */
@@ -262,7 +262,8 @@ QuantitySelector.propTypes = {
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool
+    alternative: PropTypes.bool,
+    disabled: PropTypes.bool
   }),
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
 

package/lib-module/QuantitySelector/SideButton.js

@@ -0,0 +1,80 @@
+import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const SideButton = _ref => {
+  let {
+    isEnabled,
+    onPress,
+    onDoubleClick,
+    accessibilityLabel,
+    accessibilityDisabled,
+    tokens,
+    variant
+  } = _ref;
+  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant);
+
+  const getButtonTokens = _ref2 => {
+    let {
+      buttonState,
+      disabled
+    } = _ref2;
+    const {
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      ...rest
+    } = getTokens({ ...buttonState,
+      disabled
+    });
+    return { ...rest,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderRadius: borderRadius,
+      outerBorderTopLeftRadius: borderTopLeftRadius,
+      outerBorderTopRightRadius: borderTopRightRadius,
+      outerBorderBottomLeftRadius: borderBottomLeftRadius,
+      outerBorderBottomRightRadius: borderBottomRightRadius,
+      outerBorderGap: 0,
+      outerBorderWidth: 0
+    };
+  };
+
+  return /*#__PURE__*/_jsx(IconButton, {
+    tokens: buttonState => getButtonTokens({
+      disabled: !isEnabled,
+      buttonState
+    }),
+    onPress: onPress,
+    onDoubleClick: onDoubleClick,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityDisabled: accessibilityDisabled
+  });
+};
+
+SideButton.displayName = 'QuantitySelectorSideButton';
+SideButton.defaultProps = {
+  isEnabled: true,
+  onPress: () => {},
+  onDoubleClick: () => {},
+  accessibilityLabel: '',
+  accessibilityDisabled: false,
+  tokens: {},
+  variant: {}
+};
+SideButton.propTypes = {
+  isEnabled: PropTypes.bool,
+  onPress: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  accessibilityLabel: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  tokens: PropTypes.object,
+  variant: PropTypes.object
+};
+export default SideButton;

package/lib-module/QuantitySelector/styles.js

@@ -2,20 +2,8 @@ import styled from 'styled-components';
 export const InputField = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__InputField",
   componentId: "components-web__sc-1lrz1xk-0"
-})(["order:2;min-width:3.5rem;max-width:5 rem;height:28px;padding:0;width:64px;text-align:center;z-index:10;input{text-align:center;}&.alternative{input{height:40px;}}"]);
-const ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__ButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-1"
-})(["&.alternative{div[role='button']{height:42px;> div{height:40px;> div{padding:12px 16px;}}}}"]);
-export const LeftButtonWrapper = /*#__PURE__*/styled(ButtonWrapper).withConfig({
-  displayName: "styles__LeftButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-2"
-})(["order:0;div[role='button']{border-radius:4px 0px 0px 4px !important;> div{border-right:none;border-radius:4px 0px 0px 4px !important;}}&.alternative{div[role='button']{border-radius:36px 0px 0px 36px !important;> div{border-radius:24px 0px 0px 24px !important;}}}"]);
-export const RightButtonWrapper = /*#__PURE__*/styled(ButtonWrapper).withConfig({
-  displayName: "styles__RightButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-3"
-})(["order:3;div[role='button']{border-radius:0px 4px 4px 0px !important;> div{border-left:none;border-radius:0px 4px 4px 0px !important;}}&.alternative{div[role='button']{border-radius:0px 36px 36px 0px !important;> div{border-radius:0px 36px 36px 0px !important;}}}"]);
+})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
 export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__InputWrapper",
-  componentId: "components-web__sc-1lrz1xk-4"
-})(["textalign:start;display:flex;flexdirection:row;flexwrap:nowrap;justifycontent:center;"]);
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);