pds-dev-kit-web 2.0.14 → 2.1.0

package/dist/index.d.ts

@@ -8,20 +8,20 @@ export { AdminListItemTransition, InputTransition, ButtonTransition } from './sr
 export { Form };
 import { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWH, WHContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab, D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_DesktopTutorialModal, DesktopTutorialModalInfoType, D_SectionSheet } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWH, WHContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicButtonGroup, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatBubbleListItem, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_LottieReactionButton, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_SegmentedButtonGroup, D_Select, D_Slider, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
 export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_DesktopTutorialModal, D_SectionSheet };
 export type { DesktopTutorialModalInfoType };
-import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
+import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton, M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };
 export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+export { M_BasicButtonGroup, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_SegmentedButtonGroup, M_Select, M_Slider, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
 import { DynamicLayout } from './src/sub';
 export { DynamicLayout };

package/dist/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWF = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.ButtonTransition = exports.InputTransition = exports.AdminListItemTransition = exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate = exports.scaleBounceOut02 = exports.scaleBounceOut = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = void 0;
-exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = void 0;
-exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = void 0;
+exports.D_TextButton = exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = void 0;
+exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.M_BasicButtonGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = void 0;
+exports.ToolBar = exports.BulkActionBar = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Slider = exports.M_Select = exports.M_SegmentedButtonGroup = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -80,6 +80,7 @@ Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: funct
 Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return desktop_1.D_AdminList; } });
 Object.defineProperty(exports, "D_AdminListHeader", { enumerable: true, get: function () { return desktop_1.D_AdminListHeader; } });
 Object.defineProperty(exports, "D_AdminListItem", { enumerable: true, get: function () { return desktop_1.D_AdminListItem; } });
+Object.defineProperty(exports, "D_BasicButtonGroup", { enumerable: true, get: function () { return desktop_1.D_BasicButtonGroup; } });
 Object.defineProperty(exports, "D_BasicChatListItem", { enumerable: true, get: function () { return desktop_1.D_BasicChatListItem; } });
 Object.defineProperty(exports, "D_BasicFormGroup", { enumerable: true, get: function () { return desktop_1.D_BasicFormGroup; } });
 Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function () { return desktop_1.D_BasicList; } });
@@ -112,7 +113,9 @@ Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function
 Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return desktop_1.D_PageTitleTextGroup; } });
 Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return desktop_1.D_Radio; } });
 Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: function () { return desktop_1.D_ReactionButton; } });
+Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get: function () { return desktop_1.D_SegmentedButtonGroup; } });
 Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return desktop_1.D_Select; } });
+Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return desktop_1.D_Slider; } });
 Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return desktop_1.D_StatusBlock; } });
 Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return desktop_1.D_TextButton; } });
 Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return desktop_1.D_TextField; } });
@@ -143,6 +146,7 @@ Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: funct
 Object.defineProperty(exports, "LayoutMS", { enumerable: true, get: function () { return mobile_1.LayoutMS; } });
 Object.defineProperty(exports, "MSNavigationContainer", { enumerable: true, get: function () { return mobile_1.MSNavigationContainer; } });
 Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return mobile_1.MSContainersBox; } });
+Object.defineProperty(exports, "M_BasicButtonGroup", { enumerable: true, get: function () { return mobile_1.M_BasicButtonGroup; } });
 Object.defineProperty(exports, "M_BasicChatListItem", { enumerable: true, get: function () { return mobile_1.M_BasicChatListItem; } });
 Object.defineProperty(exports, "M_BasicFormGroup", { enumerable: true, get: function () { return mobile_1.M_BasicFormGroup; } });
 Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function () { return mobile_1.M_BasicList; } });
@@ -169,7 +173,9 @@ Object.defineProperty(exports, "M_MobileHeaderBar", { enumerable: true, get: fun
 Object.defineProperty(exports, "M_MobileTabBar", { enumerable: true, get: function () { return mobile_1.M_MobileTabBar; } });
 Object.defineProperty(exports, "M_Radio", { enumerable: true, get: function () { return mobile_1.M_Radio; } });
 Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: function () { return mobile_1.M_ReactionButton; } });
+Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get: function () { return mobile_1.M_SegmentedButtonGroup; } });
 Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return mobile_1.M_Select; } });
+Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return mobile_1.M_Slider; } });
 Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return mobile_1.M_StatusBlock; } });
 Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return mobile_1.M_TextButton; } });
 Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return mobile_1.M_TextField; } });

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

@@ -1,3 +1,4 @@
+import type { FillIconNameKeys, LineIconNameKeys } from './icon';
 import type { PDSTextType } from './text';
 import type { ForwardedRef } from 'react';
 export declare type PDSValueOption = {
@@ -9,4 +10,18 @@ export declare type PDSTabItemOption = {
     isActive: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
+export declare type DropdownValueOption = {
+    text?: PDSTextType;
+    value: string | number | null | boolean;
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    state?: 'normal' | 'disabled';
+};
+export declare type BasicButtonGroupValueOption = {
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    state?: 'normal' | 'disabled';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
 export declare type ForwardedRefType<T> = ForwardedRef<T | null>;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { BasicButtonGroupValueOption } from '../../../common/types';
+export declare type BasicButtonGroupProps = {
+    size?: 'large' | 'medium' | 'small';
+    valueArray: BasicButtonGroupValueOption[];
+    state?: 'normal' | 'disabled';
+};
+declare function BasicButtonGroup({ size, valueArray, state }: BasicButtonGroupProps): JSX.Element;
+export default BasicButtonGroup;

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

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importStar(require("styled-components"));
+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;
+    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, 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: state === 'disabled' || buttonState === 'disabled'
+                        ? 'ui_cpnt_button_icon_disabled'
+                        : 'ui_cpnt_button_icon_enabled' }, 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 theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"])));
+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 theme = _a.theme;
+    return theme.ui_cpnt_basicbuttongroup_base_default;
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small }[size];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_pressed;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_basicbuttongroup_base_disabled;
+});
+exports.default = BasicButtonGroup;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1 @@
+export { default as BasicButtonGroup } from './BasicButtonGroup';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicButtonGroup = void 0;
+var BasicButtonGroup_1 = require("./BasicButtonGroup");
+Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return __importDefault(BasicButtonGroup_1).default; } });

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

@@ -1,15 +1,17 @@
 /// <reference types="react" />
 import type { PDSTextType, PDSValueOption } from '../../../common';
+import type { DropdownValueOption } from '../../../common/types';
 export declare type ContextMenuItemProps = {
-    option?: PDSValueOption;
+    option?: PDSValueOption | DropdownValueOption;
     size?: 'large' | 'medium' | 'small';
     isSelected?: boolean;
     state?: 'normal' | 'disabled';
-    onClick?: (value: PDSValueOption | string | number | boolean) => void;
+    displayType?: 'text_only' | 'icon_only' | 'icon_text';
+    onClick?: (value: PDSValueOption | DropdownValueOption | string | number | boolean) => void;
     /** @deprecated option 필드를 대신 사용하세요. */
     text?: PDSTextType;
     /** @deprecated option 필드를 대신 사용하세요. */
     value?: string | number | boolean;
 };
-declare function ContextMenuItem({ option, size, isSelected, state, onClick, text, value }: ContextMenuItemProps): JSX.Element;
+declare function ContextMenuItem({ option, size, isSelected, state, displayType, onClick, text, value }: ContextMenuItemProps): JSX.Element;
 export default ContextMenuItem;

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

@@ -35,10 +35,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var TextLabel_1 = require("../TextLabel");
 function ContextMenuItem(_a) {
-    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, text = _a.text, value = _a.value;
+    var option = _a.option, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, displayType = _a.displayType, onClick = _a.onClick, text = _a.text, value = _a.value;
     var handleClick = function () {
         if (state === 'disabled') {
             return;
@@ -60,7 +61,15 @@ function ContextMenuItem(_a) {
     if (state === 'disabled') {
         textColorTheme = 'sysTextTertiary';
     }
-    return ((0, jsx_runtime_1.jsx)(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' }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (option === null || option === void 0 ? void 0 : option.text) || text, styleTheme: "form2Regular", singleLineMode: "use", colorTheme: textColorTheme, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }, void 0) }), void 0));
+    var getIconColorKey = function () {
+        if (state === 'disabled') {
+            return 'ui_cpnt_dropdown_display_icon_disabled';
+        }
+        return 'ui_cpnt_dropdown_display_icon_normal';
+    };
+    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));
 }
 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;
@@ -74,11 +83,14 @@ var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 =
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var S_ContextMenuItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n\n  ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, selected = _a.selected;
     return selected
         ? theme.ui_cpnt_contextmenu_menu_base_selected
         : theme.ui_cpnt_contextmenu_menu_base_normal;
+}, function (_a) {
+    var displayType = _a.displayType;
+    return displayType === 'icon_only' && 'justify-content: center';
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

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

@@ -1,20 +1,19 @@
 /// <reference types="react" />
-import type { PDSTextType, PDSValueOption } from '../../../common';
-declare type DropDownValues = PDSValueOption & {
-    state?: 'normal' | 'disabled';
-};
+import type { PDSTextType } from '../../../common';
+import type { DropdownValueOption } from '../../../common/types';
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     hintText?: PDSTextType;
     maxHeightItemNumber?: number;
-    defaultValue?: PDSValueOption;
-    value?: PDSValueOption | null;
+    defaultValue?: DropdownValueOption;
+    value?: DropdownValueOption | null;
     responsiveMode?: 'none' | 'use';
-    size?: 'large' | 'small';
+    size?: 'large' | 'medium' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';
-    valueArray: DropDownValues[];
+    valueArray: DropdownValueOption[];
     customWidth?: string;
-    onChange?: (option: PDSValueOption) => void;
+    displayType?: 'text_only' | 'icon_only' | 'icon_text';
+    onChange?: (option: DropdownValueOption) => void;
 };
-declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, onChange }: Props): JSX.Element;
+declare function Dropdown({ colorTheme, value, defaultValue, hintText, maxHeightItemNumber, responsiveMode, size, state, valueArray, customWidth, displayType, 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, onChange = _a.onChange;
-    var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[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, 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];
     /**
      * @when value 프롭의 값에 따라
      * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
@@ -96,7 +96,21 @@ function Dropdown(_a) {
             onChange(option);
         }
     };
+    var getCustomWidth = function () {
+        if (customWidth) {
+            return customWidth;
+        }
+        if (displayType === 'icon_only') {
+            return 'auto';
+        }
+    };
     var getIconColorKey = function () {
+        if (state === 'disabled' || state === 'read_only') {
+            return 'ui_cpnt_dropdown_display_icon_disabled';
+        }
+        return 'ui_cpnt_dropdown_display_icon_normal';
+    };
+    var getArrowIconColorKey = function () {
         if (colorTheme === 'dark') {
             if (state === 'disabled' || state === 'read_only') {
                 return 'ui_cpnt_dropdown_text_darktheme_disabled';
@@ -176,12 +190,9 @@ 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 }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode }, { children: (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), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d", spacingType: "width" }, void 0)] }), void 0), isFocused && ((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: customWidth }, { 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 }, 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.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));
 }
-var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  flex: 1;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-}, function (_a) {
+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;
     return theme.spacing.spacingB;
 }, function (_a) {
@@ -189,29 +200,53 @@ var S_TextLabel = styled_components_1.default.div(templateObject_1 || (templateO
     return size &&
         {
             large: large,
+            medium: medium,
             small: small
         }[size];
 });
 var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
-    var responsiveMode = _a.responsiveMode;
-    return (responsiveMode === 'use' ? '100%' : '432px');
+    var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
+    if (responsiveMode === 'use') {
+        return '100%';
+    }
+    if (displayType === 'icon_only') {
+        return 'fit-content';
+    }
+    return '432px';
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
-    var responsiveMode = _a.responsiveMode;
-    return (responsiveMode === 'use' ? '100%' : '188px');
+var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
+    var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
+    if (responsiveMode === 'use') {
+        return '100%';
+    }
+    if (displayType === 'icon_only') {
+        return 'fit-content';
+    }
+    return '188px';
 });
-var S_Dropdown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+    var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
+    if (responsiveMode === 'use') {
+        return '100%';
+    }
+    if (displayType === 'icon_only') {
+        return 'fit-content';
+    }
+    return '188px';
+});
+var S_Dropdown = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return size &&
         {
             large: large,
+            medium: medium,
             small: small
         }[size];
 }, function (_a) {
     var customWidth = _a.customWidth;
     return customWidth && "width: " + customWidth + ";";
 });
-var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'dark':
@@ -222,7 +257,7 @@ var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_5
             return theme.ui_cpnt_dropdown_base_disabled;
     }
 });
-var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'dark':
@@ -233,7 +268,7 @@ var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_6
             return theme.ui_cpnt_dropdown_base_disabled;
     }
 });
-var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'dark':
@@ -244,7 +279,7 @@ var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_7 |
             return theme.ui_cpnt_dropdown_base_normal;
     }
 });
-var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
@@ -254,7 +289,7 @@ var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_8 || (te
             return theme.ui_cpnt_dropdown_border_white_normal;
     }
 });
-var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
@@ -264,7 +299,7 @@ var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_9 || (tem
             return theme.ui_cpnt_dropdown_border_darktheme_normal;
     }
 });
-var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var borderColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var state = _a.state, theme = _a.theme;
     switch (state) {
         case 'disabled':
@@ -275,7 +310,7 @@ var borderColor = (0, styled_components_1.css)(templateObject_10 || (templateObj
             return theme.ui_cpnt_dropdown_border_normal;
     }
 });
-var backgroundHoverColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundHoverColor = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'none':
@@ -288,7 +323,7 @@ var backgroundHoverColor = (0, styled_components_1.css)(templateObject_11 || (te
             return theme.ui_cpnt_textfield_base_hover;
     }
 });
-var backgroundActiveColor = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'none':
@@ -301,8 +336,8 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_12 || (t
             return theme.ui_cpnt_textfield_base_pressed;
     }
 });
-var normalActionColor = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
-var S_Select = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var normalActionColor = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
+var S_Select = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: space-between;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var state = _a.state;
     switch (state) {
         case 'disabled':
@@ -332,11 +367,18 @@ var S_Select = styled_components_1.default.div(templateObject_14 || (templateObj
         case 'normal':
             return 'pointer';
     }
+}, function (_a) {
+    var size = _a.size, theme = _a.theme;
+    return size === 'large' ? theme.spacing.spacingD : theme.spacing.spacingC;
+}, function (_a) {
+    var size = _a.size, theme = _a.theme;
+    return size === 'large' ? theme.spacing.spacingD : theme.spacing.spacingC;
 }, function (_a) {
     var size = _a.size;
     return size &&
         {
             large: large,
+            medium: medium,
             small: small
         }[size];
 }, function (_a) {
@@ -346,9 +388,12 @@ var S_Select = styled_components_1.default.div(templateObject_14 || (templateObj
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: ", ";\n"], ["\n  display: block;\n  margin-top: ", ";\n  position: absolute;\n  width: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
+}, function (_a) {
+    var displayType = _a.displayType;
+    return (displayType === 'icon_only' ? '100%' : 'inherit');
 });
 exports.default = Dropdown;
-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, templateObject_14, templateObject_15;
+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, templateObject_14, templateObject_15, templateObject_16;

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

@@ -0,0 +1,18 @@
+/// <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';
+};
+export declare type SegmentedButtonGroupProps = {
+    size?: 'large' | 'medium' | 'small';
+    value: PDSValueOption['value'] | PDSValueOption['value'][];
+    valueArray: SegmentedButtonGroupValueOption[];
+    selectedType?: '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;
+export default SegmentedButtonGroup;