pds-dev-kit-web 2.0.14 → 2.1.0-alpha.1

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

@@ -0,0 +1,73 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importStar(require("styled-components"));
+function BasicButtonGroup(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, valueArray = _a.valueArray, _c = _a.state, state = _c === void 0 ? 'normal' : _c;
+    return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: valueArray.map(function (_a, index) {
+            var iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: state === 'disabled' || buttonState === 'disabled'
+                        ? 'ui_cpnt_button_icon_disabled'
+                        : 'ui_cpnt_button_icon_enabled' }, void 0) }), iconName + index));
+        }) }), void 0));
+}
+var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  width: 48px;\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  width: 48px;\n"])));
+var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: 40px;\n"])));
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: 32px;\n"])));
+var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_basicbuttongroup_base_default;
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small }[size];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_fill_on_base_pressed;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_basicbuttongroup_base_disabled;
+});
+exports.default = BasicButtonGroup;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

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

@@ -24,7 +24,7 @@ function ContextMenu(_a) {
     var children = _a.children, _b = _a.autoWidthMode, autoWidthMode = _b === void 0 ? 'none' : _b, maxHeight = _a.maxHeight, customWidth = _a.customWidth;
     return ((0, jsx_runtime_1.jsx)(S_ContextMenu, __assign({ "x-pds-name": "ContextMenu", "x-pds-element-type": "component", "x-pds-device-type": "mobile", autoWidth: autoWidthMode === 'use', maxHeight: maxHeight, customWidth: customWidth }, { children: children }), void 0));
 }
-var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  vertical-align: baseline;\n  width: ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContextMenu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 3;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 14px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  list-style: none;\n  margin: 0;\n  max-height: ", ";\n  min-width: 128px;\n  overflow-y: auto;\n  padding: ", " 0;\n  position: relative;\n  vertical-align: baseline;\n  width: ", ";\n\n  z-index: 3;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_contextmenu_base;
 }, function (_a) {

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

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

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

@@ -81,7 +81,7 @@ var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObj
         ? ''
         : theme.ui_cpnt_button_fill_base_disabled;
 });
-var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    content: '';\n    border-radius: inherit;\n    position: absolute;\n    background-color: transparent;\n    height: 100%;\n    width: 100%;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
+var fill = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
     return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { FillIconNameKeys, LineIconNameKeys, PDSValueOption } from '../../../common/types';
+declare type SegmentedButtonGroupValueOption = Pick<PDSValueOption, 'value'> & {
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconFillType?: 'fill' | 'line';
+    state?: 'normal' | 'disabled';
+};
+export declare type SegmentedButtonGroupProps = {
+    size?: 'large' | 'medium' | 'small';
+    value: PDSValueOption['value'] | PDSValueOption['value'][];
+    valueArray: SegmentedButtonGroupValueOption[];
+    selectedType?: 'single' | 'multi';
+    state?: 'normal' | 'disabled';
+    onClick?: (value: PDSValueOption['value']) => void;
+    onMouseDown?: (value: PDSValueOption['value']) => void;
+};
+declare function SegmentedButtonGroup({ size, value, valueArray, selectedType, state, onClick, onMouseDown }: SegmentedButtonGroupProps): JSX.Element;
+export default SegmentedButtonGroup;

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

@@ -0,0 +1,143 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importStar(require("styled-components"));
+function SegmentedButtonGroup(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, value = _a.value, valueArray = _a.valueArray, _c = _a.selectedType, selectedType = _c === void 0 ? 'single' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
+    var handleClick = function (value) {
+        if (onClick) {
+            onClick(value);
+        }
+    };
+    var handleMouseDown = function (value) {
+        if (onMouseDown) {
+            onMouseDown(value);
+        }
+    };
+    var checkSelection = function (currentButtonValue) {
+        if (selectedType === 'multi' && Array.isArray(value)) {
+            return value.includes(currentButtonValue);
+        }
+        return value === currentButtonValue;
+    };
+    var getIconColorKey = function (isSelected, isDisabled) {
+        if (isDisabled) {
+            return 'ui_cpnt_button_icon_disabled';
+        }
+        if (isSelected) {
+            return 'ui_cpnt_button_icon_white';
+        }
+        return 'ui_cpnt_button_icon_enabled';
+    };
+    return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectedType: selectedType }, { children: valueArray.map(function (_a) {
+            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.state, buttonState = _c === void 0 ? 'normal' : _c;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectedType: selectedType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled') }, void 0) }), String(currentButtonValue)));
+        }) }), void 0));
+}
+var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+    var selectedType = _a.selectedType, theme = _a.theme;
+    return selectedType === 'single' && theme.spacing.spacingA;
+});
+var large = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: ", ";\n  height: 48px;\n  width: 48px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  height: 48px;\n  width: 48px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'single' && '14px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '14px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '14px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '14px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '14px';
+});
+var medium = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: ", ";\n  height: 40px;\n  width: 40px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  height: 40px;\n  width: 40px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'single' && '12px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '12px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '12px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '12px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '12px';
+});
+var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: ", ";\n  height: 32px;\n  width: 32px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  height: 32px;\n  width: 32px;\n\n  &:nth-child(1) {\n    border-bottom-left-radius: ", ";\n    border-top-left-radius: ", ";\n  }\n\n  &:nth-last-child(1) {\n    border-bottom-right-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n"])), function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'single' && '10px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '10px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '10px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '10px';
+}, function (_a) {
+    var selectedType = _a.selectedType;
+    return selectedType === 'multi' && '10px';
+});
+var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
+    var isSelected = _a.isSelected, theme = _a.theme;
+    return isSelected
+        ? theme.ui_cpnt_segmentedbuttongroup_base_selected
+        : theme.ui_cpnt_segmentedbuttongroup_base_default;
+}, function (_a) {
+    var size = _a.size;
+    return size && { large: large, medium: medium, small: small }[size];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_segmentedbuttongroup_on_base_hover;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_segmentedbuttongroup_on_base_pressed;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_segmentedbuttongroup_base_disabled;
+});
+exports.default = SegmentedButtonGroup;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

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

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

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

@@ -59,7 +59,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 188px;\n"], ["\n  height: 40px;\n  width: 188px;\n"])));
@@ -93,14 +93,14 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
     return theme.ui_cpnt_select_text_darktheme_enabled;
 });
 var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n\n  ", "\n  ", ";\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return size &&
+    var $size = _a.$size;
+    return $size &&
         {
             large: large,
             medium: medium,
             small: small,
             rlarge: rlarge
-        }[size];
+        }[$size];
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
@@ -131,8 +131,14 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
     var theme = _a.theme;
     return theme.ui_cpnt_select_border_normal;
 }, function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '10px' : '14px');
+    var $size = _a.$size;
+    return $size &&
+        {
+            small: '10px',
+            medium: '12px',
+            large: '14px',
+            rlarge: '14px'
+        }[$size];
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_text_hint;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common/types';
+export declare type Props = {
+    min: number;
+    max: number;
+    step?: number;
+    name?: string;
+    defaultValue?: string | number;
+    tooltipText?: PDSTextType;
+    state?: 'normal' | 'disabled';
+    prefixText?: PDSTextType;
+    suffixText?: PDSTextType;
+    customWidth?: string;
+    responsiveMode?: 'none' | 'use';
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,197 @@
+"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 __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 components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TextLabel_1 = require("../TextLabel");
+function Slider(_a, ref) {
+    var min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, defaultValue = _a.defaultValue, tooltipText = _a.tooltipText, _c = _a.state, state = _c === void 0 ? 'normal' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, customWidth = _a.customWidth, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, onChange = _a.onChange, onClick = _a.onClick;
+    var _e = (0, react_1.useState)(false), isTooltipVisible = _e[0], setIsTooltipVisible = _e[1];
+    var _f = (0, react_1.useState)(false), isTouching = _f[0], setIsTouching = _f[1];
+    var trackRef = (0, react_1.useRef)(null);
+    var thumbRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)(null);
+    var defaultThumbPercentage = ((Number(defaultValue || (max - min) / 2 + min) - min) / (max - min)) * 100;
+    function getPercent(pointValue, width) {
+        if (pointValue <= 0) {
+            return 0;
+        }
+        if (pointValue >= width) {
+            return 1;
+        }
+        return pointValue / width;
+    }
+    function percentToValue(percent, min, max) {
+        return (max - min) * percent + min;
+    }
+    function getInputValue(inputRef, trackValue) {
+        var result = { prevInputValue: '', newInputValue: '' };
+        if (inputRef.current === null) {
+            return result;
+        }
+        result.prevInputValue = inputRef.current.value;
+        inputRef.current.value = String(trackValue);
+        result.newInputValue = inputRef.current.value;
+        return result;
+    }
+    function getThumbOffset(percent, width) {
+        return ((width * percent - width / 2) / (width / 2)) * -10;
+    }
+    var getNewInputValue = function (clientX, left, width) {
+        var percent = getPercent(clientX - (left + 10), width - 20);
+        var newValue = percentToValue(percent, min, max);
+        var _a = getInputValue(inputRef, newValue), prevInputValue = _a.prevInputValue, newInputValue = _a.newInputValue;
+        if (prevInputValue === newInputValue) {
+            return null;
+        }
+        return newInputValue;
+    };
+    var getThumbPositionOnTrack = function (percent, value, width) {
+        var thumbOffset = getThumbOffset(percent, width);
+        return "calc(" + (Number(value) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
+    };
+    var updateFillTrackAndThumb = function (trackElement, thumbElement, thumbPosition) {
+        trackElement.style.backgroundSize = thumbPosition + " 100%";
+        thumbElement.style.left = thumbPosition;
+    };
+    var changeSliderValue = function (clientX) {
+        if (inputRef.current === null || thumbRef.current === null || trackRef.current === null) {
+            return;
+        }
+        var _a = trackRef.current.getBoundingClientRect(), left = _a.left, width = _a.width;
+        var newInputValue = getNewInputValue(clientX, left, width);
+        if (newInputValue === null) {
+            return;
+        }
+        var thumbPosition = getThumbPositionOnTrack(Number(newInputValue) / (max - min), newInputValue, width);
+        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
+        inputRef.current.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    var handleTouchMove = function (e) {
+        changeSliderValue(e.changedTouches[0].clientX);
+    };
+    var handleTouchEnd = function () {
+        document.removeEventListener('touchmove', handleTouchMove);
+        setIsTouching(false);
+        if (tooltipText) {
+            setIsTooltipVisible(false);
+        }
+        if (inputRef.current !== null) {
+            inputRef.current.dispatchEvent(new Event('click', { bubbles: true }));
+            inputRef.current.focus();
+        }
+    };
+    var handleTouchStart = function (e) {
+        if (state === 'disabled') {
+            return;
+        }
+        setIsTouching(true);
+        changeSliderValue(e.changedTouches[0].clientX);
+        if (tooltipText) {
+            setIsTooltipVisible(true);
+        }
+        document.addEventListener('touchmove', handleTouchMove);
+        document.addEventListener('touchend', handleTouchEnd, { once: true });
+    };
+    var handleChange = function (e) {
+        if (trackRef.current === null || thumbRef.current === null) {
+            return;
+        }
+        var width = trackRef.current.getBoundingClientRect().width;
+        var thumbPosition = getThumbPositionOnTrack(Number(e.currentTarget.value) / (max - min), e.currentTarget.value, width);
+        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    var handleClick = function (e) {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    var handleRangeRef = function (node) {
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else {
+            ref && (ref.current = node);
+        }
+        inputRef.current = node;
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use", textAlign: "right" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(S_SliderWrapper, __assign({ customWidth: customWidth, responsiveMode: responsiveMode }, { children: (0, jsx_runtime_1.jsxs)(S_Slider, __assign({ customWidth: customWidth, isDisabled: state === 'disabled', responsiveMode: responsiveMode, thumbPercentage: defaultThumbPercentage, onTouchStart: handleTouchStart }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, thumbPercentage: defaultThumbPercentage, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, thumbPercentage: defaultThumbPercentage, isTouching: isTouching, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(S_Range, { ref: handleRangeRef, type: "range", name: name, min: min, max: max, step: step, defaultValue: defaultValue, onInput: handleChange, onClick: handleClick }, void 0), tooltipText && isTooltipVisible && ((0, jsx_runtime_1.jsx)(S_Tooltip, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, styleTheme: "caption2Regular", colorOverride: "ui_cpnt_textlabel_button_tooltip", singleLineMode: "use" }, void 0) }, void 0))] }), void 0)] }), void 0) }), void 0), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" }, void 0)] }, void 0))] }), void 0));
+}
+var S_SliderBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n"])));
+var S_SliderWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  width: ", ";\n"], ["\n  display: flex;\n  position: relative;\n  width: ", ";\n"])), function (_a) {
+    var responsiveMode = _a.responsiveMode, customWidth = _a.customWidth;
+    if (customWidth) {
+        return customWidth;
+    }
+    if (responsiveMode === 'use') {
+        return '100%';
+    }
+    return '324px';
+});
+var S_Tooltip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 4px;\n  padding: ", ";\n  position: absolute;\n  top: -10px;\n  transform: translateY(-100%);\n"], ["\n  background-color: ", ";\n  border-radius: 4px;\n  padding: ", ";\n  position: absolute;\n  top: -10px;\n  transform: translateY(-100%);\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_tooltip_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+});
+var S_Slider = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 20px;\n  width: ", ";\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n  height: 20px;\n  width: ", ";\n"])), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'auto' : 'pointer');
+}, function (_a) {
+    var responsiveMode = _a.responsiveMode, customWidth = _a.customWidth;
+    if (customWidth) {
+        return customWidth;
+    }
+    if (responsiveMode === 'use') {
+        return '100%';
+    }
+    return '324px';
+});
+var S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\n  background-size: ", ";\n  border-radius: 2px;\n  height: 4px;\n  position: absolute;\n  width: inherit;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_slider_track;
+}, function (_a) {
+    var theme = _a.theme, isDisabled = _a.isDisabled;
+    return isDisabled
+        ? "linear-gradient(" + theme.ui_cpnt_slider_track_disabled + ", " + theme.ui_cpnt_slider_track_disabled + ")"
+        : "linear-gradient(" + theme.ui_cpnt_slider_track_active + ", " + theme.ui_cpnt_slider_track_active + ")";
+}, function (_a) {
+    var thumbPercentage = _a.thumbPercentage;
+    return thumbPercentage + "% 100%";
+});
+var S_Thumb = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: ", "%;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n"], ["\n  background-color: ", ";\n  border-radius: 100%;\n  box-shadow: ", ";\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: ", "%;\n  position: absolute;\n  transform: translateX(-10px);\n  width: 20px;\n"])), function (_a) {
+    var theme = _a.theme, isDisabled = _a.isDisabled;
+    return isDisabled ? theme.ui_cpnt_slider_thumb_disabled : theme.ui_cpnt_slider_thumb_normal;
+}, function (_a) {
+    var theme = _a.theme, isTouching = _a.isTouching, isDisabled = _a.isDisabled;
+    return isTouching && !isDisabled ? "0 0 0 8px " + theme.ui_cpnt_slider_thumb_pressed_circle : 'none';
+}, function (_a) {
+    var thumbPercentage = _a.thumbPercentage;
+    return thumbPercentage;
+});
+var S_Range = styled_components_1.default.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  clip: rect(0 0 0 0);\n  height: 100%;\n  margin: 0;\n  outline: none;\n  position: absolute;\n  width: 100%;\n"], ["\n  clip: rect(0 0 0 0);\n  height: 100%;\n  margin: 0;\n  outline: none;\n  position: absolute;\n  width: 100%;\n"])));
+exports.default = (0, react_1.forwardRef)(Slider);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

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

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

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

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

@@ -7,7 +7,7 @@ export declare type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
 declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;

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

@@ -60,6 +60,7 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
+    grey2: 'sysTextSecondary',
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
@@ -98,6 +99,8 @@ var S_Button = styled_components_1.default.button(templateObject_8 || (templateO
         case 'red':
         case 'grey_01':
             return colorThemeDefault;
+        case 'grey2':
+            return colorThemeDefault;
         case 'white':
             return colorThemeWhite;
         case 'white2':