glints-aries 4.0.304 → 4.0.305

package/es/@next/DataTable/DataTable.d.ts

@@ -11,7 +11,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
     /** If the title in TableHeading is of type ReactNode and you require sorting functionality, please make sure to provide 'id' for the TableHeading */
     headings: TableHeading[];
     children: React.ReactNode;
-    emptyState: React.ReactElement<EmptyStateProps>;
+    emptyState?: React.ReactElement<EmptyStateProps>;
     totals?: Total[];
     loading?: boolean;
     loadingLabel?: string;

package/es/@next/DataTable/DataTable.js

@@ -68,9 +68,9 @@ var DataTableComponent = /*#__PURE__*/React.forwardRef(function DataTable(_ref,
     }
     rows.push(reactEl);
   }
-  var emptyRow = /*#__PURE__*/React.createElement(StyledTableRow, null, /*#__PURE__*/React.createElement(StyledTableCell, {
+  var emptyRow = emptyState ? /*#__PURE__*/React.createElement(StyledTableRow, null, /*#__PURE__*/React.createElement(StyledTableCell, {
     colSpan: headings.length
-  }, emptyState));
+  }, emptyState)) : null;
   var hasRows = rows.length > 0;
   var rowsMarkup = hasRows ? rows : emptyRow;
   var showFooter = !!footer;

package/es/@next/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Option, Section } from '../Menu';
+import { IconNames } from '../Icon/icons/icons';
 interface SearchableProps {
     /** value of TextInput activator when Select is searchable */
     inputValue?: string;
@@ -8,6 +9,7 @@ interface SearchableProps {
 }
 export interface SelectProps {
     allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
     disabled?: boolean;
     hasError?: boolean;
     helpText?: React.ReactNode;
@@ -41,5 +43,5 @@ export interface SelectProps {
     /** sets z-index override for option list dropdown. z-index default to 400 */
     zIndexOverride?: number;
 }
-export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onClose, onRemoveTag, onSelect, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onClose, onRemoveTag, onSelect, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
 export {};

package/es/@next/Select/Select.js

@@ -9,6 +9,7 @@ import { ActivatorWrapper, HelpTextContainer } from './SelectStyle';
 export var Select = function Select(_ref) {
   var _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    customActivatorIcon = _ref.customActivatorIcon,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$hasError = _ref.hasError,
@@ -127,6 +128,7 @@ export var Select = function Select(_ref) {
     }
     return /*#__PURE__*/React.createElement(ActivatorSelect, {
       allowMultiple: allowMultiple,
+      customActivatorIcon: customActivatorIcon,
       disabled: disabled,
       hasError: hasError,
       placeholder: placeholder != null ? placeholder : 'Placeholder',
@@ -135,7 +137,8 @@ export var Select = function Select(_ref) {
       width: width,
       selectedValues: selectedValues,
       options: options,
-      name: name
+      name: name,
+      prefix: prefix
     });
   };
   return /*#__PURE__*/React.createElement(Popover, {

package/es/@next/Select/Select.stories.d.ts

@@ -5,6 +5,7 @@ export declare const NonSearchableSingleSelect: any;
 export declare const NonSearchableMultipleSelect: any;
 export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
+export declare const NonSearchablePrefixed: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
 export declare const SearchableSingleSelectWithOverflowingInputState: any;

package/es/@next/Select/components/Activator/ActivatorSelect.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Option } from '../../../Menu';
-export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { IconNames } from '../../../Icon/icons/icons';
+export interface ActivatorSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'prefix'> {
     allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
     hasError?: boolean;
     selectedValues?: string[];
     placeholder?: string;
+    prefix?: React.ReactNode;
     onRemoveTag?({ option }: {
         option: string;
     }): void;
@@ -12,4 +15,4 @@ export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLBut
     options?: Option[];
     width?: string;
 }
-export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, ...props }: ActivatorSelectProps) => JSX.Element;
+export declare const ActivatorSelect: ({ customActivatorIcon, placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, prefix, ...props }: ActivatorSelectProps) => JSX.Element;

package/es/@next/Select/components/Activator/ActivatorSelect.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options"];
+var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix"];
 import React, { useEffect, useRef, useState } from 'react';
-import { Icon } from '../../../Icon';
 import { Typography } from '../../../Typography';
 import { Blue, Neutral } from '../../../utilities/colors';
-import { StyledSelect, StyledSelectTypography, StyledTag, TagsContainer } from './ActivatorStyle';
+import { StyledIcon, StyledPrefixContainer, StyledSelect, StyledSelectTypography, StyledTag, TagsContainer, WithPrefixContainer } from './ActivatorStyle';
 export var ActivatorSelect = function ActivatorSelect(_ref) {
-  var placeholder = _ref.placeholder,
+  var customActivatorIcon = _ref.customActivatorIcon,
+    placeholder = _ref.placeholder,
     selectedValues = _ref.selectedValues,
     onClick = _ref.onClick,
     onRemoveTag = _ref.onRemoveTag,
@@ -20,6 +20,7 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     options = _ref.options,
+    prefix = _ref.prefix,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState([]),
     filteredValues = _useState[0],
@@ -76,13 +77,13 @@ export var ActivatorSelect = function ActivatorSelect(_ref) {
     onClick: handleClick,
     disabled: disabled,
     width: width
-  }), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(StyledSelectTypography, {
+  }), /*#__PURE__*/React.createElement(WithPrefixContainer, null, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(StyledSelectTypography, {
     variant: "body1",
     "data-disabled": disabled,
     color: hasSelectedValues ? Neutral.B18 : Neutral.B40
-  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup), /*#__PURE__*/React.createElement(Icon, {
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/React.createElement(StyledIcon, {
     height: 24,
-    name: "ri-arrow-m-down-line",
+    name: customActivatorIcon || 'ri-arrow-m-down-line',
     fill: disabled ? Neutral.B85 : Neutral.B40
   }));
 };

package/es/@next/Select/components/Activator/ActivatorStyle.d.ts

@@ -8,3 +8,6 @@ export declare const StyledTextInput: import("styled-components").StyledComponen
     onChange?: (value: string) => void;
 } & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
 export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
+export declare const WithPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ name, ...props }: import("../../../Icon").IconProps) => JSX.Element, any, {}, never>;

package/es/@next/Select/components/Activator/ActivatorStyle.js

@@ -7,6 +7,7 @@ import { space8 } from '../../../utilities/spacing';
 import { TextInput } from '../../../TextInput';
 import { Tag } from '../../../Tag';
 import { Typography } from '../../../Typography';
+import { Icon } from '../../../Icon';
 export var StyledSelect = styled.button.withConfig({
   displayName: "ActivatorStyle__StyledSelect",
   componentId: "sc-rui73p-0"
@@ -30,4 +31,16 @@ export var StyledTextInput = styled(TextInput).withConfig({
 export var StyledSelectTypography = styled(Typography).withConfig({
   displayName: "ActivatorStyle__StyledSelectTypography",
   componentId: "sc-rui73p-4"
-})(["&[data-disabled='true']{color:", ";}"], Neutral.B85);
+})(["display:flex;margin-left:auto;&[data-disabled='true']{color:", ";}"], Neutral.B85);
+export var WithPrefixContainer = styled.div.withConfig({
+  displayName: "ActivatorStyle__WithPrefixContainer",
+  componentId: "sc-rui73p-5"
+})(["display:flex;align-items:center;"]);
+export var StyledPrefixContainer = styled.div.withConfig({
+  displayName: "ActivatorStyle__StyledPrefixContainer",
+  componentId: "sc-rui73p-6"
+})(["display:flex;width:20px;margin-right:8px;"]);
+export var StyledIcon = styled(Icon).withConfig({
+  displayName: "ActivatorStyle__StyledIcon",
+  componentId: "sc-rui73p-7"
+})(["margin-left:auto;"]);

package/es/@next/Select/selectStoryHelper/NonSearchableSingleSelect.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["options", "allowMultiple", "disabled"];
 import React, { useState } from 'react';
 import { Select } from '../Select';
-import { SelectWrapper } from './SelectStoryStyle';
 export var SingleSelect = function SingleSelect(_ref) {
   var options = _ref.options,
     allowMultiple = _ref.allowMultiple,
@@ -16,18 +15,13 @@ export var SingleSelect = function SingleSelect(_ref) {
     var value = _ref2.value;
     setSelected(value);
   };
-  return /*#__PURE__*/React.createElement(SelectWrapper, {
-    style: {
-      display: 'flex',
-      width: '400px'
-    }
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
     allowMultiple: allowMultiple,
     disabled: disabled,
     options: options,
     onSelect: handleSelect,
     selectedValues: [selected],
-    width: "100%",
+    width: "400px",
     label: "Label"
-  })));
+  }));
 };

package/es/@next/Select/selectStoryHelper/SelectStoryStyle.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
 export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Select/selectStoryHelper/SelectStoryStyle.js

@@ -4,8 +4,4 @@ import { space8 } from '../../utilities/spacing';
 export var StyledTag = styled(Tag).withConfig({
   displayName: "SelectStoryStyle__StyledTag",
   componentId: "sc-1xv9wvg-0"
-})(["margin-right:", ";"], space8);
-export var SelectWrapper = styled.div.withConfig({
-  displayName: "SelectStoryStyle__SelectWrapper",
-  componentId: "sc-1xv9wvg-1"
-})(["div{width:100%;}"]);
+})(["margin-right:", ";"], space8);

package/es/@next/SideSheet/SideSheet.js

@@ -88,7 +88,7 @@ var SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet(_ref, ref) {
     onClick: handleClose
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ri-close"
-  })))), showHorizontalLine && /*#__PURE__*/React.createElement(StyledHorizontalLine, null), children, /*#__PURE__*/React.createElement(StyledSideSheetFooter, null, /*#__PURE__*/React.createElement(StyledHorizontalLine, null), /*#__PURE__*/React.createElement(StyledButtonGroupContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+  })))), showHorizontalLine && /*#__PURE__*/React.createElement(StyledHorizontalLine, null), children, (basicButtonAction || primaryButtonAction) && /*#__PURE__*/React.createElement(StyledSideSheetFooter, null, /*#__PURE__*/React.createElement(StyledHorizontalLine, null), /*#__PURE__*/React.createElement(StyledButtonGroupContainer, null, /*#__PURE__*/React.createElement(ButtonGroup, {
     fullWidth: true
   }, basicButtonAction && /*#__PURE__*/React.createElement(Button, {
     onClick: basicButtonAction.action,

package/lib/@next/DataTable/DataTable.d.ts

@@ -11,7 +11,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
     /** If the title in TableHeading is of type ReactNode and you require sorting functionality, please make sure to provide 'id' for the TableHeading */
     headings: TableHeading[];
     children: React.ReactNode;
-    emptyState: React.ReactElement<EmptyStateProps>;
+    emptyState?: React.ReactElement<EmptyStateProps>;
     totals?: Total[];
     loading?: boolean;
     loadingLabel?: string;

package/lib/@next/DataTable/DataTable.js

@@ -73,9 +73,9 @@ var DataTableComponent = /*#__PURE__*/_react["default"].forwardRef(function Data
     }
     rows.push(reactEl);
   }
-  var emptyRow = /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
+  var emptyRow = emptyState ? /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableRow, null, /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
     colSpan: headings.length
-  }, emptyState));
+  }, emptyState)) : null;
   var hasRows = rows.length > 0;
   var rowsMarkup = hasRows ? rows : emptyRow;
   var showFooter = !!footer;

package/lib/@next/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Option, Section } from '../Menu';
+import { IconNames } from '../Icon/icons/icons';
 interface SearchableProps {
     /** value of TextInput activator when Select is searchable */
     inputValue?: string;
@@ -8,6 +9,7 @@ interface SearchableProps {
 }
 export interface SelectProps {
     allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
     disabled?: boolean;
     hasError?: boolean;
     helpText?: React.ReactNode;
@@ -41,5 +43,5 @@ export interface SelectProps {
     /** sets z-index override for option list dropdown. z-index default to 400 */
     zIndexOverride?: number;
 }
-export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onClose, onRemoveTag, onSelect, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onClose, onRemoveTag, onSelect, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/Select.js

@@ -15,6 +15,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Select = function Select(_ref) {
   var _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    customActivatorIcon = _ref.customActivatorIcon,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$hasError = _ref.hasError,
@@ -133,6 +134,7 @@ var Select = function Select(_ref) {
     }
     return /*#__PURE__*/_react["default"].createElement(_ActivatorSelect.ActivatorSelect, {
       allowMultiple: allowMultiple,
+      customActivatorIcon: customActivatorIcon,
       disabled: disabled,
       hasError: hasError,
       placeholder: placeholder != null ? placeholder : 'Placeholder',
@@ -141,7 +143,8 @@ var Select = function Select(_ref) {
       width: width,
       selectedValues: selectedValues,
       options: options,
-      name: name
+      name: name,
+      prefix: prefix
     });
   };
   return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {

package/lib/@next/Select/Select.stories.d.ts

@@ -5,6 +5,7 @@ export declare const NonSearchableSingleSelect: any;
 export declare const NonSearchableMultipleSelect: any;
 export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
+export declare const NonSearchablePrefixed: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
 export declare const SearchableSingleSelectWithOverflowingInputState: any;

package/lib/@next/Select/components/Activator/ActivatorSelect.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Option } from '../../../Menu';
-export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { IconNames } from '../../../Icon/icons/icons';
+export interface ActivatorSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'prefix'> {
     allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
     hasError?: boolean;
     selectedValues?: string[];
     placeholder?: string;
+    prefix?: React.ReactNode;
     onRemoveTag?({ option }: {
         option: string;
     }): void;
@@ -12,4 +15,4 @@ export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLBut
     options?: Option[];
     width?: string;
 }
-export declare const ActivatorSelect: ({ placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, ...props }: ActivatorSelectProps) => JSX.Element;
+export declare const ActivatorSelect: ({ customActivatorIcon, placeholder, selectedValues, onClick, onRemoveTag, width, allowMultiple, disabled, onSelectClick, hasError, options, prefix, ...props }: ActivatorSelectProps) => JSX.Element;

package/lib/@next/Select/components/Activator/ActivatorSelect.js

@@ -6,15 +6,15 @@ exports.ActivatorSelect = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
-var _Icon = require("../../../Icon");
 var _Typography = require("../../../Typography");
 var _colors = require("../../../utilities/colors");
 var _ActivatorStyle = require("./ActivatorStyle");
-var _excluded = ["placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options"];
+var _excluded = ["customActivatorIcon", "placeholder", "selectedValues", "onClick", "onRemoveTag", "width", "allowMultiple", "disabled", "onSelectClick", "hasError", "options", "prefix"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ActivatorSelect = function ActivatorSelect(_ref) {
-  var placeholder = _ref.placeholder,
+  var customActivatorIcon = _ref.customActivatorIcon,
+    placeholder = _ref.placeholder,
     selectedValues = _ref.selectedValues,
     onClick = _ref.onClick,
     onRemoveTag = _ref.onRemoveTag,
@@ -27,6 +27,7 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
     _ref$hasError = _ref.hasError,
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     options = _ref.options,
+    prefix = _ref.prefix,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var _useState = (0, _react.useState)([]),
     filteredValues = _useState[0],
@@ -83,13 +84,13 @@ var ActivatorSelect = function ActivatorSelect(_ref) {
     onClick: handleClick,
     disabled: disabled,
     width: width
-  }), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledSelectTypography, {
+  }), /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.WithPrefixContainer, null, prefix && /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledPrefixContainer, null, prefix), allowMultiple ? tagsMarkup() : /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledSelectTypography, {
     variant: "body1",
     "data-disabled": disabled,
     color: hasSelectedValues ? _colors.Neutral.B18 : _colors.Neutral.B40
-  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup), /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+  }, hasSelectedValues ? selectedLabels[0] : placeholderMarkup)), /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledIcon, {
     height: 24,
-    name: "ri-arrow-m-down-line",
+    name: customActivatorIcon || 'ri-arrow-m-down-line',
     fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
   }));
 };

package/lib/@next/Select/components/Activator/ActivatorStyle.d.ts

@@ -8,3 +8,6 @@ export declare const StyledTextInput: import("styled-components").StyledComponen
     onChange?: (value: string) => void;
 } & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
 export declare const StyledSelectTypography: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("../../../Typography").TypographyProps) => JSX.Element, any, {}, never>;
+export declare const WithPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPrefixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<({ name, ...props }: import("../../../Icon").IconProps) => JSX.Element, any, {}, never>;

package/lib/@next/Select/components/Activator/ActivatorStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelectTypography = exports.StyledSelect = void 0;
+exports.WithPrefixContainer = exports.TagsContainer = exports.StyledTextInput = exports.StyledTag = exports.StyledSelectTypography = exports.StyledSelect = exports.StyledPrefixContainer = exports.StyledIcon = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints/Breakpoints"));
 var _borderRadius = require("../../../utilities/borderRadius");
@@ -12,6 +12,7 @@ var _spacing = require("../../../utilities/spacing");
 var _TextInput = require("../../../TextInput");
 var _Tag = require("../../../Tag");
 var _Typography = require("../../../Typography");
+var _Icon = require("../../../Icon");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var StyledSelect = _styledComponents["default"].button.withConfig({
@@ -41,5 +42,20 @@ exports.StyledTextInput = StyledTextInput;
 var StyledSelectTypography = (0, _styledComponents["default"])(_Typography.Typography).withConfig({
   displayName: "ActivatorStyle__StyledSelectTypography",
   componentId: "sc-rui73p-4"
-})(["&[data-disabled='true']{color:", ";}"], _colors.Neutral.B85);
-exports.StyledSelectTypography = StyledSelectTypography;
+})(["display:flex;margin-left:auto;&[data-disabled='true']{color:", ";}"], _colors.Neutral.B85);
+exports.StyledSelectTypography = StyledSelectTypography;
+var WithPrefixContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ActivatorStyle__WithPrefixContainer",
+  componentId: "sc-rui73p-5"
+})(["display:flex;align-items:center;"]);
+exports.WithPrefixContainer = WithPrefixContainer;
+var StyledPrefixContainer = _styledComponents["default"].div.withConfig({
+  displayName: "ActivatorStyle__StyledPrefixContainer",
+  componentId: "sc-rui73p-6"
+})(["display:flex;width:20px;margin-right:8px;"]);
+exports.StyledPrefixContainer = StyledPrefixContainer;
+var StyledIcon = (0, _styledComponents["default"])(_Icon.Icon).withConfig({
+  displayName: "ActivatorStyle__StyledIcon",
+  componentId: "sc-rui73p-7"
+})(["margin-left:auto;"]);
+exports.StyledIcon = StyledIcon;

package/lib/@next/Select/selectStoryHelper/NonSearchableSingleSelect.js

@@ -7,7 +7,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _Select = require("../Select");
-var _SelectStoryStyle = require("./SelectStoryStyle");
 var _excluded = ["options", "allowMultiple", "disabled"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,19 +22,14 @@ var SingleSelect = function SingleSelect(_ref) {
     var value = _ref2.value;
     setSelected(value);
   };
-  return /*#__PURE__*/_react["default"].createElement(_SelectStoryStyle.SelectWrapper, {
-    style: {
-      display: 'flex',
-      width: '400px'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
     allowMultiple: allowMultiple,
     disabled: disabled,
     options: options,
     onSelect: handleSelect,
     selectedValues: [selected],
-    width: "100%",
+    width: "400px",
     label: "Label"
-  })));
+  }));
 };
 exports.SingleSelect = SingleSelect;

package/lib/@next/Select/selectStoryHelper/SelectStoryStyle.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
 export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Select/selectStoryHelper/SelectStoryStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledTag = exports.SelectWrapper = void 0;
+exports.StyledTag = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Tag = require("../../Tag");
 var _spacing = require("../../utilities/spacing");
@@ -10,9 +10,4 @@ var StyledTag = (0, _styledComponents["default"])(_Tag.Tag).withConfig({
   displayName: "SelectStoryStyle__StyledTag",
   componentId: "sc-1xv9wvg-0"
 })(["margin-right:", ";"], _spacing.space8);
-exports.StyledTag = StyledTag;
-var SelectWrapper = _styledComponents["default"].div.withConfig({
-  displayName: "SelectStoryStyle__SelectWrapper",
-  componentId: "sc-1xv9wvg-1"
-})(["div{width:100%;}"]);
-exports.SelectWrapper = SelectWrapper;
+exports.StyledTag = StyledTag;

package/lib/@next/SideSheet/SideSheet.js

@@ -95,7 +95,7 @@ var SideSheet = /*#__PURE__*/_react["default"].forwardRef(function SideSheet(_re
     onClick: handleClose
   }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: "ri-close"
-  })))), showHorizontalLine && /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledHorizontalLine, null), children, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledSideSheetFooter, null, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledHorizontalLine, null), /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledButtonGroupContainer, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, {
+  })))), showHorizontalLine && /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledHorizontalLine, null), children, (basicButtonAction || primaryButtonAction) && /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledSideSheetFooter, null, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledHorizontalLine, null), /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledButtonGroupContainer, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, {
     fullWidth: true
   }, basicButtonAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: basicButtonAction.action,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.304",
+  "version": "4.0.305",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",