@cashub/ui 0.47.0 → 0.48.0

package/form/Textarea.js

@@ -7,8 +7,35 @@ exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _inputPlaceholder = _interopRequireDefault(require("../styles/mixin/inputPlaceholder"));
 var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
-var _templateObject, _templateObject2;
 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 Textarea = _styledComponents.default.textarea(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  border: var(--border-width) solid var(--border-color);\n  padding: 10px var(--spacing-s);\n  border-radius: var(--border-radius);\n  background: transparent;\n  color: var(--font-on-background);\n  transition: 0.3s;\n  line-height: 1.5;\n\n  /* disable resize because currently cannot fully control the resizer element */\n  resize: none;\n\n  ", "\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"])), _scrollbar.default, (0, _inputPlaceholder.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
+const Textarea = _styledComponents.default.textarea`
+  display: block;
+  width: 100%;
+  border: var(--border-width) solid var(--border-color);
+  padding: 10px var(--spacing-s);
+  border-radius: var(--border-radius);
+  background: transparent;
+  color: var(--font-on-background);
+  transition: 0.3s;
+  line-height: 1.5;
+
+  /* disable resize because currently cannot fully control the resizer element */
+  resize: none;
+
+  ${_scrollbar.default}
+
+  &: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);
+  `}
+`;
 var _default = exports.default = Textarea;

package/form/TreeView.js

@@ -10,9 +10,7 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _container = require("../container");
 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) } })); }
 const TreeView = _ref => {
   let {
     data,
@@ -23,8 +21,7 @@ const TreeView = _ref => {
     let parentPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(UnorderedList, {
       children: data.map(item => {
-        var _item$children;
-        const id = "".concat(parentPath.join('')).concat(item.id).replace(/\s/g, '');
+        const id = `${parentPath.join('')}${item.id}`.replace(/\s/g, '');
         const currentPath = parentPath.concat(item.id);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
           children: [item.type === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
@@ -55,12 +52,22 @@ const TreeView = _ref => {
               },
               disabled: item.disabled
             })]
-          }), ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0 ? renderList(item.children, parentPath.concat(item.id)) : null]
+          }), item.children?.length > 0 ? renderList(item.children, parentPath.concat(item.id)) : null]
         }, item.id);
       })
     });
   };
   return renderList(data);
 };
-const UnorderedList = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n\n  ul {\n    margin-left: var(--spacing-s);\n  }\n\n  li {\n    margin-top: var(--spacing-xs);\n  }\n"])));
+const UnorderedList = _styledComponents.default.ul`
+  color: var(--font-on-background);
+
+  ul {
+    margin-left: var(--spacing-s);
+  }
+
+  li {
+    margin-top: var(--spacing-xs);
+  }
+`;
 var _default = exports.default = TreeView;

package/grid/Column.js

@@ -6,28 +6,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 Column = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 calc(var(--spacing) / 2);\n  grid-column-end: span ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const Column = _styledComponents.default.div`
+  padding: 0 calc(var(--spacing) / 2);
+  grid-column-end: span ${_ref => {
   let {
     desktop
   } = _ref;
   return desktop;
-}, _ref2 => {
+}};
+
+  ${_ref2 => {
   let {
     laptop
   } = _ref2;
-  return laptop && _media.default.laptop(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        grid-column-end: span ", ";\n      "])), laptop);
-}, _ref3 => {
+  return laptop && _media.default.laptop`
+        grid-column-end: span ${laptop};
+      `;
+}}
+
+  ${_ref3 => {
   let {
     tablet
   } = _ref3;
-  return tablet && _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        grid-column-end: span ", ";\n      "])), tablet);
-}, _ref4 => {
+  return tablet && _media.default.tablet`
+        grid-column-end: span ${tablet};
+      `;
+}}
+
+  ${_ref4 => {
   let {
     mobile
   } = _ref4;
-  return mobile && _media.default.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        grid-column-end: span ", ";\n      "])), mobile);
-});
+  return mobile && _media.default.mobile`
+        grid-column-end: span ${mobile};
+      `;
+}}
+`;
 var _default = exports.default = Column;

package/grid/Grid.js

@@ -5,23 +5,31 @@ 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 Grid = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  margin: 0 calc(var(--spacing) * -1 / 2);\n\n  > * {\n    grid-column-end: span ", ";\n  }\n\n  ", "\n"])), _ref => {
+const Grid = _styledComponents.default.div`
+  display: grid;
+  grid-template-columns: repeat(${_ref => {
   let {
     columns
   } = _ref;
   return columns;
-}, _ref2 => {
+}}, minmax(0, 1fr));
+  margin: 0 calc(var(--spacing) * -1 / 2);
+
+  > * {
+    grid-column-end: span ${_ref2 => {
   let {
     columns
   } = _ref2;
   return columns;
-}, _ref3 => {
+}};
+  }
+
+  ${_ref3 => {
   let {
     alignCenter
   } = _ref3;
   return alignCenter && 'align-items: center;';
-});
+}}
+`;
 var _default = exports.default = Grid;

package/heading/Heading1.js

@@ -5,13 +5,17 @@ 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 Heading1 = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h1);\n  word-break: break-word;\n  white-space: pre-wrap;\n\n  ", "\n"])), _ref => {
+const Heading1 = _styledComponents.default.h1`
+  font-size: var(--font-h1);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
   let {
     center
   } = _ref;
   return center && 'text-align: center;';
-});
+}}
+`;
 var _default = exports.default = Heading1;

package/heading/Heading2.js

@@ -5,18 +5,24 @@ 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 Heading2 = _styledComponents.default.h2(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h2);\n  word-break: break-word;\n  white-space: pre-wrap;\n\n  ", "\n\n  ", "\n"])), _ref => {
+const Heading2 = _styledComponents.default.h2`
+  font-size: var(--font-h2);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
   let {
     center
   } = _ref;
   return center && 'text-align: center;';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     marginBottom
   } = _ref2;
   return marginBottom && 'margin-bottom: var(--spacing);';
-});
+}}
+`;
 var _default = exports.default = Heading2;

package/heading/Heading3.js

@@ -5,33 +5,45 @@ 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 Heading3 = _styledComponents.default.h3(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-h3);\n  word-break: break-word;\n  white-space: pre-wrap;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+const Heading3 = _styledComponents.default.h3`
+  font-size: var(--font-h3);
+  word-break: break-word;
+  white-space: pre-wrap;
+
+  ${_ref => {
   let {
     center
   } = _ref;
   return center && 'text-align: center;';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     fontWeightNormal
   } = _ref2;
   return fontWeightNormal && 'font-weight: normal;';
-}, _ref3 => {
+}}
+
+  ${_ref3 => {
   let {
     marginBottomS
   } = _ref3;
   return marginBottomS && 'margin-bottom: var(--spacing-s);';
-}, _ref4 => {
+}}
+
+  ${_ref4 => {
   let {
     marginBottomXS
   } = _ref4;
   return marginBottomXS && 'margin-bottom: var(--spacing-xs);';
-}, _ref5 => {
+}}
+
+  ${_ref5 => {
   let {
     paddingBottomXS
   } = _ref5;
   return paddingBottomXS && 'padding-bottom: var(--spacing-xs);';
-});
+}}
+`;
 var _default = exports.default = Heading3;

package/iconbox/ApplicationIconBox.js

@@ -7,34 +7,70 @@ exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
 var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 ApplicationIconBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-bottom: var(--spacing);\n\n  ", ";\n"])), _ref => {
+const ApplicationIconBox = _styledComponents.default.div`
+  margin-bottom: var(--spacing);
+
+  ${_ref => {
   let {
     clickable
   } = _ref;
   return clickable && 'cursor: pointer';
-});
-const Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--spacing-xs);\n  border: var(--border-width) solid transparent;\n\n  ", "\n  ", "\n  ", "\n"])), _ref2 => {
+}};
+`;
+const Body = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--spacing-xs);
+  border: var(--border-width) solid transparent;
+
+  ${_ref2 => {
   let {
     horizontal
   } = _ref2;
   return horizontal && 'flex-direction: row;';
-}, _ref3 => {
+}}
+  ${_ref3 => {
   let {
     alignCenter
   } = _ref3;
   return alignCenter && 'text-align: center;';
-}, _ref4 => {
+}}
+  ${_ref4 => {
   let {
     selected
   } = _ref4;
-  return selected && "\n      border-color: var(--border-color);\n      border-radius: var(--border-radius);\n      box-shadow: var(--box-shadow);\n    ";
-});
-const Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 0;\n"])));
-const Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: var(--font-bold);\n  font-size: var(--font-body1);\n  margin-bottom: var(--spacing-xs);\n  color: var(--font-on-background);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n\n  a {\n    color: var(--font-on-background);\n  }\n"])));
-const Content = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: var(--font-body1);\n  color: var(--font-on-mute);\n  margin-bottom: var(--spacing-xs);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n"])));
+  return selected && `
+      border-color: var(--border-color);
+      border-radius: var(--border-radius);
+      box-shadow: var(--box-shadow);
+    `;
+}}
+`;
+const Description = _styledComponents.default.div`
+  min-width: 0;
+`;
+const Title = _styledComponents.default.div`
+  font-weight: var(--font-bold);
+  font-size: var(--font-body1);
+  margin-bottom: var(--spacing-xs);
+  color: var(--font-on-background);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+
+  a {
+    color: var(--font-on-background);
+  }
+`;
+const Content = _styledComponents.default.div`
+  font-size: var(--font-body1);
+  color: var(--font-on-mute);
+  margin-bottom: var(--spacing-xs);
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+`;
 var _default = exports.default = Object.assign(ApplicationIconBox, {
   Body,
   Description,

package/iconbox/IconBox.js

@@ -9,9 +9,7 @@ var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigur
 var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
 var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 IconBox = _ref => {
   let {
     icon,
@@ -26,7 +24,7 @@ const IconBox = _ref => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
           sizeXS: true,
           src: icon,
-          alt: "".concat(title, "'s icon")
+          alt: `${title}'s icon`
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
         children: title
@@ -36,8 +34,34 @@ const IconBox = _ref => {
     })]
   });
 };
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-l);\n  margin-bottom: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background2);\n  color: var(--font-on-background);\n\n  background: var(--color-background2);\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  background-size: 30% 70%;\n"])), _bgChartTriangle.default);
-const IconBoxHead = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: var(--spacing);\n"])));
-const IconBoxTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: var(--font-h2);\n  font-weight: bold;\n  word-break: break-all;\n"])));
-const IconBoxBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: var(--font-h1);\n  font-weight: bold;\n  text-align: center;\n"])));
+const Wrapper = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-l);
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--color-background2);
+  color: var(--font-on-background);
+
+  background: var(--color-background2);
+  background-image: url(${_bgChartTriangle.default});
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: 30% 70%;
+`;
+const IconBoxHead = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing);
+`;
+const IconBoxTitle = _styledComponents.default.div`
+  font-size: var(--font-h2);
+  font-weight: bold;
+  word-break: break-all;
+`;
+const IconBoxBody = _styledComponents.default.div`
+  font-size: var(--font-h1);
+  font-weight: bold;
+  text-align: center;
+`;
 var _default = exports.default = IconBox;

package/iconbox/IconBoxV2.js

@@ -7,19 +7,44 @@ exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
 var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 IconBoxV2 = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n  background: var(--color-background1);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n\n  ", "\n"])), _ref => {
+const IconBoxV2 = _styledComponents.default.div`
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  background: var(--color-background1);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+
+  ${_ref => {
   let {
     fullHeight
   } = _ref;
   return fullHeight && 'height: calc(100% - var(--spacing));';
-});
-const Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-const Description = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n  font-size: var(--font-body1);\n"])));
-const Info = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  word-break: break-all;\n\n  &:not(:last-child) {\n    margin-bottom: var(--spacing-s);\n  }\n"])));
-const Tool = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 calc(var(--spacing-s) + 36px);\n  padding-left: var(--spacing-s);\n\n  > *:not(:last-child) {\n    margin-bottom: var(--spacing-s);\n  }\n"])));
+}}
+`;
+const Body = _styledComponents.default.div`
+  display: flex;
+`;
+const Description = _styledComponents.default.div`
+  flex: 1 1 auto;
+  font-size: var(--font-body1);
+`;
+const Info = _styledComponents.default.div`
+  word-break: break-all;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+const Tool = _styledComponents.default.div`
+  flex: 0 0 calc(var(--spacing-s) + 36px);
+  padding-left: var(--spacing-s);
+
+  > *:not(:last-child) {
+    margin-bottom: var(--spacing-s);
+  }
+`;
 var _default = exports.default = Object.assign(IconBoxV2, {
   Body,
   Description,

package/iconbox/subComponent/IconBoxFigure.js

@@ -5,38 +5,46 @@ 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 IconBoxFigure = _styledComponents.default.figure(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 0 0 120px;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), _ref => {
+const IconBoxFigure = _styledComponents.default.figure`
+  flex: 0 0 120px;
+
+  ${_ref => {
   let {
     marginRight
   } = _ref;
   return marginRight && 'margin-right: var(--spacing);';
-}, _ref2 => {
+}}
+  ${_ref2 => {
   let {
     paddingRight
   } = _ref2;
   return paddingRight && 'padding-right: var(--spacing);';
-}, _ref3 => {
+}}
+  ${_ref3 => {
   let {
     paddingRightS
   } = _ref3;
   return paddingRightS && 'padding-right: var(--spacing-s);';
-}, _ref4 => {
+}}
+  ${_ref4 => {
   let {
     paddingBottomS
   } = _ref4;
   return paddingBottomS && 'padding-bottom: var(--spacing-s);';
-}, _ref5 => {
+}}
+
+  ${_ref5 => {
   let {
     sizeS
   } = _ref5;
   return sizeS && 'flex-basis: 80px;';
-}, _ref6 => {
+}}
+  ${_ref6 => {
   let {
     sizeXS
   } = _ref6;
   return sizeXS && 'flex-basis: 40px;';
-});
+}}
+`;
 var _default = exports.default = IconBoxFigure;

package/iconbox/subComponent/IconBoxImage.js

@@ -5,25 +5,38 @@ 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 IconBoxImage = _styledComponents.default.img.attrs(() => ({
   crossOrigin: 'anonymous'
-}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 120px;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
+}))`
+  width: 120px;
+  height: 120px;
+
+  ${_ref => {
   let {
     rounded
   } = _ref;
   return rounded && 'border-radius: var(--border-radius);';
-}, _ref2 => {
+}}
+
+  ${_ref2 => {
   let {
     sizeS
   } = _ref2;
-  return sizeS && "\n      width: 80px;\n      height: 80px;\n    ";
-}, _ref3 => {
+  return sizeS && `
+      width: 80px;
+      height: 80px;
+    `;
+}}
+
+  ${_ref3 => {
   let {
     sizeXS
   } = _ref3;
-  return sizeXS && "\n      width: 40px;\n      height: 40px;\n    ";
-});
+  return sizeXS && `
+      width: 40px;
+      height: 40px;
+    `;
+}}
+`;
 var _default = exports.default = IconBoxImage;

package/image/ImageFluid.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _rounded = _interopRequireDefault(require("../styles/mixin/rounded"));
-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 ImageFluid = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n\n  ", "\n"])), _rounded.default);
+const ImageFluid = _styledComponents.default.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  ${_rounded.default}
+`;
 var _default = exports.default = ImageFluid;