@invoicebox/ui 0.1.0-alpha.229 → 0.1.0-alpha.230

package/dist/components/common/Dropdown/index.d.ts

@@ -11,5 +11,6 @@ export type TProps = {
     zIndex?: number;
     onCloseTransitionEnd?: () => void;
     isTopPosition?: boolean;
+    usePadding?: boolean;
 };
 export declare const Dropdown: FC<TProps>;

package/dist/components/common/Dropdown/index.js

@@ -34,7 +34,9 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     zIndex = _ref.zIndex,
     onCloseTransitionEnd = _ref.onCloseTransitionEnd,
     _ref$isTopPosition = _ref.isTopPosition,
-    isTopPosition = _ref$isTopPosition === void 0 ? false : _ref$isTopPosition;
+    isTopPosition = _ref$isTopPosition === void 0 ? false : _ref$isTopPosition,
+    _ref$usePadding = _ref.usePadding,
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding;
   var palette = (0, _palette.useComponentPalette)('dropdown');
   var position = (0, _react.useRef)({
     isAbove: true,
@@ -114,6 +116,7 @@ var Dropdown = exports.Dropdown = function Dropdown(_ref) {
     $width: width,
     $zIndex: zIndex,
     onTransitionEnd: handleCloseTransitionEnd,
-    $palette: palette
+    $palette: palette,
+    $usePadding: usePadding
   }, children);
 };

package/dist/components/common/Dropdown/styles.d.ts

@@ -11,4 +11,5 @@ export declare const Wrapper: import("styled-components/dist/types").IStyledComp
     $width: string;
     $zIndex?: number | undefined;
     $palette: TDropdownPalette;
+    $usePadding?: boolean | undefined;
 }>> & string;

package/dist/components/common/Dropdown/styles.js

@@ -13,35 +13,38 @@ var visible = (0, _styledComponents.css)(["visibility:visible;opacity:1;transiti
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-1f1enhf-0"
-})(["overflow:hidden;border-radius:20px;box-shadow:0px 10px 17px ", ";background:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
-  var $palette = _ref.$palette;
-  return $palette.shadow;
+})(["padding:", ";overflow:hidden;border-radius:20px;box-shadow:0 10px 17px ", ";background:", ";min-width:", ";width:", ";position:absolute;left:", ";right:", ";z-index:", ";", ";", ";", ";"], function (_ref) {
+  var $usePadding = _ref.$usePadding;
+  return $usePadding ? '8px;' : 'none';
 }, function (_ref2) {
   var $palette = _ref2.$palette;
-  return $palette.bg;
+  return $palette.shadow;
 }, function (_ref3) {
-  var $minWidth = _ref3.$minWidth;
-  return $minWidth;
+  var $palette = _ref3.$palette;
+  return $palette.bg;
 }, function (_ref4) {
-  var $width = _ref4.$width;
-  return $width;
+  var $minWidth = _ref4.$minWidth;
+  return $minWidth;
 }, function (_ref5) {
-  var $positionLeft = _ref5.$positionLeft;
-  return $positionLeft;
+  var $width = _ref5.$width;
+  return $width;
 }, function (_ref6) {
-  var $positionRight = _ref6.$positionRight;
-  return $positionRight;
+  var $positionLeft = _ref6.$positionLeft;
+  return $positionLeft;
 }, function (_ref7) {
-  var $zIndex = _ref7.$zIndex;
-  return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
+  var $positionRight = _ref7.$positionRight;
+  return $positionRight;
 }, function (_ref8) {
-  var $isVisible = _ref8.$isVisible;
-  return $isVisible ? visible : hidden;
+  var $zIndex = _ref8.$zIndex;
+  return $zIndex !== null && $zIndex !== void 0 ? $zIndex : 5;
 }, function (_ref9) {
-  var $isAbove = _ref9.$isAbove,
-    $positionVertical = _ref9.$positionVertical;
-  return $isAbove ? (0, _styledComponents.css)(["bottom:calc(100% + ", "px);"], $positionVertical) : (0, _styledComponents.css)(["top:calc(100% + ", "px);"], $positionVertical);
+  var $isVisible = _ref9.$isVisible;
+  return $isVisible ? visible : hidden;
 }, function (_ref10) {
-  var $translateY = _ref10.$translateY;
+  var $isAbove = _ref10.$isAbove,
+    $positionVertical = _ref10.$positionVertical;
+  return $isAbove ? (0, _styledComponents.css)(["bottom:calc(100% + ", "px);"], $positionVertical) : (0, _styledComponents.css)(["top:calc(100% + ", "px);"], $positionVertical);
+}, function (_ref11) {
+  var $translateY = _ref11.$translateY;
   return (0, _styledComponents.css)(["transform:translateY(", ");"], $translateY);
 });

package/dist/components/common/Scrollbar/index.js

@@ -16,7 +16,7 @@ var Scrollbar = exports.Scrollbar = function Scrollbar(_ref) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? '100%' : _ref$maxHeight,
     _ref$trackWidth = _ref.trackWidth,
-    trackWidth = _ref$trackWidth === void 0 ? 6 : _ref$trackWidth;
+    trackWidth = _ref$trackWidth === void 0 ? 4 : _ref$trackWidth;
   var palette = (0, _palette.useComponentPalette)('scrollbar');
   var props = (0, _react.useMemo)(function () {
     return {

package/dist/components/common/Scrollbar/palette.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.generateScrollbarPalette = void 0;
 var generateScrollbarPalette = exports.generateScrollbarPalette = function generateScrollbarPalette(abstractPalette) {
   return {
-    thumb: abstractPalette.neutralFoggy
+    thumb: abstractPalette.neutralUsual
   };
 };

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

@@ -24,6 +24,7 @@ type TControlProps = {
     optionsLoader?: ReactNode;
     size?: TSizes;
     required?: boolean;
+    usePadding?: boolean;
 };
 export type TProps = TFieldProps & TControlProps;
 export declare const Autocomplete: React.ForwardRefExoticComponent<Pick<React.InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "autoFocus" | "onFocus" | "onBlur"> & {

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

@@ -17,6 +17,7 @@ var _PureInput = require("../../../PureInput");
 var _Dropdown = require("../../../../common/Dropdown");
 var _Scrollbar = require("../../../../common/Scrollbar");
 var _constants = require("../../../constants");
+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 _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); }
@@ -57,12 +58,15 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     autoFocus = _ref.autoFocus,
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
-    readOnly = _ref.readOnly;
+    readOnly = _ref.readOnly,
+    _ref$usePadding = _ref.usePadding,
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding;
   var isMobile = (0, _useMedia.useMobile)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var palette = (0, _palette.useComponentPalette)('autocompleteDefaultOption');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onFocus: onFocus,
       onBlur: onBlur
@@ -117,18 +121,22 @@ var Autocomplete = exports.Autocomplete = /*#__PURE__*/(0, _react.forwardRef)(fu
     isOpen: isOpen && (!!options.length || !!isLoading),
     isAutoPosition: true,
     width: "100%",
-    minWidth: isMobile ? '100%' : '340px'
+    minWidth: isMobile ? '100%' : '340px',
+    usePadding: usePadding
   }, isLoading ? optionsLoader || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null), /*#__PURE__*/_react["default"].createElement(DefaultSkeletonItem, null)) : /*#__PURE__*/_react["default"].createElement(_Scrollbar.Scrollbar, {
     maxHeight: listHeight
   }, options.map(function (option, index) {
-    return /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
-      // eslint-disable-next-line react/no-array-index-key
+    return /*#__PURE__*/_react["default"].createElement(S.OptionContainer, {
+      $hoverBg: palette.hoverBg,
+      $recalculateWidthAndBorder: usePadding,
+      key: "".concat(option.value).concat(index)
+    }, /*#__PURE__*/_react["default"].createElement(S.OptionWrapper, {
       key: "".concat(option.value).concat(index),
       tabIndex: -1,
       type: "button",
       onClick: handleSelect,
       "data-index": JSON.stringify(index)
-    }, renderOption ? renderOption(option) : /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, null, option.value));
+    }, renderOption ? renderOption(option) : /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, null, option.value)));
   }))));
 });
 Autocomplete.displayName = 'Autocomplete';

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

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $recalculateWidthAndBorder: boolean;
+    $hoverBg: string;
+}>> & string;
 export declare const OptionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputLabelContent: 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/Autocomplete/components/Autocomplete/styles.js

@@ -3,26 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.OptionWrapper = exports.InputLabelContent = exports.DefaultSkeletonWrapper = exports.ChildrenWrapper = void 0;
+exports.Wrapper = exports.OptionWrapper = exports.OptionContainer = exports.InputLabelContent = exports.DefaultSkeletonWrapper = exports.ChildrenWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-1fp3ia8-0"
 })(["position:relative;box-sizing:border-box;"]);
+var OptionContainer = exports.OptionContainer = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OptionContainer",
+  componentId: "sc-1fp3ia8-1"
+})(["width:", ";border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
+  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
+}, function (_ref2) {
+  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? '12px' : 'none';
+}, function (_ref3) {
+  var $hoverBg = _ref3.$hoverBg;
+  return $hoverBg;
+});
 var OptionWrapper = exports.OptionWrapper = _styledComponents["default"].button.withConfig({
   displayName: "styles__OptionWrapper",
-  componentId: "sc-1fp3ia8-1"
+  componentId: "sc-1fp3ia8-2"
 })(["width:100%;background:transparent;border:none;cursor:pointer;outline:none;color:inherit;padding:0;"]);
 var ChildrenWrapper = exports.ChildrenWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__ChildrenWrapper",
-  componentId: "sc-1fp3ia8-2"
+  componentId: "sc-1fp3ia8-3"
 })(["position:absolute;height:100%;width:100%;pointer-events:none;display:flex;align-items:center;"]);
 var InputLabelContent = exports.InputLabelContent = _styledComponents["default"].div.withConfig({
   displayName: "styles__InputLabelContent",
-  componentId: "sc-1fp3ia8-3"
+  componentId: "sc-1fp3ia8-4"
 })(["position:relative;"]);
 var DefaultSkeletonWrapper = exports.DefaultSkeletonWrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__DefaultSkeletonWrapper",
-  componentId: "sc-1fp3ia8-4"
+  componentId: "sc-1fp3ia8-5"
 })(["padding:6px 12px;"]);

package/dist/components/form/Autocomplete/components/AutocompleteDefaultOption/index.js

@@ -7,22 +7,16 @@ exports.AutocompleteDefaultOption = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = require("../../../../common/Typography/typography");
-var _palette = require("../../../../../palette");
 var _Typography = require("../../../../common/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var AutocompleteDefaultOption = exports.AutocompleteDefaultOption = function AutocompleteDefaultOption(_ref) {
   var children = _ref.children;
-  var palette = (0, _palette.useComponentPalette)('autocompleteDefaultOption');
   return /*#__PURE__*/_react["default"].createElement(Wrapper, {
     variant: 'bodyMRegular',
-    element: 'div',
-    $hoverBg: palette.hoverBg
+    element: 'div'
   }, children);
 };
 var Wrapper = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "AutocompleteDefaultOption__Wrapper",
   componentId: "sc-1a61mvs-0"
-})(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:12px 20px;transition:all 0.2s ease-in-out;", " box-sizing:border-box;&:hover{background-color:", ";}"], _typography.typography.bodyMRegular, function (_ref2) {
-  var $hoverBg = _ref2.$hoverBg;
-  return $hoverBg;
-});
+})(["overflow:hidden;display:flex;width:100%;text-align:left;flex-direction:column;padding:12px 20px;transition:all 0.2s ease-in-out;", " box-sizing:border-box;"], _typography.typography.bodyMRegular);

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/index.js

@@ -21,7 +21,9 @@ var OrganizationAutocompleteItem = exports.OrganizationAutocompleteItem = functi
     vatNumberLabel = _ref.vatNumberLabel,
     taxRegistrationReasonCodeLabel = _ref.taxRegistrationReasonCodeLabel;
   var palette = (0, _palette.useComponentPalette)('organizationAutocompleteItem');
-  return /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, null, /*#__PURE__*/_react["default"].createElement(S.OrganizationWrapper, null, /*#__PURE__*/_react["default"].createElement(S.OrganizationName, {
+  return /*#__PURE__*/_react["default"].createElement(S.OptionContainer, {
+    $hoverBg: palette.hoverBg
+  }, /*#__PURE__*/_react["default"].createElement(_AutocompleteDefaultOption.AutocompleteDefaultOption, null, /*#__PURE__*/_react["default"].createElement(S.OrganizationWrapper, null, /*#__PURE__*/_react["default"].createElement(S.OrganizationName, {
     $color: palette.title,
     variant: "bodyMRegular"
   }, name), /*#__PURE__*/_react["default"].createElement(S.OrganizationDescription, {
@@ -44,5 +46,5 @@ var OrganizationAutocompleteItem = exports.OrganizationAutocompleteItem = functi
         key: index
       }, " ", feature, " ")
     );
-  }))));
+  })))));
 };

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/palette.d.ts

@@ -3,5 +3,6 @@ export type TOrganizationAutocompleteItemPalette = {
     title: string;
     description: string;
     label: string;
+    hoverBg: string;
 };
 export declare const generateOrganizationAutocompleteItemPalette: (abstractPalette: TAbstractPalette) => TOrganizationAutocompleteItemPalette;

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/palette.js

@@ -10,6 +10,7 @@ var generateOrganizationAutocompleteItemPalette = exports.generateOrganizationAu
   return {
     title: abstractPalette.primary,
     description: (0, _hexToRgba["default"])(abstractPalette.primary, 0.5),
-    label: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3)
+    label: (0, _hexToRgba["default"])(abstractPalette.primary, 0.3),
+    hoverBg: (0, _hexToRgba["default"])(abstractPalette.neutralUsual, 0.5)
   };
 };

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/styles.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 export declare const OrganizationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const OptionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $recalculateWidthAndBorder?: boolean | undefined;
+    $hoverBg: string;
+}>> & string;
 export declare const OrganizationName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("../../../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("../../../../common/Typography").TTypographyProps>, import("styled-components/dist/types").BaseObject>, {
     $color: string;
 }>> & string & Omit<import("react").FC<import("../../../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;

package/dist/components/form/Autocomplete/components/OrganizationAutocompleteItem/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OrganizationWrapper = exports.OrganizationVatNumber = exports.OrganizationProperties = exports.OrganizationName = exports.OrganizationLabel = exports.OrganizationDescription = exports.Feature = void 0;
+exports.OrganizationWrapper = exports.OrganizationVatNumber = exports.OrganizationProperties = exports.OrganizationName = exports.OrganizationLabel = exports.OrganizationDescription = exports.OptionContainer = exports.Feature = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Typography = require("../../../../common/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -11,42 +11,55 @@ var OrganizationWrapper = exports.OrganizationWrapper = _styledComponents["defau
   displayName: "styles__OrganizationWrapper",
   componentId: "sc-1pujz54-0"
 })(["display:flex;align-items:start;flex-direction:column;gap:4px;"]);
+var OptionContainer = exports.OptionContainer = _styledComponents["default"].div.withConfig({
+  displayName: "styles__OptionContainer",
+  componentId: "sc-1pujz54-1"
+})(["width:", ";border-radius:", ";&:hover{background-color:", ";}"], function (_ref) {
+  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
+}, function (_ref2) {
+  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? '12px' : 'none';
+}, function (_ref3) {
+  var $hoverBg = _ref3.$hoverBg;
+  return $hoverBg;
+});
 var OrganizationName = exports.OrganizationName = (0, _styledComponents["default"])(_Typography.Typography).attrs({
   element: 'span'
 }).withConfig({
   displayName: "styles__OrganizationName",
-  componentId: "sc-1pujz54-1"
-})(["color:", ";"], function (_ref) {
-  var $color = _ref.$color;
+  componentId: "sc-1pujz54-2"
+})(["color:", ";"], function (_ref4) {
+  var $color = _ref4.$color;
   return $color;
 });
 var OrganizationDescription = exports.OrganizationDescription = (0, _styledComponents["default"])(_Typography.Typography).attrs({
   element: 'span'
 }).withConfig({
   displayName: "styles__OrganizationDescription",
-  componentId: "sc-1pujz54-2"
-})(["color:", ";"], function (_ref2) {
-  var $color = _ref2.$color;
+  componentId: "sc-1pujz54-3"
+})(["color:", ";"], function (_ref5) {
+  var $color = _ref5.$color;
   return $color;
 });
 var OrganizationLabel = exports.OrganizationLabel = (0, _styledComponents["default"])(_Typography.Typography).attrs({
   element: 'span'
 }).withConfig({
   displayName: "styles__OrganizationLabel",
-  componentId: "sc-1pujz54-3"
-})(["color:", ";"], function (_ref3) {
-  var $color = _ref3.$color;
+  componentId: "sc-1pujz54-4"
+})(["color:", ";"], function (_ref6) {
+  var $color = _ref6.$color;
   return $color;
 });
 var OrganizationVatNumber = exports.OrganizationVatNumber = _styledComponents["default"].span.withConfig({
   displayName: "styles__OrganizationVatNumber",
-  componentId: "sc-1pujz54-4"
+  componentId: "sc-1pujz54-5"
 })(["margin-right:20px;"]);
 var OrganizationProperties = exports.OrganizationProperties = _styledComponents["default"].div.withConfig({
   displayName: "styles__OrganizationProperties",
-  componentId: "sc-1pujz54-5"
+  componentId: "sc-1pujz54-6"
 })(["display:flex;align-items:center;gap:10px;margin-top:3px;"]);
 var Feature = exports.Feature = _styledComponents["default"].div.withConfig({
   displayName: "styles__Feature",
-  componentId: "sc-1pujz54-6"
+  componentId: "sc-1pujz54-7"
 })(["display:contents;"]);

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

@@ -27,5 +27,6 @@ export type TProps<TValue> = Pick<TInputProps, 'label' | 'hasError' | 'placehold
     emptyOptionsLabel?: string;
     isLoading?: boolean;
     required?: boolean;
+    usePadding?: boolean;
 };
-export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, renderValue, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <TValue extends string | number>({ label, hasError, placeholder, name, value, renderValue, onChange, options, groups, isResetButtonEnabled, size, renderOption, dropdownHeader, isDrawerOptions, renderGroup, scrollbarMaxHeight, scrollbarHeader, emptyOptionsLabel, isLoading, onBlur, required, usePadding, }: TProps<TValue>) => import("react/jsx-runtime").JSX.Element;

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

@@ -52,7 +52,9 @@ var Select = exports.Select = function Select(_ref) {
     emptyOptionsLabel = _ref.emptyOptionsLabel,
     isLoading = _ref.isLoading,
     onBlur = _ref.onBlur,
-    required = _ref.required;
+    required = _ref.required,
+    _ref$usePadding = _ref.usePadding,
+    usePadding = _ref$usePadding === void 0 ? false : _ref$usePadding;
   var palette = (0, _palette.useComponentPalette)('select');
   var _useInputFocus = (0, _useInputFocus2.useInputFocus)({
       onBlur: onBlur
@@ -163,7 +165,8 @@ var Select = exports.Select = function Select(_ref) {
         onClick: handleSelect,
         "data-value": JSON.stringify(option.value),
         "data-option-identifier": OPTION_IDENTIFIER,
-        $isGrouped: !!group && !renderOption
+        $isGrouped: !!group && !renderOption,
+        $recalculateWidthAndBorder: usePadding
       }, handleOptionRender(option));
     }));
   }));
@@ -223,6 +226,7 @@ var Select = exports.Select = function Select(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(S.DrawerContent, null, handleDrawerContentRender())) : /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
     isOpen: isOpen,
     isAutoPosition: true,
-    width: "100%"
+    width: "100%",
+    usePadding: usePadding
   }, handleDropdownContentRender()));
 };

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

@@ -5,6 +5,7 @@ export declare const InputWrapper: import("styled-components/dist/types").IStyle
 export declare const Option: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, {
     $palette: TSelectPalette;
     $isGrouped: boolean;
+    $recalculateWidthAndBorder: boolean;
 }>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../common/Typography").TTypographyProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").FC<import("../../common/Typography").TTypographyProps>, keyof import("react").Component<any, {}, any>>;
 export declare const DefaultOptionWrapper: 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/styles.js

@@ -20,11 +20,17 @@ var InputWrapper = exports.InputWrapper = _styledComponents["default"].div.withC
 var Option = exports.Option = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__Option",
   componentId: "sc-1x9n0z5-2"
-})(["overflow:hidden;width:100%;text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;&:hover{background-color:", ";}", ""], function (_ref) {
-  var $palette = _ref.$palette;
-  return $palette.bgHover;
+})(["overflow:hidden;width:", ";text-align:left;transition:all 0.2s ease-in-out 0s;box-sizing:border-box;cursor:pointer;border-radius:", ";&:hover{background-color:", ";}", ""], function (_ref) {
+  var $recalculateWidthAndBorder = _ref.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? 'calc(100% - 14px)' : '100%';
 }, function (_ref2) {
-  var $isGrouped = _ref2.$isGrouped;
+  var $recalculateWidthAndBorder = _ref2.$recalculateWidthAndBorder;
+  return $recalculateWidthAndBorder ? '12px' : 'none';
+}, function (_ref3) {
+  var $palette = _ref3.$palette;
+  return $palette.bgHover;
+}, function (_ref4) {
+  var $isGrouped = _ref4.$isGrouped;
   return $isGrouped && (0, _styledComponents.css)(["padding-left:30px;"]);
 });
 var Group = exports.Group = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
@@ -46,7 +52,7 @@ var DrawerBottom = exports.DrawerBottom = _styledComponents["default"].div.withC
 var EmptyLabel = exports.EmptyLabel = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "styles__EmptyLabel",
   componentId: "sc-1x9n0z5-7"
-})(["color:", ";"], function (_ref3) {
-  var $color = _ref3.$color;
+})(["color:", ";"], function (_ref5) {
+  var $color = _ref5.$color;
   return $color;
 });

package/package.json

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