pds-dev-kit-web 1.4.68 → 1.5.1

package/dist/index.d.ts

@@ -5,14 +5,16 @@ export { theme };
 export { Form };
 import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, Spacing, Switch };
-import { LayoutWF, WFContainersBox, 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_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, 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 } from './src/desktop';
+import { LayoutWF, WFContainersBox, 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_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_SectionSheet } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 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_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, 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_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
-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_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
+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_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_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet };
+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_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';
 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_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, 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_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_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_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };

package/dist/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = 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.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = 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.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_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = 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_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = void 0;
-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_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = void 0;
+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.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = 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.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_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 = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = void 0;
+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_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 = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -57,9 +57,7 @@ Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return desktop_1.D_ContextMenu; } });
 Object.defineProperty(exports, "D_ContextMenuItem", { enumerable: true, get: function () { return desktop_1.D_ContextMenuItem; } });
 Object.defineProperty(exports, "D_DesktopAlertDialog", { enumerable: true, get: function () { return desktop_1.D_DesktopAlertDialog; } });
-Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return desktop_1.D_DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: function () { return desktop_1.D_DesktopHeaderBar; } });
-Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return desktop_1.D_DesktopHeadlessModal; } });
 Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return desktop_1.D_DesktopTabBar; } });
 Object.defineProperty(exports, "D_Dropdown", { enumerable: true, get: function () { return desktop_1.D_Dropdown; } });
 Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_DynamicDesktopNavBar; } });
@@ -86,6 +84,11 @@ Object.defineProperty(exports, "D_UploadTextButton", { enumerable: true, get: fu
 Object.defineProperty(exports, "D_UserDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_UserDesktopNavBar; } });
 Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: function () { return desktop_1.D_UserDesktopTabBar; } });
 Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return desktop_1.D_UserDesktopSideTab; } });
+Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: function () { return desktop_1.D_AnnotationSheet; } });
+Object.defineProperty(exports, "D_ContentSheet", { enumerable: true, get: function () { return desktop_1.D_ContentSheet; } });
+Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return desktop_1.D_DesktopBasicModal; } });
+Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return desktop_1.D_DesktopHeadlessModal; } });
+Object.defineProperty(exports, "D_SectionSheet", { enumerable: true, get: function () { return desktop_1.D_SectionSheet; } });
 // mobile
 var mobile_1 = require("./src/mobile");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return mobile_1.LayoutMF; } });
@@ -115,12 +118,12 @@ Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return mobile_1.M_ContextMenu; } });
 Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return mobile_1.M_ContextMenuItem; } });
 Object.defineProperty(exports, "M_Dropdown", { enumerable: true, get: function () { return mobile_1.M_Dropdown; } });
+Object.defineProperty(exports, "M_FloatingActionButton", { enumerable: true, get: function () { return mobile_1.M_FloatingActionButton; } });
 Object.defineProperty(exports, "M_HorizontalFormGroup", { enumerable: true, get: function () { return mobile_1.M_HorizontalFormGroup; } });
 Object.defineProperty(exports, "M_IconButton", { enumerable: true, get: function () { return mobile_1.M_IconButton; } });
 Object.defineProperty(exports, "M_ImageSlide", { enumerable: true, get: function () { return mobile_1.M_ImageSlide; } });
 Object.defineProperty(exports, "M_MainButton", { enumerable: true, get: function () { return mobile_1.M_MainButton; } });
 Object.defineProperty(exports, "M_MobileAlertDialog", { enumerable: true, get: function () { return mobile_1.M_MobileAlertDialog; } });
-Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return mobile_1.M_MobileBasicModal; } });
 Object.defineProperty(exports, "M_MobileHeaderBar", { enumerable: true, get: function () { return mobile_1.M_MobileHeaderBar; } });
 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; } });
@@ -133,3 +136,7 @@ Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function
 Object.defineProperty(exports, "M_UploadIconButton", { enumerable: true, get: function () { return mobile_1.M_UploadIconButton; } });
 Object.defineProperty(exports, "M_UploadMainButton", { enumerable: true, get: function () { return mobile_1.M_UploadMainButton; } });
 Object.defineProperty(exports, "M_UploadTextButton", { enumerable: true, get: function () { return mobile_1.M_UploadTextButton; } });
+Object.defineProperty(exports, "M_AnnotationSheet", { enumerable: true, get: function () { return mobile_1.M_AnnotationSheet; } });
+Object.defineProperty(exports, "M_ContentSheet", { enumerable: true, get: function () { return mobile_1.M_ContentSheet; } });
+Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return mobile_1.M_MobileBasicModal; } });
+Object.defineProperty(exports, "M_SectionSheet", { enumerable: true, get: function () { return mobile_1.M_SectionSheet; } });

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

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption, UiColors } from '../../../common';
 declare type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
 export declare type ChipProps = {
     displayType?: DisplayType;
+    text?: PDSTextType;
     filterIconMode?: 'none' | 'left';
     iconFillType?: 'line' | 'fill';
     iconName?: FillIconNameKeys | LineIconNameKeys;
-    text?: PDSTextType;
+    overrideTextColorKey?: UiColors;
+    overrideBackgroundColorKey?: UiColors;
     value?: PDSValueOption['value'];
     id?: PDSValueOption['value'];
     onClickChip?: () => void;
@@ -16,5 +18,5 @@ export declare type ChipProps = {
     /** @deprecated id 필드를 대신 사용하세요. */
     chipId?: string | number;
 };
-export default function Chip({ displayType, filterIconMode, iconFillType, iconName, text, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
+export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, activeChipId, chipId, onClickChip, onClickXMarkIcon }: ChipProps): JSX.Element;
 export {};

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

@@ -32,7 +32,7 @@ var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, text = _a.text, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
+    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
     var isActive = (0, react_1.useMemo)(function () {
         if (activeChipId !== undefined && chipId !== undefined) {
             return activeChipId === chipId;
@@ -65,8 +65,8 @@ function Chip(_a) {
                         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }),
                         react_1.default.createElement(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })))));
             case 'information':
-                return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip },
-                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
+                return (react_1.default.createElement(S_InfoChip, { onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey },
+                    react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
             case 'label':
                 return (react_1.default.createElement(S_LabelChip, { onClick: handleClickChip },
                     react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })));
@@ -105,8 +105,10 @@ var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (
     return isActive ? '' : "border: 1px solid " + theme.ui_cpnt_chip_line_border_01;
 });
 var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_chip_fill_base_inactive;
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey
+        ? theme[overrideBackgroundColorKey]
+        : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -11,5 +11,5 @@ import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBo
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
 import { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
 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_MainButton, D_PageTitleTextGroup, D_Radio, D_Select, D_ReactionButton, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab };
-import { DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal } from './panels';
-export { D_DesktopBasicModal, D_DesktopHeadlessModal };
+import { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, SectionSheet as D_SectionSheet } from './panels';
+export { D_AnnotationSheet, D_ContentSheet, D_DesktopBasicModal, D_DesktopHeadlessModal, D_SectionSheet };

package/dist/src/desktop/index.js

@@ -3,7 +3,7 @@
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_ReactionButton = exports.D_Select = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = 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.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = void 0;
+exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -72,5 +72,8 @@ Object.defineProperty(exports, "D_UserDesktopTabBar", { enumerable: true, get: f
 Object.defineProperty(exports, "D_UserDesktopSideTab", { enumerable: true, get: function () { return components_1.UserDesktopSideTab; } });
 // panels
 var panels_1 = require("./panels");
+Object.defineProperty(exports, "D_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });
+Object.defineProperty(exports, "D_ContentSheet", { enumerable: true, get: function () { return panels_1.ContentSheet; } });
 Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return panels_1.DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return panels_1.DesktopHeadlessModal; } });
+Object.defineProperty(exports, "D_SectionSheet", { enumerable: true, get: function () { return panels_1.SectionSheet; } });

package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.d.ts

@@ -0,0 +1,57 @@
+import React, { CSSProperties } from 'react';
+import { UiColors } from '../../../common';
+declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+export declare type AnnotationSheetProps = {
+    width: string;
+    height: string;
+    backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    borderWidth?: 1 | 2;
+    borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    overrideCSS?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare type StyleProps = {
+    $width?: string;
+    $height?: string;
+    $backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    $borderWidth?: 1 | 2;
+    $borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    $radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    hasOnClick?: boolean;
+};
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+declare function AnnotationSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: AnnotationSheetProps): JSX.Element;
+export default AnnotationSheet;

package/dist/src/desktop/panels/AnnotationSheet/AnnotationSheet.js

@@ -0,0 +1,134 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var backgroundColorTheme = {
+    transparent: 'ui_cpnt_sheet_base_03',
+    white: 'ui_cpnt_sheet_base_white',
+    black: 'ui_cpnt_sheet_base_black',
+    base1: 'ui_cpnt_sheet_base_01',
+    base2: 'ui_cpnt_sheet_base_02',
+    base3: 'ui_cpnt_sheet_base'
+};
+var borderColorTheme = {
+    grey: 'ui_cpnt_sheet_border_01',
+    blue: 'ui_cpnt_sheet_border_02',
+    green: 'ui_cpnt_sheet_border_03'
+};
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+function AnnotationSheet(_a) {
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base2' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (react_1.default.createElement(S_AnnotationSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+}
+var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var $radius = _a.$radius;
+    return $radius + "px";
+});
+var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingTop = _a.paddingTop;
+    return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
+});
+var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingRight = _a.paddingRight;
+    return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
+});
+var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: ", ";\n"], ["\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingBottom = _a.paddingBottom;
+    return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
+});
+var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingLeft = _a.paddingLeft;
+    return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
+});
+var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
+}, function (_a) {
+    var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
+    return overrideBorderColorKey && theme[overrideBorderColorKey];
+});
+var S_AnnotationSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
+    return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var borderMode = _a.borderMode;
+    return (borderMode === 'use' ? 'solid' : 'none');
+}, function (_a) {
+    var $borderWidth = _a.$borderWidth;
+    return $borderWidth + "px";
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
+}, function (_a) {
+    var hasOnClick = _a.hasOnClick;
+    return (hasOnClick ? 'pointer' : 'default');
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && radiusStyle;
+}, function (_a) {
+    var paddingTop = _a.paddingTop;
+    return paddingTop !== 'none' && paddingTopStyle;
+}, function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight !== 'none' && paddingRightStyle;
+}, function (_a) {
+    var paddingBottom = _a.paddingBottom;
+    return paddingBottom !== 'none' && paddingBottomStyle;
+}, function (_a) {
+    var paddingLeft = _a.paddingLeft;
+    return paddingLeft !== 'none' && paddingLeftStyle;
+}, overrideStyle);
+exports.default = AnnotationSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/desktop/panels/AnnotationSheet/index.d.ts

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

package/dist/src/desktop/panels/AnnotationSheet/index.js

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

package/dist/src/desktop/panels/ContentSheet/ContentSheet.d.ts

@@ -0,0 +1,57 @@
+import React, { CSSProperties } from 'react';
+import { UiColors } from '../../../common';
+declare type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+export declare type ContentSheetProps = {
+    width: string;
+    height: string;
+    backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    borderWidth?: 1 | 2;
+    borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    overrideCSS?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export declare type StyleProps = {
+    $width?: string;
+    $height?: string;
+    $backgroundColorTheme?: 'transparent' | 'white' | 'black' | 'base1' | 'base2' | 'base3';
+    overrideBackgroundColorKey?: UiColors;
+    borderMode?: 'none' | 'use';
+    $borderWidth?: 1 | 2;
+    $borderColorTheme?: 'grey' | 'blue' | 'green';
+    overrideBorderColorKey?: UiColors;
+    shapeType?: 'rectangle' | 'round';
+    $radius?: 8 | 16 | 24;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    hasOnClick?: boolean;
+};
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+declare function ContentSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: ContentSheetProps): JSX.Element;
+export default ContentSheet;

package/dist/src/desktop/panels/ContentSheet/ContentSheet.js

@@ -0,0 +1,134 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var backgroundColorTheme = {
+    transparent: 'ui_cpnt_sheet_base_03',
+    white: 'ui_cpnt_sheet_base_white',
+    black: 'ui_cpnt_sheet_base_black',
+    base1: 'ui_cpnt_sheet_base_01',
+    base2: 'ui_cpnt_sheet_base_02',
+    base3: 'ui_cpnt_sheet_base'
+};
+var borderColorTheme = {
+    grey: 'ui_cpnt_sheet_border_01',
+    blue: 'ui_cpnt_sheet_border_02',
+    green: 'ui_cpnt_sheet_border_03'
+};
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+function ContentSheet(_a) {
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'base3' : _b, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, _c = _a.borderMode, borderMode = _c === void 0 ? 'none' : _c, _d = _a.borderWidth, borderWidth = _d === void 0 ? 1 : _d, _e = _a.borderColorTheme, borderColorTheme = _e === void 0 ? 'grey' : _e, overrideBorderColorKey = _a.overrideBorderColorKey, _f = _a.shapeType, shapeType = _f === void 0 ? 'rectangle' : _f, _g = _a.radius, radius = _g === void 0 ? 24 : _g, _h = _a.paddingTop, paddingTop = _h === void 0 ? 'spacing_e' : _h, _j = _a.paddingRight, paddingRight = _j === void 0 ? 'spacing_e' : _j, _k = _a.paddingBottom, paddingBottom = _k === void 0 ? 'spacing_e' : _k, _l = _a.paddingLeft, paddingLeft = _l === void 0 ? 'spacing_e' : _l, overrideCSS = _a.overrideCSS, children = _a.children, onClick = _a.onClick;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (react_1.default.createElement(S_ContentSheet, { "$width": width, "$height": height, "$backgroundColorTheme": backgroundColorTheme, overrideBackgroundColorKey: overrideBackgroundColorKey, borderMode: borderMode, "$borderWidth": borderWidth, "$borderColorTheme": borderColorTheme, overrideBorderColorKey: overrideBorderColorKey, shapeType: shapeType, "$radius": radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft, style: overrideCSS, onClick: handleClick, hasOnClick: !!onClick }, children));
+}
+var radiusStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+    var $radius = _a.$radius;
+    return $radius + "px";
+});
+var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingTop = _a.paddingTop;
+    return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
+});
+var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingRight = _a.paddingRight;
+    return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
+});
+var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: ", ";\n"], ["\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingBottom = _a.paddingBottom;
+    return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
+});
+var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingLeft = _a.paddingLeft;
+    return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
+});
+var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+    return overrideBackgroundColorKey && theme[overrideBackgroundColorKey];
+}, function (_a) {
+    var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
+    return overrideBorderColorKey && theme[overrideBorderColorKey];
+});
+var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width;
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, function (_a) {
+    var theme = _a.theme, $backgroundColorTheme = _a.$backgroundColorTheme;
+    return $backgroundColorTheme && theme[backgroundColorTheme[$backgroundColorTheme]];
+}, function (_a) {
+    var borderMode = _a.borderMode;
+    return (borderMode === 'use' ? 'solid' : 'none');
+}, function (_a) {
+    var $borderWidth = _a.$borderWidth;
+    return $borderWidth + "px";
+}, function (_a) {
+    var theme = _a.theme, $borderColorTheme = _a.$borderColorTheme;
+    return $borderColorTheme && theme[borderColorTheme[$borderColorTheme]];
+}, function (_a) {
+    var hasOnClick = _a.hasOnClick;
+    return (hasOnClick ? 'pointer' : 'default');
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && radiusStyle;
+}, function (_a) {
+    var paddingTop = _a.paddingTop;
+    return paddingTop !== 'none' && paddingTopStyle;
+}, function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight !== 'none' && paddingRightStyle;
+}, function (_a) {
+    var paddingBottom = _a.paddingBottom;
+    return paddingBottom !== 'none' && paddingBottomStyle;
+}, function (_a) {
+    var paddingLeft = _a.paddingLeft;
+    return paddingLeft !== 'none' && paddingLeftStyle;
+}, overrideStyle);
+exports.default = ContentSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/desktop/panels/ContentSheet/index.d.ts

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

package/dist/src/desktop/panels/ContentSheet/index.js

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