@zohodesk/dot 1.0.0-temp-181.7 → 1.0.0-temp-182

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -6,16 +6,11 @@
 .container {
   vertical-align: middle;
   composes: varClass;
-  /* css:theme-validation:ignore */
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
   border-color: var(--border_color)
 }
-.borderOnHover:hover,
-.borderOnActive {
-  /* css:theme-validation:ignore */
-}
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--border_hoverColor)
 }
@@ -40,7 +35,6 @@
   --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
 }
 .iconColor {
-  /* css:theme-validation:ignore */
   color: var(--icon_color);
 }
 .icon_danger {

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -36,12 +34,12 @@ export default class AvatarStatus extends React.Component {
       AvatarStatusProps = {},
       AvatarProps = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: `${style.container} ${className} `
-    }, AvatarStatusProps, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${className} `,
+      ...AvatarStatusProps,
       "aria-label": `${title}, ${name}, ${statusTitle}`,
       "data-selector-id": dataSelectorId
-    }), /*#__PURE__*/React.createElement(Avatar, _extends({
+    }, /*#__PURE__*/React.createElement(Avatar, {
       src: src,
       name: name,
       palette: palette,
@@ -55,8 +53,9 @@ export default class AvatarStatus extends React.Component {
       shape: shape,
       needTitle: needTitle,
       needDefaultBorder: needDefaultBorder,
-      needBorder: needBorder
-    }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
+      needBorder: needBorder,
+      ...AvatarProps
+    }), /*#__PURE__*/React.createElement("span", {
       "data-title": statusTitle,
       className: `${style.state} ${style[state]} ${style[size]} ${style[shape]}`
     }));

package/es/avatar/AvatarThread/AvatarThread.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -39,10 +37,11 @@ export default class AvatarThread extends React.Component {
       AvatarProps = {}
     } = customProps;
     let hoverEffect = showOnHover ? style.hover : '';
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${onClick ? style.pointer : ''} ${hoverEffect}`,
-      "data-selector-id": dataSelectorId
-    }, AvatarThreadProps), /*#__PURE__*/React.createElement(Avatar, _extends({
+      "data-selector-id": dataSelectorId,
+      ...AvatarThreadProps
+    }, /*#__PURE__*/React.createElement(Avatar, {
       initial: initial,
       src: src,
       name: name,
@@ -53,8 +52,9 @@ export default class AvatarThread extends React.Component {
       palette: palette,
       textPalette: textPalette,
       customClass: customTextClass,
-      needTitle: needTitle
-    }, AvatarProps)), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
+      needTitle: needTitle,
+      ...AvatarProps
+    }), (iconName || getCustomThread) && /*#__PURE__*/React.createElement("span", {
       className: `${style.thread} ${onIconClick ? style.pointer : style.defaultCursor} ${needBackground ? style.threadBg : ''} ${style[`thread_${size}_pos`]} ${needBorder ? style[`border_${borderPalette}`] : ''}`,
       "data-title": iconTitle,
       "data-id": iconTitle === 'Remove Follower' && 'removeFollower',

package/es/avatar/AvatarUser/AvatarUser.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -50,20 +48,22 @@ export default class AvatarUser extends React.Component {
       portalTitle = 'End User',
       lockTitle = 'Locked'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[size]}`,
       "data-id": dataId || name || iconName,
       "data-test-id": dataId || name || iconName,
-      "data-selector-id": dataSelectorId
-    }, AvatarUserProps), iconName ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
+      "data-selector-id": dataSelectorId,
+      ...AvatarUserProps
+    }, iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
       name: iconName,
       iconSize: iconSize,
       size: size,
       iconClass: iconClass,
       dataId: iconName,
       iconColor: iconColor,
-      title: title
-    }, AvatarIconProps)) : /*#__PURE__*/React.createElement(Avatar, _extends({
+      title: title,
+      ...AvatarIconProps
+    }) : /*#__PURE__*/React.createElement(Avatar, {
       src: src,
       name: name,
       initial: initial,
@@ -74,8 +74,9 @@ export default class AvatarUser extends React.Component {
       palette: palette,
       textPalette: textPalette,
       customClass: customTextClass,
-      alternateSrc: alternateSrc
-    }, AvatarProps)), isPaid ? /*#__PURE__*/React.createElement("span", {
+      alternateSrc: alternateSrc,
+      ...AvatarProps
+    }), isPaid ? /*#__PURE__*/React.createElement("span", {
       "data-title": paidTitle,
       className: style.paid,
       "data-id": "paidUser",

package/es/avatar/AvatarUser/AvatarUser.module.css

@@ -3,11 +3,13 @@
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
 }
+
 .paid,
 .portal,
 .delete {
   font-size: var(--zd_font_size10) ;
 }
+
 .paid,
 .portal,
 .delete,
@@ -15,22 +17,28 @@
   position: absolute;
   line-height: 0;
 }
+
 .paid {
   composes: middle from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .paid {
   left: 50% ;
 }
+
 [dir=rtl] .paid {
   right: 50% ;
 }
+
 .paid {
   top: calc( var(--zd_size2) * -1 ) ;
 }
+
 .portal, .lock {
-  background-color: var(--zdt_avataruser_default_bg);
+  background-color: var(--zdt_base_bg);
   border-radius: 50%;
 }
+
 .delete {
   top: 0 ;
   width: 100% ;
@@ -43,66 +51,87 @@
   border-radius: 50%;
   background-color: var(--zdt_avataruser_delete_bg);
 }
+
 [dir=ltr] .delete {
   left: 0 ;
 }
+
 [dir=rtl] .delete {
   right: 0 ;
 }
+
 .container:hover .delete {
   opacity: 1;
 }
+
 .small .portal {
   top: 0 ;
 }
+
 [dir=ltr] .small .portal {
   right: calc( var(--zd_size4) * -1 ) ;
 }
+
 [dir=rtl] .small .portal {
   left: calc( var(--zd_size4) * -1 ) ;
 }
+
 .xsmall .portal {
   top: var(--zd_size1) ;
 }
+
 [dir=ltr] .xsmall .portal {
   right: calc( var(--zd_size2) * -1 ) ;
 }
+
 [dir=rtl] .xsmall .portal {
   left: calc( var(--zd_size2) * -1 ) ;
 }
+
 .medium .portal {
   top: var(--zd_size1) ;
 }
+
 [dir=ltr] .medium .portal {
   right: calc( var(--zd_size1) * -1 ) ;
 }
+
 [dir=rtl] .medium .portal {
   left: calc( var(--zd_size1) * -1 ) ;
 }
+
 .xmedium .portal {
   top: var(--zd_size3) ;
 }
+
 [dir=ltr] .xmedium .portal {
   right: 0 ;
 }
+
 [dir=rtl] .xmedium .portal {
   left: 0 ;
 }
+
 .large .portal {
   top: var(--zd_size8) ;
 }
+
 [dir=ltr] .large .portal {
   right: var(--zd_size1) ;
 }
+
 [dir=rtl] .large .portal {
   left: var(--zd_size1) ;
 }
+
 .xlarge .portal {
   top: var(--zd_size15) ;
 }
+
 [dir=ltr] .xlarge .portal {
   right: var(--zd_size2) ;
 }
+
 [dir=rtl] .xlarge .portal {
   left: var(--zd_size2) ;
 }
@@ -119,53 +148,68 @@
 [dir=rtl] .small .lock {
   left: calc( var(--zd_size5) * -1 ) ;
 }
+
 .xsmall .lock {
   top: var(--zd_size1) ;
   font-size: var(--zd_font_size12) ;
 }
+
 [dir=ltr] .xsmall .lock {
   right: calc( var(--zd_size4) * -1 ) ;
 }
+
 [dir=rtl] .xsmall .lock {
   left: calc( var(--zd_size4) * -1 ) ;
 }
+
 .medium .lock {
   top: var(--zd_size2) ;
   font-size: var(--zd_font_size13) ;
 }
+
 [dir=ltr] .medium .lock {
   right: calc( var(--zd_size5) * -1 ) ;
 }
+
 [dir=rtl] .medium .lock {
   left: calc( var(--zd_size5) * -1 ) ;
 }
+
 .xmedium .lock {
   top: var(--zd_size4) ;
   font-size: var(--zd_font_size14) ;
 }
+
 [dir=ltr] .xmedium .lock {
   right: calc( var(--zd_size6) * -1 ) ;
 }
+
 [dir=rtl] .xmedium .lock {
   left: calc( var(--zd_size6) * -1 ) ;
 }
+
 .large .lock {
   top: var(--zd_size6) ;
   font-size: var(--zd_font_size18) ;
 }
+
 [dir=ltr] .large .lock {
   right: calc( var(--zd_size6) * -1 ) ;
 }
+
 [dir=rtl] .large .lock {
   left: calc( var(--zd_size6) * -1 ) ;
 }
+
 .xlarge .lock {
   top: var(--zd_size12) ;
   font-size: var(--zd_font_size22) ;
 }
+
 [dir=ltr] .xlarge .lock {
   right: calc( var(--zd_size8) * -1 ) ;
 }
+
 [dir=rtl] .xlarge .lock {
   left: calc( var(--zd_size8) * -1 ) ;
-}
+}

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -33,12 +31,13 @@ export default class AvatarWithTeam extends React.Component {
       Avatar2Props = {},
       AvatarTeam2Props = {}
     } = customProps;
-    return /*#__PURE__*/React.createElement("span", _extends({
+    return /*#__PURE__*/React.createElement("span", {
       className: `${style.container} `,
       "data-id": "avatarWithTeamId",
       "data-test-id": "avatarWithTeamId",
-      "data-selector-id": dataSelectorId
-    }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, _extends({
+      "data-selector-id": dataSelectorId,
+      ...AvatarWithTeamProps
+    }, isTeam && teamName ? /*#__PURE__*/React.createElement(Avatar, {
       name: name,
       src: src,
       size: size,
@@ -47,8 +46,9 @@ export default class AvatarWithTeam extends React.Component {
       palette: palette,
       textPalette: textPalette,
       customClass: customTextClass,
-      borderOnActive: borderOnActive
-    }, Avatar1Props)) : isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, _extends({
+      borderOnActive: borderOnActive,
+      ...Avatar1Props
+    }) : isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       src: src,
       size: size,
@@ -59,8 +59,9 @@ export default class AvatarWithTeam extends React.Component {
       customClass: {
         customAvatar: customTextClass
       },
-      borderOnActive: borderOnActive
-    }, AvatarTeam1Props)) : /*#__PURE__*/React.createElement(Avatar, _extends({
+      borderOnActive: borderOnActive,
+      ...AvatarTeam1Props
+    }) : /*#__PURE__*/React.createElement(Avatar, {
       name: name,
       src: src,
       size: size,
@@ -69,13 +70,14 @@ export default class AvatarWithTeam extends React.Component {
       palette: palette,
       textPalette: textPalette,
       customClass: customTextClass,
-      borderOnActive: borderOnActive
-    }, Avatar2Props)), teamName ? /*#__PURE__*/React.createElement("span", {
+      borderOnActive: borderOnActive,
+      ...Avatar2Props
+    }), teamName ? /*#__PURE__*/React.createElement("span", {
       className: `${style.teamAvatar} ${teamClassName} `,
       "data-id": "teamNameTestId",
       "data-test-id": "teamNameTestId",
       "data-title": needTitle ? title : undefined
-    }, /*#__PURE__*/React.createElement(AvatarTeam, _extends({
+    }, /*#__PURE__*/React.createElement(AvatarTeam, {
       name: teamName,
       size: "small",
       palette: palette,
@@ -85,8 +87,9 @@ export default class AvatarWithTeam extends React.Component {
       customClass: {
         customAvatar: customTextClass
       },
-      borderOnActive: teamBorderActive
-    }, AvatarTeam2Props))) : null);
+      borderOnActive: teamBorderActive,
+      ...AvatarTeam2Props
+    })) : null);
   }
 
 }

package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -11,7 +11,7 @@
   padding: var(--zd_size2) ;
   border-radius: 50%;
   transform: scale(0.8);
-  background-color: var(--zdt_avatarwithteam_default_bg);
+  background-color: var(--zdt_base_bg);
 }
 
 [dir=ltr] .teamAvatar {
@@ -20,4 +20,4 @@
 
 [dir=rtl] .teamAvatar {
   left: calc( var(--zd_size10) * -1 ) ;
-}
+}

package/es/common/dot_boxShadow.module.css

@@ -35,4 +35,6 @@
 
     /* desktop notification */
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
+
+
 }

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { Component, Fragment } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -522,6 +520,10 @@ export class ToggleDropDown extends Component {
       getFooter,
       customProps,
       needMultiLineText,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       customClass
     } = this.props;
     let {
@@ -546,21 +548,22 @@ export class ToggleDropDown extends Component {
     let listIndex = -1;
     const ariaTitleId = this.getAriaId(); // const allyOptionsArr = this.getOptionsArray();
 
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", {
       className: style.wrapper,
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
-      "data-selector-id": dataSelectorId
-    }, ToggleDropDownProps), /*#__PURE__*/React.createElement(Container, {
+      "data-selector-id": dataSelectorId,
+      ...ToggleDropDownProps
+    }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
       eleRef: getTargetRef,
       align: "vertical",
       isCover: false,
       dataId: dataId
-    }, children ? isToggleStateNeeded ? /*#__PURE__*/React.createElement(Component, _extends({}, componentProps, {
+    }, children ? isToggleStateNeeded ? /*#__PURE__*/React.createElement(Component, { ...componentProps,
       isActive: isPopupOpen
-    })) : children : /*#__PURE__*/React.createElement(RippleEffect, {
+    }) : children : /*#__PURE__*/React.createElement(RippleEffect, {
       hoverType: hoverType,
       isActive: isPopupOpen,
       isNeedEffect: isEditable && isNeedEffect
@@ -598,7 +601,7 @@ export class ToggleDropDown extends Component {
       let {
         tabletMode
       } = _ref4;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
+      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
         boxPosition: position,
         isActive: isPopupReady,
         onClick: removeClose,
@@ -624,18 +627,22 @@ export class ToggleDropDown extends Component {
         palette: palette,
         isResponsivePadding: true,
         needFocusScope: true,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         customProps: {
           focusScopeProps: {
             loadNextOptions: this.handleGetNextOptions,
             searchValue: searchValue,
             isFetchingOptions: isFetchingOptions
           }
-        }
-      }, DropBoxProps, {
+        },
+        ...DropBoxProps,
         onClose: this.handleTogglePopup
-      }), /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
         className: style.search
-      }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
         placeHolder: placeHolderText,
         onChange: this.handleChange,
         value: searchValue,
@@ -656,8 +663,9 @@ export class ToggleDropDown extends Component {
           ariaAutocomplete: 'list',
           ariaHaspopup: true,
           ariaExpanded: true
-        }
-      }, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        },
+        ...TextBoxIconProps
+      })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
         className: style.title
       }, /*#__PURE__*/React.createElement(DropDownHeading, {
         text: title,
@@ -708,7 +716,7 @@ export class ToggleDropDown extends Component {
             isDisabled = false
           } = item;
           listIndex += 1;
-          return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+          return iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
             key: listIndex,
             dataId: item[keyName],
             value: item[keyName],
@@ -734,8 +742,9 @@ export class ToggleDropDown extends Component {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
-          }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
+            },
+            ...ListItemWithIconProps
+          }) : /*#__PURE__*/React.createElement(ListItem, {
             key: listIndex,
             dataId: item[keyName],
             value: item[keyName],
@@ -758,8 +767,9 @@ export class ToggleDropDown extends Component {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
-          }, ListItemProps));
+            },
+            ...ListItemProps
+          });
         }));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
         isCover: false,
@@ -783,7 +793,7 @@ export class ToggleDropDown extends Component {
           key: i
         }, needDivider ? /*#__PURE__*/React.createElement("div", {
           className: style.seperatedLine
-        }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, _extends({
+        }) : iconName ? /*#__PURE__*/React.createElement(ListItemWithIcon, {
           dataId: item[keyName],
           value: item[keyName],
           id: item[idName],
@@ -809,8 +819,9 @@ export class ToggleDropDown extends Component {
             role: isSearch ? 'option' : 'menuitem',
             ariaSelected: selectedId === item[idName],
             ariaLabel: item[keyName]
-          }
-        }, ListItemWithIconProps)) : /*#__PURE__*/React.createElement(ListItem, _extends({
+          },
+          ...ListItemWithIconProps
+        }) : /*#__PURE__*/React.createElement(ListItem, {
           key: listIndex,
           dataId: item[keyName],
           value: item[keyName],
@@ -833,8 +844,9 @@ export class ToggleDropDown extends Component {
             role: isSearch ? 'option' : 'menuitem',
             ariaSelected: selectedId === item[idName],
             ariaLabel: item[keyName]
-          }
-        }, ListItemProps)));
+          },
+          ...ListItemProps
+        }));
       }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
         isCover: false,
         align: "both"

package/es/dropdown/ToggleDropDown/props/defaultProps.js

@@ -23,5 +23,7 @@ export const defaultProps = {
   preventPopupClose: false,
   dataSelectorId: 'toggleDropdown',
   needMultiLineText: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customClass: {}
 };

package/es/dropdown/ToggleDropDown/props/propTypes.js

@@ -74,6 +74,10 @@ export const propTypes = {
     customListBox: PropTypes.string
   }),
   onSelectLabel: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   from: PropTypes.string,
   top: PropTypes.number
 };

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -21,7 +21,6 @@
 }
 .title {
   font-family: var(--zd_semibold);
-  /* css:theme-validation:ignore */
   color: var(--titleColor);
   word-wrap: break-word;
 }
@@ -33,7 +32,6 @@
 }
 .linkWrapper,
 .linkDescWrapper {
-  /* css:theme-validation:ignore */
   color: var(--descriptionColor);
 }
 .small .linkWrapper,
@@ -69,13 +67,11 @@
   line-height: 1.358;
 }
 .link {
-  /* css:theme-validation:ignore */
   color: var(--linkColor);
   display: inline-block;
   cursor: pointer;
 }
 .link:hover {
-  /* css:theme-validation:ignore */
   color: var(--linkHoverColor);
 }
 .children {