pds-dev-kit-web 2.1.9 → 2.1.11

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

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

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -806,4 +806,26 @@ export interface UITheme {
     ui_editor_layout_control_panel: string;
     ui_editor_layout_property_panel: string;
     ui_editor_layout_navigation_panel_section_item_area_normal: string;
+    ui_editor_scroll_bar: string;
+    ui_editor_scroll_track: string;
+    ui_sw_sidebar_base: string;
+    ui_sw_sidebar_label_text_normal: string;
+    ui_sw_sidebar_item_text_normal: string;
+    ui_sw_sidebar_item_text_selected: string;
+    ui_sw_sidebar_label_icon_normal_01: string;
+    ui_sw_sidebar_item_icon_normal: string;
+    ui_sw_sidebar_item_icon_selected: string;
+    ui_sw_sidebar_badge_base_01: string;
+    ui_sw_sidebar_badge_base_02: string;
+    ui_sw_sidebar_badge_text_01: string;
+    ui_sw_sidebar_badge_text_02: string;
+    ui_sw_sidebar_divider: string;
+    ui_sw_sidebar_label_base_normal: string;
+    ui_sw_sidebar_label_base_hover: string;
+    ui_sw_sidebar_label_base_pressed: string;
+    ui_sw_sidebar_item_base_normal: string;
+    ui_sw_sidebar_item_base_hover: string;
+    ui_sw_sidebar_item_base_pressed: string;
+    ui_sw_sidebar_label_icon_normal_02: string;
+    ui_104: string;
 }

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

@@ -54,7 +54,7 @@ function BasicButtonGroup(_a) {
     };
     return ((0, jsx_runtime_1.jsx)(S_BasicButtonGroup, __assign({ "x-pds-name": "BasicButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { 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, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, iconFillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: hoveredButtonIndex === index, tooltipPosition: tooltipPosition, size: size }, { 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))] }), iconName + index));
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: hoveredButtonIndex === index, tooltipPosition: tooltipPosition, size: size }, { 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))] }), iconName + index));
         }) }), void 0));
 }
 var S_BasicButtonGroup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {

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

@@ -73,7 +73,7 @@ function SegmentedButtonGroup(_a) {
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop", selectionType: selectionType }, { children: valueArray.map(function (_a, index) {
             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, tooltipText = _a.tooltipText, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? 'center_bottom' : _d, _e = _a.iconColorTheme, iconColorTheme = _e === void 0 ? 'none' : _e;
-            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { 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', iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: index === currentButtonIndex, tooltipPosition: tooltipPosition, size: size }, { 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))] }), String(currentButtonValue)));
+            return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), onPointerEnter: function () { return setCurrentButtonIndex(index); }, onPointerLeave: function () { return setCurrentButtonIndex(null); } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, void 0), tooltipText && ((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", isTooltipOpen: index === currentButtonIndex, tooltipPosition: tooltipPosition, size: size }, { 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))] }), 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) {

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

@@ -5,7 +5,7 @@ export declare type Props = {
     max: number;
     step?: number;
     name?: string;
-    defaultValue?: string | number;
+    value: number;
     tooltipText?: PDSTextType;
     state?: 'normal' | 'disabled';
     prefixText?: PDSTextType;

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

@@ -24,13 +24,20 @@ 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 min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, value = _a.value, 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;
+    (0, react_1.useEffect)(function () {
+        if (!trackRef.current || !thumbRef.current) {
+            return;
+        }
+        var width = trackRef.current.getBoundingClientRect().width;
+        var thumbPosition = getThumbPositionOnTrack((value - min) / (max - min), value, width);
+        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
+    }, [value]);
     function getPercent(pointValue, width) {
         if (pointValue <= 0) {
             return 0;
@@ -43,47 +50,34 @@ function Slider(_a, ref) {
     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 getNewValue = 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;
+        return String(newValue);
     };
     var getThumbPositionOnTrack = function (percent, value, width) {
         var thumbOffset = getThumbOffset(percent, width);
-        return "calc(" + (Number(value) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
+        return "calc(" + ((Number(value) - min) / (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) {
+        if (inputRef.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) {
+        var newValue = getNewValue(clientX, left, width);
+        var prevInputValue = inputRef.current.value;
+        inputRef.current.value = String(newValue);
+        var newInputValue = inputRef.current.value;
+        if (prevInputValue === newInputValue) {
             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) {
@@ -113,12 +107,6 @@ function Slider(_a, ref) {
         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);
         }
@@ -137,7 +125,7 @@ function Slider(_a, ref) {
         }
         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": "desktop" }, { 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));
+    return ((0, jsx_runtime_1.jsxs)(S_SliderBox, __assign({ "x-pds-name": "Slider", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { 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, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, 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, value: value, 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) {
@@ -170,7 +158,7 @@ var S_Slider = styled_components_1.default.div(templateObject_4 || (templateObje
     }
     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 S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\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  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) {
@@ -178,19 +166,13 @@ var S_Track = styled_components_1.default.div(templateObject_5 || (templateObjec
     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 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  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  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;

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

@@ -417,7 +417,7 @@ var S_AfterTextBox = styled_components_1.default.div(templateObject_43 || (templ
     }
 });
 var S_IconWrapper = styled_components_1.default.div(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  height: 100%;\n  justify-content: center;\n  width: 16px;\n"])));
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n  ", "\n\n  ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  max-width: 320px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n  ", "\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"], ["\n  ", "\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  justify-content: center;\n  line-height: 1.2;\n  max-width: 240px;\n  overflow-wrap: break-word;\n  padding: ", ";\n  position: absolute;\n  text-align: left;\n  white-space: pre-wrap;\n  width: max-content;\n  word-break: keep-all;\n  z-index: 400;\n\n  ", ";\n\n  ", ";\n"])), caption2Regular, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_tooltip_base;
 }, function (_a) {
@@ -429,7 +429,7 @@ var S_TooltipWrapper = styled_components_1.default.div(templateObject_45 || (tem
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA + " " + theme.spacing.spacingB;
-}, caption2Regular, function (_a) {
+}, function (_a) {
     var isTooltipOpen = _a.isTooltipOpen;
     return !isTooltipOpen && 'display: none';
 }, function (_a) {

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

@@ -50,7 +50,7 @@ function BasicButtonGroup(_a) {
     };
     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, _d = _a.iconColorTheme, iconColorTheme = _d === void 0 ? 'none' : _d, 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: getColorKey(buttonState, iconColorTheme) }, void 0) }), iconName + index));
+            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, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }, 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) {

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

@@ -69,7 +69,7 @@ function SegmentedButtonGroup(_a) {
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectionType: selectionType }, { children: valueArray.map(function (_a) {
             var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d;
-            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', selectionType: selectionType, 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', iconColorTheme) }, void 0) }), String(currentButtonValue)));
+            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', selectionType: selectionType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }, 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) {

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

@@ -5,7 +5,7 @@ export declare type Props = {
     max: number;
     step?: number;
     name?: string;
-    defaultValue?: string | number;
+    value: number;
     tooltipText?: PDSTextType;
     state?: 'normal' | 'disabled';
     prefixText?: PDSTextType;

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

@@ -24,13 +24,20 @@ 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 min = _a.min, max = _a.max, _b = _a.step, step = _b === void 0 ? 1 : _b, name = _a.name, value = _a.value, 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;
+    (0, react_1.useEffect)(function () {
+        if (!trackRef.current || !thumbRef.current) {
+            return;
+        }
+        var width = trackRef.current.getBoundingClientRect().width;
+        var thumbPosition = getThumbPositionOnTrack((value - min) / (max - min), value, width);
+        updateFillTrackAndThumb(trackRef.current, thumbRef.current, thumbPosition);
+    }, [value]);
     function getPercent(pointValue, width) {
         if (pointValue <= 0) {
             return 0;
@@ -43,47 +50,34 @@ function Slider(_a, ref) {
     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 getNewValue = 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;
+        return String(newValue);
     };
     var getThumbPositionOnTrack = function (percent, value, width) {
         var thumbOffset = getThumbOffset(percent, width);
-        return "calc(" + (Number(value) / (max - min)) * 100 + "% + " + thumbOffset + "px)";
+        return "calc(" + ((Number(value) - min) / (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) {
+        if (inputRef.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) {
+        var newValue = getNewValue(clientX, left, width);
+        var prevInputValue = inputRef.current.value;
+        inputRef.current.value = String(newValue);
+        var newInputValue = inputRef.current.value;
+        if (prevInputValue === newInputValue) {
             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) {
@@ -113,12 +107,6 @@ function Slider(_a, ref) {
         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);
         }
@@ -137,7 +125,7 @@ function Slider(_a, ref) {
         }
         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));
+    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, onTouchStart: handleTouchStart }, { children: [(0, jsx_runtime_1.jsx)(S_Track, { ref: trackRef, isDisabled: state === 'disabled' }, void 0), (0, jsx_runtime_1.jsxs)(S_Thumb, __assign({ ref: thumbRef, 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, value: value, 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) {
@@ -170,7 +158,7 @@ var S_Slider = styled_components_1.default.div(templateObject_4 || (templateObje
     }
     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 S_Track = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  background-repeat: no-repeat;\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  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) {
@@ -178,19 +166,13 @@ var S_Track = styled_components_1.default.div(templateObject_5 || (templateObjec
     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 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  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  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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,12 +1,34 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.1.9]
+## [v2.1.10]
 ## daily|https://design.storybook.publ.biz/
 
 ### Components
-* Icon 수정 및 추가
-    * ic_accordion
-    * ic_download
-    * ic_post_storage
-    * ic_section_custom_32
-    * ic_section_custom_40
-    * ic_target
+* BasicButtonGroup
+    * iconFillType이 제대로 작동하도록 수정
+* SegmentedButtonGroup
+    * iconFillType이 제대로 작동하도록 수정
+* Icon
+    * ic_audio
+        * fill, line 추가
+    * ic_calendar
+        * fill, line 추가
+    * ic_embed
+        * fill, line 추가
+    * ic_icon
+        * fill, line 추가
+    * ic_list
+        * fill, line 추가
+    * ic_post_inquiry
+        * fill 추가
+    * ic_scrolling_text
+        * fill, line 추가
+    * ic_seller_page
+        * fill 추가
+    * ic_slider
+        * fill, line 추가
+* TextLabel
+    * 툴팁 텍스트의 행간을 1.2로 수정
+    * 툴팁 최대 너비를 320px -> 240px로 수정
+
+### Color
+* 컬러 키 값 23.07.29 15시 46분 기준 싱크