pds-dev-kit-web-test 0.2.22 → 0.2.24

package/dist/src/mobile/components/UploadIconButton/UploadIconButton.js

@@ -67,7 +67,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:active:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
@@ -122,12 +122,17 @@ var large = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 =
 var medium = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
-var S_UploadIconButton = styled_components_1.default.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType === 'circular' && '50%';
-}, function (_a) {
+var roundStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
+});
+var S_UploadIconButton = styled_components_1.default.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: inline-flex;\n  justify-content: center;\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, shadow = _a.shadow;
     return shadow === 'visible' && theme.boxShadow.elevation2;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
 }, function (_a) {
     var fillType = _a.fillType;
     return fillType &&
@@ -147,4 +152,4 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
         }[baseSize];
 });
 exports.default = UploadIconButton;
-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;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.d.ts

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/dist/src/mobile/components/UploadTextButton/UploadTextButton.js

@@ -49,6 +49,7 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
+    grey2: 'sysTextSecondary',
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
@@ -91,6 +92,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
         case 'red':
         case 'grey_01':
             return colorThemeDefault;
+        case 'grey2':
+            return colorThemeDefault;
         case 'white':
             return colorThemeWhite;
         case 'white2':

package/dist/src/mobile/components/index.d.ts

@@ -1,3 +1,4 @@
+import { BasicButtonGroup } from './BasicButtonGroup';
 import { BasicChatListItem } from './BasicChatListItem';
 import { BasicFormGroup } from './BasicFormGroup';
 import { BasicList } from './BasicList';
@@ -24,7 +25,9 @@ import { MobileHeaderBar } from './MobileHeaderBar';
 import { MobileTabBar } from './MobileTabBar';
 import { Radio } from './Radio';
 import { ReactionButton } from './ReactionButton';
+import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
+import { Slider } from './Slider';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -32,4 +35,4 @@ import { TextLabel } from './TextLabel';
 import { UploadIconButton } from './UploadIconButton';
 import { UploadMainButton } from './UploadMainButton';
 import { UploadTextButton } from './UploadTextButton';
-export { BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

package/dist/src/mobile/components/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = void 0;
+exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.FloatingActionButton = exports.Dropdown = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = void 0;
+var BasicButtonGroup_1 = require("./BasicButtonGroup");
+Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
 Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
 var BasicFormGroup_1 = require("./BasicFormGroup");
@@ -53,8 +55,12 @@ var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var ReactionButton_1 = require("./ReactionButton");
 Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var SegmentedButtonGroup_1 = require("./SegmentedButtonGroup");
+Object.defineProperty(exports, "SegmentedButtonGroup", { enumerable: true, get: function () { return SegmentedButtonGroup_1.SegmentedButtonGroup; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var Slider_1 = require("./Slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

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

@@ -9,5 +9,5 @@ export { ContainersBox as MPContainersBox } from './layout/LayoutMP/ContainersBo
 export { LayoutMS } from './layout/LayoutMS';
 export { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 export { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
-export { BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, Select as M_Select, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
+export { BasicButtonGroup as M_BasicButtonGroup, BasicChatListItem as M_BasicChatListItem, BasicFormGroup as M_BasicFormGroup, BasicList as M_BasicList, BasicListItem as M_BasicListItem, BlogTextField as M_BlogTextField, BodyTextGroup as M_BodyTextGroup, Card as M_Card, CardList as M_CardList, ChatBubbleListItem as M_ChatBubbleListItem, ChatList as M_ChatList, Checkbox as M_Checkbox, Chip as M_Chip, ContextMenu as M_ContextMenu, ContextMenuItem as M_ContextMenuItem, Dropdown as M_Dropdown, FloatingActionButton as M_FloatingActionButton, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, LottieReactionButton as M_LottieReactionButton, MainButton as M_MainButton, MobileAlertDialog as M_MobileAlertDialog, MobileHeaderBar as M_MobileHeaderBar, MobileTabBar as M_MobileTabBar, Radio as M_Radio, ReactionButton as M_ReactionButton, SegmentedButtonGroup as M_SegmentedButtonGroup, Select as M_Select, Slider as M_Slider, StatusBlock as M_StatusBlock, TextButton as M_TextButton, TextField as M_TextField, TextLabel as M_TextLabel, UploadIconButton as M_UploadIconButton, UploadMainButton as M_UploadMainButton, UploadTextButton as M_UploadTextButton } from './components';
 export { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';

package/dist/src/mobile/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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_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 = void 0;
+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 = 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 = void 0;
+exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = void 0;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -30,6 +31,7 @@ var ContainersBox_4 = require("./layout/LayoutMS/ContainersBox");
 Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return ContainersBox_4.ContainersBox; } });
 // components
 var components_1 = require("./components");
+Object.defineProperty(exports, "M_BasicButtonGroup", { enumerable: true, get: function () { return components_1.BasicButtonGroup; } });
 Object.defineProperty(exports, "M_BasicChatListItem", { enumerable: true, get: function () { return components_1.BasicChatListItem; } });
 Object.defineProperty(exports, "M_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
 Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
@@ -56,7 +58,9 @@ Object.defineProperty(exports, "M_MobileHeaderBar", { enumerable: true, get: fun
 Object.defineProperty(exports, "M_MobileTabBar", { enumerable: true, get: function () { return components_1.MobileTabBar; } });
 Object.defineProperty(exports, "M_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
 Object.defineProperty(exports, "M_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+Object.defineProperty(exports, "M_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
 Object.defineProperty(exports, "M_Select", { enumerable: true, get: function () { return components_1.Select; } });
+Object.defineProperty(exports, "M_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
 Object.defineProperty(exports, "M_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
 Object.defineProperty(exports, "M_TextField", { enumerable: true, get: function () { return components_1.TextField; } });

package/dist/src/sub/AdminList/AdminListHeader/AdminListHeader.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PDSTextType, PDSValueOption } from '../../../common/types';
+import type { PDSTextType, AdminListDropdownValueOption } from '../../../common/types';
 declare type Props = {
     headerBarSize?: 'regular' | 'small';
     headerBarTitleText?: PDSTextType;
@@ -7,9 +7,9 @@ declare type Props = {
     currentPage?: number;
     totalPage?: number;
     contentText?: PDSTextType;
-    dropdownTextArray?: PDSValueOption[];
-    dropdownDefaultValue?: PDSValueOption;
-    onChangeCount?: (option: PDSValueOption) => void;
+    dropdownTextArray?: AdminListDropdownValueOption[];
+    dropdownDefaultValue?: AdminListDropdownValueOption;
+    onChangeCount?: (option: AdminListDropdownValueOption) => void;
     onClickNextBtn?: () => void;
     onClickPrevBtn?: () => void;
 };

package/dist/src/sub/AdminList/AdminListHeader/HeaderBar.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import type { PDSTextType, PDSValueOption } from '../../../common/types';
+import type { PDSTextType, AdminListDropdownValueOption } from '../../../common/types';
 declare type Props = {
     titleText?: PDSTextType;
     tooltipText?: PDSTextType;
     size?: 'regular' | 'small';
     currentPage?: number;
     totalPage?: number;
-    dropdownTextArray: PDSValueOption[];
-    dropdownDefaultValue?: PDSValueOption;
-    onChangeDropdown?: (option: PDSValueOption) => void;
+    dropdownTextArray: AdminListDropdownValueOption[];
+    dropdownDefaultValue?: AdminListDropdownValueOption;
+    onChangeDropdown?: (option: AdminListDropdownValueOption) => void;
     onClickIBtn1?: () => void;
     onClickIBtn2?: () => void;
 };

package/dist/src/sub/AdminList/BulkActionBar/BulkActionBar.d.ts

@@ -1,27 +1,27 @@
 /// <reference types="react" />
-import type { PDSTextType, PDSValueOption } from '../../../common/types';
+import type { PDSTextType, AdminListDropdownValueOption } from '../../../common/types';
 declare type Props = {
     itemCount?: number;
     dropdownMode?: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
-    dropdown1Value?: PDSValueOption;
-    dropdown2Value?: PDSValueOption;
-    dropdown3Value?: PDSValueOption;
-    dropdown1DefaultText?: PDSValueOption;
-    dropdown2DefaultText?: PDSValueOption;
-    dropdown3DefaultText?: PDSValueOption;
+    dropdown1Value?: AdminListDropdownValueOption;
+    dropdown2Value?: AdminListDropdownValueOption;
+    dropdown3Value?: AdminListDropdownValueOption;
+    dropdown1DefaultText?: AdminListDropdownValueOption;
+    dropdown2DefaultText?: AdminListDropdownValueOption;
+    dropdown3DefaultText?: AdminListDropdownValueOption;
     dropdown1HintText?: PDSTextType;
     dropdown2HintText?: PDSTextType;
     dropdown3HintText?: PDSTextType;
-    dropdown1ValueArray?: PDSValueOption[];
-    dropdown2ValueArray?: PDSValueOption[];
-    dropdown3ValueArray?: PDSValueOption[];
+    dropdown1ValueArray?: AdminListDropdownValueOption[];
+    dropdown2ValueArray?: AdminListDropdownValueOption[];
+    dropdown3ValueArray?: AdminListDropdownValueOption[];
     tBtnMode?: 'none' | 'tbtn_amount1' | 'tbtn_amount2' | 'tbtn_amount3';
     tBtn1Text?: PDSTextType;
     tBtn2Text?: PDSTextType;
     tBtn3Text?: PDSTextType;
-    onChangeDropdown1?: (value: PDSValueOption) => void;
-    onChangeDropdown2?: (value: PDSValueOption) => void;
-    onChangeDropdown3?: (value: PDSValueOption) => void;
+    onChangeDropdown1?: (value: AdminListDropdownValueOption) => void;
+    onChangeDropdown2?: (value: AdminListDropdownValueOption) => void;
+    onChangeDropdown3?: (value: AdminListDropdownValueOption) => void;
     onClickTBtn1?: () => void;
     onClickTBtn2?: () => void;
     onClickTBtn3?: () => void;

package/dist/src/sub/AdminList/ToolBar/SearchField.js

@@ -72,7 +72,7 @@ function SearchField(_a) {
             onTarget();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(S_SearchFieldBox, __assign({ "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: (0, jsx_runtime_1.jsxs)(S_SearchFieldWrapper, __assign({ size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", textPadding: "0 0 0 8px", deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }, void 0), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_a", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick }, void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(S_SearchFieldBox, __assign({ "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: (0, jsx_runtime_1.jsxs)(S_SearchFieldWrapper, __assign({ size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", fieldPaddingLeft: 8, deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }, void 0), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_a", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick }, void 0)] }), void 0) }), void 0));
 }
 var S_SearchFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var size = _a.size;

package/dist/src/sub/DynamicLayout/components/Section/components/CustomSectionBackgroundMedia.js

@@ -90,7 +90,7 @@ function CustomSectionBackgroundMedia(_a) {
         case 'IMAGE':
             return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR && ((0, jsx_runtime_1.jsx)(S_Image, __assign({ src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), normalStyle: componentStyle }, { children: (0, jsx_runtime_1.jsx)("img", { src: String(CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR), style: { visibility: 'hidden', width: '100%', height: '100%' } }, void 0) }), void 0)) }, void 0));
         case 'YOUTUBE':
-            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: (0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME) }, void 0) }), void 0));
+            return ((0, jsx_runtime_1.jsx)(S_YoutubeContainer, __assign({}, youtubeSize, { children: youtubeSize.height > 0 && youtubeSize.width > 0 && ((0, jsx_runtime_1.jsx)(YouTubeIframe_1.YouTubeIframe, { id: playerId, src: String(CB_STYLE_PROP_BGMEDIA_SPEC_YSRC), loopMode: CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY ? 'use' : 'none', startSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME), endSeconds: Number(CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME), customHeight: youtubeSize.height, customWidth: youtubeSize.width }, void 0)) }), void 0));
         case 'NONE':
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.d.ts

@@ -5,6 +5,8 @@ declare type Props = {
     loopMode?: 'use' | 'none';
     startSeconds?: number;
     endSeconds?: number;
+    customHeight?: number;
+    customWidth?: number;
 };
-declare function YouTubeIframe({ id, src, loopMode, startSeconds, endSeconds }: Props): JSX.Element;
+declare function YouTubeIframe({ id, src, loopMode, startSeconds, endSeconds, customHeight, customWidth }: Props): JSX.Element;
 export default YouTubeIframe;

package/dist/src/sub/DynamicLayout/components/YouTubeIframe/YouTubeIframe.js

@@ -13,17 +13,23 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../../hooks");
 var TouTubeLinkParser_1 = __importDefault(require("../../utils/TouTubeLinkParser"));
 function YouTubeIframe(_a) {
-    var id = _a.id, src = _a.src, _b = _a.loopMode, loopMode = _b === void 0 ? 'use' : _b, _c = _a.startSeconds, startSeconds = _c === void 0 ? 0 : _c, endSeconds = _a.endSeconds;
-    var _d = (0, react_1.useState)(true), isYoutubeLoading = _d[0], setIsYoutubeLoading = _d[1];
-    var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
+    var id = _a.id, src = _a.src, _b = _a.loopMode, loopMode = _b === void 0 ? 'use' : _b, _c = _a.startSeconds, startSeconds = _c === void 0 ? 0 : _c, _d = _a.endSeconds, endSeconds = _d === void 0 ? 0 : _d, customHeight = _a.customHeight, customWidth = _a.customWidth;
+    var _e = (0, react_1.useState)(true), isYoutubeLoading = _e[0], setIsYoutubeLoading = _e[1];
+    var _f = (0, react_1.useState)(null), error = _f[0], setError = _f[1];
+    var _g = (0, react_1.useState)(null), timeoutId = _g[0], setTimeoutId = _g[1];
     var playerRef = (0, react_1.useRef)();
     var videoId = TouTubeLinkParser_1.default.getId(src);
     var prevVideoId = (0, hooks_1.usePrevious)(videoId);
     var PLAYER_ID = "PLAYER_" + id;
     var YOUTUBE_SCRIPT_ID = "YOUTUBE_SCRIPT_" + id;
     var YOUTUBE_SCRIPT_SRC = 'https://www.youtube.com/iframe_api';
+    var section = {
+        start: startSeconds,
+        end: endSeconds
+    };
     var isLoop = loopMode === 'use';
     var onPlayerReady = (0, react_1.useCallback)(function (event) {
+        event.target.seekTo(section.start);
         event.target.mute();
         event.target.playVideo();
     }, []);
@@ -45,13 +51,21 @@ function YouTubeIframe(_a) {
                 case ENDED:
                 case PAUSED:
                     setIsYoutubeLoading(true);
-                    event.target.playVideo();
+                    isLoop && event.target.seekTo(section.start);
                     break;
                 case PLAYING:
                     setError(null);
                     setTimeout(function () {
                         setIsYoutubeLoading(false);
                     }, 100);
+                    if (isLoop && stateCode === PLAYING && section.end > section.start) {
+                        var duration = section.end - section.start;
+                        var restartVideoSection = function () {
+                            event.target.seekTo(section.start);
+                        };
+                        var id_1 = setTimeout(restartVideoSection, duration * 1000);
+                        setTimeoutId(id_1);
+                    }
                     break;
             }
         }
@@ -59,6 +73,14 @@ function YouTubeIframe(_a) {
             setIsYoutubeLoading(true);
         }
     }, []);
+    (0, react_1.useEffect)(function () {
+        if (!timeoutId) {
+            return;
+        }
+        return function () {
+            timeoutId && clearTimeout(timeoutId);
+        };
+    }, [timeoutId]);
     var onPlayerError = (0, react_1.useCallback)(function (event) {
         var _a;
         // eslint-disable-next-line no-console
@@ -82,32 +104,21 @@ function YouTubeIframe(_a) {
         try {
             // api 참고
             // https://developers.google.com/youtube/player_parameters?hl=ko
-            var playerVars = endSeconds
-                ? {
+            var player = new window.YT.Player(PLAYER_ID, {
+                videoId: videoId,
+                height: customHeight || 720,
+                width: customWidth || 1920,
+                playerVars: {
+                    cc_load_policy: 0,
                     playsinline: 1,
                     autoplay: 1,
                     controls: 0,
                     iv_load_policy: 3,
                     listType: 'playlist',
+                    disablekb: 1,
                     playlist: videoId,
-                    loop: isLoop ? 1 : 0,
-                    start: startSeconds,
-                    end: endSeconds,
-                    cc_load_policy: 0
-                }
-                : {
-                    autoplay: 1,
-                    controls: 0,
-                    iv_load_policy: 3,
-                    listType: 'playlist',
-                    playlist: videoId,
-                    loop: isLoop ? 1 : 0,
-                    start: startSeconds,
-                    cc_load_policy: 0
-                };
-            var player = new window.YT.Player(PLAYER_ID, {
-                videoId: videoId,
-                playerVars: playerVars,
+                    start: startSeconds
+                },
                 events: {
                     onReady: onPlayerReady,
                     onStateChange: onPlayerStateChange,
@@ -204,7 +215,7 @@ function YouTubeIframe(_a) {
             youtubeScript === null || youtubeScript === void 0 ? void 0 : youtubeScript.remove();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }, void 0) }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isYoutubeLoading && (0, jsx_runtime_1.jsx)(BlackScreen, {}, void 0), (0, jsx_runtime_1.jsx)(S_IframeWrapper, { children: (0, jsx_runtime_1.jsx)("div", { id: PLAYER_ID }, "" + loopMode + startSeconds + endSeconds) }, void 0)] }, void 0));
 }
 var BlackScreen = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  background-color: ", ";\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mock_customSection.js

@@ -243,7 +243,8 @@ exports.customSectionMock1 = {
                 CB_CONTENT_PROP_CLINK: {
                     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL',
                     CB_CONTENT_PROP_CLINK_SPEC_SRC: 'http://www.naver.com',
-                    CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true
+                    CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                    CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'true'
                 },
                 CB_CONTENT_PROP_VISIBILITY: {
                     CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -342,6 +343,7 @@ exports.customSectionMock1 = {
                 },
                 CB_CONTENT_PROP_CLINK: {
                     CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                    CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'true',
                     CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
                     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL'
                 },
@@ -616,6 +618,7 @@ exports.customSectionMock1 = {
                 },
                 CB_CONTENT_PROP_CLINK: {
                     CB_CONTENT_PROP_CLINK_SPEC_NEWTAB: true,
+                    CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC: 'true',
                     CB_CONTENT_PROP_CLINK_SPEC_SRC: 'https://publ.co',
                     CB_CONTENT_PROP_CLINK_SPEC_TYPE: 'EXTERNAL'
                 },