@dnanpm/styleguide 2.1.0 → 2.2.1

package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.js

@@ -12,7 +12,7 @@ const Tail = styled['default'].div `
     right: ${p => p.arrowPosition};
     margin-top: -17.5px;
     top: ${p => p.tooltipTop};
-    z-index: ${p => p.zIndex + 1};
+    z-index: ${p => Number(p.zIndex) + 1};
     border: 10px solid transparent;
     border-right-color: white;
     transform: rotate(90deg);
@@ -25,7 +25,7 @@ const TailShadow = styled['default'].div `
     margin-top: -5px;
     margin-right: 8.5px;
     top: ${p => p.tooltipTop};
-    z-index: ${p => p.zIndex + 1};
+    z-index: ${p => Number(p.zIndex) + 1};
     right: ${p => p.arrowPosition};
     background-color: transparent;
     box-shadow: 0 0 5px 0 ${p => p.theme.color.black};

package/build/cjs/components/TooltipMenu/TooltipMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Props as IconProps } from '../Icon/Icon';
+import type { Props as IconProps } from '../Icon/Icon';
 export interface TooltipMenuProps {
     /** Text selector */
     selector: string;

package/build/cjs/components/TooltipMenu/TooltipMenu.js

@@ -7,6 +7,7 @@ var useOutsideClick = require('../../hooks/useOutsideClick.js');
 var styled = require('../../themes/styled.js');
 var colors = require('../../themes/themeComponents/colors.js');
 var Icon = require('../Icon/Icon.js');
+require('tslib');
 var hlChevronDown = require('../Icons/hlChevronDown.js');
 var TooltipMenuExportedStyles = require('./ChildComponents/TooltipMenuExportedStyles.js');
 

package/build/cjs/hooks/useCloseOutsideOrElementClicked.d.ts

@@ -1,6 +1,7 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 /**
  * Hook to handle the click outside the referenced element
+ *
  * @param ref - reference to the targeted element
  * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
  * @param callback - callback

package/build/cjs/hooks/useCloseOutsideOrElementClicked.js

@@ -6,6 +6,7 @@ var React = require('react');
 
 /**
  * Hook to handle the click outside the referenced element
+ *
  * @param ref - reference to the targeted element
  * @param closeWhenTagClicked - provided array of tag names in lowercase which will also close dropdown. Works if tag or first parent is clicked.
  * @param callback - callback

package/build/cjs/hooks/useDocHeight.js

@@ -8,7 +8,7 @@ var useDebounceFunc = require('./useDebounceFunc.js');
 const DEBOUNCE_DELAY = 100;
 const useDocHeight = () => {
     const setDocHeight = React.useCallback(() => {
-        document.documentElement.style.setProperty('--vh100', window.innerHeight + 'px');
+        document.documentElement.style.setProperty('--vh100', `${window.innerHeight}px`);
     }, []);
     const debounceSetDocHeight = useDebounceFunc.useDebounceFunc(setDocHeight, DEBOUNCE_DELAY);
     React.useEffect(() => {

package/build/cjs/hooks/useOutsideClick.d.ts

@@ -1,8 +1,9 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 /**
  * Hook to handle the click outside the referenced element
- * @param ref - reference to the targeted element
- * @param callback - callback
+ *
+ * @param {RefObject<Element>} ref - reference to the targeted element
+ * @param {Function} callback - callback
  */
 declare const useOutsideClick: (ref: RefObject<Element>, callback: () => void) => void;
 export default useOutsideClick;

package/build/cjs/hooks/useOutsideClick.js

@@ -6,8 +6,9 @@ var React = require('react');
 
 /**
  * Hook to handle the click outside the referenced element
- * @param ref - reference to the targeted element
- * @param callback - callback
+ *
+ * @param {RefObject<Element>} ref - reference to the targeted element
+ * @param {Function} callback - callback
  */
 const useOutsideClick = (ref, callback) => {
     const handleClick = (e) => {

package/build/cjs/hooks/useScrollPosition.d.ts

@@ -1,4 +1,4 @@
-import react, { MutableRefObject } from 'react';
+import type { DependencyList, MutableRefObject } from 'react';
 /**
  * Hook to follow scroll position without rerendering the view.
  * Modified to ES6 and work with SSR (fixed window undefined error) and Rocket architecture from https://www.npmjs.com/package/@n8tb1t/use-scroll-position
@@ -12,7 +12,7 @@ interface ScrollPositionProps {
     currPos: ScrollPosition;
 }
 declare const useScrollPosition: {
-    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, deps: react.DependencyList, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
+    (effect: ({ prevPos, currPos }: ScrollPositionProps) => void, deps: DependencyList, element: MutableRefObject<Element> | undefined, useWindow: boolean, wait: number): void;
     defaultProps: {
         deps: never[];
         element: boolean;

package/build/cjs/hooks/useScrollPosition.js

@@ -11,8 +11,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 /* eslint-disable react-hooks/exhaustive-deps */
 const isBrowser = typeof window !== 'undefined';
 const getScrollPosition = (ref) => {
-    const element = ref.element;
-    const useWindow = ref.useWindow;
+    const { element } = ref;
+    const { useWindow } = ref;
     if (!isBrowser) {
         return {
             x: 0,
@@ -50,7 +50,7 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
     };
     React__default['default'].useEffect(() => {
         if (!isBrowser) {
-            return;
+            return undefined;
         }
         const handleScroll = () => {
             if (wait) {
@@ -63,9 +63,7 @@ const useScrollPosition = (effect, deps, element, useWindow, wait) => {
             }
         };
         window.addEventListener('scroll', handleScroll);
-        return () => {
-            return window.removeEventListener('scroll', handleScroll);
-        };
+        return () => window.removeEventListener('scroll', handleScroll);
     }, deps);
 };
 useScrollPosition.defaultProps = {

package/build/cjs/index.js

@@ -501,12 +501,12 @@ exports.youtube = youtube['default'];
 exports.Image = Image['default'];
 exports.Input = Input['default'];
 exports.Label = Label['default'];
-exports.LabelText = LabelText.LabelText;
+exports.LabelText = LabelText['default'];
 exports.MainNavigation = MainNavigation['default'];
 exports.Modal = Modal['default'];
 exports.Notification = Notification['default'];
 exports.NotificationBadge = NotificationBadge.NotificationBadge;
-exports.PixelLoader = PixelLoader.PixelLoader;
+exports.PixelLoader = PixelLoader['default'];
 exports.ProgressIndicator = ProgressIndicator['default'];
 exports.RadioButton = RadioButton['default'];
 exports.ReadMore = ReadMore['default'];

package/build/cjs/themes/globalStyles.d.ts

@@ -99,7 +99,7 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }>>;
-export declare const CheckboxInput_RadioInput: import("styled-components").StyledComponent<"input", {
+export declare const CheckboxAndRadioInputCore: import("styled-components").StyledComponent<"input", {
     base: {
         baseHeight: {
             value: number;

package/build/cjs/themes/globalStyles.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styled = require('./styled.js');
 var styledUtils = require('../utils/styledUtils.js');
+var styled = require('./styled.js');
 
 const globalStyles = styled.css `
     *,
@@ -179,7 +179,7 @@ const globalStyles = styled.css `
         font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
     }
 `;
-const CheckboxInput_RadioInput = styled['default'].input `
+const CheckboxAndRadioInputCore = styled['default'].input `
     display: inline-grid;
     appearance: none;
     place-content: center;
@@ -236,5 +236,5 @@ styled.createGlobalStyle `
     ${globalStyles}
 `;
 
-exports.CheckboxInput_RadioInput = CheckboxInput_RadioInput;
+exports.CheckboxAndRadioInputCore = CheckboxAndRadioInputCore;
 exports.globalStyles = globalStyles;

package/build/cjs/themes/styled.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var createStyled = require('../utils/createStyled.js');
 
-const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet, } = createStyled['default']();
+const { styled, css, createGlobalStyle, keyframes, ThemeProvider, ServerStyleSheet } = createStyled['default']();
 
 exports.ServerStyleSheet = ServerStyleSheet;
 exports.ThemeProvider = ThemeProvider;

package/build/cjs/themes/themeComponents/fontSize.js

@@ -18,10 +18,6 @@ const fontSize = {
     h4: '1.25rem',
     h5: '1rem',
 };
-var fontSize$1 = {
-    h1: fontSize.h1L,
-    h2: fontSize.h2M,
-    ...fontSize,
-};
+var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 
 exports.default = fontSize$1;

package/build/cjs/themes/themeComponents/lineHeight.js

@@ -19,10 +19,6 @@ const lineHeight = {
     h4: '1.5rem',
     h5: '1rem',
 };
-var lineHeight$1 = {
-    h1: lineHeight.h1L,
-    h2: lineHeight.h2M,
-    ...lineHeight,
-};
+var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 
 exports.default = lineHeight$1;

package/build/cjs/utils/createStyled.d.ts

@@ -1,5 +1,5 @@
 import * as styledComponents from 'styled-components';
-import { ThemeInterface } from '../themes/theme';
+import type { ThemeInterface } from '../themes/theme';
 declare function createStyled<T extends ThemeInterface>(): {
     styled: styledComponents.ThemedStyledInterface<T>;
     css: styledComponents.ThemedCssFunction<T>;

package/build/es/components/Accordion/Accordion.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface Props {
+import type { Props as AccordionItemProps } from './AccordionItem';
+interface Props extends Omit<AccordionItemProps, 'title' | 'id' | 'children' | 'onClick' | 'onKeyDown'> {
     /**
      * Content of Accordion
      *
@@ -12,39 +13,8 @@ export interface Props {
      * @default false
      */
     autoCollapsible?: boolean;
-    /**
-     * Allows to remove item title highlight when it is in expanded state
-     * Removes also highlight of CSS :hover and :active states
-     *
-     * @default true
-     */
-    highlightSelected?: boolean;
-    /**
-     * Allows to expand or collapse the component
-     *
-     * @default false
-     */
-    isExpanded?: boolean;
-    /**
-     * Display close button in the item content
-     *
-     * @default false
-     */
-    hasCloseButton?: boolean;
-    /**
-     * Label to show for the open icon for accessibility
-     */
-    openLabel?: string;
-    /**
-     * Label to show for the close button in the content
-     */
-    closeLabel?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
 }
 /** @visibleName Accordion */
-declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element;
+declare const Accordion: ({ autoCollapsible, highlightSelected, hasCloseButton, ...props }: Props) => JSX.Element | null;
 /** @component */
 export default Accordion;

package/build/es/components/Accordion/Accordion.js

@@ -1,8 +1,10 @@
+import { __rest } from 'tslib';
 import React, { useState } from 'react';
 import AccordionItem from './AccordionItem.js';
 
 /** @visibleName Accordion */
-const Accordion = ({ autoCollapsible = false, highlightSelected = true, hasCloseButton = false, ...props }) => {
+const Accordion = (_a) => {
+    var { autoCollapsible = false, highlightSelected = true, hasCloseButton = false } = _a, props = __rest(_a, ["autoCollapsible", "highlightSelected", "hasCloseButton"]);
     const initialItemList = {};
     const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
     if (props.isExpanded) {
@@ -14,29 +16,31 @@ const Accordion = ({ autoCollapsible = false, highlightSelected = true, hasClose
     }
     const [itemList, setItemList] = useState(initialItemList);
     const toggleExpanded = (currentItemId) => {
-        const currentItemState = itemList[currentItemId];
-        setItemList({
-            ...(autoCollapsible ? {} : itemList),
-            [currentItemId]: !currentItemState,
-        });
+        if (currentItemId) {
+            const currentItemState = itemList[currentItemId];
+            setItemList(Object.assign(Object.assign({}, (autoCollapsible ? {} : itemList)), { [currentItemId]: !currentItemState }));
+        }
     };
     const handleClick = (e) => {
-        toggleExpanded(e.currentTarget.parentElement.id);
+        var _a, _b;
+        toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
     };
     const handleKeyDown = (e) => {
+        var _a, _b;
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
-            toggleExpanded(e.currentTarget.parentElement.id);
+            toggleExpanded((_b = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id);
         }
     };
     const accordionItems = React.Children.map(props.children, (child, index) => {
         if (React.isValidElement(child) && child.type === AccordionItem) {
             const id = getAccordionItemId(index, child.props.title);
-            return (React.createElement(AccordionItem, Object.assign({ id: id, key: id, title: child.props.title, isExpanded: itemList[id], hasCloseButton: hasCloseButton, highlightSelected: highlightSelected, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown }, child.props), child.props.children));
+            return (React.createElement(AccordionItem, { id: id, key: id, title: child.props.title, isExpanded: itemList[id], highlightSelected: highlightSelected, hasCloseButton: hasCloseButton, openLabel: props.openLabel, closeLabel: props.closeLabel, onClick: handleClick, onKeyDown: handleKeyDown, className: child.props.className }, child.props.children));
         }
+        return null;
     });
     if (!accordionItems) {
-        return React.createElement(React.Fragment, null);
+        return null;
     }
     return React.createElement("div", { className: props.className }, accordionItems);
 };

package/build/es/components/Accordion/AccordionItem.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Props as AccordionProps } from './Accordion';
-interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
+export interface Props {
     /**
      * Accordion item title
      */
@@ -13,6 +12,33 @@ interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
      * Content of Accordion Item
      */
     children?: React.ReactNode;
+    /**
+     * Allows to expand or collapse the component
+     *
+     * @default false
+     */
+    isExpanded?: boolean;
+    /**
+     * Allows to remove item title highlight when it is in expanded state
+     * Removes also highlight of CSS :hover and :active states
+     *
+     * @default true
+     */
+    highlightSelected?: boolean;
+    /**
+     * Display close button in the item content
+     *
+     * @default false
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Label to show for the open icon for accessibility
+     */
+    openLabel?: string;
+    /**
+     * Label to show for the close button in the content
+     */
+    closeLabel?: string;
     /**
      * On component title and close button mouse click callback
      * Use `e.currentTarget.parentElement` to get AccordionItem element
@@ -23,6 +49,10 @@ interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
      * Use `e.currentTarget.parentElement` to get AccordionItem element
      */
     onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
 }
 /** @visibleName Accordion Item */
 declare const AccordionItem: ({ hasCloseButton, highlightSelected, ...props }: Props) => JSX.Element;

package/build/es/components/Accordion/AccordionItem.js

@@ -1,6 +1,8 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled__default, { css } from 'styled-components';
 import useResizeObserver from '../../hooks/useElementDimensions.js';
+import theme from '../../themes/theme.js';
 import { getDividedSize, getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import hlChevronDown from '../Icons/hlChevronDown.js';
@@ -8,59 +10,60 @@ import hlChevronUp from '../Icons/hlChevronUp.js';
 import hlX from '../Icons/hlX.js';
 
 const AccordionItemContainer = styled__default.div `
-    margin: ${p => `0 ${getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
+    margin: 0 ${getDividedSize(theme.base.baseHeight, 2.5)};
     border-bottom: 1px solid
-        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
+        ${p => (p.isExpanded && p.highlightSelected ? theme.color.hotPink : theme.color.gray15)};
 `;
 const AccordionItemTitle = styled__default.div `
-    font-size: ${p => p.theme.fontSize.default};
-    font-weight: ${p => p.theme.fontWeight.bold};
+    font-size: ${theme.fontSize.default};
+    font-weight: ${theme.fontWeight.bold};
     display: flex;
     justify-content: space-between;
     flex-direction: row;
     cursor: pointer;
-    padding: ${p => getMultipliedSize(p.theme.base.baseHeight, 1.6)}
-        ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
-    color: ${p => p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.text};
+    padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)}
+        ${getMultipliedSize(theme.base.baseHeight, 2)};
+    color: ${p => (p.isExpanded && p.highlightSelected ? theme.color.hotPink : theme.color.text)};
     transition: color 0.2s;
     ${p => p.highlightSelected &&
     css `
             &:hover,
             &:active {
-                color: ${p.theme.color.hotPink};
+                color: ${theme.color.hotPink};
                 text-decoration: none;
             }
         `}
 `;
 const AccordionItemContentWrapper = styled__default.div `
     overflow: hidden;
-    color: ${p => p.theme.color.slateGray};
+    color: ${theme.color.slateGray};
     transition: all 0.2s ease;
     height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
-    padding: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
+    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
 `;
 const AccordionItemContent = styled__default.div `
-    padding-bottom: ${p => getMultipliedSize(p.theme.base.baseHeight, 1.6)};
+    padding-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
 `;
 const AccordionItemCloseButton = styled__default.div `
     display: flex;
     justify-content: flex-end;
-    line-height: ${p => p.theme.lineHeight.default};
-    margin-bottom: ${p => getMultipliedSize(p.theme.base.baseHeight, 1.6)};
-    padding: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
-    gap: ${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
-    color: ${p => p.theme.color.text};
+    line-height: ${theme.lineHeight.default};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
+    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
+    gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
+    color: ${theme.color.text};
     cursor: pointer;
 `;
 /** @visibleName Accordion Item */
-const AccordionItem = ({ hasCloseButton = false, highlightSelected = true, ...props }) => {
+const AccordionItem = (_a) => {
+    var { hasCloseButton = false, highlightSelected = true } = _a, props = __rest(_a, ["hasCloseButton", "highlightSelected"]);
     // Get height when element dimensions change
     const { height: contentHeight, ref: contentRef } = useResizeObserver();
     return (React.createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
         React.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
             props.title,
-            Boolean(props.isExpanded) ? (React.createElement(Icon, { icon: hlChevronUp, position: "right", "aria-label": props.closeLabel })) : (React.createElement(Icon, { icon: hlChevronDown, position: "right", "aria-label": props.openLabel }))),
+            props.isExpanded ? (React.createElement(Icon, { icon: hlChevronUp, position: "right", "aria-label": props.closeLabel })) : (React.createElement(Icon, { icon: hlChevronDown, position: "right", "aria-label": props.openLabel }))),
         React.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
             React.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
         hasCloseButton && props.isExpanded && (React.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },

package/build/es/components/AmountSelector/AmountSelector.js

@@ -1,3 +1,4 @@
+import { __rest } from 'tslib';
 import React from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
@@ -41,7 +42,8 @@ const StyledButtonSecondary = styled(ButtonSecondary) `
     padding: ${getMultipliedSize(theme.base.baseWidth, 0.6)};
 `;
 /** @visibleName Amount Selector */
-const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, ...props }) => {
+const AmountSelector = (_a) => {
+    var { onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["onChange", "value", "step", "min", "max", "disabled", "readonly", 'data-testid']);
     const isMinReached = (val) => val < min;
     const isMaxReached = (val) => Boolean(max && val > max);
     const isInRange = (val) => !isMinReached(val) && !isMaxReached(val);

package/build/es/components/Buttons/ButtonBasicStyles.d.ts

@@ -1,9 +1,10 @@
+import type theme from '../../themes/theme';
 export interface ButtonProps {
     fullWidth?: boolean;
     small?: boolean;
     loading?: boolean | string;
     darkBg?: boolean;
-    theme?: any;
+    theme?: typeof theme;
 }
 declare const ButtonBasicStyle: import("styled-components").StyledComponent<"button", {
     base: {

package/build/es/components/Buttons/ButtonDefault.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Buttons */
 export declare const Button: (props: ButtonProps) => JSX.Element;
 /** @component */

package/build/es/components/Buttons/ButtonDefault.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from '../../themes/styled.js';
-import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import PixelLoader from '../PixelLoader/PixelLoader.js';
 import ButtonBasicStyle from './ButtonBasicStyles.js';
+import theme from '../../themes/theme.js';
 
 const noop = () => { }; // tslint:disable-line
 const StyledPixelLoader = styled(PixelLoader) `
@@ -16,7 +17,7 @@ const Button = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React.createElement(StyledPixelLoader, null)));
+        loading && (React.createElement(StyledPixelLoader, { color: darkBg ? theme.color.white : theme.color.black }))));
 };
 
 export default Button;

package/build/es/components/Buttons/ButtonIcon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonIconProps from './ButtonIconProps';
+import type ButtonIconProps from './ButtonIconProps';
 /** @visibleName Icon Button */
 declare const ButtonIcon: (props: ButtonIconProps) => JSX.Element;
 /** @component */

package/build/es/components/Buttons/ButtonIconPrimary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonIconProps from './ButtonIconProps';
+import type ButtonIconProps from './ButtonIconProps';
 /** @visibleName  Icon Button Primary */
 declare const ButtonIconPrimary: (props: ButtonIconProps) => JSX.Element;
 /** @component */

package/build/es/components/Buttons/ButtonPrimary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Button primary */
 declare const ButtonPrimary: (props: ButtonProps) => JSX.Element;
 /** @component */

package/build/es/components/Buttons/ButtonPrimary.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from '../../themes/styled.js';
-import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import PixelLoader from '../PixelLoader/PixelLoader.js';
 import ButtonPrimaryStyles from './ButtonPrimaryStyles.js';
+import theme from '../../themes/theme.js';
 
 const noop = () => { }; // tslint:disable-line
 const StyledPixelLoader = styled(PixelLoader) `
@@ -16,7 +17,7 @@ const ButtonPrimary = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React.createElement(StyledPixelLoader, null)));
+        loading && React.createElement(StyledPixelLoader, { color: theme.color.white })));
 };
 
 export default ButtonPrimary;

package/build/es/components/Buttons/ButtonRoundStyles.js

@@ -1,11 +1,12 @@
 import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
 
 const ButtonRoundStyles = styled__default.button `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background-color: ${props => props.theme.color.hotPink};
-    color: ${props => props.theme.color.white};
+    background-color: ${theme.color.hotPink};
+    color: ${theme.color.white};
     outline: none;
     cursor: pointer;
     text-align: center;
@@ -13,15 +14,15 @@ const ButtonRoundStyles = styled__default.button `
     border-radius: 50%;
     width: 2rem;
     height: 2rem;
-    border-color: ${props => props.theme.color.hotPink};
+    border-color: ${theme.color.hotPink};
     border-style: solid;
     &:focus {
         outline: none;
-        color: ${props => props.theme.color.white};
+        color: ${theme.color.white};
     }
     &:hover,
     &:active {
-        color: ${props => props.theme.color.white};
+        color: ${theme.color.white};
     }
 `;
 

package/build/es/components/Buttons/ButtonSecondary.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import ButtonProps from './ButtonBasicProps';
+import type ButtonProps from './ButtonBasicProps';
 /** @visibleName Button secondary */
 declare const ButtonSecondary: (props: ButtonProps) => JSX.Element;
 /** @component */

package/build/es/components/Buttons/ButtonSecondary.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import PixelLoader from '../PixelLoader/PixelLoader.js';
 import ButtonSecondaryStyles from './ButtonSecondaryStyles.js';
 
 const noop = () => { }; // tslint:disable-line