@zohodesk/components 1.6.1 → 1.6.2

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,3 +1,5 @@
+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";
@@ -142,7 +144,7 @@ export default class TextBoxIcon extends React.Component {
       }
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, /*#__PURE__*/React.createElement(TextBox, { ...this.props,
+    }, /*#__PURE__*/React.createElement(TextBox, _extends({}, this.props, {
       dataId: dataId,
       size: size,
       variant: variant,
@@ -170,7 +172,7 @@ export default class TextBoxIcon extends React.Component {
       isScrollPrevent: isScrollPrevent,
       customClass: customTextBox,
       customProps: TextBoxProps
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconContainer} ${customTBoxIcon}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* textboxicon icon default variables */
-  --textboxicon_icon_margin: 0 var(--zd_size5);
+  --textboxicon_icon_margin: 0 5px;
   --textboxicon_icon_cursor: pointer;
   --textboxicon_icon_color: var(--zdt_textboxicon_default_icon);
 }

package/es/Textarea/Textarea.js

@@ -1,3 +1,5 @@
+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";
@@ -90,12 +92,12 @@ export default class Textarea extends React.Component {
 
     const isEditable = !(isReadOnly || isDisabled);
     let classList = needAppearance ? `${style.container} ${size !== 'default' ? style[size] : ''} ${!rows && size === 'default' ? style.defaultHeight : ''} ${!cols ? style.defaultWidth : ''} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]}  ${animated && size !== 'default' ? `${style[`${size}animated`]}` : ''}   ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isEditable && isFocus ? style.active : ''}` : `${style.basic}`;
-    return /*#__PURE__*/React.createElement("textarea", {
+    return /*#__PURE__*/React.createElement("textarea", _extends({
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
-      placeholder: placeHolder,
-      ...options,
+      placeholder: placeHolder
+    }, options, {
       "data-id": dataId,
       "data-test-id": dataId,
       maxLength: maxLength,
@@ -108,9 +110,8 @@ export default class Textarea extends React.Component {
       id: htmlId,
       "data-selector-id": dataSelectorId,
       rows: rows,
-      cols: cols,
-      ...customAttributes
-    });
+      cols: cols
+    }, customAttributes));
   }
 
 }

package/es/Textarea/Textarea.module.css

@@ -4,9 +4,9 @@
   --textarea_border_color: none;
   --textarea_cursor: text;
   --textarea_text_color: var(--zdt_textarea_default_text);
-  --textarea_font_size: var(--zd_font_size14);
+  --textarea_font_size: 14px;
   --textarea_line_height: 1.5712;
-  --textarea_padding: var(--zd_size2) 0;
+  --textarea_padding: 2px 0;
   --textarea_height: auto;
   --textarea_width: auto;
 
@@ -94,7 +94,7 @@
 }
 
 .defaultHeight{
-  --textarea_height: var(--zd_size30);
+  --textarea_height: 30px;
 } 
 .defaultWidth {
   --textarea_width: 100%;
@@ -104,39 +104,39 @@
   vertical-align: middle;
 }
 .xsmall {
-  --textarea_font_size: var(--zd_font_size14);
-  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
-  --textarea_height: var(--zd_size28);
+  --textarea_font_size: 14px;
+  --textarea_padding: 4px 0 2px;
+  --textarea_height: 28px;
   --textarea_line_height: 1.3572;
 }
 .xmedium {
-  --textarea_font_size: var(--zd_font_size13);
-  --textarea_padding: var(--zd_size4) 0 var(--zd_size2);
-  --textarea_height: var(--zd_size25);
+  --textarea_font_size: 13px;
+  --textarea_padding: 4px 0 2px;
+  --textarea_height: 25px;
   --textarea_line_height: 1.3077;
 }
  .small{
-  --textarea_height: var(--zd_size30);
-  --textarea_padding: var(--zd_size2) 0;
+  --textarea_height: 30px;
+  --textarea_padding: 2px 0;
 }
 .smallanimated:focus,
 .xsmallanimated:focus,
 .xmediumanimated:focus {
-  --textarea_height: var(--zd_size70);
+  --textarea_height: 70px;
 }
 .medium {
-  --textarea_height: var(--zd_size88);
-  --textarea_padding: var(--zd_size2);
+  --textarea_height: 88px;
+  --textarea_padding: 2px;
 }
 .large {
-  --textarea_height: var(--zd_size45);
-  --textarea_padding: var(--zd_size2);
+  --textarea_height: 45px;
+  --textarea_padding: 2px;
 }
 .largeanimated:focus {
-  --textarea_height: var(--zd_size220);
+  --textarea_height: 220px;
 }
 .xlarge {
-  --textarea_height: var(--zd_size184);
+  --textarea_height: 184px;
 }
 .default {
   font-weight: var(--zd-fw-normal);

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,3 +1,5 @@
+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";
@@ -121,15 +123,14 @@ export default class VelocityAnimationGroup extends React.Component {
       display: 'none',
       complete: onExitComplete ? this.handleExitComplete : undefined
     };
-    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
+    return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
       enter: enterAnimation,
       leave: exitAnimation,
       component: component && component,
       runOnMount: runOnMount,
       enterHideStyle: enterHideStyle,
-      enterShowStyle: enterShowStyle,
-      ...childProps
-    }, isActive ? children : null);
+      enterShowStyle: enterShowStyle
+    }, childProps), isActive ? children : null);
   }
 
 }

package/es/common/avatarsizes.module.css

@@ -1,8 +1,8 @@
 /*Avatar common Sizes*/
 .varClass {
   /* avatar size default variables */
-  --avatar_width: var(--zd_size34);
-  --avatar_height: var(--zd_size34);
+  --avatar_width: 34px;
+  --avatar_height: 34px;
 }
 .small,
 .xsmall,
@@ -16,34 +16,34 @@
   height: var(--avatar_height);
 }
 .small {
-  --avatar_height: var(--zd_size22);
-  --avatar_width: var(--zd_size22);
+  --avatar_height: 22px;
+  --avatar_width: 22px;
 }
 .xxsmall {
-  --avatar_height: var(--zd_size18);
-  --avatar_width: var(--zd_size18);
+  --avatar_height: 18px;
+  --avatar_width: 18px;
 }
 .xsmall {
-  --avatar_height: var(--zd_size30);
-  --avatar_width: var(--zd_size30);
+  --avatar_height: 30px;
+  --avatar_width: 30px;
 }
 
 .medium {
-  --avatar_height: var(--zd_size34);
-  --avatar_width: var(--zd_size34);
+  --avatar_height: 34px;
+  --avatar_width: 34px;
 }
 
 .xmedium {
-  --avatar_height: var(--zd_size40);
-  --avatar_width: var(--zd_size40);
+  --avatar_height: 40px;
+  --avatar_width: 40px;
 }
 
 .large {
-  --avatar_height: var(--zd_size60);
-  --avatar_width: var(--zd_size60);
+  --avatar_height: 60px;
+  --avatar_width: 60px;
 }
 
 .xlarge {
-  --avatar_height: var(--zd_size80);
-  --avatar_width: var(--zd_size80);
+  --avatar_height: 80px;
+  --avatar_width: 80px;
 }

package/es/common/common.module.css

@@ -526,12 +526,12 @@
 
 .fitContWidth {
   width: fit-content ;
-  width: -moz-fit-content ;
+  width: undefined ;
 }
 
 .fitContHeight {
   height: fit-content ;
-  height: -moz-fit-content ;
+  height: undefined ;
 }
 
 .whiteSpace_normal {

package/es/deprecated/PortalLayer/PortalLayer.js

@@ -11,14 +11,12 @@ let RefElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     isChildrenRestrictionNeeded = true,
     isActive
   } = props;
-  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
-      forwardRef: ref
-    })
-  }) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, { ...Object.assign({}, elementProps, {
-      isActive,
-      forwardRef: ref
-    })
-  });
+  return isChildrenRestrictionNeeded ? isActive ? renderChildren ? renderChildren(ref) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    forwardRef: ref
+  })) : null : renderChildren ? renderChildren(ref, isActive) : /*#__PURE__*/React.createElement(Element, Object.assign({}, elementProps, {
+    isActive,
+    forwardRef: ref
+  }));
 });
 RefElement.propTypes = RefElement_propTypes;
 export { RefElement };

package/es/deprecated/Switch/Switch.js

@@ -1,3 +1,5 @@
+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";
@@ -43,7 +45,7 @@ const Switch = props => {
     customLabel = ''
   } = customClass;
   size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     align: "vertical",
     isCover: false,
     alignBox: "row",
@@ -52,9 +54,8 @@ const Switch = props => {
     "data-title": disabled ? disableTitle : title,
     "aria-checked": checked,
     role: "switch",
-    dataSelectorId: dataSelectorId,
-    ...SwitchProps
-  }, /*#__PURE__*/React.createElement(Box, {
+    dataSelectorId: dataSelectorId
+  }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
     className: `${style[size]} ${customSwitchSize}`
   }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
@@ -72,16 +73,15 @@ const Switch = props => {
     "data-test-id": dataId,
     className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
     tabIndex: isReadOnly || disabled ? '-1' : '0'
-  })), text && /*#__PURE__*/React.createElement(Label, {
+  })), text && /*#__PURE__*/React.createElement(Label, _extends({
     text: text,
     palette: labelPalette,
     id: id,
     size: labelSize,
     type: "subtitle",
     onClick: !disabled || !isReadOnly ? onChange : null,
-    customClass: customLabel,
-    ...LabelProps
-  }));
+    customClass: customLabel
+  }, LabelProps)));
 };
 
 Switch.defaultProps = defaultProps;

package/es/shared/ArrowIcon/ArrowIcon.js

@@ -1,3 +1,5 @@
+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 { Container } from "../../Layout";
 import Icon from '@zohodesk/icons/es/Icon';
@@ -29,17 +31,15 @@ const ArrowIcon = props => {
     isActive,
     isReadOnly,
     isDisabled
-  }) : /*#__PURE__*/React.createElement(Container, {
+  }) : /*#__PURE__*/React.createElement(Container, _extends({
     isInline: true,
     isCover: false,
     align: "both",
-    "aria-hidden": true,
-    ...tagAttributes,
-    ...a11yAttributes,
-    ...customProps,
+    "aria-hidden": true
+  }, tagAttributes, a11yAttributes, customProps, {
     dataId: `${dataId}_downIcon`,
     className: `${style.arrowIcon} ${isRotated ? style.rotated : ''} ${isActive ? style.active : ''} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readonly : ''} ${containerClass}`
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     name: "ZD-down",
     size: iconSize,
     iconClass: iconClass

package/es/shared/InputFieldLine/InputFieldLine.js

@@ -1,3 +1,5 @@
+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 propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
@@ -26,19 +28,17 @@ function InputFieldLine(props) {
   } = props;
   const borderClass = style[`border_${border}`] || '';
   const borderColorClass = style[`borderColor_${borderColor}`] || '';
-  return /*#__PURE__*/React.createElement(Container, {
+  return /*#__PURE__*/React.createElement(Container, _extends({
     alignBox: "row",
-    isCover: false,
-    ...tagAttributes,
-    ...a11yAttributes,
-    ...customProps,
+    isCover: false
+  }, tagAttributes, a11yAttributes, customProps, {
     "data-title": title,
     dataId: dataId,
     onClick: onClick,
     onKeyDown: onKeyDown,
     scroll: size != 'auto' ? 'vertical' : undefined,
     className: `${style.varClass} ${style.customContainer} ${size != 'auto' ? style[size] : ''} ${hasPadding && size != 'auto' ? style[`padding_${size}`] : ''} ${borderClass} ${isDisabled ? style.disabled : isReadOnly ? hasEffect ? style.effect : style.readonly : style.effect} ${border !== 'none' ? `${borderColorClass} ${style.hasBorder}` : ''} ${isActive && !(isDisabled || isReadOnly) ? style.active : ''}  ${customClass}`
-  }, children);
+  }), children);
 }
 
 InputFieldLine.propTypes = propTypes;

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -59,12 +59,12 @@
 
 .padding_small,
 .padding_xmedium {
-    --local_padding: var(--zd_size3);
+    --local_padding: 3px;
 }
 
 .padding_medium,
 .padding_large {
-    --local_padding: var(--zd_size8);
+    --local_padding: 8px;
 }
 
 .xmedium {

package/es/v1/Label/Label.js

@@ -1,3 +1,5 @@
+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'; // props
 
 import defaultProps from "./props/defaultProps";
@@ -71,7 +73,7 @@ const Label = props => {
     $i18n_dataTitle: ""
   }, requiredType === 'text' ? `(${i18n_requiredText})` : '*');
 
-  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, customProps_container, {
     $tagAttributes_container: { ...tagAttributes_container,
       'data-selector-id': customId
     },
@@ -81,7 +83,7 @@ const Label = props => {
     testId: testId,
     customId: customId,
     $ui_className: containerClass
-  }, renderNode(renderLeftPlaceholderNode), /*#__PURE__*/React.createElement(Typography, { ...customProps_label,
+  }), renderNode(renderLeftPlaceholderNode), /*#__PURE__*/React.createElement(Typography, _extends({}, customProps_label, {
     $tagAttributes_text: { ...tagAttributes_label,
       htmlFor,
       onClick
@@ -93,7 +95,7 @@ const Label = props => {
     $ui_size: FONT_SIZE[size],
     $ui_weight: fontWeight,
     $flag_dotted: isClipped
-  }, text, isRequired && !isClipped ? renderRequired() : null), isRequired && isClipped ? renderRequired() : null, renderNode(renderRightPlaceholderNode));
+  }), text, isRequired && !isClipped ? renderRequired() : null), isRequired && isClipped ? renderRequired() : null, renderNode(renderRightPlaceholderNode));
 };
 
 export default withComponentRegistrar(Label, {

package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -88,6 +88,40 @@ exports[`Label - Snapshot Render with default props 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_regular label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
+<DocumentFragment>
+  <div
+    class="inlineFlex row alignItems_center container default"
+    data-id="flex"
+    data-test-id="flex"
+  >
+    <label
+      class="size14 font_semibold label"
+      data-title="Label text"
+    >
+      Label text
+    </label>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Label - Snapshot Render with htmlFor 1`] = `
 <DocumentFragment>
   <div
@@ -121,6 +155,7 @@ exports[`Label - Snapshot Render with i18nKeys 1`] = `
       <span
         aria-hidden="true"
         class="size14 font_regular requiredCommon flexshrink requiredText"
+        data-title=""
       >
         (Custom Required)
       </span>
@@ -195,6 +230,7 @@ exports[`Label - Snapshot Render with isRequired=true 1`] = `
       <span
         aria-hidden="true"
         class="size14 font_regular requiredCommon flexshrink asterisk"
+        data-title=""
       >
         *
       </span>
@@ -219,6 +255,7 @@ exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
     <span
       aria-hidden="true"
       class="size14 font_regular requiredCommon flexshrink asterisk"
+      data-title=""
     >
       *
     </span>
@@ -309,6 +346,7 @@ exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
       <span
         aria-hidden="true"
         class="size14 font_regular requiredCommon flexshrink asterisk"
+        data-title=""
       >
         *
       </span>
@@ -332,6 +370,7 @@ exports[`Label - Snapshot Render with requiredType=text 1`] = `
       <span
         aria-hidden="true"
         class="size14 font_regular requiredCommon flexshrink requiredText"
+        data-title=""
       >
         (Required)
       </span>
@@ -355,6 +394,7 @@ exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
       <span
         aria-hidden="true"
         class="size14 font_regular requiredCommon flexshrink asterisk"
+        data-title=""
       >
         *
       </span>
@@ -415,37 +455,3 @@ exports[`Label - Snapshot Render with tag attributes 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
-<DocumentFragment>
-  <div
-    class="inlineFlex row alignItems_center container default"
-    data-id="flex"
-    data-test-id="flex"
-  >
-    <label
-      class="size14 font_regular label"
-      data-title="Label text"
-    >
-      Label text
-    </label>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
-<DocumentFragment>
-  <div
-    class="inlineFlex row alignItems_center container default"
-    data-id="flex"
-    data-test-id="flex"
-  >
-    <label
-      class="size14 font_semibold label"
-      data-title="Label text"
-    >
-      Label text
-    </label>
-  </div>
-</DocumentFragment>
-`;

package/es/v1/Switch/Switch.js

@@ -1,3 +1,5 @@
+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'; // props
 
 import defaultProps from "./props/defaultProps";
@@ -76,7 +78,7 @@ const Switch = props => {
     },
     style
   });
-  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+  return /*#__PURE__*/React.createElement(Flex, _extends({}, customProps_container, {
     $ui_displayMode: "inline",
     $ui_direction: ITEMS_DIRECTION[labelPlacement],
     $ui_alignItems: ALIGN_ITEMS[labelPlacement],
@@ -87,7 +89,7 @@ const Switch = props => {
     customId: customId,
     $ui_className: containerClass,
     $a11yAttributes_container: a11yAttributes_container
-  }, label && /*#__PURE__*/React.createElement(Label, { ...customProps_label,
+  }), label && /*#__PURE__*/React.createElement(Label, _extends({}, customProps_label, {
     text: label,
     palette: isDisabled ? 'primary' : 'default',
     size: labelSize,
@@ -96,11 +98,10 @@ const Switch = props => {
     a11y: a11yAttributes_label,
     clipped: true,
     title: label
-  }), /*#__PURE__*/React.createElement(Flex, {
+  })), /*#__PURE__*/React.createElement(Flex, {
     $flag_shrink: false,
     $ui_className: trackWrapperClass
-  }, /*#__PURE__*/React.createElement("input", { ...tagAttributes_switch,
-    ...restA11yAttributes_switch,
+  }, /*#__PURE__*/React.createElement("input", _extends({}, tagAttributes_switch, restA11yAttributes_switch, {
     type: "checkbox",
     id: id,
     name: name,
@@ -112,7 +113,7 @@ const Switch = props => {
     role: "switch",
     "aria-disabled": ariaDisabled,
     "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
-  }), /*#__PURE__*/React.createElement("svg", {
+  })), /*#__PURE__*/React.createElement("svg", {
     className: thumbClass,
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React.createElement("circle", {