pds-dev-kit-web 2.1.7 → 2.1.8

package/dist/src/common/assets/icons/line/index.js

@@ -3,6 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var AlignBottom_1 = __importDefault(require("./AlignBottom"));
+var AlignCenter_1 = __importDefault(require("./AlignCenter"));
+var AlignLeft_1 = __importDefault(require("./AlignLeft"));
+var AlignMiddle_1 = __importDefault(require("./AlignMiddle"));
+var AlignRight_1 = __importDefault(require("./AlignRight"));
+var AlignTop_1 = __importDefault(require("./AlignTop"));
 var AnalyticsSearchTools_1 = __importDefault(require("./AnalyticsSearchTools"));
 var ArrowDown_1 = __importDefault(require("./ArrowDown"));
 var ArrowDownBold_1 = __importDefault(require("./ArrowDownBold"));
@@ -28,8 +34,10 @@ var BookingTicket_1 = __importDefault(require("./BookingTicket"));
 var Bookmark_1 = __importDefault(require("./Bookmark"));
 var Box_1 = __importDefault(require("./Box"));
 var Business_1 = __importDefault(require("./Business"));
+var Button_1 = __importDefault(require("./Button"));
 var Call_1 = __importDefault(require("./Call"));
 var Camera_1 = __importDefault(require("./Camera"));
+var Carousel_1 = __importDefault(require("./Carousel"));
 var Cart_1 = __importDefault(require("./Cart"));
 var Channel_1 = __importDefault(require("./Channel"));
 var ChannelSetting_1 = __importDefault(require("./ChannelSetting"));
@@ -55,6 +63,7 @@ var Developer_1 = __importDefault(require("./Developer"));
 var DeviceApp_1 = __importDefault(require("./DeviceApp"));
 var DeviceDesktop_1 = __importDefault(require("./DeviceDesktop"));
 var DeviceMobile_1 = __importDefault(require("./DeviceMobile"));
+var Divider_1 = __importDefault(require("./Divider"));
 var DottedCircle_1 = __importDefault(require("./DottedCircle"));
 var Download_1 = __importDefault(require("./Download"));
 var DynamicLayout_1 = __importDefault(require("./DynamicLayout"));
@@ -71,9 +80,15 @@ var Folder_1 = __importDefault(require("./Folder"));
 var Ghost_1 = __importDefault(require("./Ghost"));
 var HeartCare_1 = __importDefault(require("./HeartCare"));
 var Home_1 = __importDefault(require("./Home"));
+var Image_1 = __importDefault(require("./Image"));
 var Information_1 = __importDefault(require("./Information"));
 var Internal_1 = __importDefault(require("./Internal"));
+var Item_1 = __importDefault(require("./Item"));
 var Language_1 = __importDefault(require("./Language"));
+var LayerBackward_1 = __importDefault(require("./LayerBackward"));
+var LayerForward_1 = __importDefault(require("./LayerForward"));
+var Layout_1 = __importDefault(require("./Layout"));
+var Lightning_1 = __importDefault(require("./Lightning"));
 var Links_1 = __importDefault(require("./Links"));
 var Live_1 = __importDefault(require("./Live"));
 var LiveBroadcast_1 = __importDefault(require("./LiveBroadcast"));
@@ -86,13 +101,18 @@ var Mail_1 = __importDefault(require("./Mail"));
 var Menu_1 = __importDefault(require("./Menu"));
 var MicOff_1 = __importDefault(require("./MicOff"));
 var MicOn_1 = __importDefault(require("./MicOn"));
+var Minus_1 = __importDefault(require("./Minus"));
 var MinusCircle_1 = __importDefault(require("./MinusCircle"));
+var MinusRound_1 = __importDefault(require("./MinusRound"));
+var Moon_1 = __importDefault(require("./Moon"));
 var News_1 = __importDefault(require("./News"));
 var OpenPage_1 = __importDefault(require("./OpenPage"));
 var Order_1 = __importDefault(require("./Order"));
 var Pages_1 = __importDefault(require("./Pages"));
 var PageSizeExpand_1 = __importDefault(require("./PageSizeExpand"));
 var PageSizeReduce_1 = __importDefault(require("./PageSizeReduce"));
+var Paint_1 = __importDefault(require("./Paint"));
+var Palette_1 = __importDefault(require("./Palette"));
 var Papp_1 = __importDefault(require("./Papp"));
 var PappType_1 = __importDefault(require("./PappType"));
 var Payment_1 = __importDefault(require("./Payment"));
@@ -106,6 +126,7 @@ var PhotoMultiple_1 = __importDefault(require("./PhotoMultiple"));
 var Plan_1 = __importDefault(require("./Plan"));
 var Plus_1 = __importDefault(require("./Plus"));
 var PlusCircle_1 = __importDefault(require("./PlusCircle"));
+var PlusRound_1 = __importDefault(require("./PlusRound"));
 var PostArticle_1 = __importDefault(require("./PostArticle"));
 var PostBlog_1 = __importDefault(require("./PostBlog"));
 var PostColumn_1 = __importDefault(require("./PostColumn"));
@@ -129,6 +150,7 @@ var RadioOn_1 = __importDefault(require("./RadioOn"));
 var Receipt_1 = __importDefault(require("./Receipt"));
 var Report_1 = __importDefault(require("./Report"));
 var Requirement_1 = __importDefault(require("./Requirement"));
+var Richtext_1 = __importDefault(require("./Richtext"));
 var Rocket_1 = __importDefault(require("./Rocket"));
 var Sales_1 = __importDefault(require("./Sales"));
 var Search_1 = __importDefault(require("./Search"));
@@ -167,6 +189,7 @@ var Series_1 = __importDefault(require("./Series"));
 var SeriesList_1 = __importDefault(require("./SeriesList"));
 var Setting_1 = __importDefault(require("./Setting"));
 var Settlement_1 = __importDefault(require("./Settlement"));
+var Shape_1 = __importDefault(require("./Shape"));
 var Share_1 = __importDefault(require("./Share"));
 var Shop_1 = __importDefault(require("./Shop"));
 var Shoppingbag_1 = __importDefault(require("./Shoppingbag"));
@@ -182,6 +205,7 @@ var TenSecBack_1 = __importDefault(require("./TenSecBack"));
 var TenSecBackArrow_1 = __importDefault(require("./TenSecBackArrow"));
 var TenSecForward_1 = __importDefault(require("./TenSecForward"));
 var TenSecForwardArrow_1 = __importDefault(require("./TenSecForwardArrow"));
+var Text_1 = __importDefault(require("./Text"));
 var Time_1 = __importDefault(require("./Time"));
 var ToggleDown_1 = __importDefault(require("./ToggleDown"));
 var ToggleUp_1 = __importDefault(require("./ToggleUp"));
@@ -208,6 +232,12 @@ var Warning_1 = __importDefault(require("./Warning"));
 var Weblink_1 = __importDefault(require("./Weblink"));
 var Xmark_1 = __importDefault(require("./Xmark"));
 var lineIcons = {
+    ic_align_bottom: AlignBottom_1.default,
+    ic_align_center: AlignCenter_1.default,
+    ic_align_left: AlignLeft_1.default,
+    ic_align_middle: AlignMiddle_1.default,
+    ic_align_right: AlignRight_1.default,
+    ic_align_top: AlignTop_1.default,
     ic_analytics_search_tools: AnalyticsSearchTools_1.default,
     ic_arrow_down: ArrowDown_1.default,
     ic_arrow_down_bold: ArrowDownBold_1.default,
@@ -233,8 +263,10 @@ var lineIcons = {
     ic_bookmark: Bookmark_1.default,
     ic_box: Box_1.default,
     ic_business: Business_1.default,
+    ic_button: Button_1.default,
     ic_call: Call_1.default,
     ic_camera: Camera_1.default,
+    ic_carousel: Carousel_1.default,
     ic_cart: Cart_1.default,
     ic_channel: Channel_1.default,
     ic_channel_setting: ChannelSetting_1.default,
@@ -260,6 +292,7 @@ var lineIcons = {
     ic_device_app: DeviceApp_1.default,
     ic_device_desktop: DeviceDesktop_1.default,
     ic_device_mobile: DeviceMobile_1.default,
+    ic_divider: Divider_1.default,
     ic_dotted_circle: DottedCircle_1.default,
     ic_download: Download_1.default,
     ic_dynamic_layout: DynamicLayout_1.default,
@@ -276,9 +309,15 @@ var lineIcons = {
     ic_ghost: Ghost_1.default,
     ic_heart_care: HeartCare_1.default,
     ic_home: Home_1.default,
+    ic_image: Image_1.default,
     ic_information: Information_1.default,
     ic_internal: Internal_1.default,
+    ic_item: Item_1.default,
     ic_language: Language_1.default,
+    ic_layer_backward: LayerBackward_1.default,
+    ic_layer_forward: LayerForward_1.default,
+    ic_layout: Layout_1.default,
+    ic_lightning: Lightning_1.default,
     ic_links: Links_1.default,
     ic_live: Live_1.default,
     ic_live_broadcast: LiveBroadcast_1.default,
@@ -291,13 +330,18 @@ var lineIcons = {
     ic_menu: Menu_1.default,
     ic_mic_off: MicOff_1.default,
     ic_mic_on: MicOn_1.default,
+    ic_minus: Minus_1.default,
     ic_minus_circle: MinusCircle_1.default,
+    ic_minus_round: MinusRound_1.default,
+    ic_moon: Moon_1.default,
     ic_news: News_1.default,
     ic_open_page: OpenPage_1.default,
     ic_order: Order_1.default,
     ic_pages: Pages_1.default,
     ic_page_size_expand: PageSizeExpand_1.default,
     ic_page_size_reduce: PageSizeReduce_1.default,
+    ic_paint: Paint_1.default,
+    ic_palette: Palette_1.default,
     ic_papp: Papp_1.default,
     ic_papp_type: PappType_1.default,
     ic_payment: Payment_1.default,
@@ -311,6 +355,7 @@ var lineIcons = {
     ic_plan: Plan_1.default,
     ic_plus: Plus_1.default,
     ic_plus_circle: PlusCircle_1.default,
+    ic_plus_round: PlusRound_1.default,
     ic_post_article: PostArticle_1.default,
     ic_post_blog: PostBlog_1.default,
     ic_post_column: PostColumn_1.default,
@@ -334,6 +379,7 @@ var lineIcons = {
     ic_receipt: Receipt_1.default,
     ic_report: Report_1.default,
     ic_requirement: Requirement_1.default,
+    ic_richtext: Richtext_1.default,
     ic_rocket: Rocket_1.default,
     ic_sales: Sales_1.default,
     ic_search: Search_1.default,
@@ -372,6 +418,7 @@ var lineIcons = {
     ic_series_list: SeriesList_1.default,
     ic_setting: Setting_1.default,
     ic_settlement: Settlement_1.default,
+    ic_shape: Shape_1.default,
     ic_share: Share_1.default,
     ic_shop: Shop_1.default,
     ic_shoppingbag: Shoppingbag_1.default,
@@ -387,6 +434,7 @@ var lineIcons = {
     ic_ten_sec_back_arrow: TenSecBackArrow_1.default,
     ic_ten_sec_forward: TenSecForward_1.default,
     ic_ten_sec_forward_arrow: TenSecForwardArrow_1.default,
+    ic_text: Text_1.default,
     ic_time: Time_1.default,
     ic_toggle_down: ToggleDown_1.default,
     ic_toggle_up: ToggleUp_1.default,

package/dist/src/common/index.d.ts

@@ -1,5 +1,5 @@
 export { UITheme } from './styles/colorSet/ui-type';
-export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, UiColors, ForwardedRefType } from './types';
+export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, ContextMenuItemValueOption, DropdownValueOption, AdminListDropdownValueOption, BasicButtonGroupValueOption, SegmentedButtonGroupValueOption, UiColors, ForwardedRefType } from './types';
 export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
 export { uiColors, customTheme } from './styles/ui-colors';
 export { theme } from './styles';

package/dist/src/common/types/components.d.ts

@@ -15,6 +15,7 @@ export declare type ContextMenuItemValueOption = {
     value: string | number | null | boolean;
     iconName?: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
+    fontWeight?: 'bold' | 'regular';
 };
 export declare type DropdownValueOption = ContextMenuItemValueOption & {
     state?: 'normal' | 'disabled';
@@ -27,8 +28,18 @@ export declare type BasicButtonGroupValueOption = {
     iconName: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
     state?: 'normal' | 'disabled';
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
     iconColorTheme?: 'none' | 'red';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
+export declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    state?: 'normal' | 'disabled';
+    iconColorTheme?: 'none' | 'red';
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
+};
 export declare type ForwardedRefType<T> = ForwardedRef<T | null>;

package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js

@@ -35,10 +35,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var constants_1 = require("./constants");
 function BasicButtonGroup(_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
+    var _d = (0, react_1.useState)(null), hoveredButtonIndex = _d[0], setHoveredButtonIndex = _d[1];
     var getColorKey = function (buttonState, iconColorTheme) {
         if (state === 'disabled' || buttonState === 'disabled') {
             return 'ui_cpnt_button_icon_disabled';
@@ -49,11 +53,11 @@ function BasicButtonGroup(_a) {
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: valueArray.map(function (_a, index) {
-            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0) }), iconName + index));
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: hoveredButtonIndex === index, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), iconName + index));
         }) }), void 0));
 }
-var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 });
@@ -76,5 +80,44 @@ var S_BasicButton = styled_components_1.default.button(templateObject_5 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_basicbuttongroup_base_disabled;
 });
+var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: constants_1.TOOLTIP_POSITION_SPACING.large,
+            medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
+            small: constants_1.TOOLTIP_POSITION_SPACING.small
+        }[size];
+});
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
+var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterTop = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
+var tooltipRightBottom = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_tooltip_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+}, function (_a) {
+    var isTooltipOpen = _a.isTooltipOpen;
+    return !isTooltipOpen && 'display: none';
+}, function (_a) {
+    var tooltipPosition = _a.tooltipPosition;
+    return tooltipPosition &&
+        {
+            left_top: tooltipLeftTop,
+            left_bottom: tooltipLeftBottom,
+            center_top: tooltipCenterTop,
+            center_bottom: tooltipCenterBottom,
+            right_top: tooltipRightTop,
+            right_bottom: tooltipRightBottom
+        }[tooltipPosition];
+});
 exports.default = BasicButtonGroup;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/src/desktop/components/BasicButtonGroup/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const ICON_BUTTON_SIZE: {
+    large: number;
+    medium: number;
+    small: number;
+};
+export declare const ICON_BUTTON_TOOLTIP_SPACING = 8;
+export declare const TOOLTIP_POSITION_SPACING: {
+    large: string;
+    medium: string;
+    small: string;
+};

package/dist/src/desktop/components/BasicButtonGroup/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOOLTIP_POSITION_SPACING = exports.ICON_BUTTON_TOOLTIP_SPACING = exports.ICON_BUTTON_SIZE = void 0;
+exports.ICON_BUTTON_SIZE = {
+    large: 48,
+    medium: 40,
+    small: 32
+};
+exports.ICON_BUTTON_TOOLTIP_SPACING = 8;
+// NOTE - iconSize 크기에 따라 위치를 이동시켜주고, iconButtonSize에 간격까지 8px을 추가해준 값입니다.(IconButton과 tooltip의 간격)
+exports.TOOLTIP_POSITION_SPACING = {
+    large: "calc(" + exports.ICON_BUTTON_SIZE.large + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
+    medium: "calc(" + exports.ICON_BUTTON_SIZE.medium + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)",
+    small: "calc(" + exports.ICON_BUTTON_SIZE.small + "px + " + exports.ICON_BUTTON_TOOLTIP_SPACING + "px)"
+};

package/dist/src/desktop/components/ContextMenuItem/ContextMenuItem.js

@@ -69,7 +69,7 @@ function ContextMenuItem(_a) {
     };
     return ((0, jsx_runtime_1.jsxs)(S_ContextMenuItem, __assign({ "x-pds-name": "ContextMenuItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, onClick: handleClick, selected: isSelected, disabled: state === 'disabled', displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') &&
                 option &&
-                'iconName' in option && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }, void 0) }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0));
+                'iconName' in option && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { size: size === 'small' ? 20 : 24, iconName: option.iconName, fillType: option.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), ' '] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && (option === null || option === void 0 ? void 0 : option.text) && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: option.text || text, styleTheme: option.fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/Dropdown/Dropdown.d.ts

@@ -13,7 +13,8 @@ declare type Props = {
     valueArray: DropdownValueOption[];
     customWidth?: string;
     displayType?: 'text_only' | 'icon_only' | 'icon_text';
+    fontWeight?: 'bold' | 'regular';
     onChange?: (option: DropdownValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, fontWeight, onChange }: Props): JSX.Element;
 export default Dropdown;

package/dist/src/desktop/components/Dropdown/Dropdown.js

@@ -48,9 +48,9 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     _e = _a.size, 
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, onChange = _a.onChange;
-    var _h = (0, react_1.useState)(false), isFocused = _h[0], setIsFocused = _h[1];
-    var _j = (0, react_1.useState)(null), selectedValue = _j[0], setSelectedValue = _j[1];
+    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, onChange = _a.onChange;
+    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
+    var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
     /**
      * @when value 프롭의 값에 따라
      * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
@@ -190,7 +190,7 @@ function Dropdown(_a) {
         var LARGE_HEIGHT = 48;
         return LARGE_HEIGHT * maxHeightItemNumber;
     }, [size, maxHeightItemNumber]);
-    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0) }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0)] }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "desktop", className: "container", size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }, void 0), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }, void 0)), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ displayType: displayType }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, onClick: handleClickOption, state: el.state, displayType: displayType }, void 0) }, el.value)); }) }), void 0) }), void 0))] }), void 0));
 }
 var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/IconButton/IconButton.js

@@ -80,7 +80,7 @@ function IconButton(_a) {
         }
         return iconStateColorObj[fillType];
     };
-    return ((0, jsx_runtime_1.jsxs)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown, onMouseEnter: function () { return tooltipText && handleTooltipToggle(true); }, onMouseLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown, onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;

package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.d.ts

@@ -1,19 +1,13 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, PDSValueOption } from '../../../common/types';
-declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
-    iconName: FillIconNameKeys | LineIconNameKeys;
-    iconFillType?: 'fill' | 'line';
-    state?: 'normal' | 'disabled';
-    iconColorTheme?: 'none' | 'red';
-};
+import type { PDSValueOption, SegmentedButtonGroupValueOption } from '../../../common/types';
 export declare type SegmentedButtonGroupProps = {
     size?: 'large' | 'medium' | 'small';
     value: PDSValueOption['value'] | PDSValueOption['value'][];
     valueArray: SegmentedButtonGroupValueOption[];
-    selectedType?: 'single' | 'multi';
+    selectionType?: 'single' | 'multi';
     state?: 'normal' | 'disabled';
     onClick?: (value: PDSValueOption['value']) => void;
     onMouseDown?: (value: PDSValueOption['value']) => void;
 };
-declare function SegmentedButtonGroup({ size, value, valueArray, selectedType, state, onClick, onMouseDown }: SegmentedButtonGroupProps): JSX.Element;
+declare function SegmentedButtonGroup({ size, value, valueArray, selectionType, state, onClick, onMouseDown }: SegmentedButtonGroupProps): JSX.Element;
 export default SegmentedButtonGroup;

package/dist/src/desktop/components/SegmentedButtonGroup/SegmentedButtonGroup.js

@@ -35,10 +35,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var constants_1 = require("./constants");
 function SegmentedButtonGroup(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.selectedType, selectedType = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.selectionType, selectionType = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var _e = (0, react_1.useState)(null), currentButtonIndex = _e[0], setCurrentButtonIndex = _e[1];
     var handleClick = function (value) {
         if (onClick) {
             onClick(value);
@@ -50,7 +54,7 @@ function SegmentedButtonGroup(_a) {
         }
     };
     var checkSelection = function (currentButtonValue) {
-        if (selectedType === 'multi' && Array.isArray(value)) {
+        if (selectionType === 'multi' && Array.isArray(value)) {
             return value.includes(currentButtonValue);
         }
         return value === currentButtonValue;
@@ -67,62 +71,62 @@ function SegmentedButtonGroup(_a) {
         }
         return 'ui_cpnt_button_icon_enabled';
     };
-    return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectedType: selectedType }, { children: valueArray.map(function (_a) {
-            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0) }), String(currentButtonValue)));
+    return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectionType: selectionType }, { children: valueArray.map(function (_a, index) {
+            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: index === currentButtonIndex, tooltipPosition: tooltipPosition, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), String(currentButtonValue)));
         }) }), void 0));
 }
 var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
-    var selectedType = _a.selectedType, theme = _a.theme;
-    return selectedType === 'single' && theme.spacing.spacingA;
+    var selectionType = _a.selectionType, theme = _a.theme;
+    return selectionType === 'multi' && theme.spacing.spacingA;
 });
 var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  height: 48px;\n  width: 48px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  height: 48px;\n  width: 48px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'single' && '14px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'multi' && '14px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '14px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '14px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '14px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '14px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '14px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '14px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '14px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '14px';
 });
 var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: ", ";\n  height: 40px;\n  width: 40px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  height: 40px;\n  width: 40px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'single' && '12px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'multi' && '12px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '12px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '12px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '12px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '12px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '12px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '12px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '12px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '12px';
 });
 var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: ", ";\n  height: 32px;\n  width: 32px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  height: 32px;\n  width: 32px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'single' && '10px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'multi' && '10px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '10px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '10px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '10px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '10px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '10px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '10px';
 }, function (_a) {
-    var selectedType = _a.selectedType;
-    return selectedType === 'multi' && '10px';
+    var selectionType = _a.selectionType;
+    return selectionType === 'single' && '10px';
 });
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
     var isSelected = _a.isSelected, theme = _a.theme;
@@ -142,5 +146,44 @@ var S_BasicButton = styled_components_1.default.button(templateObject_5 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_segmentedbuttongroup_base_disabled;
 });
+var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            large: constants_1.TOOLTIP_POSITION_SPACING.large,
+            medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
+            small: constants_1.TOOLTIP_POSITION_SPACING.small
+        }[size];
+});
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
+var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterTop = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
+var tooltipRightBottom = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_tooltip_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+}, function (_a) {
+    var isTooltipOpen = _a.isTooltipOpen;
+    return !isTooltipOpen && 'display: none';
+}, function (_a) {
+    var tooltipPosition = _a.tooltipPosition;
+    return tooltipPosition &&
+        {
+            left_top: tooltipLeftTop,
+            left_bottom: tooltipLeftBottom,
+            center_top: tooltipCenterTop,
+            center_bottom: tooltipCenterBottom,
+            right_top: tooltipRightTop,
+            right_bottom: tooltipRightBottom
+        }[tooltipPosition];
+});
 exports.default = SegmentedButtonGroup;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;