@cashub/ui 0.48.19 → 0.48.21

package/section/SectionHeader.js

@@ -6,40 +6,65 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _header = _interopRequireDefault(require("../styles/config/header.style"));
-var _templateObject, _templateObject2;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const SectionHeader = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  padding: 0;\n  margin-bottom: calc(var(--spacing-s) * -1);\n\n  > * {\n    padding-bottom: var(--spacing-s);\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const SectionHeader = _styledComponents.default.div`
+  background: transparent;
+  padding: 0;
+  margin-bottom: calc(var(--spacing-s) * -1);
+
+  > * {
+    padding-bottom: var(--spacing-s);
+  }
+
+  ${_ref => {
   let {
     inline
   } = _ref;
-  return inline && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    "])));
-}, _ref2 => {
+  return inline && (0, _styledComponents.css)`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    `;
+}}
+
+  ${_ref2 => {
   let {
     flexStart
   } = _ref2;
   return flexStart && 'justify-content: flex-start;';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     border
   } = _ref3;
   return border && 'border-bottom: var(--border-width) solid var(--border-color);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     backgroundFill
   } = _ref4;
   return backgroundFill && 'background: var(--color-background1);';
-}, _ref5 => {
+}}
+
+  ${_ref5 => {
   let {
     backgroundReverse
   } = _ref5;
   return backgroundReverse && 'background: var(--color-background2);';
-}, _ref6 => {
+}}
+
+  ${_ref6 => {
   let {
     sticky
   } = _ref6;
-  return sticky && "position: sticky;\n    z-index:20;\n    top: ".concat(_header.default.height, ";\n  ");
-});
+  return sticky && `position: sticky;
+    z-index:20;
+    top: ${_header.default.height};
+  `;
+}}
+`;
 var _default = exports.default = SectionHeader;

package/section/SectionToolbar.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const SectionToolbar = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
+const SectionToolbar = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
 var _default = exports.default = SectionToolbar;

package/section/SectionToolbarItem.js

@@ -5,8 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const SectionToolbarItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > *:not(:first-child) {\n    margin-left: var(--spacing-s);\n  }\n"])));
+const SectionToolbarItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > *:not(:first-child) {
+    margin-left: var(--spacing-s);
+  }
+`;
 var _default = exports.default = SectionToolbarItem;

package/select/InputSelect.js

@@ -13,24 +13,16 @@ var _ListBox = _interopRequireDefault(require("./subComponent/ListBox"));
 var _Option = _interopRequireDefault(require("./subComponent/Option"));
 var _Options = _interopRequireDefault(require("./subComponent/Options"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["options", "value", "disabled", "onChange", "onSelect"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const InputSelect = _ref => {
   let {
-      options = [],
-      value,
-      disabled,
-      onChange,
-      onSelect
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    options = [],
+    value,
+    disabled,
+    onChange,
+    onSelect,
+    ...props
+  } = _ref;
   const [displayListBox, setDisplayListBox] = (0, _react.useState)(false);
   const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
   const [optionList, setOptionList] = (0, _react.useState)([]);
@@ -229,9 +221,10 @@ const InputSelect = _ref => {
       } else {
         selected = false;
       }
-      return _objectSpread(_objectSpread({}, option), {}, {
+      return {
+        ...option,
         selected
-      });
+      };
     }));
   }, [filteredOptions, parsedSelected]);
   (0, _react.useEffect)(() => {
@@ -243,16 +236,16 @@ const InputSelect = _ref => {
     onOutsideClick: () => {
       setDisplayListBox(false);
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread(_objectSpread({
-      autoComplete: "off"
-    }, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+      autoComplete: "off",
+      ...props,
       onChange: event => {
         onChange(event);
         if (!displayListBox) setDisplayListBox(true);
       },
       value: value,
-      ref: setListBoxElement
-    }, attributes.popper), {}, {
+      ref: setListBoxElement,
+      ...attributes.popper,
       placement: state && state.placement,
       onClick: handleDisplay,
       onKeyUp: handleKeyUp,
@@ -260,7 +253,7 @@ const InputSelect = _ref => {
         setDisplayListBox(true);
       },
       onKeyDown: handleKeyDown
-    })), optionItem.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
+    }), optionItem.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListBox.default, {
       style: styles.popper,
       $display: displayListBox,
       ref: setDropdownElement,

package/select/Select.js

@@ -28,14 +28,7 @@ var _Footer = _interopRequireDefault(require("./subComponent/Footer"));
 var _figure = require("../figure");
 var _image = require("../image");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const Select = _ref => {
   let {
     options,
@@ -84,9 +77,10 @@ const Select = _ref => {
   const newOptions = (0, _react.useMemo)(() => {
     if (!options) return;
     const newOptions = options.map(item => {
-      return _objectSpread({
-        isDisable: false
-      }, item);
+      return {
+        isDisable: false,
+        ...item
+      };
     });
     if (options.length > 0 && multiple && enableSelectAll) {
       newOptions.unshift({
@@ -132,9 +126,8 @@ const Select = _ref => {
     return [option.text, option.suffix].filter(text => text || text === 0).join(' ');
   }, []);
   const renderOptionContent = (0, _react.useCallback)(option => {
-    var _option$highlightText;
     const text = getOptionText(option);
-    const highlightText = (_option$highlightText = option.highlightText) === null || _option$highlightText === void 0 ? void 0 : _option$highlightText.toString();
+    const highlightText = option.highlightText?.toString();
     if (highlightText && text.includes(highlightText)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionLabel, {
         children: text.split(highlightText).map((textPart, index, textParts) => {
@@ -143,7 +136,7 @@ const Select = _ref => {
               $color: option.highlightColor,
               children: highlightText
             })]
-          }, "".concat(highlightText, "-").concat(index));
+          }, `${highlightText}-${index}`);
         })
       });
     }
@@ -219,13 +212,13 @@ const Select = _ref => {
         return id === value;
       });
     });
-    const actualOpt = targetOption !== null && targetOption !== void 0 && targetOption.child ? targetOption.child.find(_ref4 => {
+    const actualOpt = targetOption?.child ? targetOption.child.find(_ref4 => {
       let {
         id
       } = _ref4;
       return id === value;
     }) : targetOption;
-    if (actualOpt !== null && actualOpt !== void 0 && actualOpt.isDisable) return;
+    if (actualOpt?.isDisable) return;
 
     // 選取選項
     // 點選 all 全選
@@ -338,7 +331,7 @@ const Select = _ref => {
             id: option.text,
             children: option.text
           }), option.child.map(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
               role: "option",
               tabIndex: option.isDisable ? '-1' : '0',
               id: option.id,
@@ -348,7 +341,10 @@ const Select = _ref => {
               "aria-selected": option.selected,
               "aria-disabled": option.isDisable,
               disabled: option.isDisable,
-              children: renderOptionContent(option)
+              children: [showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                selected: option.selected,
+                disabled: option.isDisable
+              }), renderOptionContent(option)]
             }, option.id);
           })]
         }, option.text);
@@ -537,7 +533,8 @@ const Select = _ref => {
     if (!filteredOptions) return;
     setOptionList(filteredOptions.map(option => {
       if (option.child && option.child.length > 0) {
-        return _objectSpread(_objectSpread({}, option), {}, {
+        return {
+          ...option,
           child: option.child.map(option => {
             let selected = false;
             if (multiple && selectedAllOptions.includes(option.id.toString())) {
@@ -545,11 +542,12 @@ const Select = _ref => {
             } else if (selectedAllOptions === option.id.toString()) {
               selected = true;
             }
-            return _objectSpread(_objectSpread({}, option), {}, {
+            return {
+              ...option,
               selected
-            });
+            };
           })
-        });
+        };
       }
       let selected = false;
       if (multiple && selectedAllOptions.includes(option.id.toString())) {
@@ -557,9 +555,10 @@ const Select = _ref => {
       } else if (selectedAllOptions === option.id.toString()) {
         selected = true;
       }
-      return _objectSpread(_objectSpread({}, option), {}, {
+      return {
+        ...option,
         selected
-      });
+      };
     }));
   }, [filteredOptions, multiple, selectedAllOptions]);
 
@@ -570,9 +569,10 @@ const Select = _ref => {
       if (option.child && option.child.length > 0) {
         const tmpFilteredChildOptions = option.child.filter(option => getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
         if (tmpFilteredChildOptions.length > 0) {
-          tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
+          tmpFilteredOptions.push({
+            ...option,
             child: tmpFilteredChildOptions
-          }));
+          });
         }
       } else if (getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
         tmpFilteredOptions.push(option);
@@ -626,7 +626,7 @@ const Select = _ref => {
           "aria-haspopup": "listbox",
           "aria-expanded": display
         })]
-      }), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, _objectSpread(_objectSpread({
+      }), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, {
         role: "listbox",
         tabIndex: "0",
         id: id,
@@ -635,8 +635,8 @@ const Select = _ref => {
         onKeyDown: handleKeyDown,
         width: listBoxWidth,
         $display: display,
-        style: styles.popper
-      }, attributes.popper), {}, {
+        style: styles.popper,
+        ...attributes.popper,
         placement: state && state.placement,
         children: [allowSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBox.default, {
           ref: searchBoxElement,
@@ -652,7 +652,7 @@ const Select = _ref => {
         }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
           children: footer
         })]
-      })), document.body)]
+      }), document.body)]
     })
   });
 };
@@ -672,65 +672,140 @@ const Icon = _ref5 => {
     }), "\xA0"]
   });
 };
-const Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref6 => {
+const Combobox = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-height: 36px;
+  cursor: pointer;
+  position: relative;
+  background: transparent;
+  color: var(--font-on-background);
+  font-size: var(--font-body1);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius-l);
+  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);
+
+  &:focus {
+    ${_ref6 => {
   let {
     disabled
   } = _ref6;
-  return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
-}, _ref7 => {
+  return !disabled && `
+        border-color: var(--color-primary);
+        outline: none;
+      `;
+}};
+  }
+
+  ${_ref7 => {
   let {
     flexGrow
   } = _ref7;
   return !flexGrow && 'min-width: 160px;';
-}, _ref8 => {
+}}
+
+  ${_ref8 => {
   let {
     $display
   } = _ref8;
-  return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
-}, _ref9 => {
+  return $display && `
+      border-color: var(--color-primary);
+      outline: none;
+    `;
+}}
+
+  ${_ref9 => {
   let {
     disabled
   } = _ref9;
   return disabled && 'cursor: not-allowed;opacity: 0.5;';
-}, _ref10 => {
+}}
+  ${_ref10 => {
   let {
     placeholder
   } = _ref10;
   return placeholder && 'color: var(--font-on-mute);';
-}, _ref11 => {
+}}
+  
+  ${_ref11 => {
   let {
     fullWidth
   } = _ref11;
   return fullWidth ? 'width: 100%' : 'max-width: 320px';
-}, _ref12 => {
+}};
+
+  ${_ref12 => {
   let {
     large
   } = _ref12;
-  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
-}, _ref13 => {
+  return large && `
+      height: 40px;
+      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);
+    `;
+}}
+
+  ${_ref13 => {
   let {
     $fill
   } = _ref13;
-  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
-}, _ref14 => {
+  return $fill && `
+      background: var(--color-background2);
+      border-color: transparent;
+    `;
+}}
+
+  ${_ref14 => {
   let {
     fillReverse
   } = _ref14;
-  return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
-});
+  return fillReverse && `
+      background: var(--color-background1);
+      border-color: transparent;
+    `;
+}}
+`;
 Combobox.displayName = 'Combobox';
-const CloseButton = (0, _styledComponents.default)(_md.MdClose)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--color-primary);\n  font-size: var(--font-body1);\n  right: var(--spacing-l);\n\n  ", ";\n"])), _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    right: calc(var(--spacing) + var(--spacing-s));\n  "]))));
+const CloseButton = (0, _styledComponents.default)(_md.MdClose)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-primary);
+  font-size: var(--font-body1);
+  right: var(--spacing-l);
+
+  ${_media.default.tablet`
+    right: calc(var(--spacing) + var(--spacing-s));
+  `};
+`;
 CloseButton.displayName = 'CloseButton';
-const ExpandArrow = (0, _styledComponents.default)(_ti.TiArrowSortedDown)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--color-primary);\n  font-size: var(--font-body1);\n  right: var(--spacing-s);\n"])));
+const ExpandArrow = (0, _styledComponents.default)(_ti.TiArrowSortedDown)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-primary);
+  font-size: var(--font-body1);
+  right: var(--spacing-s);
+`;
 ExpandArrow.displayName = 'ExpandArrow';
-const Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 12px var(--spacing-s);\n"])));
+const Message = _styledComponents.default.p`
+  margin: 0;
+  padding: 12px var(--spacing-s);
+`;
 Message.displayName = 'Message';
-const OptionBadge = _styledComponents.default.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: var(--color-danger);\n  font-style: italic;\n"])));
-const OptionLabel = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  min-width: 0;\n"])));
-const OptionHighlight = _styledComponents.default.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _ref15 => {
+const OptionBadge = _styledComponents.default.span`
+  color: var(--color-danger);
+  font-style: italic;
+`;
+const OptionLabel = _styledComponents.default.div`
+  min-width: 0;
+`;
+const OptionHighlight = _styledComponents.default.span`
+  color: ${_ref15 => {
   let {
     $color
   } = _ref15;
   return $color || 'var(--color-danger)';
-});
+}};
+`;
 var _default = exports.default = Select;

package/select/subComponent/Checkbox.js

@@ -7,10 +7,8 @@ exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _md = require("react-icons/md");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 const Checkbox = _ref => {
   let {
     selected
@@ -20,10 +18,31 @@ const Checkbox = _ref => {
     children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
   });
 };
-const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 24px;\n  height: 24px;\n  border: var(--border-width) solid var(--border-color);\n  margin-right: var(--spacing-xs);\n  border-radius: 4px;\n\n  ", "\n\n  > svg {\n    position: absolute;\n    color: var(--font-on-primary);\n    font-size: var(--font-h3);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])), _ref2 => {
+const Container = _styledComponents.default.div`
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border: var(--border-width) solid var(--border-color);
+  margin-right: var(--spacing-xs);
+  border-radius: 4px;
+
+  ${_ref2 => {
   let {
     selected
   } = _ref2;
-  return selected && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: var(--color-primary);\n      border-color: var(--color-primary);\n    "])));
-});
+  return selected && (0, _styledComponents.css)`
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+    `;
+}}
+
+  > svg {
+    position: absolute;
+    color: var(--font-on-primary);
+    font-size: var(--font-h3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
 var _default = exports.default = Checkbox;

package/select/subComponent/Footer.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Footer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing-s);\n  border-top: 1px solid var(--border-color);\n"])));
+const Footer = _styledComponents.default.div`
+  padding: var(--spacing-s);
+  border-top: 1px solid var(--border-color);
+`;
 var _default = exports.default = Footer;

package/select/subComponent/ListBox.js

@@ -5,19 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  width: ", "px;\n  z-index: 85;\n"])), _ref => {
+const ListBox = _styledComponents.default.div`
+  visibility: ${_ref => {
   let {
     $display
   } = _ref;
   return $display ? 'visible' : 'hidden';
-}, _ref2 => {
+}};
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  width: ${_ref2 => {
   let {
     width
   } = _ref2;
   return width;
-});
+}}px;
+  z-index: 85;
+`;
 ListBox.displayName = 'ListBox';
 var _default = exports.default = ListBox;

package/select/subComponent/Option.js

@@ -5,21 +5,41 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-const Option = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  max-width: 100%;\n  word-break: break-all;\n  padding: 12px var(--spacing-s);\n  background: var(--color-background1);\n  transition: background 0.3s;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  ", "\n\n  ", "\n"])), _ref => {
+const Option = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  word-break: break-all;
+  padding: 12px var(--spacing-s);
+  background: var(--color-background1);
+  transition: background 0.3s;
+
+  &:hover {
+    background: var(--color-hover);
+  }
+
+  ${_ref => {
   let {
     selected,
     focus
   } = _ref;
-  return (selected || focus) && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: var(--color-hover);\n    "])));
-}, _ref2 => {
+  return (selected || focus) && (0, _styledComponents.css)`
+      background: var(--color-hover);
+    `;
+}}
+
+  ${_ref2 => {
   let {
     disabled
   } = _ref2;
-  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: not-allowed;\n    pointer-events: none;\n    color: var(--font-on-mute);\n  "])));
-});
+  return disabled && (0, _styledComponents.css)`
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--font-on-mute);
+  `;
+}}
+`;
 Option.displayName = 'Option';
 var _default = exports.default = Option;