@cashub/ui 0.46.1 → 0.48.0

package/dropzone/FileDropzone.js

@@ -14,14 +14,7 @@ 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,
@@ -58,7 +51,10 @@ const FileDropzone = _ref => {
       Resume: 'Resume Upload',
       Retry: 'Retry Upload'
     };
-    return _objectSpread(_objectSpread({}, defaultTexts), translation);
+    return {
+      ...defaultTexts,
+      ...translation
+    };
   }, [translation]);
   const handleClick = (0, _react.useCallback)(() => {
     if (files.length > 0) return;
@@ -339,42 +335,145 @@ const FileDropzone = _ref => {
     }), files.length === 0 ? messageItem : previewItem]
   });
 };
-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 => {
+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 => {
   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(_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  "]))));
+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%;
+  `}
+`;
 Preview.displayName = 'Preview';
-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"])));
+const PreviewImage = _styledComponents.default.div`
+  margin-right: var(--spacing-xs);
+
+  > img {
+    width: 120px;
+    margin-bottom: var(--spacing-xs);
+  }
+`;
 PreviewImage.displayName = 'PreviewImage';
-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"])));
+const PreviewDetails = _styledComponents.default.div`
+  overflow: hidden;
+  min-width: 200px;
+
+  > * {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  > .ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
 PreviewDetails.displayName = 'PreviewDetails';
-const Progress = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+const Progress = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 
 // fix:color
-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 => {
+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 => {
   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'
-}))(_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 => {
+}))`
+  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 => {
   let {
     danger
   } = _ref5;
-  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"])));
+  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;
+`;
 var _default = exports.default = FileDropzone;

package/dropzone/ImageDropzone.js

@@ -12,9 +12,7 @@ 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,
@@ -221,45 +219,116 @@ const ImageDropzone = _ref => {
     }), files.length === 0 ? messageItem : previewItem()]
   });
 };
-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 => {
+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 => {
   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);';
-});
-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 => {
+}};
+
+  &:focus {
+    border-color: var(--color-primary);
+  }
+`;
+const Image = _styledComponents.default.figure`
+  position: relative;
+  margin: var(--spacing-xs);
+
+  ${_ref5 => {
   let {
     width,
     height,
     fixedSize
   } = _ref5;
   if (fixedSize) {
-    return "\n        width: ".concat(width, "px;\n        height: ").concat(height, "px;\n      ");
+    return `
+        width: ${width}px;
+        height: ${height}px;
+      `;
   }
   if (width < height) {
-    return "\n        width: ".concat(width, "px;\n        max-width: ").concat(width, "px;\n        max-height: ").concat(height, "px;\n      ");
+    return `
+        width: ${width}px;
+        max-width: ${width}px;
+        max-height: ${height}px;
+      `;
   }
   if (height < width) {
-    return "\n        height: ".concat(height, "px;\n        max-width: ").concat(width, "px;\n        max-height: ").concat(height, "px;\n      ");
+    return `
+        height: ${height}px;
+        max-width: ${width}px;
+        max-height: ${height}px;
+      `;
   }
-});
-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"])));
+}}
+
+  > img {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--border-radius);
+  }
+`;
+const ButtonGroup = _styledComponents.default.div`
+  position: absolute;
+  right: calc(var(--spacing-xs) * -1);
+  top: calc(var(--spacing-xs) * -1);
+`;
 const Button = _styledComponents.default.div.attrs(() => ({
   role: 'button'
-}))(_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 => {
+}))`
+  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 => {
   let {
     danger
   } = _ref6;
   return danger && 'background: var(--color-danger);';
-});
+}}
+`;
 var _default = exports.default = ImageDropzone;

package/dropzone/subComponent/Message.js

@@ -5,15 +5,22 @@ 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'
-}))(_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 => {
+}))`
+  text-align: center;
+
+  > svg {
+    margin-bottom: var(--spacing-s);
+    font-size: var(--font-h2);
+  }
+
+  ${_ref => {
   let {
     dragging
   } = _ref;
   return dragging ? 'opacity: 0.5' : '';
-});
+}};
+`;
 var _default = exports.default = Message;

package/figure/IconFigure.js

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

package/figure/ImageFigure.js

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

package/form/Checkbox.js

@@ -10,11 +10,9 @@ 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,
@@ -53,29 +51,92 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     })]
   });
 });
-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 => {
+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 => {
   let {
     marginRight
   } = _ref2;
-  return marginRight && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-right: var(--spacing-l);\n    "])));
-}, _ref3 => {
+  return marginRight && (0, _styledComponents.css)`
+      margin-right: var(--spacing-l);
+    `;
+}}
+
+  > span {
+    ${_ref3 => {
   let {
     disabled
   } = _ref3;
-  return disabled && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        opacity: 0.5;\n        cursor: not-allowed;\n      "])));
-}, _ref4 => {
+  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 => {
   let {
     fontSizeBig
   } = _ref4;
   return fontSizeBig && 'font-size: var(--font-h3);';
-}, _ref5 => {
+}}
+
+  ${_ref5 => {
   let {
     noMargin
   } = _ref5;
   return noMargin && 'margin: 0;';
-});
-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"])));
+}}
+`;
+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;
+`;
 var _default = exports.default = Checkbox;

package/form/Fieldset.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 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"])));
+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);
+  }
+`;
 var _default = exports.default = Fieldset;

package/form/FormItem.js

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