@cashub/ui 0.46.1 → 0.48.0

package/section/Section.js

@@ -8,78 +8,126 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
 var _bgChartCircle = _interopRequireDefault(require("../assets/images/bg-chart-circle.png"));
 var _map = _interopRequireDefault(require("../assets/images/map.png"));
-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 Section = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), _ref => {
+const Section = _styledComponents.default.div`
+  background: var(--color-background1);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
   let {
     backgroundReverse
   } = _ref;
   return backgroundReverse && 'background: var(--color-background2);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     paddingS
   } = _ref2;
   return paddingS && 'padding: var(--spacing-s);';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     paddingXS
   } = _ref3;
   return paddingXS && 'padding: var(--spacing-xs);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     noPadding
   } = _ref4;
   return noPadding && 'padding: 0;';
-}, _ref5 => {
+}}
+
+  ${_ref5 => {
   let {
     noPaddingX
   } = _ref5;
   return noPaddingX && 'padding-left: 0; padding-right: 0;';
-}, _ref6 => {
+}}
+
+  ${_ref6 => {
   let {
     noPaddingTop
   } = _ref6;
   return noPaddingTop && 'padding-top: 0;';
-}, _ref7 => {
+}}
+
+  ${_ref7 => {
   let {
     noPaddingBottom
   } = _ref7;
   return noPaddingBottom && 'padding-bottom: 0;';
-}, _ref8 => {
+}}
+
+  ${_ref8 => {
   let {
     marginBottomS
   } = _ref8;
   return marginBottomS && 'margin-bottom: var(--spacing-s);';
-}, _ref9 => {
+}}
+
+  ${_ref9 => {
   let {
     noMarginBottom
   } = _ref9;
   return noMarginBottom && 'margin-bottom: 0;';
-}, _ref10 => {
+}}
+
+  ${_ref10 => {
   let {
     fullHeight
   } = _ref10;
   return fullHeight && 'height: calc(100% - var(--spacing));';
-}, _ref11 => {
+}}
+
+  ${_ref11 => {
   let {
     backgroundMarker
   } = _ref11;
-  return backgroundMarker && "\n      background: var(--color-background2);\n      background-image: url(".concat(_bgChartCircle.default, "), url(").concat(_bgChartTriangle.default, ");\n      background-repeat: no-repeat;\n      background-position: left top, right bottom;\n      background-size: 337px 312px, 166px 225px;\n    ");
-}, _ref12 => {
+  return backgroundMarker && `
+      background: var(--color-background2);
+      background-image: url(${_bgChartCircle.default}), url(${_bgChartTriangle.default});
+      background-repeat: no-repeat;
+      background-position: left top, right bottom;
+      background-size: 337px 312px, 166px 225px;
+    `;
+}}
+
+  ${_ref12 => {
   let {
     backgroundMap
   } = _ref12;
-  return backgroundMap && "\n      background: var(--color-background2);\n      background-image: url(".concat(_map.default, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n    ");
-}, _ref13 => {
+  return backgroundMap && `
+      background: var(--color-background2);
+      background-image: url(${_map.default});
+      background-repeat: no-repeat;
+      background-size: cover;
+    `;
+}}
+
+  ${_ref13 => {
   let {
     border
   } = _ref13;
   return border && 'border: var(--border-width) solid var(--border-color);';
-}, _ref14 => {
+}}
+  
+  ${_ref14 => {
   let {
     checkboxGroup
   } = _ref14;
-  return checkboxGroup && "\n      background: transparent;\n      width: 50%;\n      margin-left: auto;\n      margin-right: auto;\n    ";
-});
+  return checkboxGroup && `
+      background: transparent;
+      width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+    `;
+}}
+`;
 var _default = exports.default = Section;

package/section/SectionBody.js

@@ -7,25 +7,46 @@ exports.default = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
-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 SectionBody = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // fix: overflow element(relate to z-index problem)\n  // position: relative;\n  background: transparent;\n  padding: var(--spacing) 0 0 0;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const SectionBody = _styledComponents.default.div`
+  // fix: overflow element(relate to z-index problem)
+  // position: relative;
+  background: transparent;
+  padding: var(--spacing) 0 0 0;
+
+  ${_ref => {
   let {
     noPadding
   } = _ref;
   return noPadding && 'padding: 0;';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     maxHeight
   } = _ref2;
-  return maxHeight && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      max-height: ", "px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      ", "\n    "])), maxHeight, _scrollbar.default);
-}, _ref3 => {
+  return maxHeight && (0, _styledComponents.css)`
+      max-height: ${maxHeight}px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      ${_scrollbar.default}
+    `;
+}}
+
+  ${_ref3 => {
   let {
     maxHeightLaptop
   } = _ref3;
-  return maxHeightLaptop && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n    "])), _media.default.laptop(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        max-height: ", "px;\n        overflow-y: auto;\n        overflow-x: hidden;\n        ", "\n      "])), maxHeightLaptop, _scrollbar.default));
-});
+  return maxHeightLaptop && (0, _styledComponents.css)`
+      ${_media.default.laptop`
+        max-height: ${maxHeightLaptop}px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        ${_scrollbar.default}
+      `}
+    `;
+}}
+`;
 var _default = exports.default = SectionBody;

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;
 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({
@@ -194,13 +188,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 全選
@@ -516,7 +510,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())) {
@@ -524,11 +519,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())) {
@@ -536,9 +532,10 @@ const Select = _ref => {
       } else if (selectedAllOptions === option.id.toString()) {
         selected = true;
       }
-      return _objectSpread(_objectSpread({}, option), {}, {
+      return {
+        ...option,
         selected
-      });
+      };
     }));
   }, [filteredOptions, multiple, selectedAllOptions]);
 
@@ -549,9 +546,10 @@ const Select = _ref => {
       if (option.child && option.child.length > 0) {
         const tmpFilteredChildOptions = option.child.filter(option => option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1);
         if (tmpFilteredChildOptions.length > 0) {
-          tmpFilteredOptions.push(_objectSpread(_objectSpread({}, option), {}, {
+          tmpFilteredOptions.push({
+            ...option,
             child: tmpFilteredChildOptions
-          }));
+          });
         }
       } else if (option.text.toLowerCase().indexOf(search.toLowerCase().trim()) !== -1) {
         tmpFilteredOptions.push(option);
@@ -605,7 +603,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,
@@ -614,8 +612,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,
@@ -631,7 +629,7 @@ const Select = _ref => {
         }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
           children: footer
         })]
-      })), document.body)]
+      }), document.body)]
     })
   });
 };
@@ -651,58 +649,129 @@ 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 OptionBadge = _styledComponents.default.span`
+  color: var(--color-danger);
+  font-style: italic;
+`;
 var _default = exports.default = Select;