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

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

@@ -0,0 +1,200 @@
+"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), isDragging = _f[0], setIsDragActive = _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 handleMouseMove = function (e) {
+        changeSliderValue(e.clientX);
+    };
+    var handleMouseUp = function () {
+        document.removeEventListener('mousemove', handleMouseMove);
+        setIsDragActive(false);
+        if (tooltipText) {
+            setIsTooltipVisible(false);
+        }
+        if (inputRef.current !== null) {
+            inputRef.current.dispatchEvent(new Event('click', { bubbles: true }));
+            inputRef.current.focus();
+        }
+    };
+    var handleMouseDown = function (e) {
+        if (state === 'disabled') {
+            return;
+        }
+        changeSliderValue(e.clientX);
+        setIsDragActive(true);
+        if (tooltipText) {
+            setIsTooltipVisible(true);
+        }
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp, { 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, onMouseDown: handleMouseDown }, { 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, isDragging: isDragging, 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  &:hover {\n    box-shadow: ", ";\n  }\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\n  &:hover {\n    box-shadow: ", ";\n  }\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, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
+    return isDragging && !isDisabled ? "0 0 0 8px " + theme.ui_cpnt_slider_thumb_pressed_circle : 'none';
+}, function (_a) {
+    var thumbPercentage = _a.thumbPercentage;
+    return thumbPercentage;
+}, function (_a) {
+    var theme = _a.theme, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
+    return !isDragging && !isDisabled && "0 0 0 8px " + theme.ui_cpnt_slider_thumb_hover_circle;
+});
+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/desktop/components/Slider/index.d.ts

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

package/dist/src/desktop/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/desktop/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/desktop/components/TextButton/TextButton.js

@@ -60,6 +60,7 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
+    grey2: 'sysTextSecondary',
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
@@ -110,6 +111,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':

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

@@ -186,14 +186,14 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 188px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;
 });
-var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"], ["\n  border-radius: 14px;\n  height: 48px;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
@@ -311,7 +311,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_17 || (t
     }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
-var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  border-radius: 14px;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", ";\n  ", "\n"])), function (_a) {
     var state = _a.state;
     return (state === 'disabled' ? 'not-allowed' : 'text');
 }, function (_a) {

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import type { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../../common';
+import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 export declare type UploadIconButtonProps = {
     fillType?: 'fill' | 'line';
     shapeType?: 'circular' | 'rectangle';
     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;
@@ -15,7 +15,9 @@ export declare type UploadIconButtonProps = {
     state?: 'normal' | 'disabled';
     accept?: string;
     multipleMode?: 'none' | 'use';
+    tooltipText?: PDSTextType;
+    tooltipPosition?: 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, onClick }: UploadIconButtonProps): JSX.Element;
+declare function UploadIconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, state, accept, multipleMode, tooltipText, tooltipPosition, onClick }: UploadIconButtonProps): JSX.Element;
 export default UploadIconButton;

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

@@ -35,12 +35,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
+var constants_1 = require("../IconButton/constants");
+var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
 function UploadIconButton(_a) {
-    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, onClick = _a.onClick;
+    var _b = _a.fillType, fillType = _b === void 0 ? 'fill' : _b, _c = _a.shapeType, shapeType = _c === void 0 ? 'rectangle' : _c, _d = _a.baseSize, baseSize = _d === void 0 ? 'small' : _d, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.iconFillType, iconFillType = _f === void 0 ? 'line' : _f, _g = _a.iconName, iconName = _g === void 0 ? 'ic_upload' : _g, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, _l = _a.accept, accept = _l === void 0 ? '*' : _l, _m = _a.multipleMode, multipleMode = _m === void 0 ? 'none' : _m, tooltipText = _a.tooltipText, _o = _a.tooltipPosition, tooltipPosition = _o === void 0 ? 'center_bottom' : _o, onClick = _a.onClick;
+    var _p = (0, react_1.useState)(false), isTooltipOpen = _p[0], setIsTooltipOpen = _p[1];
+    var handleTooltipToggle = function (value) {
+        setIsTooltipOpen(value);
+    };
     var handleClick = function (e) {
         if (onClick) {
             onClick(e);
@@ -59,7 +66,7 @@ function UploadIconButton(_a) {
         }
         return types_1.iconStateColors[fillType];
     };
-    return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_UploadIconButton, __assign({ "x-pds-name": "UploadIconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, isDisabled: state === 'disabled', onMouseEnter: function () { return tooltipText && handleTooltipToggle(true); }, onMouseLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, disabled: state === 'disabled', accept: accept, multiple: multipleMode === 'use', onChange: handleClick }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }, void 0), tooltipText && isTooltipOpen && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: isTooltipOpen, tooltipPosition: tooltipPosition, baseSize: baseSize }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }, void 0) }), void 0))] }), void 0));
 }
 var fillDisabled = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme, baseColorKey = _a.baseColorKey;
@@ -67,7 +74,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  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::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  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::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  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::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  &:hover:not([disabled])::before {\n    background-color: ", ";\n  }\n\n  &:active:not([disabled])::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) {
@@ -157,5 +164,46 @@ var S_UploadIconButton = styled_components_1.default.label(templateObject_12 ||
             xsmall: xsmall
         }[baseSize];
 });
+var tooltipPositionSpacing = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var baseSize = _a.baseSize;
+    return baseSize &&
+        {
+            xxlarge: constants_1.TOOLTIP_POSITION_SPACING.xxlarge,
+            large: constants_1.TOOLTIP_POSITION_SPACING.large,
+            medium: constants_1.TOOLTIP_POSITION_SPACING.medium,
+            small: constants_1.TOOLTIP_POSITION_SPACING.small,
+            xsmall: constants_1.TOOLTIP_POSITION_SPACING.xsmall
+        }[baseSize];
+});
+var tooltipLeftTop = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  bottom: ", ";\n  right: 0;\n"], ["\n  bottom: ", ";\n  right: 0;\n"])), tooltipPositionSpacing);
+var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  right: 0;\n  top: ", ";\n"], ["\n  right: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterTop = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  bottom: ", ";\n"], ["\n  bottom: ", ";\n"])), tooltipPositionSpacing);
+var tooltipCenterBottom = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  top: ", ";\n"], ["\n  top: ", ";\n"])), tooltipPositionSpacing);
+var tooltipRightTop = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 0;\n"], ["\n  bottom: ", ";\n  left: 0;\n"])), tooltipPositionSpacing);
+var tooltipRightBottom = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  left: 0;\n  top: ", ";\n"], ["\n  left: 0;\n  top: ", ";\n"])), tooltipPositionSpacing);
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  position: absolute;\n  width: max-content;\n  z-index: 400;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_button_tooltip_base;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA + " " + theme.spacing.spacingB;
+}, function (_a) {
+    var isTooltipOpen = _a.isTooltipOpen;
+    return !isTooltipOpen && 'display: none';
+}, function (_a) {
+    var tooltipPosition = _a.tooltipPosition;
+    return tooltipPosition &&
+        {
+            left_top: tooltipLeftTop,
+            left_bottom: tooltipLeftBottom,
+            center_top: tooltipCenterTop,
+            center_bottom: tooltipCenterBottom,
+            right_top: tooltipRightTop,
+            right_bottom: tooltipRightBottom
+        }[tooltipPosition];
+});
 exports.default = UploadIconButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

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

@@ -6,7 +6,7 @@ declare type UploadTextButtonProps = {
     responsiveMode?: 'none' | 'use';
     fontWeight?: 'bold' | 'regular';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'white' | 'white2';
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
     accept?: string;
     multipleMode?: 'none' | 'use';
     onClick?: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -49,6 +49,7 @@ var textColor = {
     none: 'usrTextBrandPrimary',
     red: 'sysTextError',
     grey_01: 'sysTextPrimary',
+    grey2: 'sysTextSecondary',
     white: 'sysTextWhite',
     white2: 'sysTextWhite'
 };
@@ -103,6 +104,8 @@ var S_UploadTextButton = styled_components_1.default.label(templateObject_8 || (
         case 'red':
         case 'grey_01':
             return colorThemeDefault;
+        case 'grey2':
+            return colorThemeDefault;
         case 'white':
             return colorThemeWhite;
         case 'white2':

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

@@ -1,6 +1,7 @@
 import { AdminList } from './AdminList';
 import { AdminListHeader } from './AdminListHeader';
 import { AdminListItem } from './AdminListItem';
+import { BasicButtonGroup } from './BasicButtonGroup';
 import { BasicChatListItem } from './BasicChatListItem';
 import { BasicFormGroup } from './BasicFormGroup';
 import { BasicList } from './BasicList';
@@ -32,7 +33,9 @@ import { MainButton } from './MainButton';
 import { PageTitleTextGroup } from './PageTitleTextGroup';
 import { Radio } from './Radio';
 import { ReactionButton } from './ReactionButton';
+import { SegmentedButtonGroup } from './SegmentedButtonGroup';
 import { Select } from './Select';
+import { Slider } from './Slider';
 import { StatusBlock } from './StatusBlock';
 import { TextButton } from './TextButton';
 import { TextField } from './TextField';
@@ -43,4 +46,4 @@ import { UploadTextButton } from './UploadTextButton';
 import { UserDesktopNavBar } from './UserDesktopNavBar';
 import { UserDesktopSideTab } from './UserDesktopSideTab';
 import { UserDesktopTabBar } from './UserDesktopTabBar';
-export { AdminList, AdminListHeader, AdminListItem, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, Select, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };
+export { AdminList, AdminListHeader, AdminListItem, BasicButtonGroup, BasicChatListItem, BasicFormGroup, BasicList, BasicListItem, BlogTextField, BodyTextGroup, Card, CardList, ChatBubbleListItem, ChatList, Checkbox, Chip, ContextMenu, ContextMenuItem, DesktopAlertDialog, DesktopHeaderBar, DesktopTabBar, Dropdown, DynamicDesktopNavBar, DynamicDesktopNavBarTemplates, EditApplyTextField, FilterBar, FloatingActionButton, Hero, HorizontalFormGroup, IconButton, ImageSlide, LottieReactionButton, MainButton, PageTitleTextGroup, Radio, ReactionButton, SegmentedButtonGroup, Select, Slider, StatusBlock, TextButton, TextField, TextLabel, UploadIconButton, UploadMainButton, UploadTextButton, UserDesktopNavBar, UserDesktopTabBar, UserDesktopSideTab };

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

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Select = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
+exports.UserDesktopSideTab = exports.UserDesktopTabBar = exports.UserDesktopNavBar = exports.UploadTextButton = exports.UploadMainButton = exports.UploadIconButton = exports.TextLabel = exports.TextField = exports.TextButton = exports.StatusBlock = exports.Slider = exports.Select = exports.SegmentedButtonGroup = exports.ReactionButton = exports.Radio = exports.PageTitleTextGroup = exports.MainButton = exports.LottieReactionButton = exports.ImageSlide = exports.IconButton = exports.HorizontalFormGroup = exports.Hero = exports.FloatingActionButton = exports.FilterBar = exports.EditApplyTextField = exports.DynamicDesktopNavBarTemplates = exports.DynamicDesktopNavBar = exports.Dropdown = exports.DesktopTabBar = exports.DesktopHeaderBar = exports.DesktopAlertDialog = exports.ContextMenuItem = exports.ContextMenu = exports.Chip = exports.Checkbox = exports.ChatList = exports.ChatBubbleListItem = exports.CardList = exports.Card = exports.BodyTextGroup = exports.BlogTextField = exports.BasicListItem = exports.BasicList = exports.BasicFormGroup = exports.BasicChatListItem = exports.BasicButtonGroup = exports.AdminListItem = exports.AdminListHeader = exports.AdminList = void 0;
 var AdminList_1 = require("./AdminList");
 Object.defineProperty(exports, "AdminList", { enumerable: true, get: function () { return AdminList_1.AdminList; } });
 var AdminListHeader_1 = require("./AdminListHeader");
 Object.defineProperty(exports, "AdminListHeader", { enumerable: true, get: function () { return AdminListHeader_1.AdminListHeader; } });
 var AdminListItem_1 = require("./AdminListItem");
 Object.defineProperty(exports, "AdminListItem", { enumerable: true, get: function () { return AdminListItem_1.AdminListItem; } });
+var BasicButtonGroup_1 = require("./BasicButtonGroup");
+Object.defineProperty(exports, "BasicButtonGroup", { enumerable: true, get: function () { return BasicButtonGroup_1.BasicButtonGroup; } });
 var BasicChatListItem_1 = require("./BasicChatListItem");
 Object.defineProperty(exports, "BasicChatListItem", { enumerable: true, get: function () { return BasicChatListItem_1.BasicChatListItem; } });
 var BasicFormGroup_1 = require("./BasicFormGroup");
@@ -70,8 +72,12 @@ var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var ReactionButton_1 = require("./ReactionButton");
 Object.defineProperty(exports, "ReactionButton", { enumerable: true, get: function () { return ReactionButton_1.ReactionButton; } });
+var SegmentedButtonGroup_1 = require("./SegmentedButtonGroup");
+Object.defineProperty(exports, "SegmentedButtonGroup", { enumerable: true, get: function () { return SegmentedButtonGroup_1.SegmentedButtonGroup; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+var Slider_1 = require("./Slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 var StatusBlock_1 = require("./StatusBlock");
 Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return StatusBlock_1.StatusBlock; } });
 var TextButton_1 = require("./TextButton");

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

@@ -8,5 +8,5 @@ export { ContainersBox as WSContainersBox } from './layout/LayoutWS/ContainersBo
 export { LayoutWT } from './layout/LayoutWT';
 export { GlobalMenuContainer as WTGlobalMenuContainer } from './layout/LayoutWT/Containers';
 export { ContainersBox as WTContainersBox } from './layout/LayoutWT/ContainersBox';
-export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, Select as D_Select, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
+export { AdminList as D_AdminList, AdminListHeader as D_AdminListHeader, AdminListItem as D_AdminListItem, BasicButtonGroup as D_BasicButtonGroup, BasicChatListItem as D_BasicChatListItem, BasicFormGroup as D_BasicFormGroup, BasicList as D_BasicList, BasicListItem as D_BasicListItem, BlogTextField as D_BlogTextField, BodyTextGroup as D_BodyTextGroup, Card as D_Card, CardList as D_CardList, ChatBubbleListItem as D_ChatBubbleListItem, ChatList as D_ChatList, Checkbox as D_Checkbox, Chip as D_Chip, ContextMenu as D_ContextMenu, ContextMenuItem as D_ContextMenuItem, DesktopAlertDialog as D_DesktopAlertDialog, DesktopHeaderBar as D_DesktopHeaderBar, DesktopTabBar as D_DesktopTabBar, Dropdown as D_Dropdown, DynamicDesktopNavBar as D_DynamicDesktopNavBar, DynamicDesktopNavBarTemplates as D_DynamicDesktopNavBarTemplates, EditApplyTextField as D_EditApplyTextField, FilterBar as D_FilterBar, FloatingActionButton as D_FloatingActionButton, Hero as D_Hero, HorizontalFormGroup as D_HorizontalFormGroup, IconButton as D_IconButton, ImageSlide as D_ImageSlide, LottieReactionButton as D_LottieReactionButton, MainButton as D_MainButton, PageTitleTextGroup as D_PageTitleTextGroup, Radio as D_Radio, ReactionButton as D_ReactionButton, SegmentedButtonGroup as D_SegmentedButtonGroup, Select as D_Select, Slider as D_Slider, StatusBlock as D_StatusBlock, TextButton as D_TextButton, TextField as D_TextField, TextLabel as D_TextLabel, UploadIconButton as D_UploadIconButton, UploadMainButton as D_UploadMainButton, UploadTextButton as D_UploadTextButton, UserDesktopNavBar as D_UserDesktopNavBar, UserDesktopTabBar as D_UserDesktopTabBar, UserDesktopSideTab as D_UserDesktopSideTab } from './components';
 export { AnnotationSheet as D_AnnotationSheet, ContentSheet as D_ContentSheet, DesktopBasicModal as D_DesktopBasicModal, DesktopHeadlessModal as D_DesktopHeadlessModal, DesktopTutorialModal as D_DesktopTutorialModal, DesktopTutorialModalInfoType, SectionSheet as D_SectionSheet } from './panels';

package/dist/src/desktop/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
-exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = void 0;
+exports.D_StatusBlock = exports.D_Slider = exports.D_Select = exports.D_SegmentedButtonGroup = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_BasicButtonGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = void 0;
+exports.D_SectionSheet = exports.D_DesktopTutorialModal = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = void 0;
 // layoutWF
 var LayoutWF_1 = require("./layout/LayoutWF");
 Object.defineProperty(exports, "LayoutWF", { enumerable: true, get: function () { return LayoutWF_1.LayoutWF; } });
@@ -31,6 +31,7 @@ var components_1 = require("./components");
 Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return components_1.AdminList; } });
 Object.defineProperty(exports, "D_AdminListHeader", { enumerable: true, get: function () { return components_1.AdminListHeader; } });
 Object.defineProperty(exports, "D_AdminListItem", { enumerable: true, get: function () { return components_1.AdminListItem; } });
+Object.defineProperty(exports, "D_BasicButtonGroup", { enumerable: true, get: function () { return components_1.BasicButtonGroup; } });
 Object.defineProperty(exports, "D_BasicChatListItem", { enumerable: true, get: function () { return components_1.BasicChatListItem; } });
 Object.defineProperty(exports, "D_BasicFormGroup", { enumerable: true, get: function () { return components_1.BasicFormGroup; } });
 Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function () { return components_1.BasicList; } });
@@ -63,7 +64,9 @@ Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function
 Object.defineProperty(exports, "D_PageTitleTextGroup", { enumerable: true, get: function () { return components_1.PageTitleTextGroup; } });
 Object.defineProperty(exports, "D_Radio", { enumerable: true, get: function () { return components_1.Radio; } });
 Object.defineProperty(exports, "D_ReactionButton", { enumerable: true, get: function () { return components_1.ReactionButton; } });
+Object.defineProperty(exports, "D_SegmentedButtonGroup", { enumerable: true, get: function () { return components_1.SegmentedButtonGroup; } });
 Object.defineProperty(exports, "D_Select", { enumerable: true, get: function () { return components_1.Select; } });
+Object.defineProperty(exports, "D_Slider", { enumerable: true, get: function () { return components_1.Slider; } });
 Object.defineProperty(exports, "D_StatusBlock", { enumerable: true, get: function () { return components_1.StatusBlock; } });
 Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return components_1.TextButton; } });
 Object.defineProperty(exports, "D_TextField", { enumerable: true, get: function () { return components_1.TextField; } });

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { BasicButtonGroupValueOption } from '../../../common/types';
+export declare type BasicButtonGroupProps = {
+    size?: 'large' | 'medium' | 'small';
+    valueArray: BasicButtonGroupValueOption[];
+    state?: 'normal' | 'disabled';
+};
+declare function BasicButtonGroup({ size, valueArray, state }: BasicButtonGroupProps): JSX.Element;
+export default BasicButtonGroup;