pds-dev-kit-web-test 2.5.705 → 2.5.707

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

@@ -1,43 +1,59 @@
 "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 __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
 };
-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]; } };
+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];
     }
-    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;
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __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 });
+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");
@@ -48,140 +64,213 @@ var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle
 var hybrid_1 = require("../../../hybrid");
 var constants_1 = require("./constants");
 function IconButton(_a) {
-    var tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'bottom' : _b, _c = _a.fillType, fillType = _c === void 0 ? 'fill' : _c, _d = _a.shapeType, shapeType = _d === void 0 ? 'rectangle' : _d, _e = _a.baseSize, baseSize = _e === void 0 ? 'small' : _e, baseColorKey = _a.baseColorKey, borderColorKey = _a.borderColorKey, _f = _a.iconSize, iconSize = _f === void 0 ? 24 : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, iconColorKey = _a.iconColorKey, _h = _a.shadow, shadow = _h === void 0 ? 'hidden' : _h, _j = _a.colorTheme, colorTheme = _j === void 0 ? 'none' : _j, _k = _a.type, type = _k === void 0 ? 'button' : _k, _l = _a.state, state = _l === void 0 ? 'normal' : _l, tabIndex = _a.tabIndex, onClick = _a.onClick, onMouseDown = _a.onMouseDown;
-    var _m = (0, react_1.useState)(false), isTooltipOpen = _m[0], setIsTooltipOpen = _m[1];
-    var tooltipPositionTargetRef = (0, react_1.useRef)(null);
-    var tooltipRef = (0, react_1.useRef)(null);
-    var _o = (0, react_1.useState)(null), tooltipSizeOffset = _o[0], setTooltipSizeOffset = _o[1];
-    var _p = (0, react_1.useState)(null), tooltipPositionOffset = _p[0], setTooltipPositionOffset = _p[1];
-    /**
-     * @when : 화면진입 시, dependency 변경되었을 때
-     * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
-     * @clear :
-     */
-    (0, react_1.useEffect)(function () {
-        if (!tooltipPositionTargetRef.current || !tooltipText) {
-            return;
-        }
-        if (!isTooltipOpen && tooltipRef.current) {
-            setTooltipSizeOffset(null);
-            return;
-        }
-        var _a = tooltipPositionTargetRef.current.getBoundingClientRect(), top = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
-        setTooltipPositionOffset({
-            top: top + window.scrollY,
-            right: right + window.scrollX,
-            bottom: bottom + window.scrollY,
-            left: left + window.scrollX
-        });
-        if (tooltipRef.current) {
-            setTooltipSizeOffset({
-                height: tooltipRef.current.offsetHeight,
-                width: tooltipRef.current.offsetWidth
-            });
-        }
-    }, [isTooltipOpen]);
-    var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
-        baseSize: constants_1.ICON_BUTTON_SIZE[baseSize],
-        sizeOffset: tooltipSizeOffset,
-        positionOffset: tooltipPositionOffset,
-        systemUIPosition: tooltipPosition.includes('_')
-            ? tooltipPosition
-            : "center_".concat(tooltipPosition)
+  var tooltipText = _a.tooltipText,
+    _b = _a.tooltipPosition,
+    tooltipPosition = _b === void 0 ? 'bottom' : _b,
+    _c = _a.fillType,
+    fillType = _c === void 0 ? 'fill' : _c,
+    _d = _a.shapeType,
+    shapeType = _d === void 0 ? 'rectangle' : _d,
+    _e = _a.baseSize,
+    baseSize = _e === void 0 ? 'small' : _e,
+    baseColorKey = _a.baseColorKey,
+    borderColorKey = _a.borderColorKey,
+    _f = _a.iconSize,
+    iconSize = _f === void 0 ? 24 : _f,
+    _g = _a.iconFillType,
+    iconFillType = _g === void 0 ? 'line' : _g,
+    iconName = _a.iconName,
+    iconColorKey = _a.iconColorKey,
+    _h = _a.shadow,
+    shadow = _h === void 0 ? 'hidden' : _h,
+    _j = _a.colorTheme,
+    colorTheme = _j === void 0 ? 'none' : _j,
+    _k = _a.type,
+    type = _k === void 0 ? 'button' : _k,
+    _l = _a.state,
+    state = _l === void 0 ? 'normal' : _l,
+    tabIndex = _a.tabIndex,
+    onClick = _a.onClick,
+    onMouseDown = _a.onMouseDown;
+  var _m = (0, react_1.useState)(false),
+    isTooltipOpen = _m[0],
+    setIsTooltipOpen = _m[1];
+  var tooltipPositionTargetRef = (0, react_1.useRef)(null);
+  var tooltipRef = (0, react_1.useRef)(null);
+  var _o = (0, react_1.useState)(null),
+    tooltipSizeOffset = _o[0],
+    setTooltipSizeOffset = _o[1];
+  var _p = (0, react_1.useState)(null),
+    tooltipPositionOffset = _p[0],
+    setTooltipPositionOffset = _p[1];
+  /**
+   * @when : 화면진입 시, dependency 변경되었을 때
+   * @expected : tooltipPositionTargetRef, tooltipRef 의 위치를 업데이트합니다.
+   * @clear :
+   */
+  (0, react_1.useEffect)(function () {
+    if (!tooltipPositionTargetRef.current || !tooltipText) {
+      return;
+    }
+    if (!isTooltipOpen && tooltipRef.current) {
+      setTooltipSizeOffset(null);
+      return;
+    }
+    var _a = tooltipPositionTargetRef.current.getBoundingClientRect(),
+      top = _a.top,
+      right = _a.right,
+      left = _a.left,
+      bottom = _a.bottom;
+    setTooltipPositionOffset({
+      top: top + window.scrollY,
+      right: right + window.scrollX,
+      bottom: bottom + window.scrollY,
+      left: left + window.scrollX
     });
-    var handleTooltipToggle = function (value) {
-        setIsTooltipOpen(value);
-    };
-    var handleClick = function (e) {
-        if (onClick) {
-            onClick(e);
-        }
-    };
-    var handleMouseDown = function (e) {
-        if (onMouseDown) {
-            onMouseDown(e);
-        }
-    };
-    var iconStateColorObj = {
-        fill: 'ui_cpnt_button_icon_on_primary',
-        line: 'ui_cpnt_button_icon_enabled'
-    };
-    var iconThemeColorLineObj = {
-        line1: 'ui_cpnt_button_icon_error',
-        line2: 'ui_cpnt_button_icon_primary'
-    };
-    var IconColorSelect = function () {
-        if (state === 'disabled') {
-            return 'ui_cpnt_button_icon_disabled';
-        }
-        if (colorTheme !== 'none' && fillType === 'line') {
-            return iconThemeColorLineObj[colorTheme];
-        }
-        if (iconColorKey) {
-            return iconColorKey;
-        }
-        if (fillType === 'fill' && baseColorKey === 'ui_cpnt_button_fill_base_transparent') {
-            return 'ui_cpnt_button_icon_enabled';
-        }
-        return iconStateColorObj[fillType];
-    };
-    return ((0, jsx_runtime_1.jsxs)(S_IconButton, __assign({ "x-pds-name": "IconButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop", ref: tooltipPositionTargetRef, fillType: fillType, shapeType: shapeType, baseSize: baseSize, baseColorKey: baseColorKey, borderColorKey: borderColorKey, shadow: shadow, colorTheme: colorTheme, type: type, state: state, disabled: state === 'disabled', tabIndex: tabIndex, onClick: handleClick, onMouseDown: handleMouseDown, onPointerEnter: function () { return tooltipText && handleTooltipToggle(true); }, onPointerLeave: function () { return tooltipText && handleTooltipToggle(false); } }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { iconName: iconName, size: iconSize, colorKey: IconColorSelect(), fillType: iconFillType }), isTooltipOpen && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss }, { children: tooltipText })), document.body) }))] })));
+    if (tooltipRef.current) {
+      setTooltipSizeOffset({
+        height: tooltipRef.current.offsetHeight,
+        width: tooltipRef.current.offsetWidth
+      });
+    }
+  }, [isTooltipOpen]);
+  var tooltipPositionCss = (0, SystemUIPositionGenerator_1.hoverTypeSystemUICssGenerator)({
+    baseSize: constants_1.ICON_BUTTON_SIZE[baseSize],
+    sizeOffset: tooltipSizeOffset,
+    positionOffset: tooltipPositionOffset,
+    systemUIPosition: tooltipPosition.includes('_') ? tooltipPosition : "center_".concat(tooltipPosition)
+  });
+  var handleTooltipToggle = function (value) {
+    setIsTooltipOpen(value);
+  };
+  var handleClick = function (e) {
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  var handleMouseDown = function (e) {
+    if (onMouseDown) {
+      onMouseDown(e);
+    }
+  };
+  var iconStateColorObj = {
+    fill: 'ui_cpnt_button_icon_on_primary',
+    line: 'ui_cpnt_button_icon_enabled'
+  };
+  var iconThemeColorLineObj = {
+    line1: 'ui_cpnt_button_icon_error',
+    line2: 'ui_cpnt_button_icon_primary'
+  };
+  var IconColorSelect = function () {
+    if (state === 'disabled') {
+      return 'ui_cpnt_button_icon_disabled';
+    }
+    if (colorTheme !== 'none' && fillType === 'line') {
+      return iconThemeColorLineObj[colorTheme];
+    }
+    if (iconColorKey) {
+      return iconColorKey;
+    }
+    if (fillType === 'fill' && baseColorKey === 'ui_cpnt_button_fill_base_transparent') {
+      return 'ui_cpnt_button_icon_enabled';
+    }
+    return iconStateColorObj[fillType];
+  };
+  return (0, jsx_runtime_1.jsxs)(S_IconButton, __assign({
+    "x-pds-name": "IconButton",
+    "x-pds-element-type": "component",
+    "x-pds-device-type": "desktop",
+    ref: tooltipPositionTargetRef,
+    fillType: fillType,
+    shapeType: shapeType,
+    baseSize: baseSize,
+    baseColorKey: baseColorKey,
+    borderColorKey: borderColorKey,
+    shadow: shadow,
+    colorTheme: colorTheme,
+    type: type,
+    state: state,
+    disabled: state === 'disabled',
+    tabIndex: tabIndex,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    onPointerEnter: function () {
+      return tooltipText && handleTooltipToggle(true);
+    },
+    onPointerLeave: function () {
+      return tooltipText && handleTooltipToggle(false);
+    }
+  }, {
+    children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, {
+      iconName: iconName,
+      size: iconSize,
+      colorKey: IconColorSelect(),
+      fillType: iconFillType
+    }), isTooltipOpen && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+      children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({
+        className: "TooltipWrapper",
+        ref: tooltipRef,
+        tooltipPositionCss: tooltipPositionCss
+      }, {
+        children: tooltipText
+      })), document.body)
+    })]
+  }));
 }
 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;
-    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
-        ? ''
-        : theme.ui_cpnt_button_fill_base_disabled;
+  var theme = _a.theme,
+    baseColorKey = _a.baseColorKey;
+  return baseColorKey === 'ui_cpnt_button_fill_base_transparent' ? '' : 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    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border: none;\n  position: relative;\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    position: absolute;\n    width: 100%;\n    ", "\n  }\n\n  &:hover:enabled::before {\n    background-color: ", ";\n  }\n\n  &:active:enabled::before {\n    background-color: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
+  var theme = _a.theme,
+    baseColorKey = _a.baseColorKey;
+  return baseColorKey ? theme[baseColorKey] : theme.ui_cpnt_button_fill_base_primary;
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
-        ? ''
-        : theme.ui_cpnt_button_fill_on_base_hover;
+  var theme = _a.theme,
+    baseColorKey = _a.baseColorKey;
+  return baseColorKey === 'ui_cpnt_button_fill_base_transparent' ? '' : theme.ui_cpnt_button_fill_on_base_hover;
 }, function (_a) {
-    var theme = _a.theme, baseColorKey = _a.baseColorKey;
-    return baseColorKey === 'ui_cpnt_button_fill_base_transparent'
-        ? ''
-        : theme.ui_cpnt_button_fill_on_base_pressed;
+  var theme = _a.theme,
+    baseColorKey = _a.baseColorKey;
+  return baseColorKey === 'ui_cpnt_button_fill_base_transparent' ? '' : theme.ui_cpnt_button_fill_on_base_pressed;
 }, function (_a) {
-    var state = _a.state;
-    return state === 'disabled' && fillDisabled;
+  var state = _a.state;
+  return state === 'disabled' && fillDisabled;
 });
 var lineDisabled = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_default;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_border_disabled;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_border_disabled;
 });
 var line = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  background-color: ", ";\n  border-color: ", ";\n\n  ", ";\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_base_default;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_base_default;
 }, function (_a) {
-    var theme = _a.theme, borderColorKey = _a.borderColorKey;
-    return borderColorKey ? theme[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
+  var theme = _a.theme,
+    borderColorKey = _a.borderColorKey;
+  return borderColorKey ? theme[borderColorKey] : theme.ui_cpnt_button_line_border_enabled;
 }, function (_a) {
-    var colorTheme = _a.colorTheme;
-    switch (colorTheme) {
-        case 'line1':
-            return line1ColorTheme;
-        case 'line2':
-            return line2ColorTheme;
-        default:
-            return '';
-    }
+  var colorTheme = _a.colorTheme;
+  switch (colorTheme) {
+    case 'line1':
+      return line1ColorTheme;
+    case 'line2':
+      return line2ColorTheme;
+    default:
+      return '';
+  }
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-color: ".concat(theme.ui_cpnt_button_line_base_hover, "\n  ;");
+  var theme = _a.theme;
+  return "background-color: ".concat(theme.ui_cpnt_button_line_base_hover, "\n  ;");
 }, function (_a) {
-    var theme = _a.theme;
-    return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, "\n  ;");
+  var theme = _a.theme;
+  return "background-color: ".concat(theme.ui_cpnt_button_line_base_pressed, "\n  ;");
 }, transitionStyle_1.ButtonTransition, function (_a) {
-    var state = _a.state;
-    return state === 'disabled' && lineDisabled;
+  var state = _a.state;
+  return state === 'disabled' && lineDisabled;
 });
 var xxlarge = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 96px;\n  width: 96px;\n"], ["\n  height: 96px;\n  width: 96px;\n"])));
 var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 48px;\n  width: 48px;\n"], ["\n  height: 48px;\n  width: 48px;\n"])));
@@ -189,49 +278,57 @@ var medium = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
 var small = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  width: 32px;\n"], ["\n  height: 32px;\n  width: 32px;\n"])));
 var xsmall = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
 var roundStyle = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
-    var baseSize = _a.baseSize;
-    return baseSize &&
-        { xxlarge: '24px', large: '14px', medium: '12px', small: '10px', xsmall: '8px' }[baseSize];
+  var baseSize = _a.baseSize;
+  return baseSize && {
+    xxlarge: '24px',
+    large: '14px',
+    medium: '12px',
+    small: '10px',
+    xsmall: '8px'
+  }[baseSize];
 });
 var line1ColorTheme = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_border_error;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_border_error;
 });
 var line2ColorTheme = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-color: ", ";\n"], ["\n  border-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_button_line_border_primary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_button_line_border_primary;
 });
 var iconButtonStyle = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  cursor: ", ";\n  display: flex;\n  justify-content: center;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
-    var state = _a.state;
-    return (state === 'normal' ? 'pointer' : 'default');
+  var state = _a.state;
+  return state === 'normal' ? 'pointer' : 'default';
 }, function (_a) {
-    var shapeType = _a.shapeType;
-    return shapeType && { circular: 'border-radius: 50%', rectangle: '', round: roundStyle }[shapeType];
+  var shapeType = _a.shapeType;
+  return shapeType && {
+    circular: 'border-radius: 50%',
+    rectangle: '',
+    round: roundStyle
+  }[shapeType];
 }, function (_a) {
-    var theme = _a.theme, shadow = _a.shadow;
-    return shadow === 'visible' && "box-shadow: ".concat(theme.boxShadow.elevation2);
+  var theme = _a.theme,
+    shadow = _a.shadow;
+  return shadow === 'visible' && "box-shadow: ".concat(theme.boxShadow.elevation2);
 }, function (_a) {
-    var fillType = _a.fillType;
-    return fillType &&
-        {
-            fill: fill,
-            line: line
-        }[fillType];
+  var fillType = _a.fillType;
+  return fillType && {
+    fill: fill,
+    line: line
+  }[fillType];
 }, function (_a) {
-    var baseSize = _a.baseSize;
-    return baseSize &&
-        {
-            xxlarge: xxlarge,
-            large: large,
-            medium: medium,
-            small: small,
-            xsmall: xsmall
-        }[baseSize];
+  var baseSize = _a.baseSize;
+  return baseSize && {
+    xxlarge: xxlarge,
+    large: large,
+    medium: medium,
+    small: small,
+    xsmall: xsmall
+  }[baseSize];
 });
 var S_IconButton = styled_components_1.default.button(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), iconButtonStyle);
 var S_TooltipWrapper = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
-    var tooltipPositionCss = _a.tooltipPositionCss;
-    return tooltipPositionCss;
+  var tooltipPositionCss = _a.tooltipPositionCss;
+  return tooltipPositionCss;
 });
 exports.default = IconButton;
-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;
+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;

package/dist/src/desktop/components/IconButton/constants.js

@@ -1,19 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TOOLTIP_POSITION_SPACING = exports.ICON_BUTTON_TOOLTIP_SPACING = exports.ICON_BUTTON_SIZE = void 0;
 exports.ICON_BUTTON_SIZE = {
-    xxlarge: 96,
-    large: 48,
-    medium: 40,
-    small: 32,
-    xsmall: 24
+  xxlarge: 96,
+  large: 48,
+  medium: 40,
+  small: 32,
+  xsmall: 24
 };
 exports.ICON_BUTTON_TOOLTIP_SPACING = 8;
 // NOTE - iconSize 크기에 따라 위치를 이동시켜주고, iconButtonSize에 간격까지 8px을 추가해준 값입니다.(IconButton과 tooltip의 간격)
 exports.TOOLTIP_POSITION_SPACING = {
-    xxlarge: "calc(".concat(exports.ICON_BUTTON_SIZE.xxlarge, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
-    large: "calc(".concat(exports.ICON_BUTTON_SIZE.large, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
-    medium: "calc(".concat(exports.ICON_BUTTON_SIZE.medium, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
-    small: "calc(".concat(exports.ICON_BUTTON_SIZE.small, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
-    xsmall: "calc(".concat(exports.ICON_BUTTON_SIZE.xsmall, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)")
-};
+  xxlarge: "calc(".concat(exports.ICON_BUTTON_SIZE.xxlarge, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+  large: "calc(".concat(exports.ICON_BUTTON_SIZE.large, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+  medium: "calc(".concat(exports.ICON_BUTTON_SIZE.medium, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+  small: "calc(".concat(exports.ICON_BUTTON_SIZE.small, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)"),
+  xsmall: "calc(".concat(exports.ICON_BUTTON_SIZE.xsmall, "px + ").concat(exports.ICON_BUTTON_TOOLTIP_SPACING, "px)")
+};

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

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