colibri-ui 0.7.8 → 0.7.10

package/Icons/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var Burger = require('./Burger.js');
-var Check = require('./Check.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
 var EyeOpen = require('./EyeOpen.js');
@@ -13,8 +11,6 @@ var User = require('./User.js');
 
 
 
-exports.Burger = Burger.default;
-exports.Check = Check.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
 exports.EyeOpen = EyeOpen.default;

package/Image/index.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var generateUniqID = require('../helpers/generateUniqID.js');
+var styles = require('./styles.js');
+
+var emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+var Image = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.loading,
+    loading = _b === void 0 ? "lazy" : _b,
+    src = _a.src,
+    fallbackSrc = _a.fallbackSrc,
+    onClick = _a.onClick,
+    srcSet = _a.srcSet,
+    sizes = _a.sizes,
+    ariaLabel = _a.ariaLabel,
+    _c = _a.sources,
+    sources = _c === void 0 ? [] : _c,
+    testId = _a["data-testid"],
+    _d = _a.alt,
+    alt = _d === void 0 ? src : _d,
+    width = _a.width,
+    height = _a.height,
+    props = tslib.__rest(_a, ["className", "loading", "src", "fallbackSrc", "onClick", "srcSet", "sizes", "ariaLabel", "sources", "data-testid", "alt", "width", "height"]);
+  var _e = react.useState(false),
+    isFailed = _e[0],
+    setFailed = _e[1];
+  var imageSrc = src || emptyImage;
+  var imageSrcSet = srcSet;
+  var sizeAttrs = {};
+  if (width !== undefined) {
+    sizeAttrs.width = width;
+  }
+  if (height !== undefined) {
+    sizeAttrs.height = height;
+  }
+  var handleError = react.useCallback(function () {
+    setFailed(true);
+  }, []);
+  return jsxRuntime.jsxs(styles.BasePicture, {
+    "data-testid": testId,
+    ref: ref,
+    children: [!!sources.length && sources.map(function (source, index) {
+      return jsxRuntime.jsx("source", tslib.__assign({}, source), generateUniqID.default(index));
+    }), jsxRuntime.jsx("img", tslib.__assign({
+      alt: alt,
+      style: sizeAttrs,
+      className: className,
+      loading: loading,
+      "aria-hidden": ariaLabel ? "false" : "true",
+      "aria-label": ariaLabel,
+      onClick: onClick,
+      onError: handleError,
+      src: isFailed && fallbackSrc ? fallbackSrc : imageSrc,
+      srcSet: imageSrcSet,
+      sizes: sizes
+    }, props))]
+  });
+});
+
+exports.default = Image;

package/Image/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Image/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Image/styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var BasePicture = /*#__PURE__*/_styled__default.default("picture", process.env.NODE_ENV === "production" ? {
+  target: "e17t3ew60"
+} : {
+  target: "e17t3ew60",
+  label: "BasePicture"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  img {\n    width: 100%;\n    height: 100%;\n\n    visibility: visible;\n\n    font: 0/0 a;\n\n    border: 0;\n\n    object-fit: cover;\n    text-indent: -100rem;\n\n    :-moz-broken {\n      opacity: 0;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlUGljdHVyZSA9IHN0eWxlZC5waWN0dXJlKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdKSkpO1xudmFyIHRlbXBsYXRlT2JqZWN0XzE7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n\n  img {\n    width: 100%;\n    height: 100%;\n\n    visibility: visible;\n\n    font: 0/0 a;\n\n    border: 0;\n\n    object-fit: cover;\n    text-indent: -100rem;\n\n    :-moz-broken {\n      opacity: 0;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFeUIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlUGljdHVyZSA9IHN0eWxlZC5waWN0dXJlKHRlbXBsYXRlT2JqZWN0XzEgfHwgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gIHRvcDogMDtcXG4gIGxlZnQ6IDA7XFxuICB3aWR0aDogMTAwJTtcXG4gIGhlaWdodDogMTAwJTtcXG5cXG4gIGltZyB7XFxuICAgIHdpZHRoOiAxMDAlO1xcbiAgICBoZWlnaHQ6IDEwMCU7XFxuXFxuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XFxuXFxuICAgIGZvbnQ6IDAvMCBhO1xcblxcbiAgICBib3JkZXI6IDA7XFxuXFxuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xcbiAgICB0ZXh0LWluZGVudDogLTEwMHJlbTtcXG5cXG4gICAgOi1tb3otYnJva2VuIHtcXG4gICAgICBvcGFjaXR5OiAwO1xcbiAgICB9XFxuICB9XFxuXCJdKSkpO1xudmFyIHRlbXBsYXRlT2JqZWN0XzE7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZXMuanMubWFwIl19 */")])));
+var templateObject_1;
+
+exports.BasePicture = BasePicture;

package/Input/index.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var index = require('../base/FormField/index.js');
+var index$1 = require('../base/InputRoot/index.js');
+var styles = require('../base/InputRoot/styles.js');
+
+var Input = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    label = _a.label,
+    hint = _a.hint,
+    error = _a.error,
+    onChange = _a.onChange,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "m" : _c,
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
+  var onChangeHandler = function onChangeHandler(e) {
+    if (onChange) onChange(e, e.target.value);
+  };
+  return jsxRuntime.jsx(index.default, {
+    className: className,
+    label: label,
+    hint: hint,
+    error: error,
+    children: jsxRuntime.jsx(index$1.default, {
+      ref: ref,
+      startIcon: startIcon,
+      endIcon: endIcon,
+      variant: variant,
+      size: size,
+      disabled: !!props.disabled,
+      error: error,
+      children: jsxRuntime.jsx(styles.BaseInput, tslib.__assign({
+        as: "input",
+        onChange: onChangeHandler,
+        type: "text"
+      }, props))
+    })
+  });
+});
+
+exports.default = Input;

package/Input/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Input/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -1,5 +1,7 @@
 # Colibri UI
 
+![npm version](https://img.shields.io/npm/v/colibri-ui.svg?style=flat)
+
 React UI components library.
 
 ## Demo

package/Skeleton/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('./styles.js');
+
+var SkeletonRect = function SkeletonRect(_a) {
+  var className = _a.className,
+    width = _a.width,
+    height = _a.height,
+    borderRadius = _a.borderRadius;
+  return jsxRuntime.jsx(styles.StyledRect, {
+    className: className,
+    style: {
+      width: width,
+      height: height,
+      borderRadius: borderRadius
+    }
+  });
+};
+var SkeletonText = function SkeletonText(_a) {
+  var className = _a.className,
+    width = _a.width,
+    size = _a.size;
+  return jsxRuntime.jsx(styles.StyledText, {
+    className: className,
+    style: {
+      width: width,
+      height: size
+    }
+  });
+};
+
+exports.SkeletonRect = SkeletonRect;
+exports.SkeletonText = SkeletonText;

package/Skeleton/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Skeleton/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Skeleton/styles.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var StyledRect = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1v889w61"
+} : {
+  target: "e1v889w61",
+  label: "StyledRect"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  background-color: ", ";\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  background-color: ", ";\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var theme = _a.theme;
+  return theme.palette.BG_2;
+});
+var StyledText = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "e1v889w60"
+} : {
+  target: "e1v889w60",
+  label: "StyledText"
+})(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  height: 12px;\n\n  border-radius: 6px;\n  background-color: ", ";\n\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")], ["\n  height: 12px;\n\n  border-radius: 6px;\n  background-color: ", ";\n\n  animation: skeleton-loading 1.5s ease-in-out infinite;\n\n  @keyframes skeleton-loading {\n    0% {\n      opacity: 1;\n    }\n\n    50% {\n      opacity: 0.4;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNd0IiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBTdHlsZWRSZWN0ID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBiYWNrZ3JvdW5kLWNvbG9yOiBcIiwgXCI7XFxuICBhbmltYXRpb246IHNrZWxldG9uLWxvYWRpbmcgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZTtcXG5cXG4gIEBrZXlmcmFtZXMgc2tlbGV0b24tbG9hZGluZyB7XFxuICAgIDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuXFxuICAgIDUwJSB7XFxuICAgICAgb3BhY2l0eTogMC40O1xcbiAgICB9XFxuXFxuICAgIDEwMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG4gIH1cXG5cIl0sIFtcIlxcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdKSksIGZ1bmN0aW9uIChfYSkge1xuICAgIHZhciB0aGVtZSA9IF9hLnRoZW1lO1xuICAgIHJldHVybiB0aGVtZS5wYWxldHRlLkJHXzI7XG59KTtcbmV4cG9ydCB2YXIgU3R5bGVkVGV4dCA9IHN0eWxlZC5kaXYodGVtcGxhdGVPYmplY3RfMiB8fCAodGVtcGxhdGVPYmplY3RfMiA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFtcIlxcbiAgaGVpZ2h0OiAxMnB4O1xcblxcbiAgYm9yZGVyLXJhZGl1czogNnB4O1xcbiAgYmFja2dyb3VuZC1jb2xvcjogXCIsIFwiO1xcblxcbiAgYW5pbWF0aW9uOiBza2VsZXRvbi1sb2FkaW5nIDEuNXMgZWFzZS1pbi1vdXQgaW5maW5pdGU7XFxuXFxuICBAa2V5ZnJhbWVzIHNrZWxldG9uLWxvYWRpbmcge1xcbiAgICAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcblxcbiAgICA1MCUge1xcbiAgICAgIG9wYWNpdHk6IDAuNDtcXG4gICAgfVxcblxcbiAgICAxMDAlIHtcXG4gICAgICBvcGFjaXR5OiAxO1xcbiAgICB9XFxuICB9XFxuXCJdLCBbXCJcXG4gIGhlaWdodDogMTJweDtcXG5cXG4gIGJvcmRlci1yYWRpdXM6IDZweDtcXG4gIGJhY2tncm91bmQtY29sb3I6IFwiLCBcIjtcXG5cXG4gIGFuaW1hdGlvbjogc2tlbGV0b24tbG9hZGluZyAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xcblxcbiAgQGtleWZyYW1lcyBza2VsZXRvbi1sb2FkaW5nIHtcXG4gICAgMCUge1xcbiAgICAgIG9wYWNpdHk6IDE7XFxuICAgIH1cXG5cXG4gICAgNTAlIHtcXG4gICAgICBvcGFjaXR5OiAwLjQ7XFxuICAgIH1cXG5cXG4gICAgMTAwJSB7XFxuICAgICAgb3BhY2l0eTogMTtcXG4gICAgfVxcbiAgfVxcblwiXSkpLCBmdW5jdGlvbiAoX2EpIHtcbiAgICB2YXIgdGhlbWUgPSBfYS50aGVtZTtcbiAgICByZXR1cm4gdGhlbWUucGFsZXR0ZS5CR18yO1xufSk7XG52YXIgdGVtcGxhdGVPYmplY3RfMSwgdGVtcGxhdGVPYmplY3RfMjtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlcy5qcy5tYXAiXX0= */")])), function (_a) {
+  var theme = _a.theme;
+  return theme.palette.BG_2;
+});
+var templateObject_1, templateObject_2;
+
+exports.StyledRect = StyledRect;
+exports.StyledText = StyledText;

package/Theme/themes/buenos_aires.js

@@ -15,12 +15,12 @@ var ButtonThemeBA = {
       backgroundColor: color.Color.PRIMARY_BA_4,
       borderColor: color.Color.PRIMARY_BA_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_BA_5,
       borderColor: color.Color.PRIMARY_BA_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_BA_5,
       borderColor: color.Color.PRIMARY_BA_5
@@ -42,12 +42,12 @@ var ButtonThemeBA = {
       backgroundColor: color.Color.SECONDARY_BA_4,
       borderColor: color.Color.SECONDARY_BA_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_BA_5,
       borderColor: color.Color.SECONDARY_BA_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_BA_5,
       borderColor: color.Color.SECONDARY_BA_5
@@ -69,7 +69,7 @@ var ButtonThemeBA = {
       backgroundColor: color.Color.WHITE,
       borderColor: color.Color.WHITE
     },
-    hover: {
+    hovered: {
       color: color.Color.TRETIARY_BA_5,
       backgroundColor: color.Color.TRETIARY_BA_2,
       borderColor: color.Color.TRETIARY_BA_2
@@ -86,15 +86,52 @@ var ButtonThemeBA = {
     }
   }
 };
+var InputThemeBA = {
+  placeholder: {
+    color: color.Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: color.Color.BG_3
+    },
+    hovered: {
+      borderColor: color.Color.PRIMARY_BA_3,
+      boxShadow: "0px 0px 0px 2px ".concat(color.Color.PRIMARY_BA_2)
+    },
+    focused: {
+      borderColor: color.Color.PRIMARY_BA_4
+    },
+    disabled: {
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: color.Color.TRETIARY_2,
+        borderColor: color.Color.ALERT
+      },
+      hovered: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(color.Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT
+      }
+    }
+  }
+};
 var CheckboxThemeBA = {
   primary: {
     normal: {
       backgroundColor: color.Color.PRIMARY_BA_4
     },
-    hover: {
+    hovered: {
       backgroundColor: color.Color.PRIMARY_BA_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_BA_1)
     },
     checked: {
@@ -116,6 +153,9 @@ var TypographyThemeBA = {
   },
   success: {
     color: color.Color.SUCCESS
+  },
+  secondary: {
+    color: color.Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -136,6 +176,7 @@ var SwitchThemeDefault = {
 var THEME_BA = {
   breakpoints: breakpoints.default,
   button: ButtonThemeBA,
+  input: InputThemeBA,
   checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
   "switch": SwitchThemeDefault,
@@ -144,6 +185,7 @@ var THEME_BA = {
 
 exports.ButtonThemeBA = ButtonThemeBA;
 exports.CheckboxThemeBA = CheckboxThemeBA;
+exports.InputThemeBA = InputThemeBA;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_BA = THEME_BA;
 exports.TypographyThemeBA = TypographyThemeBA;

package/Theme/themes/default.js

@@ -5,7 +5,6 @@ var breakpoints = require('../breakpoints.js');
 
 var ButtonThemeDefault = {
   base: {
-    color: color.Color.BLACK,
     borderRadius: "26px"
   },
   primary: {
@@ -14,12 +13,12 @@ var ButtonThemeDefault = {
       backgroundColor: color.Color.PRIMARY_4,
       borderColor: color.Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_5,
       borderColor: color.Color.PRIMARY_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.PRIMARY_5,
       borderColor: color.Color.PRIMARY_5
@@ -41,12 +40,12 @@ var ButtonThemeDefault = {
       backgroundColor: color.Color.SECONDARY_4,
       borderColor: color.Color.SECONDARY_4
     },
-    hover: {
+    hovered: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_5,
       borderColor: color.Color.SECONDARY_5
     },
-    focus: {
+    focused: {
       color: color.Color.WHITE,
       backgroundColor: color.Color.SECONDARY_5,
       borderColor: color.Color.SECONDARY_5
@@ -68,7 +67,7 @@ var ButtonThemeDefault = {
       backgroundColor: color.Color.WHITE,
       borderColor: color.Color.WHITE
     },
-    hover: {
+    hovered: {
       color: color.Color.TRETIARY_5,
       backgroundColor: color.Color.TRETIARY_2,
       borderColor: color.Color.TRETIARY_2
@@ -85,15 +84,52 @@ var ButtonThemeDefault = {
     }
   }
 };
+var InputThemeDefault = {
+  placeholder: {
+    color: color.Color.BG_2
+  },
+  primary: {
+    normal: {
+      borderColor: color.Color.BG_3
+    },
+    hovered: {
+      borderColor: color.Color.PRIMARY_3,
+      boxShadow: "0px 0px 0px 2px ".concat(color.Color.PRIMARY_2)
+    },
+    focused: {
+      borderColor: color.Color.PRIMARY_4
+    },
+    disabled: {
+      color: color.Color.BG_3,
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_3
+    },
+    error: {
+      normal: {
+        backgroundColor: color.Color.TRETIARY_2,
+        borderColor: color.Color.ALERT
+      },
+      hovered: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT,
+        boxShadow: "0px 0px 0px 2px ".concat(color.Color.TRETIARY_2)
+      },
+      focused: {
+        backgroundColor: color.Color.WHITE,
+        borderColor: color.Color.ALERT
+      }
+    }
+  }
+};
 var CheckboxThemeDefault = {
   primary: {
     normal: {
       backgroundColor: color.Color.PRIMARY_4
     },
-    hover: {
+    hovered: {
       backgroundColor: color.Color.PRIMARY_4
     },
-    focus: {
+    focused: {
       boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_1)
     },
     checked: {
@@ -115,6 +151,9 @@ var TypographyThemeDefault = {
   },
   success: {
     color: color.Color.SUCCESS
+  },
+  secondary: {
+    color: color.Color.BG_3
   }
 };
 var SwitchThemeDefault = {
@@ -135,6 +174,7 @@ var SwitchThemeDefault = {
 var THEME_DEFAULT = {
   breakpoints: breakpoints.default,
   button: ButtonThemeDefault,
+  input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
   "switch": SwitchThemeDefault,
@@ -143,6 +183,7 @@ var THEME_DEFAULT = {
 
 exports.ButtonThemeDefault = ButtonThemeDefault;
 exports.CheckboxThemeDefault = CheckboxThemeDefault;
+exports.InputThemeDefault = InputThemeDefault;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_DEFAULT = THEME_DEFAULT;
 exports.TypographyThemeDefault = TypographyThemeDefault;

package/base/FormField/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var index = require('../../Typography/index.js');
+var styles = require('./styles.js');
+
+var FormField = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var label = _a.label,
+    hint = _a.hint,
+    children = _a.children,
+    error = _a.error,
+    className = _a.className;
+  return jsxRuntime.jsxs(styles.BaseContainer, {
+    className: className,
+    ref: ref,
+    children: [label && jsxRuntime.jsx(index.default, {
+      tag: "label",
+      children: label
+    }), children, hint && jsxRuntime.jsx(index.default, {
+      variant: error ? "alert" : "secondary",
+      tag: "span",
+      children: hint
+    })]
+  });
+});
+
+exports.default = FormField;

package/base/FormField/styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var _styled = require('@emotion/styled/base');
+var tslib = require('tslib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+
+var BaseContainer = /*#__PURE__*/_styled__default.default("div", process.env.NODE_ENV === "production" ? {
+  target: "ex9vcr90"
+} : {
+  target: "ex9vcr90",
+  label: "BaseContainer"
+})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSwgW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSkpKTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFMkIiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tIFwidHNsaWJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IHZhciBCYXNlQ29udGFpbmVyID0gc3R5bGVkLmRpdih0ZW1wbGF0ZU9iamVjdF8xIHx8ICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSwgW1wiXFxuICBkaXNwbGF5OiBmbGV4O1xcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcXG4gIGdhcDogOHB4O1xcblwiXSkpKTtcbnZhciB0ZW1wbGF0ZU9iamVjdF8xO1xuLy8jIHNvdXJjZU1hcHBpbmdVUkw9c3R5bGVzLmpzLm1hcCJdfQ== */")])));
+var templateObject_1;
+
+exports.BaseContainer = BaseContainer;

package/base/InputRoot/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var styles = require('./styles.js');
+
+var InputRoot = /*#__PURE__*/react.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    startIcon = _a.startIcon,
+    endIcon = _a.endIcon,
+    children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    disabled = _a.disabled,
+    error = _a.error,
+    size = _a.size;
+  return jsxRuntime.jsxs(styles.BaseInputRoot, {
+    ref: ref,
+    className: className,
+    variant: variant,
+    isError: error ? 1 : 0,
+    disabled: disabled,
+    size: size,
+    children: [startIcon && jsxRuntime.jsx(styles.BaseIcon, {
+      children: startIcon
+    }), children, endIcon && jsxRuntime.jsx(styles.BaseIcon, {
+      children: endIcon
+    }), disabled && jsxRuntime.jsx(styles.BaseDisableWrapper, {})]
+  });
+});
+
+exports.default = InputRoot;