@bbl-digital/snorre 4.2.74 → 4.2.75

package/lib/core/ImageViewer/styles.js

@@ -1,39 +1,90 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = void 0;
-var _react = require("@emotion/react");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { css } from '@emotion/react';
 const _controlBg = 'rgba(0, 0, 0, 0.5)';
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1ezukv3",
-  styles: "min-width:50vw;min-height:50vh;cursor:zoom-out"
-} : {
-  name: "z84szd-imageContainer",
-  styles: "min-width:50vw;min-height:50vh;cursor:zoom-out;label:imageContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+export const styles = {
+    overlay: css `
+    position: fixed;
+    -webkit-overflow-scrolling: touch;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1001;
+    padding: 1em;
+    background: rgba(0, 0, 0, 0.8);
+    overflow: auto;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `,
+    carousel: css `
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+
+    .slider-container {
+      height: 100%;
+      width: 100%;
+    }
+
+    .slider-frame {
+      height: 100% !important;
+    }
+
+    .slider-list {
+      height: 100%;
+    }
+
+    .slide {
+      height: 100% !important;
+    }
+  `,
+    imageContainer: (zoomed) => css `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100%;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      width: fit-content;
+      height: fit-content;
+      min-width: 100px;
+      min-height: 100px;
+      cursor: zoom-in;
+      transition: min-width 50ms ease;
+      ${zoomed &&
+        css `
+        min-width: 50vw;
+        min-height: 50vh;
+        cursor: zoom-out;
+      `}
+    }
+  `,
+    controlBtn: (direction) => css `
+    background-color: ${_controlBg};
+    border: none;
+    border-radius: 50%;
+    padding: 0.75em;
+    cursor: pointer;
+    margin-left: ${direction === 'left' ? '3px' : '0'};
+    margin-right: ${direction === 'right' ? '3px' : '0'};
+  `,
+    pageInfo: css `
+    display: flex;
+    justify-content: center;
+    padding: 0.25em 1em;
+    border-radius: 5px;
+    background-color: ${_controlBg};
+  `,
+    closeBtn: (theme) => css `
+    background-color: ${_controlBg};
+    border: none;
+    border-radius: ${theme.mypageBoxBorderRadius};
+    padding: 0.75em;
+    cursor: pointer;
+  `,
 };
-const styles = exports.styles = {
-  overlay: process.env.NODE_ENV === "production" ? {
-    name: "1ked4ob",
-    styles: "position:fixed;-webkit-overflow-scrolling:touch;top:0;left:0;right:0;bottom:0;z-index:1001;padding:1em;background:rgba(0, 0, 0, 0.8);overflow:auto;display:flex;justify-content:center;align-items:center"
-  } : {
-    name: "2usvsy-overlay",
-    styles: "position:fixed;-webkit-overflow-scrolling:touch;top:0;left:0;right:0;bottom:0;z-index:1001;padding:1em;background:rgba(0, 0, 0, 0.8);overflow:auto;display:flex;justify-content:center;align-items:center;label:overlay;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  carousel: process.env.NODE_ENV === "production" ? {
-    name: "1cx7q4s",
-    styles: "position:relative;display:flex;height:100%;width:100%;.slider-container{height:100%;width:100%;}.slider-frame{height:100%!important;}.slider-list{height:100%;}.slide{height:100%!important;}"
-  } : {
-    name: "i05i4-carousel",
-    styles: "position:relative;display:flex;height:100%;width:100%;.slider-container{height:100%;width:100%;}.slider-frame{height:100%!important;}.slider-list{height:100%;}.slide{height:100%!important;};label:carousel;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  imageContainer: zoomed => /*#__PURE__*/(0, _react.css)("display:flex;justify-content:center;align-items:center;height:100%;img{max-width:100%;max-height:100%;width:fit-content;height:fit-content;min-width:100px;min-height:100px;cursor:zoom-in;transition:min-width 50ms ease;", zoomed && _ref, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:imageContainer;")),
-  controlBtn: direction => /*#__PURE__*/(0, _react.css)("background-color:", _controlBg, ";border:none;border-radius:50%;padding:0.75em;cursor:pointer;margin-left:", direction === 'left' ? '3px' : '0', ";margin-right:", direction === 'right' ? '3px' : '0', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:controlBtn;")),
-  pageInfo: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:center;padding:0.25em 1em;border-radius:5px;background-color:", _controlBg, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:pageInfo;")),
-  closeBtn: theme => /*#__PURE__*/(0, _react.css)("background-color:", _controlBg, ";border:none;border-radius:", theme.mypageBoxBorderRadius, ";padding:0.75em;cursor:pointer;" + (process.env.NODE_ENV === "production" ? "" : ";label:closeBtn;"))
-};

package/lib/core/InfoButton/InfoButton.stories.d.ts

@@ -8,4 +8,3 @@ export declare const Right: Story;
 export declare const Bottom: Story;
 export declare const Left: Story;
 export declare const Width: Story;
-//# sourceMappingURL=InfoButton.stories.d.ts.map

package/lib/core/InfoButton/InfoButton.stories.js

@@ -1,65 +1,48 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Width = exports.Right = exports.Left = exports.Default = exports.Bottom = void 0;
-var _ = _interopRequireDefault(require("."));
-var _IconHelp = _interopRequireDefault(require("../../icons/General/IconHelp"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { jsx as _jsx } from "react/jsx-runtime";
+import InfoButton from '.';
+import IconHelp from '../../icons/General/IconHelp';
 const meta = {
-  title: 'Core/InfoButton',
-  component: _.default
+    title: 'Core/InfoButton',
+    component: InfoButton,
 };
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  args: {
-    children: 'This will be the content',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconHelp.default, {
-      primary: true
-    })
-  },
-  name: 'Default'
+export default meta;
+export const Default = {
+    args: {
+        children: 'This will be the content',
+        icon: _jsx(IconHelp, { primary: true }),
+    },
+    name: 'Default',
 };
-const Right = exports.Right = {
-  args: {
-    children: 'This will be the content. This very long and unnecessary text shows how the tooltip will handle responsiveness',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconHelp.default, {
-      primary: true
-    }),
-    place: 'right'
-  },
-  name: 'Right'
+export const Right = {
+    args: {
+        children: 'This will be the content. This very long and unnecessary text shows how the tooltip will handle responsiveness',
+        icon: _jsx(IconHelp, { primary: true }),
+        place: 'right',
+    },
+    name: 'Right',
 };
-const Bottom = exports.Bottom = {
-  args: {
-    children: 'This will be the content',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconHelp.default, {
-      primary: true
-    }),
-    place: 'bottom'
-  },
-  name: 'Bottom'
+export const Bottom = {
+    args: {
+        children: 'This will be the content',
+        icon: _jsx(IconHelp, { primary: true }),
+        place: 'bottom',
+    },
+    name: 'Bottom',
 };
-const Left = exports.Left = {
-  args: {
-    children: 'This will be the content',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconHelp.default, {
-      primary: true
-    }),
-    place: 'left'
-  },
-  name: 'Left'
+export const Left = {
+    args: {
+        children: 'This will be the content',
+        icon: _jsx(IconHelp, { primary: true }),
+        place: 'left',
+    },
+    name: 'Left',
+};
+export const Width = {
+    args: {
+        children: 'Custom width',
+        icon: _jsx(IconHelp, { primary: true }),
+        place: 'right',
+        width: '100px',
+    },
+    name: 'Width',
 };
-const Width = exports.Width = {
-  args: {
-    children: 'Custom width',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconHelp.default, {
-      primary: true
-    }),
-    place: 'right',
-    width: '100px'
-  },
-  name: 'Width'
-};

package/lib/core/InfoButton/index.d.ts

@@ -20,4 +20,3 @@ interface IProps {
 }
 declare const InfoButton: React.FC<IProps>;
 export default InfoButton;
-//# sourceMappingURL=index.d.ts.map

package/lib/core/InfoButton/index.js

@@ -1,87 +1,41 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("./styles");
-var _Text = _interopRequireDefault(require("../Text"));
-var _react2 = require("motion/react");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
-const InfoButton = ({
-  trackingName,
-  icon,
-  place = 'top',
-  children,
-  stopPropagation,
-  'aria-label': ariaLabel,
-  width,
-  className
-}) => {
-  const ref = /*#__PURE__*/(0, _react.createRef)();
-  const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
-  const handleClick = e => {
-    stopPropagation && e.stopPropagation();
-    setShowTooltip(!showTooltip);
-  };
-  (0, _react.useEffect)(() => {
-    const handleClickOutside = e => {
-      const node = ref.current;
-      if (node && node.contains(e.target)) {
-        return;
-      }
-      setShowTooltip(false);
+import { useState, useEffect, createRef } from 'react';
+import { Tooltip, StyledButton, Wrapper, styles } from './styles';
+import Text from '../Text';
+import { AnimatePresence } from 'motion/react';
+const InfoButton = ({ trackingName, icon, place = 'top', children, stopPropagation, 'aria-label': ariaLabel, width, className, }) => {
+    const ref = createRef();
+    const [showTooltip, setShowTooltip] = useState(false);
+    const handleClick = (e) => {
+        stopPropagation && e.stopPropagation();
+        setShowTooltip(!showTooltip);
     };
-    if (showTooltip) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [showTooltip, ref]);
-  return (0, _jsxRuntime.jsxs)(_styles.Wrapper, {
-    ref: ref,
-    className: className,
-    children: [(0, _jsxRuntime.jsx)(_styles.StyledButton, {
-      "aria-label": ariaLabel,
-      trackingName: trackingName,
-      nostyle: true,
-      onClick: handleClick,
-      children: icon ? icon : ''
-    }), (0, _jsxRuntime.jsx)(_react2.AnimatePresence, {
-      children: showTooltip && (0, _jsxRuntime.jsx)(_styles.Tooltip, {
-        initial: {
-          opacity: 0,
-          scale: 0.9
-        },
-        animate: {
-          opacity: 1,
-          scale: 1
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.9
-        },
-        transition: {
-          duration: 0.1
-        },
-        role: "tooltip",
-        id: "info-tooltip",
-        "aria-hidden": !showTooltip,
-        css: () => [_styles.styles.default, place === 'top' && _styles.styles.top, place === 'right' && _styles.styles.right, place === 'bottom' && _styles.styles.bottom, place === 'left' && _styles.styles.left, width && _styles.styles.width(width, place)],
-        children: (0, _jsxRuntime.jsx)(_Text.default, {
-          children: children ? children : ''
-        })
-      })
-    })]
-  });
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            const node = ref.current;
+            if (node && node.contains(e.target)) {
+                return;
+            }
+            setShowTooltip(false);
+        };
+        if (showTooltip) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        else {
+            document.removeEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showTooltip, ref]);
+    return (_jsxs(Wrapper, { ref: ref, className: className, children: [_jsx(StyledButton, { "aria-label": ariaLabel, trackingName: trackingName, nostyle: true, onClick: handleClick, children: icon ? icon : '' }), _jsx(AnimatePresence, { children: showTooltip && (_jsx(Tooltip, { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.9 }, transition: { duration: 0.1 }, role: "tooltip", id: "info-tooltip", "aria-hidden": !showTooltip, css: () => [
+                        styles.default,
+                        place === 'top' && styles.top,
+                        place === 'right' && styles.right,
+                        place === 'bottom' && styles.bottom,
+                        place === 'left' && styles.left,
+                        width && styles.width(width, place),
+                    ], children: _jsx(Text, { children: children ? children : '' }) })) })] }));
 };
-var _default = exports.default = InfoButton;
+export default InfoButton;

package/lib/core/InfoButton/styles.d.ts

@@ -54,4 +54,3 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/core/InfoButton/styles.js

@@ -1,67 +1,126 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import bp from '../../globals/styles/breakpoints';
+import Button from '../Button';
+import { motion } from 'motion/react';
+export const StyledButton = styled(Button) `
+  margin-left: 5px;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.Wrapper = exports.Tooltip = exports.StyledButton = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-var _breakpoints = _interopRequireDefault(require("../../globals/styles/breakpoints"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _react2 = require("motion/react");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const StyledButton = exports.StyledButton = /*#__PURE__*/(0, _base.default)(_Button.default, process.env.NODE_ENV === "production" ? {
-  target: "e169bjpw2"
-} : {
-  target: "e169bjpw2",
-  label: "StyledButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "4nc06h",
-  styles: "margin-left:5px;&:focus-visible{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color;}"
-} : {
-  name: "4nc06h",
-  styles: "margin-left:5px;&:focus-visible{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const styles = exports.styles = {
-  default: process.env.NODE_ENV === "production" ? {
-    name: "1uszwlo",
-    styles: "text-align:left;max-width:300px"
-  } : {
-    name: "godunf-default",
-    styles: "text-align:left;max-width:300px;label:default;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  top: /*#__PURE__*/(0, _react.css)("bottom:calc(24px + 5px);left:calc(-11vw + 9px);box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.2);@media screen and (max-width: ", _breakpoints.default.small, "){width:50vw;left:calc(-25vw + 9px);}@media screen and (max-width: ", _breakpoints.default.large, ") and (orientation: landscape){width:50vw;}&::after{top:100%;left:50%;margin-left:-5px;border-color:white transparent transparent transparent;}" + (process.env.NODE_ENV === "production" ? "" : ";label:top;")),
-  right: /*#__PURE__*/(0, _react.css)("top:0;left:35px;box-shadow:-1px 0px 4px 0px rgba(0, 0, 0, 0.2);@media screen and (max-width: ", _breakpoints.default.small, "){width:50vw;}@media screen and (max-width: ", _breakpoints.default.large, ") and (orientation: landscape){width:50vw;}&::after{top:8px;right:100%;margin-left:-5px;border-color:transparent white transparent transparent;}" + (process.env.NODE_ENV === "production" ? "" : ";label:right;")),
-  bottom: /*#__PURE__*/(0, _react.css)("top:calc(24px + 5px);left:calc(-11vw + 9px);box-shadow:0px -1px 4px 0px rgba(0, 0, 0, 0.2);@media screen and (max-width: ", _breakpoints.default.small, "){width:50vw;left:calc(-25vw + 9px);}@media screen and (max-width: ", _breakpoints.default.large, ") and (orientation: landscape){width:50vw;}&::after{bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent white transparent;}" + (process.env.NODE_ENV === "production" ? "" : ";label:bottom;")),
-  left: /*#__PURE__*/(0, _react.css)("top:0;right:calc(24px + 3px);box-shadow:1px 0px 4px 0px rgba(0, 0, 0, 0.2);@media screen and (max-width: ", _breakpoints.default.small, "){width:50vw;}@media screen and (max-width: ", _breakpoints.default.large, ") and (orientation: landscape){width:50vw;}&::after{top:8px;left:100%;border-color:transparent transparent transparent white;}" + (process.env.NODE_ENV === "production" ? "" : ";label:left;")),
-  width: (width, place) => /*#__PURE__*/(0, _react.css)("width:", width, "!important;left:", place === 'top' || place === 'bottom' ? `calc((-${width} / 2) + 9px) !important` : place === 'right' ? '35px' : 'initial', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:width;"))
+  &:focus-visible {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+`;
+export const styles = {
+    default: css `
+    text-align: left;
+    max-width: 300px;
+  `,
+    top: css `
+    bottom: calc(24px + 5px);
+    left: calc(-11vw + 9px);
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
+
+    @media screen and (max-width: ${bp.small}) {
+      width: 50vw;
+      left: calc(-25vw + 9px);
+    }
+    @media screen and (max-width: ${bp.large}) and (orientation: landscape) {
+      width: 50vw;
+    }
+
+    &::after {
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-color: white transparent transparent transparent;
+    }
+  `,
+    right: css `
+    top: 0;
+    left: 35px;
+    box-shadow: -1px 0px 4px 0px rgba(0, 0, 0, 0.2);
+
+    @media screen and (max-width: ${bp.small}) {
+      width: 50vw;
+    }
+
+    @media screen and (max-width: ${bp.large}) and (orientation: landscape) {
+      width: 50vw;
+    }
+
+    &::after {
+      top: 8px;
+      right: 100%;
+      margin-left: -5px;
+      border-color: transparent white transparent transparent;
+    }
+  `,
+    bottom: css `
+    top: calc(24px + 5px);
+    left: calc(-11vw + 9px);
+    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.2);
+
+    @media screen and (max-width: ${bp.small}) {
+      width: 50vw;
+      left: calc(-25vw + 9px);
+    }
+    @media screen and (max-width: ${bp.large}) and (orientation: landscape) {
+      width: 50vw;
+    }
+
+    &::after {
+      bottom: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-color: transparent transparent white transparent;
+    }
+  `,
+    left: css `
+    top: 0;
+    right: calc(24px + 3px);
+    box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.2);
+
+    @media screen and (max-width: ${bp.small}) {
+      width: 50vw;
+    }
+    @media screen and (max-width: ${bp.large}) and (orientation: landscape) {
+      width: 50vw;
+    }
+
+    &::after {
+      top: 8px;
+      left: 100%;
+      border-color: transparent transparent transparent white;
+    }
+  `,
+    width: (width, place) => css `
+    width: ${width} !important;
+    left: ${place === 'top' || place === 'bottom'
+        ? `calc((-${width} / 2) + 9px) !important`
+        : place === 'right'
+            ? '35px'
+            : 'initial'};
+  `,
 };
-const Tooltip = exports.Tooltip = /*#__PURE__*/(0, _base.default)(_react2.motion.div, process.env.NODE_ENV === "production" ? {
-  target: "e169bjpw1"
-} : {
-  target: "e169bjpw1",
-  label: "Tooltip"
-})(process.env.NODE_ENV === "production" ? {
-  name: "gsdyt8",
-  styles: "position:absolute;width:22vw;text-align:center;padding:0.5em;border-radius:10px;background-color:white;z-index:9999;&::after{content:'';position:absolute;border-width:5px;border-style:solid;}"
-} : {
-  name: "gsdyt8",
-  styles: "position:absolute;width:22vw;text-align:center;padding:0.5em;border-radius:10px;background-color:white;z-index:9999;&::after{content:'';position:absolute;border-width:5px;border-style:solid;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Wrapper = exports.Wrapper = /*#__PURE__*/(0, _base.default)("span", process.env.NODE_ENV === "production" ? {
-  target: "e169bjpw0"
-} : {
-  target: "e169bjpw0",
-  label: "Wrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1m1qpau",
-  styles: "display:block;width:max-content;position:relative"
-} : {
-  name: "1m1qpau",
-  styles: "display:block;width:max-content;position:relative",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+export const Tooltip = styled(motion.div) `
+  position: absolute;
+  width: 22vw;
+  text-align: center;
+  padding: 0.5em;
+  border-radius: 10px;
+  background-color: white;
+  z-index: 9999;
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 5px;
+    border-style: solid;
+  }
+`;
+export const Wrapper = styled.span `
+  display: block;
+  width: max-content;
+  position: relative;
+`;

package/lib/core/Input/Input.stories.d.ts

@@ -21,4 +21,3 @@ export declare const Invalid: Story;
 export declare const InvalidNoLabel: Story;
 export declare const Controls: Story;
 export declare const FormattedNumberOnly: Story;
-//# sourceMappingURL=Input.stories.d.ts.map