@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Image/Image.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["src", "disableSkeleton", "className", "maxDelay"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import ImageSkeleton from './ImageSkeleton';
+import { transformDataSource } from './helpers';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function ImageComponent(_ref) {
+  var src = _ref.src,
+      _ref$disableSkeleton = _ref.disableSkeleton,
+      disableSkeleton = _ref$disableSkeleton === void 0 ? false : _ref$disableSkeleton,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$maxDelay = _ref.maxDelay,
+      maxDelay = _ref$maxDelay === void 0 ? 3000 : _ref$maxDelay,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES,
+      getScaleProps = _useScale.getScaleProps;
+
+  var width = getScaleProps(['width', 'w']);
+  var height = getScaleProps(['height', 'h']);
+  var showAnimation = !disableSkeleton && width && height;
+  var theme = useTheme();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = useState(true),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showSkeleton = _useState4[0],
+      setShowSkeleton = _useState4[1];
+
+  var imageRef = useRef(null);
+  var url = useMemo(function () {
+    return transformDataSource(src);
+  }, [src]);
+
+  var imageLoaded = function imageLoaded() {
+    if (!showAnimation) return;
+    setLoading(false);
+  };
+
+  useEffect(function () {
+    if (!showAnimation) return;
+    if (!imageRef.current) return;
+
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  }, [showAnimation]);
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      if (showAnimation) {
+        setShowSkeleton(false);
+      }
+
+      clearTimeout(timer);
+    }, maxDelay);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [loading, maxDelay, showAnimation]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2756333380", [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (useClasses('image', className) || "")
+  }, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(ImageSkeleton, {
+    opacity: loading ? 1 : 0
+  }), /*#__PURE__*/React.createElement("img", _extends({
+    ref: imageRef,
+    onLoad: imageLoaded,
+    src: url
+  }, props, {
+    className: _JSXStyle.dynamic([["2756333380", [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]]]) + " " + (props && props.className != null && props.className || "")
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2756333380",
+    dynamic: [theme.layout.radius, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.width(1, 'auto'), SCALES.height(1, 'auto')]
+  }, ".image.__jsx-style-dynamic-selector{position:relative;border-radius:".concat(theme.layout.radius, ";overflow:hidden;max-width:100%;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}img.__jsx-style-dynamic-selector{width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";object-fit:scale-down;display:inline-block;}")));
+}
+
+ImageComponent.displayName = 'BolioUIImage';
+var Image = withScale(ImageComponent);
+export default Image;

package/esm/Image/ImageBrowser.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Props as LinkProps } from "../Link/Link";
+export declare type ImageAnchorProps = Omit<React.AnchorHTMLAttributes<any>, keyof LinkProps>;
+interface Props {
+    title?: string;
+    url?: string;
+    showFullLink?: boolean;
+    invert?: boolean;
+    anchorProps?: ImageAnchorProps;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type ImageBrowserProps = Props & NativeAttrs;
+declare const ImageBrowser: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLDivElement> & import("../use-scale").ScaleProps, "slot" | "style" | "children" | keyof import("../use-scale").ScaleProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | keyof Props> & React.RefAttributes<HTMLDivElement>>;
+export default ImageBrowser;

package/esm/Image/ImageBrowser.js

@@ -0,0 +1,86 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import Link from '../Link';
+import useTheme from '../use-theme';
+import ImageBrowserHttpsIcon from './ImageBrowserHttpsIcon';
+import { getBrowserColors } from './styles';
+import { getHostFromUrl } from './helpers';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getTitle = function getTitle(title, colors) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["524099755", [colors.titleColor]]]) + " " + "title"
+  }, title, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "524099755",
+    dynamic: [colors.titleColor]
+  }, ".title.__jsx-style-dynamic-selector{color:".concat(colors.titleColor, ";font-size:0.75em;}")));
+};
+
+var getAddressInput = function getAddressInput(url, showFullLink, colors, anchorProps) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "address-input"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3718009574", [colors.inputBgColor]]]) + " " + "https"
+  }, /*#__PURE__*/React.createElement(ImageBrowserHttpsIcon, null)), /*#__PURE__*/React.createElement(Link, _extends({
+    href: url,
+    title: url,
+    target: "_blank"
+  }, anchorProps), showFullLink ? url : getHostFromUrl(url)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3718009574",
+    dynamic: [colors.inputBgColor]
+  }, ".address-input.__jsx-style-dynamic-selector{height:1.75em;max-width:60%;min-width:40%;background-color:".concat(colors.inputBgColor, ";color:inherit;border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0 10px;overflow:hidden;position:relative;}.address-input.__jsx-style-dynamic-selector *{font-size:0.75em;color:inherit;}.address-input.__jsx-style-dynamic-selector a{max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;color:inherit;}.https.__jsx-style-dynamic-selector{width:0.75em;height:0.75em;font-size:1em;margin-right:0.31em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;color:inherit;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
+};
+
+var ImageBrowserComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var url = _ref.url,
+      title = _ref.title,
+      children = _ref.children,
+      _ref$showFullLink = _ref.showFullLink,
+      showFullLink = _ref$showFullLink === void 0 ? false : _ref$showFullLink,
+      _ref$invert = _ref.invert,
+      invert = _ref$invert === void 0 ? false : _ref$invert,
+      _ref$anchorProps = _ref.anchorProps,
+      anchorProps = _ref$anchorProps === void 0 ? {} : _ref$anchorProps,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var colors = useMemo(function () {
+    return getBrowserColors(invert, theme.palette);
+  }, [invert, theme.palette]);
+  var input = useMemo(function () {
+    if (url) return getAddressInput(url, showFullLink, colors, anchorProps);
+    if (title) return getTitle(title, colors);
+    return null;
+  }, [url, showFullLink, title, colors, anchorProps]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || useClasses('browser', className) || "")
+  }), /*#__PURE__*/React.createElement("header", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "traffic"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "close"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "mini"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2129234839", [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "full"
+  })), input), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2129234839",
+    dynamic: [theme.expressiveness.shadowLarge, theme.layout.radius, SCALES.font(1), SCALES.width(1, 'max-content'), SCALES.height(1, 'auto'), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]
+  }, ".browser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:".concat(theme.expressiveness.shadowLarge, ";max-width:100%;border-radius:").concat(theme.layout.radius, ";overflow:hidden;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'max-content'), ";height:").concat(SCALES.height(1, 'auto'), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";}.browser.__jsx-style-dynamic-selector .image{border-top-left-radius:0;border-top-right-radius:0;}header.__jsx-style-dynamic-selector{height:2.5em;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;color:").concat(colors.color, ";background-color:").concat(colors.barBgColor, ";border-bottom:1px solid ").concat(colors.borderColor, ";}.traffic.__jsx-style-dynamic-selector{width:auto;position:absolute;left:").concat(theme.layout.gapHalf, ";top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);bottom:0;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75em;height:0.75em;max-width:20px;max-height:20px;display:inline-block;margin-right:0.5em;}.close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.full.__jsx-style-dynamic-selector{background-color:#27c93f;}")));
+});
+ImageBrowserComponent.displayName = 'BolioUIImageBrowser';
+var ImageBrowser = withScale(ImageBrowserComponent);
+export default ImageBrowser;

package/esm/Image/ImageBrowserHttpsIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MemoImageBrowserHttpsIcon: React.MemoExoticComponent<() => JSX.Element>;
+export default MemoImageBrowserHttpsIcon;

package/esm/Image/ImageSkeleton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    opacity?: number;
+}
+export declare type ImageSkeletonProps = Props;
+declare const ImageSkeleton: React.FC<ImageSkeletonProps>;
+export default ImageSkeleton;

package/esm/Image/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const transformDataSource: (src: string) => string;
+export declare const getHostFromUrl: (url: string) => string;

package/esm/Image/index.d.ts

@@ -0,0 +1,9 @@
+import Image from "./Image";
+import ImageBrowser from "./ImageBrowser";
+export declare type ImageComponentType = typeof Image & {
+    Browser: typeof ImageBrowser;
+};
+export type { ImageProps } from "./Image";
+export type { ImageBrowserProps, ImageAnchorProps } from "./ImageBrowser";
+declare const _default: ImageComponentType;
+export default _default;

package/esm/Image/index.js

@@ -0,0 +1,4 @@
+import Image from './Image';
+import ImageBrowser from './ImageBrowser';
+Image.Browser = ImageBrowser;
+export default Image;

package/esm/Image/stories.js

@@ -0,0 +1,73 @@
+import Image from '.';
+import Display from '../Display';
+import Code from '../Code';
+import Grid from '../Grid';
+export default {
+  title: 'Data Display/Image',
+  component: Image
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image, {
+    width: "280px",
+    height: "160px",
+    src: "https://bolio-ui.com/logo-white.jpg"
+  })));
+};
+export var Skeleton = function Skeleton() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image, {
+    width: "280px",
+    height: "160px",
+    src: "https://bolio-ui.com/logo-white.jpg"
+  })));
+};
+export var Browser = function Browser() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image.Browser, {
+    url: "https://bolio-ui.com.br/",
+    anchorProps: {
+      rel: 'nofollow'
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    width: "450px",
+    height: "300px",
+    src: "https://bolio-ui.com/logo-white.jpg"
+  }))));
+};
+export var BrowserInvert = function BrowserInvert() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image.Browser, {
+    url: "https://bolio-ui.com.br/",
+    invert: true
+  }, /*#__PURE__*/React.createElement(Image, {
+    width: "450px",
+    height: "300px",
+    src: "https://bolio-ui.com/logo-white.jpg"
+  }))));
+};
+export var Compose = function Compose() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Display, {
+    shadow: true,
+    caption: /*#__PURE__*/React.createElement("p", null, "Reduce the possibility of page rendering by setting", ' ', /*#__PURE__*/React.createElement(Code, null, "height"))
+  }, /*#__PURE__*/React.createElement(Image, {
+    height: "250px",
+    src: "https://bolio-ui.com/logo-white.jpg"
+  }))));
+};
+export var SVG = function SVG() {
+  var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30px\" height=\"30px\" viewBox=\"0 0 30 30\" fill=\"none\">\n    <path d=\"M13.5 3.5H14V3.29289L13.8536 3.14645L13.5 3.5ZM10.5 0.5L10.8536 0.146447L10.7071 0H10.5V0.5ZM2.5 6.5V6H2V6.5H2.5ZM2.5 8.5H2V9H2.5V8.5ZM4.5 8.5H5V8H4.5V8.5ZM4.5 10.5V11H5V10.5H4.5ZM6.5 9.5H6V9.70711L6.14645 9.85355L6.5 9.5ZM7.5 10.5L7.14645 10.8536L7.5 11.2071L7.85355 10.8536L7.5 10.5ZM8.5 9.5L8.85355 9.85355L9 9.70711V9.5H8.5ZM10.5 6.5V6H10V6.5H10.5ZM10.5 10.5H10V11H10.5V10.5ZM12.5 10.5V11H13V10.5H12.5ZM2 5V1.5H1V5H2ZM13 3.5V5H14V3.5H13ZM2.5 1H10.5V0H2.5V1ZM10.1464 0.853553L13.1464 3.85355L13.8536 3.14645L10.8536 0.146447L10.1464 0.853553ZM2 1.5C2 1.22386 2.22386 1 2.5 1V0C1.67157 0 1 0.671573 1 1.5H2ZM1 12V13.5H2V12H1ZM2.5 15H12.5V14H2.5V15ZM14 13.5V12H13V13.5H14ZM12.5 15C13.3284 15 14 14.3284 14 13.5H13C13 13.7761 12.7761 14 12.5 14V15ZM1 13.5C1 14.3284 1.67157 15 2.5 15V14C2.22386 14 2 13.7761 2 13.5H1ZM5 6H2.5V7H5V6ZM2 6.5V8.5H3V6.5H2ZM2.5 9H4.5V8H2.5V9ZM4 8.5V10.5H5V8.5H4ZM4.5 10H2V11H4.5V10ZM6 6V9.5H7V6H6ZM6.14645 9.85355L7.14645 10.8536L7.85355 10.1464L6.85355 9.14645L6.14645 9.85355ZM7.85355 10.8536L8.85355 9.85355L8.14645 9.14645L7.14645 10.1464L7.85355 10.8536ZM9 9.5V6H8V9.5H9ZM13 6H10.5V7H13V6ZM10 6.5V10.5H11V6.5H10ZM10.5 11H12.5V10H10.5V11ZM13 10.5V8.5H12V10.5H13Z\" fill=\"black\"/>\n  </svg>";
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Image, {
+    width: "100px",
+    height: "50px",
+    src: svg
+  })));
+};

package/esm/Image/styles.d.ts

@@ -0,0 +1,9 @@
+import { BolioUIThemesPalette } from "../Themes/Presets";
+export declare type BrowserColors = {
+    color: string;
+    barBgColor: string;
+    inputBgColor: string;
+    borderColor: string;
+    titleColor: string;
+};
+export declare const getBrowserColors: (invert: boolean, palette: BolioUIThemesPalette) => BrowserColors;

package/esm/Input/Input.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Props } from "./InputProps";
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export declare type InputProps = Props & NativeAttrs;
+declare const Input: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<HTMLInputElement> & import("../use-scale").ScaleProps, "min" | "max" | "form" | "slot" | "style" | "title" | "pattern" | "children" | keyof import("../use-scale").ScaleProps | "list" | "src" | "alt" | "crossOrigin" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "key" | "checked" | "accept" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "required" | "size" | keyof Props> & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/esm/Input/Input.js

@@ -0,0 +1,181 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import InputLabel from './InputLabel';
+import InputBlockLabel from './InputBlockLabel';
+import InputIcon from './InputIcon';
+import InputClearIcon from './InputIconClear';
+import { getColors } from './styles';
+import { defaultProps } from './InputProps';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var simulateChangeEvent = function simulateChangeEvent(el, event) {
+  return _extends({}, event, {
+    target: el,
+    currentTarget: el
+  });
+};
+
+var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var label = _ref.label,
+      labelRight = _ref.labelRight,
+      type = _ref.type,
+      htmlType = _ref.htmlType,
+      icon = _ref.icon,
+      iconRight = _ref.iconRight,
+      iconClickable = _ref.iconClickable,
+      onIconClick = _ref.onIconClick,
+      initialValue = _ref.initialValue,
+      onChange = _ref.onChange,
+      readOnly = _ref.readOnly,
+      value = _ref.value,
+      onClearClick = _ref.onClearClick,
+      clearable = _ref.clearable,
+      className = _ref.className,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      autoComplete = _ref.autoComplete,
+      placeholder = _ref.placeholder,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      rounded = _ref.rounded,
+      backgroundColor = _ref.backgroundColor,
+      borderColor = _ref.borderColor,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var inputRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfValue = _useState2[0],
+      setSelfValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hover = _useState4[0],
+      setHover = _useState4[1];
+
+  var isControlledComponent = useMemo(function () {
+    return value !== undefined;
+  }, [value]);
+  var labelClasses = useMemo(function () {
+    return labelRight ? 'right-label' : label ? 'left-label' : '';
+  }, [label, labelRight]);
+  var iconClasses = useMemo(function () {
+    return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
+  }, [icon, iconRight]);
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      color = _useMemo.color,
+      borderColorThemed = _useMemo.borderColor,
+      hoverBorder = _useMemo.hoverBorder;
+
+  var changeHandler = function changeHandler(event) {
+    if (disabled || readOnly) return;
+    setSelfValue(event.target.value);
+    onChange && onChange(event);
+  };
+
+  var clearHandler = function clearHandler(event) {
+    setSelfValue('');
+    onClearClick && onClearClick(event);
+    /* istanbul ignore next */
+
+    if (!inputRef.current) return;
+    var changeEvent = simulateChangeEvent(inputRef.current, event);
+    changeEvent.target.value = '';
+    onChange && onChange(changeEvent);
+    inputRef.current.focus();
+  };
+
+  var focusHandler = function focusHandler(e) {
+    setHover(true);
+    onFocus && onFocus(e);
+  };
+
+  var blurHandler = function blurHandler(e) {
+    setHover(false);
+    onBlur && onBlur(e);
+  };
+
+  var iconClickHandler = function iconClickHandler(e) {
+    if (disabled) return;
+    onIconClick && onIconClick(e);
+  };
+
+  var iconProps = useMemo(function () {
+    return {
+      clickable: iconClickable,
+      onClick: iconClickHandler
+    };
+  }, [iconClickable, iconClickHandler]);
+  useEffect(function () {
+    if (isControlledComponent) {
+      setSelfValue(value);
+    }
+  }, [isControlledComponent, value]);
+  var controlledValue = isControlledComponent ? {
+    value: selfValue
+  } : {
+    defaultValue: initialValue
+  };
+
+  var inputProps = _extends({}, props, controlledValue);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
+  }, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
+      hover: hover,
+      disabled: disabled
+    }, labelClasses) || "")
+  }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
+    icon: icon
+  }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
+    type: htmlType,
+    ref: inputRef,
+    placeholder: placeholder,
+    disabled: disabled,
+    readOnly: readOnly,
+    onFocus: focusHandler,
+    onBlur: blurHandler,
+    onChange: changeHandler,
+    autoComplete: autoComplete
+  }, inputProps, {
+    className: _JSXStyle.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
+      disabled: disabled
+    }, iconClasses) || "")
+  })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
+    visible: Boolean(inputRef.current && inputRef.current.value !== ''),
+    disabled: disabled || readOnly,
+    onClick: clearHandler
+  }), iconRight && /*#__PURE__*/React.createElement(InputIcon, _extends({
+    icon: iconRight
+  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
+    isRight: true
+  }, labelRight)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2780775675",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : borderColorThemed, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+});
+InputComponent.defaultProps = defaultProps;
+InputComponent.displayName = 'BolioUIInput';
+var Input = withScale(InputComponent);
+export default Input;

package/esm/Input/InputBlockLabel.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+export interface InputBlockLabelLabel {
+    children?: ReactNode;
+}
+declare function InputBlockLabelComponent({ children }: InputBlockLabelLabel): JSX.Element;
+declare namespace InputBlockLabelComponent {
+    var displayName: string;
+}
+declare const InputBlockLabel: React.MemoExoticComponent<typeof InputBlockLabelComponent>;
+export default InputBlockLabel;

package/esm/Input/InputIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface InputIconProps {
+    icon?: React.ReactNode;
+    clickable?: boolean;
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare function InputIconComponent({ icon, clickable, onClick }: InputIconProps): JSX.Element;
+declare namespace InputIconComponent {
+    var displayName: string;
+}
+declare const InputIcon: React.MemoExoticComponent<typeof InputIconComponent>;
+export default InputIcon;

package/esm/Input/InputIconClear.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    visible: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    disabled?: boolean;
+}
+declare function InputIconClear({ onClick, disabled, visible }: Props): JSX.Element;
+declare const MemoInputIconClear: React.MemoExoticComponent<typeof InputIconClear>;
+export default MemoInputIconClear;

package/esm/Input/InputLabel.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface InputLabel {
+    isRight?: boolean;
+    children?: ReactNode;
+}
+declare function InputLabel({ children, isRight }: InputLabel): JSX.Element;
+declare const MemoInputLabel: React.MemoExoticComponent<typeof InputLabel>;
+export default MemoInputLabel;

package/esm/Input/InputProps.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type InputTypes = NormalTypes;
+export interface Props {
+    value?: string;
+    initialValue?: string;
+    placeholder?: string;
+    type?: InputTypes;
+    htmlType?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    label?: string;
+    labelRight?: string;
+    icon?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    iconClickable?: boolean;
+    className?: string;
+    clearable?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    autoComplete?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    rounded?: boolean;
+}
+export declare const defaultProps: {
+    disabled: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    iconClickable: boolean;
+    type: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default";
+    htmlType: string;
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+};