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

package/dist/src/desktop/components/Chip/Chip.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 __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]; } };
+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 __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 __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 });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
@@ -45,136 +61,315 @@ var hybrid_1 = require("../../../hybrid");
 var Icon_1 = require("../../../hybrid/components/Icon");
 var TextLabel_1 = require("../TextLabel");
 function Chip(_a) {
-    var _b = _a.displayType, displayType = _b === void 0 ? 'filter_single' : _b, text = _a.text, _c = _a.filterIconMode, filterIconMode = _c === void 0 ? 'none' : _c, _d = _a.iconFillType, iconFillType = _d === void 0 ? 'line' : _d, iconName = _a.iconName, overrideTextColorKey = _a.overrideTextColorKey, overrideBackgroundColorKey = _a.overrideBackgroundColorKey, value = _a.value, id = _a.id, activeChipId = _a.activeChipId, chipId = _a.chipId, onClickChip = _a.onClickChip, onClickXMarkIcon = _a.onClickXMarkIcon;
-    var isActive = (0, react_1.useMemo)(function () {
-        if (activeChipId !== undefined && chipId !== undefined) {
-            return activeChipId === chipId;
-        }
-        if (value !== undefined && id !== undefined) {
-            return value === id;
-        }
-        return false;
-    }, [activeChipId, chipId, value, id]);
-    var handleClickChip = function (e) {
-        if (onClickChip) {
-            onClickChip(e);
-        }
-    };
-    var handleClickXMarkIcon = function (e) {
-        e.stopPropagation();
-        if (onClickXMarkIcon) {
-            onClickXMarkIcon();
-        }
-    };
-    var chipType = function () {
-        switch (displayType) {
-            case 'category_choice':
-                return ((0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [!isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, fillType: "line", iconName: "ic_filter", colorKey: "ui_cpnt_chip_line_icon_01" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, fillType: "line", iconName: "ic_xmark", colorKey: "ui_cpnt_chip_fill_icon_active_01" })] }))] })));
-            case 'information':
-                return ((0, jsx_runtime_1.jsx)(S_InfoChip, __assign({ onClick: handleClickChip, overrideBackgroundColorKey: overrideBackgroundColorKey }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Regular", singleLineMode: "use", colorTheme: "sysTextPrimary", colorOverride: overrideTextColorKey, ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
-            case 'label':
-                return ((0, jsx_runtime_1.jsx)(S_LabelChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextTertiary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
-            case 'time':
-                return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
-            case 'removable':
-                return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
-            case 'information2':
-                return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
-            case 'information3':
-                return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
-            default:
-                return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({ "x-pds-name": "Chip", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: chipType() })));
+  var _b = _a.displayType,
+    displayType = _b === void 0 ? 'filter_single' : _b,
+    text = _a.text,
+    _c = _a.filterIconMode,
+    filterIconMode = _c === void 0 ? 'none' : _c,
+    _d = _a.iconFillType,
+    iconFillType = _d === void 0 ? 'line' : _d,
+    iconName = _a.iconName,
+    overrideTextColorKey = _a.overrideTextColorKey,
+    overrideBackgroundColorKey = _a.overrideBackgroundColorKey,
+    value = _a.value,
+    id = _a.id,
+    activeChipId = _a.activeChipId,
+    chipId = _a.chipId,
+    onClickChip = _a.onClickChip,
+    onClickXMarkIcon = _a.onClickXMarkIcon;
+  var isActive = (0, react_1.useMemo)(function () {
+    if (activeChipId !== undefined && chipId !== undefined) {
+      return activeChipId === chipId;
+    }
+    if (value !== undefined && id !== undefined) {
+      return value === id;
+    }
+    return false;
+  }, [activeChipId, chipId, value, id]);
+  var handleClickChip = function (e) {
+    if (onClickChip) {
+      onClickChip(e);
+    }
+  };
+  var handleClickXMarkIcon = function (e) {
+    e.stopPropagation();
+    if (onClickXMarkIcon) {
+      onClickXMarkIcon();
+    }
+  };
+  var chipType = function () {
+    switch (displayType) {
+      case 'category_choice':
+        return (0, jsx_runtime_1.jsxs)(S_CategoryChoiceChip, __assign({
+          isActive: isActive,
+          onClick: handleClickChip
+        }, {
+          children: [!isActive && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, {
+              size: 16,
+              fillType: "line",
+              iconName: "ic_filter",
+              colorKey: "ui_cpnt_chip_line_icon_01"
+            }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+              size: "spacing_a",
+              spacingType: "width"
+            })]
+          }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: text,
+            styleTheme: "caption1Regular",
+            singleLineMode: "use",
+            colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextPrimary',
+            ellipsisMode: "use",
+            lineLimit: 1,
+            wordBreak: "break_all"
+          }), isActive && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+              size: "spacing_a",
+              spacingType: "width"
+            }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, {
+              size: 12,
+              fillType: "line",
+              iconName: "ic_xmark",
+              colorKey: "ui_cpnt_chip_fill_icon_active_01"
+            })]
+          })]
+        }));
+      case 'information':
+        return (0, jsx_runtime_1.jsx)(S_InfoChip, __assign({
+          onClick: handleClickChip,
+          overrideBackgroundColorKey: overrideBackgroundColorKey
+        }, {
+          children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: text,
+            styleTheme: "caption2Regular",
+            singleLineMode: "use",
+            colorTheme: "sysTextPrimary",
+            colorOverride: overrideTextColorKey,
+            ellipsisMode: "use",
+            lineLimit: 1,
+            wordBreak: "break_all"
+          })
+        }));
+      case 'label':
+        return (0, jsx_runtime_1.jsx)(S_LabelChip, __assign({
+          onClick: handleClickChip
+        }, {
+          children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: text,
+            styleTheme: "caption2Bold",
+            singleLineMode: "use",
+            colorTheme: "sysTextTertiary",
+            ellipsisMode: "use",
+            lineLimit: 1,
+            wordBreak: "break_all"
+          })
+        }));
+      case 'time':
+        return (0, jsx_runtime_1.jsx)(S_TimeChip, __assign({
+          onClick: handleClickChip
+        }, {
+          children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: text,
+            styleTheme: "caption2Bold",
+            singleLineMode: "use",
+            colorTheme: "sysTextWhite",
+            ellipsisMode: "use",
+            lineLimit: 1,
+            wordBreak: "break_all"
+          })
+        }));
+      case 'removable':
+        return (0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({
+          onClick: handleClickChip
+        }, {
+          children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: text,
+            styleTheme: "caption1Regular",
+            singleLineMode: "use",
+            colorTheme: "sysTextSecondary",
+            ellipsisMode: "use",
+            lineLimit: 1,
+            wordBreak: "break_all"
+          }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({
+            onClick: handleClickXMarkIcon
+          }, {
+            children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, {
+              size: 12,
+              iconName: "ic_xmark",
+              fillType: "line",
+              colorKey: "ui_cpnt_chip_fill_icon_inactive"
+            })
+          }))]
+        }));
+      case 'information2':
+        return (0, jsx_runtime_1.jsxs)(S_Information2, {
+          children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, {
+            fillType: iconFillType,
+            iconName: iconName,
+            size: 16,
+            colorKey: "ui_cpnt_icon_usr_brandprimary"
+          }), text && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+              size: "spacing_a",
+              spacingType: "width"
+            }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+              text: text,
+              styleTheme: "caption1Bold",
+              singleLineMode: "use",
+              colorTheme: "usrTextBrandPrimary",
+              ellipsisMode: "use",
+              lineLimit: 1,
+              wordBreak: "break_all"
+            })]
+          })]
+        });
+      case 'information3':
+        return (0, jsx_runtime_1.jsxs)(S_Information3, {
+          children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, {
+            fillType: iconFillType,
+            iconName: iconName,
+            size: 16,
+            colorKey: "ui_cpnt_icon_sys_white"
+          }), text && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+              size: "spacing_a",
+              spacingType: "width"
+            }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+              text: text,
+              styleTheme: "caption1Bold",
+              singleLineMode: "use",
+              colorTheme: "sysTextWhite",
+              ellipsisMode: "use",
+              lineLimit: 1,
+              wordBreak: "break_all"
+            })]
+          })]
+        });
+      default:
+        return (0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({
+          isActive: isActive,
+          onClick: handleClickChip
+        }, {
+          children: [filterIconMode === 'left' && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, {
+              fillType: iconFillType,
+              iconName: iconName,
+              size: 16,
+              colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02'
+            }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+              size: "spacing_a",
+              spacingType: "width"
+            })]
+          }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+            text: text,
+            styleTheme: "caption1Regular",
+            singleLineMode: "use",
+            colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary',
+            ellipsisMode: "use",
+            lineLimit: 1,
+            wordBreak: "break_all"
+          })]
+        }));
+    }
+  };
+  return (0, jsx_runtime_1.jsx)(S_ChipWrapper, __assign({
+    "x-pds-name": "Chip",
+    "x-pds-element-type": "component",
+    "x-pds-device-type": "desktop"
+  }, {
+    children: chipType()
+  }));
 }
 exports.default = Chip;
 var S_CategoryChoiceChip = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 20px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 40px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
-    return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
+  var theme = _a.theme,
+    isActive = _a.isActive;
+  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : '';
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
-    return isActive ? '' : theme.ui_cpnt_chip_fill_base_inactive;
+  var theme = _a.theme,
+    isActive = _a.isActive;
+  return isActive ? '' : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
-    return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
+  var theme = _a.theme,
+    isActive = _a.isActive;
+  return isActive ? '' : "border: 1px solid ".concat(theme.ui_cpnt_chip_line_border_01);
 });
 var S_InfoChip = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 12px;\n  box-sizing: border-box;\n  display: flex;\n  height: 24px;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 24px;\n    line-height: 24px;\n  }\n"])), function (_a) {
-    var theme = _a.theme, overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
-    return overrideBackgroundColorKey
-        ? theme[overrideBackgroundColorKey]
-        : theme.ui_cpnt_chip_fill_base_inactive;
+  var theme = _a.theme,
+    overrideBackgroundColorKey = _a.overrideBackgroundColorKey;
+  return overrideBackgroundColorKey ? theme[overrideBackgroundColorKey] : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 });
 var S_RemovableChip = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_chip_fill_base_inactive;
+  var theme = _a.theme;
+  return theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 });
 var S_XIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: ", ";\n"], ["\n  cursor: pointer;\n  margin-left: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 });
 var S_FilterSingleChip = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
-    return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
+  var theme = _a.theme,
+    isActive = _a.isActive;
+  return isActive ? theme.ui_cpnt_chip_fill_base_active_01 : theme.ui_cpnt_chip_fill_base_inactive;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 });
 var S_LabelChip = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_chip_line_border_01;
+  var theme = _a.theme;
+  return theme.ui_cpnt_chip_line_border_01;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 });
 var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0 ", ";\n\n  & > div {\n    height: 20px;\n    line-height: 20px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_chip_base_playtime;
+  var theme = _a.theme;
+  return theme.ui_cpnt_chip_base_playtime;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 });
 var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 16px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 });
 var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_67;
+  var theme = _a.theme;
+  return theme.ui_67;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_140;
+  var theme = _a.theme;
+  return theme.ui_140;
 });
 var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"], ["\n  ", ";\n\n  background-color: ", ";\n  border: 1px solid ", ";\n"])), informationBase, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_37;
+  var theme = _a.theme;
+  return theme.ui_37;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_67;
+  var theme = _a.theme;
+  return theme.ui_67;
 });
 var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"], ["\n  display: inline-block;\n  min-width: fit-content;\n  vertical-align: bottom;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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