@bolio-ui/core 1.1.7 → 2.0.0-alpha.0

package/esm/Row/Row.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "component", "gap", "justify", "align", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 var defaultProps = {
@@ -11,7 +11,6 @@ var defaultProps = {
   component: 'div',
   className: ''
 };
-
 var getFlexAlignment = function getFlexAlignment(justify, align) {
   var flexJustifyMap = {
     end: 'flex-end',
@@ -28,33 +27,34 @@ var getFlexAlignment = function getFlexAlignment(justify, align) {
     alignValue: flexAlignMap[align] || 'normal'
   };
 };
-
-function Row(_ref) {
+var Row = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      component = _ref.component,
-      gap = _ref.gap,
-      justify = _ref.justify,
-      align = _ref.align,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$component = _ref.component,
+    component = _ref$component === void 0 ? defaultProps.component : _ref$component,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? defaultProps.gap : _ref$gap,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? defaultProps.justify : _ref$justify,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? defaultProps.align : _ref$align,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? defaultProps.className : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var Component = component;
   var theme = useTheme();
-
   var _useMemo = useMemo(function () {
-    return getFlexAlignment(justify, align);
-  }, [justify, align]),
-      justifyValue = _useMemo.justifyValue,
-      alignValue = _useMemo.alignValue;
-
-  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-    className: _JSXStyle.dynamic([["2529451939", [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "row ".concat(className))
+      return getFlexAlignment(justify, align);
+    }, [justify, align]),
+    justifyValue = _useMemo.justifyValue,
+    alignValue = _useMemo.alignValue;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2627703425", [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]]]) + " " + (props && props.className != null && props.className || "row ".concat(className))
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2529451939",
+    id: "2627703425",
     dynamic: [gap, theme.layout.gap, gap, theme.layout.gap, gap, theme.layout.gap, justifyValue, alignValue]
   }, ".row.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;box-sizing:border-box;margin-left:calc(".concat(gap, " * ").concat(theme.layout.gap, " / 2);margin-right:calc(").concat(gap, " * ").concat(theme.layout.gap, " / 2);--row-gap:calc(").concat(gap, " * ").concat(theme.layout.gap, ");-webkit-box-pack:").concat(justifyValue, ";-webkit-justify-content:").concat(justifyValue, ";-ms-flex-pack:").concat(justifyValue, ";justify-content:").concat(justifyValue, ";-webkit-align-items:").concat(alignValue, ";-webkit-box-align:").concat(alignValue, ";-ms-flex-align:").concat(alignValue, ";align-items:").concat(alignValue, ";}")));
-}
-
-Row.defaultProps = defaultProps;
+});
 Row.displayName = 'BolioUIRow';
 export default Row;

package/esm/Row/index.d.ts

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

package/esm/Row/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Row from './Row';
 export default Row;

package/esm/Section/Section.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type SectionTypes = NormalTypes;
+import { NormalTypes } from '../utils/prop-types';
+export 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<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type SectionProps = Props & NativeAttrs;
+declare const Section: import("../use-scale/with-scale").ScaleComponent<HTMLElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Section;

package/esm/Section/Section.js

@@ -1,30 +1,28 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "bg", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function SectionComponent(_ref) {
+var SectionComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$bg = _ref.bg,
-      bg = _ref$bg === void 0 ? 'transparent' : _ref$bg,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$bg = _ref.bg,
+    bg = _ref$bg === void 0 ? 'transparent' : _ref$bg,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  return /*#__PURE__*/React.createElement("section", _extends({}, props, {
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("section", _extends({
+    ref: ref
+  }, props, {
     className: _JSXStyle.dynamic([["1871933825", [bg, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('section', className) || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1871933825",
     dynamic: [bg, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, "section.__jsx-style-dynamic-selector{background-color:".concat(bg, ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
-}
-
+});
 SectionComponent.displayName = 'BolioUISection';
 var Section = withScale(SectionComponent);
 export default Section;

package/esm/Section/index.d.ts

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

package/esm/Section/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Section from './Section';
 export default Section;

package/esm/Select/Select.d.ts

@@ -1,11 +1,11 @@
 import React, { CSSProperties } from 'react';
-import { NormalTypes } from "../utils/prop-types";
-export declare type SelectRef = {
+import { NormalTypes } from '../utils/prop-types';
+export type SelectRef = {
     focus: () => void;
     blur: () => void;
     scrollTo?: (options?: ScrollToOptions) => void;
 };
-export declare type SelectTypes = NormalTypes;
+export type SelectTypes = NormalTypes;
 interface Props {
     disabled?: boolean;
     type?: SelectTypes;
@@ -24,7 +24,9 @@ interface Props {
     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, "slot" | "style" | "title" | "children" | keyof import("../use-scale").ScaleProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | keyof Props> & React.RefAttributes<SelectRef>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SelectProps = Props & NativeAttrs;
+declare const Select: import("../use-scale/with-scale").ScaleComponent<SelectRef, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<SelectRef>>;
 export default Select;

package/esm/Select/Select.js

@@ -2,8 +2,8 @@ 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";
+var _excluded = ["children", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange", "aria-label", "aria-labelledby"];
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import useTheme from '../use-theme';
 import useCurrentState from '../utils/use-current-state';
@@ -31,62 +31,57 @@ var defaultProps = {
 };
 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);
-
+    _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,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    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];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectFocus = _useState4[0],
-      setSelectFocus = _useState4[1];
-
+    _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];
-
+      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;
@@ -94,12 +89,10 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var colors = useMemo(function () {
     return getColors(theme.palette, type, disabled);
   }, [theme.palette, type, disabled]);
-
   var updateVisible = function updateVisible(next) {
     onDropdownVisibleChange(next);
     setVisible(next);
   };
-
   var updateValue = function updateValue(next) {
     setValue(function (last) {
       if (!Array.isArray(last)) return next;
@@ -109,12 +102,10 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
       });
     });
     onChange && onChange(valueRef.current);
-
     if (!multiple) {
       updateVisible(false);
     }
   };
-
   var initialValue = useMemo(function () {
     return {
       value: value,
@@ -125,7 +116,6 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
       disableAll: disabled
     };
   }, [visible, disabled, ref, value, multiple]);
-
   var clickHandler = function clickHandler(event) {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
@@ -134,14 +124,12 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     updateVisible(!visible);
     event.preventDefault();
   };
-
   var mouseDownHandler = function mouseDownHandler(event) {
     /* istanbul ignore next */
     if (visible) {
       event.preventDefault();
     }
   };
-
   useEffect(function () {
     if (customValue === undefined) return;
     setValue(customValue);
@@ -150,26 +138,22 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     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];
-
+      _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, {
@@ -184,12 +168,10 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
       }, el);
     });
   }, [value, children, multiple]);
-
   var onInputBlur = function onInputBlur() {
     updateVisible(false);
     setSelectFocus(false);
   };
-
   var classes = useClasses('select', {
     active: selectFocus || visible,
     multiple: multiple
@@ -204,6 +186,8 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     className: _JSXStyle.dynamic([["12953029", [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 || "")
   }), /*#__PURE__*/React.createElement(SelectInput, {
     ref: inputRef,
+    ariaLabel: ariaLabel || (typeof placeholder === 'string' ? placeholder : undefined),
+    ariaLabelledby: ariaLabelledby,
     visible: visible,
     onBlur: onInputBlur,
     onFocus: function onFocus() {

package/esm/Select/SelectDropdown.d.ts

@@ -6,8 +6,8 @@ interface Props {
     disableMatchWidth?: boolean;
     getPopupContainer?: () => HTMLElement | null;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type SelectDropdownProps = Props & NativeAttrs;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SelectDropdownProps = Props & NativeAttrs;
 declare const SelectDropdown: React.ForwardRefExoticComponent<Props & NativeAttrs & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement | null>>;

package/esm/Select/SelectDropdown.js

@@ -1,4 +1,4 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useImperativeHandle, useRef } from 'react';
 import useTheme from '../use-theme';
 import { useSelectContext } from './SelectContext';
@@ -6,19 +6,17 @@ 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;
+    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;
-
+    ref = _useSelectContext.ref;
   var classes = useClasses('select-dropdown', className);
   useImperativeHandle(dropdownRef, function () {
     return internalDropdownRef.current;

package/esm/Select/SelectIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare function SelectIconComponent(): JSX.Element;
+declare function SelectIconComponent(): React.JSX.Element;
 declare namespace SelectIconComponent {
     var displayName: string;
 }

package/esm/Select/SelectIcon.js

@@ -1,6 +1,5 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 function SelectIconComponent() {
   return /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 24 24",
@@ -17,7 +16,6 @@ function SelectIconComponent() {
     id: "2742933678"
   }, "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 = /*#__PURE__*/React.memo(SelectIconComponent);
 export default SelectIcon;

package/esm/Select/SelectIconClear.d.ts

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

package/esm/Select/SelectIconClear.js

@@ -1,18 +1,15 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
-
 function SelectIconClear(_ref) {
   var onClick = _ref.onClick;
   var theme = useTheme();
-
   var clickHandler = function clickHandler(event) {
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     onClick && onClick(event);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     onClick: clickHandler,
     className: _JSXStyle.dynamic([["3218630561", [theme.palette.accents_5, theme.palette.foreground]]]) + " " + "clear-icon"
@@ -36,6 +33,5 @@ function SelectIconClear(_ref) {
     dynamic: [theme.palette.accents_5, theme.palette.foreground]
   }, ".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:".concat(theme.palette.accents_5, ";visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:1em;height:1em;}")));
 }
-
 var MemoSelectIconClear = /*#__PURE__*/React.memo(SelectIconClear);
 export default MemoSelectIconClear;

package/esm/Select/SelectInput.d.ts

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

package/esm/Select/SelectInput.js

@@ -1,9 +1,11 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useImperativeHandle, useRef } from 'react';
 var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
   var visible = _ref.visible,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus;
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledby = _ref.ariaLabelledby;
   var ref = useRef(null);
   useImperativeHandle(inputRef, function () {
     return ref.current;
@@ -11,7 +13,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
   useEffect(function () {
     if (visible) {
       var _ref$current;
-
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   }, [visible]);
@@ -20,6 +21,8 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
     type: "search",
     role: "combobox",
     "aria-haspopup": "listbox",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
     readOnly: true,
     unselectable: "on",
     "aria-expanded": visible,

package/esm/Select/SelectMultipleValue.d.ts

@@ -4,7 +4,7 @@ interface Props {
     onClear: (() => void) | null;
     children: React.ReactNode;
 }
-declare function SelectMultipleValue({ disabled, onClear, children }: Props): JSX.Element;
+declare function SelectMultipleValue({ disabled, onClear, children }: Props): React.JSX.Element;
 declare namespace SelectMultipleValue {
     var displayName: string;
 }

package/esm/Select/SelectMultipleValue.js

@@ -1,13 +1,12 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 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;
+    onClear = _ref.onClear,
+    children = _ref.children;
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["81854150", [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]]]) + " " + "item"
@@ -18,6 +17,5 @@ function SelectMultipleValue(_ref) {
     dynamic: [theme.layout.radius, theme.palette.accents_3, disabled ? theme.palette.accents_5 : theme.palette.accents_7]
   }, ".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_3, ";color:").concat(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';
 export default SelectMultipleValue;

package/esm/Select/SelectOption.d.ts

@@ -7,7 +7,9 @@ interface Props {
     label?: boolean;
     preventAllEvents?: boolean;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type SelectOptionProps = Props & NativeAttrs;
-declare const SelectOption: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SelectOptionProps = Props & NativeAttrs;
+declare const SelectOption: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs & {
+    children?: React.ReactNode;
+}>;
 export default SelectOption;