@dnanpm/styleguide 3.0.0 → 3.1.0

package/build/es/components/Tooltip/Tooltip.js

@@ -1,53 +1,67 @@
-import ReactTooltip from 'react-tooltip';
+import { __rest } from 'tslib';
+import React__default from 'react';
+import { Tooltip as Tooltip$1 } from 'react-tooltip';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import { getElevationShadow } from '../../utils/common.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
+import Icon from '../Icon/Icon.js';
+import hlInfo from '../Icons/hlInfo.js';
 
-const arrowSmall = '4px';
-const arrowLarge = '6px';
-const Tooltip = styled(ReactTooltip).attrs({ suppressClassNameWarning: true }) `
-    && {
-        width: ${p => (p.width ? p.width : 'auto')};
-        background-color: ${p => p.theme.color.background.white.default};
-        border: 1px solid ${p => p.theme.color.line.L01};
-        padding: ${p => p.multiline
-    ? getMultipliedSize(p.theme.base.baseHeight, 1.5)
-    : getMultipliedSize(p.theme.base.baseHeight, 0.5)}
-            ${p => getMultipliedSize(p.theme.base.baseWidth, 1.5)};
-        color: ${p => p.theme.color.text.black};
-        border-radius: 0;
-        text-align: left;
-        &&:after {
-            border-width: ${p => (p.multiline ? arrowLarge : arrowSmall)};
-            border-style: solid;
-            border-color: transparent transparent ${p => p.theme.color.background.white.default}
-                ${p => p.theme.color.background.white.default};
-            box-shadow: -1px 1px 1px 0 rgba(125, 125, 125, 0.5);
-        }
-        &.place-top:after {
-            transform: rotate(-45deg);
-            margin-left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            bottom: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-bottom:after {
-            transform: rotate(135deg);
-            margin-left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-left:after {
-            transform: rotate(-136deg);
-            margin-top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            right: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.place-right:after {
-            transform: rotate(45deg);
-            margin-top: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-            left: -${p => (p.multiline ? arrowLarge : arrowSmall)};
-        }
-        &.show {
-            opacity: 1;
-            display: block;
+const Helper = styled.div `
+    display: inline;
+    vertical-align: middle;
+    ${({ isClickable }) => isClickable && `cursor: pointer`};
+`;
+const getArrowOverrides = () => {
+    const arrowConfig = {
+        top: ['bottom', '45deg'],
+        right: ['left', '135deg'],
+        bottom: ['top', '225deg'],
+        left: ['right', '315deg'],
+    };
+    return Object.entries(arrowConfig)
+        .map(([placement, value]) => `
+        &.react-tooltip__place-${placement} {
+            & .react-tooltip-arrow {
+                ${value[0]}: -${getMultipliedSize(theme.base.baseWidth, 0.6)} !important;
+                transform: rotate(${value[1]});
+            }
         }
+    `)
+        .join('');
+};
+const StyledReactTooltip = styled(Tooltip$1) `
+    --rt-opacity: 1;
+
+    border: 1px solid ${theme.color.line.L02};
+    padding: ${getMultipliedSize(theme.base.baseWidth, 1.5)};
+    text-align: center;
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    width: max-content;
+    max-width: ${getMultipliedSize(theme.base.baseWidth, 25)};
+    color: ${theme.color.text.black};
+    background-color: ${theme.color.background.white.default};
+    border-radius: ${theme.radius.s};
+
+    ${getElevationShadow({ elevation: 'low' })}
+
+    & .react-tooltip-arrow {
+        width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+        height: ${getMultipliedSize(theme.base.baseHeight, 1.2)};
+        border-bottom: 1px solid ${theme.color.line.L02};
+        border-right: 1px solid ${theme.color.line.L02};
     }
-`;
+
+    ${getArrowOverrides()}
+`;
+const Tooltip = (_a) => {
+    var { 'data-testid': dataTestId, closeWithEsc = true } = _a, props = __rest(_a, ['data-testid', "closeWithEsc"]);
+    return (React__default.createElement(React__default.Fragment, null,
+        !props.hideTriggerElement && (React__default.createElement(Helper, { "data-tooltip-id": props.id, isClickable: props.isClickable, className: props.className, "data-testid": dataTestId },
+            React__default.createElement(Icon, { icon: hlInfo, size: "1rem", position: props.position }))),
+        React__default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, closeOnEsc: closeWithEsc, openOnClick: props.isClickable, clickable: props.isHoverable, isMultiline: props.isMultiline, disableStyleInjection: true, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
+};
 
 export { Tooltip as default };

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

@@ -37,5 +37,5 @@ export interface TooltipMenuProps {
     arrowPosition?: string;
 }
 /** @visibleName Tooltip Menu */
-declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => JSX.Element;
+declare const TooltipMenu: ({ selector, className, color, children, iconSize, zIndex, tooltipTop, tooltipRight, activeColor, tooltipIconName, tooltipIcon, tooltipIconSize, tooltipChevron, arrowPosition, }: TooltipMenuProps) => React.JSX.Element;
 export default TooltipMenu;

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

@@ -3,16 +3,20 @@ export { default as AccordionItem } from './AccordionItem/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export { default as Box } from './Box/Box';
 export { default as Button } from './Button/Button';
+export { default as ButtonArrow } from './Button/ButtonArrow';
 export { default as ButtonClose } from './Button/ButtonClose';
 export { default as ButtonIcon } from './Button/ButtonIcon';
 export { default as ButtonPrimary } from './Button/ButtonPrimary';
 export { default as ButtonRound } from './Button/ButtonRound';
 export { default as ButtonSecondary } from './Button/ButtonSecondary';
 export { default as Checkbox } from './Checkbox/Checkbox';
+export { default as Chip } from './Chip/Chip';
+export { default as Divider } from './Divider/Divider';
 export { default as DnaLogo } from './DnaLogo/DnaLogo';
+export { default as Drawer } from './Drawer/Drawer';
 export { default as EmptyState } from './EmptyState/EmptyState';
+export { default as Floater } from './Floater/Floater';
 export { default as Footer } from './Footer/Footer';
-export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
 export * from './Icons';
 export { default as Input } from './Input/Input';

package/build/es/index.js

@@ -3,16 +3,20 @@ export { default as AccordionItem } from './components/AccordionItem/AccordionIt
 export { default as AmountSelector } from './components/AmountSelector/AmountSelector.js';
 export { default as Box } from './components/Box/Box.js';
 export { default as Button } from './components/Button/Button.js';
+export { default as ButtonArrow } from './components/Button/ButtonArrow.js';
 export { default as ButtonClose } from './components/Button/ButtonClose.js';
 export { default as ButtonIcon } from './components/Button/ButtonIcon.js';
 export { default as ButtonPrimary } from './components/Button/ButtonPrimary.js';
 export { default as ButtonRound } from './components/Button/ButtonRound.js';
 export { default as ButtonSecondary } from './components/Button/ButtonSecondary.js';
 export { default as Checkbox } from './components/Checkbox/Checkbox.js';
+export { default as Chip } from './components/Chip/Chip.js';
+export { default as Divider } from './components/Divider/Divider.js';
 export { default as DnaLogo } from './components/DnaLogo/DnaLogo.js';
+export { default as Drawer } from './components/Drawer/Drawer.js';
 export { default as EmptyState } from './components/EmptyState/EmptyState.js';
+export { default as Floater } from './components/Floater/Floater.js';
 export { default as Footer } from './components/Footer/Footer.js';
-export { default as Helper } from './components/Helper/Helper.js';
 export { default as Icon } from './components/Icon/Icon.js';
 export { default as hlArrowBackSmall } from './components/Icons/Small/hlArrowBackSmall.js';
 export { default as hlArrowForwardSmall } from './components/Icons/Small/hlArrowForwardSmall.js';
@@ -37,6 +41,7 @@ export { default as hl4gSim } from './components/Icons/hl4gSim.js';
 export { default as hl5gSim } from './components/Icons/hl5gSim.js';
 export { default as hlBattery } from './components/Icons/hlBattery.js';
 export { default as hlBell } from './components/Icons/hlBell.js';
+export { default as hlCableTVCard } from './components/Icons/hlCableTVCard.js';
 export { default as hlCalendar } from './components/Icons/hlCalendar.js';
 export { default as hlCall } from './components/Icons/hlCall.js';
 export { default as hlCameraBack } from './components/Icons/hlCameraBack.js';
@@ -74,10 +79,13 @@ export { default as hlHeadphones } from './components/Icons/hlHeadphones.js';
 export { default as hlHeadset } from './components/Icons/hlHeadset.js';
 export { default as hlHeart } from './components/Icons/hlHeart.js';
 export { default as hlHome } from './components/Icons/hlHome.js';
+export { default as hlHub } from './components/Icons/hlHub.js';
 export { default as hlImage } from './components/Icons/hlImage.js';
 export { default as hlInfo } from './components/Icons/hlInfo.js';
 export { default as hlInstallment } from './components/Icons/hlInstallment.js';
 export { default as hlIotSim } from './components/Icons/hlIotSim.js';
+export { default as hlLaptop } from './components/Icons/hlLaptop.js';
+export { default as hlLiveVideo } from './components/Icons/hlLiveVideo.js';
 export { default as hlLock } from './components/Icons/hlLock.js';
 export { default as hlMagnifyingGlass } from './components/Icons/hlMagnifyingGlass.js';
 export { default as hlMarker } from './components/Icons/hlMarker.js';
@@ -96,6 +104,7 @@ export { default as hlPaytime } from './components/Icons/hlPaytime.js';
 export { default as hlPen } from './components/Icons/hlPen.js';
 export { default as hlPerson } from './components/Icons/hlPerson.js';
 export { default as hlPhone } from './components/Icons/hlPhone.js';
+export { default as hlPlaylist } from './components/Icons/hlPlaylist.js';
 export { default as hlPlus } from './components/Icons/hlPlus.js';
 export { default as hlPrepaid } from './components/Icons/hlPrepaid.js';
 export { default as hlProcessor } from './components/Icons/hlProcessor.js';

package/build/es/themes/gridTheme.js

@@ -1,5 +1,5 @@
 const gridTheme = {
-    gutter: '0.9375rem',
+    gutter: '0.9375rem', // 15px
 };
 
 export { gridTheme as default };

package/build/es/themes/theme.d.ts

@@ -161,5 +161,5 @@ declare const theme: {
         pill: string;
     };
 };
-export declare type ThemeInterface = typeof theme;
+export type ThemeInterface = typeof theme;
 export default theme;

package/build/es/themes/themeComponents/base.js

@@ -6,7 +6,7 @@ const base = {
     baseWidth: {
         value: 0.625,
         unit: 'rem',
-    },
+    }, // 10px
 };
 
 export { base as default };

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

@@ -12,7 +12,7 @@ const fontSize = {
     h2S: '1.625rem',
     h3: '1.5rem',
     h4: '1.25rem',
-    h5: '1rem',
+    h5: '1rem', // 16px
 };
 var fontSize$1 = Object.assign({ h1: fontSize.h1L, h2: fontSize.h2M }, fontSize);
 

package/build/es/themes/themeComponents/forms.js

@@ -1,6 +1,6 @@
 const forms = {
     smallSelectWidth: '12rem',
-    smallSelectHeight: '2.5rem',
+    smallSelectHeight: '2.5rem', // 40px
 };
 
 export { forms as default };

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

@@ -13,7 +13,7 @@ const lineHeight = {
     h2S: '2rem',
     h3: '1.875rem',
     h4: '1.5rem',
-    h5: '1rem',
+    h5: '1rem', // 16px
 };
 var lineHeight$1 = Object.assign({ h1: lineHeight.h1L, h2: lineHeight.h2M }, lineHeight);
 

package/build/es/utils/common.d.ts

@@ -0,0 +1,5 @@
+import type { ElevationLevel } from '../types/elevation.d';
+export declare const getElevationShadow: ({ elevation, shadow, }: {
+    elevation: ElevationLevel;
+    shadow?: string | undefined;
+}) => string;

package/build/es/utils/common.js

@@ -0,0 +1,24 @@
+import theme from '../themes/theme.js';
+
+const getElevationShadow = ({ elevation, shadow, }) => {
+    const shadowConfig = {
+        none: [0, 0, 0],
+        low: [0, 2, 16, `${theme.color.default.black}0f`],
+        high: [0, 6, 24, `${theme.color.default.black}14`],
+        extraHigh: [0, 8, 64, `${theme.color.default.black}29`],
+    };
+    const sidesMap = shadow === null || shadow === void 0 ? void 0 : shadow.split(' ').map(Number);
+    const clipSize = sidesMap &&
+        shadowConfig[elevation]
+            .filter((arg) => typeof arg === 'number')
+            .reduce((sum, v) => sum + v);
+    const boxShadow = `box-shadow: ${shadowConfig[elevation].join('px ')};`;
+    const clipPath = sidesMap && clipSize
+        ? `clip-path: inset(${sidesMap
+            .map(val => (val ? `-${clipSize}px` : '0px'))
+            .join(' ')});`
+        : '';
+    return `${boxShadow}${clipPath}`;
+};
+
+export { getElevationShadow };

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

@@ -5,7 +5,7 @@ declare function createStyled<T extends ThemeInterface>(): {
     css: styledComponents.ThemedCssFunction<T>;
     createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<styledComponents.ThemedStyledProps<P, T>>, ...interpolations: styledComponents.Interpolation<styledComponents.ThemedStyledProps<P, T>>[]) => styledComponents.GlobalStyleComponent<P, T>;
     keyframes: (strings: TemplateStringsArray | styledComponents.CSSKeyframes, ...interpolations: styledComponents.SimpleInterpolation[]) => styledComponents.Keyframes;
-    ThemeProvider: styledComponents.BaseThemeProviderComponent<keyof T extends never ? any : T, keyof T extends never ? any : T>;
+    ThemeProvider: styledComponents.BaseThemeProviderComponent<T, T>;
     ServerStyleSheet: typeof styledComponents.ServerStyleSheet;
 };
 export default createStyled;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "3.0.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": "DISABLE_ESLINT_PLUGIN=true styleguidist server",
-        "styleguide:build": "FAST_REFRESH=false DISABLE_ESLINT_PLUGIN=true styleguidist build",
-        "build": "rimraf build && rollup -c",
-        "dev": "rollup -c -w",
+        "styleguide": "styleguidist server",
+        "styleguide:build": "styleguidist build",
+        "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,16 +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.13.1",
-        "@types/react-tooltip": "^3.11.0",
         "@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",
@@ -64,22 +69,21 @@
         "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": "^4.0.3",
-        "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.3.6",
+        "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",
@@ -87,7 +91,7 @@
         "react-modal": "^3.16.1",
         "react-select": "^5.7.0",
         "react-spring": "^8.0.27",
-        "react-tooltip": "4.1.0"
+        "react-tooltip": "^5.21.5"
     },
     "peerDependencies": {
         "react": "17.x",

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-export interface Props {
-    /**
-     * Allows the connection to `Tooltip` component
-     */
-    'data-tip'?: boolean;
-    /**
-     * Corresponds to the `Tooltip` component ID attribute
-     */
-    'data-for'?: string;
-    /**
-     * Indicates that this component is on left side of other content and adds an appropriate right margin
-     */
-    left?: boolean;
-    /**
-     * Indicates that this component is on right side of other contents and adds an appropriate left margin
-     */
-    right?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-declare const Helper: React.FunctionComponent<Props>;
-/** @component */
-export default Helper;

package/build/cjs/components/Helper/Helper.js

@@ -1,56 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var styled = require('../../themes/styled.js');
-var styledUtils = require('../../utils/styledUtils.js');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const Container = styled["default"].div `
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    align-items: center;
-    margin-right: ${p => (p && p.left ? styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1) : 0)};
-    margin-left: ${p => (p && p.right ? styledUtils.getMultipliedSize(p.theme.base.baseWidth, 1) : 0)};
-`;
-const HelperIcon = styled["default"].span `
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    vertical-align: middle;
-    text-align: center;
-    font-weight: ${p => p.theme.fontWeight.bold};
-    color: ${p => p.theme.color.text.white};
-    background-color: ${p => p.theme.color.default.black};
-    border-radius: 50%;
-    height: 1rem;
-    min-width: 1rem;
-    padding: 0 4px;
-    font-size: ${p => p.theme.fontSize.s};
-    line-height: ${p => p.theme.lineHeight.xs};
-`;
-const Helper = ({ left, right, className, 'data-tip': dataTip, 'data-for': dataFor, }) => (React__namespace.createElement(Container, { left: left, right: right, className: className, "data-tip": dataTip, "data-for": dataFor },
-    React__namespace.createElement(HelperIcon, null, "?")));
-
-exports["default"] = Helper;

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-export interface Props {
-    /**
-     * Allows the connection to `Tooltip` component
-     */
-    'data-tip'?: boolean;
-    /**
-     * Corresponds to the `Tooltip` component ID attribute
-     */
-    'data-for'?: string;
-    /**
-     * Indicates that this component is on left side of other content and adds an appropriate right margin
-     */
-    left?: boolean;
-    /**
-     * Indicates that this component is on right side of other contents and adds an appropriate left margin
-     */
-    right?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-}
-declare const Helper: React.FunctionComponent<Props>;
-/** @component */
-export default Helper;

package/build/es/components/Helper/Helper.js

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import styled from '../../themes/styled.js';
-import { getMultipliedSize } from '../../utils/styledUtils.js';
-
-const Container = styled.div `
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    align-items: center;
-    margin-right: ${p => (p && p.left ? getMultipliedSize(p.theme.base.baseWidth, 1) : 0)};
-    margin-left: ${p => (p && p.right ? getMultipliedSize(p.theme.base.baseWidth, 1) : 0)};
-`;
-const HelperIcon = styled.span `
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-    vertical-align: middle;
-    text-align: center;
-    font-weight: ${p => p.theme.fontWeight.bold};
-    color: ${p => p.theme.color.text.white};
-    background-color: ${p => p.theme.color.default.black};
-    border-radius: 50%;
-    height: 1rem;
-    min-width: 1rem;
-    padding: 0 4px;
-    font-size: ${p => p.theme.fontSize.s};
-    line-height: ${p => p.theme.lineHeight.xs};
-`;
-const Helper = ({ left, right, className, 'data-tip': dataTip, 'data-for': dataFor, }) => (React.createElement(Container, { left: left, right: right, className: className, "data-tip": dataTip, "data-for": dataFor },
-    React.createElement(HelperIcon, null, "?")));
-
-export { Helper as default };