pds-dev-kit-web 0.3.49 → 0.4.2

package/dist/src/common/services/i18n/resources/ko.json

@@ -1930,7 +1930,7 @@
         "str_err_978": "채널을 추가로 생성 하시려면 publ 운영팀에 문의해주세요. ({{errCode}})",
         "str_err_980": "표시 제목은 최소 2자, 최대 8자까지 입력할 수 있습니다.",
         "str_err_982": "표시 제목은 특수문자를 제외하고 입력해 주세요.",
-        "str_983": "이 pApp을 비활성화 하겠습니까?\npApp을 비활성화하면 구독자가 pApp의 기능을 사용할 수 없습니다.\n기본 pApp으로 설정된 pApp은 비활성화할 수 없습니다.",
+        "str_983": "이 pApp을 비활성화 하겠습니까?\npApp을 비활성화하면 구독자가 pApp의 기능을 사용할 수 없습니다.",
         "str_deactivate_papp": "pApp 비활성화",
         "str_err_984": "댓글은 최소 2자, 최대 800자까지 입력할 수 있습니다.",
         "str_err_985": "셀러에 의해 비공개된 게시글입니다. 다른 게시글을 선택해 주세요.({{errCode}})",
@@ -2676,8 +2676,8 @@
         "str_1545": "날짜",
         "str_1546": "시간",
         "str_1547": "날짜 선택",
-        "str_1548": "시",
-        "str_1549": "분",
+        "str_1548": "시 (hh)",
+        "str_1549": "분 (mm)",
         "str_1550": "닫기",
         "str_1551": "송출 주소",
         "str_1552": "스트림 키",
@@ -2743,8 +2743,8 @@
         "str_socail_account_unlinkage": "연동 해제",
         "str_1573": "({{email}})으로 가입한 회원정보가 있습니다. 연동하시겠습니까?",
         "str_err_1574": "현재 이 계정은 다른 디바이스에서 동시에 사용 중이므로 라이브가 강제로 종료될 예정입니다.\n계속 시청하시려면 동시 접속이 되지 않도록 해주세요.",
-        "str_err_1575": "현재 시간에서 15분 이후 시점으로 설정해주세요.",
-        "str_err_1576": "현재 시간에서 15분 이후 시점으로 설정해주세요.",
+        "str_err_1575": "현재 시간에서 5분 이후 시점으로 설정해주세요.",
+        "str_err_1576": "현재 시간에서 5분 이후 시점으로 설정해주세요.",
         "str_papp_live_status_end": "종료",
         "str_papp_live_status_canceled": "취소",
         "str_1577": "$t(str_refund) 신청",
@@ -2797,12 +2797,12 @@
         "str_photobook_post": "게시글",
         "str_papp_photobook_like": "좋아요",
         "str_papp_photobook_dislike": "싫어요",
-        "str_pg_title_operator_manage": "운영자 관리",
-        "str_pg_title_operator_list": "운영자 목록",
+        "str_pg_title_operator_manage": "$t(str_manager) 계정 관리",
+        "str_pg_title_operator_list": "$t(str_manager) 계정 목록",
         "str_1601": "유형",
-        "str_1602": "콘텐츠 운영자",
-        "str_1603": "채널 운영자",
-        "str_1604": "아직 생성된 운영자 계정이 없습니다.",
+        "str_1602": "콘텐츠 $t(str_manager)",
+        "str_1603": "채널 $t(str_manager)",
+        "str_1604": "아직 생성된 $t(str_manager) 계정이 없습니다.",
         "str_pg_title_papp_photobook_create_post": "게시글 작성",
         "str_1605": "제목을 입력해주세요.",
         "str_err_1606": "제목은 최소 1자, 최대 50자까지 입력할 수 있습니다.",
@@ -2810,22 +2810,22 @@
         "str_1608": "이미지 첨부",
         "str_1609": "이미지는 최대 10개 업로드 할 수 있고, 이미지 파일 당 최대 10MB까지 가능합니다.",
         "str_pg_title_photobook_post_settings": "설정",
-        "str_1610": "운영자 계정 삭제",
-        "str_1611": "정말 운영자 계정을 삭제하시겠습니까?\n삭제된 계정은 복구될 수 없습니다.",
+        "str_1610": "$t(str_manager) 계정 삭제",
+        "str_1611": "정말 $t(str_manager) 계정을 삭제하시겠습니까?\n삭제된 계정은 복구될 수 없습니다.",
         "str_pg_title_photobook_post_detail_info": "세부 정보",
         "str_pg_title_photobook_comment_manage": "$t(str_comment) 관리",
         "str_pg_title_papp_photobook_post_update": "게시글 수정",
         "str_pg_title_papp_photobook_post_detail": "게시글 상세",
-        "str_create_operator_account": "운영자 계정 생성",
+        "str_create_operator_account": "$t(str_manager) 계정 생성",
         "str_create_operator_account_step_1": "시작하기",
-        "str_create_operator_account_step_2": "운영자 유형 선택",
+        "str_create_operator_account_step_2": "$t(str_manager) 유형 선택",
         "str_create_operator_account_step_3": "기본 정보 입력",
         "str_create_operator_account_step_4": "관리 권한 부여",
-        "str_1612": "운영자 유형을 선택해 주세요.",
-        "str_operator_type": "운영자 유형",
-        "str_1613": "운영자 유형에 따라 관리 권한 범위가 달라집니다.\n역할에 알맞게 운영자 유형을 선택하세요. 한 번 설정한 운영자 유형은 이후 변경할 수 없습니다.",
-        "str_1614": "셀러가 허용한 범위에 한하여 채널의 전반적인 관리를 할 수 있는 운영자입니다.",
-        "str_1615": "채널의 pApp 콘텐츠와 관련된 영역에서 관리 권한을 행사할 수 있는 운영자입니다. 채널 운영자에 비해 제한적인 권한을 갖습니다.",
+        "str_1612": "$t(str_manager) 유형을 선택해 주세요.",
+        "str_operator_type": "$t(str_manager) 유형",
+        "str_1613": "$t(str_manager) 유형에 따라 관리 권한 범위가 달라집니다.\n역할에 알맞게 $t(str_manager) 유형을 선택하세요. 한 번 설정한 $t(str_manager) 유형은 이후 변경할 수 없습니다.",
+        "str_1614": "셀러가 허용한 범위에 한하여 채널의 전반적인 관리를 할 수 있습니다.",
+        "str_1615": "채널의 pApp 콘텐츠와 관련된 영역에서 관리 권한을 행사할 수 있습니다. 채널 $t(str_manager)에 비해 제한적인 권한을 갖습니다.",
         "str_outlink_papp_title_outlink": "아웃링크",
         "str_outlink_papp_modification_record": "수정 기록",
         "str_outlink_papp_setting": "설정",
@@ -2860,7 +2860,7 @@
         "str_switched_counts": "링크 전환수",
         "str_link_url": "아웃링크 주소",
         "str_err_1637": "이미 사용 중인 아이디입니다. 새로운 아이디를 입력해 주세요. ({{errCode}})",
-        "str_create_operator_account_step_5": "운영자 계정 생성 완료!",
+        "str_create_operator_account_step_5": "$t(str_manager) 계정 생성 완료!",
         "str_1638": "관리 권한을 부여해 주세요.",
         "str_1639": "새 $t(str_papp_vods_series) 추가",
         "str_1640": "$t(str_papp_vods_series) 추가",
@@ -2877,6 +2877,30 @@
         "str_pg_title_promotion_post_history": "기록",
         "str_papp_promotion_post_setting": "아웃링크 설정",
         "str_1649": "아직 추가된 에피소드가 없습니다.",
-        "str_1650": "아직 추가된 시리즈가 없습니다."
+        "str_1650": "아직 추가된 시리즈가 없습니다.",
+        "str_err_1651": "00에서 23 사이의 시간을 입력해주세요.",
+        "str_err_1652": "00에서 59 사이의 시간을 입력해주세요.",
+        "str_1653": "USD$ {{amount}} 결제하기",
+        "str_fm_price_usd": "USD$ {{amount}}",
+        "str_1654": "월 USD$ {{price}}",
+        "str_manager": "관리자",
+        "str_1655": "채널 관리 권한",
+        "str_1656": "$t(str_pg_title_channel_setting) 관리",
+        "str_1657": "채널 정보를 설정할 수 있는 권한입니다. 이 권한을 부여하면 채널 $t(str_manager)는 채널의 제목, 소개 정보, 커버 이미지, 아이콘 이미지, 데스크탑용 로고 이미지를 조회하고 수정할 수 있습니다.",
+        "str_1658": "$t(str_event_resource_general_ch_profile) 관리",
+        "str_1659": "$t(str_event_resource_general_ch_profile) 관리 권한입니다. 이 권한을 부여하면 채널 $t(str_manager)가 셀러의 $t(str_event_resource_general_ch_profile) 이미지와 닉네임을 조회하고 수정할 수 있습니다.",
+        "str_1660": "$t(str_event_resource_general_ch_link) 관리",
+        "str_1661": "$t(str_event_resource_general_ch_link) 관리 권한입니다. 이 권한을 부여하면 채널 $t(str_manager)가 $t(str_channel_link_default)를 조회하고 수정할 수 있으며, $t(str_channel_link_custom)를 생성 및 조회, 수정, 삭제할 수 있습니다.",
+        "str_1662": "$t(str_subs_product) 관리",
+        "str_1663": "$t(str_subs_product) 관리 권한입니다. 이 권한을 부여하면 채널 $t(str_manager)가 $t(str_subs_product)을 생성 및 조회, 수정할 수 있습니다.",
+        "str_1664": "$t(str_subscriber) 관리",
+        "str_1665": "$t(str_subscriber) 관리 권한입니다. 이 권한을 부여하면 채널 $t(str_manager)가 채널에 구독 중인 $t(str_subscriber)를 조회하고 추방할 수 있습니다.",
+        "str_1666": "pApp 설정 관리",
+        "str_1667": "pApp 설정 관리 권한입니다. 이 권한을 부여하면 채널 $t(str_manager)가 pApp의 표시용 제목과 환경설정 정책을 조회하고, 수정할 수 있습니다. 또한 pApp을 활성화 및 비활성화로 설정할 수 있습니다.",
+        "str_1668": "콘텐츠 $t(str_manager) 계정 관리",
+        "str_1669": "이 권한을 부여하면 채널 $t(str_manager)는 콘텐츠 $t(str_manager) 유형의 계정을 생성할 수 있습니다. 콘텐츠 $t(str_manager) 목록을 조회하고 수정 및 삭제할 수 있으나 같은 유형인 채널 $t(str_manager) 계정을 생성할 수는 없습니다.",
+        "str_1670": "pApp 콘텐츠 관리 권한",
+        "str_1671": "채널 $t(str_manager)는 채널에 설치된 모든 pApp의 콘텐츠를 관리할 수 있습니다. 모든 pApp 콘텐츠를 생성하고 조회, 수정 및 삭제가 가능합니다.",
+        "str_1672": "pApp 콘텐츠 관리 권한을 부여하면 pApp 콘텐츠를 생성 및 조회, 수정, 삭제할 수 있습니다.\n단, 콘텐츠 관리자는 pApp 표시 제목을 수정하거나 활성화/비활성화로 변경할 수는 없습니다."
     }
 }

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

@@ -117,5 +117,6 @@
     "sys_border_line_darktheme_03": "darkred500",
     "sys_border_line_darktheme_04": "darkblue500",
     "usr_widget_brand_primary_darktheme_01": "darkblue500",
-    "usr_text_brand_primary_darktheme_01": "darkblue500"
+    "usr_text_brand_primary_darktheme_01": "darkblue500",
+    "sys_component_base_black_opacity50": "black/opacity50"
 }

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

@@ -117,5 +117,6 @@
     "sys_border_line_darktheme_03": "darkred500",
     "sys_border_line_darktheme_04": "darkblue500",
     "usr_widget_brand_primary_darktheme_01": "darkblue500",
-    "usr_text_brand_primary_darktheme_01": "darkblue500"
+    "usr_text_brand_primary_darktheme_01": "darkblue500",
+    "sys_component_base_black_opacity50": "black/opacity50"
 }

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

@@ -50,5 +50,6 @@
     "darkskyblue500": "#65A4FF",
     "navy100": "#6E77A9",
     "darknavy100": "#7A82B2",
-    "opacity80": "CC"
+    "opacity80": "CC",
+    "opacity50": "80"
 }

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

@@ -1,4 +1,59 @@
 declare const colorSet: {
+    readonly SemanticColor: {
+        blue500: string;
+        blue700: string;
+        blue300: string;
+        green700: string;
+        green500: string;
+        green300: string;
+        red500: string;
+        grey900: string;
+        grey500: string;
+        grey400: string;
+        grey100: string;
+        grey50: string;
+        white: string;
+        black: string;
+        darkblue500: string;
+        grey950: string;
+        darkgrey900: string;
+        darkgrey500: string;
+        darkgrey400: string;
+        darkgrey100: string;
+        darkgrey50: string;
+        darkred500: string;
+        darkgreen700: string;
+        orange500: string;
+        darkorange500: string;
+        opacity00: string;
+        opacity20: string;
+        opacity30: string;
+        opacity65: string;
+        darkgreen500: string;
+        grey70: string;
+        navy500: string;
+        lightgreen500: string;
+        pink500: string;
+        darkgrey70: string;
+        darknavy500: string;
+        darkpink500: string;
+        darklightgreen500: string;
+        opacity10: string;
+        grey600: string;
+        darkgrey600: string;
+        skyblue500: string;
+        skyblue300: string;
+        pink300: string;
+        lightpink500: string;
+        darkblue300: string;
+        darkblue700: string;
+        darkgreen300: string;
+        darkskyblue500: string;
+        navy100: string;
+        darknavy100: string;
+        opacity80: string;
+        opacity50: string;
+    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -119,60 +174,7 @@ declare const colorSet: {
         sys_border_line_darktheme_04: string;
         usr_widget_brand_primary_darktheme_01: string;
         usr_text_brand_primary_darktheme_01: string;
-    };
-    readonly SemanticColor: {
-        blue500: string;
-        blue700: string;
-        blue300: string;
-        green700: string;
-        green500: string;
-        green300: string;
-        red500: string;
-        grey900: string;
-        grey500: string;
-        grey400: string;
-        grey100: string;
-        grey50: string;
-        white: string;
-        black: string;
-        darkblue500: string;
-        grey950: string;
-        darkgrey900: string;
-        darkgrey500: string;
-        darkgrey400: string;
-        darkgrey100: string;
-        darkgrey50: string;
-        darkred500: string;
-        darkgreen700: string;
-        orange500: string;
-        darkorange500: string;
-        opacity00: string;
-        opacity20: string;
-        opacity30: string;
-        opacity65: string;
-        darkgreen500: string;
-        grey70: string;
-        navy500: string;
-        lightgreen500: string;
-        pink500: string;
-        darkgrey70: string;
-        darknavy500: string;
-        darkpink500: string;
-        darklightgreen500: string;
-        opacity10: string;
-        grey600: string;
-        darkgrey600: string;
-        skyblue500: string;
-        skyblue300: string;
-        pink300: string;
-        lightpink500: string;
-        darkblue300: string;
-        darkblue700: string;
-        darkgreen300: string;
-        darkskyblue500: string;
-        navy100: string;
-        darknavy100: string;
-        opacity80: string;
+        sys_component_base_black_opacity50: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -294,6 +296,7 @@ declare const colorSet: {
         sys_border_line_darktheme_04: string;
         usr_widget_brand_primary_darktheme_01: string;
         usr_text_brand_primary_darktheme_01: string;
+        sys_component_base_black_opacity50: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;

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

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

package/dist/src/common/styles/ui-colors.d.ts

@@ -1,2 +1,4 @@
 import { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
+export declare const setTone: (tone: 'dark' | 'light') => void;
+export declare const getTone: () => "dark" | "light";

package/dist/src/common/styles/ui-colors.js

@@ -3,36 +3,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uiColors = void 0;
+exports.getTone = exports.setTone = exports.uiColors = void 0;
 var colorSet_1 = __importDefault(require("./colorSet"));
 function buildCascadedColors(lowLevel, highLevel, override) {
     if (override === void 0) { override = {}; }
     return Object.keys(highLevel).reduce(function (acc, key) {
+        console.log('highLevel', highLevel);
         var keyInLowLevelColors = highLevel[key];
+        console.log('keyInLowLevelColors', keyInLowLevelColors);
         var colorValue;
         if (keyInLowLevelColors.indexOf('/') !== -1) {
             colorValue = override[key]
                 ? override[key]
                 : lowLevel[keyInLowLevelColors.split('/')[0]] + lowLevel[keyInLowLevelColors.split('/')[1]];
+            // console.log('colorValue1', colorValue);
         }
         else {
             colorValue = override[key] ? override[key] : lowLevel[keyInLowLevelColors];
+            console.log('colorValue2', colorValue);
         }
         acc[key] = colorValue;
+        console.log('acc : ', acc);
         return acc;
     }, {});
 }
+var colorSetting = {
+    tone: 'dark',
+    customPalette: {}
+};
 // fetch-palette-phase
 // 서버로부터 해당 채널이 라이트 톤을 사용하는지, 다크 톤을 사용하는지 가져오기
 // 서버로부터 해당 채널에서 커스텀으로 설정한 팔레트 가져오기
 // from server (원래는 비동기)
 var channelSettings = {
-    tone: 'light',
+    tone: 'dark',
     customPalette: {
         usr_good_job: '#999999'
     }
 };
-var phaseTwoJSON = channelSettings.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
+var phaseTwoJSON = colorSetting.tone === 'light' ? colorSet_1.default.PaletteColor_light : colorSet_1.default.PaletteColor_Dark;
 // ui-color-build-phase
-var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, channelSettings.customPalette);
+var paletteColors = buildCascadedColors(colorSet_1.default.SemanticColor, phaseTwoJSON, colorSetting.customPalette);
 exports.uiColors = buildCascadedColors(paletteColors, colorSet_1.default.UIColor);
+var setTone = function (tone) {
+    colorSetting.tone = tone; // light
+};
+exports.setTone = setTone;
+var getTone = function () {
+    console.log('colorSetting', colorSetting);
+    return colorSetting.tone;
+};
+exports.getTone = getTone;

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

@@ -4,12 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
+var ui_colors_1 = require("../../../common/styles/ui-colors");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Hero(_a) {
     var heroText = _a.heroText, leadText = _a.leadText, _b = _a.leadTextColorTheme, leadTextColorTheme = _b === void 0 ? 'normal' : _b;
+    (0, ui_colors_1.getTone)();
+    (0, ui_colors_1.setTone)('light');
+    (0, ui_colors_1.getTone)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_h" }),
+        (0, ui_colors_1.getTone)() === 'dark' ? react_1.default.createElement("div", null, "dark") : react_1.default.createElement("div", null, "light"),
         react_1.default.createElement(TextLabel_1.TextLabel, { styleTheme: "displayBold", colorTheme: "sysTextPrimary", text: heroText }),
         leadText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_f" }),

package/dist/src/{hybrid → desktop}/components/IconButton/IconButton.d.ts

@@ -11,7 +11,7 @@ export declare type IconButtonProps = {
     baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
     baseColorKey?: UiColors;
     borderColorKey?: UiColors;
-    iconSize?: 12 | 16 | 20 | 24 | 72;
+    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
     iconFillType?: 'fill' | 'line';
     iconName: FillIconNameKeys | LineIconNameKeys;
     iconColorKey?: UiColors;

package/dist/src/{hybrid → desktop}/components/IconButton/IconButton.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ui_colors_1 = require("../../../common/styles/ui-colors");
-var Icon_1 = __importDefault(require("../Icon/Icon"));
+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, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
     var iconStateColorObj = {
@@ -53,7 +53,8 @@ function IconButton(_a) {
         return iconStateColorObj[fillType];
     };
     return (react_1.default.createElement(S_IconButton, { fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', onClick: onClick, onMouseDown: onMouseDown },
-        react_1.default.createElement(Icon_1.default, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType })));
+        (0, ui_colors_1.getTone)() === 'dark' ? react_1.default.createElement("div", null, "dark") : react_1.default.createElement("div", null, "light"),
+        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;

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

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var ui_colors_1 = require("../../../common/styles/ui-colors");
 var TextLabel_1 = require("../TextLabel");
 function StatusBlock(_a) {
     var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'basic' : _c, _d = _a.width, width = _d === void 0 ? 'responsive' : _d;
@@ -36,6 +37,7 @@ function StatusBlock(_a) {
         medium: 'body1Bold',
         small: 'body2Bold'
     };
+    (0, ui_colors_1.setTone)('dark');
     return (react_1.default.createElement(S_StatusBlock, { size: size, state: state, "$width": width },
         react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite" })));
 }

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

@@ -1,4 +1,5 @@
 import { Hero } from './Hero';
+import { IconButton } from './IconButton';
 import { StatusBlock } from './StatusBlock';
 import { TextLabel } from './TextLabel';
-export { Hero, StatusBlock, TextLabel };
+export { Hero, IconButton, StatusBlock, TextLabel };

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLabel = exports.StatusBlock = exports.Hero = void 0;
+exports.TextLabel = exports.StatusBlock = exports.IconButton = exports.Hero = void 0;
 var Hero_1 = require("./Hero");
 Object.defineProperty(exports, "Hero", { enumerable: true, get: function () { return Hero_1.Hero; } });
+var IconButton_1 = require("./IconButton");
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextLabel_1 = require("./TextLabel");

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

@@ -9,5 +9,5 @@ import { LayoutWT } from './layout/LayoutWT';
 import { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 import { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-import { Hero as D_Hero, StatusBlock as D_StatusBlock, TextLabel as D_TextLabel } from './components';
-export { D_Hero, D_StatusBlock, D_TextLabel };
+import { Hero as D_Hero, IconButton as D_IconButton, StatusBlock as D_StatusBlock, TextLabel as D_TextLabel } from './components';
+export { D_Hero, D_IconButton, D_StatusBlock, D_TextLabel };

package/dist/src/desktop/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_TextLabel = exports.D_StatusBlock = exports.D_Hero = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_TextLabel = exports.D_StatusBlock = exports.D_IconButton = exports.D_Hero = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -25,5 +25,6 @@ Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: funct
 // components
 var components_1 = require("./components");
 Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () { return components_1.Hero; } });
+Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "D_TextLabel", { enumerable: true, get: function () { return components_1.TextLabel; } });

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

@@ -1,6 +1,5 @@
 import { Divider } from './Divider';
 import { Icon } from './Icon';
-import { IconButton } from './IconButton';
 import { ImageView } from './ImageView';
 import { Spacing } from './Spacing';
-export { Divider, Icon, IconButton, ImageView, Spacing };
+export { Divider, Icon, ImageView, Spacing };

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

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacing = exports.ImageView = exports.IconButton = exports.Icon = exports.Divider = void 0;
+exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = void 0;
 var Divider_1 = require("./Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var Icon_1 = require("./Icon");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
-var IconButton_1 = require("./IconButton");
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
 var ImageView_1 = require("./ImageView");
 Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return ImageView_1.ImageView; } });
 var Spacing_1 = require("./Spacing");

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

@@ -1,2 +1,2 @@
-import { Divider, Icon, IconButton, ImageView, Spacing } from './components';
-export { Divider, Icon, IconButton, ImageView, Spacing };
+import { Divider, Icon, ImageView, Spacing } from './components';
+export { Divider, Icon, ImageView, Spacing };

package/dist/src/hybrid/index.js

@@ -2,11 +2,10 @@
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacing = exports.ImageView = exports.IconButton = exports.Icon = exports.Divider = void 0;
+exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = void 0;
 // component
 var components_1 = require("./components");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return components_1.Divider; } });
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return components_1.Icon; } });
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return components_1.IconButton; } });
 Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return components_1.ImageView; } });
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import fillIcons from '../../../common/assets/icons/fill';
+import lineIcons from '../../../common/assets/icons/line';
+import { uiColors } from '../../../common/styles/ui-colors';
+export declare type FillIconNameKeys = keyof typeof fillIcons;
+export declare type LineIconNameKeys = keyof typeof lineIcons;
+export declare type UiColors = keyof typeof uiColors;
+export declare type IconButtonProps = {
+    fillType?: 'fill' | 'line';
+    shapeType?: 'circular' | 'rectangle';
+    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    baseColorKey?: UiColors;
+    borderColorKey?: UiColors;
+    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
+    iconFillType?: 'fill' | 'line';
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconColorKey?: UiColors;
+    shadow?: 'hidden' | 'visible';
+    colorTheme?: 'none' | 'line1' | 'line2';
+    type?: 'submit' | 'reset' | 'button';
+    state?: 'normal' | 'disabled';
+    onClick?: (...args: any) => any;
+    onTouchStart?: (...args: any) => any;
+};
+declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, onClick, onTouchStart }: IconButtonProps): JSX.Element;
+export default IconButton;