@bolio-ui/core 1.0.0

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 './image.skeleton';
+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/image.skeleton.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["opacity"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var ImageSkeleton = /*#__PURE__*/React.memo(function (_ref) {
+  var _ref$opacity = _ref.opacity,
+      opacity = _ref$opacity === void 0 ? 0.5 : _ref$opacity,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2946022605", [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]]]) + " " + (props && props.className != null && props.className || "skeleton")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2946022605",
+    dynamic: [theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_2, theme.palette.accents_1, opacity]
+  }, ".skeleton.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:linear-gradient( 270deg, ".concat(theme.palette.accents_1, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_2, ", ").concat(theme.palette.accents_1, " );background-size:400% 100%;-webkit-animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;animation:loading-__jsx-style-dynamic-selector 3s ease-in-out infinite;opacity:").concat(opacity, ";-webkit-transition:opacity 300ms ease-out;transition:opacity 300ms ease-out;}@-webkit-keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}@keyframes loading-__jsx-style-dynamic-selector{0%{background-position:200% 0;}to{background-position:-200% 0;}}")));
+});
+ImageSkeleton.displayName = 'BolioUIImageSkeleton';
+export default ImageSkeleton;

package/esm/image/index.js

@@ -0,0 +1,4 @@
+import Image from './image';
+import ImageBrowser from './image-browser';
+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.js

@@ -0,0 +1,15 @@
+export var getBrowserColors = function getBrowserColors(invert, palette) {
+  return invert ? {
+    color: palette.background,
+    barBgColor: palette.foreground,
+    inputBgColor: palette.accents_8,
+    borderColor: palette.accents_7,
+    titleColor: palette.accents_2
+  } : {
+    color: palette.foreground,
+    barBgColor: palette.background,
+    inputBgColor: palette.accents_1,
+    borderColor: palette.border,
+    titleColor: palette.accents_5
+  };
+};

package/esm/index.js

@@ -0,0 +1,69 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+/// <reference types="styled-jsx" />
+export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
+export { default as BolioUIProvider } from './bolio-ui-provider';
+export { default as Breadcrumbs } from './breadcrumbs';
+export { default as Button } from './button';
+export { default as ButtonDropdown } from './button-dropdown';
+export { default as ButtonGroup } from './button-group';
+export { default as Capacity } from './capacity';
+export { default as Card } from './card';
+export { default as Checkbox } from './checkbox';
+export { default as Code } from './code';
+export { default as Col } from './col';
+export { default as Collapse } from './collapse';
+export { default as Container } from './container';
+export { default as Description } from './description';
+export { default as Display } from './display';
+export { default as Divider } from './divider';
+export { default as Dot } from './dot';
+export { default as Drawer } from './drawer';
+export { default as Fieldset } from './fieldset';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export { default as Input } from './input';
+export { default as Keyboard } from './keyboard';
+export { default as Link } from './link';
+export { default as Loading } from './loading';
+export { default as Modal } from './modal';
+export { default as Note } from './note';
+export { default as Page } from './page';
+export { default as Pagination } from './pagination';
+export { default as Popover } from './popover';
+export { default as Progress } from './progress';
+export { default as Radio } from './radio';
+export { default as Rating } from './rating';
+export { default as Row } from './row';
+export { default as Section } from './section';
+export { default as Select } from './select';
+export { default as Slider } from './slider';
+export { default as Snippet } from './snippet';
+export { default as Spacer } from './spacer';
+export { default as Spinner } from './spinner';
+export { default as Tabs } from './tabs';
+export { default as Tag } from './tag';
+export { default as Text } from './text';
+export { default as Textarea } from './textarea';
+export { default as Themes } from './themes';
+export { default as Toggle } from './toggle';
+export { default as Tooltip } from './tooltip';
+export { default as useAllThemes } from './use-all-themes';
+export { default as useToasts } from './use-toasts';
+export { default as useBodyScroll } from './use-body-scroll';
+export { default as useClipboard } from './use-clipboard';
+export { default as useMediaQuery } from './use-media-query';
+export { default as useKeyboard, KeyMod, KeyCode } from './use-keyboard';
+export { default as useInput } from './use-input';
+export { default as useModal } from './use-modal';
+export { default as useTabs } from './use-tabs';
+export { default as useClickAway } from './use-click-away';
+export { default as useCurrentState } from './use-current-state';
+export { default as CssBaseline } from './css-baseline';
+export { default as useTheme } from './use-theme';
+export { default as useClasses } from './use-classes';
+export { default as useScale } from './use-scale';
+export { withScale, ScalePropKeys, ScaleContext } from './use-scale';
+export { useRect } from './utils/layouts';
+export { default as Highlight } from './shared/highlight';

package/esm/input/index.js

@@ -0,0 +1,6 @@
+import Input from './input';
+import Textarea from '../textarea';
+import InputPassword from './password';
+Input.Textarea = Textarea;
+Input.Password = InputPassword;
+export default Input;

package/esm/input/input-block-label.js

@@ -0,0 +1,18 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+
+function InputBlockLabelComponent(_ref) {
+  var children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("label", {
+    className: _JSXStyle.dynamic([["1278828862", [theme.palette.accents_6]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1278828862",
+    dynamic: [theme.palette.accents_6]
+  }, "label.__jsx-style-dynamic-selector{display:block;font-weight:normal;color:".concat(theme.palette.accents_6, ";padding:0 0 0 1px;margin-bottom:0.5em;font-size:1em;line-height:1.5;}label.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}label.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
+}
+
+InputBlockLabelComponent.displayName = 'BolioUIInputBlockLabel';
+var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
+export default InputBlockLabel;

package/esm/input/input-icon-clear.js

@@ -0,0 +1,47 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useClasses from '../use-classes';
+
+function InputIconClear(_ref) {
+  var onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      visible = _ref.visible;
+  var theme = useTheme();
+  var classes = useClasses('clear-icon', {
+    visible: visible
+  });
+
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 6L6 18",
+    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 6l12 12",
+    className: _JSXStyle.dynamic([["2817842826", [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2817842826",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', theme.palette.accents_3, disabled ? theme.palette.accents_3 : theme.palette.foreground]
+  }, ".clear-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-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;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;margin:0;padding:0;color:").concat(theme.palette.accents_3, ";visibility:hidden;opacity:0;}.visible.__jsx-style-dynamic-selector{visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(disabled ? theme.palette.accents_3 : theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+}
+
+var MemoInputIconClear = /*#__PURE__*/React.memo(InputIconClear);
+export default MemoInputIconClear;

package/esm/input/input-icon.js

@@ -0,0 +1,19 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+
+function InputIconComponent(_ref) {
+  var icon = _ref.icon,
+      clickable = _ref.clickable,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement("span", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["4247656379", [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']]]) + " " + "input-icon"
+  }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4247656379",
+    dynamic: [clickable ? 'pointer' : 'default', clickable ? 'auto' : 'none']
+  }, ".input-icon.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(var(--input-height) - 2px);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:100%;-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;margin:0;padding:0;line-height:1;position:relative;cursor:".concat(clickable ? 'pointer' : 'default', ";pointer-events:").concat(clickable ? 'auto' : 'none', ";}.input-icon.__jsx-style-dynamic-selector svg{width:calc(var(--input-height) - 2px);height:calc(var(--input-height) - 2px);-webkit-transform:scale(0.44);-ms-transform:scale(0.44);transform:scale(0.44);}")));
+}
+
+InputIconComponent.displayName = 'BolioUIInputIcon';
+var InputIcon = /*#__PURE__*/React.memo(InputIconComponent);
+export default InputIcon;

package/esm/input/input-label.js

@@ -0,0 +1,18 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+
+function InputLabel(_ref) {
+  var children = _ref.children,
+      isRight = _ref.isRight;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["839392656", [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border]]]) + " " + ((isRight ? 'right' : '') || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "839392656",
+    dynamic: [theme.layout.gapHalf, theme.palette.accents_4, theme.palette.accents_1, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border]
+  }, "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:initial;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin:0;padding:0 ".concat(theme.layout.gapHalf, ";color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_1, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-top:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";font-size:inherit;line-height:1;}span.right.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";border-left:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";}")));
+}
+
+var MemoInputLabel = /*#__PURE__*/React.memo(InputLabel);
+export default MemoInputLabel;

package/esm/input/input-props.js

@@ -0,0 +1,12 @@
+export var defaultProps = {
+  disabled: false,
+  readOnly: false,
+  clearable: false,
+  iconClickable: false,
+  type: 'default',
+  htmlType: 'text',
+  autoComplete: 'off',
+  className: '',
+  placeholder: '',
+  initialValue: ''
+};

package/esm/input/input.js

@@ -0,0 +1,179 @@
+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", "backgroundColor"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import InputLabel from './input-label';
+import InputBlockLabel from './input-block-label';
+import InputIcon from './input-icon';
+import InputClearIcon from './input-icon-clear';
+import { getColors } from './styles';
+import { defaultProps } from './input-props';
+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,
+      backgroundColor = _ref.backgroundColor,
+      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,
+      borderColor = _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([["341430505", [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'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_1, theme.palette.accents_2, 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([["341430505", [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'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_1, theme.palette.accents_2, 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([["341430505", [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'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_1, theme.palette.accents_2, 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([["341430505", [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'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_1, theme.palette.accents_2, 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: "341430505",
+    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'), theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_1, theme.palette.accents_2, 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(theme.layout.radius, ";-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_1, ";}.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_2, ";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;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/password-icon.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+function PasswordIcon(_ref) {
+  var visible = _ref.visible;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    style: {
+      color: 'currentColor'
+    }
+  }, !visible ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 1l22 22"
+  })));
+}
+
+var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
+export default MemoPasswordIcon;