@ntbjs/react-components 0.0.1-beta.9 → 1.1.0-beta.1

package/TextArea-52cf4c0a.js

@@ -0,0 +1,173 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var nanoid = require('nanoid');
+var styled = require('styled-components');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  top: -7px;\n  letter-spacing: 0.03em;\n  left: 8px !important;\n  opacity: 1 !important;\n"])));
+var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
+}, function (props) {
+  return props.theme.themeProp('opacity', 0.6, 0.5);
+});
+var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 13px 10px;\n  resize: vertical;\n  ", "\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n\n  ", "\n  ", "\n  ", "\n\n  &::placeholder {\n    ", "\n\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+}, function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
+}, function (props) {
+  return props.warning && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
+}, function (props) {
+  return props.theme.themeProp('opacity', 0.6, 0.5, 1);
+}, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
+});
+var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  content: \"\";\n\n  ", "\n"])), placeholderBaseStyle, function (props) {
+  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
+}, function (props) {
+  return props.hasPlaceholder && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "])), activeLabel, props.error && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('red-500')));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
+});
+var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
+var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n\n  &:focus-within {\n    ", " {\n      ", ";\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", ":not(:placeholder-shown) + ", " {\n    ", ";\n    ", "\n    // ", "\n    ", "\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
+  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n        //   color: ", " !important;\n        //\n      "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.warning && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
+});
+var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ", ";\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n      content: 'error';\n      ", "\n    "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
+});
+
+var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
+  var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      name = _ref.name,
+      label = _ref.label,
+      placeholder = _ref.placeholder,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      autoComplete = _ref.autoComplete,
+      description = _ref.description,
+      error = _ref.error,
+      warning = _ref.warning,
+      icon = _ref.icon,
+      rows = _ref.rows,
+      className = _ref.className,
+      style = _ref.style,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur"]);
+
+  var _useState = React.useState(nanoid.nanoid()),
+      _useState2 = defaultTheme._slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var hasError = React.useMemo(function () {
+    if (lodash.isBoolean(error)) {
+      return error;
+    }
+
+    return !lodash.isEmpty(error);
+  }, [error]);
+  var hasWarning = React.useMemo(function () {
+    if (lodash.isBoolean(warning)) {
+      return warning;
+    }
+
+    return !lodash.isEmpty(warning);
+  }, [warning]);
+  var descriptionText = React.useMemo(function () {
+    if (!lodash.isEmpty(error)) {
+      return error;
+    }
+
+    if (!lodash.isEmpty(warning)) {
+      return warning;
+    }
+
+    if (!lodash.isEmpty(description)) {
+      return description;
+    }
+
+    return null;
+  }, [description, error, warning]);
+  return React__default['default'].createElement(TextInput, {
+    disabled: disabled || readOnly,
+    error: hasError,
+    warning: hasWarning,
+    className: className,
+    style: style
+  }, typeof icon !== 'undefined' && React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
+    ref: forwardedRef,
+    rows: rows,
+    value: value,
+    defaultValue: defaultValue,
+    name: name,
+    placeholder: placeholder || ' ',
+    required: required,
+    disabled: disabled || readOnly,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    hasIcon: Boolean(icon),
+    error: hasError,
+    warning: hasWarning,
+    id: "text-input-".concat(uniqueId),
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), label && React__default['default'].createElement(TextInputLabel, {
+    htmlFor: "text-input-".concat(uniqueId),
+    hasPlaceholder: Boolean(placeholder),
+    hasIcon: Boolean(icon),
+    error: hasError
+  }, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
+    error: hasError
+  }, descriptionText));
+});
+TextArea.defaultProps = {
+  rows: 4
+};
+TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: defaultTheme.PropTypes.string,
+  defaultValue: defaultTheme.PropTypes.string,
+  name: defaultTheme.PropTypes.string,
+  label: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  required: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  autoComplete: defaultTheme.PropTypes.string,
+  description: defaultTheme.PropTypes.string,
+  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  icon: defaultTheme.PropTypes.element,
+  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  className: defaultTheme.PropTypes.string,
+  style: defaultTheme.PropTypes.object,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
+} : {};
+
+exports.TextArea = TextArea;

package/TextInput-a7c32f5f.js

@@ -0,0 +1,250 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var nanoid = require('nanoid');
+var styled = require('styled-components');
+var lodash = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  top: -7px;\n  letter-spacing: 0.03em;\n  left: 8px !important;\n  opacity: 1 !important;\n"])));
+var Adornment = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: initial;\n  padding: 13px 10px;\n  ", "\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  z-index: 1;\n  ", "\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem;\n\n  ", "\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+}, function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
+}, function (props) {
+  return props.isPrefix ? styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n          padding-right: 0;\n          margin-right: -3px;\n          border-right: 0;\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n        "]))) : styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n          padding-left: 0;\n          margin-left: -3px;\n          border-left: 0;\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        "])));
+}, function (props) {
+  return props.warning && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+});
+var TextInputWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-content: center;\n\n  &:focus-within {\n    ", " {\n      outline: none;\n      ", "\n    }\n  }\n"])), Adornment, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1);
+});
+var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1;\n  padding: 13px 10px;\n  ", "\n  ", "\n  border: 1px solid;\n  ", "\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank\n  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank\n\n  ", "\n  ", "\n  ", "\n\n  &::placeholder {\n    ", "\n\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+}, function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
+}, function (props) {
+  return props.warning && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
+}, function (props) {
+  return props.theme.themeProp('opacity', 0.6, 0.5, 1);
+}, function (props) {
+  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
+});
+var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  top: 15px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  content: \"\";\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
+}, function (props) {
+  return props.theme.themeProp('opacity', 0.6, 0.5);
+}, function (props) {
+  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
+}, function (props) {
+  return (props.hasPlaceholder || props.hasAdornments) && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "])), activeLabel, props.error && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('red-500')));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
+});
+var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
+var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n\n  &:focus-within {\n    ", " {\n      ", ";\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", ":not(:placeholder-shown) + ", " {\n    ", ";\n    ", "\n    // ", "\n    ", "\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
+  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n        //   color: ", " !important;\n        //\n      "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.warning && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('orange-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
+});
+var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ", ";\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+}, function (props) {
+  return props.error && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n      content: 'error';\n      ", "\n    "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
+});
+
+var toFnRef = function toFnRef(ref) {
+  return !ref || typeof ref === 'function' ? ref : function (value) {
+    ref.current = value;
+  };
+};
+
+function mergeRefs(refA, refB) {
+  var a = toFnRef(refA);
+  var b = toFnRef(refB);
+  return function (value) {
+    if (a) a(value);
+    if (b) b(value);
+  };
+}
+/**
+ * Create and returns a single callback ref composed from two other Refs.
+ *
+ * ```tsx
+ * const Button = React.forwardRef((props, ref) => {
+ *   const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
+ *   const mergedRef = useMergedRefs(ref, attachRef);
+ *
+ *   return <button ref={mergedRef} {...props}/>
+ * })
+ * ```
+ *
+ * @param refA A Callback or mutable Ref
+ * @param refB A Callback or mutable Ref
+ * @category refs
+ */
+
+function useMergedRefs(refA, refB) {
+  return React.useMemo(function () {
+    return mergeRefs(refA, refB);
+  }, [refA, refB]);
+}
+
+var TextInput = React__default['default'].forwardRef(function TextInput(_ref, forwardedRef) {
+  var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      name = _ref.name,
+      label = _ref.label,
+      placeholder = _ref.placeholder,
+      type = _ref.type,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      autoComplete = _ref.autoComplete,
+      description = _ref.description,
+      error = _ref.error,
+      warning = _ref.warning,
+      icon = _ref.icon,
+      adornments = _ref.adornments,
+      className = _ref.className,
+      style = _ref.style,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur"]);
+
+  var textInputDomNode = React.useRef(null);
+  var textInputRef = useMergedRefs(forwardedRef, textInputDomNode);
+
+  var _useState = React.useState(nanoid.nanoid()),
+      _useState2 = defaultTheme._slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var hasError = React.useMemo(function () {
+    if (lodash.isBoolean(error)) {
+      return error;
+    }
+
+    return !lodash.isEmpty(error);
+  }, [error]);
+  var hasWarning = React.useMemo(function () {
+    if (lodash.isBoolean(warning)) {
+      return warning;
+    }
+
+    return !lodash.isEmpty(warning);
+  }, [warning]);
+  var descriptionText = React.useMemo(function () {
+    if (!lodash.isEmpty(error)) {
+      return error;
+    }
+
+    if (!lodash.isEmpty(warning)) {
+      return warning;
+    }
+
+    if (!lodash.isEmpty(description)) {
+      return description;
+    }
+
+    return null;
+  }, [description, error, warning]);
+  return React__default['default'].createElement(TextInput$1, {
+    disabled: disabled || readOnly,
+    error: hasError,
+    warning: hasWarning,
+    className: className,
+    style: style
+  }, typeof icon !== 'undefined' && React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && React__default['default'].createElement(Adornment, {
+    htmlFor: "text-input-".concat(uniqueId),
+    error: hasError,
+    warning: hasWarning,
+    isPrefix: true,
+    onClick: function onClick() {
+      return textInputDomNode.current.focus();
+    }
+  }, adornments.prefix), React__default['default'].createElement(TextInputField, defaultTheme._extends({
+    ref: textInputRef,
+    value: value,
+    defaultValue: defaultValue,
+    name: name,
+    placeholder: placeholder || ' ',
+    type: type,
+    required: required,
+    disabled: disabled || readOnly,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    hasIcon: Boolean(icon),
+    error: hasError,
+    warning: hasWarning,
+    id: "text-input-".concat(uniqueId),
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), label && React__default['default'].createElement(TextInputLabel, {
+    htmlFor: "text-input-".concat(uniqueId),
+    hasPlaceholder: Boolean(placeholder),
+    hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
+    hasIcon: Boolean(icon),
+    error: hasError
+  }, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && React__default['default'].createElement(Adornment, {
+    error: hasError,
+    warning: hasWarning,
+    isPrefix: false,
+    onClick: function onClick() {
+      return textInputDomNode.current.focus();
+    }
+  }, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
+    error: hasError
+  }, descriptionText));
+});
+TextInput.defaultProps = {
+  type: 'text'
+};
+TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  value: defaultTheme.PropTypes.string,
+  defaultValue: defaultTheme.PropTypes.string,
+  name: defaultTheme.PropTypes.string,
+  label: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  type: defaultTheme.PropTypes.string,
+  required: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  autoComplete: defaultTheme.PropTypes.string,
+  description: defaultTheme.PropTypes.string,
+  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  icon: defaultTheme.PropTypes.element,
+  adornments: defaultTheme.PropTypes.shape({
+    prefix: defaultTheme.PropTypes.string,
+    suffix: defaultTheme.PropTypes.string
+  }),
+  className: defaultTheme.PropTypes.string,
+  style: defaultTheme.PropTypes.object,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func
+} : {};
+
+exports.TextInput = TextInput;
+exports.useMergedRefs = useMergedRefs;

package/Tooltip-f95a39f4.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+var TippyTooltip = require('@tippyjs/react');
+require('./Popover-d3e2f6c0.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
+
+var _templateObject;
+var Tooltip$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  background: ", ";\n  border-radius: 3px;\n\n  .tippy-content {\n    padding: 9px 12px;\n  }\n\n  .tippy-arrow {\n    color: ", ";\n  }\n\n  a {\n    color: inherit;\n  }\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+}, function (props) {
+  return props.theme.getColor('gray-700');
+}, function (props) {
+  return props.theme.getColor('gray-700');
+});
+
+var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
+  var content = _ref.content,
+      interactive = _ref.interactive,
+      placement = _ref.placement,
+      duration = _ref.duration,
+      children = _ref.children,
+      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "children"]);
+
+  return React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
+    ref: ref,
+    content: content,
+    interactive: interactive,
+    placement: placement,
+    duration: duration,
+    animation: 'shift-away-subtle'
+  }, props), children);
+});
+Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
+  content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
+  interactive: defaultTheme.PropTypes.bool,
+  placement: defaultTheme.PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
+  duration: defaultTheme.PropTypes.number,
+  trigger: defaultTheme.PropTypes.string,
+  children: defaultTheme.PropTypes.node.isRequired
+} : {};
+Tooltip.defaultProps = {
+  content: 'Tooltip',
+  interactive: false,
+  placement: 'top',
+  duration: 350,
+  trigger: 'mouseenter focus'
+};
+
+exports.Tooltip = Tooltip;

package/data/Badge/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var Badge = require('../../Badge-86593df4.js');
+require('../../defaultTheme-870f7df1.js');
+require('styled-components');
+require('react');
+
+
+
+module.exports = Badge.Badge;

package/data/Popover/index.js

@@ -1,5 +1,13 @@
-export { P as default } from '../../Popover-01b3e392.js';
-import '../../defaultTheme-f1063879.js';
-import 'styled-components';
-import 'react';
-import '@tippyjs/react';
+'use strict';
+
+var Popover = require('../../Popover-d3e2f6c0.js');
+require('../../defaultTheme-870f7df1.js');
+require('styled-components');
+require('react');
+require('lodash');
+require('polished');
+require('@tippyjs/react');
+
+
+
+module.exports = Popover.Popover;

package/data/index.js

@@ -1,6 +1,19 @@
-export { P as Popover } from '../Popover-01b3e392.js';
-export { T as Tooltip } from '../Tooltip-830b629b.js';
-import '../defaultTheme-f1063879.js';
-import 'styled-components';
-import 'react';
-import '@tippyjs/react';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Popover = require('../Popover-d3e2f6c0.js');
+var Tooltip = require('../Tooltip-f95a39f4.js');
+var Badge = require('../Badge-86593df4.js');
+require('../defaultTheme-870f7df1.js');
+require('styled-components');
+require('react');
+require('lodash');
+require('polished');
+require('@tippyjs/react');
+
+
+
+exports.Popover = Popover.Popover;
+exports.Tooltip = Tooltip.Tooltip;
+exports.Badge = Badge.Badge;

package/{defaultTheme-f1063879.js → defaultTheme-870f7df1.js}

@@ -1,4 +1,6 @@
-import { css } from 'styled-components';
+'use strict';
+
+var styled = require('styled-components');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -1319,7 +1321,9 @@ var defaultTheme = {
 };
 
 function themeProp(property, darkMode, lightMode) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    body.dark-theme & {\n      ", ": ", ";\n    }\n\n    body.light-theme & {\n      ", ": ", ";\n    }\n\n    body:not(.light-theme):not(.dark-theme) & {\n      ", ": ", ";\n\n      @media (prefers-color-scheme: dark) {\n        ", ": ", ";\n      }\n    }\n  "])), property, darkMode, property, lightMode, property, lightMode, property, darkMode);
+  var specificity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2;
+  var specificityString = Array(specificity).fill("&").join("");
+  return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    body.dark-theme ", " {\n      ", ": ", ";\n    }\n\n    body.light-theme ", " {\n      ", ": ", ";\n    }\n\n    body:not(.light-theme):not(.dark-theme) ", " {\n      ", ": ", ";\n\n      @media (prefers-color-scheme: dark) {\n        ", ": ", ";\n      }\n    }\n  "])), specificityString, property, darkMode, specificityString, property, lightMode, specificityString, property, lightMode, property, darkMode);
 }
 
 function applyDefaultTheme(_ref) {
@@ -1332,4 +1336,12 @@ function applyDefaultTheme(_ref) {
   });
 }
 
-export { PropTypes as P, _taggedTemplateLiteral as _, applyDefaultTheme as a, _objectWithoutProperties as b, _extends as c, _objectSpread2 as d, _slicedToArray as e, _toConsumableArray as f, styleInject as s };
+exports.PropTypes = PropTypes;
+exports._extends = _extends;
+exports._objectSpread2 = _objectSpread2;
+exports._objectWithoutProperties = _objectWithoutProperties;
+exports._slicedToArray = _slicedToArray;
+exports._taggedTemplateLiteral = _taggedTemplateLiteral;
+exports._toConsumableArray = _toConsumableArray;
+exports.applyDefaultTheme = applyDefaultTheme;
+exports.styleInject = styleInject;

package/icons/arrow-back.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path fill="currentColor" d="m16,32L0,16,16,0l2.1,2.1L5.7,14.5h26.3v3H5.7l12.4,12.4-2.1,2.1Z"/>
+</svg>

package/icons/audio.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.86 24">
+ <path fill="currentColor" d="M10 21q-1.65 0-2.825-1.175Q6 18.65 6 17q0-1.65 1.175-2.825Q8.35 13 10 13q.575 0 1.062.137.488.138.938.413V3h6v4h-4v10q0 1.65-1.175 2.825Q11.65 21 10 21Z"/>
+</svg>

package/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18.2968">
+  <path fill="currentColor" d="M7.6271,14.4355l-5.69-5.69L0,10.67l7.6271,7.6271L24,1.9238,22.0762,0Z"/>
+</svg>

package/icons/close.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.3 27.3">
+  <path fill="currentColor" d="m2.1,27.3l-2.1-2.1,11.55-11.55L0,2.1,2.1,0l11.55,11.55L25.2,0l2.1,2.1-11.55,11.55,11.55,11.55-2.1,2.1-11.55-11.55L2.1,27.3Z"/>
+</svg>

package/icons/edit-note.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.67 12">
+  <path fill="currentColor" d="m7,12v-1.77l4.42-4.42,1.77,1.77-4.42,4.42h-1.77ZM0,7.75v-1.5h6v1.5H0Zm13.77-.75l-1.77-1.77.67-.67c.15-.15.33-.23.53-.23s.38.08.53.23l.71.71c.15.15.23.33.23.53s-.08.38-.23.53l-.67.67ZM0,4.63v-1.5h9v1.5H0ZM0,1.5V0h9v1.5H0Z"/>
+</svg>

package/icons/headset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M9 21H5q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-4v-8h4v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h4Zm-2-6H5v4h2Zm10 0v4h2v-4Zm0 0h2-2ZM7 15H5Z"/></svg>

package/icons/library-add.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M2.4,4.8H0V21.6A2.4071,2.4071,0,0,0,2.4,24H19.2V21.6H2.4ZM21.6,0H7.2A2.4071,2.4071,0,0,0,4.8,2.4V16.8a2.4071,2.4071,0,0,0,2.4,2.4H21.6A2.4071,2.4071,0,0,0,24,16.8V2.4A2.4071,2.4071,0,0,0,21.6,0Zm0,16.8H7.2V2.4H21.6Zm-8.4-2.4h2.4V10.8h3.6V8.4H15.6V4.8H13.2V8.4H9.6v2.4h3.6Z"/>
+</svg>

package/icons/link.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10">
+  <path fill="currentColor" d="m9,10h-4c-1.38,0-2.56-.49-3.54-1.46s-1.46-2.15-1.46-3.54S.49,2.44,1.46,1.46,3.62,0,5,0h4v2h-4c-.83,0-1.54.29-2.13.88s-.88,1.29-.88,2.13.29,1.54.88,2.13,1.29.88,2.13.88h4v2Zm-3-4v-2h8v2H6Zm5,4v-2h4c.83,0,1.54-.29,2.13-.88s.88-1.29.88-2.13-.29-1.54-.88-2.13-1.29-.88-2.13-.88h-4V0h4c1.38,0,2.56.49,3.54,1.46s1.46,2.15,1.46,3.54-.49,2.56-1.46,3.54-2.15,1.46-3.54,1.46h-4Z"/>
+</svg>

package/icons/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M17.1527,15.0943H16.0686l-.3842-.37a8.933,8.933,0,1,0-.9606.9606l.37.3842v1.0841L21.9554,24,24,21.9554Zm-8.2333,0a6.175,6.175,0,1,1,6.1749-6.1749A6.1667,6.1667,0,0,1,8.9194,15.0943Z"/>
+</svg>

package/inputs/ActionButton/index.js

@@ -1,4 +1,10 @@
-export { A as default } from '../../ActionButton-dfa33fb3.js';
-import '../../defaultTheme-f1063879.js';
-import 'styled-components';
-import 'react';
+'use strict';
+
+var ActionButton = require('../../ActionButton-90485300.js');
+require('../../defaultTheme-870f7df1.js');
+require('styled-components');
+require('react');
+
+
+
+module.exports = ActionButton.ActionButton;