glints-aries 4.0.304 → 4.0.306

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;
@@ -19,7 +19,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
 }
 export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
     Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
-    Cell: ({ align, children, noWrap, }: import("./TableCell").TableCellProps) => JSX.Element;
+    Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
     Footer: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;

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

@@ -54,7 +54,7 @@ var DataTableComponent = /*#__PURE__*/React.forwardRef(function DataTable(_ref,
       align: align
     }, /*#__PURE__*/React.createElement(Typography, {
       as: "div",
-      variant: "body2"
+      variant: "caption"
     }, title));
   }) : null;
   var footer;
@@ -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/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts}

@@ -4,3 +4,4 @@ export default _default;
 export declare const Interactive: any;
 export declare const WithEmptyState: any;
 export declare const WithNoWrapCell: any;
+export declare const VerticalAlignCenterCell: any;

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

@@ -2,8 +2,9 @@ import styled from 'styled-components';
 import * as DropShadow from '../utilities/dropShadow';
 import { borderRadius8 } from '../utilities/borderRadius';
 import { Blue, Neutral } from '../utilities/colors';
-import { space16 } from '../utilities/spacing';
+import { space16, space8 } from '../utilities/spacing';
 var alignmentStyle = "\n&[data-text-align='right'] {\n  > div {\n    display: flex;\n    justify-content: right;\n  }\n}\n\n&[data-text-align='center'] {\n  > div {\n    display: flex;\n    justify-content: center;\n  }\n}\n";
+var cellVerticalAlign = "\n&[data-vertical-align='top'] {\n  vertical-align: top;\n}\n\n&[data-vertical-align='center'] {\n  vertical-align: center;\n}\n";
 export var StyledTable = styled.table.withConfig({
   displayName: "DataTableStyle__StyledTable",
   componentId: "sc-18v2ula-0"
@@ -15,11 +16,11 @@ export var StyledTableRow = styled.tr.withConfig({
 export var StyledTabledHeader = styled.th.withConfig({
   displayName: "DataTableStyle__StyledTabledHeader",
   componentId: "sc-18v2ula-2"
-})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], space16, alignmentStyle, Neutral.B99, Neutral.B40);
+})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:16px;height:16px;fill:", ";margin-bottom:2px;}"], space16, alignmentStyle, Neutral.B99, Neutral.B40);
 export var StyledTableCell = styled.td.withConfig({
   displayName: "DataTableStyle__StyledTableCell",
   componentId: "sc-18v2ula-3"
-})(["text-align:left;padding:", ";vertical-align:top;", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], space16, alignmentStyle);
+})(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], space8, space16, alignmentStyle, cellVerticalAlign);
 export var StyledTableFooterRow = styled.tr.withConfig({
   displayName: "DataTableStyle__StyledTableFooterRow",
   componentId: "sc-18v2ula-4"

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

@@ -3,5 +3,6 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColEleme
     children: React.ReactNode;
     /** Sets table cell content to not wrap*/
     noWrap?: boolean;
+    verticalAlign?: 'top' | 'center';
 }
-export declare const TableCell: ({ align, children, noWrap, }: TableCellProps) => JSX.Element;
+export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;

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

@@ -5,12 +5,15 @@ export var TableCell = function TableCell(_ref) {
   var align = _ref.align,
     children = _ref.children,
     _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap;
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
   return /*#__PURE__*/React.createElement(StyledTableCell, {
     "data-text-align": align,
-    "data-no-wrap": noWrap
+    "data-no-wrap": noWrap,
+    "data-vertical-align": verticalAlign
   }, /*#__PURE__*/React.createElement(Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, children));
 };

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

@@ -16,13 +16,16 @@ export var TableHeader = function TableHeader(_ref) {
   useEffect(function () {
     setSortDirection(sortDirectionProp);
   }, [sortDirectionProp]);
-  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-xs-up-fill' : 'ri-arrow-xs-down-fill';
+  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
   var iconMarkup = sortDirection ? /*#__PURE__*/React.createElement(Icon, {
-    name: iconName
+    className: "data-table-sort-button-icon",
+    name: iconName,
+    height: "10px",
+    fill: Neutral.B40
   }) : null;
   var titleMarkup = /*#__PURE__*/React.createElement(Typography, {
     as: "span",
-    variant: "body2",
+    variant: "caption",
     color: Neutral.B18,
     style: {
       whiteSpace: 'nowrap'
@@ -37,6 +40,7 @@ export var TableHeader = function TableHeader(_ref) {
     onSort == null ? void 0 : onSort(direction);
   };
   var sortableCellMarkup = /*#__PURE__*/React.createElement(Button, {
+    className: "data-table-sort-button",
     "data-testid": "data-table-sort-button-" + title,
     icon: iconMarkup,
     onClick: function onClick() {

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;
@@ -19,7 +19,7 @@ export interface DataTableProps extends React.TableHTMLAttributes<HTMLTableEleme
 }
 export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> & {
     Row: ({ children, ...props }: import("./TableRow").TableRowProps) => JSX.Element;
-    Cell: ({ align, children, noWrap, }: import("./TableCell").TableCellProps) => JSX.Element;
+    Cell: ({ align, children, noWrap, verticalAlign, }: import("./TableCell").TableCellProps) => JSX.Element;
     Footer: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;

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

@@ -59,7 +59,7 @@ var DataTableComponent = /*#__PURE__*/_react["default"].forwardRef(function Data
       align: align
     }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
       as: "div",
-      variant: "body2"
+      variant: "caption"
     }, title));
   }) : null;
   var footer;
@@ -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/DataTable/{DatatTable.stories.d.ts → DataTable.stories.d.ts}

@@ -4,3 +4,4 @@ export default _default;
 export declare const Interactive: any;
 export declare const WithEmptyState: any;
 export declare const WithNoWrapCell: any;
+export declare const VerticalAlignCenterCell: any;

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

@@ -11,6 +11,7 @@ var _spacing = require("../utilities/spacing");
 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 alignmentStyle = "\n&[data-text-align='right'] {\n  > div {\n    display: flex;\n    justify-content: right;\n  }\n}\n\n&[data-text-align='center'] {\n  > div {\n    display: flex;\n    justify-content: center;\n  }\n}\n";
+var cellVerticalAlign = "\n&[data-vertical-align='top'] {\n  vertical-align: top;\n}\n\n&[data-vertical-align='center'] {\n  vertical-align: center;\n}\n";
 var StyledTable = _styledComponents["default"].table.withConfig({
   displayName: "DataTableStyle__StyledTable",
   componentId: "sc-18v2ula-0"
@@ -24,12 +25,12 @@ exports.StyledTableRow = StyledTableRow;
 var StyledTabledHeader = _styledComponents["default"].th.withConfig({
   displayName: "DataTableStyle__StyledTabledHeader",
   componentId: "sc-18v2ula-2"
-})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:24px;height:24px;fill:", ";}"], _spacing.space16, alignmentStyle, _colors.Neutral.B99, _colors.Neutral.B40);
+})(["padding:", ";text-align:left;", " button{padding:0;margin:0;height:auto;border:none;box-shadow:none;background:", ";}button:hover{background:transparent;}button:active{border:none;box-shadow:none;background:transparent;}button:focus{border:none;}button svg{width:16px;height:16px;fill:", ";margin-bottom:2px;}"], _spacing.space16, alignmentStyle, _colors.Neutral.B99, _colors.Neutral.B40);
 exports.StyledTabledHeader = StyledTabledHeader;
 var StyledTableCell = _styledComponents["default"].td.withConfig({
   displayName: "DataTableStyle__StyledTableCell",
   componentId: "sc-18v2ula-3"
-})(["text-align:left;padding:", ";vertical-align:top;", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space16, alignmentStyle);
+})(["text-align:left;padding:", " ", ";", " ", " &[data-no-wrap='true']{white-space:nowrap;div{width:max-content;}}"], _spacing.space8, _spacing.space16, alignmentStyle, cellVerticalAlign);
 exports.StyledTableCell = StyledTableCell;
 var StyledTableFooterRow = _styledComponents["default"].tr.withConfig({
   displayName: "DataTableStyle__StyledTableFooterRow",

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

@@ -3,5 +3,6 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableColEleme
     children: React.ReactNode;
     /** Sets table cell content to not wrap*/
     noWrap?: boolean;
+    verticalAlign?: 'top' | 'center';
 }
-export declare const TableCell: ({ align, children, noWrap, }: TableCellProps) => JSX.Element;
+export declare const TableCell: ({ align, children, noWrap, verticalAlign, }: TableCellProps) => JSX.Element;

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

@@ -10,13 +10,16 @@ var TableCell = function TableCell(_ref) {
   var align = _ref.align,
     children = _ref.children,
     _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap;
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$verticalAlign = _ref.verticalAlign,
+    verticalAlign = _ref$verticalAlign === void 0 ? 'top' : _ref$verticalAlign;
   return /*#__PURE__*/_react["default"].createElement(_DataTableStyle.StyledTableCell, {
     "data-text-align": align,
-    "data-no-wrap": noWrap
+    "data-no-wrap": noWrap,
+    "data-vertical-align": verticalAlign
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "div",
-    variant: "body1"
+    variant: "subtitle2"
   }, children));
 };
 exports.TableCell = TableCell;

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

@@ -22,13 +22,16 @@ var TableHeader = function TableHeader(_ref) {
   (0, _react.useEffect)(function () {
     setSortDirection(sortDirectionProp);
   }, [sortDirectionProp]);
-  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-xs-up-fill' : 'ri-arrow-xs-down-fill';
+  var iconName = sortDirection === 'ASCENDING' ? 'ri-arrow-up-line' : 'ri-arrow-down-line';
   var iconMarkup = sortDirection ? /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
-    name: iconName
+    className: "data-table-sort-button-icon",
+    name: iconName,
+    height: "10px",
+    fill: _colors.Neutral.B40
   }) : null;
   var titleMarkup = /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
-    variant: "body2",
+    variant: "caption",
     color: _colors.Neutral.B18,
     style: {
       whiteSpace: 'nowrap'
@@ -43,6 +46,7 @@ var TableHeader = function TableHeader(_ref) {
     onSort == null ? void 0 : onSort(direction);
   };
   var sortableCellMarkup = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    className: "data-table-sort-button",
     "data-testid": "data-table-sort-button-" + title,
     icon: iconMarkup,
     onClick: function onClick() {

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.306",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",