@7shifts/sous-chef 3.76.2 → 3.77.0-beta.0

package/dist/index.modern.js

@@ -21,68 +21,79 @@ import { parsePhoneNumber, AsYouType, getCountryCallingCode } from 'libphonenumb
 // This file is automatically generated by 'scripts/tokens/build-colors.sh'
 // Do not edit this file directly, if you need to add a color modify 'src/foundation/tokens/color/_color-tokens.scss'
 const COLORS = {
-  'white': 'var(--color-white)',
-  'black': 'var(--color-black)',
-  'tangerine-100': 'var(--color-tangerine-100)',
-  'tangerine-200': 'var(--color-tangerine-200)',
-  'tangerine-300': 'var(--color-tangerine-300)',
-  'tangerine-400': 'var(--color-tangerine-400)',
-  'tangerine-500': 'var(--color-tangerine-500)',
-  'tangerine-600': 'var(--color-tangerine-600)',
-  'eggplant-100': 'var(--color-eggplant-100)',
-  'eggplant-200': 'var(--color-eggplant-200)',
-  'eggplant-300': 'var(--color-eggplant-300)',
-  'eggplant-400': 'var(--color-eggplant-400)',
-  'eggplant-500': 'var(--color-eggplant-500)',
-  'eggplant-600': 'var(--color-eggplant-600)',
-  'mint-100': 'var(--color-mint-100)',
-  'mint-200': 'var(--color-mint-200)',
-  'mint-300': 'var(--color-mint-300)',
-  'mint-400': 'var(--color-mint-400)',
-  'mint-500': 'var(--color-mint-500)',
-  'mint-600': 'var(--color-mint-600)',
-  'radish-100': 'var(--color-radish-100)',
-  'radish-200': 'var(--color-radish-200)',
-  'radish-300': 'var(--color-radish-300)',
-  'radish-400': 'var(--color-radish-400)',
-  'radish-500': 'var(--color-radish-500)',
-  'radish-600': 'var(--color-radish-600)',
-  'blueberry-100': 'var(--color-blueberry-100)',
-  'blueberry-200': 'var(--color-blueberry-200)',
-  'blueberry-300': 'var(--color-blueberry-300)',
-  'blueberry-400': 'var(--color-blueberry-400)',
-  'blueberry-500': 'var(--color-blueberry-500)',
-  'blueberry-600': 'var(--color-blueberry-600)',
-  'banana-100': 'var(--color-banana-100)',
-  'banana-200': 'var(--color-banana-200)',
-  'banana-300': 'var(--color-banana-300)',
-  'banana-400': 'var(--color-banana-400)',
-  'banana-500': 'var(--color-banana-500)',
-  'banana-600': 'var(--color-banana-600)',
-  'grey-100': 'var(--color-grey-100)',
-  'grey-200': 'var(--color-grey-200)',
-  'grey-300': 'var(--color-grey-300)',
-  'grey-400': 'var(--color-grey-400)',
-  'grey-500': 'var(--color-grey-500)',
-  'grey-600': 'var(--color-grey-600)',
-  'oat-100': 'var(--color-oat-100)',
-  'oat-200': 'var(--color-oat-200)',
-  'oat-300': 'var(--color-oat-300)',
-  'oat-400': 'var(--color-oat-400)',
-  'oat-500': 'var(--color-oat-500)',
-  'oat-600': 'var(--color-oat-600)',
-  'lime-100': 'var(--color-lime-100)',
-  'lime-200': 'var(--color-lime-200)',
-  'lime-300': 'var(--color-lime-300)',
-  'lime-400': 'var(--color-lime-400)',
-  'lime-500': 'var(--color-lime-500)',
-  'lime-600': 'var(--color-lime-600)',
-  'blackberry-100': 'var(--color-blackberry-100)',
-  'blackberry-200': 'var(--color-blackberry-200)',
-  'blackberry-300': 'var(--color-blackberry-300)',
-  'blackberry-400': 'var(--color-blackberry-400)',
-  'blackberry-500': 'var(--color-blackberry-500)',
-  'blackberry-600': 'var(--color-blackberry-600)'
+  'surface-color-dim': 'var(--color-surface-color-dim)',
+  'surface-color': 'var(--color-surface-color)',
+  'surface-on-color-disabled': 'var(--color-surface-on-color-disabled)',
+  'surface-on-color-subtle': 'var(--color-surface-on-color-subtle)',
+  'surface-on-color': 'var(--color-surface-on-color)',
+  'surface-on-color-bold': 'var(--color-surface-on-color-bold)',
+  'surface-container': 'var(--color-surface-container)',
+  'surface-container-high': 'var(--color-surface-container-high)',
+  'surface-container-highest': 'var(--color-surface-container-highest)',
+  'surface-container-disabled': 'var(--color-surface-container-disabled)',
+  'surface-container-disabled-variant': 'var(--color-surface-container-disabled-variant)',
+  'surface-on-container-disabled': 'var(--color-surface-on-container-disabled)',
+  'surface-inverse': 'var(--color-surface-inverse)',
+  'surface-on-inverse': 'var(--color-surface-on-inverse)',
+  'outline': 'var(--color-outline)',
+  'outline-variant': 'var(--color-outline-variant)',
+  'primary-color': 'var(--color-primary-color)',
+  'primary-on-color': 'var(--color-primary-on-color)',
+  'primary-color-variant': 'var(--color-primary-color-variant)',
+  'primary-on-color-variant': 'var(--color-primary-on-color-variant)',
+  'primary-container': 'var(--color-primary-container)',
+  'primary-on-container': 'var(--color-primary-on-container)',
+  'primary-container-variant': 'var(--color-primary-container-variant)',
+  'primary-on-container-variant': 'var(--color-primary-on-container-variant)',
+  'secondary-color': 'var(--color-secondary-color)',
+  'secondary-on-color': 'var(--color-secondary-on-color)',
+  'secondary-container': 'var(--color-secondary-container)',
+  'secondary-on-container': 'var(--color-secondary-on-container)',
+  'secondary-container-variant': 'var(--color-secondary-container-variant)',
+  'secondary-on-container-variant': 'var(--color-secondary-on-container-variant)',
+  'tertiary-color': 'var(--color-tertiary-color)',
+  'tertiary-on-color': 'var(--color-tertiary-on-color)',
+  'tertiary-container': 'var(--color-tertiary-container)',
+  'tertiary-on-container': 'var(--color-tertiary-on-container)',
+  'tertiary-container-variant': 'var(--color-tertiary-container-variant)',
+  'tertiary-on-container-variant': 'var(--color-tertiary-on-container-variant)',
+  'success-color': 'var(--color-success-color)',
+  'success-on-color': 'var(--color-success-on-color)',
+  'success-container': 'var(--color-success-container)',
+  'success-on-container': 'var(--color-success-on-container)',
+  'success-container-variant': 'var(--color-success-container-variant)',
+  'danger-color': 'var(--color-danger-color)',
+  'danger-on-color': 'var(--color-danger-on-color)',
+  'danger-container': 'var(--color-danger-container)',
+  'danger-on-container': 'var(--color-danger-on-container)',
+  'danger-container-variant': 'var(--color-danger-container-variant)',
+  'danger-on-container-variant': 'var(--color-danger-on-container-variant)',
+  'info-color': 'var(--color-info-color)',
+  'info-on-color': 'var(--color-info-on-color)',
+  'info-container': 'var(--color-info-container)',
+  'info-on-container': 'var(--color-info-on-container)',
+  'info-container-variant': 'var(--color-info-container-variant)',
+  'info-on-container-variant': 'var(--color-info-on-container-variant)',
+  'upsell-color': 'var(--color-upsell-color)',
+  'upsell-on-color': 'var(--color-upsell-on-color)',
+  'upsell-color-variant': 'var(--color-upsell-color-variant)',
+  'upsell-on-color-variant': 'var(--color-upsell-on-color-variant)',
+  'upsell-container': 'var(--color-upsell-container)',
+  'upsell-on-container': 'var(--color-upsell-on-container)',
+  'upsell-container-variant': 'var(--color-upsell-container-variant)',
+  'upsell-on-container-variant': 'var(--color-upsell-on-container-variant)',
+  'warning-color': 'var(--color-warning-color)',
+  'warning-on-color': 'var(--color-warning-on-color)',
+  'warning-container': 'var(--color-warning-container)',
+  'warning-on-container': 'var(--color-warning-on-container)',
+  'warning-container-variant': 'var(--color-warning-container-variant)',
+  'warning-on-container-variant': 'var(--color-warning-on-container-variant)',
+  'neutral-color': 'var(--color-neutral-color)',
+  'neutral-on-color': 'var(--color-neutral-on-color)',
+  'neutral-container': 'var(--color-neutral-container)',
+  'neutral-on-container': 'var(--color-neutral-on-container)',
+  'neutral-container-variant': 'var(--color-neutral-container-variant)',
+  'neutral-on-container-variant': 'var(--color-neutral-on-container-variant)'
 };
 
 // This file is automatically generated by 'scripts/tokens/build-z-indexes.sh'
@@ -571,9 +582,9 @@ const Portal = ({
   return ReactDOM.createPortal(children, container);
 };
 
-// returns the css color variable to pass directly to a style prop ex: 'var(--color-tangerine-400)'
+// returns the css color variable to pass directly to a style prop ex: 'var(--color-secondary-color)'
 const getColor = color => {
-  if (color && COLORS[color]) {
+  if (color && color in COLORS) {
     return COLORS[color];
   } else {
     return color;
@@ -581,9 +592,9 @@ const getColor = color => {
 };
 // returns the css z-index variable to pass directly to a style prop ex: 'var(--z-index-base)'
 const getZIndex = zIndex => {
-  if (zIndex && ZINDEX[zIndex]) {
+  if (zIndex && zIndex in ZINDEX) {
     return ZINDEX[zIndex];
-  } else if (typeof zIndex === "number") {
+  } else if (typeof zIndex === 'number') {
     return zIndex;
   } else {
     return undefined;
@@ -767,7 +778,7 @@ const TooltipElement = ({
 };
 const Tooltip = forwardRef(TooltipElement);
 
-var styles$1i = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--marketing":"_mI-Dx","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
+var styles$1i = {"button":"_pgOR3","button--loading":"_2yB9-","button__spinner":"_ppC-S","button--size-min-width-100":"_GtXOQ","button--size-full-width":"_Y-OxO","button--icon-only":"_3EfuT","button--default":"_ICNz7","button--primary":"_XwJWT","button--danger":"_gr3Dh","button--upsell":"_ME8te","button--hollow":"_orywo","button--hollow-contrast":"_obtsl","button--link-contrast":"_00jK4","button--link-primary":"_JPwJ7","button--link-danger":"_9TprN","button--link-upsell":"_tktX-","button--link-toolbar":"_r3SQl","button--link-icon":"_oFBLN","disabled-button-wrapper":"_yTBTz"};
 
 const BUTTON_SIZES = {
   FULL_WIDTH: 'full-width',
@@ -778,7 +789,6 @@ const BUTTON_THEMES = {
   PRIMARY: 'primary',
   DANGER: 'danger',
   UPSELL: 'upsell',
-  MARKETING: 'marketing',
   HOLLOW: 'hollow',
   HOLLOW_CONTRAST: 'hollow-contrast',
   LINK_PRIMARY: 'link-primary',
@@ -851,7 +861,7 @@ const ButtonComponent = (_ref, ref) => {
   const {
     dataProps
   } = getDataProps(otherProps);
-  const contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.MARKETING, BUTTON_THEMES.LINK_CONTRAST];
+  const contrastSpinner = [BUTTON_THEMES.PRIMARY, BUTTON_THEMES.DANGER, BUTTON_THEMES.UPSELL, BUTTON_THEMES.LINK_CONTRAST];
   const childrenArr = Children.toArray(children);
   const isIconOnly = childrenArr.length === 1 && typeof childrenArr[0] != 'string';
   const ButtonElementResult = React__default.createElement(ButtonElement, {
@@ -867,7 +877,6 @@ const ButtonComponent = (_ref, ref) => {
       [styles$1i['button--primary']]: theme === BUTTON_THEMES.PRIMARY,
       [styles$1i['button--danger']]: theme === BUTTON_THEMES.DANGER,
       [styles$1i['button--upsell']]: theme === BUTTON_THEMES.UPSELL,
-      [styles$1i['button--marketing']]: theme === BUTTON_THEMES.MARKETING,
       [styles$1i['button--hollow']]: theme === BUTTON_THEMES.HOLLOW,
       [styles$1i['button--hollow-contrast']]: theme === BUTTON_THEMES.HOLLOW_CONTRAST,
       [styles$1i['button--link-primary']]: theme === BUTTON_THEMES.LINK_PRIMARY,
@@ -6594,7 +6603,7 @@ const useBackgroundColor = () => {
   const {
     isCardMounted: isInsideCard
   } = useCardContext();
-  const [backgroundColor, setBackgroundColor] = useState(COLORS.white);
+  const [backgroundColor, setBackgroundColor] = useState(COLORS['surface-color']);
   useLayoutEffect(() => {
     if (!isInsideModal && !isInsideAccordion && !isInsideCard) {
       const bodyStyles = window.getComputedStyle(document.body);
@@ -7910,7 +7919,7 @@ const DropdownListDivider = ({
   });
 };
 
-var styles$_ = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
+var styles$_ = {"dropdown-list-item":"_W12mF","dropdown-list-item--selected":"_Zu9cD","dropdown-list-item__content":"_xS6fS","dropdown-list-item__caption":"_7EI7m","dropdown-list-item--disabled":"_0OB5b","dropdown-list-item__prefix":"_dpo67","dropdown-list-item__suffix":"_ObP6B","dropdown-list-item__container":"_IBrNj","dropdown-list-item__link":"_vC0uY"};
 
 const DropdownListItem = ({
   onClick,
@@ -7936,15 +7945,6 @@ const DropdownListItem = ({
     onToggleDropdown();
     onClick && onClick(e);
   };
-  const getCaptionColor = () => {
-    if (selected) {
-      return 'blackberry-500';
-    }
-    if (disabled) {
-      return 'grey-400';
-    }
-    return undefined;
-  };
   const childrenContainer = React__default.createElement("div", {
     className: styles$_['dropdown-list-item__container']
   }, prefix && React__default.createElement("div", {
@@ -7954,10 +7954,8 @@ const DropdownListItem = ({
   }, React__default.createElement(Stack, {
     space: 4,
     flex: [1]
-  }, children, caption && React__default.createElement(Text, {
-    as: "caption",
-    color: getCaptionColor(),
-    textWrap: "wrap"
+  }, children, caption && React__default.createElement("div", {
+    className: styles$_['dropdown-list-item__caption']
   }, caption))), suffix && React__default.createElement("div", {
     className: styles$_['dropdown-list-item__suffix']
   }, suffix));
@@ -10102,7 +10100,7 @@ const AccordionItem = props => {
     justifyContent: "space-between",
     alignItems: "center"
   }, React__default.createElement(Text, {
-    color: "grey-500",
+    color: "grey-600",
     emphasis: "bold"
   }, title), React__default.createElement(IconChevronDown, {
     className: styles$x[`accordion-item__icon${isOpen ? '--active' : ''}`],
@@ -10392,7 +10390,7 @@ const getSelectStyles = ({
   asToolbarFilter: _asToolbarFilter = false,
   wrapToNextLine: _wrapToNextLine = false
 }) => {
-  const borderColor = isInvalid ? COLORS['radish-400'] : COLORS['grey-200'];
+  const borderColor = isInvalid ? COLORS['danger-color'] : COLORS['outline'];
   return {
     valueContainer: base => {
       return Object.assign({}, base, {
@@ -10409,18 +10407,18 @@ const getSelectStyles = ({
     },
     control: (base, state) => {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? COLORS['grey-100'] : COLORS['white'],
-        borderColor: state.isFocused ? COLORS['blackberry-400'] : borderColor,
-        color: state.isDisabled ? COLORS['grey-400'] : COLORS['grey-500'],
+        backgroundColor: state.isDisabled ? COLORS['surface-container-disabled'] : COLORS['surface-color'],
+        borderColor: state.isFocused ? COLORS['primary-color'] : borderColor,
+        color: state.isDisabled ? COLORS['surface-on-container-disabled'] : COLORS['surface-on-color'],
         borderRadius: 'var(--border-radius-400)',
-        boxShadow: state.isFocused ? `0 0 8px ${COLORS['blackberry-300']}` : 'none',
+        boxShadow: state.isFocused ? `0 0 8px ${COLORS['primary-color']}` : 'none',
         '&:hover': 'none',
         fontSize: '14px',
         cursor: 'pointer',
         width: _asToolbarFilter ? 'fit-content' : undefined,
         margin: 0,
         ':hover': _asToolbarFilter ? {
-          backgroundColor: COLORS['grey-100']
+          backgroundColor: 'color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%)'
         } : 'none'
       });
     },
@@ -10428,7 +10426,7 @@ const getSelectStyles = ({
       display: 'none'
     }),
     placeholder: (base, state) => _extends({}, base, {
-      color: state.isDisabled && _asToolbarFilter ? COLORS['grey-300'] : COLORS['grey-400'],
+      color: state.isDisabled && _asToolbarFilter ? COLORS['surface-on-color-disabled'] : COLORS['surface-on-color-subtle'],
       marginRight: 0,
       position: 'static',
       transform: 'initial',
@@ -10437,14 +10435,14 @@ const getSelectStyles = ({
       whiteSpace: 'nowrap'
     }),
     noOptionsMessage: () => ({
-      color: COLORS['grey-400'],
+      color: COLORS['surface-on-color'],
       textAlign: 'center',
       padding: '8px',
       fontFamily: FONT_FAMILY,
       fontSize: '14px'
     }),
     loadingMessage: () => ({
-      color: COLORS['grey-400'],
+      color: COLORS['surface-on-color'],
       textAlign: 'center',
       padding: '8px',
       fontFamily: FONT_FAMILY,
@@ -10452,7 +10450,7 @@ const getSelectStyles = ({
     }),
     singleValue: (base, state) => {
       return Object.assign({}, base, {
-        color: state.isDisabled ? COLORS['grey-400'] : null,
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : null,
         marginRight: 0,
         position: _asToolbarFilter ? 'static' : 'absolute',
         transform: 'initial',
@@ -10464,15 +10462,15 @@ const getSelectStyles = ({
     },
     dropdownIndicator: (base, state) => {
       return Object.assign({}, base, {
-        color: state.isDisabled ? COLORS['grey-300'] : COLORS['grey-400'],
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : COLORS['surface-on-color-subtle'],
         padding: '8px',
         ':hover': 'none'
       });
     },
     option: (base, state) => {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['blackberry-200'] : state.isFocused ? COLORS['grey-100'] : COLORS['white'],
-        color: state.isDisabled ? COLORS['grey-400'] : state.isSelected ? COLORS['blackberry-600'] : COLORS['grey-500'],
+        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['primary-container'] : state.isFocused ? COLORS['surface-container-high'] : COLORS['surface-color'],
+        color: state.isDisabled ? COLORS['surface-on-color-disabled'] : state.isSelected ? COLORS['primary-color'] : COLORS['surface-on-color'],
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -10488,21 +10486,22 @@ const getSelectStyles = ({
       return Object.assign({}, base, {
         ':hover': {
           backgroundColor: 'none',
-          color: COLORS['grey-500']
+          color: COLORS['surface-on-color']
         }
       });
     },
     clearIndicator: base => {
       return Object.assign({}, base, {
-        color: COLORS['grey-400'],
+        color: COLORS['surface-on-color-subtle'],
         ':hover': {
-          color: COLORS['grey-500']
+          color: COLORS['surface-on-color']
         }
       });
     },
     menu: base => _extends({}, base, {
       borderRadius: 0,
-      zIndex: getZIndex('dropdown')
+      zIndex: getZIndex('dropdown'),
+      backgroundColor: COLORS['surface-color']
     }),
     menuPortal: base => _extends({}, base, {
       zIndex: getZIndex('dropdown')
@@ -11424,7 +11423,8 @@ const PillSelectField = ({
     };
     return React__default.createElement("button", {
       className: styles$i['pill-select-field__removable-icon'],
-      onClick: handleClick
+      onClick: handleClick,
+      disabled: disabled
     }, React__default.createElement(IconTimes, {
       size: "small"
     }));
@@ -11463,7 +11463,7 @@ const PillSelectField = ({
     }, option.label, option.isRemovable && React__default.createElement(RemoveButton, {
       option: option
     })));
-  }), createOptionLabel && React__default.createElement(CreatableOption, {
+  }), createOptionLabel && !disabled && React__default.createElement(CreatableOption, {
     name: name,
     testId: testId,
     onCreate: onCreate,
@@ -11760,9 +11760,7 @@ const PasswordCriteria = ({
   }, met ? React__default.createElement(IconCheck, {
     size: "small",
     color: "grey-200"
-  }) : '\u25CF', React__default.createElement(Text, {
-    color: met ? 'grey-200' : 'grey-400'
-  }, children)));
+  }) : '\u25CF', React__default.createElement("span", null, children)));
 };
 
 const usePasswordCriteria = criterias => {
@@ -12992,11 +12990,12 @@ var styles$9 = {"currency-field__mask-display":"_ddacu"};
 const CURRENCY_DISPLAY_DEFAULT_MARGIN = 8;
 const CURRENCY_DISPLAY_MARGIN_BUFFER = 1;
 
-const _excluded$4 = ["currencySymbol", "step"];
+const _excluded$4 = ["currencySymbol", "step", "suffix"];
 const CurrencyFieldElement = (_ref, forwardedRef) => {
   let {
       currencySymbol = '$',
-      step = 0.01
+      step = 0.01,
+      suffix
     } = _ref,
     allOtherProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const [displayPadding, setDisplayPadding] = useState(CURRENCY_DISPLAY_DEFAULT_MARGIN);
@@ -13024,7 +13023,8 @@ const CurrencyFieldElement = (_ref, forwardedRef) => {
     }
   }, [ref]);
   return React__default.createElement(Field, _extends({}, fieldProps), React__default.createElement(Fragment, null, React__default.createElement(AffixContainer, {
-    prefix: currencySymbol
+    prefix: currencySymbol,
+    suffix: suffix
   }, React__default.createElement("input", _extends({}, inputProps, {
     type: "number",
     inputMode: "decimal",
@@ -14376,7 +14376,7 @@ function useIsVisibleInViewPort() {
 
 const Avatar = ({
   children,
-  color: _color = COLORS['grey-400'],
+  color: _color = COLORS['surface-on-color-subtle'],
   size: _size = 'medium',
   url: urlProp,
   badge,
@@ -14391,7 +14391,7 @@ const Avatar = ({
   const [showIconInsteadOfImage, setShowIconInsteadOfImage] = useState(false);
   const [defaultProfilePictureColors] = useState(() => PROFILE_IMAGES[Math.floor(Math.random() * PROFILE_IMAGES.length)]);
   // If passing an url we are defaulting to a lighter grey while the image loads
-  const backgroundColor = url ? COLORS['grey-200'] : getColor(_color);
+  const backgroundColor = url ? COLORS['surface-container-highest'] : getColor(_color);
   return React__default.createElement("div", {
     className: classnames(styles$6['avatar__container']),
     ref: elementRef