@invoicebox/ui 0.1.0-alpha.314 → 0.1.0-alpha.316

package/dist/esm/components/form/Select/index.js

@@ -1,3 +1,7 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -15,39 +19,47 @@ import { useComponentPalette } from '../../../palette';
 import { useOptionGroups } from './hooks/useOptionGroups';
 import { Drawer } from '../../common/Drawer';
 import Loader from './components/Loader';
+import { MultipleValue } from './components/MultipleValue';
+import { Checkbox } from '../Checkbox';
 var MAX_LIST_HEIGHT = 294;
 var OPTION_IDENTIFIER = 'option-identifier';
-export var Select = function Select(_ref) {
-  var label = _ref.label,
-    hasError = _ref.hasError,
-    placeholder = _ref.placeholder,
-    name = _ref.name,
-    value = _ref.value,
-    renderValue = _ref.renderValue,
-    onChange = _ref.onChange,
-    options = _ref.options,
-    _ref$groups = _ref.groups,
-    groups = _ref$groups === void 0 ? [] : _ref$groups,
-    _ref$isResetButtonEna = _ref.isResetButtonEnabled,
-    isResetButtonEnabled = _ref$isResetButtonEna === void 0 ? false : _ref$isResetButtonEna,
-    size = _ref.size,
-    renderOption = _ref.renderOption,
-    dropdownHeader = _ref.dropdownHeader,
-    _ref$isDrawerOptions = _ref.isDrawerOptions,
-    isDrawerOptions = _ref$isDrawerOptions === void 0 ? false : _ref$isDrawerOptions,
-    renderGroup = _ref.renderGroup,
-    _ref$scrollbarMaxHeig = _ref.scrollbarMaxHeight,
-    scrollbarMaxHeight = _ref$scrollbarMaxHeig === void 0 ? MAX_LIST_HEIGHT : _ref$scrollbarMaxHeig,
-    scrollbarHeader = _ref.scrollbarHeader,
-    emptyOptionsLabel = _ref.emptyOptionsLabel,
-    isLoading = _ref.isLoading,
-    onBlur = _ref.onBlur,
-    required = _ref.required,
-    _ref$usePadding = _ref.usePadding,
-    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding,
-    dropdownWidth = _ref.dropdownWidth,
-    _ref$useModernStyles = _ref.useModernStyles,
-    useModernStyles = _ref$useModernStyles === void 0 ? false : _ref$useModernStyles;
+export var Select = function Select(props) {
+  var _collapseTags;
+  var label = props.label,
+    hasError = props.hasError,
+    placeholder = props.placeholder,
+    name = props.name,
+    value = props.value,
+    renderValue = props.renderValue,
+    onChange = props.onChange,
+    options = props.options,
+    _props$groups = props.groups,
+    groups = _props$groups === void 0 ? [] : _props$groups,
+    _props$isResetButtonE = props.isResetButtonEnabled,
+    isResetButtonEnabled = _props$isResetButtonE === void 0 ? false : _props$isResetButtonE,
+    size = props.size,
+    renderOption = props.renderOption,
+    dropdownHeader = props.dropdownHeader,
+    _props$isDrawerOption = props.isDrawerOptions,
+    isDrawerOptions = _props$isDrawerOption === void 0 ? false : _props$isDrawerOption,
+    renderGroup = props.renderGroup,
+    _props$scrollbarMaxHe = props.scrollbarMaxHeight,
+    scrollbarMaxHeight = _props$scrollbarMaxHe === void 0 ? MAX_LIST_HEIGHT : _props$scrollbarMaxHe,
+    scrollbarHeader = props.scrollbarHeader,
+    emptyOptionsLabel = props.emptyOptionsLabel,
+    isLoading = props.isLoading,
+    onBlur = props.onBlur,
+    required = props.required,
+    _props$usePadding = props.usePadding,
+    usePadding = _props$usePadding === void 0 ? false : _props$usePadding,
+    dropdownWidth = props.dropdownWidth,
+    _props$useModernStyle = props.useModernStyles,
+    useModernStyles = _props$useModernStyle === void 0 ? false : _props$useModernStyle;
+  var isMultiple = props.isMultiple === true;
+  var collapseTags = isMultiple ? (_collapseTags = props.collapseTags) !== null && _collapseTags !== void 0 ? _collapseTags : false : false;
+  var chipProps = isMultiple ? props.chipProps : undefined;
+  var onChangeSingle = onChange;
+  var onChangeMultiple = onChange;
   var palette = useComponentPalette('select');
   var _useInputFocus = useInputFocus({
       onBlur: onBlur
@@ -74,11 +86,23 @@ export var Select = function Select(_ref) {
   */
   var delayBlur = useRef(null);
   var inputRef = useRef(null);
+  var multipleValue = useMemo(function () {
+    var _ref;
+    return isMultiple ? (_ref = value) !== null && _ref !== void 0 ? _ref : [] : [];
+  }, [isMultiple, value]);
   var selectedOption = useMemo(function () {
-    return options.find(function (option) {
+    return isMultiple ? undefined : options.find(function (option) {
       return option.value === value;
     });
-  }, [options, value]);
+  }, [isMultiple, options, value]);
+  var selectedOptions = useMemo(function () {
+    return isMultiple ? options.filter(function (option) {
+      return multipleValue.includes(option.value);
+    }) : [];
+  }, [isMultiple, options, multipleValue]);
+  var selectedValuesSet = useMemo(function () {
+    return new Set(multipleValue);
+  }, [multipleValue]);
   var optionGroups = useOptionGroups(options, groups);
   var handleShow = useCallback(function () {
     return setIsOpen(true);
@@ -105,16 +129,29 @@ export var Select = function Select(_ref) {
   }, [blurHandler]);
   var handleSelect = useCallback(function (event) {
     var newValue = JSON.parse(event.currentTarget.dataset.value);
-    onChange(newValue);
+    if (isMultiple) {
+      var next = multipleValue.includes(newValue) ? multipleValue.filter(function (item) {
+        return item !== newValue;
+      }) : [].concat(_toConsumableArray(multipleValue), [newValue]);
+      onChangeMultiple(next);
+      // при множественном выборе дропдаун остаётся открытым
+      return;
+    }
+    onChangeSingle(newValue);
     handleHide();
     if (delayBlur.current) {
       delayBlur.current();
       delayBlur.current = null;
     }
-  }, [handleHide, onChange]);
+  }, [handleHide, isMultiple, multipleValue, onChangeMultiple, onChangeSingle]);
+  var handleRemoveTag = useCallback(function (removedValue) {
+    return onChangeMultiple(multipleValue.filter(function (item) {
+      return item !== removedValue;
+    }));
+  }, [multipleValue, onChangeMultiple]);
   var handleReset = useCallback(function () {
-    return onChange(null);
-  }, [onChange]);
+    return isMultiple ? onChangeMultiple([]) : onChangeSingle(null);
+  }, [isMultiple, onChangeMultiple, onChangeSingle]);
   var handleInputClick = function handleInputClick() {
     var _inputRef$current;
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
@@ -130,8 +167,9 @@ export var Select = function Select(_ref) {
       return renderOption(option.entity);
     }
     return /*#__PURE__*/React.createElement(S.DefaultOptionWrapper, {
-      $usePadding: usePadding
-    }, " ", option.label);
+      $usePadding: usePadding,
+      $isMultiple: isMultiple
+    }, option.label);
   };
   var handleGroupRender = function handleGroupRender(group) {
     if (group) {
@@ -166,8 +204,12 @@ export var Select = function Select(_ref) {
         "data-value": JSON.stringify(option.value),
         "data-option-identifier": OPTION_IDENTIFIER,
         $isGrouped: !!group && !renderOption,
-        $usePadding: usePadding
-      }, handleOptionRender(option)));
+        $usePadding: usePadding,
+        $isSelected: !isMultiple && option.value === value
+      }, isMultiple ? /*#__PURE__*/React.createElement(S.OptionContent, null, /*#__PURE__*/React.createElement(S.CheckboxWrapper, null, /*#__PURE__*/React.createElement(Checkbox, {
+        checked: selectedValuesSet.has(option.value),
+        readOnly: true
+      })), handleOptionRender(option)) : handleOptionRender(option)));
     }));
   }));
   var emptyLabel = /*#__PURE__*/React.createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/React.createElement(S.EmptyLabel, {
@@ -198,20 +240,32 @@ export var Select = function Select(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, dropdownHeader, " ", emptyLabel);
   };
   var renderedValue = useMemo(function () {
+    if (isMultiple) {
+      if (!selectedOptions.length) return;
+      return /*#__PURE__*/React.createElement(MultipleValue, {
+        selectedOptions: selectedOptions,
+        onRemove: handleRemoveTag,
+        collapse: collapseTags,
+        chipProps: chipProps
+      });
+    }
     if (!renderValue || !(selectedOption !== null && selectedOption !== void 0 && selectedOption.entity)) return;
     return renderValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity);
-  }, [renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
+  }, [isMultiple, selectedOptions, handleRemoveTag, collapseTags, chipProps, renderValue, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.entity]);
+  var inputValue = isMultiple ? selectedOptions.map(function (option) {
+    return option.label;
+  }).join(', ') : (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '';
   return /*#__PURE__*/React.createElement(S.Wrapper, {
     ref: isDrawerOptions ? undefined : wrapperRef
   }, /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
     ref: inputRef,
     label: label,
     hasError: hasError,
-    inFocus: inFocus,
+    inFocus: isMultiple ? isOpen : inFocus,
     placeholder: placeholder,
     onFocus: isDrawerOptions ? undefined : handleFocus,
     onBlur: isDrawerOptions ? undefined : handleBlur,
-    value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',
+    value: inputValue,
     renderedValue: renderedValue,
     name: name,
     isOpen: isOpen,

package/dist/esm/components/form/Select/index.stories.js

@@ -239,4 +239,35 @@ export var WithRenderedValue = {
     renderValue: renderValue
   }),
   render: Component
+};
+var MultipleComponent = function MultipleComponent(props) {
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var handleChange = useCallback(function (newValue) {
+    setValue(newValue);
+    action('onChange')(newValue);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 360
+    }
+  }, /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  })));
+};
+export var Multiple = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    isMultiple: true
+  }),
+  render: MultipleComponent
+};
+export var MultipleCollapsed = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
+    isMultiple: true,
+    collapseTags: true
+  }),
+  render: MultipleComponent
 };

package/dist/esm/components/form/Select/palette.js

@@ -2,6 +2,8 @@ import hexToRgba from '../../../utils/hexToRgba';
 export var generateSelectPalette = function generateSelectPalette(abstractPalette) {
   return {
     bgHover: hexToRgba(abstractPalette.neutralUsual, 0.5),
-    empty: abstractPalette.neutralFoggy
+    empty: abstractPalette.neutralFoggy,
+    tagColor: '#6590FD',
+    tagBg: hexToRgba('#6590FD', 0.16)
   };
 };

package/dist/esm/components/form/Select/styles.js

@@ -18,14 +18,18 @@ export var OptionWrapper = styled.div.withConfig({
 export var Option = styled(Typography).withConfig({
   displayName: "styles__Option",
   componentId: "sc-1x9n0z5-3"
-})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";&:hover{background-color:", ";}", ""], function (_ref2) {
+})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";", " &:hover{background-color:", ";}", ""], function (_ref2) {
   var $usePadding = _ref2.$usePadding;
   return $usePadding ? '12px' : 'none';
 }, function (_ref3) {
-  var $palette = _ref3.$palette;
-  return $palette.bgHover;
+  var $isSelected = _ref3.$isSelected,
+    $palette = _ref3.$palette;
+  return $isSelected && css(["background-color:", ";border-radius:8px;"], $palette.bgHover);
 }, function (_ref4) {
-  var $isGrouped = _ref4.$isGrouped;
+  var $palette = _ref4.$palette;
+  return $palette.bgHover;
+}, function (_ref5) {
+  var $isGrouped = _ref5.$isGrouped;
   return $isGrouped && css(["padding-left:30px;"]);
 });
 export var Group = styled(Typography).withConfig({
@@ -35,9 +39,13 @@ export var Group = styled(Typography).withConfig({
 export var DefaultOptionWrapper = styled.div.withConfig({
   displayName: "styles__DefaultOptionWrapper",
   componentId: "sc-1x9n0z5-5"
-})(["padding:", ";"], function (_ref5) {
-  var $usePadding = _ref5.$usePadding;
+})(["padding:", ";padding-left:", ";"], function (_ref6) {
+  var $usePadding = _ref6.$usePadding;
   return $usePadding ? '12px' : '12px 20px';
+}, function (_ref7) {
+  var $isMultiple = _ref7.$isMultiple,
+    $usePadding = _ref7.$usePadding;
+  return $isMultiple && !$usePadding ? '6px' : undefined;
 });
 export var DrawerContent = styled.div.withConfig({
   displayName: "styles__DrawerContent",
@@ -50,11 +58,19 @@ export var DrawerBottom = styled.div.withConfig({
 export var EmptyLabel = styled(Typography).withConfig({
   displayName: "styles__EmptyLabel",
   componentId: "sc-1x9n0z5-8"
-})(["color:", ";"], function (_ref6) {
-  var $color = _ref6.$color;
+})(["color:", ";"], function (_ref8) {
+  var $color = _ref8.$color;
   return $color;
 });
 export var ScrollbarContent = styled.div.withConfig({
   displayName: "styles__ScrollbarContent",
   componentId: "sc-1x9n0z5-9"
-})([""]);
+})([""]);
+export var OptionContent = styled.div.withConfig({
+  displayName: "styles__OptionContent",
+  componentId: "sc-1x9n0z5-10"
+})(["display:flex;align-items:center;gap:8px;padding-left:16px;"]);
+export var CheckboxWrapper = styled.div.withConfig({
+  displayName: "styles__CheckboxWrapper",
+  componentId: "sc-1x9n0z5-11"
+})(["flex:0 0 auto;pointer-events:none;"]);

package/dist/esm/components/form/TagsInput/index.js

@@ -8,7 +8,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useId } from 'react';
 import { InputLabel } from '../InputLabel';
 import { PureInput } from '../PureInput';
 import * as S from './styles';
@@ -37,6 +37,7 @@ export var TagsInput = function TagsInput(_ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var inputId = useId();
   var inputRef = useRef(null);
   var pureInputPalette = useComponentPalette('pureInput');
   var tagsInputPalette = useComponentPalette('tagsInput', palette);
@@ -108,7 +109,8 @@ export var TagsInput = function TagsInput(_ref) {
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
   };
   return /*#__PURE__*/React.createElement(InputLabel, {
-    label: label
+    label: label,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.PureInputStyledWrapper, {
     $palette: pureInputPalette,
     $hasBorder: true,
@@ -142,6 +144,7 @@ export var TagsInput = function TagsInput(_ref) {
       bgColor: tagsInputPalette.chipBg
     });
   }), /*#__PURE__*/React.createElement(S.InputWithSaveButtonWrapper, null, /*#__PURE__*/React.createElement(PureInput, {
+    id: inputId,
     ref: inputRef,
     hasBorder: inFocus,
     paddingBottom: 0,

package/dist/esm/components/form/TextInput/index.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback } from 'react';
+import React, { useCallback, useId } from 'react';
 import * as S from './styles';
 import { InputLabel } from '../InputLabel';
 import { PureInput } from '../PureInput';
@@ -44,6 +44,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     inFocus = _useInputFocus.inFocus,
     handleFocus = _useInputFocus.handleFocus,
     handleBlur = _useInputFocus.handleBlur;
+  var fallbackId = useId();
+  var inputId = id !== null && id !== void 0 ? id : fallbackId;
   var _useElementWidth = useElementWidth(),
     childrenRef = _useElementWidth.ref,
     childrenWidth = _useElementWidth.width;
@@ -71,9 +73,11 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     required: required,
     size: fieldSize,
-    useModernStyles: useModernStyles
+    useModernStyles: useModernStyles,
+    htmlFor: inputId
   }, /*#__PURE__*/React.createElement(S.InputLabelContent, null, modernPlaceholder, /*#__PURE__*/React.createElement(PureInput, _extends({
-    id: id,
+    id: inputId,
+    "aria-label": label && !inputLabel ? label : undefined,
     ref: ref,
     name: name,
     disabled: disabled,

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export { PaletteProvider, defaultAbstractPalette } from './palette';
 // common
 export { Skeleton } from './components/common/Skeleton';
 export { Typography } from './components/common/Typography';
+export { Tooltip } from './components/common/Tooltip';
 export { InvoiceboxSpinner } from './components/common/InvoiceboxSpinner';
 export { SecondaryButton } from './components/common/SecondaryButton';
 export { Arrow } from './components/common/Arrow';
@@ -28,6 +29,7 @@ export { PureInput } from './components/form/PureInput';
 export { PositiveIntegerInput } from './components/form/PositiveIntegerInput';
 export { TagsInput } from './components/form/TagsInput';
 export { TextInput } from './components/form/TextInput';
+export { Checkbox } from './components/form/Checkbox';
 export { Select } from './components/form/Select';
 export { Toggle } from './components/form/Toggle';
 export { DateInput } from './components/form/DateInput';

package/dist/esm/palette/context.js

@@ -30,6 +30,8 @@ import { generateTagsInputPalette } from '../components/form/TagsInput/palette';
 import { generateTimePickerPalette } from '../components/form/DateTimeInput/components/TimePicker/palette';
 import { generateDateTimeInputPalette } from '../components/form/DateTimeInput/palette';
 import { generateDrawerHeaderPalette } from '../components/form/common/DrawerHeader/palette';
+import { generateCheckboxPalette } from '../components/form/Checkbox/palette';
+import { generateTooltipPalette } from '../components/common/Tooltip/palette';
 export var PaletteContext = /*#__PURE__*/createContext({
   skeleton: generateSkeletonPalette(defaultAbstractPalette),
   invoiceboxSpinner: generateInvoiceboxSpinnerPalette(defaultAbstractPalette),
@@ -60,5 +62,7 @@ export var PaletteContext = /*#__PURE__*/createContext({
   tagsInput: generateTagsInputPalette(defaultAbstractPalette),
   timePicker: generateTimePickerPalette(defaultAbstractPalette),
   dateTimeInput: generateDateTimeInputPalette(defaultAbstractPalette),
-  drawerHeader: generateDrawerHeaderPalette(defaultAbstractPalette)
+  drawerHeader: generateDrawerHeaderPalette(defaultAbstractPalette),
+  checkbox: generateCheckboxPalette(defaultAbstractPalette),
+  tooltip: generateTooltipPalette(defaultAbstractPalette)
 });

package/dist/esm/palette/provider.js

@@ -37,6 +37,8 @@ import { generateTagsInputPalette } from '../components/form/TagsInput/palette';
 import { generateTimePickerPalette } from '../components/form/DateTimeInput/components/TimePicker/palette';
 import { generateDateTimeInputPalette } from '../components/form/DateTimeInput/palette';
 import { generateDrawerHeaderPalette } from '../components/form/common/DrawerHeader/palette';
+import { generateCheckboxPalette } from '../components/form/Checkbox/palette';
+import { generateTooltipPalette } from '../components/common/Tooltip/palette';
 export var PaletteProvider = function PaletteProvider(_ref) {
   var children = _ref.children,
     _abstract = _ref["abstract"],
@@ -78,7 +80,9 @@ export var PaletteProvider = function PaletteProvider(_ref) {
       tagsInput: generateTagsInputPalette(mergedAbstractPalette),
       timePicker: generateTimePickerPalette(mergedAbstractPalette),
       dateTimeInput: generateDateTimeInputPalette(mergedAbstractPalette),
-      drawerHeader: generateDrawerHeaderPalette(mergedAbstractPalette)
+      drawerHeader: generateDrawerHeaderPalette(mergedAbstractPalette),
+      checkbox: generateCheckboxPalette(mergedAbstractPalette),
+      tooltip: generateTooltipPalette(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/React.createElement(PaletteContext.Provider, {

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { PaletteProvider, defaultAbstractPalette } from './palette';
 export type { TAbstractPalette } from './palette';
 export { Skeleton } from './components/common/Skeleton';
 export { Typography } from './components/common/Typography';
+export { Tooltip } from './components/common/Tooltip';
+export type { TProps as TTooltipProps } from './components/common/Tooltip';
 export { InvoiceboxSpinner } from './components/common/InvoiceboxSpinner';
 export { SecondaryButton } from './components/common/SecondaryButton';
 export { Arrow } from './components/common/Arrow';
@@ -38,8 +40,10 @@ export { TagsInput } from './components/form/TagsInput';
 export type { TProps as TTagsInputProps } from './components/form/TagsInput';
 export { TextInput } from './components/form/TextInput';
 export type { TProps as TTextInputProps } from './components/form/TextInput';
+export { Checkbox } from './components/form/Checkbox';
+export type { TProps as TCheckboxProps } from './components/form/Checkbox';
 export { Select } from './components/form/Select';
-export type { TProps as TSelectProps, TOption, TGroup } from './components/form/Select';
+export type { TProps as TSelectProps, TMultipleProps as TMultipleSelectProps, TOption, TGroup, } from './components/form/Select';
 export { Toggle } from './components/form/Toggle';
 export type { TProps as TToggleProps } from './components/form/Toggle';
 export { DateInput } from './components/form/DateInput';

package/dist/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "Calendar", {
     return _Calendar.Calendar;
   }
 });
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.Checkbox;
+  }
+});
 Object.defineProperty(exports, "Chip", {
   enumerable: true,
   get: function get() {
@@ -243,6 +249,12 @@ Object.defineProperty(exports, "Toggle", {
     return _Toggle.Toggle;
   }
 });
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.Tooltip;
+  }
+});
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function get() {
@@ -348,6 +360,7 @@ Object.defineProperty(exports, "useUnupdatableHandler", {
 var _palette = require("./palette");
 var _Skeleton = require("./components/common/Skeleton");
 var _Typography = require("./components/common/Typography");
+var _Tooltip = require("./components/common/Tooltip");
 var _InvoiceboxSpinner = require("./components/common/InvoiceboxSpinner");
 var _SecondaryButton = require("./components/common/SecondaryButton");
 var _Arrow = require("./components/common/Arrow");
@@ -372,6 +385,7 @@ var _PureInput = require("./components/form/PureInput");
 var _PositiveIntegerInput = require("./components/form/PositiveIntegerInput");
 var _TagsInput = require("./components/form/TagsInput");
 var _TextInput = require("./components/form/TextInput");
+var _Checkbox = require("./components/form/Checkbox");
 var _Select = require("./components/form/Select");
 var _Toggle = require("./components/form/Toggle");
 var _DateInput = require("./components/form/DateInput");

package/dist/palette/context.d.ts

@@ -29,6 +29,8 @@ import { TTagsInputPalette } from '../components/form/TagsInput/palette';
 import { TTimePickerPalette } from '../components/form/DateTimeInput/components/TimePicker/palette';
 import { TDateTimeInputPalette } from '../components/form/DateTimeInput/palette';
 import { TDrawerHeaderPalette } from '../components/form/common/DrawerHeader/palette';
+import { TCheckboxPalette } from '../components/form/Checkbox/palette';
+import { TTooltipPalette } from '../components/common/Tooltip/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -60,6 +62,8 @@ type TContext = {
     timePicker: TTimePickerPalette;
     dateTimeInput: TDateTimeInputPalette;
     drawerHeader: TDrawerHeaderPalette;
+    checkbox: TCheckboxPalette;
+    tooltip: TTooltipPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -36,6 +36,8 @@ var _palette27 = require("../components/form/TagsInput/palette");
 var _palette28 = require("../components/form/DateTimeInput/components/TimePicker/palette");
 var _palette29 = require("../components/form/DateTimeInput/palette");
 var _palette30 = require("../components/form/common/DrawerHeader/palette");
+var _palette31 = require("../components/form/Checkbox/palette");
+var _palette32 = require("../components/common/Tooltip/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -66,5 +68,7 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   tagsInput: (0, _palette27.generateTagsInputPalette)(_constants.defaultAbstractPalette),
   timePicker: (0, _palette28.generateTimePickerPalette)(_constants.defaultAbstractPalette),
   dateTimeInput: (0, _palette29.generateDateTimeInputPalette)(_constants.defaultAbstractPalette),
-  drawerHeader: (0, _palette30.generateDrawerHeaderPalette)(_constants.defaultAbstractPalette)
+  drawerHeader: (0, _palette30.generateDrawerHeaderPalette)(_constants.defaultAbstractPalette),
+  checkbox: (0, _palette31.generateCheckboxPalette)(_constants.defaultAbstractPalette),
+  tooltip: (0, _palette32.generateTooltipPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -37,6 +37,8 @@ var _palette27 = require("../components/form/TagsInput/palette");
 var _palette28 = require("../components/form/DateTimeInput/components/TimePicker/palette");
 var _palette29 = require("../components/form/DateTimeInput/palette");
 var _palette30 = require("../components/form/common/DrawerHeader/palette");
+var _palette31 = require("../components/form/Checkbox/palette");
+var _palette32 = require("../components/common/Tooltip/palette");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -86,7 +88,9 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       tagsInput: (0, _palette27.generateTagsInputPalette)(mergedAbstractPalette),
       timePicker: (0, _palette28.generateTimePickerPalette)(mergedAbstractPalette),
       dateTimeInput: (0, _palette29.generateDateTimeInputPalette)(mergedAbstractPalette),
-      drawerHeader: (0, _palette30.generateDrawerHeaderPalette)(mergedAbstractPalette)
+      drawerHeader: (0, _palette30.generateDrawerHeaderPalette)(mergedAbstractPalette),
+      checkbox: (0, _palette31.generateCheckboxPalette)(mergedAbstractPalette),
+      tooltip: (0, _palette32.generateTooltipPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -29,4 +29,6 @@ export declare const usePalette: () => {
     timePicker: import("../components/form/DateTimeInput/components/TimePicker/palette").TTimePickerPalette;
     dateTimeInput: import("../components/form/DateTimeInput/palette").TDateTimeInputPalette;
     drawerHeader: import("../components/form/common/DrawerHeader/palette").TDrawerHeaderPalette;
+    checkbox: import("../components/form/Checkbox/palette").TCheckboxPalette;
+    tooltip: import("../components/common/Tooltip/palette").TTooltipPalette;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.314",
+    "version": "0.1.0-alpha.316",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {