@dnanpm/styleguide 1.8.0 → 2.0.0

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

@@ -0,0 +1,50 @@
+import React from 'react';
+export interface Props {
+    /**
+     * Content of Accordion
+     *
+     * @type AccordionItem
+     */
+    children: React.ReactNode;
+    /**
+     * Allows only one AccordionItem to be opened when set to true
+     *
+     * @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;
+/** @component */
+export default Accordion;

package/build/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var AccordionItem = require('./AccordionItem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** @visibleName Accordion */
+const Accordion = ({ autoCollapsible = false, highlightSelected = true, hasCloseButton = false, ...props }) => {
+    const initialItemList = {};
+    const getAccordionItemId = (index, title) => `${title.replace(/\s+/g, '')}-${index}`;
+    if (props.isExpanded) {
+        React__default['default'].Children.map(props.children, (child, index) => {
+            if (React__default['default'].isValidElement(child) && child.type === AccordionItem['default']) {
+                initialItemList[getAccordionItemId(index, child.props.title)] = Boolean(props.isExpanded);
+            }
+        });
+    }
+    const [itemList, setItemList] = React.useState(initialItemList);
+    const toggleExpanded = (currentItemId) => {
+        const currentItemState = itemList[currentItemId];
+        setItemList({
+            ...(autoCollapsible ? {} : itemList),
+            [currentItemId]: !currentItemState,
+        });
+    };
+    const handleClick = (e) => {
+        toggleExpanded(e.currentTarget.parentElement.id);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleExpanded(e.currentTarget.parentElement.id);
+        }
+    };
+    const accordionItems = React__default['default'].Children.map(props.children, (child, index) => {
+        if (React__default['default'].isValidElement(child) && child.type === AccordionItem['default']) {
+            const id = getAccordionItemId(index, child.props.title);
+            return (React__default['default'].createElement(AccordionItem['default'], 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));
+        }
+    });
+    if (!accordionItems) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    return React__default['default'].createElement("div", { className: props.className }, accordionItems);
+};
+
+exports.default = Accordion;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Props as AccordionProps } from './Accordion';
+interface Props extends Omit<AccordionProps, 'children' | 'autoCollapsible'> {
+    /**
+     * Accordion item title
+     */
+    title: string;
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Accordion Item
+     */
+    children?: React.ReactNode;
+    /**
+     * On component title and close button mouse click callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * On component title and close button keyboard key down callback
+     * Use `e.currentTarget.parentElement` to get AccordionItem element
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+}
+/** @visibleName Accordion Item */
+declare const AccordionItem: ({ hasCloseButton, highlightSelected, ...props }: Props) => JSX.Element;
+/** @component */
+export default AccordionItem;

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

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styled = require('styled-components');
+var useElementDimensions = require('../../hooks/useElementDimensions.js');
+var styledUtils = require('../../utils/styledUtils.js');
+var Icon = require('../Icon/Icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const AccordionItemContainer = styled__default['default'].div `
+    margin: ${p => `0 ${styledUtils.getDividedSize(p.theme.base.baseHeight, 2.5)}}`};
+    border-bottom: 1px solid
+        ${p => (p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.gray15)};
+`;
+const AccordionItemTitle = styled__default['default'].div `
+    font-size: ${p => p.theme.fontSize.default};
+    font-weight: ${p => p.theme.fontWeight.bold};
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    cursor: pointer;
+    padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)}
+        ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
+    color: ${p => p.isExpanded && p.highlightSelected ? p.theme.color.hotPink : p.theme.color.text};
+    transition: color 0.2s;
+    ${p => p.highlightSelected &&
+    styled.css `
+            &:hover,
+            &:active {
+                color: ${p.theme.color.hotPink};
+                text-decoration: none;
+            }
+        `}
+`;
+const AccordionItemContentWrapper = styled__default['default'].div `
+    overflow: hidden;
+    color: ${p => p.theme.color.slateGray};
+    transition: all 0.2s ease;
+    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
+    padding: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
+    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
+`;
+const AccordionItemContent = styled__default['default'].div `
+    padding-bottom: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)};
+`;
+const AccordionItemCloseButton = styled__default['default'].div `
+    display: flex;
+    justify-content: flex-end;
+    line-height: ${p => p.theme.lineHeight.default};
+    margin-bottom: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1.6)};
+    padding: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)};
+    gap: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
+    color: ${p => p.theme.color.text};
+    cursor: pointer;
+`;
+/** @visibleName Accordion Item */
+const AccordionItem = ({ hasCloseButton = false, highlightSelected = true, ...props }) => {
+    // Get height when element dimensions change
+    const { height: contentHeight, ref: contentRef } = useElementDimensions['default']();
+    return (React__default['default'].createElement(AccordionItemContainer, { id: props.id, "aria-expanded": Boolean(props.isExpanded), className: props.className, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected },
+        React__default['default'].createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+            props.title,
+            Boolean(props.isExpanded) ? (React__default['default'].createElement(Icon['default'], { name: "hlChevronUp", size: "1.5rem", right: true, "aria-label": props.closeLabel })) : (React__default['default'].createElement(Icon['default'], { name: "hlChevronDown", size: "1.5rem", right: true, "aria-label": props.openLabel }))),
+        React__default['default'].createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
+            React__default['default'].createElement(AccordionItemContent, { ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default['default'].createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+            React__default['default'].createElement("span", null, props.closeLabel),
+            React__default['default'].createElement(Icon['default'], { name: "hlX", size: "1.5rem" })))));
+};
+
+exports.default = AccordionItem;

package/build/cjs/components/AmountSelector/AmountSelector.js

@@ -6,11 +6,10 @@ var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
-require('../Buttons/ButtonBasicStyles.js');
-require('../PixelLoader/PixelLoaderStyles.js');
-require('../Buttons/ButtonPrimaryStyles.js');
+require('../Buttons/ButtonDefault.js');
+require('../Buttons/ButtonPrimary.js');
 var ButtonSecondary = require('../Buttons/ButtonSecondary.js');
-require('../Buttons/ButtonTertiaryStyles.js');
+require('../Buttons/ButtonTertiary.js');
 require('../Buttons/ButtonRoundStyles.js');
 require('../Buttons/CloseButton.js');
 require('../Buttons/ButtonIconStyles.js');
@@ -28,10 +27,14 @@ const Container = styled['default'].div `
     input {
         width: ${styledUtils.getMultipliedSize(theme['default'].base.baseWidth, 4)};
         border: 0 none;
-        text-align: right;
+        text-align: center;
         outline: none;
         -webkit-appearance: none;
         -moz-appearance: textfield;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            display: none;
+        }
     }
 `;
 const StyledButtonSecondary = styled['default'](ButtonSecondary['default']) `
@@ -69,10 +72,11 @@ const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled
         }
     };
     return (React__default['default'].createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
-        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease },
+        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, "data-testid": dataTestId &&
+                `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
             React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
         React__default['default'].createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase },
+        React__default['default'].createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined },
             React__default['default'].createElement(Icon['default'], { color: theme['default'].color.black, name: "hlPlus" }))));
 };
 

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

@@ -18,12 +18,7 @@ declare const ButtonBasicStyle: import("styled-components").StyledComponent<"but
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -54,22 +49,27 @@ declare const ButtonBasicStyle: import("styled-components").StyledComponent<"but
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -85,16 +85,23 @@ declare const ButtonBasicStyle: import("styled-components").StyledComponent<"but
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, ButtonProps, never>;

package/build/cjs/components/Buttons/ButtonBasicStyles.js

@@ -3,30 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('../../themes/styled.js');
+var styledUtils = require('../../utils/styledUtils.js');
 
 const ButtonBasicStyle = styled['default'].button `
     position: relative;
-    padding: ${props => props && props.small
-    ? props.theme.button.smallButtonPadding
-    : props.theme.button.buttonPadding};
+    padding: ${props => `${styledUtils.getMultipliedSize(props.theme.base.baseWidth, 0.8)}
+        ${styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)}`};
     text-decoration: none;
     display: inline-block;
     border-style: solid;
-    border-width: ${props => props.theme.button.buttonBorderWidth};
+    border-width: ${props => props.theme.button.border};
     border-color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
     box-sizing: border-box;
     background-color: transparent;
     color: ${props => (props && props.darkBg ? props.theme.color.white : props.theme.color.black)};
-    font-family: ${props => props.theme.fontFamily.baseFontFamily};
+    font-family: ${props => props.theme.fontFamily.default};
     font-weight: ${props => props.theme.fontWeight.bold};
-    line-height: ${props => props.theme.button.buttonLineHeight};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
+    line-height: ${props => props && props.small ? props.theme.lineHeight.s : props.theme.lineHeight.default};
     outline: none;
     text-align: center;
     vertical-align: middle;
-    min-width: ${props => props && props.small
-    ? props.theme.button.buttonSmallWidth
-    : props.theme.button.buttonWidth};
+    min-width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, props && props.small ? 10.5 : 12.5)};
     width: ${props => (props && props.fullWidth ? '100%' : 'auto')};
     cursor: pointer;
     max-width: 100%;
@@ -36,7 +34,7 @@ const ButtonBasicStyle = styled['default'].button `
         outline: none;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
         span {
-            border-bottom: ${props => `${props.theme.button.buttonBorderWidth} solid`};
+            border-bottom: ${props => `${props.theme.button.border} solid`};
         }
     }
     &:hover {
@@ -66,9 +64,7 @@ const ButtonBasicStyle = styled['default'].button `
 
     span {
         border-bottom: 0;
-        font-size: ${props => props && props.small
-    ? props.theme.fontSize.smallFontSize
-    : props.theme.fontSize.defaultFontSize};
+        font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
     }
 `;
 

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

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonBasicStyles = require('./ButtonBasicStyles.js');
+var styled = require('../../themes/styled.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonBasicStyles = require('./ButtonBasicStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Buttons */
 const Button = (props) => {
     const { children, className, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -20,7 +24,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__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, null)));
+        loading && React__default['default'].createElement(StyledPixelLoader, null)));
 };
 
 exports.Button = Button;

package/build/cjs/components/Buttons/ButtonIconPrimaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonIconPrimaryStyles: import("styled-components").StyledCompone
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonIconPrimaryStyles: import("styled-components").StyledCompone
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonIconPrimaryStyles: import("styled-components").StyledCompone
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps & {

package/build/cjs/components/Buttons/ButtonIconStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonIconStyles: import("styled-components").StyledComponent<"but
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonIconStyles: import("styled-components").StyledComponent<"but
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonIconStyles: import("styled-components").StyledComponent<"but
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps & {

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

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonPrimaryStyles = require('./ButtonPrimaryStyles.js');
+var styled = require('../../themes/styled.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonPrimaryStyles = require('./ButtonPrimaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Button primary */
 const ButtonPrimary = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -20,7 +24,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__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, null)));
+        loading && React__default['default'].createElement(StyledPixelLoader, null)));
 };
 
 exports.default = ButtonPrimary;