@cashub/ui 0.48.6 → 0.48.8

package/form/Textarea.js

@@ -7,35 +7,8 @@ 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 }; }
-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);
-  `}
-`;
+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  "]))));
 var _default = exports.default = Textarea;

package/form/TreeView.js

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

package/grid/Column.js

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

package/grid/Grid.js

@@ -5,31 +5,23 @@ 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 Grid = _styledComponents.default.div`
-  display: grid;
-  grid-template-columns: repeat(${_ref => {
+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 => {
   let {
     columns
   } = _ref;
   return columns;
-}}, minmax(0, 1fr));
-  margin: 0 calc(var(--spacing) * -1 / 2);
-
-  > * {
-    grid-column-end: span ${_ref2 => {
+}, _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,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 Heading1 = _styledComponents.default.h1`
-  font-size: var(--font-h1);
-  word-break: break-word;
-  white-space: pre-wrap;
-
-  ${_ref => {
+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 => {
   let {
     center
   } = _ref;
   return center && 'text-align: center;';
-}}
-`;
+});
 var _default = exports.default = Heading1;

package/heading/Heading2.js

@@ -5,24 +5,18 @@ 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 Heading2 = _styledComponents.default.h2`
-  font-size: var(--font-h2);
-  word-break: break-word;
-  white-space: pre-wrap;
-
-  ${_ref => {
+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 => {
   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,45 +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 Heading3 = _styledComponents.default.h3`
-  font-size: var(--font-h3);
-  word-break: break-word;
-  white-space: pre-wrap;
-
-  ${_ref => {
+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 => {
   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,70 +7,34 @@ 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 }; }
-const ApplicationIconBox = _styledComponents.default.div`
-  margin-bottom: var(--spacing);
-
-  ${_ref => {
+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 => {
   let {
     clickable
   } = _ref;
   return clickable && 'cursor: pointer';
-}};
-`;
-const Body = _styledComponents.default.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: var(--spacing-xs);
-  border: var(--border-width) solid transparent;
-
-  ${_ref2 => {
+});
+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 => {
   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 && `
-      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;
-`;
+  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"])));
 var _default = exports.default = Object.assign(ApplicationIconBox, {
   Body,
   Description,

package/iconbox/IconBox.js

@@ -9,7 +9,9 @@ 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,
@@ -24,7 +26,7 @@ const IconBox = _ref => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
           sizeXS: true,
           src: icon,
-          alt: `${title}'s icon`
+          alt: "".concat(title, "'s icon")
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
         children: title
@@ -34,34 +36,8 @@ const IconBox = _ref => {
     })]
   });
 };
-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;
-`;
+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"])));
 var _default = exports.default = IconBox;

package/iconbox/IconBoxV2.js

@@ -7,44 +7,19 @@ 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 }; }
-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 => {
+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 => {
   let {
     fullHeight
   } = _ref;
   return fullHeight && 'height: calc(100% - var(--spacing));';
-}}
-`;
-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);
-  }
-`;
+});
+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"])));
 var _default = exports.default = Object.assign(IconBoxV2, {
   Body,
   Description,

package/iconbox/subComponent/IconBoxFigure.js

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

package/image/ImageFluid.js

@@ -6,12 +6,8 @@ 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 }; }
-const ImageFluid = _styledComponents.default.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-
-  ${_rounded.default}
-`;
+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);
 var _default = exports.default = ImageFluid;