onekijs-ui 0.9.2 → 0.15.2

package/dist/onekijs-ui.esm.js

@@ -1,1853 +0,0 @@
-import styled, { css, keyframes } from 'styled-components';
-import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { get, lcfirst, toKebabCase, useIsomorphicLayoutEffect, LoadingStatus, isCollection, toCollectionItem, useCollection, omit } from 'onekijs-core';
-import { usePopper } from 'react-popper';
-import { CSSTransition } from 'react-transition-group';
-import { useVirtual } from 'react-virtual';
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  strings.raw = raw;
-  return strings;
-}
-
-var ButtonComponent = function ButtonComponent(props) {
-  return React.createElement("button", Object.assign({}, props));
-};
-
-var deriveColor = function deriveColor(color, gap, dark, newColorValue) {
-  var _color$split = color.split('-'),
-      colorValue = _color$split[0],
-      weight = _color$split[1];
-
-  newColorValue = newColorValue || colorValue;
-
-  if (weight === undefined) {
-    return newColorValue;
-  }
-
-  return newColorValue + "-" + (parseInt(weight) + (dark ? -gap : gap));
-}; // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-
-var hexToRgb = function hexToRgb(hex) {
-  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function (_m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}; // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
-
-var rgbToHex = function rgbToHex(r, g, b) {
-  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-};
-
-var booleanFormatter = function booleanFormatter(value) {
-  return value ? '1' : '0';
-};
-var themeFormatter = function themeFormatter(category) {
-  return function (value, theme) {
-    return get(theme, category + "." + value, String(value));
-  };
-};
-var colorFormatter = function colorFormatter(key, opacityKey) {
-  return function (value, theme) {
-    if (Object.keys(theme.kind).includes(value)) {
-      value = theme.kind[value];
-    }
-
-    var result = '';
-    value = get(theme, "colors." + value, String(value));
-
-    if (opacityKey) {
-      result = "--" + opacityKey + ": 1;";
-    }
-
-    result = "" + result + key + ": " + value;
-
-    if (opacityKey) {
-      var rgb = hexToRgb(value);
-
-      if (rgb) {
-        result = result + ";" + key + ": rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",var(--" + opacityKey + "))";
-      }
-    }
-
-    result += ';';
-    return result;
-  };
-};
-var enumFormatter = function enumFormatter(values) {
-  return function (value) {
-    if (Object.keys(values).includes(String(value))) {
-      return String(values[String(value)]);
-    }
-
-    return String(value);
-  };
-};
-var pxFormatter = function pxFormatter(value) {
-  if (typeof value === 'string') {
-    return value;
-  }
-
-  if (value === 0) {
-    return '0';
-  }
-
-  return value + "px";
-};
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n    *,\n    ::after,\n    ::before {\n      box-sizing: border-box;\n      border-style: solid;\n      border-width: 0;\n    }\n    ", "\n    button, input, optgroup, select, textarea {\n      font-family: inherit;\n      font-size: 100%;\n      margin: 0;\n      line-height: 1.15;\n    }\n  "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", "", ";;\n      "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n        &::", " {\n          ", "", ";\n        }\n      "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n        &:", " {\n          ", "", ";\n        }\n      "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n        ", "\n      "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var formatValue = function formatValue(value, theme, formatter) {
-  if (formatter) {
-    return formatter(value, theme);
-  }
-
-  return String(value);
-};
-
-var isPseudoClass = function isPseudoClass(candidate) {
-  return ['active', 'any-link', 'checked', 'blank', 'default', 'defined', 'dir', 'disabled', 'empty', 'enabled', 'first', 'first-child', 'first-of-type', 'fullscreen', 'focus', 'focus-visible', 'focus-within', 'has', 'host', 'host-context', 'hover', 'indeterminate', 'in-range', 'invalid', 'is', 'matches', 'any', 'lang', 'last-child', 'last-of-type', 'left', 'link', 'not', 'nth-child', 'nth-last-child', 'nth-last-of-type', 'nth-of-type', 'only-child', 'only-of-type', 'optional', 'out-of-range', 'placeholder-shown', 'read-only', 'read-write', 'required', 'right', 'root', 'scope', 'target', 'valid', 'visited', 'where'].includes(candidate);
-};
-
-var isPseudoElement = function isPseudoElement(candidate) {
-  return ['after', 'backdrop', 'before', 'cue', 'cue-region', 'first-letter', 'first-line', 'grammar-error', 'marker', 'part', 'placeholder', 'selection', 'slotted', 'spelling-error'].includes(candidate);
-};
-
-var toCss = function toCss(property, formatter, value, variants) {
-  var result = css(_templateObject(), property === null ? '' : property + ': ', function (props) {
-    return formatValue(value, props.theme, formatter);
-  });
-  var responsives = {
-    all: {},
-    sm: {},
-    md: {},
-    lg: {},
-    xl: {}
-  };
-  Object.keys(variants).forEach(function (variant) {
-    var media = variant.substring(0, 2);
-
-    if (responsives[media]) {
-      var pseudo = lcfirst(variant.substring(2)) || 'all';
-      responsives[media][pseudo] = variants[variant];
-    } else {
-      responsives['all'][variant] = variants[variant];
-    }
-  });
-  Object.keys(responsives).forEach(function (media) {
-    if (media !== 'all' && Object.keys(responsives[media]).length > 0) {
-      result = result.concat(css(_templateObject2(), function (props) {
-        return "@media (min-width: " + props.theme.breakpoints[media] + ") {";
-      }));
-    }
-
-    Object.keys(responsives[media]).forEach(function (pseudo) {
-      pseudo = toKebabCase(pseudo);
-
-      if (isPseudoClass(pseudo)) {
-        result = result.concat(css(_templateObject3(), pseudo, property === null ? '' : property + ': ', function (props) {
-          return formatValue(responsives[media][pseudo], props.theme, formatter);
-        }));
-      } else if (isPseudoElement(pseudo)) {
-        result = result.concat(css(_templateObject4(), pseudo, property === null ? '' : property + ': ', function (props) {
-          return formatValue(responsives[media][pseudo], props.theme, formatter);
-        }));
-      } else if (pseudo === 'all') {
-        result = result.concat(css(_templateObject5(), property === null ? '' : property + ': ', function (props) {
-          return formatValue(responsives[media][pseudo], props.theme, formatter);
-        }));
-      }
-    });
-
-    if (media !== 'all' && Object.keys(responsives[media]).length > 0) {
-      result = result.concat(['}']);
-    }
-  });
-  return result;
-};
-var cssProperty = function cssProperty(property, formatter) {
-  return function (value, variants) {
-    if (variants === void 0) {
-      variants = {};
-    }
-
-    return toCss(property, formatter, value, variants);
-  };
-};
-var preflight = function preflight() {
-  return css(_templateObject6(), toCss('font-family', themeFormatter('font.families'), 'sans', {}));
-};
-var addClassname = function addClassname(classname, existing, after) {
-  if (after === void 0) {
-    after = true;
-  }
-
-  if (existing) {
-    return after ? existing + " " + classname : classname + " " + existing;
-  }
-
-  return classname;
-};
-
-var backgroundColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('background-color', 'background-opacity'));
-var backgroundAttachment = /*#__PURE__*/cssProperty('background-attachment');
-var backgroundClip = /*#__PURE__*/cssProperty('background-clip');
-var backgroundImage = /*#__PURE__*/cssProperty('background-image');
-var backgroundOpacity = /*#__PURE__*/cssProperty('--background-opacity');
-var backgroundOrigin = /*#__PURE__*/cssProperty('background-origin');
-var backgroundPosition = /*#__PURE__*/cssProperty('background-position');
-var backgroundRepeat = /*#__PURE__*/cssProperty('background-repeat');
-var backgroundSize = /*#__PURE__*/cssProperty('background-size');
-
-var padding = /*#__PURE__*/cssProperty('padding', /*#__PURE__*/themeFormatter('spacings'));
-var paddingY = function paddingY(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('padding-top', themeFormatter('spacings'), value, variants).concat(toCss('padding-bottom', themeFormatter('spacings'), value, variants));
-};
-var paddingX = function paddingX(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('padding-left', themeFormatter('spacings'), value, variants).concat(toCss('padding-right', themeFormatter('spacings'), value, variants));
-};
-var paddingLeft = /*#__PURE__*/cssProperty('padding-left', /*#__PURE__*/themeFormatter('spacings'));
-var paddingRight = /*#__PURE__*/cssProperty('padding-right', /*#__PURE__*/themeFormatter('spacings'));
-var paddingTop = /*#__PURE__*/cssProperty('padding-top', /*#__PURE__*/themeFormatter('spacings'));
-var paddingBottom = /*#__PURE__*/cssProperty('padding-bottom', /*#__PURE__*/themeFormatter('spacings'));
-var margin = /*#__PURE__*/cssProperty('margin', /*#__PURE__*/themeFormatter('spacings'));
-var marginY = function marginY(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('margin-top', themeFormatter('spacings'), value, variants).concat(toCss('margin-bottom', themeFormatter('spacings'), value, variants));
-};
-var marginX = function marginX(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('margin-left', themeFormatter('spacings'), value, variants).concat(toCss('margin-right', themeFormatter('spacings'), value, variants));
-};
-var marginLeft = /*#__PURE__*/cssProperty('margin-left', /*#__PURE__*/themeFormatter('spacings'));
-var marginRight = /*#__PURE__*/cssProperty('margin-right', /*#__PURE__*/themeFormatter('spacings'));
-var marginTop = /*#__PURE__*/cssProperty('margin-top', /*#__PURE__*/themeFormatter('spacings'));
-var marginBottom = /*#__PURE__*/cssProperty('margin-bottom', /*#__PURE__*/themeFormatter('spacings'));
-
-var color = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('color', 'text-opacity'));
-var font = /*#__PURE__*/cssProperty('font');
-var fontFamily = /*#__PURE__*/cssProperty('font-family', /*#__PURE__*/themeFormatter('font.families'));
-var fontFeatureSettings = /*#__PURE__*/cssProperty('font-feature-settings');
-var fontKerning = /*#__PURE__*/cssProperty('font-kerning');
-var fontLanguageOverride = /*#__PURE__*/cssProperty('font-language-override');
-var fontOpticalSizing = /*#__PURE__*/cssProperty('font-optical-sizing');
-var fontSize = /*#__PURE__*/cssProperty('font-size', /*#__PURE__*/themeFormatter('font.sizes'));
-var fontSizeAdjust = /*#__PURE__*/cssProperty('font-size-adjust');
-var fontStretch = /*#__PURE__*/cssProperty('font-stetch'); // normal; italic; oblique; oblique XXdeg;
-
-var fontStyle = /*#__PURE__*/cssProperty('font-style');
-var fontSynthesis = /*#__PURE__*/cssProperty('font-synthesis');
-var fontVariant = /*#__PURE__*/cssProperty('font-variant');
-var fontVariantAlternates = /*#__PURE__*/cssProperty('font-variant-alternates');
-var fontVariantCaps = /*#__PURE__*/cssProperty('font-variant-caps');
-var fontVariantEastAsian = /*#__PURE__*/cssProperty('font-variant-east-asian');
-var fontVariantLigatures = /*#__PURE__*/cssProperty('font-variant-ligatures');
-var fontVariantNumeric = /*#__PURE__*/cssProperty('font-variant-numeric');
-var fontVariantPosition = /*#__PURE__*/cssProperty('font-variant-position');
-var fontVariationSettings = /*#__PURE__*/cssProperty('font-variation-settings');
-var fontWeight = /*#__PURE__*/cssProperty('font-weight', /*#__PURE__*/themeFormatter('font.weights'));
-var hyphens = /*#__PURE__*/cssProperty('hyphens');
-var letterSpacing = /*#__PURE__*/cssProperty('letter-spacing', /*#__PURE__*/themeFormatter('font.spacings'));
-var lineHeight = /*#__PURE__*/cssProperty('line-height', /*#__PURE__*/themeFormatter('font.lineHeights'));
-var lineHeightStep = /*#__PURE__*/cssProperty('line-height-step');
-var overflowWrap = /*#__PURE__*/cssProperty('overflow-wrap'); // left; center; right; justify
-
-var textAlign = /*#__PURE__*/cssProperty('text-align');
-var textDecoration = /*#__PURE__*/cssProperty('text-decoration');
-var textDecorationColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('text-decoration-color'));
-var textDecorationLine = /*#__PURE__*/cssProperty('text-decoration-line');
-var textDecorationStyle = /*#__PURE__*/cssProperty('text-decoration-style');
-var textDecorationThickness = /*#__PURE__*/cssProperty('text-decoration-thickness');
-var textEmphasis = /*#__PURE__*/cssProperty('text-emphasis');
-var textEmphasisColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('text-emphasis'));
-var textEmphasisPosition = /*#__PURE__*/cssProperty('text-emphasis-position');
-var textEmphasisStyle = /*#__PURE__*/cssProperty('text-emphasis-style');
-var textIdent = /*#__PURE__*/cssProperty('text-ident');
-var textJustify = /*#__PURE__*/cssProperty('text-justify'); // float between 0 and 1
-
-var textOpacity = /*#__PURE__*/cssProperty('--text-opacity');
-var textOverflow = /*#__PURE__*/cssProperty('text-overflow');
-var textTransform = /*#__PURE__*/cssProperty('text-transform');
-var textShadow = /*#__PURE__*/cssProperty('text-shadow');
-var textUnderlineOffset = /*#__PURE__*/cssProperty('text-underline-offset');
-var textUnderlinePosition = /*#__PURE__*/cssProperty('text-underline-position');
-var whiteSpace = /*#__PURE__*/cssProperty('white-space'); // normal; words; all; truncate
-
-var wordBreakFormatter = function wordBreakFormatter(value) {
-  if (value === 'normal') {
-    return 'word-break: normal;overflow-wrap: normal';
-  }
-
-  if (value === 'words') {
-    return 'overflow-wrap: break-word';
-  }
-
-  if (value === 'all') {
-    return 'word-break: break-all';
-  }
-
-  if (value === 'truncate') {
-    return 'overflow: hidden;text-overflow: ellipsis;white-space: nowrap';
-  }
-
-  return "word-break: " + value;
-};
-
-var wordBreak = /*#__PURE__*/cssProperty(null, wordBreakFormatter);
-var wordSpacing = /*#__PURE__*/cssProperty('word-spacing');
-
-function _templateObject$1() {
-  var data = _taggedTemplateLiteralLoose(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n  "]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var buttonStyle = function buttonStyle(_ref) {
-  var _ref$kind = _ref.kind,
-      kind = _ref$kind === void 0 ? 'primary' : _ref$kind,
-      theme = _ref.theme;
-  var t = theme.button[kind];
-  return css(_templateObject$1(), backgroundColor(t.backgroundColor, {
-    hover: t.hoverBackgroundColor
-  }), color(t.color), fontWeight(t.fontWeight), paddingX(t.paddingX), paddingY(t.paddingY));
-};
-
-function _templateObject$2() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var Button = /*#__PURE__*/styled(ButtonComponent)( /*#__PURE__*/_templateObject$2(), buttonStyle);
-
-var useClickOutside = function useClickOutside(ref, onClickOutside) {
-  useEffect(function () {
-    function handleClickOutside(event) {
-      var element = ref && !(ref instanceof HTMLElement) ? ref.current : ref;
-
-      if (element && !element.contains(event.target)) {
-        onClickOutside(event);
-      }
-    } // Bind the event listener
-
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [ref, onClickOutside]);
-};
-
-var refWidth = function refWidth(type) {
-  return {
-    name: 'sameWidth',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['computeStyles'],
-    fn: function fn(_ref) {
-      var state = _ref.state;
-      state.styles.popper.width = state.rects.reference.width + "px";
-    },
-    effect: function effect(_ref2) {
-      var state = _ref2.state;
-      state.elements.popper.style[type] = state.elements.reference.getBoundingClientRect().width + "px";
-    }
-  };
-};
-
-var sameWidthPopperModifier = /*#__PURE__*/refWidth('width');
-var minWidthPopperModifier = /*#__PURE__*/refWidth('minWidth');
-var maxWidthPopperModifier = /*#__PURE__*/refWidth('maxWidth');
-
-var DropdownComponent = function DropdownComponent(_ref) {
-  var className = _ref.className,
-      refElement = _ref.refElement,
-      open = _ref.open,
-      children = _ref.children;
-
-  var _useState = useState(null),
-      popperElement = _useState[0],
-      setPopperElement = _useState[1];
-
-  var _usePopper = usePopper(refElement, popperElement, {
-    modifiers: [sameWidthPopperModifier]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
-  return React.createElement(CSSTransition, {
-    "in": open,
-    timeout: 500,
-    classNames: "o-dropdown",
-    mountOnEnter: true,
-    appear: true,
-    unmountOnExit: true
-  }, React.createElement("div", Object.assign({
-    style: styles.popper
-  }, attributes.popper, {
-    ref: setPopperElement,
-    key: "dropdown-container",
-    className: className
-  }), children));
-};
-
-var sizeFormatter = function sizeFormatter(type, value, theme) {
-  console.log("theme", theme);
-
-  if (theme.sizes[value] !== undefined) {
-    return theme.sizes[value];
-  }
-
-  if (value === 'auto') return 'auto';
-  if (value === 'none') return 'none';
-  if (value === 'full') return '100%';
-  if (value === 'screen') return type === 'height' ? '100vh' : '100vw';
-
-  if (value.toString().includes('/')) {
-    var _value$toString$split = value.toString().split('/').map(function (x) {
-      return parseInt(x);
-    }),
-        time = _value$toString$split[0],
-        div = _value$toString$split[1];
-
-    return 100 * time / div + "%";
-  }
-
-  return pxFormatter(value);
-};
-
-var widthFormatter = function widthFormatter(value, theme) {
-  return sizeFormatter('width', value, theme);
-};
-
-var heightFormatter = function heightFormatter(value, theme) {
-  return sizeFormatter('height', value, theme);
-}; // spacing or fraction or auto or full or screen
-
-
-var width = /*#__PURE__*/cssProperty('width', widthFormatter); // spacing or fraction or auto or full or screen
-
-var minWidth = /*#__PURE__*/cssProperty('min-width', widthFormatter);
-var maxWidth = /*#__PURE__*/cssProperty('max-width', widthFormatter);
-var height = /*#__PURE__*/cssProperty('height', heightFormatter);
-var minHeight = /*#__PURE__*/cssProperty('min-height', heightFormatter);
-var maxHeight = /*#__PURE__*/cssProperty('max-height', heightFormatter);
-var overscrollBehavior = /*#__PURE__*/cssProperty('overscroll-behavior');
-var overscrollBehaviorBlock = /*#__PURE__*/cssProperty('overscroll-behavior-block');
-var overscrollBehaviorInline = /*#__PURE__*/cssProperty('overscroll-behavior-inline');
-var overscrollBehaviorX = /*#__PURE__*/cssProperty('overscroll-behavior-x');
-var overscrollBehaviorY = /*#__PURE__*/cssProperty('overscroll-behavior-y');
-
-var border = /*#__PURE__*/cssProperty('border');
-var borderTop = /*#__PURE__*/cssProperty('border-top');
-var borderBottom = /*#__PURE__*/cssProperty('border-bottom');
-var borderLeft = /*#__PURE__*/cssProperty('border-left');
-var borderRight = /*#__PURE__*/cssProperty('border-right');
-var borderColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('border-color', 'border-opacity'));
-var borderTopColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('border-top-color', 'border-top-opacity'));
-var borderBottomColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('border-bottom-color', 'border-bottom-opacity'));
-var borderLeftColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('border-left-color', 'border-left-opacity'));
-var borderRightColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('border-right-color', 'border-right-opacity'));
-var borderImage = /*#__PURE__*/cssProperty('border-image');
-var borderImageOutset = /*#__PURE__*/cssProperty('border-image-outset');
-var borderImageRepeat = /*#__PURE__*/cssProperty('border-image-repeat');
-var borderImageSlice = /*#__PURE__*/cssProperty('border-image-slice');
-var borderImageSource = /*#__PURE__*/cssProperty('border-image-source');
-var borderImageWidth = /*#__PURE__*/cssProperty('border-image-width');
-var borderOpacity = /*#__PURE__*/cssProperty('--border-opacity');
-var borderTopOpacity = /*#__PURE__*/cssProperty('--border-top-opacity');
-var borderBottomOpacity = /*#__PURE__*/cssProperty('-border-bottom-opacity');
-var borderLeftOpacity = /*#__PURE__*/cssProperty('--border-left-opacity');
-var borderRightOpacity = /*#__PURE__*/cssProperty('--border-right-opacity');
-var borderRadius = /*#__PURE__*/cssProperty('border-radius', /*#__PURE__*/themeFormatter('radius'));
-var borderTopLeftRadius = /*#__PURE__*/cssProperty('border-top-left-radius', /*#__PURE__*/themeFormatter('radius'));
-var borderBottomRadius = /*#__PURE__*/cssProperty('border-bottom-left-radius', /*#__PURE__*/themeFormatter('radius'));
-var borderLeftRadius = /*#__PURE__*/cssProperty('border-top-right-radius', /*#__PURE__*/themeFormatter('radius'));
-var borderRightRadius = /*#__PURE__*/cssProperty('border-bottom-right-radius', /*#__PURE__*/themeFormatter('radius'));
-var borderStyle = /*#__PURE__*/cssProperty('border-style');
-var borderTopStyle = /*#__PURE__*/cssProperty('border-top-style');
-var borderBottomStyle = /*#__PURE__*/cssProperty('border-bottom-style');
-var borderLeftStyle = /*#__PURE__*/cssProperty('border-left-style');
-var borderRightStyle = /*#__PURE__*/cssProperty('border-right-style');
-var borderWidth = /*#__PURE__*/cssProperty('border-width', pxFormatter);
-var borderTopWidth = /*#__PURE__*/cssProperty('border-top-width', pxFormatter);
-var borderBottomWidth = /*#__PURE__*/cssProperty('border-bottom-width', pxFormatter);
-var borderLeftWidth = /*#__PURE__*/cssProperty('border-left-width', pxFormatter);
-var borderRightWidth = /*#__PURE__*/cssProperty('border-right-width', pxFormatter);
-var boxShadow = /*#__PURE__*/cssProperty('box-shadow', /*#__PURE__*/themeFormatter('shadow'));
-
-var overflow = /*#__PURE__*/cssProperty('overflow');
-var overflowBlock = /*#__PURE__*/cssProperty('overflow-block');
-var overflowInline = /*#__PURE__*/cssProperty('overflow-inline'); // auto; hidden; visible; scroll;
-
-var overflowX = /*#__PURE__*/cssProperty('overflow-x'); // auto; hidden; visible; scroll;
-
-var overflowY = /*#__PURE__*/cssProperty('overflow-y');
-
-var transition = /*#__PURE__*/cssProperty('transition');
-var transitionDelay = /*#__PURE__*/cssProperty('transition-delay');
-var transitionDuration = /*#__PURE__*/cssProperty('transition-duration');
-var transitionProperty = /*#__PURE__*/cssProperty('transition-property');
-var transitionTimingFunction = /*#__PURE__*/cssProperty('transition-timing-function');
-
-var opacity = /*#__PURE__*/cssProperty('opacity');
-
-function _templateObject$3() {
-  var data = _taggedTemplateLiteralLoose(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    &.o-dropdown-enter {\n      ", "\n    }\n    &.o-dropdown-enter-active {\n      ", "\n      ", "\n      ", "    \n      ", "\n    } \n    &.o-dropdown-exit-active {\n      ", "\n      ", "\n      ", "    \n      ", "\n    } \n    \n  "]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var dropdownStyle = function dropdownStyle() {
-  return css(_templateObject$3(), preflight(), width(64), borderRadius('default'), borderColor('gray-200'), boxShadow('default'), overflowY('auto'), height('200px'), backgroundColor('white'), opacity(0), transitionDuration('.5s'), transitionProperty('opacity'), transitionTimingFunction('ease-in-out'), opacity(1), transitionDuration('.5s'), transitionProperty('opacity'), transitionTimingFunction('ease-in-out'), opacity(0));
-};
-
-function _templateObject$4() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var Dropdown = /*#__PURE__*/styled(DropdownComponent)( /*#__PURE__*/_templateObject$4(), dropdownStyle);
-
-function _templateObject3$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n\n  .o-icon-loading-svg {\n    animation: 2s linear infinite both ", ";\n  }\n\n  .o-icon-loading-svg-circle {\n    animation: 1.4s ease-in-out infinite both ", ";\n    fill: transparent;\n    stroke: currentColor;\n    stroke-dasharray: 285;\n    stroke-linecap: round;\n    stroke-width: 10px;\n    transform-origin: 50% 50%;\n  }\n"]);
-
-  _templateObject3$1 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2$1() {
-  var data = _taggedTemplateLiteralLoose(["\n  0%, 25% {\n    stroke-dashoffset: 280;\n    transform: rotate(0);\n  }\n\n  50%, 75% {\n    stroke-dashoffset: 75;\n    transform: rotate(45deg);\n  }\n\n  100% {\n    stroke-dashoffset: 280;\n    transform: rotate(360deg);\n  }\n"]);
-
-  _templateObject2$1 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$5() {
-  var data = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: rotateZ(0deg);\n  }\n  100% {\n    transform: rotateZ(360deg);\n  }\n"]);
-
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var IconComponent = function IconComponent(_ref) {
-  var className = _ref.className;
-  return React.createElement("div", {
-    className: className
-  }, React.createElement("svg", {
-    className: "o-icon-loading-svg",
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React.createElement("circle", {
-    className: "o-icon-loading-svg-circle",
-    cx: "50",
-    cy: "50",
-    r: "45"
-  })));
-};
-
-var iconKeyFrame = /*#__PURE__*/keyframes( /*#__PURE__*/_templateObject$5());
-var iconCircleKeyFrame = /*#__PURE__*/keyframes( /*#__PURE__*/_templateObject2$1());
-var LoadingIcon = /*#__PURE__*/styled(IconComponent)( /*#__PURE__*/_templateObject3$1(), iconKeyFrame, iconCircleKeyFrame);
-
-var SelectIconComponent = function SelectIconComponent(_ref) {
-  var onIconClick = _ref.onIconClick,
-      open = _ref.open,
-      loading = _ref.loading;
-
-  if (!loading) {
-    return React.createElement("div", {
-      className: "o-select-icon-container",
-      onClick: onIconClick
-    }, React.createElement("button", {
-      className: "o-select-icon"
-    }, React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "100%",
-      height: "100%",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      transform: "rotate(" + (open ? '0' : '180') + ")",
-      className: "o-select-arrow-svg"
-    }, React.createElement("polyline", {
-      points: "18 15 12 9 6 15"
-    }))));
-  } else {
-    return React.createElement("div", {
-      className: "o-select-icon-container",
-      onClick: onIconClick
-    }, React.createElement("div", {
-      className: "o-select-icon"
-    }, React.createElement(LoadingIcon, null)));
-  }
-};
-
-var SelectInputComponent = function SelectInputComponent(_ref) {
-  var onIconClick = _ref.onIconClick,
-      open = _ref.open,
-      placeholder = _ref.placeholder,
-      loading = _ref.loading,
-      _ref$IconComponent = _ref.IconComponent,
-      IconComponent = _ref$IconComponent === void 0 ? SelectIconComponent : _ref$IconComponent,
-      onFocus = _ref.onFocus,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      value = _ref.value,
-      focus = _ref.focus;
-  var inputRef = useRef(null);
-  var partialValueRef = useRef('');
-  var proxifyRef = useRef(true);
-  var proxyValue = value === undefined || !proxifyRef.current ? focus ? partialValueRef.current : '' : String(value);
-  var handleChange = useCallback(function (e) {
-    var input = inputRef.current;
-
-    if (input) {
-      var currentSelectionStart = input.selectionStart;
-      var currentSelectionEnd = input.selectionEnd;
-
-      if (currentSelectionStart && currentSelectionStart !== currentSelectionEnd) {
-        partialValueRef.current = input.value.substring(0, currentSelectionStart);
-      } else {
-        partialValueRef.current = input.value;
-      }
-    }
-
-    if (onChange) {
-      e.target.value = partialValueRef.current;
-      onChange(e);
-    }
-  }, [onChange]);
-  var handleKeyDown = useCallback(function (e) {
-    var input = inputRef.current;
-    if (!input) return;
-
-    if (e.keyCode === 8 || e.keyCode === 46) {
-      proxifyRef.current = false;
-    } else {
-      var currentSelectionStart = input.selectionStart;
-      var currentSelectionEnd = input.selectionEnd;
-
-      if (currentSelectionStart === currentSelectionEnd && currentSelectionStart === input.value.length) {
-        proxifyRef.current = true;
-      }
-    }
-  }, []);
-  useIsomorphicLayoutEffect(function () {
-    var input = inputRef.current;
-
-    if (input && focus) {
-      if (value !== undefined && String(value).startsWith(partialValueRef.current) && proxifyRef.current) {
-        input.setSelectionRange(partialValueRef.current.length, String(value).length);
-      }
-    }
-  });
-  var className = useMemo(function () {
-    var result = ['o-select-input-container'];
-
-    if (focus) {
-      result.push('o-select-input-focus');
-    }
-
-    return result.join(' ');
-  }, [focus]);
-  return React.createElement("div", {
-    className: className
-  }, React.createElement("div", {
-    className: "o-select-input-marker"
-  }), React.createElement("input", {
-    ref: inputRef,
-    placeholder: placeholder,
-    className: "o-select-input",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    value: proxyValue
-  }), React.createElement(IconComponent, {
-    onIconClick: onIconClick,
-    open: open,
-    loading: loading
-  }));
-};
-
-var ListItemComponent = /*#__PURE__*/React.memo(function (_ref) {
-  var _item$meta;
-
-  var item = _ref.item;
-  return React.createElement("div", {
-    className: "o-list-item"
-  }, item.data === undefined && ((_item$meta = item.meta) == null ? void 0 : _item$meta.loadingStatus) === LoadingStatus.Loading ? 'loading' : item.text);
-});
-ListItemComponent.displayName = 'ListItemComponent';
-
-//   item: Item<T, M>,
-//   meta: ItemMeta,
-//   adapter?: ListItemAdapter<T, M>,
-// ): ListItem<T, M> => {
-//   const loading = isLoading(meta);
-//   const deprecated = isDeprecated(meta);
-//   const result: ListItem<T> = { loading, deprecated, item };
-//   let adaptee;
-//   if (item !== undefined) {
-//     if (adapter) {
-//       adaptee = adapter(item);
-//     } else if (['string', 'number', 'boolean'].includes(typeof item)) {
-//       adaptee = {
-//         id: item,
-//         text: String(item),
-//       };
-//     } else {
-//       adaptee = {
-//         id: (item as any).id,
-//         text: (item as any).text,
-//       };
-//     }
-//   } else {
-//     adaptee = {
-//       id: undefined,
-//       text: undefined,
-//     };
-//   }
-//   Object.assign(result, adaptee);
-//   return result;
-// };
-// export const canFetchMore = (data: any[] | Collection<any>): boolean => {
-//   if (
-//     isCollection(data) &&
-//     ![ListStatus.Loading, ListStatus.PartialLoading, ListStatus.Deprecated, ListStatus.PartialDeprecated].includes(
-//       getListStatus(data),
-//     )
-//   ) {
-//     return data.total === undefined;
-//   }
-//   return false;
-// };
-
-var emptyListItem = {};
-var canFetchMore = function canFetchMore(collection) {
-  return isCollection(collection) && collection.status === LoadingStatus.PartialLoaded;
-};
-var getListStatus = function getListStatus(collection) {
-  if (isCollection(collection)) {
-    return collection.status;
-  }
-
-  return LoadingStatus.Loaded;
-};
-
-var StandardListComponent = function StandardListComponent(_ref) {
-  var _collection$items;
-
-  var className = _ref.className,
-      collection = _ref.collection,
-      _ref$ItemComponent = _ref.ItemComponent,
-      ItemComponent = _ref$ItemComponent === void 0 ? ListItemComponent : _ref$ItemComponent,
-      onItemClick = _ref.onItemClick,
-      onItemMouseOver = _ref.onItemMouseOver;
-  var items = (_collection$items = collection.items) != null ? _collection$items : [];
-  useEffect(function () {
-    if (collection.status === LoadingStatus.NotInitialized) {
-      return collection.load();
-    }
-  }, [collection]);
-  return React.createElement("div", {
-    className: addClassname('o-list', className)
-  }, items.map(function (item, index) {
-    return React.createElement(ItemComponent, {
-      key: "item-" + index,
-      index: index,
-      item: item || emptyListItem,
-      onClick: onItemClick,
-      onMouseOver: onItemMouseOver
-    });
-  }));
-};
-
-var defaultHeight = 200;
-var defaultItemHeight = 21;
-var defaultPreload = 100;
-var defaultIncrement = 100;
-
-var VirtualistComponent = function VirtualistComponent(_ref) {
-  var className = _ref.className,
-      collection = _ref.collection,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? defaultHeight : _ref$height,
-      _ref$ItemComponent = _ref.ItemComponent,
-      ItemComponent = _ref$ItemComponent === void 0 ? ListItemComponent : _ref$ItemComponent,
-      _ref$itemHeight = _ref.itemHeight,
-      itemHeight = _ref$itemHeight === void 0 ? defaultItemHeight : _ref$itemHeight,
-      _ref$preload = _ref.preload,
-      preload = _ref$preload === void 0 ? defaultPreload : _ref$preload,
-      _ref$increment = _ref.increment,
-      increment = _ref$increment === void 0 ? defaultIncrement : _ref$increment,
-      onItemClick = _ref.onItemClick,
-      onItemMouseOver = _ref.onItemMouseOver;
-  var parentRef = useRef(null);
-  var estimatedItemHeight = useCallback(function (index) {
-    if (typeof itemHeight === 'function') {
-      return itemHeight(index) || defaultItemHeight;
-    }
-
-    return defaultItemHeight;
-  }, [itemHeight]);
-  var memo = useMemo(function () {
-    var result = {
-      items: [],
-      status: getListStatus(collection)
-    };
-
-    if (result.status === LoadingStatus.NotInitialized) {
-      result.items = Array(preload).fill(toCollectionItem(undefined, collection.getAdapter()));
-    } else {
-      result.items = collection.items || [];
-    }
-
-    return result;
-  }, [collection, preload]);
-
-  var _useVirtual = useVirtual({
-    size: memo.items.length,
-    estimateSize: estimatedItemHeight,
-    parentRef: parentRef
-  }),
-      totalSize = _useVirtual.totalSize,
-      virtualItems = _useVirtual.virtualItems,
-      scrollToIndex = _useVirtual.scrollToIndex;
-
-  useIsomorphicLayoutEffect(function () {
-    var offset = collection.getOffset() || 0;
-    var firstVirualItem = virtualItems[0];
-    var firstVirualItemIndex = firstVirualItem ? firstVirualItem.index : 0;
-
-    if (collection.status !== LoadingStatus.Loading && collection.status !== LoadingStatus.Deprecated && offset === 0 && firstVirualItemIndex !== 0) {
-      scrollToIndex(0);
-    }
-  }, [collection]);
-  useEffect(function () {
-    if (collection.status === LoadingStatus.NotInitialized) {
-      collection.load(preload);
-    } else if (canFetchMore(collection)) {
-      var lastVirtualItem = virtualItems[virtualItems.length - 1];
-      var lastVirtualItemIndex = lastVirtualItem ? lastVirtualItem.index : 0;
-
-      if (lastVirtualItemIndex >= memo.items.length - preload / 2) {
-        collection.load(increment, collection.items.length);
-      }
-    }
-  }, [collection, preload, virtualItems, increment, memo]);
-  return React.createElement("div", {
-    ref: parentRef,
-    className: addClassname('o-list', className),
-    style: {
-      maxHeight: "" + (typeof height === 'string' ? height : height + "px"),
-      overflow: 'auto'
-    }
-  }, React.createElement("div", {
-    className: "o-list-virtualizer",
-    style: {
-      height: totalSize + "px",
-      width: '100%',
-      position: 'relative'
-    }
-  }, virtualItems.map(function (_ref2) {
-    var index = _ref2.index,
-        measureRef = _ref2.measureRef,
-        start = _ref2.start;
-    var listItem = memo.items[index];
-    return React.createElement("div", {
-      className: "o-list-virtual-item",
-      key: "virtual-item-" + index,
-      ref: measureRef,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        minHeight: '20px',
-        transform: "translateY(" + start + "px)"
-      }
-    }, React.createElement(ItemComponent, {
-      key: "item-" + index,
-      index: index,
-      item: listItem || emptyListItem,
-      onClick: onItemClick,
-      onMouseOver: onItemMouseOver
-    }));
-  })));
-};
-
-var ListComponent = function ListComponent(props) {
-  var items = props.items,
-      listInternalProps = _objectWithoutPropertiesLoose(props, ["items"]);
-
-  if (Array.isArray(items)) {
-    return React.createElement(ListDataComponent, Object.assign({}, listInternalProps, {
-      items: items
-    }));
-  } else {
-    return React.createElement(ListInternalComponent, Object.assign({}, listInternalProps, {
-      collection: items
-    }));
-  }
-};
-
-var ListDataComponent = function ListDataComponent(props) {
-  var items = props.items,
-      listInternalProps = _objectWithoutPropertiesLoose(props, ["items"]);
-
-  var collection = useCollection(items);
-  return React.createElement(ListInternalComponent, Object.assign({}, listInternalProps, {
-    collection: collection
-  }));
-};
-
-var ListInternalComponent = function ListInternalComponent(props) {
-  if (props.height) {
-    return React.createElement(VirtualistComponent, Object.assign({}, props));
-  } else {
-    var standardProps = omit(props, ['itemHeight', 'height', 'preload']);
-    return React.createElement(StandardListComponent, Object.assign({}, standardProps));
-  }
-};
-
-var SelectOptionComponent = /*#__PURE__*/React.memo(function (_ref) {
-  var item = _ref.item,
-      index = _ref.index,
-      _onClick = _ref.onClick,
-      _onMouseOver = _ref.onMouseOver;
-  var data = item.data,
-      text = item.text,
-      meta = item.meta;
-  var content = '';
-  var clickable = !!_onClick;
-  var hoverable = !!_onMouseOver;
-
-  if (data === undefined && (meta == null ? void 0 : meta.loadingStatus) === LoadingStatus.Loading) {
-    content = 'loading';
-    clickable = false;
-    hoverable = false;
-  } else {
-    content = text || '';
-
-    if (meta != null && meta.selected) {
-      content += ' *';
-    }
-  }
-
-  var classNames = useMemo(function () {
-    var classNames = ['o-select-option'];
-
-    if (clickable) {
-      classNames.push('o-select-option-clickable');
-    }
-
-    if (hoverable) {
-      classNames.push('o-select-option-hoverable');
-    }
-
-    return classNames.join(' ');
-  }, [clickable, hoverable]);
-  return React.createElement("div", {
-    className: classNames,
-    onClick: function onClick() {
-      return clickable && _onClick && _onClick(item, index);
-    },
-    onMouseOver: function onMouseOver() {
-      return hoverable && _onMouseOver && _onMouseOver(item, index);
-    }
-  }, data === undefined && (meta == null ? void 0 : meta.loadingStatus) === LoadingStatus.Loading ? 'loading' : content);
-});
-SelectOptionComponent.displayName = 'SelectOptionComponent';
-
-var SelectOptionsComponent = function SelectOptionsComponent(_ref) {
-  var _ref$ItemComponent = _ref.ItemComponent,
-      ItemComponent = _ref$ItemComponent === void 0 ? SelectOptionComponent : _ref$ItemComponent,
-      listProps = _objectWithoutPropertiesLoose(_ref, ["search", "ItemComponent"]);
-
-  return React.createElement(ListComponent, Object.assign({
-    className: "o-select-options",
-    ItemComponent: ItemComponent,
-    height: "100%"
-  }, listProps));
-};
-
-var SelectComponent = function SelectComponent(props) {
-  var items = props.items,
-      selectInternalProps = _objectWithoutPropertiesLoose(props, ["items"]);
-
-  if (Array.isArray(items)) {
-    return React.createElement(SelectDataComponent, Object.assign({}, selectInternalProps, {
-      items: items
-    }));
-  } else {
-    return React.createElement(SelectInternalComponent, Object.assign({}, selectInternalProps, {
-      collection: items
-    }));
-  }
-};
-
-var SelectDataComponent = function SelectDataComponent(props) {
-  var items = props.items,
-      selectInternalProps = _objectWithoutPropertiesLoose(props, ["items"]);
-
-  var collection = useCollection(items);
-  return React.createElement(SelectInternalComponent, Object.assign({}, selectInternalProps, {
-    collection: collection
-  }));
-};
-
-var SelectInternalComponent = function SelectInternalComponent(_ref) {
-  var className = _ref.className,
-      placeholder = _ref.placeholder,
-      collection = _ref.collection,
-      _ref$InputComponent = _ref.InputComponent,
-      InputComponent = _ref$InputComponent === void 0 ? SelectInputComponent : _ref$InputComponent,
-      autoFocus = _ref.autoFocus,
-      value = _ref.value,
-      onChange = _ref.onChange;
-
-  var _useState = useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = useState(!!autoFocus),
-      focus = _useState2[0],
-      setFocus = _useState2[1];
-
-  var stateRef = useRef({});
-  var previousValueRef = useRef();
-  var loading = useMemo(function () {
-    return collection.status === LoadingStatus.Loading || collection.status === LoadingStatus.PartialLoading;
-  }, [collection]);
-  var delayOpen = useMemo(function () {
-    return loading && !open;
-  }, [open, loading]);
-
-  var _useState3 = useState(null),
-      containerRef = _useState3[0],
-      setContainerRef = _useState3[1];
-
-  var onBlur = useCallback(function () {
-    if (!stateRef.current.keepFocus) {
-      setFocus(false);
-      setOpen(false);
-    }
-  }, []);
-  useClickOutside(containerRef, function () {
-    onBlur();
-  });
-
-  var onInputChange = function onInputChange(e) {
-    if (!open) {
-      setOpen(true);
-    }
-
-    collection.search(e.target.value);
-  };
-
-  var selectedItem = useMemo(function () {
-    if (!focus) {
-      return toCollectionItem(value, collection.getAdapter());
-    } else {
-      if (collection.getSearch()) {
-        return get(collection, 'items.0');
-      } else {
-        return toCollectionItem(value, collection.getAdapter());
-      }
-    }
-  }, [collection, value, focus]);
-  var onSelect = useCallback(function (item) {
-    if (onChange) {
-      onChange(item.data);
-    }
-
-    setOpen(false);
-    collection.clearSearch();
-  }, [onChange, collection]);
-  useEffect(function () {
-    if (value !== previousValueRef.current) {
-      var item = toCollectionItem(value, collection.getAdapter());
-      var previousItem = toCollectionItem(previousValueRef.current, collection.getAdapter());
-      collection.setMeta(previousItem, 'selected', false);
-      collection.setMeta(item, 'selected', true);
-    }
-
-    previousValueRef.current = value;
-  }, [value, collection]);
-  return React.createElement("div", {
-    className: className,
-    ref: setContainerRef,
-    onClick: function onClick() {
-      return setFocus(true);
-    },
-    onMouseDown: function onMouseDown() {
-      return stateRef.current.keepFocus = true;
-    },
-    onMouseUp: function onMouseUp() {
-      return stateRef.current.keepFocus = false;
-    }
-  }, React.createElement(InputComponent, {
-    placeholder: placeholder,
-    onIconClick: function onIconClick() {
-      return !delayOpen && setOpen(!open);
-    },
-    open: open && !delayOpen,
-    loading: loading,
-    onChange: onInputChange,
-    value: selectedItem.text,
-    focus: focus,
-    onFocus: function onFocus() {
-      return setFocus(true);
-    },
-    onBlur: onBlur
-  }), React.createElement(Dropdown, {
-    refElement: containerRef,
-    open: open
-  }, React.createElement(SelectOptionsComponent, {
-    items: collection,
-    onItemClick: onSelect
-  })));
-};
-
-var alignContent = /*#__PURE__*/cssProperty('align-content'); // stretch; flex-start; center; flex-end; baseline;
-
-var alignItems = /*#__PURE__*/cssProperty('align-items'); // auto; flex-start; center; flex-end; stretch;
-
-var alignSelf = /*#__PURE__*/cssProperty('align-self'); // theme.spacings
-
-var columnGap = function columnGap(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('column-gap', themeFormatter('spacings'), value, variants).concat(toCss('grid-column-gap', themeFormatter('spacings'), value, variants));
-}; // theme.spacings
-
-var gap = function gap(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('gap', themeFormatter('spacings'), value, variants).concat(toCss('grid-gap', themeFormatter('spacings'), value, variants));
-}; // flex-start; center; flex-end; space-between; space-around;
-
-var justifyContent = /*#__PURE__*/cssProperty('justify-content');
-var justifySelf = /*#__PURE__*/cssProperty('justify-self');
-var placeContent = /*#__PURE__*/cssProperty('place-content');
-var placeItems = /*#__PURE__*/cssProperty('place-items');
-var placeSelf = /*#__PURE__*/cssProperty('place-self'); // theme.spacings
-
-var rowGap = function rowGap(value, variants) {
-  if (variants === void 0) {
-    variants = {};
-  }
-
-  return toCss('row-gap', themeFormatter('spacings'), value, variants).concat(toCss('grid-row-gap', themeFormatter('spacings'), value, variants));
-};
-
-function _templateObject2$2() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", "\n    "]);
-
-  _templateObject2$2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$6() {
-  var data = _taggedTemplateLiteralLoose(["width: 100%'"]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var container = function container() {
-  var result = css(_templateObject$6());
-  ['sm', 'md', 'lg', 'xl'].forEach(function (media) {
-    result = result.concat(css(_templateObject2$2(), function (props) {
-      return "@media (min-width: " + props.theme.breakpoints[media] + ") {\n        max-width: " + props.theme.breakpoints[media] + ";\n      }";
-    }));
-  });
-  return result;
-}; // none; block; flow-root; inline-block; inline; flex; inline-flex; grid;
-// inline-grid; table; table-caption; table-cell; table-column;
-// table-column-group; table-footer-group; table-header-group; table-row;
-
-var display = /*#__PURE__*/cssProperty('display'); // boolean
-
-var visibleFormatter = function visibleFormatter(value) {
-  return value ? 'visible' : 'hidden';
-};
-
-var visibility = /*#__PURE__*/cssProperty('visibility', visibleFormatter);
-var zoom = /*#__PURE__*/cssProperty('zoom');
-
-var appearance = /*#__PURE__*/cssProperty('appearance');
-var aspectRatio = /*#__PURE__*/cssProperty('aspect-ratio');
-var boxSizing = /*#__PURE__*/cssProperty('box-sizing');
-var caretColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('caret-color'));
-var cursor = /*#__PURE__*/cssProperty('cursor');
-var outline = /*#__PURE__*/cssProperty('outline');
-var outlineColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('outline-color'));
-var outlineOffset = /*#__PURE__*/cssProperty('outline-offset');
-var outlineStyle = /*#__PURE__*/cssProperty('outline-style');
-var outlineWidth = /*#__PURE__*/cssProperty('outline', pxFormatter);
-var pointerEvents = /*#__PURE__*/cssProperty('pointer-events');
-var resize = /*#__PURE__*/cssProperty('resize');
-var touchAction = /*#__PURE__*/cssProperty('touch-action');
-var userSelect = /*#__PURE__*/cssProperty('user-select');
-
-var borderCollapse = /*#__PURE__*/cssProperty('border-collapse');
-var borderSpacing = /*#__PURE__*/cssProperty('border-spacing', pxFormatter);
-var captionSide = /*#__PURE__*/cssProperty('caption-side');
-var emptyCells = /*#__PURE__*/cssProperty('empty-cells');
-var tableLayout = /*#__PURE__*/cssProperty('table-layout');
-var verticalAlign = /*#__PURE__*/cssProperty('vertical-align');
-
-function _templateObject$7() {
-  var data = _taggedTemplateLiteralLoose(["\n    ", "\n    ", "\n    .o-select-input-container {\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      &.o-select-input-focus {\n        ", "\n        ", "\n      }\n    }\n    .o-select-input {\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n    .o-select-icon-container {\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n    .o-select-icon {\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n    .o-select-arrow-svg {\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    }\n    .o-select-option {\n      ", "\n      ", "\n      ", "\n      &.o-select-option-clickable {\n        ", "\n      }\n      &.o-select-option-hoverable {\n        ", "\n      }      \n    }\n  "]);
-
-  _templateObject$7 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var selectStyle = function selectStyle() {
-  return css(_templateObject$7(), preflight(), width('100%'), marginY(2), padding(1), backgroundColor('white'), display('flex'), borderWidth(1), borderColor('gray-200'), borderRadius('default'), borderColor('primary'), borderWidth(2), paddingY(1), paddingX(2), appearance('none'), outline('none'), width('full'), color('gray-800', {
-    placeholder: 'gray-400'
-  }), color('primary'), cursor('pointer'), width(8), paddingY(1), paddingX(1), display('flex'), alignItems('center'), borderColor('gray-200'), color('primary'), cursor('pointer'), width(4), height(4), outline('none', {
-    focus: 'none'
-  }), backgroundColor('transparent'), padding(0), display('block'), verticalAlign('middle'), margin('px'), transitionDuration('.5s'), transitionProperty('all'), transitionTimingFunction('ease-in-out'), width('full'), borderColor('gray-100'), borderBottomWidth(1), cursor('pointer'), backgroundColor('transparent', {
-    hover: 'teal-100'
-  }));
-};
-
-function _templateObject$8() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject$8 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var Select = /*#__PURE__*/styled(SelectComponent)( /*#__PURE__*/_templateObject$8(), selectStyle);
-/*
-<!-- component -->
-<style>
-    .top-100 {top: 100%}
-    .bottom-100 {bottom: 100%}
-    .max-h-select {
-        max-height: 300px;
-    }
-</style>
-<div class="flex flex-col items-center">
-    <div class="w-full md:w-1/2 flex flex-col items-center h-64">
-        <div class="w-full px-4">
-            <div class="flex flex-col items-center relative">
-                <div class="w-full">
-                    <div class="my-2 p-1 bg-white flex border border-gray-200 rounded">
-                        <div class="flex flex-auto flex-wrap"></div>
-                        <input placeholder="Search by position" class="p-1 px-2 appearance-none outline-none w-full text-gray-800">
-                        <div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200">
-                            <button class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up w-4 h-4">
-                                    <polyline points="18 15 12 9 6 15"></polyline>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="absolute shadow bg-white top-100 z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj">
-                    <div class="flex flex-col w-full">
-                        <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/men/62.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1  ">Jack jhon
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">CEO &amp; managin director</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/women/62.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1  ">Liza Blue
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">COO &amp; co-founder</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer w-full border-gray-100 border-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/men/65.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1 w-1/2 ">Brian White
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">CTO &amp; technical manager</div>
-                                    </div>
-                                    <div class="w-1/2 flex">
-                                        <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
-                                            <div class="text-xs font-normal leading-none max-w-full flex-initial">Hiring!</div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="cursor-pointer w-full border-gray-100 rounded-b hover:bg-teal-100">
-                            <div class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative hover:border-teal-100">
-                                <div class="w-6 flex flex-col items-center">
-                                    <div class="flex relative w-5 h-5 bg-orange-500 justify-center items-center m-1 mr-2 w-4 h-4 mt-1 rounded-full "><img class="rounded-full" alt="A" src="https://randomuser.me/api/portraits/men/85.jpg"> </div>
-                                </div>
-                                <div class="w-full items-center flex">
-                                    <div class="mx-2 -mt-1  ">Eric Dripper
-                                        <div class="text-xs truncate w-full normal-case font-normal -mt-1 text-gray-500">CMO &amp; marketing manager</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-*/
-
-function _templateObject$9() {
-  var data = _taggedTemplateLiteralLoose(["\n    ", "\n  "]);
-
-  _templateObject$9 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var listStyle = function listStyle() {
-  return css(_templateObject$9(), preflight());
-};
-
-function _templateObject$a() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject$a = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var List = /*#__PURE__*/styled(ListComponent)( /*#__PURE__*/_templateObject$a(), listStyle);
-
-var theme = function theme(customTheme) {
-  if (customTheme === void 0) {
-    customTheme = {};
-  }
-
-  var theme = Object.assign({
-    dark: false,
-    breakpoints: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px'
-    },
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      black: '#000',
-      white: '#fff',
-      'gray-100': '#f7fafc',
-      'gray-200': '#edf2f7',
-      'gray-300': '#e2e8f0',
-      'gray-400': '#cbd5e0',
-      'gray-500': '#a0aec0',
-      'gray-600': '#718096',
-      'gray-700': '#4a5568',
-      'gray-800': '#2d3748',
-      'gray-900': '#1a202c',
-      'red-100': '#fff5f5',
-      'red-200': '#fed7d7',
-      'red-300': '#feb2b2',
-      'red-400': '#fc8181',
-      'red-500': '#f56565',
-      'red-600': '#e53e3e',
-      'red-700': '#c53030',
-      'red-800': '#9b2c2c',
-      'red-900': '#742a2a',
-      'orange-100': '#fffaf0',
-      'orange-200': '#feebc8',
-      'orange-300': '#fbd38d',
-      'orange-400': '#f6ad55',
-      'orange-500': '#ed8936',
-      'orange-600': '#dd6b20',
-      'orange-700': '#c05621',
-      'orange-800': '#9c4221',
-      'orange-900': '#7b341e',
-      'yellow-100': '#fffff0',
-      'yellow-200': '#fefcbf',
-      'yellow-300': '#faf089',
-      'yellow-400': '#f6e05e',
-      'yellow-500': '#ecc94b',
-      'yellow-600': '#d69e2e',
-      'yellow-700': '#b7791f',
-      'yellow-800': '#975a16',
-      'yellow-900': '#744210',
-      'green-100': '#f0fff4',
-      'green-200': '#c6f6d5',
-      'green-300': '#9ae6b4',
-      'green-400': '#68d391',
-      'green-500': '#48bb78',
-      'green-600': '#38a169',
-      'green-700': '#2f855a',
-      'green-800': '#276749',
-      'green-900': '#22543d',
-      'teal-100': '#e6fffa',
-      'teal-200': '#b2f5ea',
-      'teal-300': '#81e6d9',
-      'teal-400': '#4fd1c5',
-      'teal-500': '#38b2ac',
-      'teal-600': '#319795',
-      'teal-700': '#2c7a7b',
-      'teal-800': '#285e61',
-      'teal-900': '#234e52',
-      'blue-100': '#ebf8ff',
-      'blue-200': '#bee3f8',
-      'blue-300': '#90cdf4',
-      'blue-400': '#63b3ed',
-      'blue-500': '#4299e1',
-      'blue-600': '#3182ce',
-      'blue-700': '#2b6cb0',
-      'blue-800': '#2c5282',
-      'blue-900': '#2a4365',
-      'indigo-100': '#ebf4ff',
-      'indigo-200': '#c3dafe',
-      'indigo-300': '#a3bffa',
-      'indigo-400': '#7f9cf5',
-      'indigo-500': '#667eea',
-      'indigo-600': '#5a67d8',
-      'indigo-700': '#4c51bf',
-      'indigo-800': '#434190',
-      'indigo-900': '#3c366b',
-      'purple-100': '#faf5ff',
-      'purple-200': '#e9d8fd',
-      'purple-300': '#d6bcfa',
-      'purple-400': '#b794f4',
-      'purple-500': '#9f7aea',
-      'purple-600': '#805ad5',
-      'purple-700': '#6b46c1',
-      'purple-800': '#553c9a',
-      'purple-900': '#44337a',
-      'pink-100': '#fff5f7',
-      'pink-200': '#fed7e2',
-      'pink-300': '#fbb6ce',
-      'pink-400': '#f687b3',
-      'pink-500': '#ed64a6',
-      'pink-600': '#d53f8c',
-      'pink-700': '#b83280',
-      'pink-800': '#97266d',
-      'pink-900': '#702459'
-    },
-    font: {
-      families: {
-        sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
-        serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
-        mono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
-      },
-      lineHeights: {
-        none: 1,
-        tight: 1.25,
-        snug: 1.375,
-        normal: 1.5,
-        relaxed: 1.625,
-        loose: 2,
-        3: '.75rem',
-        4: '1rem',
-        5: '1.25rem',
-        6: '1.5rem',
-        7: '1.75rem',
-        8: '2rem',
-        9: '2.25rem',
-        10: '2.5rem'
-      },
-      sizes: {
-        xs: '.75rem',
-        sm: '.875rem',
-        base: '1rem',
-        lg: '1.125rem',
-        xl: '1.25rem',
-        '2xl': '1.5rem',
-        '3xl': '1.875rem',
-        '4xl': '2.25rem',
-        '5xl': '3rem',
-        '6xl': '4rem'
-      },
-      spacings: {
-        tighte: '-0.05em',
-        tight: '-0.025em',
-        normal: 0,
-        wide: '0.025em',
-        wider: '0.05em',
-        widest: '0.1em'
-      },
-      weights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900
-      }
-    },
-    kind: {
-      primary: 'blue-500',
-      danger: 'red-500',
-      success: 'green-500',
-      warning: 'orange-500',
-      secondary: 'gray-500'
-    },
-    radius: {
-      none: '0',
-      sm: '0.125rem',
-      "default": '0.25rem',
-      md: '0.375rem',
-      lg: '0.5rem',
-      full: '9999px'
-    },
-    shadow: {
-      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
-      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      "default": '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-      md: ' 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
-      none: 'none'
-    },
-    spacings: {
-      0: '0',
-      1: '0.25rem',
-      2: '0.5rem',
-      3: '0.75rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      8: '2rem',
-      10: '2.5rem',
-      12: '3rem',
-      16: '4rem',
-      20: '5rem',
-      24: '6rem',
-      32: '8rem',
-      40: '10rem',
-      48: '12rem',
-      56: '14rem',
-      64: '16rem',
-      px: '1px'
-    },
-    sizes: {
-      0: '0',
-      1: '0.25rem',
-      2: '0.5rem',
-      3: '0.75rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      8: '2rem',
-      10: '2.5rem',
-      12: '3rem',
-      16: '4rem',
-      20: '5rem',
-      24: '6rem',
-      32: '8rem',
-      40: '10rem',
-      48: '12rem',
-      56: '14rem',
-      64: '16rem',
-      px: '1px',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      'screen-sm': '640px',
-      'screen-md': '768px',
-      'screen-lg': '1024px',
-      'screen-xl': '1280px'
-    },
-    button: {}
-  }, customTheme);
-  Object.keys(theme.kind).forEach(function (kind) {
-    theme.button[kind] = {
-      backgroundColor: get(theme, "button." + kind + ".backgroundColor", theme.kind[kind]),
-      color: get(theme, "button." + kind + ".color", 'white'),
-      fontWeight: get(theme, "button." + kind + ".fontWeight", 'bold'),
-      paddingY: get(theme, "button." + kind + ".paddingY", 2),
-      paddingX: get(theme, "button." + kind + ".paddingX", 4)
-    };
-  });
-  Object.keys(theme.kind).forEach(function (kind) {
-    theme.button[kind].hoverBackgroundColor = get(theme, "button." + kind + ".hoverBackgroundColor", deriveColor(theme.button[kind].backgroundColor, 200, theme.dark));
-  });
-  return theme;
-};
-
-var animation = /*#__PURE__*/cssProperty('animation');
-var animationDelay = /*#__PURE__*/cssProperty('animation-delay');
-var animationDirection = /*#__PURE__*/cssProperty('animation-direction');
-var animationDuration = /*#__PURE__*/cssProperty('animation-duration');
-var animationFillMode = /*#__PURE__*/cssProperty('animation-fill-mode');
-var animationIterationCount = /*#__PURE__*/cssProperty('animation-iteration-count');
-var animationName = /*#__PURE__*/cssProperty('animation-name');
-var animationPlayState = /*#__PURE__*/cssProperty('animation-play-state');
-var animationTimingFunction = /*#__PURE__*/cssProperty('animation-timing-function');
-
-var flexValues = {
-  initial: '0 1 auto',
-  1: '1 1 0%',
-  auto: '1 1 auto',
-  none: 'none'
-};
-var flexFormatter = /*#__PURE__*/enumFormatter(flexValues);
-var flex = /*#__PURE__*/cssProperty('flex', flexFormatter); // row; row-reverse; column; column-reverse
-
-var flexBasis = /*#__PURE__*/cssProperty('flex-basic'); // row; row-reverse; column; column-reverse
-
-var flexDirection = /*#__PURE__*/cssProperty('flex-direction'); // true; false
-
-var flexGrow = /*#__PURE__*/cssProperty('flex-grow', booleanFormatter); // true; false
-
-var flexShrink = /*#__PURE__*/cssProperty('flex-shrink', booleanFormatter); // nowrap; wrap; wrap-reverse;
-
-var flexWrap = /*#__PURE__*/cssProperty('flex-wrap'); // first; last; none; 1; 2; 3; 4; 5; 6; 7; 8; 9; 10; 11; 12
-
-var orderValues = {
-  first: '-9999',
-  last: '9999',
-  none: '0'
-};
-var orderFormatter = /*#__PURE__*/enumFormatter(orderValues);
-var order = /*#__PURE__*/cssProperty('order', orderFormatter);
-
-var breakAfter = /*#__PURE__*/cssProperty('break-after');
-var breakBefore = /*#__PURE__*/cssProperty('break-before');
-var breakInside = /*#__PURE__*/cssProperty('break-inside');
-var orphans = /*#__PURE__*/cssProperty('orphans');
-var widows = /*#__PURE__*/cssProperty('widows');
-
-var columnCount = /*#__PURE__*/cssProperty('column-count');
-var columnFill = /*#__PURE__*/cssProperty('column-fill');
-var columnRule = /*#__PURE__*/cssProperty('column-rule');
-var columnRuleColor = /*#__PURE__*/cssProperty(null, /*#__PURE__*/colorFormatter('column-rule-color'));
-var columnRuleStyle = /*#__PURE__*/cssProperty('column-rule-style');
-var columnRuleWidth = /*#__PURE__*/cssProperty('column-rule-width', pxFormatter);
-var columnSpan = /*#__PURE__*/cssProperty('column-span');
-var columnWidth = /*#__PURE__*/cssProperty('column-width', pxFormatter);
-var columns = /*#__PURE__*/cssProperty('columns');
-var grid = /*#__PURE__*/cssProperty('grid');
-var gridAutoColumns = /*#__PURE__*/cssProperty('grid-auto-columns');
-var gridAutoFlow = /*#__PURE__*/cssProperty('grid-auto-flow');
-var gridAutoRows = /*#__PURE__*/cssProperty('grid-auto-rows');
-var gridColumn = /*#__PURE__*/cssProperty('grid-column');
-var gridColumnEnd = /*#__PURE__*/cssProperty('grid-column-start');
-var gridColumnGap = columnGap;
-var gridColumnStart = /*#__PURE__*/cssProperty('grid-column-start');
-var gridGap = gap;
-var gridRow = /*#__PURE__*/cssProperty('grid-row');
-var gridRowEnd = /*#__PURE__*/cssProperty('grid-row-end');
-var gridRowGap = rowGap;
-var gridRowStart = /*#__PURE__*/cssProperty('grid-row-start');
-var gridTemplate = /*#__PURE__*/cssProperty('grid-template');
-var gridTemplateAreas = /*#__PURE__*/cssProperty('grid-template-areas');
-var gridTemplateColumns = /*#__PURE__*/cssProperty('grid-template-columns');
-var gridTemplateRows = /*#__PURE__*/cssProperty('grid-template-rows');
-
-var imageRendering = /*#__PURE__*/cssProperty('image-rendering'); // contain; cover; fill; none; scale-down;
-
-var objectFit = /*#__PURE__*/cssProperty('object-fit'); // bottom; center; left; right; top; left-bottom; right-bottom; left-top; right-top;
-
-var objectPosition = /*#__PURE__*/cssProperty('object-position');
-
-var listStyle$1 = /*#__PURE__*/cssProperty('list-style');
-var listStyleImage = /*#__PURE__*/cssProperty('list-style-image'); // inside; outside
-
-var listStylePosition = /*#__PURE__*/cssProperty('list-style-position'); // disc; circle; square; decimal; georgian; cjk-ideographic; kannada; any string
-
-var listStyleType = /*#__PURE__*/cssProperty('list-style-type');
-
-var clear = /*#__PURE__*/cssProperty('clear'); // right; left; none;
-
-var _float = /*#__PURE__*/cssProperty('float'); // integer
-var left = /*#__PURE__*/cssProperty('left'); // static; fixed; absolute; relative; sticky;
-
-var position = /*#__PURE__*/cssProperty('position'); // integer
-
-var right = /*#__PURE__*/cssProperty('right'); // integer
-
-var top = /*#__PURE__*/cssProperty('top'); // auto or integer
-
-var zIndex = /*#__PURE__*/cssProperty('z-index');
-
-var fill = /*#__PURE__*/cssProperty('fill');
-var stroke = /*#__PURE__*/cssProperty('stroke');
-var strokeWidth = /*#__PURE__*/cssProperty('stroke-width');
-
-var perspective = /*#__PURE__*/cssProperty('perspective');
-var perspectiveOrigin = /*#__PURE__*/cssProperty('perspective-origin');
-var rotate = /*#__PURE__*/cssProperty('rotate');
-var scale = /*#__PURE__*/cssProperty('scale');
-var transform = /*#__PURE__*/cssProperty('transform');
-var transformOrigin = /*#__PURE__*/cssProperty('transform-origin');
-
-export { Button, List, Select, SelectComponent, addClassname, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomOpacity, borderBottomRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftRadius, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightRadius, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopStyle, borderTopWidth, borderWidth, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, captionSide, caretColor, clear, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, deriveColor, display, emptyCells, enumFormatter, fill, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, _float as float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, imageRendering, justifyContent, justifySelf, left, letterSpacing, lineHeight, lineHeightStep, listStyle$1 as listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, pxFormatter, resize, rgbToHex, right, rotate, rowGap, sameWidthPopperModifier, scale, stroke, strokeWidth, tableLayout, textAlign, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, theme, themeFormatter, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useClickOutside, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wordBreak, wordSpacing, zIndex, zoom };
-//# sourceMappingURL=onekijs-ui.esm.js.map