@cashub/ui 0.48.1 → 0.48.3

package/dropzone/FileDropzone.js

@@ -14,7 +14,14 @@ var _file = _interopRequireDefault(require("../assets/icons/file.svg"));
 var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
 var _Message = _interopRequireDefault(require("./subComponent/Message"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 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 FileDropzone = _ref => {
   let {
     message,
@@ -51,10 +58,7 @@ const FileDropzone = _ref => {
       Resume: 'Resume Upload',
       Retry: 'Retry Upload'
     };
-    return {
-      ...defaultTexts,
-      ...translation
-    };
+    return _objectSpread(_objectSpread({}, defaultTexts), translation);
   }, [translation]);
   const handleClick = (0, _react.useCallback)(() => {
     if (files.length > 0) return;
@@ -335,145 +339,42 @@ const FileDropzone = _ref => {
     }), files.length === 0 ? messageItem : previewItem]
   });
 };
-const Dropzone = _styledComponents.default.div`
-  min-height: 200px;
-  border: 4px dashed var(--border-color);
-  border-radius: var(--border-radius);
-  color: var(--font-on-background);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0 var(--spacing-s);
-  cursor: ${_ref2 => {
+const Dropzone = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 var(--spacing-s);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), _ref2 => {
   let {
     reachedLimit
   } = _ref2;
   return reachedLimit ? 'default' : 'pointer';
-}};
-
-  ${_ref3 => {
+}, _ref3 => {
   let {
     dragging
   } = _ref3;
   return dragging && 'border-color: var(--color-primary);';
-}};
-
-  &:focus {
-    border-color: var(--color-primary);
-  }
-`;
+});
 Dropzone.displayName = 'Dropzone';
-const Preview = _styledComponents.default.div`
-  max-width: 50%;
-  display: flex;
-  align-items: center;
-  text-align: center;
-
-  ${_media.default.laptop`
-    max-width: 75%;
-  `}
-
-  ${_media.default.tablet`
-    max-width: 100%;
-  `}
-`;
+const Preview = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-width: 50%;\n  display: flex;\n  align-items: center;\n  text-align: center;\n\n  ", "\n\n  ", "\n"])), _media.default.laptop(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-width: 75%;\n  "]))), _media.default.tablet(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    max-width: 100%;\n  "]))));
 Preview.displayName = 'Preview';
-const PreviewImage = _styledComponents.default.div`
-  margin-right: var(--spacing-xs);
-
-  > img {
-    width: 120px;
-    margin-bottom: var(--spacing-xs);
-  }
-`;
+const PreviewImage = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: var(--spacing-xs);\n\n  > img {\n    width: 120px;\n    margin-bottom: var(--spacing-xs);\n  }\n"])));
 PreviewImage.displayName = 'PreviewImage';
-const PreviewDetails = _styledComponents.default.div`
-  overflow: hidden;
-  min-width: 200px;
-
-  > * {
-    margin-bottom: var(--spacing-xs);
-  }
-
-  > .ellipsis {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-`;
+const PreviewDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  min-width: 200px;\n\n  > * {\n    margin-bottom: var(--spacing-xs);\n  }\n\n  > .ellipsis {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n"])));
 PreviewDetails.displayName = 'PreviewDetails';
-const Progress = _styledComponents.default.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
+const Progress = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 
 // fix:color
-const ProgressBar = _styledComponents.default.div`
-  flex: 1;
-  height: 1.25rem;
-  border-radius: var(--border-radius);
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--color-primary);
-
-  &::before {
-    position: absolute;
-    content: '';
-    width: ${_ref4 => {
+const ProgressBar = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  height: 1.25rem;\n  border-radius: var(--border-radius);\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color-primary);\n\n  &::before {\n    position: absolute;\n    content: '';\n    width: ", "%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: linear-gradient(to bottom, #00bdff, #597ef7);\n    transition: width 300ms ease-in-out;\n  }\n\n  > span {\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), _ref4 => {
   let {
     percentage
   } = _ref4;
   return percentage;
-}}%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(to bottom, #00bdff, #597ef7);
-    transition: width 300ms ease-in-out;
-  }
-
-  > span {
-    position: absolute;
-    width: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-`;
+});
 ProgressBar.displayName = 'ProgressBar';
 const Button = _styledComponents.default.span.attrs(() => ({
   role: 'button'
-}))`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 auto;
-  cursor: pointer;
-  width: 1.25rem;
-  height: 1.25rem;
-  color: var(--font-on-primary);
-  background: var(--color-primary);
-  border-radius: var(--border-radius);
-  margin-left: var(--spacing-xs);
-  padding: 0.25rem;
-
-  ${_ref5 => {
+}))(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex: 0 0 auto;\n  cursor: pointer;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--font-on-primary);\n  background: var(--color-primary);\n  border-radius: var(--border-radius);\n  margin-left: var(--spacing-xs);\n  padding: 0.25rem;\n\n  ", "\n"])), _ref5 => {
   let {
     danger
   } = _ref5;
-  return danger && `
-      background: var(--color-danger);
-    `;
-}}
-`;
-const PauseButton = (0, _styledComponents.default)(Button)`
-  padding: 5px;
-`;
-const ResumeButton = (0, _styledComponents.default)(Button)`
-  padding: 5px 5px 5px 6px;
-`;
+  return danger && "\n      background: var(--color-danger);\n    ";
+});
+const PauseButton = (0, _styledComponents.default)(Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 5px;\n"])));
+const ResumeButton = (0, _styledComponents.default)(Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: 5px 5px 5px 6px;\n"])));
 var _default = exports.default = FileDropzone;

package/dropzone/ImageDropzone.js

@@ -12,7 +12,9 @@ var _utils = require("@cashub/utils");
 var _HiddenFileInput = _interopRequireDefault(require("../file/HiddenFileInput"));
 var _Message = _interopRequireDefault(require("./subComponent/Message"));
 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 ImageDropzone = _ref => {
   let {
     width = 180,
@@ -219,116 +221,45 @@ const ImageDropzone = _ref => {
     }), files.length === 0 ? messageItem : previewItem()]
   });
 };
-const Wrapper = _styledComponents.default.div`
-  min-height: 200px;
-  border: 4px dashed var(--border-color);
-  border-radius: var(--border-radius-l);
-  color: var(--font-on-background);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  padding: var(--spacing-xs);
-  cursor: pointer;
-
-  ${_ref2 => {
+const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-background);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), _ref2 => {
   let {
     reachedLimit
   } = _ref2;
   return reachedLimit && 'cursor:default;';
-}};
-
-  ${_ref3 => {
+}, _ref3 => {
   let {
     disabled
   } = _ref3;
   return disabled && 'cursor:not-allowed; opacity: 0.5;';
-}};
-
-  ${_ref4 => {
+}, _ref4 => {
   let {
     dragging
   } = _ref4;
   return dragging && 'border-color: var(--color-primary);';
-}};
-
-  &:focus {
-    border-color: var(--color-primary);
-  }
-`;
-const Image = _styledComponents.default.figure`
-  position: relative;
-  margin: var(--spacing-xs);
-
-  ${_ref5 => {
+});
+const Image = _styledComponents.default.figure(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  margin: var(--spacing-xs);\n\n  ", "\n\n  > img {\n    width: 100%;\n    height: 100%;\n    border-radius: var(--border-radius);\n  }\n"])), _ref5 => {
   let {
     width,
     height,
     fixedSize
   } = _ref5;
   if (fixedSize) {
-    return `
-        width: ${width}px;
-        height: ${height}px;
-      `;
+    return "\n        width: ".concat(width, "px;\n        height: ").concat(height, "px;\n      ");
   }
   if (width < height) {
-    return `
-        width: ${width}px;
-        max-width: ${width}px;
-        max-height: ${height}px;
-      `;
+    return "\n        width: ".concat(width, "px;\n        max-width: ").concat(width, "px;\n        max-height: ").concat(height, "px;\n      ");
   }
   if (height < width) {
-    return `
-        height: ${height}px;
-        max-width: ${width}px;
-        max-height: ${height}px;
-      `;
-  }
-}}
-
-  > img {
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border-radius);
+    return "\n        height: ".concat(height, "px;\n        max-width: ").concat(width, "px;\n        max-height: ").concat(height, "px;\n      ");
   }
-`;
-const ButtonGroup = _styledComponents.default.div`
-  position: absolute;
-  right: calc(var(--spacing-xs) * -1);
-  top: calc(var(--spacing-xs) * -1);
-`;
+});
+const ButtonGroup = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: calc(var(--spacing-xs) * -1);\n  top: calc(var(--spacing-xs) * -1);\n"])));
 const Button = _styledComponents.default.div.attrs(() => ({
   role: 'button'
-}))`
-  display: inline-block;
-  width: 32px;
-  height: 32px;
-  color: var(--color-white);
-  background: var(--color-primary);
-  border-radius: var(--border-radius-round);
-  cursor: pointer;
-
-  > svg {
-    color: var(--color-white);
-    margin: 0 auto;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 auto;
-    display: block;
-  }
-
-  &:not(:first-child) {
-    margin-left: var(--spacing-xs);
-  }
-
-  ${_ref6 => {
+}))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  color: var(--color-white);\n  background: var(--color-primary);\n  border-radius: var(--border-radius-round);\n  cursor: pointer;\n\n  > svg {\n    color: var(--color-white);\n    margin: 0 auto;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    margin: 0 auto;\n    display: block;\n  }\n\n  &:not(:first-child) {\n    margin-left: var(--spacing-xs);\n  }\n\n  ", "\n"])), _ref6 => {
   let {
     danger
   } = _ref6;
   return danger && 'background: var(--color-danger);';
-}}
-`;
+});
 var _default = exports.default = ImageDropzone;

package/dropzone/subComponent/Message.js

@@ -5,22 +5,15 @@ 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 Message = _styledComponents.default.div.attrs(() => ({
   'data-testid': 'message-container'
-}))`
-  text-align: center;
-
-  > svg {
-    margin-bottom: var(--spacing-s);
-    font-size: var(--font-h2);
-  }
-
-  ${_ref => {
+}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  text-align: center;\n\n  > svg {\n    margin-bottom: var(--spacing-s);\n    font-size: var(--font-h2);\n  }\n\n  ", ";\n"])), _ref => {
   let {
     dragging
   } = _ref;
   return dragging ? 'opacity: 0.5' : '';
-}};
-`;
+});
 var _default = exports.default = Message;

package/figure/IconFigure.js

@@ -5,7 +5,9 @@ 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 IconFigure = _styledComponents.default.figure.attrs(_ref => {
   let {
     size
@@ -13,30 +15,19 @@ const IconFigure = _styledComponents.default.figure.attrs(_ref => {
   return {
     size: size || 'medium'
   };
-})`
-  ${_ref2 => {
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), _ref2 => {
   let {
     size
   } = _ref2;
   switch (size) {
     case 'small':
-      return `
-          width: 16px;
-          height: 16px;
-        `;
+      return "\n          width: 16px;\n          height: 16px;\n        ";
     case 'medium':
-      return `
-          width: 24px;
-          height: 24px;
-        `;
+      return "\n          width: 24px;\n          height: 24px;\n        ";
     case 'large':
-      return `
-          width: 32px;
-          height: 32px;
-        `;
+      return "\n          width: 32px;\n          height: 32px;\n        ";
     default:
       break;
   }
-}}
-`;
+});
 var _default = exports.default = IconFigure;

package/figure/ImageFigure.js

@@ -6,33 +6,20 @@ 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 ImageFigure = _styledComponents.default.figure.attrs(() => ({
   rounded: true
-}))`
-  width: 160px;
-  height: 160px;
-  border: 4px dashed var(--border-color);
-  padding: var(--spacing-xs);
-  margin-left: var(--spacing);
-
-  ${_ref => {
+}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 160px;\n  height: 160px;\n  border: 4px dashed var(--border-color);\n  padding: var(--spacing-xs);\n  margin-left: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n"])), _ref => {
   let {
     small
   } = _ref;
-  return small && `
-      width: 40px;
-      height: 40px;
-    `;
-}}
-
-  ${_rounded.default}
-
-  ${_ref2 => {
+  return small && "\n      width: 40px;\n      height: 40px;\n    ";
+}, _rounded.default, _ref2 => {
   let {
     noBorder
   } = _ref2;
   return noBorder && 'border: none;';
-}}
-`;
+});
 var _default = exports.default = ImageFigure;

package/file/HiddenFileInput.js

@@ -5,11 +5,11 @@ 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 HiddenFileInput = _styledComponents.default.input.attrs(() => ({
   'data-testid': 'hiddenFileInput',
   type: 'file'
-}))`
-  display: none;
-`;
+}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n"])));
 var _default = exports.default = HiddenFileInput;

package/form/Checkbox.js

@@ -10,9 +10,11 @@ var _Input = _interopRequireDefault(require("./Input"));
 var _Label = _interopRequireDefault(require("./Label"));
 var _md = require("react-icons/md");
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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 Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     htmlFor,
@@ -51,92 +53,29 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     })]
   });
 });
-const StyledCheckbox = (0, _styledComponents.default)(_Input.default)`
-  display: none;
-
-  &:checked + span {
-    > div:last-of-type {
-      display: block;
-      color: var(--color-primary);
-    }
-    > div:first-of-type {
-      display: none;
-    }
-  }
-`;
-const StyledLabel = (0, _styledComponents.default)(_Label.default)`
-  display: inline-block;
-  cursor: pointer;
-  vertical-align: middle;
-
-  ${_ref2 => {
+const StyledCheckbox = (0, _styledComponents.default)(_Input.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n\n  &:checked + span {\n    > div:last-of-type {\n      display: block;\n      color: var(--color-primary);\n    }\n    > div:first-of-type {\n      display: none;\n    }\n  }\n"])));
+const StyledLabel = (0, _styledComponents.default)(_Label.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: pointer;\n  vertical-align: middle;\n\n  ", "\n\n  > span {\n    ", "\n    display: flex;\n    align-items: center;\n\n    > div {\n      margin-right: var(--spacing-xs);\n      width: 24px;\n      height: 24px;\n      border-radius: 4px;\n    }\n\n    > div:last-of-type {\n      display: none;\n    }\n  }\n\n  ", "\n\n  ", "\n"])), _ref2 => {
   let {
     marginRight
   } = _ref2;
-  return marginRight && (0, _styledComponents.css)`
-      margin-right: var(--spacing-l);
-    `;
-}}
-
-  > span {
-    ${_ref3 => {
+  return marginRight && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-right: var(--spacing-l);\n    "])));
+}, _ref3 => {
   let {
     disabled
   } = _ref3;
-  return disabled && (0, _styledComponents.css)`
-        opacity: 0.5;
-        cursor: not-allowed;
-      `;
-}}
-    display: flex;
-    align-items: center;
-
-    > div {
-      margin-right: var(--spacing-xs);
-      width: 24px;
-      height: 24px;
-      border-radius: 4px;
-    }
-
-    > div:last-of-type {
-      display: none;
-    }
-  }
-
-  ${_ref4 => {
+  return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        opacity: 0.5;\n        cursor: not-allowed;\n      "])));
+}, _ref4 => {
   let {
     fontSizeBig
   } = _ref4;
   return fontSizeBig && 'font-size: var(--font-h3);';
-}}
-
-  ${_ref5 => {
+}, _ref5 => {
   let {
     noMargin
   } = _ref5;
   return noMargin && 'margin: 0;';
-}}
-`;
-const Unchecked = _styledComponents.default.div`
-  flex: 0 0 auto;
-  border: var(--border-width) solid var(--border-color);
-`;
-const Checked = _styledComponents.default.div`
-  flex: 0 0 auto;
-  border: var(--border-width) solid var(--color-primary);
-  background: var(--color-primary);
-  position: relative;
-
-  > svg {
-    position: absolute;
-    color: var(--font-on-primary);
-    font-size: var(--font-h3);
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-`;
-const Text = _styledComponents.default.p`
-  word-break: break-all;
-`;
+});
+const Unchecked = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  border: var(--border-width) solid var(--border-color);\n"])));
+const Checked = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  border: var(--border-width) solid var(--color-primary);\n  background: var(--color-primary);\n  position: relative;\n\n  > svg {\n    position: absolute;\n    color: var(--font-on-primary);\n    font-size: var(--font-h3);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
+const Text = _styledComponents.default.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  word-break: break-all;\n"])));
 var _default = exports.default = Checkbox;

package/form/Fieldset.js

@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Fieldset = _styledComponents.default.fieldset`
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius-s);
-  padding: var(--spacing-s);
-
-  &[disabled] {
-    border-color: var(--border-color-transparent);
-  }
-`;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const Fieldset = _styledComponents.default.fieldset(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-s);\n  padding: var(--spacing-s);\n\n  &[disabled] {\n    border-color: var(--border-color-transparent);\n  }\n"])));
 var _default = exports.default = Fieldset;

package/form/FormItem.js

@@ -5,18 +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 FormItem = _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 FormItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-bottom: var(--spacing);\n\n  ", "\n"])), _ref => {
   let {
     alignCenter
   } = _ref;
-  return alignCenter && `
-    display: flex;
-    align-items: center;
-  `;
-}}
-`;
+  return alignCenter && "\n    display: flex;\n    align-items: center;\n  ";
+});
 var _default = exports.default = FormItem;