glints-aries 4.0.382 → 4.0.384

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

@@ -3,6 +3,7 @@ export interface Option {
     disabled?: boolean;
     id?: string;
     label: string | React.ReactNode;
+    sublabel?: React.ReactNode;
     value: string;
 }
 export interface Section {

package/es/@next/Menu/Menu.js

@@ -29,6 +29,7 @@ export var Menu = function Menu(_ref) {
     return /*#__PURE__*/React.createElement(StyledMenu, null, options == null ? void 0 : options.map(function (option) {
       var value = option.value,
         label = option.label,
+        sublabel = option.sublabel,
         disabled = option.disabled,
         id = option.id;
       var randomId = nextId('glints-menu-option');
@@ -42,7 +43,8 @@ export var Menu = function Menu(_ref) {
         onClick: onClick,
         allowMultiple: allowMultiple
       }, /*#__PURE__*/React.createElement(MenuOptionLabel, {
-        label: label
+        label: label,
+        sublabel: sublabel
       }));
     }));
   };

package/es/@next/Menu/components/MenuOptionLabel.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-export declare const MenuOptionLabel: ({ label }: {
+interface MenuOptionLabelProps {
     label: React.ReactNode;
-}) => JSX.Element;
+    sublabel?: React.ReactNode;
+}
+export declare const MenuOptionLabel: ({ label, sublabel }: MenuOptionLabelProps) => JSX.Element;
+export {};

package/es/@next/Menu/components/MenuOptionLabel.js

@@ -1,11 +1,24 @@
 import React from 'react';
 import { Typography } from '../../Typography';
 import { Neutral } from '../../utilities/colors';
+import { MenuOptionLabelContainer } from './MenuOptionLabelStyle';
 export var MenuOptionLabel = function MenuOptionLabel(_ref) {
-  var label = _ref.label;
-  return /*#__PURE__*/React.createElement(Typography, {
+  var label = _ref.label,
+    sublabel = _ref.sublabel;
+  if (!sublabel) {
+    return /*#__PURE__*/React.createElement(Typography, {
+      as: "span",
+      variant: "body1",
+      color: Neutral.B18
+    }, label);
+  }
+  return /*#__PURE__*/React.createElement(MenuOptionLabelContainer, null, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "body1",
     color: Neutral.B18
-  }, label);
+  }, label), /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: Neutral.B40
+  }, sublabel));
 };

package/es/@next/Menu/components/MenuOptionLabelStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const MenuOptionLabelContainer: import("styled-components").StyledComponent<"div", any, {
+    sublabel?: React.ReactNode;
+}, never>;

package/es/@next/Menu/components/MenuOptionLabelStyle.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var MenuOptionLabelContainer = styled.div.withConfig({
+  displayName: "MenuOptionLabelStyle__MenuOptionLabelContainer",
+  componentId: "sc-oryr0t-0"
+})(["display:flex;flex-direction:column;align-items:center;padding:4px 0;"]);

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

@@ -17,3 +17,4 @@ export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;
 export declare const WithCustomPrefix: any;
+export declare const OptionsWithSublabel: any;

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

@@ -12,15 +12,15 @@ export var StyledSideSheetContainer = styled.div.withConfig({
 export var StyledSideSheetHeader = styled.div.withConfig({
   displayName: "SideSheetStyle__StyledSideSheetHeader",
   componentId: "sc-z0rzf0-2"
-})(["display:flex;align-items:top;padding:16px 20px;"]);
+})(["display:flex;align-items:top;padding:16px 20px;gap:8px;"]);
 export var StyledButtonContainer = styled.div.withConfig({
   displayName: "SideSheetStyle__StyledButtonContainer",
   componentId: "sc-z0rzf0-3"
-})(["cursor:pointer;margin:4px 8px 4px 0px;svg{width:24px;fill:", ";}"], Neutral.B40);
+})(["cursor:pointer;margin-top:3px;svg{width:24px;fill:", ";}"], Neutral.B40);
 export var StyledRightContainer = styled.div.withConfig({
   displayName: "SideSheetStyle__StyledRightContainer",
   componentId: "sc-z0rzf0-4"
-})(["margin-left:auto;"]);
+})(["margin-left:auto;display:flex;align-items:top;"]);
 export var StyledHorizontalLine = styled.hr.withConfig({
   displayName: "SideSheetStyle__StyledHorizontalLine",
   componentId: "sc-z0rzf0-5"

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

@@ -3,6 +3,7 @@ export interface Option {
     disabled?: boolean;
     id?: string;
     label: string | React.ReactNode;
+    sublabel?: React.ReactNode;
     value: string;
 }
 export interface Section {

package/lib/@next/Menu/Menu.js

@@ -34,6 +34,7 @@ var Menu = function Menu(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, null, options == null ? void 0 : options.map(function (option) {
       var value = option.value,
         label = option.label,
+        sublabel = option.sublabel,
         disabled = option.disabled,
         id = option.id;
       var randomId = (0, _reactIdGenerator["default"])('glints-menu-option');
@@ -47,7 +48,8 @@ var Menu = function Menu(_ref) {
         onClick: onClick,
         allowMultiple: allowMultiple
       }, /*#__PURE__*/_react["default"].createElement(_MenuOptionLabel.MenuOptionLabel, {
-        label: label
+        label: label,
+        sublabel: sublabel
       }));
     }));
   };

package/lib/@next/Menu/components/MenuOptionLabel.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
-export declare const MenuOptionLabel: ({ label }: {
+interface MenuOptionLabelProps {
     label: React.ReactNode;
-}) => JSX.Element;
+    sublabel?: React.ReactNode;
+}
+export declare const MenuOptionLabel: ({ label, sublabel }: MenuOptionLabelProps) => JSX.Element;
+export {};

package/lib/@next/Menu/components/MenuOptionLabel.js

@@ -6,12 +6,25 @@ exports.MenuOptionLabel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Typography = require("../../Typography");
 var _colors = require("../../utilities/colors");
+var _MenuOptionLabelStyle = require("./MenuOptionLabelStyle");
 var MenuOptionLabel = function MenuOptionLabel(_ref) {
-  var label = _ref.label;
-  return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+  var label = _ref.label,
+    sublabel = _ref.sublabel;
+  if (!sublabel) {
+    return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      as: "span",
+      variant: "body1",
+      color: _colors.Neutral.B18
+    }, label);
+  }
+  return /*#__PURE__*/_react["default"].createElement(_MenuOptionLabelStyle.MenuOptionLabelContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
     variant: "body1",
     color: _colors.Neutral.B18
-  }, label);
+  }, label), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: _colors.Neutral.B40
+  }, sublabel));
 };
 exports.MenuOptionLabel = MenuOptionLabel;

package/lib/@next/Menu/components/MenuOptionLabelStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const MenuOptionLabelContainer: import("styled-components").StyledComponent<"div", any, {
+    sublabel?: React.ReactNode;
+}, never>;

package/lib/@next/Menu/components/MenuOptionLabelStyle.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MenuOptionLabelContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var MenuOptionLabelContainer = _styledComponents["default"].div.withConfig({
+  displayName: "MenuOptionLabelStyle__MenuOptionLabelContainer",
+  componentId: "sc-oryr0t-0"
+})(["display:flex;flex-direction:column;align-items:center;padding:4px 0;"]);
+exports.MenuOptionLabelContainer = MenuOptionLabelContainer;

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

@@ -17,3 +17,4 @@ export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;
 export declare const WithCustomPrefix: any;
+export declare const OptionsWithSublabel: any;

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

@@ -21,17 +21,17 @@ exports.StyledSideSheetContainer = StyledSideSheetContainer;
 var StyledSideSheetHeader = _styledComponents["default"].div.withConfig({
   displayName: "SideSheetStyle__StyledSideSheetHeader",
   componentId: "sc-z0rzf0-2"
-})(["display:flex;align-items:top;padding:16px 20px;"]);
+})(["display:flex;align-items:top;padding:16px 20px;gap:8px;"]);
 exports.StyledSideSheetHeader = StyledSideSheetHeader;
 var StyledButtonContainer = _styledComponents["default"].div.withConfig({
   displayName: "SideSheetStyle__StyledButtonContainer",
   componentId: "sc-z0rzf0-3"
-})(["cursor:pointer;margin:4px 8px 4px 0px;svg{width:24px;fill:", ";}"], _colors.Neutral.B40);
+})(["cursor:pointer;margin-top:3px;svg{width:24px;fill:", ";}"], _colors.Neutral.B40);
 exports.StyledButtonContainer = StyledButtonContainer;
 var StyledRightContainer = _styledComponents["default"].div.withConfig({
   displayName: "SideSheetStyle__StyledRightContainer",
   componentId: "sc-z0rzf0-4"
-})(["margin-left:auto;"]);
+})(["margin-left:auto;display:flex;align-items:top;"]);
 exports.StyledRightContainer = StyledRightContainer;
 var StyledHorizontalLine = _styledComponents["default"].hr.withConfig({
   displayName: "SideSheetStyle__StyledHorizontalLine",

package/package.json

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