onekijs-ui 0.9.2 → 0.15.2

package/dist/onekijs-ui.cjs.development.js

@@ -1,2115 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var styled = require('styled-components');
-var styled__default = _interopDefault(styled);
-var React = require('react');
-var React__default = _interopDefault(React);
-var onekijsCore = require('onekijs-core');
-var reactPopper = require('react-popper');
-var reactTransitionGroup = require('react-transition-group');
-var reactVirtual = require('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__default.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 onekijsCore.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 = onekijsCore.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 = styled.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 = onekijsCore.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(styled.css(_templateObject2(), function (props) {
-        return "@media (min-width: " + props.theme.breakpoints[media] + ") {";
-      }));
-    }
-
-    Object.keys(responsives[media]).forEach(function (pseudo) {
-      pseudo = onekijsCore.toKebabCase(pseudo);
-
-      if (isPseudoClass(pseudo)) {
-        result = result.concat(styled.css(_templateObject3(), pseudo, property === null ? '' : property + ': ', function (props) {
-          return formatValue(responsives[media][pseudo], props.theme, formatter);
-        }));
-      } else if (isPseudoElement(pseudo)) {
-        result = result.concat(styled.css(_templateObject4(), pseudo, property === null ? '' : property + ': ', function (props) {
-          return formatValue(responsives[media][pseudo], props.theme, formatter);
-        }));
-      } else if (pseudo === 'all') {
-        result = result.concat(styled.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 styled.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 styled.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__default(ButtonComponent)( /*#__PURE__*/_templateObject$2(), buttonStyle);
-
-var useClickOutside = function useClickOutside(ref, onClickOutside) {
-  React.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 = React.useState(null),
-      popperElement = _useState[0],
-      setPopperElement = _useState[1];
-
-  var _usePopper = reactPopper.usePopper(refElement, popperElement, {
-    modifiers: [sameWidthPopperModifier]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
-  return React__default.createElement(reactTransitionGroup.CSSTransition, {
-    "in": open,
-    timeout: 500,
-    classNames: "o-dropdown",
-    mountOnEnter: true,
-    appear: true,
-    unmountOnExit: true
-  }, React__default.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 styled.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__default(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__default.createElement("div", {
-    className: className
-  }, React__default.createElement("svg", {
-    className: "o-icon-loading-svg",
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("circle", {
-    className: "o-icon-loading-svg-circle",
-    cx: "50",
-    cy: "50",
-    r: "45"
-  })));
-};
-
-var iconKeyFrame = /*#__PURE__*/styled.keyframes( /*#__PURE__*/_templateObject$5());
-var iconCircleKeyFrame = /*#__PURE__*/styled.keyframes( /*#__PURE__*/_templateObject2$1());
-var LoadingIcon = /*#__PURE__*/styled__default(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__default.createElement("div", {
-      className: "o-select-icon-container",
-      onClick: onIconClick
-    }, React__default.createElement("button", {
-      className: "o-select-icon"
-    }, React__default.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__default.createElement("polyline", {
-      points: "18 15 12 9 6 15"
-    }))));
-  } else {
-    return React__default.createElement("div", {
-      className: "o-select-icon-container",
-      onClick: onIconClick
-    }, React__default.createElement("div", {
-      className: "o-select-icon"
-    }, React__default.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 = React.useRef(null);
-  var partialValueRef = React.useRef('');
-  var proxifyRef = React.useRef(true);
-  var proxyValue = value === undefined || !proxifyRef.current ? focus ? partialValueRef.current : '' : String(value);
-  var handleChange = React.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 = React.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;
-      }
-    }
-  }, []);
-  onekijsCore.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 = React.useMemo(function () {
-    var result = ['o-select-input-container'];
-
-    if (focus) {
-      result.push('o-select-input-focus');
-    }
-
-    return result.join(' ');
-  }, [focus]);
-  return React__default.createElement("div", {
-    className: className
-  }, React__default.createElement("div", {
-    className: "o-select-input-marker"
-  }), React__default.createElement("input", {
-    ref: inputRef,
-    placeholder: placeholder,
-    className: "o-select-input",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    value: proxyValue
-  }), React__default.createElement(IconComponent, {
-    onIconClick: onIconClick,
-    open: open,
-    loading: loading
-  }));
-};
-
-var ListItemComponent = /*#__PURE__*/React__default.memo(function (_ref) {
-  var _item$meta;
-
-  var item = _ref.item;
-  return React__default.createElement("div", {
-    className: "o-list-item"
-  }, item.data === undefined && ((_item$meta = item.meta) == null ? void 0 : _item$meta.loadingStatus) === onekijsCore.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 onekijsCore.isCollection(collection) && collection.status === onekijsCore.LoadingStatus.PartialLoaded;
-};
-var getListStatus = function getListStatus(collection) {
-  if (onekijsCore.isCollection(collection)) {
-    return collection.status;
-  }
-
-  return onekijsCore.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 : [];
-  React.useEffect(function () {
-    if (collection.status === onekijsCore.LoadingStatus.NotInitialized) {
-      return collection.load();
-    }
-  }, [collection]);
-  return React__default.createElement("div", {
-    className: addClassname('o-list', className)
-  }, items.map(function (item, index) {
-    return React__default.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 = React.useRef(null);
-  var estimatedItemHeight = React.useCallback(function (index) {
-    if (typeof itemHeight === 'function') {
-      return itemHeight(index) || defaultItemHeight;
-    }
-
-    return defaultItemHeight;
-  }, [itemHeight]);
-  var memo = React.useMemo(function () {
-    var result = {
-      items: [],
-      status: getListStatus(collection)
-    };
-
-    if (result.status === onekijsCore.LoadingStatus.NotInitialized) {
-      result.items = Array(preload).fill(onekijsCore.toCollectionItem(undefined, collection.getAdapter()));
-    } else {
-      result.items = collection.items || [];
-    }
-
-    return result;
-  }, [collection, preload]);
-
-  var _useVirtual = reactVirtual.useVirtual({
-    size: memo.items.length,
-    estimateSize: estimatedItemHeight,
-    parentRef: parentRef
-  }),
-      totalSize = _useVirtual.totalSize,
-      virtualItems = _useVirtual.virtualItems,
-      scrollToIndex = _useVirtual.scrollToIndex;
-
-  onekijsCore.useIsomorphicLayoutEffect(function () {
-    var offset = collection.getOffset() || 0;
-    var firstVirualItem = virtualItems[0];
-    var firstVirualItemIndex = firstVirualItem ? firstVirualItem.index : 0;
-
-    if (collection.status !== onekijsCore.LoadingStatus.Loading && collection.status !== onekijsCore.LoadingStatus.Deprecated && offset === 0 && firstVirualItemIndex !== 0) {
-      scrollToIndex(0);
-    }
-  }, [collection]);
-  React.useEffect(function () {
-    if (collection.status === onekijsCore.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__default.createElement("div", {
-    ref: parentRef,
-    className: addClassname('o-list', className),
-    style: {
-      maxHeight: "" + (typeof height === 'string' ? height : height + "px"),
-      overflow: 'auto'
-    }
-  }, React__default.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__default.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__default.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__default.createElement(ListDataComponent, Object.assign({}, listInternalProps, {
-      items: items
-    }));
-  } else {
-    return React__default.createElement(ListInternalComponent, Object.assign({}, listInternalProps, {
-      collection: items
-    }));
-  }
-};
-
-var ListDataComponent = function ListDataComponent(props) {
-  var items = props.items,
-      listInternalProps = _objectWithoutPropertiesLoose(props, ["items"]);
-
-  var collection = onekijsCore.useCollection(items);
-  return React__default.createElement(ListInternalComponent, Object.assign({}, listInternalProps, {
-    collection: collection
-  }));
-};
-
-var ListInternalComponent = function ListInternalComponent(props) {
-  if (props.height) {
-    return React__default.createElement(VirtualistComponent, Object.assign({}, props));
-  } else {
-    var standardProps = onekijsCore.omit(props, ['itemHeight', 'height', 'preload']);
-    return React__default.createElement(StandardListComponent, Object.assign({}, standardProps));
-  }
-};
-
-var SelectOptionComponent = /*#__PURE__*/React__default.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) === onekijsCore.LoadingStatus.Loading) {
-    content = 'loading';
-    clickable = false;
-    hoverable = false;
-  } else {
-    content = text || '';
-
-    if (meta != null && meta.selected) {
-      content += ' *';
-    }
-  }
-
-  var classNames = React.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__default.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) === onekijsCore.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__default.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__default.createElement(SelectDataComponent, Object.assign({}, selectInternalProps, {
-      items: items
-    }));
-  } else {
-    return React__default.createElement(SelectInternalComponent, Object.assign({}, selectInternalProps, {
-      collection: items
-    }));
-  }
-};
-
-var SelectDataComponent = function SelectDataComponent(props) {
-  var items = props.items,
-      selectInternalProps = _objectWithoutPropertiesLoose(props, ["items"]);
-
-  var collection = onekijsCore.useCollection(items);
-  return React__default.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 = React.useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
-
-  var _useState2 = React.useState(!!autoFocus),
-      focus = _useState2[0],
-      setFocus = _useState2[1];
-
-  var stateRef = React.useRef({});
-  var previousValueRef = React.useRef();
-  var loading = React.useMemo(function () {
-    return collection.status === onekijsCore.LoadingStatus.Loading || collection.status === onekijsCore.LoadingStatus.PartialLoading;
-  }, [collection]);
-  var delayOpen = React.useMemo(function () {
-    return loading && !open;
-  }, [open, loading]);
-
-  var _useState3 = React.useState(null),
-      containerRef = _useState3[0],
-      setContainerRef = _useState3[1];
-
-  var onBlur = React.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 = React.useMemo(function () {
-    if (!focus) {
-      return onekijsCore.toCollectionItem(value, collection.getAdapter());
-    } else {
-      if (collection.getSearch()) {
-        return onekijsCore.get(collection, 'items.0');
-      } else {
-        return onekijsCore.toCollectionItem(value, collection.getAdapter());
-      }
-    }
-  }, [collection, value, focus]);
-  var onSelect = React.useCallback(function (item) {
-    if (onChange) {
-      onChange(item.data);
-    }
-
-    setOpen(false);
-    collection.clearSearch();
-  }, [onChange, collection]);
-  React.useEffect(function () {
-    if (value !== previousValueRef.current) {
-      var item = onekijsCore.toCollectionItem(value, collection.getAdapter());
-      var previousItem = onekijsCore.toCollectionItem(previousValueRef.current, collection.getAdapter());
-      collection.setMeta(previousItem, 'selected', false);
-      collection.setMeta(item, 'selected', true);
-    }
-
-    previousValueRef.current = value;
-  }, [value, collection]);
-  return React__default.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__default.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__default.createElement(Dropdown, {
-    refElement: containerRef,
-    open: open
-  }, React__default.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 = styled.css(_templateObject$6());
-  ['sm', 'md', 'lg', 'xl'].forEach(function (media) {
-    result = result.concat(styled.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 styled.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__default(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 styled.css(_templateObject$9(), preflight());
-};
-
-function _templateObject$a() {
-  var data = _taggedTemplateLiteralLoose(["\n  ", "\n"]);
-
-  _templateObject$a = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var List = /*#__PURE__*/styled__default(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: onekijsCore.get(theme, "button." + kind + ".backgroundColor", theme.kind[kind]),
-      color: onekijsCore.get(theme, "button." + kind + ".color", 'white'),
-      fontWeight: onekijsCore.get(theme, "button." + kind + ".fontWeight", 'bold'),
-      paddingY: onekijsCore.get(theme, "button." + kind + ".paddingY", 2),
-      paddingX: onekijsCore.get(theme, "button." + kind + ".paddingX", 4)
-    };
-  });
-  Object.keys(theme.kind).forEach(function (kind) {
-    theme.button[kind].hoverBackgroundColor = onekijsCore.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');
-
-exports.Button = Button;
-exports.List = List;
-exports.Select = Select;
-exports.SelectComponent = SelectComponent;
-exports.addClassname = addClassname;
-exports.alignContent = alignContent;
-exports.alignItems = alignItems;
-exports.alignSelf = alignSelf;
-exports.animation = animation;
-exports.animationDelay = animationDelay;
-exports.animationDirection = animationDirection;
-exports.animationDuration = animationDuration;
-exports.animationFillMode = animationFillMode;
-exports.animationIterationCount = animationIterationCount;
-exports.animationName = animationName;
-exports.animationPlayState = animationPlayState;
-exports.animationTimingFunction = animationTimingFunction;
-exports.appearance = appearance;
-exports.aspectRatio = aspectRatio;
-exports.backgroundAttachment = backgroundAttachment;
-exports.backgroundClip = backgroundClip;
-exports.backgroundColor = backgroundColor;
-exports.backgroundImage = backgroundImage;
-exports.backgroundOpacity = backgroundOpacity;
-exports.backgroundOrigin = backgroundOrigin;
-exports.backgroundPosition = backgroundPosition;
-exports.backgroundRepeat = backgroundRepeat;
-exports.backgroundSize = backgroundSize;
-exports.booleanFormatter = booleanFormatter;
-exports.border = border;
-exports.borderBottom = borderBottom;
-exports.borderBottomColor = borderBottomColor;
-exports.borderBottomOpacity = borderBottomOpacity;
-exports.borderBottomRadius = borderBottomRadius;
-exports.borderBottomStyle = borderBottomStyle;
-exports.borderBottomWidth = borderBottomWidth;
-exports.borderCollapse = borderCollapse;
-exports.borderColor = borderColor;
-exports.borderImage = borderImage;
-exports.borderImageOutset = borderImageOutset;
-exports.borderImageRepeat = borderImageRepeat;
-exports.borderImageSlice = borderImageSlice;
-exports.borderImageSource = borderImageSource;
-exports.borderImageWidth = borderImageWidth;
-exports.borderLeft = borderLeft;
-exports.borderLeftColor = borderLeftColor;
-exports.borderLeftOpacity = borderLeftOpacity;
-exports.borderLeftRadius = borderLeftRadius;
-exports.borderLeftStyle = borderLeftStyle;
-exports.borderLeftWidth = borderLeftWidth;
-exports.borderOpacity = borderOpacity;
-exports.borderRadius = borderRadius;
-exports.borderRight = borderRight;
-exports.borderRightColor = borderRightColor;
-exports.borderRightOpacity = borderRightOpacity;
-exports.borderRightRadius = borderRightRadius;
-exports.borderRightStyle = borderRightStyle;
-exports.borderRightWidth = borderRightWidth;
-exports.borderSpacing = borderSpacing;
-exports.borderStyle = borderStyle;
-exports.borderTop = borderTop;
-exports.borderTopColor = borderTopColor;
-exports.borderTopLeftRadius = borderTopLeftRadius;
-exports.borderTopOpacity = borderTopOpacity;
-exports.borderTopStyle = borderTopStyle;
-exports.borderTopWidth = borderTopWidth;
-exports.borderWidth = borderWidth;
-exports.boxShadow = boxShadow;
-exports.boxSizing = boxSizing;
-exports.breakAfter = breakAfter;
-exports.breakBefore = breakBefore;
-exports.breakInside = breakInside;
-exports.captionSide = captionSide;
-exports.caretColor = caretColor;
-exports.clear = clear;
-exports.color = color;
-exports.colorFormatter = colorFormatter;
-exports.columnCount = columnCount;
-exports.columnFill = columnFill;
-exports.columnGap = columnGap;
-exports.columnRule = columnRule;
-exports.columnRuleColor = columnRuleColor;
-exports.columnRuleStyle = columnRuleStyle;
-exports.columnRuleWidth = columnRuleWidth;
-exports.columnSpan = columnSpan;
-exports.columnWidth = columnWidth;
-exports.columns = columns;
-exports.container = container;
-exports.cssProperty = cssProperty;
-exports.cursor = cursor;
-exports.deriveColor = deriveColor;
-exports.display = display;
-exports.emptyCells = emptyCells;
-exports.enumFormatter = enumFormatter;
-exports.fill = fill;
-exports.flex = flex;
-exports.flexBasis = flexBasis;
-exports.flexDirection = flexDirection;
-exports.flexGrow = flexGrow;
-exports.flexShrink = flexShrink;
-exports.flexWrap = flexWrap;
-exports.float = _float;
-exports.font = font;
-exports.fontFamily = fontFamily;
-exports.fontFeatureSettings = fontFeatureSettings;
-exports.fontKerning = fontKerning;
-exports.fontLanguageOverride = fontLanguageOverride;
-exports.fontOpticalSizing = fontOpticalSizing;
-exports.fontSize = fontSize;
-exports.fontSizeAdjust = fontSizeAdjust;
-exports.fontStretch = fontStretch;
-exports.fontStyle = fontStyle;
-exports.fontSynthesis = fontSynthesis;
-exports.fontVariant = fontVariant;
-exports.fontVariantAlternates = fontVariantAlternates;
-exports.fontVariantCaps = fontVariantCaps;
-exports.fontVariantEastAsian = fontVariantEastAsian;
-exports.fontVariantLigatures = fontVariantLigatures;
-exports.fontVariantNumeric = fontVariantNumeric;
-exports.fontVariantPosition = fontVariantPosition;
-exports.fontVariationSettings = fontVariationSettings;
-exports.fontWeight = fontWeight;
-exports.gap = gap;
-exports.grid = grid;
-exports.gridAutoColumns = gridAutoColumns;
-exports.gridAutoFlow = gridAutoFlow;
-exports.gridAutoRows = gridAutoRows;
-exports.gridColumn = gridColumn;
-exports.gridColumnEnd = gridColumnEnd;
-exports.gridColumnGap = gridColumnGap;
-exports.gridColumnStart = gridColumnStart;
-exports.gridGap = gridGap;
-exports.gridRow = gridRow;
-exports.gridRowEnd = gridRowEnd;
-exports.gridRowGap = gridRowGap;
-exports.gridRowStart = gridRowStart;
-exports.gridTemplate = gridTemplate;
-exports.gridTemplateAreas = gridTemplateAreas;
-exports.gridTemplateColumns = gridTemplateColumns;
-exports.gridTemplateRows = gridTemplateRows;
-exports.height = height;
-exports.hexToRgb = hexToRgb;
-exports.hyphens = hyphens;
-exports.imageRendering = imageRendering;
-exports.justifyContent = justifyContent;
-exports.justifySelf = justifySelf;
-exports.left = left;
-exports.letterSpacing = letterSpacing;
-exports.lineHeight = lineHeight;
-exports.lineHeightStep = lineHeightStep;
-exports.listStyle = listStyle$1;
-exports.listStyleImage = listStyleImage;
-exports.listStylePosition = listStylePosition;
-exports.listStyleType = listStyleType;
-exports.margin = margin;
-exports.marginBottom = marginBottom;
-exports.marginLeft = marginLeft;
-exports.marginRight = marginRight;
-exports.marginTop = marginTop;
-exports.marginX = marginX;
-exports.marginY = marginY;
-exports.maxHeight = maxHeight;
-exports.maxWidth = maxWidth;
-exports.maxWidthPopperModifier = maxWidthPopperModifier;
-exports.minHeight = minHeight;
-exports.minWidth = minWidth;
-exports.minWidthPopperModifier = minWidthPopperModifier;
-exports.objectFit = objectFit;
-exports.objectPosition = objectPosition;
-exports.opacity = opacity;
-exports.order = order;
-exports.orphans = orphans;
-exports.outline = outline;
-exports.outlineColor = outlineColor;
-exports.outlineOffset = outlineOffset;
-exports.outlineStyle = outlineStyle;
-exports.outlineWidth = outlineWidth;
-exports.overflow = overflow;
-exports.overflowBlock = overflowBlock;
-exports.overflowInline = overflowInline;
-exports.overflowWrap = overflowWrap;
-exports.overflowX = overflowX;
-exports.overflowY = overflowY;
-exports.overscrollBehavior = overscrollBehavior;
-exports.overscrollBehaviorBlock = overscrollBehaviorBlock;
-exports.overscrollBehaviorInline = overscrollBehaviorInline;
-exports.overscrollBehaviorX = overscrollBehaviorX;
-exports.overscrollBehaviorY = overscrollBehaviorY;
-exports.padding = padding;
-exports.paddingBottom = paddingBottom;
-exports.paddingLeft = paddingLeft;
-exports.paddingRight = paddingRight;
-exports.paddingTop = paddingTop;
-exports.paddingX = paddingX;
-exports.paddingY = paddingY;
-exports.perspective = perspective;
-exports.perspectiveOrigin = perspectiveOrigin;
-exports.placeContent = placeContent;
-exports.placeItems = placeItems;
-exports.placeSelf = placeSelf;
-exports.pointerEvents = pointerEvents;
-exports.position = position;
-exports.preflight = preflight;
-exports.pxFormatter = pxFormatter;
-exports.resize = resize;
-exports.rgbToHex = rgbToHex;
-exports.right = right;
-exports.rotate = rotate;
-exports.rowGap = rowGap;
-exports.sameWidthPopperModifier = sameWidthPopperModifier;
-exports.scale = scale;
-exports.stroke = stroke;
-exports.strokeWidth = strokeWidth;
-exports.tableLayout = tableLayout;
-exports.textAlign = textAlign;
-exports.textDecoration = textDecoration;
-exports.textDecorationColor = textDecorationColor;
-exports.textDecorationLine = textDecorationLine;
-exports.textDecorationStyle = textDecorationStyle;
-exports.textDecorationThickness = textDecorationThickness;
-exports.textEmphasis = textEmphasis;
-exports.textEmphasisColor = textEmphasisColor;
-exports.textEmphasisPosition = textEmphasisPosition;
-exports.textEmphasisStyle = textEmphasisStyle;
-exports.textIdent = textIdent;
-exports.textJustify = textJustify;
-exports.textOpacity = textOpacity;
-exports.textOverflow = textOverflow;
-exports.textShadow = textShadow;
-exports.textTransform = textTransform;
-exports.textUnderlineOffset = textUnderlineOffset;
-exports.textUnderlinePosition = textUnderlinePosition;
-exports.theme = theme;
-exports.themeFormatter = themeFormatter;
-exports.toCss = toCss;
-exports.top = top;
-exports.touchAction = touchAction;
-exports.transform = transform;
-exports.transformOrigin = transformOrigin;
-exports.transition = transition;
-exports.transitionDelay = transitionDelay;
-exports.transitionDuration = transitionDuration;
-exports.transitionProperty = transitionProperty;
-exports.transitionTimingFunction = transitionTimingFunction;
-exports.useClickOutside = useClickOutside;
-exports.userSelect = userSelect;
-exports.verticalAlign = verticalAlign;
-exports.visibility = visibility;
-exports.whiteSpace = whiteSpace;
-exports.widows = widows;
-exports.width = width;
-exports.wordBreak = wordBreak;
-exports.wordSpacing = wordSpacing;
-exports.zIndex = zIndex;
-exports.zoom = zoom;
-//# sourceMappingURL=onekijs-ui.cjs.development.js.map