@cashub/ui 0.48.6 → 0.48.8

package/form/Input.js

@@ -6,61 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
+var _templateObject, _templateObject2;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Input = _styledComponents.default.input`
-  display: block;
-  width: 100%;
-  height: 36px;
-  border: var(--border-width) solid var(--border-color);
-  padding: 10px var(--spacing-s);
-  border-radius: var(--border-radius-l);
-  background: transparent;
-  color: var(--font-on-background);
-  transition: 0.3s;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  &:focus {
-    border: var(--border-width) solid var(--color-primary);
-    outline: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  ${(0, _inputPlaceholder.default)`
-    color: var(--font-on-mute);
-  `}
-
-  ${_ref => {
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Input = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  height: 36px;\n  border: var(--border-width) solid var(--border-color);\n  padding: 10px var(--spacing-s);\n  border-radius: var(--border-radius-l);\n  background: transparent;\n  color: var(--font-on-background);\n  transition: 0.3s;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  &:focus {\n    border: var(--border-width) solid var(--color-primary);\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", ";\n"])), (0, _inputPlaceholder.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))), _ref => {
   let {
     hidden
   } = _ref;
   return hidden && 'display: none;';
-}}
-
-  ${_ref2 => {
+}, _ref2 => {
   let {
     borderRadiusS
   } = _ref2;
   return borderRadiusS && 'border-radius: var(--border-radius-s);';
-}}
-
-  ${_ref3 => {
+}, _ref3 => {
   let {
     alignCenter
   } = _ref3;
   return alignCenter && 'text-align: center;';
-}}
-
-  ${_ref4 => {
+}, _ref4 => {
   let {
     autoWidth
   } = _ref4;
   return autoWidth && 'width: auto;';
-}};
-`;
+});
 var _default = exports.default = Input;

package/form/Label.js

@@ -5,57 +5,33 @@ 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 Label = _styledComponents.default.label`
-  display: inline-block;
-  color: var(--font-on-background);
-  font-size: var(--font-body1);
-  word-break: break-word;
-  white-space: pre-wrap;
-  margin-bottom: var(--spacing-xs);
-
-  ${_ref => {
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  word-break: break-word;\n  white-space: pre-wrap;\n  margin-bottom: var(--spacing-xs);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* use float to make element align to right */\n  /* use text-align to make all text(multiple line) align to right */\n  ", "\n\n  ", "\n"])), _ref => {
   let {
     required
   } = _ref;
-  return required && `&:after {
-      content: ' *';
-      color: var(--color-danger);
-    }
-  `;
-}}
-
-  ${_ref2 => {
+  return required && "&:after {\n      content: ' *';\n      color: var(--color-danger);\n    }\n  ";
+}, _ref2 => {
   let {
     noMarginBottom
   } = _ref2;
   return noMarginBottom && 'margin-bottom: 0;';
-}}
-
-  ${_ref3 => {
+}, _ref3 => {
   let {
     noBreakWord
   } = _ref3;
   return noBreakWord && 'word-break: keep-all;';
-}}
-
-  /* use float to make element align to right */
-  /* use text-align to make all text(multiple line) align to right */
-  ${_ref4 => {
+}, _ref4 => {
   let {
     alignRight
   } = _ref4;
-  return alignRight && `
-      text-align: right;
-      float: right;
-    `;
-}}
-
-  ${_ref5 => {
+  return alignRight && "\n      text-align: right;\n      float: right;\n    ";
+}, _ref5 => {
   let {
     disabled
   } = _ref5;
   return disabled && 'opacity: 0.5;';
-}}
-`;
+});
 var _default = exports.default = Label;

package/form/MutedText.js

@@ -5,17 +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 }; }
-const MutedText = _styledComponents.default.span`
-  display: block;
-  font-size: var(--font-caption);
-  color: var(--font-on-mute);
-  text-align: ${_ref => {
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const MutedText = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  font-size: var(--font-caption);\n  color: var(--font-on-mute);\n  text-align: ", ";\n  margin-top: var(--spacing-xs);\n"])), _ref => {
   let {
     alignRight
   } = _ref;
   return alignRight ? 'right' : 'left';
-}};
-  margin-top: var(--spacing-xs);
-`;
+});
 var _default = exports.default = MutedText;

package/form/PasswordInput.js

@@ -10,38 +10,31 @@ var _Input = _interopRequireDefault(require("./Input"));
 var _button = require("../button");
 var _bi = require("react-icons/bi");
 var _jsxRuntime = require("react/jsx-runtime");
+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) } })); }
+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 _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const PasswordInput = _ref => {
-  let {
-    ...props
-  } = _ref;
+  let props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   const [type, setType] = (0, _react.useState)('password');
   const toggleType = () => {
     setType(type === 'password' ? 'text' : 'password');
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
-      ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, _objectSpread(_objectSpread({}, props), {}, {
       type: type
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.IconButton, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_button.IconButton, {
       size: "small",
       onClick: toggleType,
       children: [type === 'password' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiHide, {}), type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_bi.BiShow, {})]
     })]
   });
 };
-const Container = _styledComponents.default.div`
-  position: relative;
-
-  ${_Input.default} {
-    padding-right: 40px;
-  }
-
-  ${_button.IconButton} {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0.5rem;
-  }
-`;
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", " {\n    padding-right: 40px;\n  }\n\n  ", " {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0.5rem;\n  }\n"])), _Input.default, _button.IconButton);
 var _default = exports.default = PasswordInput;

package/form/RadioButton.js

@@ -8,9 +8,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _Label = _interopRequireDefault(require("./Label"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 RadioButton = _ref => {
   let {
     htmlFor,
@@ -38,66 +40,17 @@ const RadioButton = _ref => {
     })]
   });
 };
-const StyledCheckbox = (0, _styledComponents.default)(_Input.default)`
-  display: none;
-
-  &:checked + span {
-    > div {
-      &:before {
-        display: block;
-      }
-    }
-  }
-`;
-const StyledLabel = (0, _styledComponents.default)(_Label.default)`
-  margin-right: var(--spacing-xs);
-
-  > span {
-    ${_ref2 => {
+const StyledCheckbox = (0, _styledComponents.default)(_Input.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n\n  &:checked + span {\n    > div {\n      &:before {\n        display: block;\n      }\n    }\n  }\n"])));
+const StyledLabel = (0, _styledComponents.default)(_Label.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: var(--spacing-xs);\n\n  > span {\n    ", "\n    display: flex;\n    align-items: center;\n\n    > div {\n      margin-right: var(--spacing-xs);\n      border-radius: var(--border-radius-round);\n\n      width: 24px;\n      height: 24px;\n\n      &:before {\n        display: none;\n      }\n    }\n  }\n\n  ", "\n"])), _ref2 => {
   let {
     disabled
   } = _ref2;
-  return disabled && (0, _styledComponents.css)`
-        opacity: 0.5;
-      `;
-}}
-    display: flex;
-    align-items: center;
-
-    > div {
-      margin-right: var(--spacing-xs);
-      border-radius: var(--border-radius-round);
-
-      width: 24px;
-      height: 24px;
-
-      &:before {
-        display: none;
-      }
-    }
-  }
-
-  ${_ref3 => {
+  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        opacity: 0.5;\n      "])));
+}, _ref3 => {
   let {
     noMarginBottom
   } = _ref3;
   return noMarginBottom && 'margin-bottom: 0;';
-}}
-`;
-const Unchecked = _styledComponents.default.div`
-  border: var(--border-width) solid var(--border-color);
-  position: relative;
-
-  &:before {
-    content: '';
-    background: var(--color-primary);
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    border-radius: var(--border-radius-round);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-`;
+});
+const Unchecked = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border: var(--border-width) solid var(--border-color);\n  position: relative;\n\n  &:before {\n    content: '';\n    background: var(--color-primary);\n    width: 16px;\n    height: 16px;\n    position: absolute;\n    border-radius: var(--border-radius-round);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
 var _default = exports.default = RadioButton;

package/form/SearchSelect.js

@@ -12,7 +12,9 @@ var _md = require("react-icons/md");
 var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
 var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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 SearchSelect = _ref => {
   let {
     keyword,
@@ -44,7 +46,8 @@ const SearchSelect = _ref => {
   (0, _react.useEffect)(() => {
     if (!containerRef.current || !showDropdown) return;
     const handleClick = event => {
-      if (!containerRef.current?.contains(event.target)) {
+      var _containerRef$current;
+      if (!((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target))) {
         setShowDropdown(false);
       }
     };
@@ -115,67 +118,12 @@ const SearchSelect = _ref => {
     })]
   });
 };
-const Container = _styledComponents.default.div`
-  position: relative;
-  min-width: 160px;
-  max-width: 320px;
-`;
-const InputWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  height: 36px;
-  background: var(--color-background2);
-  border-radius: var(--border-radius-l);
-  padding: var(--spacing-s);
-  margin: 0;
-  gap: var(--spacing-xs);
-
-  > svg {
-    color: var(--font-on-mute);
-  }
-`;
-const Input = _styledComponents.default.input`
-  background: transparent;
-  border: none;
-  font-size: var(--font-body1);
-  color: var(--font-on-background);
-  outline: none;
-  flex:1;
-  min-width: 0;
-
-  ${(0, _inputPlaceholder.default)`
-    color: var(--font-on-mute);
-  `}
-`;
-const Dropdown = _styledComponents.default.div`
-  position: absolute;
-  inset: 44px auto auto 0px;
-  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);
-  z-index: 1;
-  padding: var(--spacing-xs) 0;
-  overflow-y: auto;
-  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);
-  ${_scrollbar.default}
-`;
-const OptionList = _styledComponents.default.div``;
-const Option = _styledComponents.default.div`
-  padding: 12px var(--spacing-s);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-hover);
-  }
-`;
-const MessageWrapper = _styledComponents.default.div`
-  width: 100%;
-  text-align: center;
-`;
-const Message = _styledComponents.default.p`
-  margin: 0;
-  padding: 12px var(--spacing-s);
-`;
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  min-width: 160px;\n  max-width: 320px;\n"])));
+const InputWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 36px;\n  background: var(--color-background2);\n  border-radius: var(--border-radius-l);\n  padding: var(--spacing-s);\n  margin: 0;\n  gap: var(--spacing-xs);\n\n  > svg {\n    color: var(--font-on-mute);\n  }\n"])));
+const Input = _styledComponents.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  font-size: var(--font-body1);\n  color: var(--font-on-background);\n  outline: none;\n  flex:1;\n  min-width: 0;\n\n  ", "\n"])), (0, _inputPlaceholder.default)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
+const Dropdown = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  inset: 44px auto auto 0px;\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  z-index: 1;\n  padding: var(--spacing-xs) 0;\n  overflow-y: auto;\n  max-height: min(320px, ((50vh - 36px) - 20px) - 36px);\n  ", "\n"])), _scrollbar.default);
+const OptionList = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
+const Option = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 12px var(--spacing-s);\n  cursor: pointer;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n"])));
+const MessageWrapper = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 100%;\n  text-align: center;\n"])));
+const Message = _styledComponents.default.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 12px var(--spacing-s);\n"])));
 var _default = exports.default = SearchSelect;

package/form/Searchbox.js

@@ -10,13 +10,23 @@ var _fa = require("react-icons/fa");
 var _md = require("react-icons/md");
 var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+const _excluded = ["onSearch", "autoFocus"];
 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); }
+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 Searchbox = _ref => {
   let {
-    onSearch,
-    autoFocus = false,
-    ...props
-  } = _ref;
+      onSearch,
+      autoFocus = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const [keyword, setKeyword] = (0, _react.useState)('');
   const handleSearch = keyword => {
     if (onSearch) onSearch(keyword);
@@ -30,8 +40,7 @@ const Searchbox = _ref => {
     setKeyword('');
     handleSearch('');
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaSearch, {
       onClick: () => {
         handleSearch(keyword);
@@ -51,48 +60,13 @@ const Searchbox = _ref => {
       role: "button",
       "aria-label": "clear button"
     })]
-  });
+  }));
 };
-const Wrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 36px;
-  background: var(--color-background1);
-  border-radius: var(--border-radius-l);
-  padding: 0 calc(var(--spacing-s) + var(--font-body1) + var(--spacing-xs)) 0
-    var(--spacing-s);
-
-  > svg {
-    font-size: var(--font-body1);
-    color: var(--font-on-mute);
-
-    &:first-child {
-      margin-right: var(--spacing-xs);
-    }
-
-    &:last-child {
-      position: absolute;
-      right: var(--spacing-s);
-    }
-  }
-
-  ${_ref2 => {
+const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 36px;\n  background: var(--color-background1);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) + var(--font-body1) + var(--spacing-xs)) 0\n    var(--spacing-s);\n\n  > svg {\n    font-size: var(--font-body1);\n    color: var(--font-on-mute);\n\n    &:first-child {\n      margin-right: var(--spacing-xs);\n    }\n\n    &:last-child {\n      position: absolute;\n      right: var(--spacing-s);\n    }\n  }\n\n  ", "\n"])), _ref2 => {
   let {
     border
   } = _ref2;
   return border && 'border: var(--border-width) solid var(--border-color);';
-}}
-`;
-const Input = _styledComponents.default.input`
-  background: transparent;
-  border: none;
-  font-size: var(--font-body1);
-  color: var(--font-on-background);
-  outline: none;
-
-  ${(0, _inputPlaceholder.default)`
-    color: var(--font-on-mute);
-  `}
-`;
+});
+const Input = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  font-size: var(--font-body1);\n  color: var(--font-on-background);\n  outline: none;\n\n  ", "\n"])), (0, _inputPlaceholder.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
 var _default = exports.default = Searchbox;

package/form/Slider.js

@@ -6,41 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
+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) } })); }
+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 Slider = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeInput, {
-    ...props
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RangeInput, _objectSpread({}, props));
 };
 const RangeInput = _styledComponents.default.input.attrs(() => ({
   type: 'range'
-}))`
-  appearance: none;
-  width: 100%;
-  height: 8px;
-  border-radius: var(--border-radius);
-  background: var(--color-grey);
-
-  ${_ref => {
+}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--border-radius);\n  background: var(--color-grey);\n\n  ", ";\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    border-radius: var(--border-radius-round);\n    background: var(--color-primary);\n  }\n\n  &::-moz-range-thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: var(--border-radius-round);\n    background: var(--color-primary);\n  }\n"])), _ref => {
   let {
     autoWidth
   } = _ref;
   return autoWidth && 'width: auto;';
-}};
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 16px;
-    height: 16px;
-    border-radius: var(--border-radius-round);
-    background: var(--color-primary);
-  }
-
-  &::-moz-range-thumb {
-    width: 16px;
-    height: 16px;
-    border-radius: var(--border-radius-round);
-    background: var(--color-primary);
-  }
-`;
+});
 var _default = exports.default = Slider;

package/form/SwitchButton.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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 SwitchButton = _ref => {
   let {
     htmlFor,
@@ -36,70 +38,34 @@ const SwitchButton = _ref => {
     })]
   });
 };
-const Label = _styledComponents.default.label`
-  display: inline-block;
-
-  ${_ref2 => {
+const Label = _styledComponents.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  ", "\n"])), _ref2 => {
   let {
     disabled
   } = _ref2;
-  return disabled && (0, _styledComponents.css)`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `;
-}}
-`;
-const Checkbox = _styledComponents.default.input`
-  display: none;
-`;
-const Switch = _styledComponents.default.span`
-  color: var(--font-on-background);
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  ${_ref3 => {
+  return disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
+});
+const Checkbox = _styledComponents.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n"])));
+const Switch = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  ", "\n"])), _ref3 => {
   let {
     disabled
   } = _ref3;
-  return disabled && (0, _styledComponents.css)`
-      opacity: 0.5;
-    `;
-}}
-`;
-const SwitchTrack = _styledComponents.default.div`
-  position: relative;
-  width: 32px;
-  height: 16px;
-  border-radius: var(--border-radius);
-  background: ${_ref4 => {
+  return disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
+});
+const SwitchTrack = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 32px;\n  height: 16px;\n  border-radius: var(--border-radius);\n  background: ", ";\n  opacity: 0.5;\n  margin-right: calc(var(--spacing-xs) + 12px);\n  left: ", ";\n"])), _ref4 => {
   let {
     checked
   } = _ref4;
   return !checked ? 'var(--color-grey)' : 'var(--color-primary)';
-}};
-  opacity: 0.5;
-  margin-right: calc(var(--spacing-xs) + 12px);
-  left: ${_ref5 => {
+}, _ref5 => {
   let {
     checked
   } = _ref5;
   return checked ? '0' : '12px';
-}};
-`;
-const SwitchThumb = _styledComponents.default.span`
-  width: 24px;
-  height: 24px;
-  background: var(--color-grey);
-  border-radius: var(--border-radius-round);
-  position: absolute;
-  transition: 0.3s;
-
-  ${_ref6 => {
+});
+const SwitchThumb = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n  background: var(--color-grey);\n  border-radius: var(--border-radius-round);\n  position: absolute;\n  transition: 0.3s;\n\n  ", "\n"])), _ref6 => {
   let {
     checked
   } = _ref6;
   return !checked ? 'left: 0;' : 'left: 20px;  background: var(--color-primary);';
-}}
-`;
+});
 var _default = exports.default = SwitchButton;