pds-dev-kit-web 2.0.14-alpha.0 → 2.1.0-alpha.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/assets/icons/line/DottedCircle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type IconType from '../IconType';
+declare const DottedCircle: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default DottedCircle;

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

@@ -0,0 +1,30 @@
+"use strict";
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var DottedCircle = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest, { children: (0, jsx_runtime_1.jsx)("g", __assign({ stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7.7033,4.2616 C7.4343,4.2616 7.1743,4.1166 7.0393,3.8626 C6.8463,3.4956 6.9853,3.0426 7.3513,2.8486 C8.3203,2.3356 9.3453,1.9856 10.3983,1.8076 C10.8053,1.7346 11.1933,2.0126 11.2623,2.4216 C11.3313,2.8296 11.0573,3.2166 10.6483,3.2856 C9.7543,3.4376 8.8813,3.7366 8.0533,4.1746 C7.9413,4.2336 7.8213,4.2616 7.7033,4.2616 M16.3203,4.2736 C16.2023,4.2736 16.0823,4.2446 15.9703,4.1866 C15.1343,3.7426 14.2613,3.4416 13.3763,3.2886 C12.9683,3.2186 12.6943,2.8306 12.7643,2.4226 C12.8353,2.0146 13.2203,1.7446 13.6303,1.8106 C14.6723,1.9906 15.6963,2.3426 16.6723,2.8606 C17.0383,3.0546 17.1783,3.5086 16.9843,3.8746 C16.8493,4.1286 16.5893,4.2736 16.3203,4.2736 M20.5003,8.4246 C20.2273,8.4246 19.9643,8.2756 19.8313,8.0146 C19.4153,7.1976 18.8713,6.4496 18.2153,5.7926 C17.9233,5.4996 17.9233,5.0246 18.2163,4.7326 C18.5093,4.4386 18.9843,4.4396 19.2773,4.7326 C20.0443,5.5006 20.6803,6.3756 21.1683,7.3346 C21.3563,7.7036 21.2093,8.1556 20.8403,8.3426 C20.7313,8.3986 20.6153,8.4246 20.5003,8.4246 M3.5233,8.4306 C3.4043,8.4306 3.2843,8.4026 3.1713,8.3426 C2.8063,8.1476 2.6673,7.6936 2.8623,7.3276 C3.3643,6.3856 4.0073,5.5196 4.7743,4.7546 C5.0673,4.4626 5.5413,4.4616 5.8343,4.7566 C6.1273,5.0496 6.1263,5.5246 5.8333,5.8176 C5.1723,6.4766 4.6183,7.2216 4.1863,8.0326 C4.0513,8.2856 3.7913,8.4306 3.5233,8.4306 M2.5433,14.2276 C2.1843,14.2276 1.8663,13.9686 1.8053,13.6016 C1.7163,13.0766 1.6713,12.5406 1.6713,12.0096 C1.6713,11.4646 1.7183,10.9116 1.8123,10.3686 C1.8833,9.9616 2.2753,9.6926 2.6793,9.7576 C3.0873,9.8276 3.3613,10.2166 3.2903,10.6246 C3.2113,11.0826 3.1713,11.5486 3.1713,12.0096 C3.1713,12.4576 3.2093,12.9096 3.2843,13.3536 C3.3523,13.7616 3.0773,14.1486 2.6693,14.2166 C2.6263,14.2246 2.5853,14.2276 2.5433,14.2276 M21.4173,14.2436 C21.3783,14.2436 21.3393,14.2406 21.2993,14.2356 C20.8903,14.1706 20.6113,13.7856 20.6753,13.3766 C20.7473,12.9236 20.7833,12.4596 20.7843,11.9986 C20.7843,11.5406 20.7483,11.0796 20.6773,10.6276 C20.6123,10.2186 20.8923,9.8346 21.3013,9.7706 C21.7093,9.7136 22.0943,9.9866 22.1593,10.3956 C22.2423,10.9236 22.2843,11.4636 22.2843,11.9986 C22.2833,12.5376 22.2413,13.0796 22.1573,13.6116 C22.0993,13.9806 21.7803,14.2436 21.4173,14.2436 M5.2453,19.4756 C5.0433,19.4756 4.8413,19.3946 4.6933,19.2336 C3.9433,18.4186 3.3213,17.5486 2.8463,16.6466 C2.6523,16.2806 2.7933,15.8256 3.1593,15.6336 C3.5263,15.4386 3.9793,15.5796 4.1723,15.9476 C4.5883,16.7346 5.1343,17.4976 5.7973,18.2176 C6.0773,18.5226 6.0573,18.9966 5.7533,19.2776 C5.6093,19.4096 5.4273,19.4756 5.2453,19.4756 M18.7263,19.4956 C18.5373,19.4956 18.3493,19.4266 18.2063,19.2856 C17.9123,18.9976 17.8963,18.5356 18.1823,18.2406 C18.1923,18.2296 18.2223,18.1996 18.2323,18.1906 C18.8673,17.5556 19.4113,16.8086 19.8283,15.9896 C20.0163,15.6196 20.4683,15.4736 20.8373,15.6616 C21.2063,15.8496 21.3523,16.3016 21.1643,16.6706 C20.6753,17.6296 20.0383,18.5046 19.2713,19.2716 C19.1223,19.4206 18.9243,19.4956 18.7263,19.4956 M10.4873,22.1626 C10.4473,22.1626 10.4073,22.1596 10.3673,22.1536 C9.2973,21.9816 8.2683,21.6456 7.3093,21.1546 C6.9413,20.9646 6.7953,20.5126 6.9843,20.1446 C7.1733,19.7746 7.6253,19.6316 7.9943,19.8186 C8.8123,20.2386 9.6913,20.5256 10.6053,20.6726 C11.0143,20.7386 11.2923,21.1226 11.2263,21.5326 C11.1673,21.9006 10.8483,22.1626 10.4873,22.1626 M13.4673,22.1706 C13.1033,22.1706 12.7843,21.9066 12.7263,21.5346 C12.6633,21.1256 12.9433,20.7426 13.3533,20.6796 C14.2673,20.5376 15.1473,20.2556 15.9673,19.8396 C16.3363,19.6546 16.7883,19.8006 16.9753,20.1696 C17.1623,20.5386 17.0153,20.9906 16.6453,21.1776 C15.6843,21.6646 14.6533,21.9956 13.5823,22.1616 C13.5443,22.1676 13.5053,22.1706 13.4673,22.1706", fill: color }, void 0) }), void 0) }), void 0));
+};
+exports.default = DottedCircle;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -52,6 +52,7 @@ declare const lineIcons: {
     readonly ic_device_app: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_device_desktop: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_device_mobile: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_dotted_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_download: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_dynamic_layout: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_edit: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

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

@@ -55,6 +55,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 DottedCircle_1 = __importDefault(require("./DottedCircle"));
 var Download_1 = __importDefault(require("./Download"));
 var DynamicLayout_1 = __importDefault(require("./DynamicLayout"));
 var Edit_1 = __importDefault(require("./Edit"));
@@ -259,6 +260,7 @@ var lineIcons = {
     ic_device_app: DeviceApp_1.default,
     ic_device_desktop: DeviceDesktop_1.default,
     ic_device_mobile: DeviceMobile_1.default,
+    ic_dotted_circle: DottedCircle_1.default,
     ic_download: Download_1.default,
     ic_dynamic_layout: DynamicLayout_1.default,
     ic_edit: Edit_1.default,

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -279,7 +279,7 @@
     "sys_storyboard_card_base_red01": "red30",
     "sys_storyboard_card_base_green01": "green50",
     "sys_brand_secondary_variant": "darkgreen700",
-    "sys_button_tooltip_base": "white/opacity50",
+    "sys_button_tooltip_base": "white/opacity65",
     "sys_text_button_tooltip": "grey900",
     "sys_membership_button_base": "white/opacity20",
     "sys_membership_item_membership_base": "darkgrey50",
@@ -299,5 +299,17 @@
     "sys_text_warning_02": "darkbrown500",
     "sys_component_base_39": "darkyellow300",
     "sys_component_base_40": "darkorange50",
-    "sys_component_base_41": "darkskyblue100"
+    "sys_component_base_41": "darkskyblue100",
+    "sys_cpnt_slider_track": "darkgrey100",
+    "sys_cpnt_slider_track_active": "darkgrey900",
+    "sys_cpnt_slider_thumb_normal": "darkgrey900",
+    "sys_cpnt_slider_thumb_disabled": "darkgrey400",
+    "sys_cpnt_slider_thumb_hover_circle": "darkgrey900/opacity10",
+    "sys_cpnt_slider_thumb_pressed_circle": "darkgrey900/opacity20",
+    "sys_cpnt_slider_track_disabled": "darkgrey400",
+    "sys_component_base_42": "darkorange30",
+    "sys_component_base_43": "darkblue30",
+    "sys_icon_grey_darktheme_01": "darkgrey900",
+    "sys_icon_grey_darktheme_02": "darkgrey500",
+    "sys_icon_grey_darktheme_03": "darkgrey400"
 }

package/dist/src/common/styles/colorSet/PaletteColor_light.json

@@ -299,5 +299,17 @@
     "sys_text_warning_02": "brown500",
     "sys_component_base_39": "yellow300",
     "sys_component_base_40": "orange50",
-    "sys_component_base_41": "skyblue100"
+    "sys_component_base_41": "skyblue100",
+    "sys_cpnt_slider_track": "grey100",
+    "sys_cpnt_slider_track_active": "grey900",
+    "sys_cpnt_slider_thumb_normal": "grey900",
+    "sys_cpnt_slider_thumb_disabled": "grey400",
+    "sys_cpnt_slider_thumb_hover_circle": "grey900/opacity10",
+    "sys_cpnt_slider_thumb_pressed_circle": "grey900/opacity20",
+    "sys_cpnt_slider_track_disabled": "grey400",
+    "sys_component_base_42": "orange30",
+    "sys_component_base_43": "blue30",
+    "sys_icon_grey_darktheme_01": "darkgrey900",
+    "sys_icon_grey_darktheme_02": "darkgrey500",
+    "sys_icon_grey_darktheme_03": "darkgrey400"
 }

package/dist/src/common/styles/colorSet/UIColor.json

@@ -769,5 +769,30 @@
     "ui_cpnt_sheet_base_20": "sys_component_base_39",
     "ui_cpnt_sheet_base_21": "sys_component_base_32",
     "ui_cpnt_sheet_base_22": "sys_component_base_40",
-    "ui_cpnt_sheet_base_23": "sys_component_base_41"
+    "ui_cpnt_sheet_base_23": "sys_component_base_41",
+    "ui_cpnt_slider_track": "sys_cpnt_slider_track",
+    "ui_cpnt_slider_track_active": "sys_cpnt_slider_track_active",
+    "ui_cpnt_slider_thumb_normal": "sys_cpnt_slider_thumb_normal",
+    "ui_cpnt_slider_thumb_disabled": "sys_cpnt_slider_thumb_disabled",
+    "ui_cpnt_slider_thumb_hover_circle": "sys_cpnt_slider_thumb_hover_circle",
+    "ui_cpnt_slider_thumb_pressed_circle": "sys_cpnt_slider_thumb_pressed_circle",
+    "ui_cpnt_slider_track_disabled": "sys_cpnt_slider_track_disabled",
+    "ui_cpnt_basicbuttongroup_base_default": "sys_component_base_01",
+    "ui_cpnt_basicbuttongroup_on_base_hover": "sys_component_on_base_01",
+    "ui_cpnt_basicbuttongroup_on_base_pressed": "sys_component_on_base_02",
+    "ui_cpnt_basicbuttongroup_base_disabled": "sys_component_base_03",
+    "ui_cpnt_segmentedbuttongroup_base_default": "sys_component_base_01",
+    "ui_cpnt_segmentedbuttongroup_on_base_hover": "sys_component_on_base_01",
+    "ui_cpnt_segmentedbuttongroup_on_base_pressed": "sys_component_on_base_02",
+    "ui_cpnt_segmentedbuttongroup_base_disabled": "sys_component_base_03",
+    "ui_cpnt_segmentedbuttongroup_base_selected": "usr_brand_primary",
+    "ui_cpnt_sheet_base_24": "sys_component_base_42",
+    "ui_cpnt_sheet_base_25": "sys_component_base_11",
+    "ui_cpnt_sheet_base_26": "sys_component_base_43",
+    "ui_cpnt_dropdown_display_icon_normal": "sys_widget_grey_01",
+    "ui_cpnt_dropdown_display_icon_disabled": "sys_widget_grey_03",
+    "ui_cpnt_dropdown_display_icon_darktheme_enabled": "sys_icon_grey_darktheme_01",
+    "ui_cpnt_dropdown_display_icon_darktheme_disabled": "sys_icon_grey_darktheme_03",
+    "ui_cpnt_dropdown_display_icon_white_enabled": "sys_widget_white",
+    "ui_cpnt_dropdown_display_icon_white_disabled": "sys_widget_grey_03"
 }

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

@@ -117,7 +117,7 @@ declare const colorSet: {
         grey20: string;
         darkgrey20: string;
     };
-    readonly PaletteColor_Dark: {
+    readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -419,8 +419,20 @@ declare const colorSet: {
         sys_component_base_39: string;
         sys_component_base_40: string;
         sys_component_base_41: string;
+        sys_cpnt_slider_track: string;
+        sys_cpnt_slider_track_active: string;
+        sys_cpnt_slider_thumb_normal: string;
+        sys_cpnt_slider_thumb_disabled: string;
+        sys_cpnt_slider_thumb_hover_circle: string;
+        sys_cpnt_slider_thumb_pressed_circle: string;
+        sys_cpnt_slider_track_disabled: string;
+        sys_component_base_42: string;
+        sys_component_base_43: string;
+        sys_icon_grey_darktheme_01: string;
+        sys_icon_grey_darktheme_02: string;
+        sys_icon_grey_darktheme_03: string;
     };
-    readonly PaletteColor_light: {
+    readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
         sys_container_background_03: string;
@@ -722,6 +734,18 @@ declare const colorSet: {
         sys_component_base_39: string;
         sys_component_base_40: string;
         sys_component_base_41: string;
+        sys_cpnt_slider_track: string;
+        sys_cpnt_slider_track_active: string;
+        sys_cpnt_slider_thumb_normal: string;
+        sys_cpnt_slider_thumb_disabled: string;
+        sys_cpnt_slider_thumb_hover_circle: string;
+        sys_cpnt_slider_thumb_pressed_circle: string;
+        sys_cpnt_slider_track_disabled: string;
+        sys_component_base_42: string;
+        sys_component_base_43: string;
+        sys_icon_grey_darktheme_01: string;
+        sys_icon_grey_darktheme_02: string;
+        sys_icon_grey_darktheme_03: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -1495,6 +1519,31 @@ declare const colorSet: {
         ui_cpnt_sheet_base_21: string;
         ui_cpnt_sheet_base_22: string;
         ui_cpnt_sheet_base_23: string;
+        ui_cpnt_slider_track: string;
+        ui_cpnt_slider_track_active: string;
+        ui_cpnt_slider_thumb_normal: string;
+        ui_cpnt_slider_thumb_disabled: string;
+        ui_cpnt_slider_thumb_hover_circle: string;
+        ui_cpnt_slider_thumb_pressed_circle: string;
+        ui_cpnt_slider_track_disabled: string;
+        ui_cpnt_basicbuttongroup_base_default: string;
+        ui_cpnt_basicbuttongroup_on_base_hover: string;
+        ui_cpnt_basicbuttongroup_on_base_pressed: string;
+        ui_cpnt_basicbuttongroup_base_disabled: string;
+        ui_cpnt_segmentedbuttongroup_base_default: string;
+        ui_cpnt_segmentedbuttongroup_on_base_hover: string;
+        ui_cpnt_segmentedbuttongroup_on_base_pressed: string;
+        ui_cpnt_segmentedbuttongroup_base_disabled: string;
+        ui_cpnt_segmentedbuttongroup_base_selected: string;
+        ui_cpnt_sheet_base_24: string;
+        ui_cpnt_sheet_base_25: string;
+        ui_cpnt_sheet_base_26: string;
+        ui_cpnt_dropdown_display_icon_normal: string;
+        ui_cpnt_dropdown_display_icon_disabled: string;
+        ui_cpnt_dropdown_display_icon_darktheme_enabled: string;
+        ui_cpnt_dropdown_display_icon_darktheme_disabled: string;
+        ui_cpnt_dropdown_display_icon_white_enabled: string;
+        ui_cpnt_dropdown_display_icon_white_disabled: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/index.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
     UIColor: UIColor_json_1.default
 };
 exports.default = colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -770,4 +770,29 @@ export interface UITheme {
     ui_cpnt_sheet_base_21: string;
     ui_cpnt_sheet_base_22: string;
     ui_cpnt_sheet_base_23: string;
+    ui_cpnt_slider_track: string;
+    ui_cpnt_slider_track_active: string;
+    ui_cpnt_slider_thumb_normal: string;
+    ui_cpnt_slider_thumb_disabled: string;
+    ui_cpnt_slider_thumb_hover_circle: string;
+    ui_cpnt_slider_thumb_pressed_circle: string;
+    ui_cpnt_slider_track_disabled: string;
+    ui_cpnt_basicbuttongroup_base_default: string;
+    ui_cpnt_basicbuttongroup_on_base_hover: string;
+    ui_cpnt_basicbuttongroup_on_base_pressed: string;
+    ui_cpnt_basicbuttongroup_base_disabled: string;
+    ui_cpnt_segmentedbuttongroup_base_default: string;
+    ui_cpnt_segmentedbuttongroup_on_base_hover: string;
+    ui_cpnt_segmentedbuttongroup_on_base_pressed: string;
+    ui_cpnt_segmentedbuttongroup_base_disabled: string;
+    ui_cpnt_segmentedbuttongroup_base_selected: string;
+    ui_cpnt_sheet_base_24: string;
+    ui_cpnt_sheet_base_25: string;
+    ui_cpnt_sheet_base_26: string;
+    ui_cpnt_dropdown_display_icon_normal: string;
+    ui_cpnt_dropdown_display_icon_disabled: string;
+    ui_cpnt_dropdown_display_icon_darktheme_enabled: string;
+    ui_cpnt_dropdown_display_icon_darktheme_disabled: string;
+    ui_cpnt_dropdown_display_icon_white_enabled: string;
+    ui_cpnt_dropdown_display_icon_white_disabled: string;
 }

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,11 @@ export declare type PDSTabItemOption = {
     isActive: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
+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/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -30,6 +30,9 @@ export declare type TextFieldBaseProps = {
     deleteIconColor?: UiColors;
     isFocused?: boolean;
     autoComplete?: string;
+    stepperMode?: 'none' | 'use';
+    innerSpinButtonSize?: 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+    step?: number;
     onBlur?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void;
@@ -39,5 +42,5 @@ export declare type TextFieldBaseProps = {
     inputRef?: any;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, stepperMode, innerSpinButtonSize, step, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -46,15 +46,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable better-styled-components/sort-declarations-alphabetically */
 /* eslint-disable react/jsx-no-bind */
 var react_1 = require("react");
 var react_hook_form_1 = require("react-hook-form");
+var components_1 = require("../../../../hybrid/components");
 var styled_components_1 = __importStar(require("styled-components"));
 var common_1 = require("../../../../common");
 var IconButton_1 = require("../../../components/IconButton");
+var constants_1 = require("./constants");
 function TextFieldBase(_a) {
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, isFocused = _a.isFocused, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "autoComplete", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
-    var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, setValue = _s.setValue, getValues = _s.getValues, clearErrors = _s.clearErrors;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.enterSubmitMode, enterSubmitMode = _d === void 0 ? 'none' : _d, _e = _a.textLineType, textLineType = _e === void 0 ? 'single' : _e, multiRows = _a.multiRows, autoMinRows = _a.autoMinRows, autoMaxRows = _a.autoMaxRows, _f = _a.inputType, inputType = _f === void 0 ? 'text' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, min = _a.min, max = _a.max, _j = _a.maxLength, maxLength = _j === void 0 ? Infinity : _j, _k = _a.textSize, textSize = _k === void 0 ? 'form2' : _k, _l = _a.textWeight, textWeight = _l === void 0 ? 'normal' : _l, textPadding = _a.textPadding, _m = _a.fieldHeight, fieldHeight = _m === void 0 ? 48 : _m, _o = _a.deleteIconMode, deleteIconMode = _o === void 0 ? 'use' : _o, _p = _a.deleteIconSize, deleteIconSize = _p === void 0 ? 20 : _p, _q = _a.deleteIconColor, deleteIconColor = _q === void 0 ? 'ui_cpnt_button_icon_disabled' : _q, isFocused = _a.isFocused, _r = _a.autoComplete, autoComplete = _r === void 0 ? 'on' : _r, _s = _a.stepperMode, stepperMode = _s === void 0 ? 'none' : _s, innerSpinButtonSize = _a.innerSpinButtonSize, step = _a.step, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onTarget = _a.onTarget, inputRef = _a.inputRef, rest = __rest(_a, ["name", "hintText", "defaultText", "textAlign", "validation", "preventBlankMode", "enterSubmitMode", "textLineType", "multiRows", "autoMinRows", "autoMaxRows", "inputType", "state", "colorTheme", "min", "max", "maxLength", "textSize", "textWeight", "textPadding", "fieldHeight", "deleteIconMode", "deleteIconSize", "deleteIconColor", "isFocused", "autoComplete", "stepperMode", "innerSpinButtonSize", "step", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onTarget", "inputRef"]);
+    var _t = (0, react_hook_form_1.useFormContext)(), register = _t.register, setValue = _t.setValue, getValues = _t.getValues, clearErrors = _t.clearErrors;
     var timeout;
     (0, react_1.useEffect)(function () {
         return function () { return clearTimeout(timeout); };
@@ -116,7 +119,7 @@ function TextFieldBase(_a) {
         }
     }
     var textAreaRef = (0, react_1.useRef)(null);
-    var _t = register(name, validation), ref = _t.ref, refRest = __rest(_t, ["ref"]);
+    var _u = register(name, validation), ref = _u.ref, refRest = __rest(_u, ["ref"]);
     (0, react_1.useEffect)(function () {
         if (textAreaRef === null || textAreaRef.current === null) {
             return;
@@ -177,12 +180,12 @@ function TextFieldBase(_a) {
     }
     var S_TextFieldBase = function () {
         if (textLineType === 'single') {
-            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
+            return ((0, jsx_runtime_1.jsxs)(S_InputWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Input, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, type: inputType, state: state, readOnly: state === 'read_only', disabled: state === 'disabled', maxLength: maxLength, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, min: min, max: max, autoComplete: autoComplete, stepperMode: stepperMode, innerSpinButtonSize: innerSpinButtonSize, step: step, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
                             ref(e);
                             if (inputRef) {
                                 inputRef.current = e;
                             }
-                        } }), void 0), deleteIconMode === 'use' && isFocused && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
+                        } }), void 0), stepperMode === 'use' && ((0, jsx_runtime_1.jsxs)(S_IconBox, __assign({ innerSpinButtonSize: innerSpinButtonSize }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_up", fillType: "fill", size: innerSpinButtonSize }, void 0), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: "ic_arrow_down", fillType: "fill", size: innerSpinButtonSize }, void 0)] }), void 0)), deleteIconMode === 'use' && isFocused && stepperMode === 'none' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_delete", baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: deleteIconSize, iconColorKey: deleteIconColor, iconFillType: "fill", state: state === 'disabled' ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: deleteValue }, void 0))] }, void 0));
         }
         if (textLineType === 'multi') {
             return ((0, jsx_runtime_1.jsx)(S_Multi, __assign({}, register(name, validation), rest, { name: name, defaultValue: defaultText, placeholder: hintText, textAlign: textAlign, state: state, readOnly: state === 'read_only' && true, disabled: state === 'disabled' && true, maxLength: maxLength, rows: multiRows, textSize: textSize, textWeight: textWeight, textPadding: textPadding, colorTheme: colorTheme, autoComplete: autoComplete, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, ref: function (e) {
@@ -206,7 +209,7 @@ function TextFieldBase(_a) {
     };
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: S_TextFieldBase() }, void 0);
 }
-var S_InputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  width: 100%;\n"])));
+var S_InputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
 var read_only = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
@@ -225,7 +228,7 @@ var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_
             transparent: theme.ui_cpnt_textfield_text_colortheme_transparent_disabled
         }[colorTheme];
 });
-var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n  display: inline-flex;\n  font-size: ", ";\n  font-weight: ", ";\n  height: 100%;\n  justify-content: center;\n  line-height: ", ";\n  outline: 0;\n  overflow: hidden;\n  padding: 0;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  text-align: ", ";\n  width: 100%;\n  &::placeholder {\n    color: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n    line-height: ", ";\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, colorTheme = _a.colorTheme;
     return colorTheme &&
         {
@@ -277,11 +280,33 @@ var basicStyle = (0, styled_components_1.css)(templateObject_4 || (templateObjec
     var textPadding = _a.textPadding;
     return textPadding && "padding: " + textPadding + ";";
 });
-var S_Input = styled_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  -webkit-appearance: none;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n"], ["\n  -webkit-appearance: none;\n  cursor: pointer;\n  height: ", ";\n  margin-left: ", ";\n  opacity: 1;\n  width: ", ";\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize + "px";
+});
+var S_Input = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  z-index: 20;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  z-index: 20;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
+}, function (_a) {
+    var stepperMode = _a.stepperMode, type = _a.type;
+    return stepperMode === 'use' && type === 'number'
+        ? inputInnerSpinButtonStyle
+        : '-webkit-appearance: none; margin: 0;';
+});
+var S_IconBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", "px;\n  width: ", ";\n  z-index: 1;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  height: ", ";\n  justify-content: center;\n  position: absolute;\n  right: ", "px;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize * 2 + "px";
+}, constants_1.PIXEL_FOR_ICONS_CENTER, function (_a) {
+    var innerSpinButtonSize = _a.innerSpinButtonSize;
+    return innerSpinButtonSize && innerSpinButtonSize + "px";
 });
-var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
+var S_Auto = styled_components_1.default.textarea(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;
     return autoMaxRows &&
         fieldHeight &&
@@ -296,6 +321,6 @@ var S_Auto = styled_components_1.default.textarea(templateObject_6 || (templateO
             Number(common_1.desktopLineHeight[textSize]) *
             autoMinRows + "px;";
 });
-var S_Multi = styled_components_1.default.textarea(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
+var S_Multi = styled_components_1.default.textarea(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n"])), basicStyle);
 exports.default = TextFieldBase;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/desktop/common/components/TextFieldBase/constants.d.ts

@@ -0,0 +1 @@
+export declare const PIXEL_FOR_ICONS_CENTER = 1;

package/dist/src/desktop/common/components/TextFieldBase/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PIXEL_FOR_ICONS_CENTER = void 0;
+exports.PIXEL_FOR_ICONS_CENTER = 1;

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;