pds-dev-kit-web-test 2.5.410 → 2.5.411

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

@@ -24,7 +24,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function Checkbox(_a) {
-    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'none' : _d, onChange = _a.onChange;
     var register = (0, react_hook_form_1.useFormContext)().register;
     var checkboxFormRegister = register(name);
     var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
@@ -34,10 +34,24 @@ function Checkbox(_a) {
             onChange(e);
         }
     };
+    var colorThemeSet = {
+        none: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_default',
+            textColorKey: 'ui_cpnt_selcontrols_text_default'
+        },
+        white: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_white',
+            textColorKey: 'ui_cpnt_selcontrols_text_white'
+        },
+        grey1: {
+            iconColorkey: 'ui_cpnt_selcontrols_icon_grey_01',
+            textColorKey: 'ui_cpnt_selcontrols_text_grey_01'
+        }
+    };
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: colorThemeSet[colorTheme].iconColorkey }));
             }
             case 'disabled': {
                 return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
@@ -45,7 +59,7 @@ function Checkbox(_a) {
         }
     };
     return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name }, { children: [icon(), text && ((0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
-                            ? 'ui_cpnt_selcontrols_text_default'
+                            ? colorThemeSet[colorTheme].textColorKey
                             : 'ui_cpnt_selcontrols_text_disabled' }) })), (0, jsx_runtime_1.jsx)("input", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
 }
 var S_Checkbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../../common';
-type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
+type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
 export type ChipProps = {
     displayType?: DisplayType;
     text?: PDSTextType;

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

@@ -14,13 +14,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
@@ -58,6 +78,10 @@ function Chip(_a) {
                 return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
             case 'removable':
                 return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
+            case 'information2':
+                return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
+            case 'information3':
+                return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
             default:
                 return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
         }
@@ -128,5 +152,26 @@ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateOb
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var S_ChipWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_67;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_140;
+});
+var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_37;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_67;
+});
+var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common/types';
+type Props = {
+    id?: string;
+    type: 'single' | 'range';
+    date: string;
+    endDate?: string;
+    minDate?: string;
+    maxDate?: string;
+    startOfWeek?: 'sunday' | 'monday';
+    quickActionMode?: 'use' | 'none';
+    quickActionBtnText?: PDSTextType;
+    onChange?: (val1: string, val2?: string) => void;
+};
+declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, quickActionMode, quickActionBtnText, onChange }: Props) => JSX.Element;
+export default DatePicker;

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

@@ -0,0 +1,156 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+var DatePickerHeader_1 = __importDefault(require("./DatePickerHeader"));
+var Day_1 = __importDefault(require("./Day"));
+var DatePicker = function (_a) {
+    var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, _c = _a.quickActionMode, quickActionMode = _c === void 0 ? 'none' : _c, quickActionBtnText = _a.quickActionBtnText, onChange = _a.onChange;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var startDate = date || dateHelper_1.DateHelper.formatDate(new Date());
+    var _d = (0, react_1.useState)(function () {
+        return dateHelper_1.DateHelper.startOfMonth(dateHelper_1.DateHelper.parseDate(startDate));
+    }), currentMonth = _d[0], setCurrentMonth = _d[1];
+    var isPrevButtonDisabled = (0, react_1.useMemo)(function () {
+        if (!minDate)
+            return false;
+        var parsedMinDate = dateHelper_1.DateHelper.parseDate(minDate);
+        return (currentMonth.getFullYear() < parsedMinDate.getFullYear() ||
+            (currentMonth.getFullYear() === parsedMinDate.getFullYear() &&
+                currentMonth.getMonth() <= parsedMinDate.getMonth()));
+    }, [currentMonth, minDate]);
+    var isNextButtonDisabled = (0, react_1.useMemo)(function () {
+        if (!maxDate)
+            return false;
+        var parsedMaxDate = dateHelper_1.DateHelper.parseDate(maxDate);
+        return (currentMonth.getFullYear() > parsedMaxDate.getFullYear() ||
+            (currentMonth.getFullYear() === parsedMaxDate.getFullYear() &&
+                currentMonth.getMonth() >= parsedMaxDate.getMonth()));
+    }, [currentMonth, maxDate]);
+    var handleDateClick = function (target) {
+        if (!onChange)
+            return;
+        var selectedDateStr = dateHelper_1.DateHelper.formatDate(target);
+        if (type === 'single') {
+            onChange(selectedDateStr);
+            return;
+        }
+        if (!startDate || (startDate && endDate)) {
+            onChange(selectedDateStr, undefined);
+            return;
+        }
+        var parsedStartDate = dateHelper_1.DateHelper.parseDate(startDate);
+        if (dateHelper_1.DateHelper.isBefore(target, parsedStartDate)) {
+            onChange(selectedDateStr, undefined);
+            return;
+        }
+        var startISO = dateHelper_1.DateHelper.formatDate(parsedStartDate);
+        onChange(startISO, selectedDateStr);
+    };
+    var handleQuickActionButtonClick = function () {
+        var today = new Date();
+        var startOfCurrentMonth = dateHelper_1.DateHelper.startOfMonth(today);
+        setCurrentMonth(startOfCurrentMonth);
+    };
+    var calendarDates = (0, react_1.useMemo)(function () { return dateHelper_1.DateHelper.getCalendarDates(currentMonth, startOfWeek); }, [currentMonth, startOfWeek]);
+    var days = [
+        t('str_3893'),
+        t('str_3887'),
+        t('str_3888'),
+        t('str_3889'),
+        t('str_3890'),
+        t('str_3891'),
+        t('str_3892')
+    ];
+    return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.jsx)(DatePickerHeader_1.default, { headerTitle: t('str_35', {
+                    year: currentMonth.getFullYear(),
+                    month: String(currentMonth.getMonth() + 1)
+                }), textButtonText: quickActionMode === 'use' ? quickActionBtnText : undefined, isTextButtonDisabled: currentMonth.getFullYear() === new Date().getFullYear() &&
+                    currentMonth.getMonth() === new Date().getMonth(), isPrevButtonDisabled: isPrevButtonDisabled, isNextButtonDisabled: isNextButtonDisabled, onClickPrevButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, -1); }); }, onClickNextButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, 1); }); }, onClickTextButton: handleQuickActionButtonClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsxs)(S_MonthContainer, { children: [(0, jsx_runtime_1.jsx)(S_DayOfWeekContainer, __assign({ id: "weeks" }, { children: days
+                            .slice(startOfWeek === 'monday' ? 1 : 0)
+                            .concat(startOfWeek === 'monday' ? [t('str_3893')] : [])
+                            .map(function (day) { return ((0, jsx_runtime_1.jsx)(S_DayOfWeek, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Bold", colorTheme: "sysTextSecondary", textAlign: "center" }) }, "".concat(id, "_").concat(day))); }) })), (0, jsx_runtime_1.jsx)(S_Grid, { children: calendarDates.map(function (d) {
+                            var dateStr = dateHelper_1.DateHelper.formatDate(d);
+                            var inRange = startDate &&
+                                endDate &&
+                                dateHelper_1.DateHelper.isAfter(d, dateHelper_1.DateHelper.parseDate(startDate)) &&
+                                dateHelper_1.DateHelper.isBefore(d, dateHelper_1.DateHelper.parseDate(endDate));
+                            var isStart = dateHelper_1.DateHelper.isSameDay(d, dateHelper_1.DateHelper.parseDate(startDate));
+                            var isEnd = !!endDate && dateHelper_1.DateHelper.isSameDay(d, dateHelper_1.DateHelper.parseDate(endDate));
+                            return ((0, jsx_runtime_1.jsx)(S_CellWrapper, __assign({ isValidRange: !!startDate && !!endDate, isRange: !!inRange, isStart: isStart, isEnd: isEnd }, { children: (0, jsx_runtime_1.jsx)(Day_1.default, { date: d, currentMonth: currentMonth, minDate: minDate, maxDate: maxDate, startDate: date, endDate: endDate, onClick: handleDateClick }) }), "".concat(id, "_").concat(dateStr)));
+                        }) })] })] })));
+};
+var CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));
+var S_MonthContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 0 ", ";\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  padding: 0 ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_DayOfWeekContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: minmax(25px, 32px);\n  justify-items: center;\n"], ["\n  align-items: center;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: minmax(25px, 32px);\n  justify-items: center;\n"])));
+var S_DayOfWeek = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textlabel_sys_primary;
+});
+var S_Grid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  display: grid;\n  flex: 1;\n  grid-row-gap: 2px;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: repeat(6, minmax(25px, 32px));\n  justify-items: center;\n"], ["\n  align-items: center;\n  display: grid;\n  flex: 1;\n  grid-row-gap: 2px;\n  grid-template-columns: repeat(7, minmax(32px, 120px));\n  grid-template-rows: repeat(6, minmax(25px, 32px));\n  justify-items: center;\n"])));
+var S_CellWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var isRange = _a.isRange, isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
+    return isValidRange &&
+        (isRange || (isStart && !isEnd) || (isEnd && !isStart)) && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", "20;\n    "], ["\n      background: ", "20;\n    "])), theme.ui_cpnt_calendar_status_a);
+}, function (_a) {
+    var isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
+    return isValidRange &&
+        isEnd &&
+        !isStart && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: linear-gradient(\n        to right,\n        ", "20 50%,\n        transparent 50%\n      );\n    "], ["\n      background: linear-gradient(\n        to right,\n        ", "20 50%,\n        transparent 50%\n      );\n    "])), theme.ui_cpnt_calendar_status_a);
+}, function (_a) {
+    var isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
+    return isValidRange &&
+        isStart &&
+        !isEnd && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: linear-gradient(\n        to left,\n        ", "20 50%,\n        transparent 50%\n      );\n    "], ["\n      background: linear-gradient(\n        to left,\n        ", "20 50%,\n        transparent 50%\n      );\n    "])), theme.ui_cpnt_calendar_status_a);
+});
+exports.default = DatePicker;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common/types';
+type Props = {
+    headerTitle: string;
+    textButtonText?: PDSTextType;
+    isTextButtonDisabled: boolean;
+    isPrevButtonDisabled: boolean;
+    isNextButtonDisabled: boolean;
+    onClickPrevButton: () => void;
+    onClickNextButton: () => void;
+    onClickTextButton: () => void;
+};
+declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, isPrevButtonDisabled, isNextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton }: Props): JSX.Element;
+export default DatePickerHeader;

package/dist/src/mobile/components/DatePicker/DatePickerHeader.js

@@ -0,0 +1,27 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextButton_1 = require("../TextButton");
+var TextLabel_1 = require("../TextLabel");
+function DatePickerHeader(_a) {
+    var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, isPrevButtonDisabled = _a.isPrevButtonDisabled, isNextButtonDisabled = _a.isNextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton;
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isPrevButtonDisabled ? 'disabled' : 'normal' }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: headerTitle, textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_RightIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickNextButton, iconName: "ic_arrow_right", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isNextButtonDisabled ? 'disabled' : 'normal' }) }), textButtonText && ((0, jsx_runtime_1.jsx)(S_TextButtonWrapper, { children: (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: textButtonText, size: "xsmall", fontWeight: "bold", onClick: onClickTextButton, state: isTextButtonDisabled ? 'disabled' : 'normal' }) }))] }));
+}
+var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  justify-items: center;\n  margin: 0 ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  justify-items: center;\n  margin: 0 ", ";\n  position: relative;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_TextButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: auto 0;\n  position: absolute;\n  right: 0;\n"], ["\n  margin: auto 0;\n  position: absolute;\n  right: 0;\n"])));
+var S_LeftIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  grid-column: 1 / 2;\n  height: auto;\n  width: auto;\n"], ["\n  align-items: center;\n  display: flex;\n  grid-column: 1 / 2;\n  height: auto;\n  width: auto;\n"])));
+var S_RightIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  grid-column: 3 / 4;\n  height: auto;\n  width: auto;\n"], ["\n  align-items: center;\n  display: flex;\n  grid-column: 3 / 4;\n  height: auto;\n  width: auto;\n"])));
+exports.default = DatePickerHeader;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/mobile/components/DatePicker/Day.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type DayPropTypes = {
+    date: Date;
+    currentMonth: Date;
+    startDate: string;
+    endDate?: string;
+    minDate?: string;
+    maxDate?: string;
+    onClick: (date: Date) => void;
+};
+declare function Day({ date, currentMonth, startDate, endDate, minDate, maxDate, onClick }: DayPropTypes): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Day>;
+export default _default;

package/dist/src/mobile/components/DatePicker/Day.js

@@ -0,0 +1,94 @@
+"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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+var styled_components_1 = __importStar(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+function areEqual(prevProps, nextProps) {
+    return prevProps.date === nextProps.date && prevProps.onClick === nextProps.onClick;
+}
+function Day(_a) {
+    var date = _a.date, currentMonth = _a.currentMonth, startDate = _a.startDate, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, onClick = _a.onClick;
+    var dateStr = dateHelper_1.DateHelper.formatDate(date);
+    var isSelected = dateHelper_1.DateHelper.isSameDay(dateHelper_1.DateHelper.parseDate(startDate), date) ||
+        (endDate && dateHelper_1.DateHelper.isSameDay(dateHelper_1.DateHelper.parseDate(endDate), date));
+    var isSelectable = function (target) {
+        if (minDate && dateHelper_1.DateHelper.isBefore(target, dateHelper_1.DateHelper.parseDate(minDate)))
+            return false;
+        if (maxDate && dateHelper_1.DateHelper.isAfter(target, dateHelper_1.DateHelper.parseDate(maxDate)))
+            return false;
+        return true;
+    };
+    var isOtherMonth = date.getMonth() !== currentMonth.getMonth();
+    var selectable = isSelectable(date);
+    var isToday = dateHelper_1.DateHelper.isSameDay(dateStr, dateHelper_1.DateHelper.getToday());
+    var getColorTheme = function () {
+        if (isSelected) {
+            return 'usrTextBrandOnPrimary';
+        }
+        if (isOtherMonth && selectable) {
+            return 'sysTextSecondary';
+        }
+        if (selectable) {
+            return 'sysTextPrimary';
+        }
+        return 'sysTextTertiary';
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(S_DayWrapper, __assign({ isToday: isToday, isSelectedDay: !!isSelected, isOutOfThisMonthWeek: isOtherMonth, onClick: function () { return selectable && onClick(date); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: date.getDate(), textAlign: "center", styleTheme: isSelected ? 'caption1Bold' : 'caption1Regular', colorTheme: getColorTheme() }) })) }));
+}
+var selectedDay = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 10px;\n"], ["\n  background-color: ", ";\n  border-radius: 10px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_calendar_status_a;
+});
+var today = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return "radial-gradient(circle, ".concat(theme.ui_cpnt_calendar_status_c, ", 15px, rgba(255, 255, 255, 0) 15px)");
+});
+var S_DayWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  position: relative;\n  width: 32px;\n\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  position: relative;\n  width: 32px;\n\n  ", ";\n  ", ";\n"])), function (_a) {
+    var isToday = _a.isToday, isSelectedDay = _a.isSelectedDay, isOutOfThisMonthWeek = _a.isOutOfThisMonthWeek;
+    return isToday && !isOutOfThisMonthWeek && !isSelectedDay && today;
+}, function (_a) {
+    var isSelectedDay = _a.isSelectedDay;
+    return isSelectedDay && selectedDay;
+});
+exports.default = (0, react_1.memo)(Day, areEqual);
+var templateObject_1, templateObject_2, templateObject_3;

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

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

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

package/dist/src/mobile/components/DatePicker/utils.d.ts

@@ -0,0 +1,16 @@
+export declare function getWeeklyInfo(date: Date): {
+    year: number;
+    month: number;
+    day: number;
+    weekNumber: number;
+    weekNumberMonth: number;
+    weekNumberYear: number;
+    startYear: number;
+    endYear: number;
+    startMonth: number;
+    endMonth: number;
+    startDay: number;
+    endDay: number;
+    startDate: string;
+    endDate: string;
+};

package/dist/src/mobile/components/DatePicker/utils.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWeeklyInfo = void 0;
+var dateHelper_1 = require("../../../common/utils/dateHelper");
+function getWeeklyInfo(date) {
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var dayOfWeek = date.getDay();
+    dayOfWeek = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    var mondayDate = new Date(date);
+    mondayDate.setDate(date.getDate() - dayOfWeek);
+    var sundayDate = new Date(date);
+    sundayDate.setDate(date.getDate() + (6 - dayOfWeek));
+    var firstDayOfMonth = new Date(year, month - 1, 1);
+    var firstDayOffset = firstDayOfMonth.getDay();
+    firstDayOffset = firstDayOffset === 0 ? 6 : firstDayOffset - 1;
+    var daysSinceFirstMonday = Math.floor((day - 1 + firstDayOffset) / 7) + 1;
+    var weekNumber = daysSinceFirstMonday;
+    if (weekNumber === 1) {
+        var daysInCurrentWeekPrevMonth = dayOfWeek;
+        var daysInCurrentWeekCurrentMonth = 7 - dayOfWeek;
+        if (daysInCurrentWeekPrevMonth > daysInCurrentWeekCurrentMonth) {
+            var prevMonth = month === 1 ? 12 : month - 1;
+            var prevYear = month === 1 ? year - 1 : year;
+            var lastDayPrevMonth = new Date(prevYear, prevMonth, 0).getDate();
+            var firstDayPrevMonth = new Date(prevYear, prevMonth - 1, 1);
+            var firstDayPrevMonthOffset = firstDayPrevMonth.getDay();
+            firstDayPrevMonthOffset = firstDayPrevMonthOffset === 0 ? 6 : firstDayPrevMonthOffset - 1;
+            weekNumber = Math.ceil((lastDayPrevMonth + firstDayPrevMonthOffset) / 7);
+        }
+    }
+    var lastDayOfMonth = new Date(year, month, 0).getDate();
+    if (day > lastDayOfMonth - 7) {
+        var remainingDaysInMonth = lastDayOfMonth - day;
+        var daysInNextMonth = 6 - dayOfWeek - remainingDaysInMonth;
+        if (daysInNextMonth > remainingDaysInMonth + 1) {
+            weekNumber = 1;
+        }
+    }
+    var weekNumberMonth = month;
+    var weekNumberYear = year;
+    if (weekNumber > 4 && day < 8) {
+        weekNumberMonth = month === 1 ? 12 : month - 1;
+        weekNumberYear = month === 1 ? year - 1 : year;
+    }
+    else if (weekNumber === 1 && day > 20) {
+        weekNumberMonth = month === 12 ? 1 : month + 1;
+        weekNumberYear = month === 12 ? year + 1 : year;
+    }
+    return {
+        year: year,
+        month: month,
+        day: day,
+        weekNumber: weekNumber,
+        weekNumberMonth: weekNumberMonth,
+        weekNumberYear: weekNumberYear,
+        startYear: mondayDate.getFullYear(),
+        endYear: sundayDate.getFullYear(),
+        startMonth: mondayDate.getMonth() + 1,
+        endMonth: sundayDate.getMonth() + 1,
+        startDay: mondayDate.getDate(),
+        endDay: sundayDate.getDate(),
+        startDate: dateHelper_1.DateHelper.formatDate(mondayDate),
+        endDate: dateHelper_1.DateHelper.formatDate(sundayDate)
+    };
+}
+exports.getWeeklyInfo = getWeeklyInfo;

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

@@ -39,9 +39,9 @@ function Radio(_a) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: value }, { children: [icon(), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
+    return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: "".concat(name, "-").concat(value) }, { children: [icon(), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
                         ? 'ui_cpnt_selcontrols_text_default'
-                        : 'ui_cpnt_selcontrols_text_disabled' }) }), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
+                        : 'ui_cpnt_selcontrols_text_disabled' }) }), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: "".concat(name, "-").concat(value), type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
 }
 var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));
 var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  position: relative;\n"])));