pds-dev-kit-web-test 2.7.93 → 2.7.95

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

@@ -1,189 +0,0 @@
-"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, 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);
-    (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;
-        }
-        if (pointValue >= width) {
-            return 1;
-        }
-        return pointValue / width;
-    }
-    function percentToValue(percent, min, max) {
-        return (max - min) * percent + min;
-    }
-    function getThumbOffset(percent, width) {
-        return ((width * percent - width / 2) / (width / 2)) * -10;
-    }
-    var getNewValue = function (clientX, left, width) {
-        var percent = getPercent(clientX - (left + 10), width - 20);
-        var newValue = percentToValue(percent, min, max);
-        return String(newValue);
-    };
-    var getThumbPositionOnTrack = function (percent, value, width) {
-        var thumbOffset = getThumbOffset(percent, width);
-        var calcValue = ((Number(value) - min) / (max - min)) * 100;
-        if (!calcValue || calcValue < 0) {
-            return "calc(0% + 10px)";
-        }
-        if (calcValue > 100) {
-            return "calc(100% - 10px)";
-        }
-        return "calc(".concat(calcValue, "% + ").concat(thumbOffset, "px)");
-    };
-    var updateFillTrackAndThumb = function (trackElement, thumbElement, thumbPosition) {
-        trackElement.style.backgroundSize = "".concat(thumbPosition, " 100%");
-        thumbElement.style.left = thumbPosition;
-    };
-    var changeSliderValue = function (clientX) {
-        if (inputRef.current === null || trackRef.current === null) {
-            return;
-        }
-        var _a = trackRef.current.getBoundingClientRect(), left = _a.left, width = _a.width;
-        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;
-        }
-        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 (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": "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" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" })] })), (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' }), (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 }), !!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" }) }))] }))] })) })), suffixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { spacingType: "width", size: "spacing_b" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: suffixText, styleTheme: "caption2Bold", colorTheme: state === 'normal' ? 'sysTextSecondary' : 'sysTextTertiary', singleLineMode: "use" })] }))] })));
-}
-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 "".concat(theme.spacing.spacingA, " ").concat(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  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) {
-    var theme = _a.theme, isDisabled = _a.isDisabled;
-    return isDisabled
-        ? "linear-gradient(".concat(theme.ui_cpnt_slider_track_disabled, ", ").concat(theme.ui_cpnt_slider_track_disabled, ")")
-        : "linear-gradient(".concat(theme.ui_cpnt_slider_track_active, ", ").concat(theme.ui_cpnt_slider_track_active, ")");
-});
-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 ".concat(theme.ui_cpnt_slider_thumb_pressed_circle) : 'none';
-}, function (_a) {
-    var theme = _a.theme, isDragging = _a.isDragging, isDisabled = _a.isDisabled;
-    return !isDragging && !isDisabled && "0 0 0 8px ".concat(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

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

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

@@ -1,8 +0,0 @@
-"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/Snackbar/Snackbar.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'center';
-export interface BaseSnackbarProps {
-    text: string;
-    actionBtnText?: string;
-    position?: SnackbarPosition;
-    closeBtnMode?: 'none' | 'use';
-    duration?: number;
-    anchorRef?: React.RefObject<HTMLElement>;
-    onActionBtnClick?: () => void;
-}
-export interface SnackbarProps extends BaseSnackbarProps {
-    id?: string | number;
-    onClose?: () => void;
-}
-declare const Snackbar: React.FC<SnackbarProps>;
-export default Snackbar;

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

@@ -1,221 +0,0 @@
-"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 react_dom_1 = require("react-dom");
-var panels_1 = require("../../panels");
-var components_1 = require("../../../hybrid/components");
-var styled_components_1 = __importDefault(require("styled-components"));
-var IconButton_1 = require("../IconButton");
-var TextButton_1 = require("../TextButton");
-var TextLabel_1 = require("../TextLabel");
-var Snackbar = function (_a) {
-    var id = _a.id, text = _a.text, _b = _a.actionBtnText, actionBtnText = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.closeBtnMode, closeBtnMode = _d === void 0 ? 'none' : _d, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose;
-    var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
-    var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
-    var timerRef = (0, react_1.useRef)();
-    /*
-     * 마운트 시 애니메이션
-     */
-    (0, react_1.useEffect)(function () {
-        var showTimer = setTimeout(function () {
-            setIsVisible(true);
-        }, 10);
-        return function () { return clearTimeout(showTimer); };
-    }, [id]);
-    /*
-     * duration 타이머
-     */
-    (0, react_1.useEffect)(function () {
-        if (duration > 0) {
-            timerRef.current = setTimeout(function () {
-                handleClose();
-            }, duration);
-        }
-        return function () {
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
-            }
-        };
-    }, [id, duration]);
-    /*
-     * 스크롤, 리사이즈시 포지션 업데이트
-     */
-    (0, react_1.useEffect)(function () {
-        var updatePosition = function () {
-            if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
-                var rect = anchorRef.current.getBoundingClientRect();
-                var style = getAnchorBasedStyle(position, rect);
-                setContainerStyle(style);
-            }
-            else {
-                var style = getViewportBasedStyle(position);
-                setContainerStyle(style);
-            }
-        };
-        // 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
-        var initialTimer = setTimeout(updatePosition, 0);
-        if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
-            window.addEventListener('resize', updatePosition);
-            // ResizeObserver로 anchorRef 요소의 크기 변화 감지
-            var resizeObserver_1 = new ResizeObserver(updatePosition);
-            resizeObserver_1.observe(anchorRef.current);
-            return function () {
-                clearTimeout(initialTimer);
-                window.removeEventListener('resize', updatePosition);
-                resizeObserver_1.disconnect();
-            };
-        }
-        updatePosition();
-        return function () {
-            clearTimeout(initialTimer);
-        };
-    }, [position, anchorRef]);
-    var handleClose = function () {
-        setIsVisible(false);
-        if (onClose) {
-            setTimeout(function () {
-                onClose();
-            }, 300);
-        }
-    };
-    var getViewportBasedStyle = function (position) {
-        var base = {
-            position: 'fixed',
-            zIndex: 9999
-        };
-        var offset = 24;
-        switch (position) {
-            case 'top-left':
-                return __assign(__assign({}, base), { top: offset, left: offset });
-            case 'top-center':
-                return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
-            case 'top-right':
-                return __assign(__assign({}, base), { top: offset, right: offset });
-            case 'right-top':
-                return __assign(__assign({}, base), { top: offset, right: offset });
-            case 'right-center':
-                return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
-            case 'right-bottom':
-                return __assign(__assign({}, base), { bottom: offset, right: offset });
-            case 'bottom-right':
-                return __assign(__assign({}, base), { bottom: offset, right: offset });
-            case 'bottom-center':
-                return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
-            case 'bottom-left':
-                return __assign(__assign({}, base), { bottom: offset, left: offset });
-            case 'left-bottom':
-                return __assign(__assign({}, base), { bottom: offset, left: offset });
-            case 'left-center':
-                return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
-            case 'left-top':
-                return __assign(__assign({}, base), { top: offset, left: offset });
-            case 'center':
-                return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
-            default:
-                return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
-        }
-    };
-    var getAnchorBasedStyle = function (position, rect) {
-        var base = {
-            position: 'fixed',
-            zIndex: 9999
-        };
-        var offset = 24;
-        switch (position) {
-            case 'top-left':
-                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
-            case 'top-center':
-                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
-            case 'top-right':
-                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
-            case 'right-top':
-                return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
-            case 'right-center':
-                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
-            case 'right-bottom':
-                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
-            case 'bottom-right':
-                return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
-            case 'bottom-center':
-                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
-            case 'bottom-left':
-                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
-            case 'left-bottom':
-                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
-            case 'left-center':
-                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
-            case 'left-top':
-                return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
-            case 'center':
-                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
-            default:
-                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
-        }
-    };
-    var getMaxWidthStyles = function () {
-        // anchor가 있는 경우
-        if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
-            var rect = anchorRef.current.getBoundingClientRect();
-            if (position.includes('top-') || position.includes('bottom-') || position === 'center') {
-                return {
-                    maxWidth: "".concat(rect.width - 48, "px"),
-                    width: 'max-content'
-                };
-            }
-        }
-        // anchor가 없으면 기본값
-        return {
-            maxWidth: '640px',
-            width: 'max-content'
-        };
-    };
-    var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: __assign(__assign({}, containerStyle), getMaxWidthStyles()) }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "100%", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnText && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnText, colorTheme: "grey3", size: "xsmall", onClick: onActionBtnClick })), closeBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleClose })), closeBtnMode === 'none' && actionBtnText && ((0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }))] })] })) })) })));
-    return (0, react_dom_1.createPortal)(snackbarContent, document.body);
-};
-var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  width: max-content;\n  & > * {\n    pointer-events: auto;\n  }\n"], ["\n  pointer-events: none;\n  width: max-content;\n  & > * {\n    pointer-events: auto;\n  }\n"])));
-var getInitialTransform = function (position) {
-    if (position.startsWith('top-'))
-        return 'translateY(-10px)';
-    if (position.startsWith('bottom-'))
-        return 'translateY(10px)';
-    if (position.startsWith('left-'))
-        return 'translateX(-10px)';
-    if (position.startsWith('right-'))
-        return 'translateX(10px)';
-    if (position === 'center')
-        return 'scale(0.95)';
-    return 'translateY(0)';
-};
-var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  opacity: ", ";\n  transform: ", ";\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  opacity: ", ";\n  transform: ", ";\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  width: 100%;\n"])), function (_a) {
-    var isVisible = _a.isVisible;
-    return (isVisible ? 1 : 0);
-}, function (_a) {
-    var isVisible = _a.isVisible, position = _a.position;
-    return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
-});
-var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
-exports.default = Snackbar;
-var templateObject_1, templateObject_2, templateObject_3;

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

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

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

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Snackbar = void 0;
-var Snackbar_1 = require("./Snackbar");
-Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });

package/dist/src/desktop/components/Snackbar/provider.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { BaseSnackbarProps } from './Snackbar';
-interface SnackbarContextType {
-    showSnackbar: (props: BaseSnackbarProps) => void;
-    hideSnackbar: (id: string) => void;
-}
-export declare const SnackbarProvider: ({ children }: {
-    children: ReactNode;
-}) => JSX.Element;
-export declare const useSnackbar: () => SnackbarContextType;
-export {};

package/dist/src/desktop/components/Snackbar/provider.js

@@ -1,43 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSnackbar = exports.SnackbarProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Snackbar_1 = __importDefault(require("./Snackbar"));
-var SnackbarContext = (0, react_1.createContext)(null);
-var SnackbarProvider = function (_a) {
-    var children = _a.children;
-    var _b = (0, react_1.useState)(null), snackbar = _b[0], setSnackbar = _b[1];
-    var value = (0, react_1.useMemo)(function () { return ({
-        showSnackbar: function (props) {
-            var id = crypto.randomUUID();
-            setSnackbar(__assign(__assign({}, props), { id: id }));
-        },
-        hideSnackbar: function () {
-            setSnackbar(null);
-        }
-    }); }, []);
-    return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbar && ((0, jsx_runtime_1.jsx)(Snackbar_1.default, __assign({}, snackbar, { onClose: function () { return value.hideSnackbar(); } }), snackbar.id))] })));
-};
-exports.SnackbarProvider = SnackbarProvider;
-var useSnackbar = function () {
-    var context = (0, react_1.useContext)(SnackbarContext);
-    if (!context)
-        throw new Error('useSnackbar must be used within a SnackbarProvider');
-    return context;
-};
-exports.useSnackbar = useSnackbar;

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { PDSTextType } from '../../../common';
-export type StatusBlockProps = {
-    text?: PDSTextType;
-    size?: 'large' | 'medium' | 'small';
-    state?: 'basic' | 'standby' | 'proceeding' | 'cancel' | 'end' | 'error';
-    width?: number | 'responsive';
-};
-export type StyleProps = {
-    $width?: number | 'responsive';
-};
-declare function StatusBlock({ text, size, state, width }: StatusBlockProps): JSX.Element;
-export default StatusBlock;

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

@@ -1,105 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("styled-components"));
-var TextLabel_1 = require("../TextLabel");
-function StatusBlock(_a) {
-    var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.state, state = _c === void 0 ? 'basic' : _c, _d = _a.width, width = _d === void 0 ? 'responsive' : _d;
-    var textLabelStyleThemeObj = {
-        large: 'body1Bold',
-        medium: 'body1Bold',
-        small: 'body2Bold'
-    };
-    return ((0, jsx_runtime_1.jsx)(S_StatusBlock, __assign({ "x-pds-name": "StatusBlock", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, state: state, "$width": width }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textLabelStyleThemeObj[size], textAlign: "center", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
-}
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 48px;\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])));
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 14px;\n  height: 40px;\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])));
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])));
-var basic = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_statusblock_basic;
-});
-var standby = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_statusblock_standby;
-});
-var proceeding = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_statusblock_proceeding;
-});
-var cancel = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_statusblock_cancel;
-});
-var end = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_statusblock_end;
-});
-var error = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_statusblock_error;
-});
-var S_StatusBlock = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n\n  ", "\n  ", ";\n\n  & > div {\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: ", ";\n\n  ", "\n  ", ";\n\n  & > div {\n    width: 100%;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
-}, function (_a) {
-    var $width = _a.$width;
-    return ($width === 'responsive' ? '100%' : "".concat($width, "px"));
-}, function (_a) {
-    var size = _a.size;
-    return size && { large: large, medium: medium, small: small }[size];
-}, function (_a) {
-    var state = _a.state;
-    return state &&
-        {
-            basic: basic,
-            standby: standby,
-            proceeding: proceeding,
-            cancel: cancel,
-            end: end,
-            error: error
-        }[state];
-});
-exports.default = StatusBlock;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

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

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

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusBlock = void 0;
-var StatusBlock_1 = require("./StatusBlock");
-Object.defineProperty(exports, "StatusBlock", { enumerable: true, get: function () { return __importDefault(StatusBlock_1).default; } });