@bolio-ui/core 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/chunk-APDSEVV6.js

@@ -0,0 +1,443 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkOFNHKVGZjs = require('./chunk-OFNHKVGZ.js');
+
+
+var _chunkNRSWR3C4js = require('./chunk-NRSWR3C4.js');
+
+
+var _chunkAXYDJGTNjs = require('./chunk-AXYDJGTN.js');
+
+
+var _chunk33BUV2RXjs = require('./chunk-33BUV2RX.js');
+
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Select/Select.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Select/SelectIcon.tsx
+
+
+var _jsxruntime = require('react/jsx-runtime');
+function SelectIconComponent() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { viewBox: "0 0 24 24", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", className: "jsx-2742933678", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 9l6 6 6-6", className: "jsx-2742933678" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "2742933678", children: "svg.jsx-2742933678{color:inherit;stroke:currentColor;-webkit-transition:all 200ms ease;transition:all 200ms ease;width:1.214em;height:1.214em;}" })
+  ] });
+}
+SelectIconComponent.displayName = "BolioUISelectIcon";
+var SelectIcon = _react2.default.memo(SelectIconComponent);
+var SelectIcon_default = SelectIcon;
+
+// core/Select/SelectDropdown.tsx
+
+
+
+// core/Select/SelectContext.ts
+
+var defaultContext = {
+  visible: false,
+  disableAll: false
+};
+var SelectContext = _react2.default.createContext(defaultContext);
+var useSelectContext = () => _react2.default.useContext(SelectContext);
+
+// core/Select/SelectDropdown.tsx
+
+var SelectDropdown = _react2.default.forwardRef(({
+  visible,
+  children,
+  className = "",
+  dropdownStyle = {},
+  disableMatchWidth,
+  getPopupContainer
+}, dropdownRef) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const internalDropdownRef = _react.useRef.call(void 0, null);
+  const {
+    ref
+  } = useSelectContext();
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "select-dropdown", className);
+  _react.useImperativeHandle.call(void 0, dropdownRef, () => internalDropdownRef.current);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOFNHKVGZjs.dropdown_default, { parent: ref, visible, disableMatchWidth, getPopupContainer, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: internalDropdownRef, style: dropdownStyle, className: _style2.default.dynamic([["2113247935", [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.accents_2]]]) + " " + (classes || ""), children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "2113247935", dynamic: [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.accents_2], children: `.select-dropdown.__jsx-style-dynamic-selector{border-radius:${theme.layout.radius};box-shadow:${theme.expressiveness.shadowLarge};background-color:${theme.palette.accents_2};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";
+var SelectDropdown_default = SelectDropdown;
+
+// core/Select/SelectMultipleValue.tsx
+
+
+// core/Select/SelectIconClear.tsx
+
+
+
+function SelectIconClear({
+  onClick
+}) {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const clickHandler = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    if (onClick) onClick(event);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { onClick: clickHandler, className: _style2.default.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]) + " clear-icon", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", className: _style2.default.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]), children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6L6 18", className: _style2.default.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M6 6l12 12", className: _style2.default.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "3218630561", dynamic: [theme.palette.accents_5, theme.palette.foreground], children: `.clear-icon.__jsx-style-dynamic-selector{padding:0 0 0 0.5em;margin:0;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;height:100%;cursor:pointer;box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:${theme.palette.accents_5};visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:${theme.palette.foreground};}svg.__jsx-style-dynamic-selector{color:currentColor;width:1em;height:1em;}` })
+  ] });
+}
+var MemoSelectIconClear = _react2.default.memo(SelectIconClear);
+var SelectIconClear_default = MemoSelectIconClear;
+
+// core/Select/SelectMultipleValue.tsx
+
+function SelectMultipleValue({
+  disabled,
+  onClear,
+  children
+}) {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNRSWR3C4js.Grid_default, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _style2.default.dynamic([["19398775", [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]]]) + " item", children: [
+      children,
+      !!onClear && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectIconClear_default, { onClick: onClear })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "19398775", dynamic: [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7], children: `.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:${theme.layout.radius};background-color:${theme.palette.accents_3};color:${disabled ? theme.palette.accents_5 : theme.palette.accents_7};}.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";
+var SelectMultipleValue_default = SelectMultipleValue;
+
+// core/Select/styles.ts
+var getColors = (palette, status, disabled) => {
+  const colors = {
+    default: {
+      color: palette.foreground,
+      bgColor: palette.accents_1,
+      borderColor: palette.accents_2,
+      hoverBgColor: palette.accents_1,
+      hoverBorder: palette.accents_4
+    },
+    primary: {
+      color: palette.primaryDark,
+      bgColor: palette.primaryLight,
+      borderColor: palette.primary,
+      hoverBgColor: palette.primaryLight,
+      hoverBorder: palette.primary
+    },
+    secondary: {
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLight,
+      borderColor: palette.secondary,
+      hoverBgColor: palette.secondaryLight,
+      hoverBorder: palette.secondary
+    },
+    success: {
+      color: palette.successDark,
+      bgColor: palette.successLight,
+      borderColor: palette.success,
+      hoverBgColor: palette.successLight,
+      hoverBorder: palette.success
+    },
+    warning: {
+      color: palette.warningDark,
+      bgColor: palette.warningLight,
+      borderColor: palette.warning,
+      hoverBgColor: palette.warningLight,
+      hoverBorder: palette.warning
+    },
+    error: {
+      color: palette.errorDark,
+      bgColor: palette.errorLight,
+      borderColor: palette.error,
+      hoverBgColor: palette.errorLight,
+      hoverBorder: palette.error
+    },
+    info: {
+      color: palette.infoDark,
+      bgColor: palette.infoLight,
+      borderColor: palette.info,
+      hoverBgColor: palette.infoLight,
+      hoverBorder: palette.info
+    }
+  };
+  if (disabled)
+    return {
+      color: palette.accents_6,
+      bgColor: palette.accents_2,
+      borderColor: palette.accents_3,
+      hoverBgColor: palette.accents_2,
+      hoverBorder: palette.accents_3
+    };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// core/Shared/ellipsis.tsx
+
+
+
+var Ellipsis = ({
+  children,
+  height
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _style2.default.dynamic([["822089635", [height]]]), children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "822089635", dynamic: [height], children: `span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:${height};min-width:0;}` })
+  ] });
+};
+var ellipsis_default = _react2.default.memo(Ellipsis);
+
+// core/Select/SelectInput.tsx
+
+
+
+var SelectInput = _react2.default.forwardRef(({
+  visible,
+  onBlur,
+  onFocus,
+  ariaLabel,
+  ariaLabelledby
+}, inputRef) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useImperativeHandle.call(void 0, inputRef, () => ref.current);
+  _react.useEffect.call(void 0, () => {
+    var _a;
+    if (visible) {
+      (_a = ref.current) == null ? void 0 : _a.focus();
+    }
+  }, [visible]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { ref, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, readOnly: true, unselectable: "on", "aria-expanded": visible, onBlur, onFocus, className: "jsx-2813108835" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "2813108835", children: "input.jsx-2813108835{position:fixed;top:-10000px;left:-10000px;opacity:0;z-index:-1;width:0;height:0;padding:0;font-size:0;border:none;}" })
+  ] });
+});
+SelectInput.displayName = "BolioUISelectInput";
+var SelectInput_default = SelectInput;
+
+// core/Select/Select.tsx
+
+var noop = () => {
+};
+var SelectComponent = _react2.default.forwardRef(({
+  children,
+  type = "default",
+  disabled = false,
+  initialValue: init,
+  value: customValue,
+  icon: Icon = SelectIcon_default,
+  onChange,
+  pure = false,
+  multiple = false,
+  clearable = true,
+  placeholder,
+  className = "",
+  dropdownClassName,
+  dropdownStyle,
+  disableMatchWidth = false,
+  getPopupContainer,
+  onDropdownVisibleChange = noop,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, selectRef) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const ref = _react.useRef.call(void 0, null);
+  const inputRef = _react.useRef.call(void 0, null);
+  const dropdownRef = _react.useRef.call(void 0, null);
+  const [visible, setVisible] = _react.useState.call(void 0, false);
+  const [selectFocus, setSelectFocus] = _react.useState.call(void 0, false);
+  const [value, setValue, valueRef] = _chunk33BUV2RXjs.use_current_state_default.call(void 0, () => {
+    if (!multiple) return init;
+    if (Array.isArray(init)) return init;
+    return typeof init === "undefined" ? [] : [init];
+  });
+  const isEmpty = _react.useMemo.call(void 0, () => {
+    if (!Array.isArray(value)) return !value;
+    return value.length === 0;
+  }, [value]);
+  const colors = _react.useMemo.call(void 0, () => getColors(theme.palette, type, disabled), [theme.palette, type, disabled]);
+  const updateVisible = _react.useCallback.call(void 0, (next) => {
+    onDropdownVisibleChange(next);
+    setVisible(next);
+  }, [onDropdownVisibleChange]);
+  const updateValue = _react.useCallback.call(void 0, (next) => {
+    setValue((last) => {
+      if (!Array.isArray(last)) return next;
+      if (!last.includes(next)) return [...last, next];
+      return last.filter((item) => item !== next);
+    });
+    if (onChange) onChange(valueRef.current);
+    if (!multiple) {
+      updateVisible(false);
+    }
+  }, [setValue, onChange, valueRef, multiple, updateVisible]);
+  const initialValue = _react.useMemo.call(void 0, () => ({
+    value,
+    visible,
+    updateValue,
+    updateVisible,
+    ref,
+    disableAll: disabled
+  }), [visible, disabled, ref, value, updateValue, updateVisible]);
+  const clickHandler = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (disabled) return;
+    updateVisible(!visible);
+    event.preventDefault();
+  };
+  const mouseDownHandler = (event) => {
+    if (visible) {
+      event.preventDefault();
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    if (customValue === void 0) return;
+    setValue(customValue);
+  }, [customValue, setValue]);
+  _react.useImperativeHandle.call(void 0, selectRef, () => ({
+    focus: () => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.blur();
+    },
+    scrollTo: (options) => {
+      var _a;
+      return (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(options);
+    }
+  }), [inputRef, dropdownRef]);
+  const selectedChild = _react.useMemo.call(void 0, () => {
+    const [, optionChildren] = _chunkUX2B3G6Ujs.pickChildByProps.call(void 0, children, "value", value);
+    return _react2.default.Children.map(optionChildren, (child) => {
+      if (!_react2.default.isValidElement(child)) return null;
+      const el = _react2.default.cloneElement(child, {
+        preventAllEvents: true
+      });
+      if (!multiple) return el;
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectMultipleValue_default, { disabled, onClear: clearable ? () => updateValue(child.props.value) : null, children: el });
+    });
+  }, [value, children, multiple, clearable, disabled, updateValue]);
+  const onInputBlur = () => {
+    updateVisible(false);
+    setSelectFocus(false);
+  };
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "select", {
+    active: selectFocus || visible,
+    multiple
+  }, className);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContext.Provider, { value: initialValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, onClick: clickHandler, onMouseDown: mouseDownHandler, ...props, className: _style2.default.dynamic([["3975230790", [disabled ? "not-allowed" : "pointer", colors.borderColor, theme.layout.radius, colors.bgColor, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? "180" : "0", colors.color]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectInput_default, { ref: inputRef, ariaLabel: ariaLabel || (typeof placeholder === "string" ? placeholder : void 0), ariaLabelledby, visible, onBlur: onInputBlur, onFocus: () => setSelectFocus(true) }),
+    isEmpty && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _style2.default.dynamic([["3975230790", [disabled ? "not-allowed" : "pointer", colors.borderColor, theme.layout.radius, colors.bgColor, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? "180" : "0", colors.color]]]) + " value placeholder", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ellipsis_default, { height: "var(--select-height)", children: placeholder }) }),
+    value && !multiple && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _style2.default.dynamic([["3975230790", [disabled ? "not-allowed" : "pointer", colors.borderColor, theme.layout.radius, colors.bgColor, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? "180" : "0", colors.color]]]) + " value", children: selectedChild }),
+    value && multiple && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNRSWR3C4js.Grid_default.Container, { gap: 0.5, children: selectedChild }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectDropdown_default, { ref: dropdownRef, visible, className: dropdownClassName, dropdownStyle, disableMatchWidth, getPopupContainer, children }),
+    !pure && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _style2.default.dynamic([["3975230790", [disabled ? "not-allowed" : "pointer", colors.borderColor, theme.layout.radius, colors.bgColor, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? "180" : "0", colors.color]]]) + " icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: _style2.default.dynamic([["3975230790", [disabled ? "not-allowed" : "pointer", colors.borderColor, theme.layout.radius, colors.bgColor, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? "180" : "0", colors.color]]]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "3975230790", dynamic: [disabled ? "not-allowed" : "pointer", colors.borderColor, theme.layout.radius, colors.bgColor, 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), colors.hoverBorder, colors.hoverBgColor, colors.color, colors.color, colors.color, SCALES.font(0.775), theme.layout.gapQuarter, visible ? "180" : "0", colors.color], children: `.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:${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 ${colors.borderColor};border-radius:${theme.layout.radius};background-color:${colors.bgColor};--select-font-size:${SCALES.font(0.875)};--select-height:${SCALES.height(2.25)};min-width:11.5em;width:${SCALES.width(1, "initial")};height:var(--select-height);padding:${SCALES.pt(0)} ${SCALES.pr(0.334)} ${SCALES.pb(0)} ${SCALES.pl(0.667)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:${SCALES.pt(0.334)} ${SCALES.pr(0.334)} ${SCALES.pb(0.334)} ${SCALES.pl(0.667)};}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:${colors.hoverBorder};background-color:${colors.hoverBgColor};}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:${colors.color};}.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:${colors.color};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:${colors.color};font-size:${SCALES.font(0.775)};}.icon.__jsx-style-dynamic-selector{position:absolute;right:${theme.layout.gapQuarter};font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(${visible ? "180" : "0"}deg);-ms-transform:translateY(-50%) rotate(${visible ? "180" : "0"}deg);transform:translateY(-50%) rotate(${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:${colors.color};}` })
+  ] }) });
+});
+SelectComponent.displayName = "BolioUISelect";
+var Select = _chunkS62PPQHNjs.with_scale_default.call(void 0, SelectComponent);
+var Select_default = Select;
+
+// core/Select/SelectOption.tsx
+
+
+
+function SelectOptionComponent({
+  value: identValue = "",
+  className = "",
+  children,
+  disabled = false,
+  divider = false,
+  label = false,
+  preventAllEvents = false,
+  ...props
+}) {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const {
+    updateValue,
+    value,
+    disableAll
+  } = useSelectContext();
+  const isDisabled = _react.useMemo.call(void 0, () => disabled || disableAll, [disabled, disableAll]);
+  const isLabel = _react.useMemo.call(void 0, () => label || divider, [label, divider]);
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "option", {
+    divider,
+    label
+  }, className);
+  if (!isLabel && identValue === void 0) {
+    _chunkAXYDJGTNjs.log_warning_default.call(void 0, 'The props "value" is required.', "Select Option");
+  }
+  const selected = _react.useMemo.call(void 0, () => {
+    if (!value) return false;
+    if (typeof value === "string") {
+      return identValue === value;
+    }
+    return value.includes(`${identValue}`);
+  }, [identValue, value]);
+  const bgColor = _react.useMemo.call(void 0, () => {
+    if (isDisabled) return theme.palette.accents_3;
+    return selected ? theme.palette.accents_3 : theme.palette.accents_2;
+  }, [selected, isDisabled, theme.palette]);
+  const hoverBgColor = _react.useMemo.call(void 0, () => {
+    if (isDisabled || isLabel || selected) return bgColor;
+    return theme.palette.accents_1;
+  }, [selected, isDisabled, theme.palette, isLabel, bgColor]);
+  const color = _react.useMemo.call(void 0, () => {
+    if (isDisabled) return theme.palette.accents_4;
+    return selected ? theme.palette.foreground : theme.palette.accents_5;
+  }, [selected, isDisabled, theme.palette]);
+  const clickHandler = (event) => {
+    if (preventAllEvents) return;
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (isDisabled || isLabel) return;
+    if (updateValue) updateValue(identValue);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { onClick: clickHandler, ...props, className: _style2.default.dynamic([["1995693354", [bgColor, color, isDisabled ? "not-allowed" : "pointer", SCALES.font(0.75), SCALES.width(1, "100%"), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, "100%"), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, "100%")]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ellipsis_default, { height: SCALES.height(2.25), children }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "1995693354", dynamic: [bgColor, color, isDisabled ? "not-allowed" : "pointer", SCALES.font(0.75), SCALES.width(1, "100%"), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.accents_3, SCALES.width(1, "100%"), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.accents_3, SCALES.font(0.875), SCALES.width(1, "100%")], children: `.option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:${bgColor};color:${color};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:${isDisabled ? "not-allowed" : "pointer"};-webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s;transition: background 0.2s ease 0s, border-color 0.2s ease 0s;--select-font-size:${SCALES.font(0.75)};font-size:var(--select-font-size);width:${SCALES.width(1, "100%")};height:${SCALES.height(2.25)};padding:${SCALES.pt(0)} ${SCALES.pr(0.667)} ${SCALES.pb(0)} ${SCALES.pl(0.667)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.option.__jsx-style-dynamic-selector:hover{background-color:${hoverBgColor};color:${theme.palette.accents_7};}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ${theme.palette.accents_3};width:${SCALES.width(1, "100%")};height:${SCALES.height(1, 0)};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0.5)} ${SCALES.mr(0)} ${SCALES.mb(0.5)} ${SCALES.ml(0)};}.label.__jsx-style-dynamic-selector{color:${theme.palette.accents_7};border-bottom:1px solid ${theme.palette.accents_3};text-transform:capitalize;cursor:default;font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "100%")};font-weight:500;}` })
+  ] });
+}
+SelectOptionComponent.displayName = "BolioUISelectOption";
+var SelectOption = _chunkS62PPQHNjs.with_scale_default.call(void 0, SelectOptionComponent);
+var SelectOption_default = SelectOption;
+
+// core/Select/index.ts
+Select_default.Option = SelectOption_default;
+var Select_default2 = Select_default;
+
+
+
+exports.Select_default = Select_default2;

package/dist/chunk-AXYDJGTN.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/log-warning.ts
+var warningStack = {};
+var logWarning = (message, component) => {
+  const tag = component ? ` [${component}]` : " ";
+  const log = `[Bolio UI]${tag}: ${message}`;
+  if (typeof console === "undefined") return;
+  if (warningStack[log]) return;
+  warningStack[log] = true;
+  if (process.env.NODE_ENV !== "production") {
+    return console.error(log);
+  }
+  console.warn(log);
+};
+var log_warning_default = logWarning;
+
+
+
+exports.log_warning_default = log_warning_default;

package/dist/chunk-BDEBNBW6.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Loading/Loading.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _jsxruntime = require('react/jsx-runtime');
+var getIconBgColor = (type, palette, color) => {
+  const colors = {
+    default: palette.accents_6,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  return color ? color : colors[type];
+};
+var LoadingComponent = _react2.default.forwardRef(({
+  children,
+  type = "default",
+  color,
+  className = "",
+  spaceRatio = 1,
+  ...props
+}, ref) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "loading-container", className);
+  const bgColor = _react.useMemo.call(void 0, () => getIconBgColor(type, theme.palette, color), [type, theme.palette, color]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, role: "status", ...props, className: _style2.default.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _style2.default.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) + " loading", children: [
+      children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: _style2.default.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]), children }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "i", { className: _style2.default.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "i", { className: _style2.default.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "i", { className: _style2.default.dynamic([["1090444014", [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio]]]) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "1090444014", dynamic: [SCALES.font(1), SCALES.width(1, "100%"), SCALES.height(1, "100%"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_5, bgColor, spaceRatio], children: `.loading-container.__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;position:relative;font-size:${SCALES.font(1)};width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "100%")};min-height:1em;padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}label.__jsx-style-dynamic-selector{margin-right:0.5em;color:${theme.palette.accents_5};line-height:1;}label.__jsx-style-dynamic-selector *{margin:0;}.loading.__jsx-style-dynamic-selector{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}i.__jsx-style-dynamic-selector{width:0.25em;height:0.25em;border-radius:50%;background-color:${bgColor};margin:0 calc(0.25em / 2 * ${spaceRatio});display:inline-block;-webkit-animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;animation:loading-blink-__jsx-style-dynamic-selector 1.4s infinite both;}i.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:0.2s;animation-delay:0.2s;}i.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}@keyframes loading-blink-__jsx-style-dynamic-selector{0%{opacity:0.2;}20%{opacity:1;}100%{opacity:0.2;}}` })
+  ] });
+});
+LoadingComponent.displayName = "BolioUILoading";
+var Loading = _chunkS62PPQHNjs.with_scale_default.call(void 0, LoadingComponent);
+var Loading_default = Loading;
+
+// core/Loading/index.ts
+var Loading_default2 = Loading_default;
+
+
+
+exports.Loading_default = Loading_default2;

package/dist/chunk-BSDZWWUS.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// core/utils/use-default-props.ts
+var useDefaultProps = (props, defaultProps) => {
+  const nextProps = {};
+  const propsKeys = Object.keys(props || {});
+  const defaultKeys = Object.keys(defaultProps || {});
+  for (const propsName of propsKeys) {
+    nextProps[propsName] = props[propsName];
+  }
+  for (const defaultName of defaultKeys) {
+    if (props[defaultName] === void 0) {
+      nextProps[defaultName] = defaultProps[defaultName];
+    }
+  }
+  return nextProps;
+};
+var use_default_props_default = useDefaultProps;
+
+
+
+exports.use_default_props_default = use_default_props_default;

package/dist/chunk-BXDUHMWS.js

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkZRORQ2WHjs = require('./chunk-ZRORQ2WH.js');
+
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+// core/utils/use-portal.ts
+var _react = require('react');
+
+// core/utils/use-ssr.ts
+
+var useSSR = () => {
+  const [browser, setBrowser] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    setBrowser(_chunkUX2B3G6Ujs.isBrowser.call(void 0, ));
+  }, []);
+  return {
+    isBrowser: browser,
+    isServer: !browser
+  };
+};
+var use_ssr_default = useSSR;
+
+// core/utils/use-portal.ts
+var createElement = (id) => {
+  const el = document.createElement("div");
+  el.setAttribute("id", id);
+  return el;
+};
+var usePortal = (selectId, getContainer) => {
+  const [generatedId] = _react.useState.call(void 0, _chunkUX2B3G6Ujs.getId);
+  const id = `bolio-ui-${selectId != null ? selectId : generatedId}`;
+  const { isBrowser: isBrowser2 } = use_ssr_default();
+  const [elSnapshot, setElSnapshot] = _react.useState.call(void 0, 
+    isBrowser2 ? createElement(id) : null
+  );
+  const getContainerRef = _chunkZRORQ2WHjs.use_latest_default.call(void 0, getContainer);
+  _react.useEffect.call(void 0, () => {
+    const getContainer2 = getContainerRef.current;
+    const customContainer = getContainer2 ? getContainer2() : null;
+    const parentElement = customContainer || document.body;
+    const hasElement = parentElement.querySelector(`#${id}`);
+    const el = hasElement || createElement(id);
+    if (!hasElement) {
+      parentElement.appendChild(el);
+    }
+    setElSnapshot(el);
+  }, [id, getContainerRef]);
+  return elSnapshot;
+};
+var use_portal_default = usePortal;
+
+
+
+exports.use_portal_default = use_portal_default;