pds-dev-kit-web 1.3.16 → 1.3.19

package/dist/src/common/assets/icons/fill/Subscribers.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const Subscribers: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default Subscribers;

package/dist/src/common/assets/icons/fill/Subscribers.js

@@ -0,0 +1,34 @@
+"use strict";
+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 __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 Subscribers = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M12.0001,12.0918 C7.6531,12.0918 4.0271,15.1768 3.1921,19.2778 C3.0031,20.2078 3.7191,21.0808 4.6691,21.0808 L19.3311,21.0808 C20.2811,21.0808 20.9971,20.2078 20.8081,19.2778 C19.9731,15.1768 16.3471,12.0918 12.0001,12.0918 M11.9739,2.9196 C9.6999,2.9196 7.8569,4.7626 7.8569,7.0366 C7.8569,9.3106 9.6999,11.1536 11.9739,11.1536 C14.2479,11.1536 16.0909,9.3106 16.0909,7.0366 C16.0909,4.7626 14.2479,2.9196 11.9739,2.9196" })));
+};
+exports.default = Subscribers;

package/dist/src/common/assets/icons/fill/index.d.ts

@@ -36,6 +36,7 @@ declare const fillIcons: {
     readonly ic_speaker_wave_2: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_split_screen: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_star: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_subscribers: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_thumb_down: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_thumb_up: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_verified: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/fill/index.js

@@ -39,6 +39,7 @@ var SpeakerWave1_1 = __importDefault(require("./SpeakerWave1"));
 var SpeakerWave2_1 = __importDefault(require("./SpeakerWave2"));
 var SplitScreen_1 = __importDefault(require("./SplitScreen"));
 var Star_1 = __importDefault(require("./Star"));
+var Subscribers_1 = __importDefault(require("./Subscribers"));
 var ThumbDown_1 = __importDefault(require("./ThumbDown"));
 var ThumbUp_1 = __importDefault(require("./ThumbUp"));
 var Verified_1 = __importDefault(require("./Verified"));
@@ -90,6 +91,7 @@ var fillIcons = {
     ic_speaker_wave_2: SpeakerWave2_1.default,
     ic_split_screen: SplitScreen_1.default,
     ic_star: Star_1.default,
+    ic_subscribers: Subscribers_1.default,
     ic_thumb_down: ThumbDown_1.default,
     ic_thumb_up: ThumbUp_1.default,
     ic_verified: Verified_1.default,

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

@@ -486,5 +486,6 @@
     "ui_cpnt_dropdown_text_white_hint": "sys_text_white",
     "ui_cpnt_dropdown_icon_white_default": "sys_widget_white",
     "ui_cpnt_dropdown_border_white_focus": "sys_border_line_03",
-    "ui_cpnt_dropdown_base_white_normal": "sys_component_base_white_opacity10"
+    "ui_cpnt_dropdown_base_white_normal": "sys_component_base_white_opacity10",
+    "ui_profile_image_border_brandprimary": "usr_brand_primary"
 }

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

@@ -1,4 +1,62 @@
 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;
+        grey30: string;
+        opacity95: string;
+        darkgrey30: string;
+    };
     readonly PaletteColor_light: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -156,64 +214,6 @@ declare const colorSet: {
         sys_component_base_white_opacity10: string;
         sys_cpnt_sheet_base_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;
-        opacity50: string;
-        grey30: string;
-        opacity95: string;
-        darkgrey30: string;
-    };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
         sys_container_background_02: string;
@@ -860,6 +860,7 @@ declare const colorSet: {
         ui_cpnt_dropdown_icon_white_default: string;
         ui_cpnt_dropdown_border_white_focus: string;
         ui_cpnt_dropdown_base_white_normal: string;
+        ui_profile_image_border_brandprimary: string;
     };
 };
 export default colorSet;

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/colorSet/ui-type.d.ts

@@ -487,4 +487,5 @@ export interface UITheme {
     ui_cpnt_dropdown_icon_white_default: string;
     ui_cpnt_dropdown_border_white_focus: string;
     ui_cpnt_dropdown_base_white_normal: string;
+    ui_profile_image_border_brandprimary: string;
 }

package/dist/src/common/types/styled-components.d.ts

@@ -1,86 +1,86 @@
 import { desktopFontSize, fontWeight } from '../styles/theme';
 export interface PdsDevKitTheme {
     fontWeight: {
-        normal: string;
-        bold: string;
+        normal: '500';
+        bold: '700';
     };
     desktopFontSize: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
+        displayHeading: '40px';
+        heading: '24px';
+        leadParagraph: '20px';
+        subtitle: '18px';
+        body1: '18px';
+        body2: '16px';
+        caption1: '14px';
+        caption2: '12px';
+        form1: '16px';
+        form2: '14px';
+        blog1: '16px';
     };
     desktopLineHeight: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
-        singleLine: string;
+        displayHeading: '1.5';
+        heading: '1.5';
+        leadParagraph: '1.5';
+        subtitle: '1.5';
+        body1: '1.5';
+        body2: '1.5';
+        caption1: '1.5';
+        caption2: '1.5';
+        form1: '1.6';
+        form2: '1.6';
+        blog1: '1.6';
+        singleLine: '1';
     };
     mobileFontSize: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
+        displayHeading: '32px';
+        heading: '24px';
+        leadParagraph: '20px';
+        subtitle: '18px';
+        body1: '18px';
+        body2: '16px';
+        caption1: '14px';
+        caption2: '12px';
+        form1: '16px';
+        form2: '14px';
+        blog1: '16px';
     };
     mobileLineHeight: {
-        displayHeading: string;
-        heading: string;
-        leadParagraph: string;
-        subtitle: string;
-        body1: string;
-        body2: string;
-        caption1: string;
-        caption2: string;
-        form1: string;
-        form2: string;
-        blog1: string;
-        singleLine: string;
+        displayHeading: '1.5';
+        heading: '1.5';
+        leadParagraph: '1.5';
+        subtitle: '1.5';
+        body1: '1.5';
+        body2: '1.5';
+        caption1: '1.5';
+        caption2: '1.5';
+        form1: '1.6';
+        form2: '1.6';
+        blog1: '1.6';
+        singleLine: '1';
     };
     boxShadow: {
-        elevation0: string;
-        elevation1: string;
-        elevation2: string;
-        elevation3: string;
-        elevation4: string;
-        elevation5: string;
+        elevation0: '0 0 0 0 #0003';
+        elevation1: '0 2px 8px 0 #0003';
+        elevation2: '0 3px 12px 0 #0003';
+        elevation3: '0 4px 16px 0 #0003';
+        elevation4: '0 5px 20px 0 #0003';
+        elevation5: '0 6px 24px 0 #0003';
     };
     spacing: {
-        spacingA: string;
-        spacingB: string;
-        spacingC: string;
-        spacingD: string;
-        spacingE: string;
-        spacingF: string;
-        spacingG: string;
-        spacingH: string;
-        spacingI: string;
-        spacingJ: string;
-        spacingK: string;
-        spacingL: string;
-        spacingM: string;
-        spacingN: string;
+        spacingA: '4px';
+        spacingB: '8px';
+        spacingC: '12px';
+        spacingD: '16px';
+        spacingE: '24px';
+        spacingF: '32px';
+        spacingG: '48px';
+        spacingH: '64px';
+        spacingI: '88px';
+        spacingJ: '120px';
+        spacingK: '160px';
+        spacingL: '240px';
+        spacingM: '288px';
+        spacingN: '320px';
     };
 }
 export declare type DesktopFontSize = keyof typeof desktopFontSize;

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

@@ -189,7 +189,7 @@ function AdminList(_a) {
                 react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),
         react_1.default.createElement(S_ScrollBox, { scrollMode: scrollMode, scrollVisibleType: scrollVisibleType }, react_1.default.Children.count(children) ? (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, checkboxMethods),
             react_1.default.createElement("form", null, childrenWithWidthProps))) : (react_1.default.createElement(S_EmptyTextWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center" }))))));
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: emptyText, colorTheme: "sysTextTertiary", textAlign: "center", styleTheme: "body2Regular" }))))));
 }
 var scrollInvisible = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    all: unset;\n    display: block;\n  }\n"])));
 var scrollVisible = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));

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

@@ -3,38 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 __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 react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importDefault(require("styled-components"));
-var common_1 = require("../../../common");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BasicList(_a) {
     var children = _a.children, _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'headingBold' : _b, titleText = _a.titleText, captionText = _a.captionText, _c = _a.columns, columns = _c === void 0 ? 1 : _c, _d = _a.columnSpacing, columnSpacing = _d === void 0 ? 16 : _d, _e = _a.rowSpacing, rowSpacing = _e === void 0 ? 0 : _e;
-    var methods = (0, react_hook_form_1.useForm)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         (titleText || captionText) && (react_1.default.createElement(S_TitleBox, null,
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme }),
             titleText && captionText && react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_a", spacingType: "height" }),
             captionText && react_1.default.createElement(TextLabel_1.TextLabel, { text: captionText, styleTheme: "body2Regular" }))),
-        react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
-            react_1.default.createElement(common_1.Form, null,
-                react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)))));
+        react_1.default.createElement(S_BasicListWrapper, { columns: columns, columnSpacing: columnSpacing, rowSpacing: rowSpacing }, children)));
 }
 var S_TitleBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  padding: ", ";\n"], ["\n  margin-bottom: ", ";\n  padding: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
 export declare type BasicListItemProps = {
     selectionMode?: 'none' | 'check' | 'radio';
@@ -12,7 +12,7 @@ export declare type BasicListItemProps = {
     imageSrc?: string;
     iconName?: FillIconNameKeys | LineIconNameKeys;
     iconFillType?: 'fill' | 'line';
-    displayType?: 'none' | 'text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch' | 'selected_status';
+    displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
     captionText?: PDSTextType;
     iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn1IconFillType?: 'fill' | 'line';
@@ -22,21 +22,23 @@ export declare type BasicListItemProps = {
     mBtnText?: PDSTextType;
     dividerType?: 'none' | 'solid';
     titleFontWeight?: 'bold' | 'regular';
-    checkBoxId?: number | string;
+    checkboxId?: string | number;
+    radioId?: string;
     radioValue?: string;
-    onClickIconIBtn1?: () => void;
-    onClickIconIBtn2?: () => void;
+    onClick?: () => void;
+    onClickIBtn1?: () => void;
+    onClickIBtn2?: () => void;
     onClickMBtn?: () => void;
-    onRadioCheck?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onSwitchClick?: () => void;
+    onClickRadio?: (value: string) => void;
+    onClickSwitch?: () => void;
 };
 export declare type StyleProps = {
     isSelected?: boolean;
     selectionMode?: 'none' | 'check' | 'radio';
-    descText?: PDSTextType;
+    captionText?: PDSTextType;
     badgeStatus?: 'cancel' | 'active' | 'inactive';
     imageIconMode?: 'none' | 'image' | 'icon';
-    displayType?: 'none' | 'text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch' | 'selected_status';
+    displayType?: 'none' | 'text' | 'ibtn_text' | 'ibtn_amount1' | 'ibtn_amount2' | 'mbtn' | 'switch';
 };
-declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkBoxId, radioValue, onClickIconIBtn1, onClickIconIBtn2, onClickMBtn, onRadioCheck, onSwitchClick }: BasicListItemProps): JSX.Element;
+declare function BasicListItem({ selectionMode, titleText, titleTextColorTheme, descText, badgeMode, badgeStatus, imageIconMode, imageShapeType, imageSrc, iconName, iconFillType, displayType, captionText, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, mBtnFillType, mBtnText, dividerType, titleFontWeight, checkboxId, radioId, radioValue, onClick, onClickIBtn1, onClickIBtn2, onClickMBtn, onClickRadio, onClickSwitch }: BasicListItemProps): JSX.Element;
 export default BasicListItem;