@cashub/ui 0.48.14 → 0.48.16

package/section/SectionHeader.js

@@ -6,65 +6,40 @@ 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; }
-const SectionHeader = _styledComponents.default.div`
-  background: transparent;
-  padding: 0;
-  margin-bottom: calc(var(--spacing-s) * -1);
-
-  > * {
-    padding-bottom: var(--spacing-s);
-  }
-
-  ${_ref => {
+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 => {
   let {
     inline
   } = _ref;
-  return inline && (0, _styledComponents.css)`
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    `;
-}}
-
-  ${_ref2 => {
+  return inline && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    "])));
+}, _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;
-    z-index:20;
-    top: ${_header.default.height};
-  `;
-}}
-`;
+  return sticky && "position: sticky;\n    z-index:20;\n    top: ".concat(_header.default.height, ";\n  ");
+});
 var _default = exports.default = SectionHeader;

package/section/SectionToolbar.js

@@ -5,14 +5,8 @@ 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 }; }
-const SectionToolbar = _styledComponents.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  > *:not(:first-child) {
-    margin-left: var(--spacing-s);
-  }
-`;
+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"])));
 var _default = exports.default = SectionToolbar;

package/section/SectionToolbarItem.js

@@ -5,13 +5,8 @@ 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 }; }
-const SectionToolbarItem = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-
-  > *:not(:first-child) {
-    margin-left: var(--spacing-s);
-  }
-`;
+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"])));
 var _default = exports.default = SectionToolbarItem;

package/select/InputSelect.js

@@ -13,16 +13,24 @@ 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,
-    ...props
-  } = _ref;
+      options = [],
+      value,
+      disabled,
+      onChange,
+      onSelect
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const [displayListBox, setDisplayListBox] = (0, _react.useState)(false);
   const [filteredOptions, setFilteredOptions] = (0, _react.useState)([]);
   const [optionList, setOptionList] = (0, _react.useState)([]);
@@ -221,10 +229,9 @@ const InputSelect = _ref => {
       } else {
         selected = false;
       }
-      return {
-        ...option,
+      return _objectSpread(_objectSpread({}, option), {}, {
         selected
-      };
+      });
     }));
   }, [filteredOptions, parsedSelected]);
   (0, _react.useEffect)(() => {
@@ -236,16 +243,16 @@ const InputSelect = _ref => {
     onOutsideClick: () => {
       setDisplayListBox(false);
     },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
-      autoComplete: "off",
-      ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread(_objectSpread({
+      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,
@@ -253,7 +260,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,7 +28,14 @@ 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,
@@ -77,10 +84,9 @@ const Select = _ref => {
   const newOptions = (0, _react.useMemo)(() => {
     if (!options) return;
     const newOptions = options.map(item => {
-      return {
-        isDisable: false,
-        ...item
-      };
+      return _objectSpread({
+        isDisable: false
+      }, item);
     });
     if (options.length > 0 && multiple && enableSelectAll) {
       newOptions.unshift({
@@ -122,6 +128,31 @@ const Select = _ref => {
     }
     return false;
   }, [displayMode, multiple]);
+  const getOptionText = (0, _react.useCallback)(option => {
+    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();
+    if (highlightText && text.includes(highlightText)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionLabel, {
+        children: text.split(highlightText).map((textPart, index, textParts) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+            children: [textPart, index < textParts.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionHighlight, {
+              $color: option.highlightColor,
+              children: highlightText
+            })]
+          }, "".concat(highlightText, "-").concat(index));
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionLabel, {
+      children: [option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
+        children: ["\xA0", option.suffix]
+      })]
+    });
+  }, [getOptionText]);
 
   // set focused option
   const handleFocusItem = (0, _react.useCallback)(element => {
@@ -188,13 +219,13 @@ const Select = _ref => {
         return id === value;
       });
     });
-    const actualOpt = targetOption?.child ? targetOption.child.find(_ref4 => {
+    const actualOpt = targetOption !== null && targetOption !== void 0 && targetOption.child ? targetOption.child.find(_ref4 => {
       let {
         id
       } = _ref4;
       return id === value;
     }) : targetOption;
-    if (actualOpt?.isDisable) return;
+    if (actualOpt !== null && actualOpt !== void 0 && actualOpt.isDisable) return;
 
     // 選取選項
     // 點選 all 全選
@@ -266,7 +297,7 @@ const Select = _ref => {
             }] = selectedOptions;
           } else {
             text = selectedOptions.map(value => {
-              return value.text;
+              return getOptionText(value);
             }).join(', ');
           }
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleText.default, {
@@ -275,14 +306,14 @@ const Select = _ref => {
         }
         if (selectedOptions[0].id === allOptionId) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
-            content: selectedOptions[0].text,
+            content: renderOptionContent(selectedOptions[0]),
             onClick: event => handleOnDeselect(event, selectedOptions[0].id),
             disabled: disabled
           }, selectedOptions[0].id);
         }
         return selectedOptions.map(value => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedMultipleTags.default, {
-            content: value.text,
+            content: renderOptionContent(value),
             onClick: event => handleOnDeselect(event, value.id),
             disabled: disabled
           }, value.id);
@@ -291,11 +322,11 @@ const Select = _ref => {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectedSingle.default, {
         children: [selectedOptions[0].icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           src: selectedOptions[0].icon
-        }), selectedOptions[0].text]
+        }), renderOptionContent(selectedOptions[0])]
       });
     }
     return placeholder;
-  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId]);
+  }, [placeholder, handleOnDeselect, multiple, displayMode, selectedOptions, disabled, allOptionId, getOptionText, renderOptionContent]);
   const optionItem = (0, _react.useMemo)(() => {
     if (optionList.length <= 0) return null;
     return optionList.map(option => {
@@ -307,7 +338,7 @@ const Select = _ref => {
             id: option.text,
             children: option.text
           }), option.child.map(option => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Option.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, {
               role: "option",
               tabIndex: option.isDisable ? '-1' : '0',
               id: option.id,
@@ -317,9 +348,7 @@ const Select = _ref => {
               "aria-selected": option.selected,
               "aria-disabled": option.isDisable,
               disabled: option.isDisable,
-              children: [option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
-                children: ["\xA0", option.suffix]
-              })]
+              children: renderOptionContent(option)
             }, option.id);
           })]
         }, option.text);
@@ -339,12 +368,10 @@ const Select = _ref => {
           disabled: option.isDisable
         }), option.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           src: option.icon
-        }), option.text, option.suffix && /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionBadge, {
-          children: ["\xA0", option.suffix]
-        })]
+        }), renderOptionContent(option)]
       }, option.id);
     });
-  }, [optionList, focusedOption, handleOnSelect, showCheckbox]);
+  }, [optionList, focusedOption, handleOnSelect, showCheckbox, renderOptionContent]);
 
   // show or hide listbox
   // and set listbox width according to combobox current width
@@ -510,8 +537,7 @@ const Select = _ref => {
     if (!filteredOptions) return;
     setOptionList(filteredOptions.map(option => {
       if (option.child && option.child.length > 0) {
-        return {
-          ...option,
+        return _objectSpread(_objectSpread({}, option), {}, {
           child: option.child.map(option => {
             let selected = false;
             if (multiple && selectedAllOptions.includes(option.id.toString())) {
@@ -519,12 +545,11 @@ const Select = _ref => {
             } else if (selectedAllOptions === option.id.toString()) {
               selected = true;
             }
-            return {
-              ...option,
+            return _objectSpread(_objectSpread({}, option), {}, {
               selected
-            };
+            });
           })
-        };
+        });
       }
       let selected = false;
       if (multiple && selectedAllOptions.includes(option.id.toString())) {
@@ -532,10 +557,9 @@ const Select = _ref => {
       } else if (selectedAllOptions === option.id.toString()) {
         selected = true;
       }
-      return {
-        ...option,
+      return _objectSpread(_objectSpread({}, option), {}, {
         selected
-      };
+      });
     }));
   }, [filteredOptions, multiple, selectedAllOptions]);
 
@@ -544,19 +568,18 @@ const Select = _ref => {
     const tmpFilteredOptions = [];
     newOptions.forEach(option => {
       if (option.child && option.child.length > 0) {
-        const tmpFilteredChildOptions = option.child.filter(option => option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
+        const tmpFilteredChildOptions = option.child.filter(option => getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
         if (tmpFilteredChildOptions.length > 0) {
-          tmpFilteredOptions.push({
-            ...option,
+          tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
             child: tmpFilteredChildOptions
-          });
+          }));
         }
-      } else if (option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
+      } else if (getOptionText(option).toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
         tmpFilteredOptions.push(option);
       }
     });
     setFilteredOptions(tmpFilteredOptions);
-  }, [search, newOptions]);
+  }, [search, newOptions, getOptionText]);
   (0, _react.useEffect)(() => {
     if (display) {
       setupFocus();
@@ -603,7 +626,7 @@ const Select = _ref => {
           "aria-haspopup": "listbox",
           "aria-expanded": display
         })]
-      }), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, {
+      }), /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListBox.default, _objectSpread(_objectSpread({
         role: "listbox",
         tabIndex: "0",
         id: id,
@@ -612,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,
@@ -629,7 +652,7 @@ const Select = _ref => {
         }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
           children: footer
         })]
-      }), document.body)]
+      })), document.body)]
     })
   });
 };
@@ -649,129 +672,65 @@ const Icon = _ref5 => {
     }), "\xA0"]
   });
 };
-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 => {
+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 => {
   let {
     disabled
   } = _ref6;
-  return !disabled && `
-        border-color: var(--color-primary);
-        outline: none;
-      `;
-}};
-  }
-
-  ${_ref7 => {
+  return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
+}, _ref7 => {
   let {
     flexGrow
   } = _ref7;
   return !flexGrow && 'min-width: 160px;';
-}}
-
-  ${_ref8 => {
+}, _ref8 => {
   let {
     $display
   } = _ref8;
-  return $display && `
-      border-color: var(--color-primary);
-      outline: none;
-    `;
-}}
-
-  ${_ref9 => {
+  return $display && "\n      border-color: var(--color-primary);\n      outline: none;\n    ";
+}, _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 && `
-      height: 40px;
-      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);
-    `;
-}}
-
-  ${_ref13 => {
+  return large && "\n      height: 40px;\n      padding: 12px calc(var(--spacing-s) * 2 + 8px) 12px var(--spacing-s);\n    ";
+}, _ref13 => {
   let {
     $fill
   } = _ref13;
-  return $fill && `
-      background: var(--color-background2);
-      border-color: transparent;
-    `;
-}}
-
-  ${_ref14 => {
+  return $fill && "\n      background: var(--color-background2);\n      border-color: transparent;\n    ";
+}, _ref14 => {
   let {
     fillReverse
   } = _ref14;
-  return fillReverse && `
-      background: var(--color-background1);
-      border-color: transparent;
-    `;
-}}
-`;
+  return fillReverse && "\n      background: var(--color-background1);\n      border-color: transparent;\n    ";
+});
 Combobox.displayName = 'Combobox';
-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));
-  `};
-`;
+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  "]))));
 CloseButton.displayName = 'CloseButton';
-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);
-`;
+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"])));
 ExpandArrow.displayName = 'ExpandArrow';
-const Message = _styledComponents.default.p`
-  margin: 0;
-  padding: 12px var(--spacing-s);
-`;
+const Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 12px var(--spacing-s);\n"])));
 Message.displayName = 'Message';
-const OptionBadge = _styledComponents.default.span`
-  color: var(--color-danger);
-  font-style: italic;
-`;
+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 => {
+  let {
+    $color
+  } = _ref15;
+  return $color || 'var(--color-danger)';
+});
 var _default = exports.default = Select;

package/select/subComponent/Checkbox.js

@@ -7,8 +7,10 @@ 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
@@ -18,31 +20,10 @@ const Checkbox = _ref => {
     children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
   });
 };
-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 => {
+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 => {
   let {
     selected
   } = _ref2;
-  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%);
-  }
-`;
+  return selected && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: var(--color-primary);\n      border-color: var(--color-primary);\n    "])));
+});
 var _default = exports.default = Checkbox;

package/select/subComponent/Footer.js

@@ -5,9 +5,8 @@ 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 }; }
-const Footer = _styledComponents.default.div`
-  padding: var(--spacing-s);
-  border-top: 1px solid var(--border-color);
-`;
+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"])));
 var _default = exports.default = Footer;