pds-dev-kit-web 1.4.68 → 1.5.1

package/dist/src/desktop/panels/SectionSheet/SectionSheet.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 SectionSheetProps = {
+    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 SectionSheet({ width, height, backgroundColorTheme, overrideBackgroundColorKey, borderMode, borderWidth, borderColorTheme, overrideBorderColorKey, shapeType, radius, paddingTop, paddingRight, paddingBottom, paddingLeft, overrideCSS, children, onClick }: SectionSheetProps): JSX.Element;
+export default SectionSheet;

package/dist/src/desktop/panels/SectionSheet/SectionSheet.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 SectionSheet(_a) {
+    var width = _a.width, height = _a.height, _b = _a.backgroundColorTheme, backgroundColorTheme = _b === void 0 ? 'transparent' : _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_SectionSheet, { "$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 advancedCSS = (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_SectionSheet = 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;
+}, advancedCSS);
+exports.default = SectionSheet;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

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

package/dist/src/desktop/panels/SectionSheet/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.SectionSheet = void 0;
+var SectionSheet_1 = require("./SectionSheet");
+Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return __importDefault(SectionSheet_1).default; } });

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

@@ -1,3 +1,6 @@
+import { AnnotationSheet } from './AnnotationSheet';
+import { ContentSheet } from './ContentSheet';
 import { DesktopBasicModal } from './DesktopBasicModal';
 import { DesktopHeadlessModal } from './DesktopHeadlessModal';
-export { DesktopBasicModal, DesktopHeadlessModal };
+import { SectionSheet } from './SectionSheet';
+export { AnnotationSheet, ContentSheet, DesktopBasicModal, DesktopHeadlessModal, SectionSheet };

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

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopHeadlessModal = exports.DesktopBasicModal = void 0;
+exports.SectionSheet = exports.DesktopHeadlessModal = exports.DesktopBasicModal = exports.ContentSheet = exports.AnnotationSheet = void 0;
+var AnnotationSheet_1 = require("./AnnotationSheet");
+Object.defineProperty(exports, "AnnotationSheet", { enumerable: true, get: function () { return AnnotationSheet_1.AnnotationSheet; } });
+var ContentSheet_1 = require("./ContentSheet");
+Object.defineProperty(exports, "ContentSheet", { enumerable: true, get: function () { return ContentSheet_1.ContentSheet; } });
 var DesktopBasicModal_1 = require("./DesktopBasicModal");
 Object.defineProperty(exports, "DesktopBasicModal", { enumerable: true, get: function () { return DesktopBasicModal_1.DesktopBasicModal; } });
 var DesktopHeadlessModal_1 = require("./DesktopHeadlessModal");
 Object.defineProperty(exports, "DesktopHeadlessModal", { enumerable: true, get: function () { return DesktopHeadlessModal_1.DesktopHeadlessModal; } });
+var SectionSheet_1 = require("./SectionSheet");
+Object.defineProperty(exports, "SectionSheet", { enumerable: true, get: function () { return SectionSheet_1.SectionSheet; } });

package/dist/src/mobile/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, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
+export default function Chip({ displayType, text, filterIconMode, iconFillType, iconName, overrideTextColorKey, overrideBackgroundColorKey, value, id, onClickChip, onClickXMarkIcon, activeChipId, chipId }: ChipProps): JSX.Element;
 export {};

package/dist/src/mobile/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, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
+    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, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon, activeChipId = _a.activeChipId, chipId = _a.chipId;
     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" })));
@@ -102,8 +102,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/mobile/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+export declare type FloatingActionButtonProps = {
+    text?: PDSTextType;
+    displayType?: 'icon_only' | 'text_only' | 'icon_text';
+    size?: 'xlarge' | 'large';
+    fontWeight?: 'bold' | 'regular';
+    iconFillType?: 'fill' | 'line';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    colorTheme?: 'none' | 'theme1' | 'theme2' | 'theme3';
+    state?: 'normal' | 'disable';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function FloatingActionButton({ text, displayType, size, fontWeight, iconFillType, iconName, colorTheme, state, onClick, onMouseDown }: FloatingActionButtonProps): JSX.Element;
+export default FloatingActionButton;

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

@@ -0,0 +1,89 @@
+"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 hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function FloatingActionButton(_a) {
+    var text = _a.text, _b = _a.displayType, displayType = _b === void 0 ? 'icon_text' : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.fontWeight, fontWeight = _d === void 0 ? 'bold' : _d, _e = _a.iconFillType, iconFillType = _e === void 0 ? 'line' : _e, iconName = _a.iconName, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, _g = _a.state, state = _g === void 0 ? 'normal' : _g, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleMouseDown = function (e) {
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    var iconColor = function () {
+        if (state === 'disable') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        return 'ui_cpnt_button_icon_on_primary';
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        displayType === 'icon_only' && (react_1.default.createElement(S_ButtonIconOnly, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown },
+            react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' ? 20 : 24, colorKey: iconColor(), fillType: iconFillType }))),
+        displayType !== 'icon_only' && (react_1.default.createElement(S_Button, { size: size, colorTheme: colorTheme, state: state, disabled: state === 'disable', onClick: handleClick, onMouseDown: handleMouseDown },
+            displayType === 'text_only' && (react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined })),
+            displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: 20, colorKey: iconColor(), fillType: iconFillType }),
+                react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
+                react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body1Regular' : 'body1Bold', singleLineMode: "use", colorTheme: state === 'disable' ? 'sysTextTertiary' : 'usrTextBrandOnPrimary', colorOverride: state === 'disable' ? 'ui_cpnt_button_icon_darktheme_disabled' : undefined })))))));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n  border-radius: 24px;\n"], ["\n  height: 48px;\n  width: 48px;\n  border-radius: 24px;\n"])));
+var xlarge = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 64px;\n  width: 64px;\n  border-radius: 32px;\n"], ["\n  height: 64px;\n  width: 64px;\n  border-radius: 32px;\n"])));
+var disabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  background-color: ", ";\n  border: none;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  z-index: 101;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.boxShadow.elevation3;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
+}, function (_a) {
+    var state = _a.state;
+    return state === 'disable' && disabled;
+});
+var S_ButtonIconOnly = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: none;\n  ", ";\n  ", ";\n"], ["\n  padding: none;\n  ", ";\n  ", ";\n"])), floatingActionButtonStyle, function (_a) {
+    var size = _a.size;
+    return size && { large: large, xlarge: xlarge }[size];
+});
+var S_Button = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding: ", ";\n  border-radius: 14px;\n  ", ";\n"], ["\n  height: 48px;\n  padding: ", ";\n  border-radius: 14px;\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return "0 " + theme.spacing.spacingE;
+}, floatingActionButtonStyle);
+exports.default = FloatingActionButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

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

package/dist/src/mobile/components/FloatingActionButton/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.FloatingActionButton = void 0;
+var FloatingActionButton_1 = require("./FloatingActionButton");
+Object.defineProperty(exports, "FloatingActionButton", { enumerable: true, get: function () { return __importDefault(FloatingActionButton_1).default; } });

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

@@ -13,6 +13,7 @@ import { Chip } from './Chip';
 import { ContextMenu } from './ContextMenu';
 import { ContextMenuItem } from './ContextMenuItem';
 import { Dropdown } from './Dropdown';
+import { FloatingActionButton } from './FloatingActionButton';
 import { HorizontalFormGroup } from './HorizontalFormGroup';
 import { IconButton } from './IconButton';
 import { ImageSlide } from './ImageSlide';
@@ -30,4 +31,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, HorizontalFormGroup, IconButton, ImageSlide, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };
+export { BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, Dropdown, FloatingActionButton, HorizontalFormGroup, IconButton, ImageSlide, MainButton, MobileAlertDialog, MobileHeaderBar, MobileTabBar, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton };

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

@@ -1,6 +1,6 @@
 "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.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = 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.Select = exports.ReactionButton = exports.Radio = exports.MobileTabBar = exports.MobileHeaderBar = exports.MobileAlertDialog = exports.MainButton = 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;
 var BasicChatListItem_1 = require("./BasicChatListItem");
 Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
 var BasicFormGroup_1 = require("./BasicFormGroup");
@@ -31,6 +31,8 @@ var ContextMenuItem_1 = require("./ContextMenuItem");
 Object.defineProperty(exports, "ContextMenuItem", { enumerable: true, get: function () { return ContextMenuItem_1.ContextMenuItem; } });
 var Dropdown_1 = require("./Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
+var FloatingActionButton_1 = require("./FloatingActionButton");
+Object.defineProperty(exports, "FloatingActionButton", { enumerable: true, get: function () { return FloatingActionButton_1.FloatingActionButton; } });
 var HorizontalFormGroup_1 = require("./HorizontalFormGroup");
 Object.defineProperty(exports, "HorizontalFormGroup", { enumerable: true, get: function () { return HorizontalFormGroup_1.HorizontalFormGroup; } });
 var IconButton_1 = require("./IconButton");

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

@@ -13,7 +13,7 @@ import { LayoutMS } from './layout/LayoutMS';
 import { NavigationContainer as MSNavigationContainer } from './layout/LayoutMS/Containers';
 import { ContainersBox as MSContainersBox } from './layout/LayoutMS/ContainersBox';
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-import { 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, HorizontalFormGroup as M_HorizontalFormGroup, IconButton as M_IconButton, ImageSlide as M_ImageSlide, 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 { 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_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
-import { MobileBasicModal as M_MobileBasicModal } from './panels';
-export { M_MobileBasicModal };
+import { 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, 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 { 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 };
+import { AnnotationSheet as M_AnnotationSheet, ContentSheet as M_ContentSheet, MobileBasicModal as M_MobileBasicModal, SectionSheet as M_SectionSheet } from './panels';
+export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };

package/dist/src/mobile/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.M_MobileBasicModal = 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_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_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 = 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;
 // layoutMF
 var LayoutMF_1 = require("./layout/LayoutMF");
 Object.defineProperty(exports, "LayoutMF", { enumerable: true, get: function () { return LayoutMF_1.LayoutMF; } });
@@ -47,6 +47,7 @@ Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return components_1.ContextMenu; } });
 Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return components_1.ContextMenuItem; } });
 Object.defineProperty(exports, "M_Dropdown", { enumerable: true, get: function () { return components_1.Dropdown; } });
+Object.defineProperty(exports, "M_FloatingActionButton", { enumerable: true, get: function () { return components_1.FloatingActionButton; } });
 Object.defineProperty(exports, "M_HorizontalFormGroup", { enumerable: true, get: function () { return components_1.HorizontalFormGroup; } });
 Object.defineProperty(exports, "M_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "M_ImageSlide", { enumerable: true, get: function () { return components_1.ImageSlide; } });
@@ -66,4 +67,7 @@ Object.defineProperty(exports, "M_UploadMainButton", { enumerable: true, get: fu
 Object.defineProperty(exports, "M_UploadTextButton", { enumerable: true, get: function () { return components_1.UploadTextButton; } });
 // panels
 var panels_1 = require("./panels");
+Object.defineProperty(exports, "M_AnnotationSheet", { enumerable: true, get: function () { return panels_1.AnnotationSheet; } });
+Object.defineProperty(exports, "M_ContentSheet", { enumerable: true, get: function () { return panels_1.ContentSheet; } });
 Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return panels_1.MobileBasicModal; } });
+Object.defineProperty(exports, "M_SectionSheet", { enumerable: true, get: function () { return panels_1.SectionSheet; } });

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

@@ -0,0 +1,56 @@
+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;
+};
+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;