@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/cjs/components/Overlay/Overlay.js

@@ -12,76 +12,78 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Element = styledComponents.styled.div `
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
-    animation: fadeIn 0.2s ease-in-out;
-
-    @keyframes fadeIn {
-        0% {
-            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
-        }
-
-        100% {
-            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
-        }
-    }
-`;
+const Element = styledComponents.styled.div.withConfig({
+  displayName: "Overlay__Element",
+  componentId: "sc-vgn95v-0"
+})(["position:fixed;top:0;bottom:0;left:0;right:0;background-color:", "", ";animation:fadeIn 0.2s ease-in-out;@keyframes fadeIn{0%{background-color:", "", ";}100%{background-color:", "", ";}}"], theme.default.color.background.plum.default, theme.default.color.transparency.T40, theme.default.color.background.plum.default, theme.default.color.transparency.T0, theme.default.color.background.plum.default, theme.default.color.transparency.T40);
 /** @visibleName Overlay */
-const Overlay = (_a) => {
-    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId, as = 'section', role, isFocusTrapped = true } = _a, props = tslib.__rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
-    const contentRef = React.useRef(null);
-    const portalContainer = portalContainerSelector
-        ? document.querySelector(portalContainerSelector)
-        : null;
-    const appElement = document.querySelector(appElementSelector);
-    const overlayElement = (React__default.default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId, onKeyDown: props.onKeyDown, "aria-label": props.ariaLabel, as: as, role: as === 'div' ? role : undefined },
-        React__default.default.createElement("div", { ref: contentRef, tabIndex: -1, "data-testid": dataTestId ? `${dataTestId}-content` : '' }, props.children)));
-    React.useEffect(() => {
-        if (preventBodyScroll) {
-            document.body.style.setProperty('overflow', 'hidden');
-            document.body.style.setProperty('position', 'relative');
-            document.body.style.setProperty('top', '0');
-            document.body.style.setProperty('left', '0');
-            return () => {
-                document.body.style.removeProperty('overflow');
-            };
-        }
-        return undefined;
-    }, [preventBodyScroll]);
-    React.useEffect(() => {
+const Overlay = _a => {
+  var {
+      portalContainer: portalContainerSelector = 'body',
+      appElement: appElementSelector = '#__next',
+      preventBodyScroll = true,
+      'data-testid': dataTestId,
+      as = 'section',
+      role,
+      isFocusTrapped = true
+    } = _a,
+    props = tslib.__rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
+  const contentRef = React.useRef(null);
+  const portalContainer = portalContainerSelector ? document.querySelector(portalContainerSelector) : null;
+  const appElement = document.querySelector(appElementSelector);
+  const overlayElement = /*#__PURE__*/React__default.default.createElement(Element, {
+    id: props.id,
+    onClick: props.onClick,
+    className: props.className,
+    "data-testid": dataTestId,
+    onKeyDown: props.onKeyDown,
+    "aria-label": props.ariaLabel,
+    as: as,
+    role: as === 'div' ? role : undefined
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: contentRef,
+    tabIndex: -1,
+    "data-testid": dataTestId ? `${dataTestId}-content` : ''
+  }, props.children));
+  React.useEffect(() => {
+    if (preventBodyScroll) {
+      document.body.style.setProperty('overflow', 'hidden');
+      document.body.style.setProperty('position', 'relative');
+      document.body.style.setProperty('top', '0');
+      document.body.style.setProperty('left', '0');
+      return () => {
+        document.body.style.removeProperty('overflow');
+      };
+    }
+    return undefined;
+  }, [preventBodyScroll]);
+  React.useEffect(() => {
+    var _a;
+    if (appElement) {
+      const focusTrapStart = document.createElement('div');
+      focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
+      focusTrapStart.addEventListener('focus', () => {
+        var _a;
+        (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+      const focusTrapEnd = focusTrapStart.cloneNode();
+      focusTrapEnd.addEventListener('focus', () => {
         var _a;
-        if (appElement) {
-            const focusTrapStart = document.createElement('div');
-            focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
-            focusTrapStart.addEventListener('focus', () => {
-                var _a;
-                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-            const focusTrapEnd = focusTrapStart.cloneNode();
-            focusTrapEnd.addEventListener('focus', () => {
-                var _a;
-                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-            (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            document.body.prepend(focusTrapStart);
-            document.body.append(focusTrapEnd);
-            appElement.setAttribute('inert', 'true');
-            return () => {
-                document.body.removeChild(focusTrapStart);
-                document.body.removeChild(focusTrapEnd);
-                appElement.removeAttribute('inert');
-            };
-        }
-        return undefined;
-    }, [appElement, contentRef, isFocusTrapped]);
-    return portalContainerSelector === false
-        ? overlayElement
-        : reactDom.createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+        (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
+      (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      document.body.prepend(focusTrapStart);
+      document.body.append(focusTrapEnd);
+      appElement.setAttribute('inert', 'true');
+      return () => {
+        document.body.removeChild(focusTrapStart);
+        document.body.removeChild(focusTrapEnd);
+        appElement.removeAttribute('inert');
+      };
+    }
+    return undefined;
+  }, [appElement, contentRef, isFocusTrapped]);
+  return portalContainerSelector === false ? overlayElement : /*#__PURE__*/reactDom.createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
 };
 
 exports.default = Overlay;

package/build/cjs/components/Pill/Pill.js

@@ -13,15 +13,16 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
-    const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
-    const bgColor = isChecked
-        ? theme.default.color.background.plum.default
-        : theme.default.color.background.orange.E02;
-    const hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
-    const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.black;
-    const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
-    return `
+const getStandardPillStyles = ({
+  isChecked,
+  isDisabled
+}) => {
+  const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
+  const bgColor = isChecked ? theme.default.color.background.plum.default : theme.default.color.background.orange.E02;
+  const hoverBgColor = isChecked ? '#441632' : '#FFB557'; // Only Pill component specific colors to be used on user interaction styles
+  const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.black;
+  const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
+  return `
       font-size: ${theme.default.fontSize.s};
       font-weight: ${theme.default.fontWeight.medium};
       padding: 2px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
@@ -31,68 +32,59 @@ const getStandardPillStyles = ({ isChecked, isDisabled, }) => {
       ${!isDisabled ? `&:hover { background-color: ${hoverBgColor}; }` : ''}
     `;
 };
-const getDefaultButtonStyles = ({ isChecked, isDisabled, }) => {
-    const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
-    const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
-    const disabledBgColor = isDisabled ? theme.default.color.default.plum : Button.shade.plum.lighter;
-    const bgColor = isChecked ? disabledBgColor : 'transparent';
-    const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.plum;
-    const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
-    const disabledBorderColor = isDisabled ? 'transparent' : Button.shade.plum.lighter;
-    const borderColor = isChecked
-        ? disabledBorderColor
-        : `${theme.default.color.default.plum}${alphaValue}`;
-    return `
+const getDefaultButtonStyles = ({
+  isChecked,
+  isDisabled
+}) => {
+  const alphaValue = isDisabled ? theme.default.color.transparency.T30 : theme.default.color.transparency.T100;
+  const hoverColor = '#441632'; // Only Pill component specific colors to be used on user interaction styles
+  const disabledBgColor = isDisabled ? theme.default.color.default.plum : Button.shade.plum.lighter;
+  const bgColor = isChecked ? disabledBgColor : 'transparent';
+  const textColor = isChecked ? theme.default.color.default.white : theme.default.color.default.plum;
+  const disabledTextColor = isDisabled ? theme.default.color.text.gray : textColor;
+  const disabledBorderColor = isDisabled ? 'transparent' : Button.shade.plum.lighter;
+  const borderColor = isChecked ? disabledBorderColor : `${theme.default.color.default.plum}${alphaValue}`;
+  return `
       font-size: ${theme.default.fontSize.default};
       font-weight: ${theme.default.fontWeight.bold};
       padding: 6px ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.5)};
       background-color: ${bgColor}${alphaValue};
       color: ${disabledTextColor};
       border: 2px solid ${borderColor};
-      ${!isDisabled
-        ? `
+      ${!isDisabled ? `
         &:hover { 
             border: 2px solid ${hoverColor};
             color: ${theme.default.color.default.white}; 
             background-color: ${hoverColor}; 
-        }`
-        : ''}
+        }` : ''}
     `;
 };
-const Label = styledComponents.styled.label `
-    all: unset;
-    position: relative;
-    display: inline-block;
-    border-radius: ${theme.default.radius.pill};
-    line-height: ${theme.default.lineHeight.default};
-    text-align: center;
-    transition: all 0.2s ease-in-out;
-
-    ${({ $isChecked, $isDisabled, $isDefaultButtonStyle }) => $isDefaultButtonStyle
-    ? getDefaultButtonStyles({ isChecked: $isChecked, isDisabled: $isDisabled })
-    : getStandardPillStyles({ isChecked: $isChecked, isDisabled: $isDisabled })}
-
-    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
-
-    &:focus-within, *:focus > & {
-        outline: none;
-        box-shadow:
-            0px 0px 0px 2px ${theme.default.color.focus.light},
-            0px 0px 0px 4px ${theme.default.color.focus.dark};
-    }
-
-    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
-    `
+const Label = styledComponents.styled.label.withConfig({
+  displayName: "Pill__Label",
+  componentId: "sc-1v4xyar-0"
+})(["all:unset;position:relative;display:inline-block;border-radius:", ";line-height:", ";text-align:center;transition:all 0.2s ease-in-out;", " ", " &:focus-within,*:focus > &{outline:none;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}", " ", " ", ""], theme.default.radius.pill, theme.default.lineHeight.default, ({
+  $isChecked,
+  $isDisabled,
+  $isDefaultButtonStyle
+}) => $isDefaultButtonStyle ? getDefaultButtonStyles({
+  isChecked: $isChecked,
+  isDisabled: $isDisabled
+}) : getStandardPillStyles({
+  isChecked: $isChecked,
+  isDisabled: $isDisabled
+}), ({
+  $isDisabled
+}) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`, theme.default.color.focus.light, theme.default.color.focus.dark, ({
+  $position
+}) => ($position === 'right' || $position === 'middle') && `
             margin-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-        `}
-
-    ${({ $position }) => ($position === 'left' || $position === 'middle') &&
-    `
+        `, ({
+  $position
+}) => ($position === 'left' || $position === 'middle') && `
             margin-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-        `}
-    
-    ${({ $position }) => $position === 'auto' &&
-    `
+        `, ({
+  $position
+}) => $position === 'auto' && `
         margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
 
         &:first-of-type {
@@ -102,31 +94,48 @@ const Label = styledComponents.styled.label `
         &:last-of-type {
             margin-right: 0;
         }
-    `}
-`;
-const Input = styledComponents.styled.input `
-    appearance: none;
-    display: block;
-    border: 0 none;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    &:focus-visible {
-        outline: 0 none;
-    }
-
-    ${({ $isDisabled }) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`}
-`;
-const Pill = (_a) => {
-    var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    const isDefaultType = type === 'none';
-    return (React__default.default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, "$position": props.position, "$isChecked": props.isChecked || props.isDefaultChecked, "$isDisabled": props.isDisabled, className: props.className, "data-testid": dataTestId, "$isDefaultButtonStyle": props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
-        props.children,
-        !isDefaultType && (React__default.default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked, "$isDisabled": props.isDisabled }))));
+    `);
+const Input = styledComponents.styled.input.withConfig({
+  displayName: "Pill__Input",
+  componentId: "sc-1v4xyar-1"
+})(["appearance:none;display:block;border:0 none;margin:0;width:100%;height:100%;position:absolute;top:0;left:0;&:focus-visible{outline:0 none;}", ""], ({
+  $isDisabled
+}) => `cursor: ${$isDisabled ? 'not-allowed' : 'pointer'};`);
+const Pill = _a => {
+  var {
+      type = 'none',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["type", 'data-testid']);
+  const isDefaultType = type === 'none';
+  return /*#__PURE__*/React__default.default.createElement(Label, {
+    as: isDefaultType ? 'button' : 'label',
+    id: isDefaultType ? props.id : undefined,
+    htmlFor: !isDefaultType ? props.id : undefined,
+    type: isDefaultType ? 'button' : undefined,
+    "$position": props.position,
+    "$isChecked": props.isChecked || props.isDefaultChecked,
+    "$isDisabled": props.isDisabled,
+    className: props.className,
+    "data-testid": dataTestId,
+    "$isDefaultButtonStyle": props.isDefaultButtonStyle,
+    "aria-label": props.ariaLabel,
+    disabled: isDefaultType ? props.isDisabled : undefined,
+    onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined
+  }, props.children, !isDefaultType && (/*#__PURE__*/React__default.default.createElement(Input, {
+    id: props.id,
+    name: props.name,
+    type: type,
+    defaultChecked: props.isDefaultChecked,
+    checked: props.isChecked,
+    value: props.value,
+    onChange: props.onChange,
+    disabled: props.isDisabled,
+    readOnly: !props.onChange,
+    "data-testid": dataTestId && `${dataTestId}-input`,
+    "data-checked": props.isChecked,
+    "$isDisabled": props.isDisabled
+  })));
 };
 
 exports.default = Pill;

package/build/cjs/components/PillGroup/PillGroup.js

@@ -8,39 +8,56 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const PillGroup = ({ children, label, id, type, className, description, groupVariant, 'data-testid': dataTestId = 'pill-group', }) => {
-    const isFieldset = groupVariant === 'fieldset';
-    const Wrapper = isFieldset ? 'fieldset' : 'div';
-    const labelId = `${id}-label`;
-    const descriptionId = `${id}-description`;
-    const labelDataTestId = `${dataTestId}-label`;
-    const descriptionDataTestId = `${dataTestId}-description`;
-    const isRadioGroup = type === 'radio' && groupVariant === 'radiogroup';
-    const isCheckboxAndButtonGroup = (type === 'checkbox' || type === 'none') && groupVariant === 'group';
-    let customRole;
-    if (isRadioGroup) {
-        customRole = 'radiogroup';
-    }
-    else if (isCheckboxAndButtonGroup) {
-        customRole = 'group';
-    }
-    else {
-        customRole = undefined;
-    }
-    const renderLabel = () => {
-        if (!label)
-            return null;
-        return isFieldset ? (React__default.default.createElement("legend", { "data-testid": labelDataTestId }, label)) : (React__default.default.createElement("div", { id: labelId, "data-testid": labelDataTestId }, label));
-    };
-    const renderDescription = () => {
-        if (!description)
-            return null;
-        return (React__default.default.createElement("div", { id: descriptionId, "data-testid": descriptionDataTestId }, description));
-    };
-    return (React__default.default.createElement(Wrapper, { id: isFieldset ? id : undefined, role: customRole, "aria-labelledby": !isFieldset && labelId ? labelId : undefined, "aria-describedby": !isFieldset && description ? descriptionId : undefined, className: className, "data-testid": dataTestId },
-        renderLabel(),
-        renderDescription(),
-        children));
+const PillGroup = ({
+  children,
+  label,
+  id,
+  type,
+  className,
+  description,
+  groupVariant,
+  'data-testid': dataTestId = 'pill-group'
+}) => {
+  const isFieldset = groupVariant === 'fieldset';
+  const Wrapper = isFieldset ? 'fieldset' : 'div';
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const labelDataTestId = `${dataTestId}-label`;
+  const descriptionDataTestId = `${dataTestId}-description`;
+  const isRadioGroup = type === 'radio' && groupVariant === 'radiogroup';
+  const isCheckboxAndButtonGroup = (type === 'checkbox' || type === 'none') && groupVariant === 'group';
+  let customRole;
+  if (isRadioGroup) {
+    customRole = 'radiogroup';
+  } else if (isCheckboxAndButtonGroup) {
+    customRole = 'group';
+  } else {
+    customRole = undefined;
+  }
+  const renderLabel = () => {
+    if (!label) return null;
+    return isFieldset ? (/*#__PURE__*/React__default.default.createElement("legend", {
+      "data-testid": labelDataTestId
+    }, label)) : (/*#__PURE__*/React__default.default.createElement("div", {
+      id: labelId,
+      "data-testid": labelDataTestId
+    }, label));
+  };
+  const renderDescription = () => {
+    if (!description) return null;
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      id: descriptionId,
+      "data-testid": descriptionDataTestId
+    }, description);
+  };
+  return /*#__PURE__*/React__default.default.createElement(Wrapper, {
+    id: isFieldset ? id : undefined,
+    role: customRole,
+    "aria-labelledby": !isFieldset && labelId ? labelId : undefined,
+    "aria-describedby": !isFieldset && description ? descriptionId : undefined,
+    className: className,
+    "data-testid": dataTestId
+  }, renderLabel(), renderDescription(), children);
 };
 
 exports.default = PillGroup;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -11,41 +11,44 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const loading = styledComponents.keyframes `
-    0% {
-        transform: scale(1);
-    }
-    20% {
-        transform: scale(1.4, 1.4);
-    }
-    40% {
-        transform: scale(1);
-    }
-`;
-const PixelLoaderWrapper = styledComponents.styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.125rem;
-`;
-const Pixel = styledComponents.styled.div `
-    background-color: ${({ $color }) => $color || theme.default.color.default.pink};
-    display: inline-block;
-    width: 0.625rem;
-    height: 0.625rem;
-    margin: 0.125rem;
-    animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${({ $delay }) => $delay}s;
-`;
+const loading = styledComponents.keyframes(["0%{transform:scale(1);}20%{transform:scale(1.4,1.4);}40%{transform:scale(1);}"]);
+const PixelLoaderWrapper = styledComponents.styled.div.withConfig({
+  displayName: "PixelLoader__PixelLoaderWrapper",
+  componentId: "sc-1qpqbdi-0"
+})(["display:flex;justify-content:center;align-items:center;padding:0.125rem;"]);
+const Pixel = styledComponents.styled.div.withConfig({
+  displayName: "PixelLoader__Pixel",
+  componentId: "sc-1qpqbdi-1"
+})(["background-color:", ";display:inline-block;width:0.625rem;height:0.625rem;margin:0.125rem;animation:", " 1s ease-in-out infinite;animation-delay:", "s;"], ({
+  $color
+}) => $color || theme.default.color.default.pink, loading, ({
+  $delay
+}) => $delay);
 /** @visibleName Pixel Loader */
-const PixelLoader = (_a) => {
-    var { className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["className", 'data-testid']);
-    return (React__default.default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
-        props.label && React__default.default.createElement("span", { className: "visually-hidden" }, props.label),
-        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "-0.27" }),
-        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "-0.18" }),
-        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "-0.09" }),
-        React__default.default.createElement(Pixel, { "$color": props.color, "$delay": "0" })));
+const PixelLoader = _a => {
+  var {
+      className,
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["className", 'data-testid']);
+  return /*#__PURE__*/React__default.default.createElement(PixelLoaderWrapper, {
+    className: className,
+    "data-testid": dataTestId
+  }, props.label && /*#__PURE__*/React__default.default.createElement("span", {
+    className: "visually-hidden"
+  }, props.label), /*#__PURE__*/React__default.default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "-0.27"
+  }), /*#__PURE__*/React__default.default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "-0.18"
+  }), /*#__PURE__*/React__default.default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "-0.09"
+  }), /*#__PURE__*/React__default.default.createElement(Pixel, {
+    "$color": props.color,
+    "$delay": "0"
+  }));
 };
 
 exports.default = PixelLoader;