@bbl-digital/snorre 4.0.5 → 4.0.7

package/lib/core/EditorOld/index.js

@@ -0,0 +1,147 @@
+/** @jsxImportSource @emotion/react */
+import React, { useState } from 'react';
+import { Editor as Wysiwyg } from 'react-draft-wysiwyg';
+import { convertToRaw, EditorState, Modifier } from 'draft-js';
+import { stateFromHTML } from 'draft-js-import-html';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import { CounterWrapper, ErrorWrapper, Label, RelativeDiv, styles } from './styles';
+import { basicToolbar, editorLabels, getStrippedHtml, htmlToEntity, richToolbar } from './config';
+import { convertToHTML, convertFromHTML } from 'draft-convert';
+import Text from '../Text';
+import { useTheme } from '@emotion/react';
+import IconErrorOutline from '../../icons/General/IconErrorOutline';
+import draftToHtml from 'draftjs-to-html';
+import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+
+/**
+ *
+ * TODO: REMOVE AND CLEANUP PACKAGES
+ *
+ */
+const EditorOld = ({
+  initialValue,
+  height = 300,
+  maxHeight,
+  maxlength,
+  maxlengthType = 'plaintext',
+  maxlengthText,
+  withCounter,
+  invalidMessage,
+  label,
+  customToolbar,
+  type = 'basic',
+  onChange,
+  onBlur
+}) => {
+  const theme = useTheme();
+  const [maxlengthError, setMaxlengthError] = useState(null);
+  const [charCount, setCharCount] = useState(0);
+  const [editorState, setEditorState] = useState(initialValue ? EditorState.createWithContent(convertFromHTML({
+    htmlToEntity
+  })(initialValue)) : EditorState.createEmpty());
+
+  const handleEditorChange = state => {
+    handleValidity(state);
+    setEditorState(state);
+    const plainText = state.getCurrentContent().getPlainText();
+    const html = draftToHtml(convertToRaw(state.getCurrentContent()));
+    onChange(plainText.length > 0 ? html : ''); // return empty if no content
+
+    if (withCounter && maxlength) {
+      setCharCount(maxlengthType === 'html' ? html.length : plainText.length);
+    }
+  };
+
+  const handleValidity = state => {
+    if (!maxlength) {
+      setMaxlengthError(null);
+      return;
+    }
+
+    const plaintext = state.getCurrentContent().getPlainText();
+    const html = convertToHTML(state.getCurrentContent());
+
+    if (maxlengthType === 'html' && html.length > maxlength) {
+      setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
+      return;
+    }
+
+    if (maxlengthType === 'plaintext' && plaintext.length > maxlength) {
+      setMaxlengthError(maxlengthText ? maxlengthText : 'Text is too long');
+      return;
+    }
+
+    setMaxlengthError(null);
+  };
+
+  const Counter = _jsx(CounterWrapper, {
+    children: _jsxs(Text, {
+      children: [charCount, "/", maxlength]
+    })
+  });
+
+  const handlePaste = (text, html, editorState, onChange) => {
+    if (!html) return false;
+    const strippedHtml = getStrippedHtml(html);
+    const blockMap = stateFromHTML(strippedHtml).blockMap;
+    const newState = Modifier.replaceWithFragment(editorState.getCurrentContent(), editorState.getSelection(), blockMap);
+    onChange(EditorState.push(editorState, newState, 'insert-fragment'));
+    return true;
+  };
+
+  const getToolbar = () => {
+    switch (type) {
+      case 'basic':
+        return basicToolbar;
+
+      case 'rich':
+        return richToolbar;
+
+      case 'custom':
+        return customToolbar;
+
+      default:
+        return undefined;
+    }
+  };
+
+  return _jsxs("div", {
+    css: theme => [styles.default(theme, height), maxHeight && styles.maxHeight(maxHeight)],
+    children: [label && _jsx(Label, {
+      children: label
+    }), _jsxs(RelativeDiv, {
+      children: [_jsx(Wysiwyg, {
+        editorState: editorState,
+        toolbarClassName: "toolbar-wrapper",
+        wrapperClassName: "editor-wrapper",
+        editorClassName: "content-wrapper",
+        onEditorStateChange: handleEditorChange,
+        toolbar: getToolbar(),
+        localization: {
+          locale: 'nb_NO',
+          translations: editorLabels
+        },
+        stripPastedStyles: type !== 'rich',
+        onBlur: () => onBlur && onBlur(),
+        handlePastedText: handlePaste
+      }), maxlength && withCounter && Counter]
+    }), (maxlengthError || invalidMessage) && _jsxs(ErrorWrapper, {
+      children: [maxlengthError && _jsxs(Text, {
+        color: theme.alert,
+        children: [_jsx(IconErrorOutline, {
+          size: "16px",
+          color: theme.alert
+        }), ' ', maxlengthError]
+      }), invalidMessage && _jsxs(Text, {
+        color: theme.alert,
+        children: [_jsx(IconErrorOutline, {
+          size: "16px",
+          color: theme.alert
+        }), ' ', invalidMessage]
+      })]
+    })]
+  });
+};
+
+export default EditorOld;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { IAppTheme } from '../../app-shell/theme';
+export declare const styles: {
+    default: (theme: IAppTheme, height: number) => import("@emotion/react").SerializedStyles;
+    maxHeight: (height: number) => import("@emotion/react").SerializedStyles;
+};
+export declare const RelativeDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ErrorWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CounterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/core/EditorOld/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/EditorOld/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,eAAO,MAAM,MAAM;qBACA,SAAS,UAAU,MAAM;wBAkItB,MAAM;CAK3B,CAAA;AAED,eAAO,MAAM,WAAW;;;yGAEvB,CAAA;AAED,eAAO,MAAM,KAAK;;;2GAKjB,CAAA;AAED,eAAO,MAAM,YAAY;;;yGASxB,CAAA;AAED,eAAO,MAAM,cAAc;;;yGAI1B,CAAA"}

package/lib/core/EditorOld/styles.js

@@ -0,0 +1,65 @@
+import _styled from "@emotion/styled/base";
+
+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';
+export const styles = {
+  default: (theme, height) => /*#__PURE__*/css("display:grid;grid-row-gap:4px;.content-wrapper{border:1px solid ", theme.border, ";border-radius:0 0 3px 3px;padding:1em;padding-bottom:0;cursor:text;resize:vertical;overflow:auto;height:", height, "px;>div{height:90%;}.public-DraftStyleDefault-block{margin:0;}}.toolbar-wrapper{padding:0;margin:0;border:1px solid ", theme.border, ";border-radius:3px 3px 0 0;border-bottom:unset;&>div{border-right:1px solid ", theme.border, ";margin:0;padding:0.1em;}.rdw-block-dropdown{border-color:transparent;&:active,&:hover{box-shadow:none;background-color:", theme.gray20, ";}}.rdw-option-wrapper{border-color:transparent;border-radius:5px;margin:0;&:active,&:hover{box-shadow:none;background-color:", theme.gray20, ";}}.rdw-option-active{box-shadow:unset;background-color:", theme.gray10, ";&:active,&:hover{background-color:", theme.gray10, ";}}.rdw-link-modal{height:unset;input{border-color:", theme.border, ";border-radius:5px;}.rdw-link-modal-target-option{display:none;}.rdw-link-modal-btn{border-radius:16px;border-color:transparent;background-color:", theme.btnDefault, ";color:", theme.btnDefaultFontColor, ";&:disabled{background-color:", theme.disabled, ";color:black;}&:active,&:hover,&:focus{box-shadow:none;background-color:", theme.btnDefaultDarker, ";border-color:", theme.btnDefaultDarker, ";color:", theme.btnHoverTextColor, ";}&:last-of-type{display:none;}}}}.DraftEditor-editorContainer{p{margin:0;}h1,h2,h3,h4,h5{margin-top:0;margin-bottom:0;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:styles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS29EIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgSUFwcFRoZW1lIH0gZnJvbSAnLi4vLi4vYXBwLXNoZWxsL3RoZW1lJ1xuXG5leHBvcnQgY29uc3Qgc3R5bGVzID0ge1xuICBkZWZhdWx0OiAodGhlbWU6IElBcHBUaGVtZSwgaGVpZ2h0OiBudW1iZXIpID0+IGNzc2BcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdyaWQtcm93LWdhcDogNHB4O1xuXG4gICAgLmNvbnRlbnQtd3JhcHBlciB7XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICBib3JkZXItcmFkaXVzOiAwIDAgM3B4IDNweDtcbiAgICAgIHBhZGRpbmc6IDFlbTtcbiAgICAgIHBhZGRpbmctYm90dG9tOiAwO1xuICAgICAgY3Vyc29yOiB0ZXh0O1xuICAgICAgcmVzaXplOiB2ZXJ0aWNhbDtcbiAgICAgIG92ZXJmbG93OiBhdXRvO1xuICAgICAgaGVpZ2h0OiAke2hlaWdodH1weDtcblxuICAgICAgPiBkaXYge1xuICAgICAgICBoZWlnaHQ6IDkwJTtcbiAgICAgIH1cblxuICAgICAgLnB1YmxpYy1EcmFmdFN0eWxlRGVmYXVsdC1ibG9jayB7XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAudG9vbGJhci13cmFwcGVyIHtcbiAgICAgIC8vIFRoZSB0b29sYmFyXG4gICAgICBwYWRkaW5nOiAwO1xuICAgICAgbWFyZ2luOiAwO1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogM3B4IDNweCAwIDA7XG4gICAgICBib3JkZXItYm90dG9tOiB1bnNldDtcblxuICAgICAgLy8gVG9vbGJhciBzZWN0aW9uc1xuICAgICAgJiA+IGRpdiB7XG4gICAgICAgIGJvcmRlci1yaWdodDogMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICBwYWRkaW5nOiAwLjFlbTtcbiAgICAgIH1cblxuICAgICAgLy8gT3ZlcnNrcmlmdCB2ZWxnZXJcbiAgICAgIC5yZHctYmxvY2stZHJvcGRvd24ge1xuICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuXG4gICAgICAgICY6YWN0aXZlLFxuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTIwfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBUb29sYmFyIG9wdGlvbnNcbiAgICAgIC5yZHctb3B0aW9uLXdyYXBwZXIge1xuICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIG1hcmdpbjogMDtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkyMH07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLnJkdy1vcHRpb24tYWN0aXZlIHtcbiAgICAgICAgYm94LXNoYWRvdzogdW5zZXQ7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTEwfTtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5ncmF5MTB9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC8vIExpbmsgbW9kYWxcbiAgICAgIC5yZHctbGluay1tb2RhbCB7XG4gICAgICAgIGhlaWdodDogdW5zZXQ7XG5cbiAgICAgICAgaW5wdXQge1xuICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDVweDtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFJlbW92ZSBvcGVuIG5ldyB0YWIgb3B0aW9uXG4gICAgICAgIC5yZHctbGluay1tb2RhbC10YXJnZXQtb3B0aW9uIHtcbiAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gU3R5bGUgYWRkIGJ1dHRvblxuICAgICAgICAucmR3LWxpbmstbW9kYWwtYnRuIHtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAxNnB4O1xuICAgICAgICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0fTtcbiAgICAgICAgICBjb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0Rm9udENvbG9yfTtcblxuICAgICAgICAgICY6ZGlzYWJsZWQge1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5kaXNhYmxlZH07XG4gICAgICAgICAgICBjb2xvcjogYmxhY2s7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICAgJjpob3ZlcixcbiAgICAgICAgICAmOmZvY3VzIHtcbiAgICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmJ0bkRlZmF1bHREYXJrZXJ9O1xuICAgICAgICAgICAgYm9yZGVyLWNvbG9yOiAke3RoZW1lLmJ0bkRlZmF1bHREYXJrZXJ9O1xuICAgICAgICAgICAgY29sb3I6ICR7dGhlbWUuYnRuSG92ZXJUZXh0Q29sb3J9O1xuICAgICAgICAgIH1cblxuICAgICAgICAgIC8vIFJlbW92ZSBjYW5jZWwgYnV0dG9uXG4gICAgICAgICAgJjpsYXN0LW9mLXR5cGUge1xuICAgICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICAuRHJhZnRFZGl0b3ItZWRpdG9yQ29udGFpbmVyIHtcbiAgICAgIHAge1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICB9XG5cbiAgICAgIGgxLFxuICAgICAgaDIsXG4gICAgICBoMyxcbiAgICAgIGg0LFxuICAgICAgaDUge1xuICAgICAgICBtYXJnaW4tdG9wOiAwO1xuICAgICAgICBtYXJnaW4tYm90dG9tOiAwO1xuICAgICAgfVxuICAgIH1cbiAgYCxcbiAgbWF4SGVpZ2h0OiAoaGVpZ2h0OiBudW1iZXIpID0+IGNzc2BcbiAgICAuY29udGVudC13cmFwcGVyIHtcbiAgICAgIG1heC1oZWlnaHQ6ICR7aGVpZ2h0fXB4O1xuICAgIH1cbiAgYCxcbn1cblxuZXhwb3J0IGNvbnN0IFJlbGF0aXZlRGl2ID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuYFxuXG5leHBvcnQgY29uc3QgTGFiZWwgPSBzdHlsZWQuc3BhbmBcbiAgbGluZS1oZWlnaHQ6IDIycHg7XG4gIGZvbnQtc2l6ZTogMWVtO1xuICBmb250LXdlaWdodDogNjAwO1xuICBtYXJnaW4tYm90dG9tOiA0cHg7XG5gXG5cbmV4cG9ydCBjb25zdCBFcnJvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuXG4gICYgPiBzcGFuIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiA2cHg7XG4gICAgbWFyZ2luLWxlZnQ6IDJweDtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgQ291bnRlcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAxcHg7XG4gIGJvdHRvbTogLTIwcHg7XG5gXG4iXX0= */"),
+  maxHeight: height => /*#__PURE__*/css(".content-wrapper{max-height:", height, "px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:styles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUlvQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9FZGl0b3JPbGQvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogKHRoZW1lOiBJQXBwVGhlbWUsIGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXJvdy1nYXA6IDRweDtcblxuICAgIC5jb250ZW50LXdyYXBwZXIge1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDNweCAzcHg7XG4gICAgICBwYWRkaW5nOiAxZW07XG4gICAgICBwYWRkaW5nLWJvdHRvbTogMDtcbiAgICAgIGN1cnNvcjogdGV4dDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG5cbiAgICAgID4gZGl2IHtcbiAgICAgICAgaGVpZ2h0OiA5MCU7XG4gICAgICB9XG5cbiAgICAgIC5wdWJsaWMtRHJhZnRTdHlsZURlZmF1bHQtYmxvY2sge1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgLnRvb2xiYXItd3JhcHBlciB7XG4gICAgICAvLyBUaGUgdG9vbGJhclxuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDNweCAzcHggMCAwO1xuICAgICAgYm9yZGVyLWJvdHRvbTogdW5zZXQ7XG5cbiAgICAgIC8vIFRvb2xiYXIgc2VjdGlvbnNcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgcGFkZGluZzogMC4xZW07XG4gICAgICB9XG5cbiAgICAgIC8vIE92ZXJza3JpZnQgdmVsZ2VyXG4gICAgICAucmR3LWJsb2NrLWRyb3Bkb3duIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkyMH07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLy8gVG9vbGJhciBvcHRpb25zXG4gICAgICAucmR3LW9wdGlvbi13cmFwcGVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBtYXJnaW46IDA7XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5ncmF5MjB9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5yZHctb3B0aW9uLWFjdGl2ZSB7XG4gICAgICAgIGJveC1zaGFkb3c6IHVuc2V0O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkxMH07XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTEwfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBMaW5rIG1vZGFsXG4gICAgICAucmR3LWxpbmstbW9kYWwge1xuICAgICAgICBoZWlnaHQ6IHVuc2V0O1xuXG4gICAgICAgIGlucHV0IHtcbiAgICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBSZW1vdmUgb3BlbiBuZXcgdGFiIG9wdGlvblxuICAgICAgICAucmR3LWxpbmstbW9kYWwtdGFyZ2V0LW9wdGlvbiB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFN0eWxlIGFkZCBidXR0b25cbiAgICAgICAgLnJkdy1saW5rLW1vZGFsLWJ0biB7XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdH07XG4gICAgICAgICAgY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn07XG5cbiAgICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZGlzYWJsZWR9O1xuICAgICAgICAgICAgY29sb3I6IGJsYWNrO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6YWN0aXZlLFxuICAgICAgICAgICY6aG92ZXIsXG4gICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGNvbG9yOiAke3RoZW1lLmJ0bkhvdmVyVGV4dENvbG9yfTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAvLyBSZW1vdmUgY2FuY2VsIGJ1dHRvblxuICAgICAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgLkRyYWZ0RWRpdG9yLWVkaXRvckNvbnRhaW5lciB7XG4gICAgICBwIHtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgfVxuXG4gICAgICBoMSxcbiAgICAgIGgyLFxuICAgICAgaDMsXG4gICAgICBoNCxcbiAgICAgIGg1IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG4gIG1heEhlaWdodDogKGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgLmNvbnRlbnQtd3JhcHBlciB7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH1weDtcbiAgICB9XG4gIGAsXG59XG5cbmV4cG9ydCBjb25zdCBSZWxhdGl2ZURpdiA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmBcblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvdW50ZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMXB4O1xuICBib3R0b206IC0yMHB4O1xuYFxuIl19 */")
+};
+export const RelativeDiv = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1dpk68n3"
+} : {
+  target: "e1dpk68n3",
+  label: "RelativeDiv"
+})(process.env.NODE_ENV === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "bjn8wh",
+  styles: "position:relative",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOElxQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9FZGl0b3JPbGQvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogKHRoZW1lOiBJQXBwVGhlbWUsIGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXJvdy1nYXA6IDRweDtcblxuICAgIC5jb250ZW50LXdyYXBwZXIge1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDNweCAzcHg7XG4gICAgICBwYWRkaW5nOiAxZW07XG4gICAgICBwYWRkaW5nLWJvdHRvbTogMDtcbiAgICAgIGN1cnNvcjogdGV4dDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG5cbiAgICAgID4gZGl2IHtcbiAgICAgICAgaGVpZ2h0OiA5MCU7XG4gICAgICB9XG5cbiAgICAgIC5wdWJsaWMtRHJhZnRTdHlsZURlZmF1bHQtYmxvY2sge1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgLnRvb2xiYXItd3JhcHBlciB7XG4gICAgICAvLyBUaGUgdG9vbGJhclxuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDNweCAzcHggMCAwO1xuICAgICAgYm9yZGVyLWJvdHRvbTogdW5zZXQ7XG5cbiAgICAgIC8vIFRvb2xiYXIgc2VjdGlvbnNcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgcGFkZGluZzogMC4xZW07XG4gICAgICB9XG5cbiAgICAgIC8vIE92ZXJza3JpZnQgdmVsZ2VyXG4gICAgICAucmR3LWJsb2NrLWRyb3Bkb3duIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkyMH07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLy8gVG9vbGJhciBvcHRpb25zXG4gICAgICAucmR3LW9wdGlvbi13cmFwcGVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBtYXJnaW46IDA7XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5ncmF5MjB9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5yZHctb3B0aW9uLWFjdGl2ZSB7XG4gICAgICAgIGJveC1zaGFkb3c6IHVuc2V0O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkxMH07XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTEwfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBMaW5rIG1vZGFsXG4gICAgICAucmR3LWxpbmstbW9kYWwge1xuICAgICAgICBoZWlnaHQ6IHVuc2V0O1xuXG4gICAgICAgIGlucHV0IHtcbiAgICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBSZW1vdmUgb3BlbiBuZXcgdGFiIG9wdGlvblxuICAgICAgICAucmR3LWxpbmstbW9kYWwtdGFyZ2V0LW9wdGlvbiB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFN0eWxlIGFkZCBidXR0b25cbiAgICAgICAgLnJkdy1saW5rLW1vZGFsLWJ0biB7XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdH07XG4gICAgICAgICAgY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn07XG5cbiAgICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZGlzYWJsZWR9O1xuICAgICAgICAgICAgY29sb3I6IGJsYWNrO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6YWN0aXZlLFxuICAgICAgICAgICY6aG92ZXIsXG4gICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGNvbG9yOiAke3RoZW1lLmJ0bkhvdmVyVGV4dENvbG9yfTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAvLyBSZW1vdmUgY2FuY2VsIGJ1dHRvblxuICAgICAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgLkRyYWZ0RWRpdG9yLWVkaXRvckNvbnRhaW5lciB7XG4gICAgICBwIHtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgfVxuXG4gICAgICBoMSxcbiAgICAgIGgyLFxuICAgICAgaDMsXG4gICAgICBoNCxcbiAgICAgIGg1IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG4gIG1heEhlaWdodDogKGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgLmNvbnRlbnQtd3JhcHBlciB7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH1weDtcbiAgICB9XG4gIGAsXG59XG5cbmV4cG9ydCBjb25zdCBSZWxhdGl2ZURpdiA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmBcblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvdW50ZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMXB4O1xuICBib3R0b206IC0yMHB4O1xuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const Label = _styled("span", process.env.NODE_ENV === "production" ? {
+  target: "e1dpk68n2"
+} : {
+  target: "e1dpk68n2",
+  label: "Label"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1ge8ozm",
+  styles: "line-height:22px;font-size:1em;font-weight:600;margin-bottom:4px"
+} : {
+  name: "1ge8ozm",
+  styles: "line-height:22px;font-size:1em;font-weight:600;margin-bottom:4px",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0pnQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9FZGl0b3JPbGQvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogKHRoZW1lOiBJQXBwVGhlbWUsIGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXJvdy1nYXA6IDRweDtcblxuICAgIC5jb250ZW50LXdyYXBwZXIge1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDNweCAzcHg7XG4gICAgICBwYWRkaW5nOiAxZW07XG4gICAgICBwYWRkaW5nLWJvdHRvbTogMDtcbiAgICAgIGN1cnNvcjogdGV4dDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG5cbiAgICAgID4gZGl2IHtcbiAgICAgICAgaGVpZ2h0OiA5MCU7XG4gICAgICB9XG5cbiAgICAgIC5wdWJsaWMtRHJhZnRTdHlsZURlZmF1bHQtYmxvY2sge1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgLnRvb2xiYXItd3JhcHBlciB7XG4gICAgICAvLyBUaGUgdG9vbGJhclxuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDNweCAzcHggMCAwO1xuICAgICAgYm9yZGVyLWJvdHRvbTogdW5zZXQ7XG5cbiAgICAgIC8vIFRvb2xiYXIgc2VjdGlvbnNcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgcGFkZGluZzogMC4xZW07XG4gICAgICB9XG5cbiAgICAgIC8vIE92ZXJza3JpZnQgdmVsZ2VyXG4gICAgICAucmR3LWJsb2NrLWRyb3Bkb3duIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkyMH07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLy8gVG9vbGJhciBvcHRpb25zXG4gICAgICAucmR3LW9wdGlvbi13cmFwcGVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBtYXJnaW46IDA7XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5ncmF5MjB9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5yZHctb3B0aW9uLWFjdGl2ZSB7XG4gICAgICAgIGJveC1zaGFkb3c6IHVuc2V0O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkxMH07XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTEwfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBMaW5rIG1vZGFsXG4gICAgICAucmR3LWxpbmstbW9kYWwge1xuICAgICAgICBoZWlnaHQ6IHVuc2V0O1xuXG4gICAgICAgIGlucHV0IHtcbiAgICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBSZW1vdmUgb3BlbiBuZXcgdGFiIG9wdGlvblxuICAgICAgICAucmR3LWxpbmstbW9kYWwtdGFyZ2V0LW9wdGlvbiB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFN0eWxlIGFkZCBidXR0b25cbiAgICAgICAgLnJkdy1saW5rLW1vZGFsLWJ0biB7XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdH07XG4gICAgICAgICAgY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn07XG5cbiAgICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZGlzYWJsZWR9O1xuICAgICAgICAgICAgY29sb3I6IGJsYWNrO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6YWN0aXZlLFxuICAgICAgICAgICY6aG92ZXIsXG4gICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGNvbG9yOiAke3RoZW1lLmJ0bkhvdmVyVGV4dENvbG9yfTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAvLyBSZW1vdmUgY2FuY2VsIGJ1dHRvblxuICAgICAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgLkRyYWZ0RWRpdG9yLWVkaXRvckNvbnRhaW5lciB7XG4gICAgICBwIHtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgfVxuXG4gICAgICBoMSxcbiAgICAgIGgyLFxuICAgICAgaDMsXG4gICAgICBoNCxcbiAgICAgIGg1IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG4gIG1heEhlaWdodDogKGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgLmNvbnRlbnQtd3JhcHBlciB7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH1weDtcbiAgICB9XG4gIGAsXG59XG5cbmV4cG9ydCBjb25zdCBSZWxhdGl2ZURpdiA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmBcblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvdW50ZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMXB4O1xuICBib3R0b206IC0yMHB4O1xuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const ErrorWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1dpk68n1"
+} : {
+  target: "e1dpk68n1",
+  label: "ErrorWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "p12i1l",
+  styles: "display:grid;&>span{display:flex;align-items:center;gap:6px;margin-left:2px;}"
+} : {
+  name: "p12i1l",
+  styles: "display:grid;&>span{display:flex;align-items:center;gap:6px;margin-left:2px;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUpzQyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9FZGl0b3JPbGQvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogKHRoZW1lOiBJQXBwVGhlbWUsIGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXJvdy1nYXA6IDRweDtcblxuICAgIC5jb250ZW50LXdyYXBwZXIge1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDNweCAzcHg7XG4gICAgICBwYWRkaW5nOiAxZW07XG4gICAgICBwYWRkaW5nLWJvdHRvbTogMDtcbiAgICAgIGN1cnNvcjogdGV4dDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG5cbiAgICAgID4gZGl2IHtcbiAgICAgICAgaGVpZ2h0OiA5MCU7XG4gICAgICB9XG5cbiAgICAgIC5wdWJsaWMtRHJhZnRTdHlsZURlZmF1bHQtYmxvY2sge1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgLnRvb2xiYXItd3JhcHBlciB7XG4gICAgICAvLyBUaGUgdG9vbGJhclxuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDNweCAzcHggMCAwO1xuICAgICAgYm9yZGVyLWJvdHRvbTogdW5zZXQ7XG5cbiAgICAgIC8vIFRvb2xiYXIgc2VjdGlvbnNcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgcGFkZGluZzogMC4xZW07XG4gICAgICB9XG5cbiAgICAgIC8vIE92ZXJza3JpZnQgdmVsZ2VyXG4gICAgICAucmR3LWJsb2NrLWRyb3Bkb3duIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkyMH07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLy8gVG9vbGJhciBvcHRpb25zXG4gICAgICAucmR3LW9wdGlvbi13cmFwcGVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBtYXJnaW46IDA7XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5ncmF5MjB9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5yZHctb3B0aW9uLWFjdGl2ZSB7XG4gICAgICAgIGJveC1zaGFkb3c6IHVuc2V0O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkxMH07XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTEwfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBMaW5rIG1vZGFsXG4gICAgICAucmR3LWxpbmstbW9kYWwge1xuICAgICAgICBoZWlnaHQ6IHVuc2V0O1xuXG4gICAgICAgIGlucHV0IHtcbiAgICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBSZW1vdmUgb3BlbiBuZXcgdGFiIG9wdGlvblxuICAgICAgICAucmR3LWxpbmstbW9kYWwtdGFyZ2V0LW9wdGlvbiB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFN0eWxlIGFkZCBidXR0b25cbiAgICAgICAgLnJkdy1saW5rLW1vZGFsLWJ0biB7XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdH07XG4gICAgICAgICAgY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn07XG5cbiAgICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZGlzYWJsZWR9O1xuICAgICAgICAgICAgY29sb3I6IGJsYWNrO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6YWN0aXZlLFxuICAgICAgICAgICY6aG92ZXIsXG4gICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGNvbG9yOiAke3RoZW1lLmJ0bkhvdmVyVGV4dENvbG9yfTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAvLyBSZW1vdmUgY2FuY2VsIGJ1dHRvblxuICAgICAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgLkRyYWZ0RWRpdG9yLWVkaXRvckNvbnRhaW5lciB7XG4gICAgICBwIHtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgfVxuXG4gICAgICBoMSxcbiAgICAgIGgyLFxuICAgICAgaDMsXG4gICAgICBoNCxcbiAgICAgIGg1IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG4gIG1heEhlaWdodDogKGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgLmNvbnRlbnQtd3JhcHBlciB7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH1weDtcbiAgICB9XG4gIGAsXG59XG5cbmV4cG9ydCBjb25zdCBSZWxhdGl2ZURpdiA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmBcblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvdW50ZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMXB4O1xuICBib3R0b206IC0yMHB4O1xuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const CounterWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1dpk68n0"
+} : {
+  target: "e1dpk68n0",
+  label: "CounterWrapper"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13qbf77",
+  styles: "position:absolute;right:1px;bottom:-20px"
+} : {
+  name: "13qbf77",
+  styles: "position:absolute;right:1px;bottom:-20px",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0VkaXRvck9sZC9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0t3QyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvcGFja2FnZXMvY29yZS9FZGl0b3JPbGQvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IElBcHBUaGVtZSB9IGZyb20gJy4uLy4uL2FwcC1zaGVsbC90aGVtZSdcblxuZXhwb3J0IGNvbnN0IHN0eWxlcyA9IHtcbiAgZGVmYXVsdDogKHRoZW1lOiBJQXBwVGhlbWUsIGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgZGlzcGxheTogZ3JpZDtcbiAgICBncmlkLXJvdy1nYXA6IDRweDtcblxuICAgIC5jb250ZW50LXdyYXBwZXIge1xuICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5ib3JkZXJ9O1xuICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDNweCAzcHg7XG4gICAgICBwYWRkaW5nOiAxZW07XG4gICAgICBwYWRkaW5nLWJvdHRvbTogMDtcbiAgICAgIGN1cnNvcjogdGV4dDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgICBvdmVyZmxvdzogYXV0bztcbiAgICAgIGhlaWdodDogJHtoZWlnaHR9cHg7XG5cbiAgICAgID4gZGl2IHtcbiAgICAgICAgaGVpZ2h0OiA5MCU7XG4gICAgICB9XG5cbiAgICAgIC5wdWJsaWMtRHJhZnRTdHlsZURlZmF1bHQtYmxvY2sge1xuICAgICAgICBtYXJnaW46IDA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgLnRvb2xiYXItd3JhcHBlciB7XG4gICAgICAvLyBUaGUgdG9vbGJhclxuICAgICAgcGFkZGluZzogMDtcbiAgICAgIG1hcmdpbjogMDtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDNweCAzcHggMCAwO1xuICAgICAgYm9yZGVyLWJvdHRvbTogdW5zZXQ7XG5cbiAgICAgIC8vIFRvb2xiYXIgc2VjdGlvbnNcbiAgICAgICYgPiBkaXYge1xuICAgICAgICBib3JkZXItcmlnaHQ6IDFweCBzb2xpZCAke3RoZW1lLmJvcmRlcn07XG4gICAgICAgIG1hcmdpbjogMDtcbiAgICAgICAgcGFkZGluZzogMC4xZW07XG4gICAgICB9XG5cbiAgICAgIC8vIE92ZXJza3JpZnQgdmVsZ2VyXG4gICAgICAucmR3LWJsb2NrLWRyb3Bkb3duIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcblxuICAgICAgICAmOmFjdGl2ZSxcbiAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkyMH07XG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLy8gVG9vbGJhciBvcHRpb25zXG4gICAgICAucmR3LW9wdGlvbi13cmFwcGVyIHtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNXB4O1xuICAgICAgICBtYXJnaW46IDA7XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5ncmF5MjB9O1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIC5yZHctb3B0aW9uLWFjdGl2ZSB7XG4gICAgICAgIGJveC1zaGFkb3c6IHVuc2V0O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmdyYXkxMH07XG5cbiAgICAgICAgJjphY3RpdmUsXG4gICAgICAgICY6aG92ZXIge1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZ3JheTEwfTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAvLyBMaW5rIG1vZGFsXG4gICAgICAucmR3LWxpbmstbW9kYWwge1xuICAgICAgICBoZWlnaHQ6IHVuc2V0O1xuXG4gICAgICAgIGlucHV0IHtcbiAgICAgICAgICBib3JkZXItY29sb3I6ICR7dGhlbWUuYm9yZGVyfTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBSZW1vdmUgb3BlbiBuZXcgdGFiIG9wdGlvblxuICAgICAgICAucmR3LWxpbmstbW9kYWwtdGFyZ2V0LW9wdGlvbiB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuXG4gICAgICAgIC8vIFN0eWxlIGFkZCBidXR0b25cbiAgICAgICAgLnJkdy1saW5rLW1vZGFsLWJ0biB7XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMTZweDtcbiAgICAgICAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdH07XG4gICAgICAgICAgY29sb3I6ICR7dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn07XG5cbiAgICAgICAgICAmOmRpc2FibGVkIHtcbiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuZGlzYWJsZWR9O1xuICAgICAgICAgICAgY29sb3I6IGJsYWNrO1xuICAgICAgICAgIH1cblxuICAgICAgICAgICY6YWN0aXZlLFxuICAgICAgICAgICY6aG92ZXIsXG4gICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICBib3gtc2hhZG93OiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGJvcmRlci1jb2xvcjogJHt0aGVtZS5idG5EZWZhdWx0RGFya2VyfTtcbiAgICAgICAgICAgIGNvbG9yOiAke3RoZW1lLmJ0bkhvdmVyVGV4dENvbG9yfTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAvLyBSZW1vdmUgY2FuY2VsIGJ1dHRvblxuICAgICAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgLkRyYWZ0RWRpdG9yLWVkaXRvckNvbnRhaW5lciB7XG4gICAgICBwIHtcbiAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgfVxuXG4gICAgICBoMSxcbiAgICAgIGgyLFxuICAgICAgaDMsXG4gICAgICBoNCxcbiAgICAgIGg1IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgIH1cbiAgICB9XG4gIGAsXG4gIG1heEhlaWdodDogKGhlaWdodDogbnVtYmVyKSA9PiBjc3NgXG4gICAgLmNvbnRlbnQtd3JhcHBlciB7XG4gICAgICBtYXgtaGVpZ2h0OiAke2hlaWdodH1weDtcbiAgICB9XG4gIGAsXG59XG5cbmV4cG9ydCBjb25zdCBSZWxhdGl2ZURpdiA9IHN0eWxlZC5kaXZgXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbmBcblxuZXhwb3J0IGNvbnN0IExhYmVsID0gc3R5bGVkLnNwYW5gXG4gIGxpbmUtaGVpZ2h0OiAyMnB4O1xuICBmb250LXNpemU6IDFlbTtcbiAgZm9udC13ZWlnaHQ6IDYwMDtcbiAgbWFyZ2luLWJvdHRvbTogNHB4O1xuYFxuXG5leHBvcnQgY29uc3QgRXJyb3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcblxuICAmID4gc3BhbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIGdhcDogNnB4O1xuICAgIG1hcmdpbi1sZWZ0OiAycHg7XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IENvdW50ZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogMXB4O1xuICBib3R0b206IC0yMHB4O1xuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

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

@@ -12,4 +12,5 @@ export declare const InitialFile: Story;
 export declare const Maxsize: Story;
 export declare const NoStyle: Story;
 export declare const RotateIcon: Story;
+export declare const ControlledState: Story;
 //# sourceMappingURL=FileInput.stories.d.ts.map

package/lib/core/FileInput/FileInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/FileInput/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,GAAG,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGxB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAOvC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA"}
+{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/FileInput/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,GAAG,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAGxB,CAAA;AAET,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAOvC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAA"}

package/lib/core/FileInput/FileInput.stories.js

@@ -74,4 +74,13 @@ export const RotateIcon = {
     rotateIcon: true,
     onChange: e => console.log('CB', e)
   }
+};
+export const ControlledState = {
+  name: 'Controlled state',
+  args: {
+    isControlledState: true,
+    controlledFiles: [initialFile],
+    multiple: true,
+    onChange: e => console.log('New state', e)
+  }
 };

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

@@ -10,7 +10,7 @@ interface IProps {
     invalidMessage?: string;
     /** Custom button text */
     text?: string;
-    /** Initial files */
+    /** Initial file for uncontrolled state */
     initialFiles?: File[];
     /** Button width */
     width?: string;
@@ -22,11 +22,15 @@ interface IProps {
     fileMaxsixe?: number;
     /** Removes styling of button */
     nostyle?: boolean;
-    /** Rotates icon ???deg */
+    /** Rotates icon */
     rotateIcon?: boolean;
+    /** Sets controlled file state */
+    isControlledState?: boolean;
+    /** Files if "isControlledState" is set */
+    controlledFiles?: File[];
     /** Event CB on change, returns object if not multiple is set, if not return list of type File[]  */
-    onChange: (files: any) => void;
+    onChange: (files: File | File[] | null) => void;
 }
-declare const FileInput: ({ multiple, accept, label, invalidMessage, text, initialFiles, width, hideFileList, icon, fileMaxsixe, nostyle, rotateIcon, onChange, }: IProps) => React.JSX.Element;
+declare const FileInput: ({ multiple, accept, label, invalidMessage, text, initialFiles, width, hideFileList, icon, fileMaxsixe, nostyle, rotateIcon, isControlledState, controlledFiles, onChange, }: IProps) => React.JSX.Element;
 export default FileInput;
 //# sourceMappingURL=index.d.ts.map

package/lib/core/FileInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/FileInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAqB/C,UAAU,MAAM;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oBAAoB;IACpB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oGAAoG;IACpG,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CAC/B;AAED,QAAA,MAAM,SAAS,4IAcZ,MAAM,sBAkHR,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/FileInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAqB/C,UAAU,MAAM;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,YAAY,CAAC,EAAE,IAAI,EAAE,CAAA;IACrB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sBAAsB;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,0CAA0C;IAC1C,eAAe,CAAC,EAAE,IAAI,EAAE,CAAA;IACxB,oGAAoG;IACpG,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAA;CAChD;AAED,QAAA,MAAM,SAAS,gLAgBZ,MAAM,sBA0HR,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/core/FileInput/index.js

@@ -20,16 +20,23 @@ const FileInput = ({
   fileMaxsixe,
   nostyle,
   rotateIcon,
+  isControlledState,
+  controlledFiles,
   onChange
 }) => {
-  const [files, setFiles] = useState(initialFiles);
+  const [uncontrolledFiles, setUncontrolledFiles] = useState(initialFiles);
   const [sizeError, setSizeError] = useState(false);
   const theme = useTheme();
+  const files = isControlledState ? controlledFiles || [] : uncontrolledFiles;
   const hiddenFileInput = useRef(null);
   const handleClick = () => {
     const node = hiddenFileInput.current;
     node.click();
   };
+  const handleSetFiles = files => {
+    if (isControlledState) return;
+    setUncontrolledFiles(files);
+  };
   const handleChange = e => {
     if (!e.target.files[0]) return;
     let filesFromEvent = [...Array.from(e.target.files)];
@@ -40,7 +47,7 @@ const FileInput = ({
       setSizeError(true);
     }
     if (!multiple) {
-      setFiles([filesFromEvent[0]]);
+      handleSetFiles([filesFromEvent[0]]);
       onChange(filesFromEvent[0]);
       e.target.value = null;
       return;
@@ -49,18 +56,18 @@ const FileInput = ({
     filesFromEvent.forEach(file => {
       newFiles.push(file);
     });
-    setFiles(newFiles);
+    handleSetFiles(newFiles);
     onChange(newFiles);
   };
   const handleDelete = index => {
     if (!multiple) {
-      setFiles([]);
+      handleSetFiles([]);
       onChange(null);
       return;
     }
     const arr = [...files];
     arr.splice(index, 1);
-    setFiles(arr);
+    handleSetFiles(arr);
     onChange(arr);
 
     // resets value of input to trigger on change if user removes and readds same file

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

@@ -1,16 +1,11 @@
-/// <reference types="react" />
-declare const _default;
-export default _default;
-export declare const NoImage: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const ImageWithSrc: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
-export declare const ImageWithBlob: {
-    render: () => import("react").JSX.Element;
-    name: string;
-};
+import { Meta, StoryObj } from '@storybook/react';
+import Image from '.';
+declare const meta: Meta<typeof Image>;
+export default meta;
+declare type Story = StoryObj<typeof Image>;
+export declare const ImageWithSrc: Story;
+export declare const ImageWithRadius: Story;
+export declare const ImageWithFallback: Story;
+export declare const NoImage: Story;
+export declare const ImageWithBlob: Story;
 //# sourceMappingURL=Image.stories.d.ts.map

package/lib/core/Image/Image.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/Image.stories.tsx"],"names":[],"mappings":";;AAGA,wBAGS;AAET,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,YAAY;;;CAKxB,CAAA;AAED,eAAO,MAAM,aAAa;;;CAGzB,CAAA"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,KAAK,MAAM,GAAG,CAAA;AAErB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAGpB,CAAA;AACT,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAA;AAEnC,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAA"}

package/lib/core/Image/Image.stories.js

@@ -1,26 +1,45 @@
 import Image from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Image',
   component: Image
 };
-export const NoImage = {
-  render: () => /*#__PURE__*/_jsx(Image, {
-    alt: "no image available"
-  }),
-  name: 'No image'
-};
+export default meta;
 export const ImageWithSrc = {
-  render: () => /*#__PURE__*/_jsx(Image, {
-    src: "https://random.imagecdn.app/500/500",
-    alt: "random image"
-  }),
-  name: 'Image with src'
+  name: 'Image with src',
+  args: {
+    src: 'https://random.imagecdn.app/500/500',
+    alt: 'random image',
+    width: '500px',
+    height: '500px',
+    withPlaceholder: true
+  }
+};
+export const ImageWithRadius = {
+  name: 'Image with radius',
+  args: {
+    src: 'https://random.imagecdn.app/250/250',
+    alt: 'with radius',
+    radius: '50%'
+  }
+};
+export const ImageWithFallback = {
+  name: 'Image with fallback',
+  args: {
+    src: 'invalidimageurl',
+    alt: 'with backup',
+    fallbackUrl: 'https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExejVjdnhrYnd1N3F0bHVhcXg0d2NpYTJ2eW9hOGVobjV6Z3NjOGd2YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/OXzFREtjuAX4wYHOdY/giphy.gif'
+  }
+};
+export const NoImage = {
+  name: 'No image',
+  args: {
+    alt: 'No image available'
+  }
 };
 export const ImageWithBlob = {
-  render: () => /*#__PURE__*/_jsx(Image, {
+  name: 'Image with blob',
+  args: {
     blob: undefined,
-    alt: "random blob"
-  }),
-  name: 'Image with blob'
+    alt: 'Some blob'
+  }
 };

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

@@ -13,6 +13,12 @@ interface IProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     width?: string;
     /** Max out width with automatic height in regards to the image size */
     responsive?: boolean;
+    /** Adds a radius to the image */
+    radius?: string;
+    /** Shows a grey placeholder while the image is rendering, the image needs to have a fixed/min size */
+    withPlaceholder?: boolean;
+    /** Uses this image url if the original image fails to load */
+    fallbackUrl?: string;
     /** Set object-fit css property */
     objectFit?: 'fill' | 'contain' | 'cover' | 'non' | 'scale-down' | 'initial' | 'inherit';
     /** CSS override */

package/lib/core/Image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAChE,GAAG,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;IACb,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA2B3B,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAChE,GAAG,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sGAAsG;IACtG,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;IACb,mBAAmB;IACnB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqC3B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Image/index.js

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { convertBlobToObjectUrl } from '../../utils/image';
 import styles from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
@@ -13,13 +13,19 @@ const Image = ({
   css,
   responsive,
   objectFit,
+  radius,
+  withPlaceholder,
+  fallbackUrl,
   ...restProps
 }) => {
-  let imageSrc = src || blob && convertBlobToObjectUrl(blob) || undefined;
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [imageSrc, setImageSrc] = useState(src || blob && convertBlobToObjectUrl(blob) || undefined);
   return _jsx("img", {
     src: imageSrc,
     alt: alt,
-    css: () => [height && styles.height(height), width && styles.width(width), responsive && styles.responsive, objectFit && styles.objectFit(objectFit), css && css],
+    onLoad: withPlaceholder ? () => setImageLoaded(true) : undefined,
+    onError: fallbackUrl ? () => setImageSrc(fallbackUrl) : undefined,
+    css: theme => [height && styles.height(height), width && styles.width(width), responsive && styles.responsive, objectFit && styles.objectFit(objectFit), withPlaceholder && !imageLoaded && styles.placeholder(theme), radius && styles.radius(radius), css && css],
     ...restProps
   });
 };

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

@@ -1,8 +1,11 @@
+import { Theme } from '@emotion/react';
 declare const styles: {
     height: (height: string) => import("@emotion/utils").SerializedStyles;
     width: (width: string) => import("@emotion/utils").SerializedStyles;
     objectFit: (value: string) => import("@emotion/utils").SerializedStyles;
     responsive: import("@emotion/utils").SerializedStyles;
+    placeholder: (theme: Theme) => import("@emotion/utils").SerializedStyles;
+    radius: (radius: string) => import("@emotion/utils").SerializedStyles;
 };
 export default styles;
 export { styles };

package/lib/core/Image/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;qBACO,MAAM;mBAGR,MAAM;uBAGF,MAAM;;CAO1B,CAAA;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,QAAA,MAAM,MAAM;qBACO,MAAM;mBAGR,MAAM;uBAGF,MAAM;;yBAOJ,KAAK;qBAGT,MAAM;CAGxB,CAAA;AAED,eAAe,MAAM,CAAA;AACrB,OAAO,EAAE,MAAM,EAAE,CAAA"}