@bolio-ui/core 1.0.4 → 1.0.5

package/esm/Rating/stories.js

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Rating from '.';
+import Grid from '../Grid';
+import { Umbrella, Zap } from '@bolio-ui/icons';
+export default {
+  title: 'Feedback/Rating',
+  component: Rating
+};
+export var Default = function Default() {
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      locked = _useState4[0],
+      setLocked = _useState4[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    onLockedChange: setLocked,
+    value: value,
+    onValueChange: setValue
+  })), /*#__PURE__*/React.createElement(Grid, null, "Selection: ", value), /*#__PURE__*/React.createElement(Grid, null, "Locked: ", locked ? 'true' : 'false'));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "primary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "secondary"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "success"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "error"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "warning"
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    type: "info"
+  })));
+};
+export var CustomAmount = function CustomAmount() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    count: 2
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    value: 3,
+    count: 6
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    value: 4,
+    count: 8
+  })));
+};
+export var Icon = function Icon() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    value: 4,
+    count: 6,
+    type: "success",
+    icon: /*#__PURE__*/React.createElement(Umbrella, null)
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Rating, {
+    count: 7,
+    type: "error",
+    icon: /*#__PURE__*/React.createElement(Zap, null)
+  })));
+};

package/esm/Row/Row.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+declare type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+declare type Align = 'top' | 'middle' | 'bottom';
+interface Props {
+    gap?: number;
+    justify?: Justify;
+    align?: Align;
+    component?: keyof JSX.IntrinsicElements;
+    className?: string;
+}
+declare const defaultProps: {
+    gap: number;
+    justify: Justify;
+    align: Align;
+    component: keyof JSX.IntrinsicElements;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type RowProps = Props & NativeAttrs;
+declare function Row({ children, component, gap, justify, align, className, ...props }: React.PropsWithChildren<RowProps> & typeof defaultProps): JSX.Element;
+declare namespace Row {
+    var defaultProps: {
+        gap: number;
+        justify: Justify;
+        align: Align;
+        component: keyof JSX.IntrinsicElements;
+        className: string;
+    };
+    var displayName: string;
+}
+export default Row;

package/esm/Row/index.d.ts

@@ -0,0 +1,3 @@
+import Row from "./Row";
+export type { RowProps } from "./Row";
+export default Row;

package/esm/Row/index.js

@@ -0,0 +1,2 @@
+import Row from './Row';
+export default Row;

package/esm/Section/Section.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type SectionTypes = NormalTypes;
+interface Props {
+    bg?: string;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type SectionProps = Props & NativeAttrs;
+declare const Section: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Section;

package/esm/Section/index.d.ts

@@ -0,0 +1,3 @@
+import Section from "./Section";
+export type { SectionProps, SectionTypes } from "./Section";
+export default Section;

package/esm/Section/index.js

@@ -0,0 +1,2 @@
+import Section from './Section';
+export default Section;

package/esm/Select/Select.d.ts

@@ -0,0 +1,30 @@
+import React, { CSSProperties } from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type SelectRef = {
+    focus: () => void;
+    blur: () => void;
+    scrollTo?: (options?: ScrollToOptions) => void;
+};
+export declare type SelectTypes = NormalTypes;
+interface Props {
+    disabled?: boolean;
+    type?: SelectTypes;
+    value?: string | string[];
+    initialValue?: string | string[];
+    placeholder?: React.ReactNode | string;
+    icon?: React.ComponentType;
+    onChange?: (value: string | string[]) => void;
+    pure?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    className?: string;
+    dropdownClassName?: string;
+    dropdownStyle?: CSSProperties;
+    disableMatchWidth?: boolean;
+    onDropdownVisibleChange?: (visible: boolean) => void;
+    getPopupContainer?: () => HTMLElement | null;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type SelectProps = Props & NativeAttrs;
+declare const Select: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<SelectRef> & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<SelectRef>>;
+export default Select;

package/esm/Select/Select.js

@@ -0,0 +1,244 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useCurrentState from '../utils/use-current-state';
+import { pickChildByProps } from '../utils/collections';
+import SelectIcon from './SelectIcon';
+import SelectDropdown from './SelectDropdown';
+import SelectMultipleValue from './SelectMultipleValue';
+import Grid from '../Grid';
+import { SelectContext } from './SelectContext';
+import { getColors } from './styles';
+import Ellipsis from '../Shared/ellipsis';
+import SelectInput from './SelectInput';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var defaultProps = {
+  disabled: false,
+  type: 'default',
+  icon: SelectIcon,
+  pure: false,
+  multiple: false,
+  clearable: true,
+  className: '',
+  disableMatchWidth: false,
+  onDropdownVisibleChange: function onDropdownVisibleChange() {}
+};
+var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      init = _ref.initialValue,
+      customValue = _ref.value,
+      _ref$icon = _ref.icon,
+      Icon = _ref$icon === void 0 ? SelectIcon : _ref$icon,
+      onChange = _ref.onChange,
+      _ref$pure = _ref.pure,
+      pure = _ref$pure === void 0 ? false : _ref$pure,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$clearable = _ref.clearable,
+      clearable = _ref$clearable === void 0 ? true : _ref$clearable,
+      placeholder = _ref.placeholder,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      dropdownClassName = _ref.dropdownClassName,
+      dropdownStyle = _ref.dropdownStyle,
+      _ref$disableMatchWidt = _ref.disableMatchWidth,
+      disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
+      getPopupContainer = _ref.getPopupContainer,
+      _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
+      onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var ref = useRef(null);
+  var inputRef = useRef(null);
+  var dropdownRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectFocus = _useState4[0],
+      setSelectFocus = _useState4[1];
+
+  var _useCurrentState = useCurrentState(function () {
+    if (!multiple) return init;
+    if (Array.isArray(init)) return init;
+    return typeof init === 'undefined' ? [] : [init];
+  }),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      value = _useCurrentState2[0],
+      setValue = _useCurrentState2[1],
+      valueRef = _useCurrentState2[2];
+
+  var isEmpty = useMemo(function () {
+    if (!Array.isArray(value)) return !value;
+    return value.length === 0;
+  }, [value]);
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      border = _useMemo.border,
+      borderActive = _useMemo.borderActive,
+      iconBorder = _useMemo.iconBorder,
+      placeholderColor = _useMemo.placeholderColor;
+
+  var updateVisible = function updateVisible(next) {
+    onDropdownVisibleChange(next);
+    setVisible(next);
+  };
+
+  var updateValue = function updateValue(next) {
+    setValue(function (last) {
+      if (!Array.isArray(last)) return next;
+      if (!last.includes(next)) return [].concat(_toConsumableArray(last), [next]);
+      return last.filter(function (item) {
+        return item !== next;
+      });
+    });
+    onChange && onChange(valueRef.current);
+
+    if (!multiple) {
+      updateVisible(false);
+    }
+  };
+
+  var initialValue = useMemo(function () {
+    return {
+      value: value,
+      visible: visible,
+      updateValue: updateValue,
+      updateVisible: updateVisible,
+      ref: ref,
+      disableAll: disabled
+    };
+  }, [visible, disabled, ref, value, multiple]);
+
+  var clickHandler = function clickHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (disabled) return;
+    updateVisible(!visible);
+    event.preventDefault();
+  };
+
+  var mouseDownHandler = function mouseDownHandler(event) {
+    /* istanbul ignore next */
+    if (visible) {
+      event.preventDefault();
+    }
+  };
+
+  useEffect(function () {
+    if (customValue === undefined) return;
+    setValue(customValue);
+  }, [customValue]);
+  useImperativeHandle(selectRef, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current;
+
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
+
+        return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      },
+      scrollTo: function scrollTo(options) {
+        var _dropdownRef$current;
+
+        return (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.scrollTo(options);
+      }
+    };
+  }, [inputRef, dropdownRef]);
+  var selectedChild = useMemo(function () {
+    var _pickChildByProps = pickChildByProps(children, 'value', value),
+        _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
+        optionChildren = _pickChildByProps2[1];
+
+    return React.Children.map(optionChildren, function (child) {
+      if (! /*#__PURE__*/React.isValidElement(child)) return null;
+      var el = /*#__PURE__*/React.cloneElement(child, {
+        preventAllEvents: true
+      });
+      if (!multiple) return el;
+      return /*#__PURE__*/React.createElement(SelectMultipleValue, {
+        disabled: disabled,
+        onClear: clearable ? function () {
+          return updateValue(child.props.value);
+        } : null
+      }, el);
+    });
+  }, [value, children, multiple]);
+
+  var onInputBlur = function onInputBlur() {
+    updateVisible(false);
+    setSelectFocus(false);
+  };
+
+  var classes = useClasses('select', {
+    active: selectFocus || visible,
+    multiple: multiple
+  }, className);
+  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement(SelectInput, {
+    ref: inputRef,
+    visible: visible,
+    onBlur: onInputBlur,
+    onFocus: function onFocus() {
+      return setSelectFocus(true);
+    }
+  }), isEmpty && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value placeholder"
+  }, /*#__PURE__*/React.createElement(Ellipsis, {
+    height: "var(--select-height)"
+  }, placeholder)), value && !multiple && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value"
+  }, selectedChild), value && multiple && /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 0.5
+  }, selectedChild), /*#__PURE__*/React.createElement(SelectDropdown, {
+    ref: dropdownRef,
+    visible: visible,
+    className: dropdownClassName,
+    dropdownStyle: dropdownStyle,
+    disableMatchWidth: disableMatchWidth,
+    getPopupContainer: getPopupContainer
+  }, children), !pure && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: _JSXStyle.dynamic([["3089088549", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3089088549",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]
+  }, ".select.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:90vw;overflow:hidden;-webkit-transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;border:1px solid ").concat(border, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(disabled ? theme.palette.accents_1 : theme.palette.background, ";--select-font-size:").concat(SCALES.font(0.875), ";--select-height:").concat(SCALES.height(2.25), ";min-width:11.5em;width:").concat(SCALES.width(1, 'initial'), ";height:var(--select-height);padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.667), ";}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:").concat(disabled ? theme.palette.border : borderActive, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(disabled ? theme.palette.accents_5 : borderActive, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25em;font-size:var(--select-font-size);color:").concat(disabled ? theme.palette.accents_4 : theme.palette.foreground, ";width:calc(100% - 1.25em);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(placeholderColor, ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(iconBorder, ";}"))));
+});
+SelectComponent.defaultProps = defaultProps;
+SelectComponent.displayName = 'BolioUISelect';
+var Select = withScale(SelectComponent);
+export default Select;

package/esm/Select/SelectContext.d.ts

@@ -0,0 +1,11 @@
+import React, { MutableRefObject } from 'react';
+export interface SelectConfig {
+    value?: string | string[];
+    updateValue?: (next: string) => unknown;
+    visible?: boolean;
+    updateVisible?: (next: boolean) => unknown;
+    disableAll?: boolean;
+    ref?: MutableRefObject<HTMLElement | null>;
+}
+export declare const SelectContext: React.Context<SelectConfig>;
+export declare const useSelectContext: () => SelectConfig;

package/esm/Select/SelectDropdown.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from 'react';
+interface Props {
+    visible: boolean;
+    className?: string;
+    dropdownStyle?: CSSProperties;
+    disableMatchWidth?: boolean;
+    getPopupContainer?: () => HTMLElement | null;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type SelectDropdownProps = Props & NativeAttrs;
+declare const SelectDropdown: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement | null>>;
+export default SelectDropdown;

package/esm/Select/SelectDropdown.js

@@ -0,0 +1,41 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useImperativeHandle, useRef } from 'react';
+import useTheme from '../use-theme';
+import { useSelectContext } from './SelectContext';
+import Dropdown from '../Shared/dropdown';
+import useClasses from '../use-classes';
+var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef) {
+  var visible = _ref.visible,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$dropdownStyle = _ref.dropdownStyle,
+      dropdownStyle = _ref$dropdownStyle === void 0 ? {} : _ref$dropdownStyle,
+      disableMatchWidth = _ref.disableMatchWidth,
+      getPopupContainer = _ref.getPopupContainer;
+  var theme = useTheme();
+  var internalDropdownRef = useRef(null);
+
+  var _useSelectContext = useSelectContext(),
+      ref = _useSelectContext.ref;
+
+  var classes = useClasses('select-dropdown', className);
+  useImperativeHandle(dropdownRef, function () {
+    return internalDropdownRef.current;
+  });
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    parent: ref,
+    visible: visible,
+    disableMatchWidth: disableMatchWidth,
+    getPopupContainer: getPopupContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: internalDropdownRef,
+    style: dropdownStyle,
+    className: _JSXStyle.dynamic([["2782510679", [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.background]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2782510679",
+    dynamic: [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.background]
+  }, ".select-dropdown.__jsx-style-dynamic-selector{border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";background-color:").concat(theme.palette.background, ";max-height:17em;overflow-y:auto;overflow-anchor:none;padding:0.38em 0;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}"))));
+});
+SelectDropdown.displayName = 'BolioUISelectDropdown';
+export default SelectDropdown;

package/esm/Select/SelectIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare function SelectIconComponent(): JSX.Element;
+declare namespace SelectIconComponent {
+    var displayName: string;
+}
+declare const SelectIcon: React.MemoExoticComponent<typeof SelectIconComponent>;
+export default SelectIcon;

package/esm/Select/SelectIconClear.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare function SelectIconClear({ onClick }: Props): JSX.Element;
+declare const MemoSelectIconClear: React.MemoExoticComponent<typeof SelectIconClear>;
+export default MemoSelectIconClear;

package/esm/Select/SelectInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type SelectInputProps = {
+    visible: boolean;
+    onBlur: () => void;
+    onFocus: () => void;
+};
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLInputElement | null>>;
+export default SelectInput;

package/esm/Select/SelectMultipleValue.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    disabled: boolean;
+    onClear: (() => void) | null;
+    children: React.ReactNode;
+}
+declare function SelectMultipleValue({ disabled, onClear, children }: Props): JSX.Element;
+declare namespace SelectMultipleValue {
+    var displayName: string;
+}
+export default SelectMultipleValue;

package/esm/Select/SelectMultipleValue.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import Grid from '../Grid';
+import SelectClearIcon from './SelectIconClear';
+
+function SelectMultipleValue(_ref) {
+  var disabled = _ref.disabled,
+      onClear = _ref.onClear,
+      children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1576722377", [theme.layout.radius, theme.palette.accents_2, disabled ? theme.palette.accents_4 : theme.palette.accents_6]]]) + " " + "item"
+  }, children, !!onClear && /*#__PURE__*/React.createElement(SelectClearIcon, {
+    onClick: onClear
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1576722377",
+    dynamic: [theme.layout.radius, theme.palette.accents_2, disabled ? theme.palette.accents_4 : theme.palette.accents_6]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0 0.5em;font-size:var(--select-font-size);height:calc(var(--select-font-size) * 2);border-radius:".concat(theme.layout.radius, ";background-color:").concat(theme.palette.accents_2, ";color:").concat(disabled ? theme.palette.accents_4 : theme.palette.accents_6, ";}.item.__jsx-style-dynamic-selector>div:not(.clear-icon),.item.__jsx-style-dynamic-selector>div:not(.clear-icon):hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}")));
+}
+
+SelectMultipleValue.displayName = 'BolioUISelectMultipleValue';
+export default SelectMultipleValue;

package/esm/Select/SelectOption.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    value?: string;
+    disabled?: boolean;
+    className?: string;
+    divider?: boolean;
+    label?: boolean;
+    preventAllEvents?: boolean;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type SelectOptionProps = Props & NativeAttrs;
+declare const SelectOption: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default SelectOption;