@dnanpm/styleguide 2.3.0 → 3.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "2.3.0",
+    "version": "3.1.0",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -17,16 +17,14 @@
     ],
     "repository": {
         "type": "git",
-        "url": "https://github.com/DNA-Online-Services/b2cwebshop-styleguide.git"
+        "url": "git+https://github.com/DNA-Online-Services/kauppa.git"
     },
     "scripts": {
         "eslint": "cross-env eslint --fix './**/*.{ts,tsx}'",
         "eslint:check": "cross-env eslint './**/*.{ts,tsx}'",
-        "eject": "react-scripts eject",
         "styleguide": "styleguidist server",
         "styleguide:build": "styleguidist build",
-        "build": "rimraf build && rollup -c",
-        "dev": "rollup -c -w",
+        "build": "rm -rf build && rollup -c",
         "clean": "rm -rf node_modules build building .rpt2_cache dnanpm-styleguide*.tgz",
         "lock": "echo 'check if tarlock is too old,remove it,create own file with pid,ln it to tarlock,if it fails,loop until it doesnt'",
         "unlock": "echo 'check if its ours ,remove it and ours.'",
@@ -44,17 +42,23 @@
         "not op_mini all"
     ],
     "devDependencies": {
+        "@babel/core": "^7.22.11",
+        "@babel/preset-env": "^7.22.10",
+        "@babel/preset-react": "^7.22.5",
+        "@babel/preset-typescript": "^7.22.11",
+        "@rollup/plugin-commonjs": "^25.0.4",
+        "@rollup/plugin-node-resolve": "^15.2.1",
         "@types/node": "^14.14.22",
         "@types/ramda": "^0.27.36",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
-        "@types/react-modal": "^3.10.6",
-        "@types/react-sizes": "^2.0.0",
-        "@types/react-tooltip": "^3.11.0",
+        "@types/react-modal": "^3.13.1",
         "@types/styled-components": "^5.1.7",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
         "@typescript-eslint/parser": "^5.31.0",
+        "babel-loader": "^9.1.3",
         "cross-env": "^7.0.3",
+        "css-loader": "^6.8.1",
         "eslint": "^8.20.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
@@ -65,32 +69,29 @@
         "eslint-plugin-prefer-arrow": "^1.2.3",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "mini-css-extract-plugin": "^2.7.6",
         "prettier": "^2.7.1",
         "react": "^17.0.1",
-        "react-docgen-typescript": "^1.20.5",
+        "react-docgen": "^5.4.3",
+        "react-docgen-typescript": "^2.2.2",
         "react-dom": "^17.0.1",
-        "react-scripts": "^3.4.4",
-        "react-styleguidist": "^11.1.5",
-        "rimraf": "^3.0.2",
-        "rollup": "^2.38.0",
-        "rollup-plugin-commonjs": "^10.1.0",
-        "rollup-plugin-css-porter": "^1.0.2",
-        "rollup-plugin-node-resolve": "^5.2.0",
-        "rollup-plugin-typescript2": "^0.29.0",
-        "rollup-plugin-visualizer": "^4.2.0",
-        "styled-components": "^5.2.1",
+        "react-styleguidist": "^12.0.1",
+        "rollup": "^2.79.1",
+        "rollup-plugin-import-css": "^3.3.1",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "style-loader": "^3.3.3",
+        "styled-components": "^5.3.11",
         "tslib": "^2.1.0",
-        "typescript": "^4.1.3"
+        "typescript": "^4.1.3",
+        "webpack": "^5.88.2"
     },
     "dependencies": {
         "lazysizes": "^5.3.0",
         "ramda": "^0.27.1",
-        "react-modal": "^3.12.1",
-        "react-progressive-image": "^0.6.0",
+        "react-modal": "^3.16.1",
         "react-select": "^5.7.0",
-        "react-sizes": "^2.0.0",
         "react-spring": "^8.0.27",
-        "react-tooltip": "4.1.0"
+        "react-tooltip": "^5.21.5"
     },
     "peerDependencies": {
         "react": "17.x",

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

@@ -1,83 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var styled = require('styled-components');
-var useElementDimensions = require('../../hooks/useElementDimensions.js');
-var theme = require('../../themes/theme.js');
-var styledUtils = require('../../utils/styledUtils.js');
-var Icon = require('../Icon/Icon.js');
-var hlChevronDown = require('../Icons/hlChevronDown.js');
-var hlChevronUp = require('../Icons/hlChevronUp.js');
-var hlX = require('../Icons/hlX.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: 0 ${styledUtils.getDividedSize(theme['default'].base.baseHeight, 2.5)};
-    border-bottom: 1px solid
-        ${p => (p.isExpanded && p.highlightSelected ? theme['default'].color.hotPink : theme['default'].color.gray15)};
-`;
-const AccordionItemTitle = styled__default['default'].div `
-    font-size: ${theme['default'].fontSize.default};
-    font-weight: ${theme['default'].fontWeight.bold};
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    cursor: pointer;
-    padding: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)}
-        ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
-    color: ${p => (p.isExpanded && p.highlightSelected ? theme['default'].color.hotPink : theme['default'].color.text)};
-    transition: color 0.2s;
-    ${p => p.highlightSelected &&
-    styled.css `
-            &:hover,
-            &:active {
-                color: ${theme['default'].color.hotPink};
-                text-decoration: none;
-            }
-        `}
-`;
-const AccordionItemContentWrapper = styled__default['default'].div `
-    overflow: hidden;
-    color: ${theme['default'].color.slateGray};
-    transition: all 0.2s ease;
-    height: ${p => (p.isExpanded ? p.maxHeight / 16 + 1.25 : 0)}rem;
-    padding: 0 ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
-    visibility: ${p => (p.isExpanded ? 'visible' : 'hidden')};
-`;
-const AccordionItemContent = styled__default['default'].div `
-    padding-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)};
-`;
-const AccordionItemCloseButton = styled__default['default'].div `
-    display: flex;
-    justify-content: flex-end;
-    line-height: ${theme['default'].lineHeight.default};
-    margin-bottom: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1.6)};
-    padding: 0 ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 2)};
-    gap: ${styledUtils.getMultipliedSize(theme['default'].base.baseHeight, 1)};
-    color: ${theme['default'].color.text};
-    cursor: pointer;
-`;
-/** @visibleName Accordion Item */
-const AccordionItem = (_a) => {
-    var { hasCloseButton = false, highlightSelected = true } = _a, props = tslib.__rest(_a, ["hasCloseButton", "highlightSelected"]);
-    // 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,
-            props.isExpanded ? (React__default['default'].createElement(Icon['default'], { icon: hlChevronUp['default'], position: "right", "aria-label": props.closeLabel })) : (React__default['default'].createElement(Icon['default'], { icon: hlChevronDown['default'], position: "right", "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'], { icon: hlX['default'] })))));
-};
-
-exports.default = AccordionItem;

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

@@ -1,109 +0,0 @@
-import type theme from '../../themes/theme';
-export interface ButtonProps {
-    fullWidth?: boolean;
-    small?: boolean;
-    loading?: boolean | string;
-    darkBg?: boolean;
-    theme?: typeof theme;
-}
-declare const ButtonBasicStyle: import("styled-components").StyledComponent<"button", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        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;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        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>;
-export default ButtonBasicStyle;

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

@@ -1,71 +0,0 @@
-'use strict';
-
-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 => `${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.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.default};
-    font-weight: ${props => props.theme.fontWeight.bold};
-    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 => 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%;
-    pointer-events: ${props => (props && props.loading ? 'none' : 'auto')};
-
-    &:focus {
-        outline: none;
-        color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span:not(span.dnasg-icon) {
-            border-bottom: ${props => `${props.theme.button.border} solid`};
-        }
-    }
-    &:hover {
-        background: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        color: ${props => props && props.darkBg ? props.theme.color.black : props.theme.color.white};
-        text-decoration: none;
-        span:not(span.dnasg-icon) {
-            border-bottom: 0;
-        }
-    }
-    &:active {
-        opacity: 0.7;
-        background: transparent;
-        color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span:not(span.dnasg-icon) {
-            border-bottom: 0;
-        }
-    }
-
-    &[disabled],
-    &:disabled {
-        border-color: ${props => props && props.darkBg ? props.theme.color.gray70 : props.theme.color.gray10};
-        background: ${props => props && props.darkBg ? props.theme.color.gray70 : props.theme.color.gray10};
-        color: ${props => props && props.darkBg ? props.theme.color.gray55 : props.theme.color.gray25};
-        pointer-events: none;
-    }
-
-    span:not(span.dnasg-icon) {
-        border-bottom: 0;
-        font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
-    }
-`;
-
-exports.default = ButtonBasicStyle;

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

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

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

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var styled = require('../../themes/styled.js');
-var PixelLoader = require('../PixelLoader/PixelLoader.js');
-var ButtonBasicStyles = require('./ButtonBasicStyles.js');
-var theme = require('../../themes/theme.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['default']) `
-    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;
-    return (React__default['default'].createElement(ButtonBasicStyles['default'], { fullWidth: fullWidth, small: small, 
-        // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
-        // If you want to write it to the DOM, pass a string instead: loading="true"
-        // 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(StyledPixelLoader, { color: darkBg ? theme['default'].color.white : theme['default'].color.black }))));
-};
-
-exports.Button = Button;
-exports.default = Button;

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

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

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

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var Icon = require('../Icon/Icon.js');
-var ButtonIconStyles = require('./ButtonIconStyles.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
-/** @visibleName Icon Button */
-const ButtonIcon = (props) => {
-    const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const renderIcon = () => {
-        if (typeof icon === 'string') {
-            return (React__default['default'].createElement(Icon['default'], { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-        }
-        return (React__default['default'].createElement(Icon['default'], { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-    };
-    return (React__default['default'].createElement(ButtonIconStyles['default'], { fullWidth: fullWidth, small: small, 
-        // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
-        // If you want to write it to the DOM, pass a string instead: loading="true"
-        // https://github.com/styled-components/styled-components/pull/2093
-        darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React__default['default'].createElement(React__default['default'].Fragment, null,
-        renderIcon(),
-        React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
-};
-
-exports.default = ButtonIcon;

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

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

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

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var Icon = require('../Icon/Icon.js');
-var ButtonIconPrimaryStyles = require('./ButtonIconPrimaryStyles.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
-/** @visibleName  Icon Button Primary */
-const ButtonIconPrimary = (props) => {
-    const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
-    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const renderIcon = () => {
-        if (typeof icon === 'string') {
-            return (React__default['default'].createElement(Icon['default'], { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-        }
-        return (React__default['default'].createElement(Icon['default'], { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
-    };
-    return (React__default['default'].createElement(ButtonIconPrimaryStyles['default'], { fullWidth: fullWidth, small: small, 
-        // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
-        // If you want to write it to the DOM, pass a string instead: loading="true"
-        // https://github.com/styled-components/styled-components/pull/2093
-        darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React__default['default'].createElement(React__default['default'].Fragment, null,
-        renderIcon(),
-        React__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
-};
-
-exports.default = ButtonIconPrimary;

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

@@ -1,103 +0,0 @@
-declare const ButtonIconPrimaryStyles: import("styled-components").StyledComponent<"button", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    button: {
-        border: string;
-    };
-    color: {
-        black: string;
-        white: string;
-        text: string;
-        hotPink: string;
-        waterBlue: string;
-        melonYellow: string;
-        slateGray: string;
-        grayWhite: string;
-        hotPinkHover: string;
-        waterBlueHover: string;
-        pink1: string;
-        pink2: string;
-        pinkday: string;
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-        grayBg: string;
-        gray80: string;
-        gray70: string;
-        gray55: string;
-        gray40: string;
-        gray25: string;
-        gray15: string;
-        gray10: string;
-        gray5: string;
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        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;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        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 & {
-    showTextMobile: boolean;
-}, never>;
-export default ButtonIconPrimaryStyles;

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

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('../../themes/styled.js');
-var ButtonIconStyles = require('./ButtonIconStyles.js');
-
-const ButtonIconPrimaryStyles = styled['default'](ButtonIconStyles['default']) `
-    color: ${p => p.theme.color.hotPink};
-    &[disabled],
-    &:disabled {
-        color: ${p => p.theme.color.hotPink};
-    }
-    &:focus,
-    &:hover,
-    &:active {
-        color: ${p => p.theme.color.hotPinkHover};
-    }
-`;
-
-exports.default = ButtonIconPrimaryStyles;