@invoicebox/ui 0.1.0-alpha.155 → 0.1.0-alpha.157

package/dist/components/form/{SearchInput/components → ResetButton}/CrossIcon/index.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { CrossIcon } from '.';
+import { CrossIcon } from './index';
 declare const meta: Meta<typeof CrossIcon>;
 export default meta;
 export declare const Default: StoryObj<typeof CrossIcon>;

package/dist/components/form/{SearchInput/components → ResetButton}/CrossIcon/index.stories.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = void 0;
-var _ = require(".");
+var _index = require("./index");
 var meta = {
-  title: 'form/SearchInput/_components/CrossIcon',
-  component: _.CrossIcon,
+  title: 'form/ResetButton/_components/CrossIcon',
+  component: _index.CrossIcon,
   tags: ['autodocs']
 };
 var _default = exports["default"] = meta;

package/dist/components/form/ResetButton/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export type TProps = {
+    onClick: () => void;
+};
+export declare const ResetButton: FC<TProps>;

package/dist/components/form/ResetButton/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResetButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CrossIcon = require("./CrossIcon");
+var S = _interopRequireWildcard(require("./styles"));
+var _palette = require("../../../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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ResetButton = exports.ResetButton = function ResetButton(_ref) {
+  var onClick = _ref.onClick;
+  var palette = (0, _palette.useComponentPalette)('resetButton');
+  return /*#__PURE__*/_react["default"].createElement(S.StyledButton, {
+    type: "button",
+    onClick: onClick,
+    $color: palette.color
+  }, /*#__PURE__*/_react["default"].createElement(_CrossIcon.CrossIcon, null));
+};

package/dist/components/form/ResetButton/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ResetButton, TProps } from './index';
+declare const meta: Meta<typeof ResetButton>;
+export default meta;
+export declare const Default: StoryObj<TProps>;

package/dist/components/form/ResetButton/index.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _index = require("./index");
+var _addonActions = require("@storybook/addon-actions");
+var meta = {
+  title: 'form/ResetButton',
+  component: _index.ResetButton,
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: (0, _addonActions.action)('onClick')
+  }
+};
+var _default = exports["default"] = meta;
+var Default = exports.Default = {
+  args: {}
+};

package/dist/components/form/ResetButton/palette.d.ts

@@ -0,0 +1,5 @@
+import { TAbstractPalette } from '../../../palette';
+export type TResetButtonPalette = {
+    color: string;
+};
+export declare const generateResetButtonPalette: (abstractPalette: TAbstractPalette) => TResetButtonPalette;

package/dist/components/form/ResetButton/palette.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateResetButtonPalette = void 0;
+var generateResetButtonPalette = exports.generateResetButtonPalette = function generateResetButtonPalette(abstractPalette) {
+  return {
+    color: abstractPalette.primary
+  };
+};

package/dist/components/form/ResetButton/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $color: string;
+}>> & string;

package/dist/components/form/ResetButton/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledButton = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var StyledButton = exports.StyledButton = _styledComponents["default"].button.withConfig({
+  displayName: "styles__StyledButton",
+  componentId: "sc-mz2g63-0"
+})(["display:flex;align-content:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:", ";"], function (_ref) {
+  var $color = _ref.$color;
+  return $color;
+});

package/dist/components/form/SearchInput/index.js

@@ -11,8 +11,8 @@ var _InputLabel = require("../InputLabel");
 var _PureInput = require("../PureInput");
 var _useInputFocus2 = require("../../../hooks/useInputFocus");
 var _SearchIcon = require("./components/SearchIcon");
-var _CrossIcon = require("./components/CrossIcon");
 var _palette = require("../../../palette");
+var _ResetButton = require("../ResetButton");
 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; }
 var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -57,9 +57,8 @@ var SearchInput = exports.SearchInput = /*#__PURE__*/(0, _react.forwardRef)(func
   }), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
     $inFocus: inFocus,
     $palette: palette
-  }, value ? /*#__PURE__*/_react["default"].createElement(S.ResetButton, {
-    type: "button",
+  }, value ? /*#__PURE__*/_react["default"].createElement(_ResetButton.ResetButton, {
     onClick: handleInputReset
-  }, /*#__PURE__*/_react["default"].createElement(_CrossIcon.CrossIcon, null)) : /*#__PURE__*/_react["default"].createElement(_SearchIcon.SearchIcon, null)));
+  }) : /*#__PURE__*/_react["default"].createElement(_SearchIcon.SearchIcon, null)));
 });
 SearchInput.displayName = 'SearchInput';

package/dist/components/form/SearchInput/styles.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { TSearchInputPalette } from './palette';
-export declare const ResetButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $inFocus: boolean;
     $palette: TSearchInputPalette;

package/dist/components/form/SearchInput/styles.js

@@ -3,23 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResetButton = exports.IconWrapper = void 0;
+exports.IconWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var ResetButton = exports.ResetButton = _styledComponents["default"].button.withConfig({
-  displayName: "styles__ResetButton",
-  componentId: "sc-1cx3n6g-0"
-})(["display:flex;align-content:center;justify-content:center;background:transparent;border:none;cursor:pointer;"]);
 var IconWrapper = exports.IconWrapper = _styledComponents["default"].span.withConfig({
   displayName: "styles__IconWrapper",
-  componentId: "sc-1cx3n6g-1"
-})(["position:absolute;right:20px;bottom:50%;transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";", "{color:", ";}"], function (_ref) {
+  componentId: "sc-1cx3n6g-0"
+})(["position:absolute;right:20px;bottom:50%;transform:translateY(50%);display:flex;align-content:center;justify-content:center;opacity:", ";transition:all 0.2s ease-in-out 0s;color:", ";"], function (_ref) {
   var $inFocus = _ref.$inFocus;
   return $inFocus ? 1 : 0.5;
 }, function (_ref2) {
   var $palette = _ref2.$palette;
   return $palette.icon;
-}, ResetButton, function (_ref3) {
-  var $palette = _ref3.$palette;
-  return $palette.icon;
 });

package/dist/components/form/Select/components/Input/index.d.ts

@@ -2,5 +2,7 @@ import { FC } from 'react';
 import { TProps as TInputLabelProps } from '../../../InputLabel';
 import { TProps as TPureInputProps } from '../../../PureInput';
 import { TProps as TArrowProps } from '../../../../common/Arrow';
-export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value'> & Pick<TArrowProps, 'isOpen'>;
+export type TProps = Pick<TInputLabelProps, 'inFocus' | 'label'> & Pick<TPureInputProps, 'hasError' | 'placeholder' | 'name' | 'onFocus' | 'onBlur' | 'value'> & Pick<TArrowProps, 'isOpen'> & {
+    onReset?: () => void;
+};
 export declare const Input: FC<TProps>;

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

@@ -10,6 +10,7 @@ var S = _interopRequireWildcard(require("./styles"));
 var _InputLabel = require("../../../InputLabel");
 var _PureInput = require("../../../PureInput");
 var _Arrow = require("../../../../common/Arrow");
+var _ResetButton = require("../../../ResetButton");
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -22,7 +23,9 @@ var Input = exports.Input = function Input(_ref) {
     value = _ref.value,
     name = _ref.name,
     label = _ref.label,
-    isOpen = _ref.isOpen;
+    isOpen = _ref.isOpen,
+    onReset = _ref.onReset;
+  var isShowResetIcon = !!value && !!onReset;
   return /*#__PURE__*/_react["default"].createElement(_InputLabel.InputLabel, {
     inFocus: inFocus,
     label: label
@@ -36,7 +39,11 @@ var Input = exports.Input = function Input(_ref) {
     value: value,
     readOnly: true,
     paddingRight: 52
-  }), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, null, /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
+  }), /*#__PURE__*/_react["default"].createElement(S.IconWrapper, {
+    $pointerEvents: isShowResetIcon ? 'default' : 'none'
+  }, isShowResetIcon ? /*#__PURE__*/_react["default"].createElement(_ResetButton.ResetButton, {
+    onClick: onReset
+  }) : /*#__PURE__*/_react["default"].createElement(_Arrow.Arrow, {
     isOpen: isOpen
   }))));
 };

package/dist/components/form/Select/components/Input/styles.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $pointerEvents: string;
+}>> & string;
 export declare const ControlWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -9,7 +9,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 var IconWrapper = exports.IconWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__IconWrapper",
   componentId: "sc-1fsrle6-0"
-})(["position:absolute;right:14px;height:100%;top:0;display:flex;align-items:center;"]);
+})(["position:absolute;right:14px;height:100%;top:0;display:flex;align-items:center;pointer-events:", ";"], function (_ref) {
+  var $pointerEvents = _ref.$pointerEvents;
+  return $pointerEvents;
+});
 var ControlWrapper = exports.ControlWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__ControlWrapper",
   componentId: "sc-1fsrle6-1"

package/dist/components/form/Select/index.d.ts

@@ -10,8 +10,9 @@ export type TGroup = {
 };
 export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placeholder' | 'onFocus' | 'onBlur' | 'name'> & {
     value: TValue | null;
-    onChange: (value: TValue) => void;
+    onChange: (value: TValue | null) => void;
     options: TOption<TValue>[];
     groups?: TGroup[];
+    isResetButtonEnabled?: boolean;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, groups, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, onFocus, onBlur, name, value, onChange, options, groups, isResetButtonEnabled, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

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

@@ -35,7 +35,9 @@ var Select = exports.Select = function Select(_ref) {
     onChange = _ref.onChange,
     options = _ref.options,
     _ref$groups = _ref.groups,
-    groups = _ref$groups === void 0 ? [] : _ref$groups;
+    groups = _ref$groups === void 0 ? [] : _ref$groups,
+    _ref$isResetButtonEna = _ref.isResetButtonEnabled,
+    isResetButtonEnabled = _ref$isResetButtonEna === void 0 ? false : _ref$isResetButtonEna;
   var palette = (0, _palette.useComponentPalette)('select');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
@@ -98,6 +100,9 @@ var Select = exports.Select = function Select(_ref) {
       delayBlur.current = null;
     }
   }, [handleHide, onChange]);
+  var handleReset = (0, _react.useCallback)(function () {
+    return onChange(null);
+  }, [onChange]);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
     ref: wrapperRef
   }, /*#__PURE__*/_react["default"].createElement(S.InputWrapper, null, /*#__PURE__*/_react["default"].createElement(_Input.Input, {
@@ -109,7 +114,8 @@ var Select = exports.Select = function Select(_ref) {
     onBlur: handleBlur,
     value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || '',
     name: name,
-    isOpen: isOpen
+    isOpen: isOpen,
+    onReset: isResetButtonEnabled ? handleReset : undefined
   })), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen,
     isAutoPosition: true,

package/dist/components/form/Select/index.stories.d.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from '.';
+import { Select, TProps } from '.';
 declare const meta: Meta<typeof Select>;
 export default meta;
-export declare const Default: StoryObj<typeof Select>;
+export declare const Default: StoryObj<TProps<string>>;
+export declare const WithGroups: StoryObj<TProps<string>>;

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

@@ -4,12 +4,17 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithGroups = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _ = require(".");
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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); }
 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."); }
@@ -23,53 +28,74 @@ var meta = {
   tags: ['autodocs']
 };
 var _default = exports["default"] = meta;
-var selectOptions = [{
-  label: 'Option 1',
-  value: 'option-1',
-  groupId: '1'
-}, {
-  label: 'Option 2',
-  value: 'option-2',
-  groupId: '1'
-}, {
-  label: 'Option 3',
-  value: 'option-3',
-  groupId: '2'
-}, {
-  label: 'Option 4',
-  value: 'option-4',
-  groupId: '2'
-}, {
-  label: 'Option 5',
-  value: 'option-5'
-}, {
-  label: 'Option 6',
-  value: 'option-6'
-}, {
-  label: 'Option 7',
-  value: 'option-7'
-}, {
-  label: 'Option 8',
-  value: 'option-8'
-}, {
-  label: 'Option 9',
-  value: 'option-9'
-}, {
-  label: 'Option 10',
-  value: 'option-10'
-}, {
-  label: 'Option 11',
-  value: 'option-11'
-}, {
-  label: 'Option 12',
-  value: 'option-12'
-}];
+var Component = function Component(props) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = (0, _react.useCallback)(function (newValue) {
+    setValue(newValue);
+    (0, _addonActions.action)('onChange')(newValue);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_.Select, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+var COMMON_ARGS = {
+  hasError: false,
+  label: 'Label',
+  name: 'name',
+  placeholder: 'Placeholder',
+  isEnableResetButton: false,
+  options: [{
+    label: 'Option 1',
+    value: 'option-1',
+    groupId: '1'
+  }, {
+    label: 'Option 2',
+    value: 'option-2',
+    groupId: '1'
+  }, {
+    label: 'Option 3',
+    value: 'option-3',
+    groupId: '2'
+  }, {
+    label: 'Option 4',
+    value: 'option-4',
+    groupId: '2'
+  }, {
+    label: 'Option 5',
+    value: 'option-5'
+  }, {
+    label: 'Option 6',
+    value: 'option-6'
+  }, {
+    label: 'Option 7',
+    value: 'option-7'
+  }, {
+    label: 'Option 8',
+    value: 'option-8'
+  }, {
+    label: 'Option 9',
+    value: 'option-9'
+  }, {
+    label: 'Option 10',
+    value: 'option-10'
+  }, {
+    label: 'Option 11',
+    value: 'option-11'
+  }, {
+    label: 'Option 12',
+    value: 'option-12'
+  }]
+};
 var Default = exports.Default = {
-  args: {
-    hasError: false,
-    label: 'Label',
-    name: 'name',
-    placeholder: 'Placeholder',
+  args: _objectSpread({}, COMMON_ARGS),
+  render: Component
+};
+var WithGroups = exports.WithGroups = {
+  args: _objectSpread(_objectSpread({}, COMMON_ARGS), {}, {
     groups: [{
       label: 'Group 1',
       id: '1'
@@ -77,20 +103,6 @@ var Default = exports.Default = {
       label: 'Group 2',
       id: '2'
     }]
-  },
-  render: function Component(props) {
-    var _useState = (0, _react.useState)(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-    var handleChange = (0, _react.useCallback)(function (newValue) {
-      setValue(newValue);
-      (0, _addonActions.action)('onChange')(newValue);
-    }, []);
-    return /*#__PURE__*/_react["default"].createElement(_.Select, _extends({}, props, {
-      value: value,
-      onChange: handleChange,
-      options: selectOptions
-    }));
-  }
+  }),
+  render: Component
 };

package/dist/palette/context.d.ts

@@ -22,6 +22,7 @@ import { TOrganizationAutocompleteItemPalette } from '../components/form/Autocom
 import { TDrawerPalette } from '../components/common/Drawer/palette';
 import { TEntityAutocompleteOptionsDrawerPalette } from '../components/common/EntityAutocompleteOptionsDrawer/palette';
 import { TCodeInputPalette } from '../components/form/CodeInput/palette';
+import { TResetButtonPalette } from '../components/form/ResetButton/palette';
 type TContext = {
     skeleton: TSkeletonPalette;
     invoiceboxSpinner: TInvoiceboxSpinnerPalette;
@@ -46,6 +47,7 @@ type TContext = {
     drawer: TDrawerPalette;
     entityAutocompleteOptionsDrawer: TEntityAutocompleteOptionsDrawerPalette;
     codeInput: TCodeInputPalette;
+    resetButton: TResetButtonPalette;
 };
 export declare const PaletteContext: import("react").Context<TContext>;
 export {};

package/dist/palette/context.js

@@ -29,6 +29,7 @@ var _palette20 = require("../components/form/Autocomplete/components/Organizatio
 var _palette21 = require("../components/common/Drawer/palette");
 var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/palette");
 var _palette23 = require("../components/form/CodeInput/palette");
+var _palette24 = require("../components/form/ResetButton/palette");
 var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createContext)({
   skeleton: (0, _palette.generateSkeletonPalette)(_constants.defaultAbstractPalette),
   invoiceboxSpinner: (0, _palette2.generateInvoiceboxSpinnerPalette)(_constants.defaultAbstractPalette),
@@ -52,5 +53,6 @@ var PaletteContext = exports.PaletteContext = /*#__PURE__*/(0, _react.createCont
   organizationAutocompleteItem: (0, _palette20.generateOrganizationAutocompleteItemPalette)(_constants.defaultAbstractPalette),
   drawer: (0, _palette21.generateDrawerPalette)(_constants.defaultAbstractPalette),
   entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(_constants.defaultAbstractPalette),
-  codeInput: (0, _palette23.generateCodeInputPalette)(_constants.defaultAbstractPalette)
+  codeInput: (0, _palette23.generateCodeInputPalette)(_constants.defaultAbstractPalette),
+  resetButton: (0, _palette24.generateResetButtonPalette)(_constants.defaultAbstractPalette)
 });

package/dist/palette/provider.js

@@ -30,6 +30,7 @@ var _palette20 = require("../components/form/Autocomplete/components/Organizatio
 var _palette21 = require("../components/common/Drawer/palette");
 var _palette22 = require("../components/common/EntityAutocompleteOptionsDrawer/palette");
 var _palette23 = require("../components/form/CodeInput/palette");
+var _palette24 = require("../components/form/ResetButton/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); }
@@ -72,7 +73,8 @@ var PaletteProvider = exports.PaletteProvider = function PaletteProvider(_ref) {
       organizationAutocompleteItem: (0, _palette20.generateOrganizationAutocompleteItemPalette)(mergedAbstractPalette),
       drawer: (0, _palette21.generateDrawerPalette)(mergedAbstractPalette),
       entityAutocompleteOptionsDrawer: (0, _palette22.generateEntityAutocompleteOptionsDrawerPalette)(mergedAbstractPalette),
-      codeInput: (0, _palette23.generateCodeInputPalette)(mergedAbstractPalette)
+      codeInput: (0, _palette23.generateCodeInputPalette)(mergedAbstractPalette),
+      resetButton: (0, _palette24.generateResetButtonPalette)(mergedAbstractPalette)
     };
   }, [mergedSkeletonPalette, mergedAbstractPalette]);
   return /*#__PURE__*/_react["default"].createElement(_context.PaletteContext.Provider, {

package/dist/palette/usePalette.d.ts

@@ -22,4 +22,5 @@ export declare const usePalette: () => {
     drawer: import("../components/common/Drawer/palette").TDrawerPalette;
     entityAutocompleteOptionsDrawer: import("../components/common/EntityAutocompleteOptionsDrawer/palette").TEntityAutocompleteOptionsDrawerPalette;
     codeInput: import("../components/form/CodeInput/palette").TCodeInputPalette;
+    resetButton: import("../components/form/ResetButton/palette").TResetButtonPalette;
 };

package/package.json

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