pds-dev-kit-web-test 0.0.17 → 0.0.19

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/IconButton/IconButton.js

@@ -0,0 +1,157 @@
+"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");
+function IconButton(_a) {
+    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _g = _a.shadow, shadow = _g === void 0 ? 'hidden' : _g, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleMouseDown = function (e) {
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    var iconStateColorObj = {
+        fill: 'ui_cpnt_button_icon_on_primary',
+        line: 'ui_cpnt_button_icon_enabled'
+    };
+    var iconThemeColorLineObj = {
+        line1: 'ui_cpnt_button_icon_error',
+        line2: 'ui_cpnt_button_icon_primary'
+    };
+    var IconColorSelect = function () {
+        if (state === 'disabled') {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (colorTheme !== 'none' && fillType === 'line') {
+            return iconThemeColorLineObj[colorTheme];
+        }
+        if (iconColorKey) {
+            return iconColorKey;
+        }
+        if (fillType === 'fill' && baseColorKey === 'ui_cpnt_button_fill_base_transparent') {
+            return 'ui_cpnt_button_icon_enabled';
+        }
+        return iconStateColorObj[fillType];
+    };
+    return (react_1.default.createElement(S_IconButton, { "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown },
+        react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
+}
+var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
+        ? ''
+        : theme.ui_cpnt_button_fill_base_disabled;
+});
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+}, function (_a) {
+    var theme = _a.theme, baseColorKey = _a.baseColorKey;
+    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
+        ? ''
+        : "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 === 'disabled' && fillDisabled;
+});
+var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_disabled;
+});
+var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme, borderColorKey = _a.borderColorKey;
+    return borderColorKey ? theme[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'line1':
+            return line1ColorTheme;
+        case 'line2':
+            return line2ColorTheme;
+        default:
+            return '';
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + "\n  ;";
+}, function (_a) {
+    var state = _a.state;
+    return state === 'disabled' && lineDisabled;
+});
+var xxlarge = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 96px;\n  width: 96px;\n"], ["\n  height: 96px;\n  width: 96px;\n"])));
+var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n"], ["\n  height: 48px;\n  width: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var line1ColorTheme = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_error;
+});
+var line2ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_primary;
+});
+var iconButtonStyle = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType && { circular: 'border-radius: 50%', rectangle: '' }[shapeType];
+}, function (_a) {
+    var theme = _a.theme, shadow = _a.shadow;
+    return shadow === 'visible' && "box-shadow: " + theme.boxShadow.elevation2;
+}, function (_a) {
+    var fillType = _a.fillType;
+    return fillType &&
+        {
+            fill: fill,
+            line: line
+        }[fillType];
+}, function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        {
+            xxlarge: xxlarge,
+            large: large,
+            medium: medium,
+            small: small,
+            xsmall: xsmall
+        }[baseSize];
+});
+var S_IconButton = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
+exports.default = IconButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/IconButton/index.d.ts

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

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

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/MainButton/MainButton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../common';
+export declare type MainButtonProps = {
+    text?: PDSTextType;
+    shapeType?: 'round' | 'rectangle';
+    fillType?: 'fill' | 'line';
+    styleTheme?: 'primary' | 'secondary';
+    size?: 'large' | 'medium' | 'small' | 'xsmall' | 'rlarge';
+    responsiveMode?: 'none' | 'use';
+    fontWeight?: 'bold' | 'regular';
+    iconMode?: 'none' | 'left' | 'right';
+    iconFillType?: 'fill' | 'line';
+    iconName?: FillIconNameKeys | LineIconNameKeys;
+    colorTheme?: 'none' | 'line1' | 'line2' | 'line3';
+    type?: 'button' | 'submit';
+    state?: 'normal' | 'disabled';
+    isLoading?: boolean;
+    isSubmitting?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function MainButton({ text, shapeType, fillType, styleTheme, size, responsiveMode, fontWeight, iconMode, iconFillType, iconName, colorTheme, type, state, isLoading, isSubmitting, onClick, onMouseDown }: MainButtonProps): JSX.Element;
+export default MainButton;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/MainButton/MainButton.js

@@ -0,0 +1,296 @@
+"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 components_1 = require("../../common/components");
+var styles_1 = require("../../common/styles");
+var hybrid_1 = require("../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+// NOTE : 기획상 아직 사용하지 않는 props
+// textColorKey?: string;
+// baseColorKey?: string;
+// borderColorKey?: string;
+// shadow?: 'hidden' | 'visible';
+function MainButton(_a) {
+    var text = _a.text, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, fillType = _a.fillType, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'primary' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, fontWeight = _a.fontWeight, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, _j = _a.type, type = _j === void 0 ? 'button' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, isLoading = _a.isLoading, isSubmitting = _a.isSubmitting, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleMouseDown = function (e) {
+        if (onMouseDown) {
+            onMouseDown(e);
+        }
+    };
+    var submittingProgressColor = function () {
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return textThemeColorLineObj[colorTheme];
+        }
+        if (fillType === 'fill') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (fillType === 'line') {
+            return 'ui_cpnt_textlabel_sys_primary';
+        }
+        if (styleTheme === 'primary') {
+            return 'ui_cpnt_textlabel_usr_brandonprimary';
+        }
+        if (styleTheme === 'secondary') {
+            return 'ui_cpnt_textlabel_usr_brandprimary';
+        }
+        return 'ui_cpnt_textlabel_usr_brandonprimary';
+    };
+    var textStyle = {
+        rlarge: 'body1Bold',
+        large: 'body1Bold',
+        medium: 'body2Bold',
+        small: 'caption1Bold',
+        xsmall: 'caption1Regular'
+    };
+    var textThemeColorLineObj = {
+        line1: 'ui_cpnt_button_text_error',
+        line2: 'ui_cpnt_button_text_primary',
+        line3: 'ui_cpnt_button_text_darktheme_enabled'
+    };
+    var textColor = function () {
+        if (fillType === 'fill') {
+            return 'usrTextBrandOnPrimary';
+        }
+        if (fillType === 'line') {
+            return 'sysTextPrimary';
+        }
+        if (styleTheme === 'primary') {
+            return 'usrTextBrandOnPrimary';
+        }
+        if (styleTheme === 'secondary') {
+            return 'usrTextBrandPrimary';
+        }
+        return 'usrTextBrandOnPrimary';
+    };
+    var selectTextThemeColor = function () {
+        if (colorTheme === 'line3' && state === 'disabled') {
+            return 'ui_cpnt_button_text_darktheme_disabled';
+        }
+        if (fillType === 'line' && colorTheme !== 'none' && state !== 'disabled') {
+            return textThemeColorLineObj[colorTheme];
+        }
+        return undefined;
+    };
+    var iconFillTypeColorObj = {
+        fill: 'ui_cpnt_button_icon_on_primary',
+        line: 'ui_cpnt_button_icon_enabled'
+    };
+    var iconStyleThemeColorObj = {
+        primary: 'ui_cpnt_button_icon_on_primary',
+        secondary: 'ui_cpnt_button_icon_primary'
+    };
+    var iconColorThemeLineColorObj = {
+        line1: 'ui_cpnt_button_icon_error',
+        line2: 'ui_cpnt_button_icon_primary',
+        line3: 'ui_cpnt_button_icon_darktheme_enabled'
+    };
+    var iconColor = function () {
+        if (state === 'disabled') {
+            if (colorTheme === 'line3') {
+                return 'ui_cpnt_button_icon_darktheme_disabled';
+            }
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (fillType === 'line' && colorTheme !== 'none') {
+            return iconColorThemeLineColorObj[colorTheme];
+        }
+        if (fillType) {
+            return iconFillTypeColorObj[fillType];
+        }
+        if (styleTheme) {
+            return iconStyleThemeColorObj[styleTheme];
+        }
+    };
+    var MainButtonVariation = function () {
+        if (isLoading) {
+            return (react_1.default.createElement(S_LoadingMainButton, { shapeType: shapeType, size: size, responsiveMode: responsiveMode, state: "disabled", disabled: true }));
+        }
+        if (isSubmitting) {
+            return (react_1.default.createElement(S_MainButton, { shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, colorTheme: colorTheme, state: "normal", disabled: true },
+                react_1.default.createElement(components_1.CircularProgress, { colorKey: submittingProgressColor(), size: size === 'rlarge' ? 'large' : size })));
+        }
+        return (react_1.default.createElement(S_MainButton, { "x-pds-name": "MainButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", shapeType: shapeType, fillType: fillType, styleTheme: styleTheme, size: size, responsiveMode: responsiveMode, fontWeight: fontWeight, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: handleClick, onMouseDown: handleMouseDown },
+            size !== 'xsmall' && iconMode === 'left' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType }),
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], singleLineMode: "use", colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor(), colorOverride: selectTextThemeColor(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }),
+            size !== 'xsmall' && iconMode === 'right' && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
+                react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
+    };
+    return MainButtonVariation();
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 14px;';
+}, function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && 'width: 100%';
+});
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 14px;';
+});
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 10px;';
+});
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var shapeType = _a.shapeType;
+    return shapeType === 'round' && 'border-radius: 8px;';
+});
+var fillDisabled = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var fill = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\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 "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 === 'disabled' && fillDisabled;
+});
+var none = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_enabled;
+});
+var line1 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_error;
+});
+var line2 = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: solid 1px ", ";\n"], ["\n  border: solid 1px ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_primary;
+});
+var line3 = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n"], ["\n  border: solid 1px ", ";\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_border_darktheme_enabled;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_darktheme_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_darktheme_pressed + ";";
+});
+var lineDisabled = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 1px\n    ", ";\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'line3'
+        ? theme.ui_cpnt_button_line_base_darktheme_default
+        : theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'line3'
+        ? theme.ui_cpnt_button_line_border_darktheme_disabled
+        : theme.ui_cpnt_button_line_border_disabled;
+});
+var line = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n  ", "\n"], ["\n  background-color: ", ";\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_default;
+}, function (_a) {
+    var theme = _a.theme;
+    return "background-color: " + theme.ui_cpnt_button_line_base_pressed + ";";
+}, function (_a) {
+    var colorTheme = _a.colorTheme;
+    return colorTheme && { none: none, line1: line1, line2: line2, line3: line3 }[colorTheme];
+}, function (_a) {
+    var state = _a.state;
+    return state === 'disabled' && lineDisabled;
+});
+var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_base_disabled;
+});
+var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\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 "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 === 'disabled' && primaryDisabled;
+});
+var secondaryDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+});
+var secondary = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_line_base_hover;
+}, 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 === 'disabled' && secondaryDisabled;
+});
+var S_MainButton = styled_components_1.default.button(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n  ", "\n  ", ";\n\n  & > div {\n    ", ";\n  }\n"])), function (_a) {
+    var styleTheme = _a.styleTheme;
+    return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
+}, function (_a) {
+    var fillType = _a.fillType;
+    return fillType && { fill: fill, line: line }[fillType];
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small, xsmall: xsmall, rlarge: large }[size];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+}, function (_a) {
+    var theme = _a.theme, fontWeight = _a.fontWeight;
+    return fontWeight &&
+        {
+            bold: "font-weight: " + theme.fontWeight.bold,
+            regular: "font-weight: " + theme.fontWeight.normal
+        }[fontWeight];
+});
+var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+exports.default = MainButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/MainButton/index.d.ts

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

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

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/TextButton/TextButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PDSTextType } from '../../common';
+export declare type TextButtonProps = {
+    text?: PDSTextType;
+    size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    responsiveMode?: 'none' | 'use';
+    fontWeight?: 'bold' | 'regular';
+    type?: 'submit' | 'reset' | 'button';
+    state?: 'normal' | 'disabled';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'white';
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
+export default TextButton;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/TextButton/TextButton.js

@@ -0,0 +1,111 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 TextLabel_1 = require("../TextLabel");
+var textStyle = {
+    rlarge: 'body1Bold',
+    large: 'body1Bold',
+    medium: 'body2Bold',
+    small: 'caption1Bold',
+    xsmall: 'caption1Regular'
+};
+var textColor = {
+    none: 'usrTextBrandPrimary',
+    red: 'sysTextError',
+    grey_01: 'sysTextPrimary',
+    white: 'sysTextWhite'
+};
+function TextButton(_a) {
+    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "colorTheme", "onClick"]);
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    return (react_1.default.createElement(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', colorTheme: colorTheme }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? 'sysTextTertiary' : textColor[colorTheme], singleLineMode: "use" })));
+}
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
+    var size = _a.size;
+    return size === 'rlarge' && 'width: 100%';
+});
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  border-radius: 8px;\n  height: 24px;\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
+var S_Button = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding-left: 8px;\n  padding-right: 8px;\n\n  &:active:enabled {\n    background-color: ", ";\n  }\n\n  ", ";\n\n  & > div {\n    ", ";\n  }\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    return colorTheme === 'white'
+        ? theme.ui_cpnt_button_white_base_pressed
+        : theme.ui_cpnt_button_line_base_pressed;
+}, function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            rlarge: large,
+            large: large,
+            medium: medium,
+            small: small,
+            xsmall: xsmall
+        }[size];
+}, function (_a) {
+    var theme = _a.theme, fontWeight = _a.fontWeight;
+    return fontWeight &&
+        {
+            bold: "font-weight: " + theme.fontWeight.bold,
+            regular: "font-weight: " + theme.fontWeight.normal
+        }[fontWeight];
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode;
+    return responsiveMode === 'use' && 'width: 100%';
+});
+exports.default = TextButton;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/TextButton/index.d.ts

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