@charcoal-ui/react 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/components/LoadingSpinner/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export default function LoadingSpinner({ size, padding, transparent, }: {
+    size?: number | undefined;
+    padding?: number | undefined;
+    transparent?: boolean | undefined;
+}): JSX.Element;
+interface Props {
+    once?: boolean;
+}
+export interface LoadingSpinnerIconHandler {
+    restart(): void;
+}
+export declare const LoadingSpinnerIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<LoadingSpinnerIconHandler>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LoadingSpinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,OAAY,EACZ,WAAmB,GACpB;;;;CAAA,eAMA;AA6CD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,yFAmB7B,CAAA"}

package/dist/components/LoadingSpinner/index.story.d.ts

@@ -0,0 +1,10 @@
+import LoadingSpinner from '.';
+declare const _default: {
+    title: string;
+    component: typeof LoadingSpinner;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare function Basic(): JSX.Element;
+export declare function Icon(): JSX.Element;
+//# sourceMappingURL=index.story.d.ts.map

package/dist/components/LoadingSpinner/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.story.tsx"],"names":[],"mappings":"AAQA,OAAO,cAGN,MAAM,GAAG,CAAA;;;;;;AAEV,wBAIC;AAED,wBAAgB,KAAK,gBAQpB;AAED,wBAAgB,IAAI,gBAEnB"}

package/dist/index.cjs

@@ -9,6 +9,7 @@ var reactStately = require('react-stately');
 var textfield = require('@react-aria/textfield');
 var visuallyHidden = require('@react-aria/visually-hidden');
 require('@charcoal-ui/icons');
+var polished = require('polished');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -131,7 +132,7 @@ function unreachable(value) {
 
 var theme$2 = styled.createTheme(styled__default["default"]);
 
-var _templateObject$7, _templateObject2$5, _templateObject3$5;
+var _templateObject$8, _templateObject2$6, _templateObject3$6;
 
 var _excluded$6 = ["onClick", "disabled"];
 var Clickable = React__default["default"].forwardRef(function Clickable(props, ref) {
@@ -156,11 +157,11 @@ var Clickable = React__default["default"].forwardRef(function Clickable(props, r
     }));
   }
 });
-var clickableCss = styled$1.css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  /* Clickable style */\n  cursor: pointer;\n\n  ", " {\n    cursor: default;\n  }\n"])), utils.disabledSelector);
-var Button$1 = styled__default["default"].button(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  ", "\n"])), clickableCss);
-var A = styled__default["default"].span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  /* Reset a-tag appearance */\n  color: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  .text {\n    top: calc(1em + 2em);\n  }\n\n  ", "\n"])), clickableCss);
+var clickableCss = styled$1.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  /* Clickable style */\n  cursor: pointer;\n\n  ", " {\n    cursor: default;\n  }\n"])), utils.disabledSelector);
+var Button$1 = styled__default["default"].button(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  /* Reset button appearance */\n  appearance: none;\n  background: transparent;\n  padding: 0;\n  border-style: none;\n  outline: none;\n  color: inherit;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  /* Change the font styles in all browsers. */\n  font: inherit;\n\n  /* Remove the margin in Firefox and Safari. */\n  margin: 0;\n\n  /* Show the overflow in Edge. */\n  overflow: visible;\n\n  /* Remove the inheritance of text transform in Firefox. */\n  text-transform: none;\n\n  /* Remove the inner border and padding in Firefox. */\n  &::-moz-focus-inner {\n    border-style: none;\n    padding: 0;\n  }\n\n  ", "\n"])), clickableCss);
+var A = styled__default["default"].span(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  /* Reset a-tag appearance */\n  color: inherit;\n\n  &:focus {\n    outline: none;\n  }\n\n  .text {\n    top: calc(1em + 2em);\n  }\n\n  ", "\n"])), clickableCss);
 
-var _templateObject$6;
+var _templateObject$7;
 
 var _excluded$5 = ["children", "variant", "size", "fixed", "disabled"];
 var Button = React__default["default"].forwardRef(function Button(_ref, ref) {
@@ -188,7 +189,7 @@ var StyledButton = styled__default["default"](Clickable).withConfig({
     // fixed は <button> 要素に渡ってはいけない
     return prop !== 'fixed';
   }
-}).attrs(styledProps$1)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n\n  ", "\n\n  /* \u3088\u304F\u8003\u3048\u305F\u3089height=32\u3063\u3066\u5B9A\u7FA9\u304C\u5B58\u5728\u3057\u306A\u3044\u306A... */\n  height: ", "px;\n"])), function (p) {
+}).attrs(styledProps$1)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n\n  ", "\n\n  /* \u3088\u304F\u8003\u3048\u305F\u3089height=32\u3063\u3066\u5B9A\u7FA9\u304C\u5B58\u5728\u3057\u306A\u3044\u306A... */\n  height: ", "px;\n"])), function (p) {
   return p.fixed ? 'stretch' : 'min-content';
 }, function (p) {
   return theme$2(function (o) {
@@ -255,7 +256,7 @@ function sizeToProps$1(size) {
   }
 }
 
-var _templateObject$5;
+var _templateObject$6;
 
 var _excluded$4 = ["variant", "size", "icon"];
 var IconButton = React__default["default"].forwardRef(function IconButtonInner(_ref, ref) {
@@ -275,7 +276,7 @@ var IconButton = React__default["default"].forwardRef(function IconButtonInner(_
     name: icon
   }));
 });
-var StyledIconButton = styled__default["default"](Clickable).attrs(styledProps)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (p) {
+var StyledIconButton = styled__default["default"](Clickable).attrs(styledProps)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n"])), function (p) {
   return p.width;
 }, function (p) {
   return p.height;
@@ -362,7 +363,7 @@ function validateIconSize(size, icon) {
   }
 }
 
-var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3;
+var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3;
 function Radio(_ref) {
   var value = _ref.value,
       _ref$forceChecked = _ref.forceChecked,
@@ -398,7 +399,7 @@ function Radio(_ref) {
     disabled: isDisabled || isReadonly
   }), children != null && /*#__PURE__*/React__default["default"].createElement(RadioLabel, null, children));
 }
-var RadioRoot = styled__default["default"].label(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref2) {
+var RadioRoot = styled__default["default"].label(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-gap: ", ";\n  align-items: center;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return utils.px(theme.spacing[4]);
 }, theme$2(function (o) {
@@ -406,7 +407,7 @@ var RadioRoot = styled__default["default"].label(_templateObject$4 || (_template
 }));
 var RadioInput = styled__default["default"].input.attrs({
   type: 'radio'
-})(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /** Make prior to browser default style */\n  &[type='radio'] {\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n\n    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ", ";\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ", ";\n    }\n\n    &:checked {\n      ", "\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ", "\n      }\n    }\n\n    ", "\n  }\n"])), function (_ref3) {
+})(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  /** Make prior to browser default style */\n  &[type='radio'] {\n    appearance: none;\n    display: block;\n    box-sizing: border-box;\n\n    padding: 6px;\n\n    width: 20px;\n    height: 20px;\n\n    ", ";\n\n    &:not(:checked) {\n      border-width: 2px;\n      border-style: solid;\n      border-color: ", ";\n    }\n\n    &:checked {\n      ", "\n\n      &::after {\n        content: '';\n        display: block;\n        width: 8px;\n        height: 8px;\n        pointer-events: none;\n\n        ", "\n      }\n    }\n\n    ", "\n  }\n"])), function (_ref3) {
   var _ref3$hasError = _ref3.hasError,
       hasError = _ref3$hasError === void 0 ? false : _ref3$hasError;
   return theme$2(function (o) {
@@ -422,7 +423,7 @@ var RadioInput = styled__default["default"].input.attrs({
 }), theme$2(function (o) {
   return o.outline["default"].focus;
 }));
-var RadioLabel = styled__default["default"].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+var RadioLabel = styled__default["default"].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
   return [o.typography(14)];
 })); // TODO: use (or polyfill) flex gap
 
@@ -482,7 +483,7 @@ var SelectGroupContext = React.createContext({
   }
 });
 
-var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$1;
+var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$2, _templateObject5$1;
 function Select(_ref) {
   var value = _ref.value,
       _ref$forceChecked = _ref.forceChecked,
@@ -540,18 +541,18 @@ function Select(_ref) {
     "unsafe-non-guideline-scale": 16 / 24
   })), Boolean(children) && /*#__PURE__*/React__default["default"].createElement(SelectLabel, null, children));
 }
-var SelectRoot = styled__default["default"].label(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  ", " {\n    cursor: default;\n  }\n  gap: ", ";\n  ", "\n"])), utils.disabledSelector, function (_ref2) {
+var SelectRoot = styled__default["default"].label(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  ", " {\n    cursor: default;\n  }\n  gap: ", ";\n  ", "\n"])), utils.disabledSelector, function (_ref2) {
   var theme = _ref2.theme;
   return utils.px(theme.spacing[4]);
 }, theme$2(function (o) {
   return o.disabled;
 }));
-var SelectLabel = styled__default["default"].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), theme$2(function (o) {
+var SelectLabel = styled__default["default"].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), theme$2(function (o) {
   return [o.typography(14), o.font.text1];
 }));
 var SelectInput = styled__default["default"].input.attrs({
   type: 'checkbox'
-})(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: block;\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    &:checked {\n      ", "\n    }\n\n    ", ";\n  }\n"])), theme$2(function (o) {
+})(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: block;\n    width: 20px;\n    height: 20px;\n    margin: 0;\n\n    &:checked {\n      ", "\n    }\n\n    ", ";\n  }\n"])), theme$2(function (o) {
   return o.bg.brand.hover.press;
 }), function (_ref3) {
   var hasError = _ref3.hasError,
@@ -615,7 +616,7 @@ function SelectGroup(_ref7) {
   }, children));
 }
 
-var _templateObject$2, _templateObject2$2, _templateObject3$2;
+var _templateObject$3, _templateObject2$3, _templateObject3$3;
 
 var _excluded$3 = ["className", "type"];
 function SwitchCheckbox(props) {
@@ -646,18 +647,18 @@ function SwitchCheckbox(props) {
   // eslint-disable-next-line react/destructuring-assignment
   React__default["default"].createElement(LabelInner, null, props.children) : undefined);
 }
-var Label$1 = styled__default["default"].label(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  gap: ", ";\n  cursor: pointer;\n  outline: 0;\n\n  ", "\n\n  ", " {\n    cursor: default;\n  }\n"])), function (_ref) {
+var Label$1 = styled__default["default"].label(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: inline-grid;\n  grid-template-columns: auto 1fr;\n  gap: ", ";\n  cursor: pointer;\n  outline: 0;\n\n  ", "\n\n  ", " {\n    cursor: default;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return utils.px(theme.spacing[4]);
 }, theme$2(function (o) {
   return o.disabled;
 }), utils.disabledSelector);
-var LabelInner = styled__default["default"].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+var LabelInner = styled__default["default"].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
   return o.typography(14);
 }));
 var SwitchInput = styled__default["default"].input.attrs({
   type: 'checkbox'
-})(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    width: 28px;\n    border: 2px solid transparent;\n    transition: box-shadow 0.2s, background-color 0.2s;\n    cursor: inherit;\n    ", "\n\n    &::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      left: 0;\n      width: 12px;\n      height: 12px;\n      transform: translateX(0);\n      transition: transform 0.2s;\n      ", "\n    }\n\n    &:checked {\n      ", "\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n"])), theme$2(function (o) {
+})(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  &[type='checkbox'] {\n    appearance: none;\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    width: 28px;\n    border: 2px solid transparent;\n    transition: box-shadow 0.2s, background-color 0.2s;\n    cursor: inherit;\n    ", "\n\n    &::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      left: 0;\n      width: 12px;\n      height: 12px;\n      transform: translateX(0);\n      transition: transform 0.2s;\n      ", "\n    }\n\n    &:checked {\n      ", "\n\n      &::after {\n        transform: translateX(12px);\n      }\n    }\n  }\n"])), theme$2(function (o) {
   return [o.borderRadius(16), o.height.px(16), o.bg.text4.hover.press, o.outline["default"].focus];
 }), theme$2(function (o) {
   return [o.bg.text5.hover.press, o.borderRadius('oval')];
@@ -665,7 +666,7 @@ var SwitchInput = styled__default["default"].input.attrs({
   return o.bg.brand.hover.press;
 }));
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1;
+var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1;
 
 var _excluded$2 = ["style", "className", "label", "required", "requiredText", "subLabel"];
 var FieldLabel = React__default["default"].forwardRef(function FieldLabel(_ref, ref) {
@@ -686,13 +687,13 @@ var FieldLabel = React__default["default"].forwardRef(function FieldLabel(_ref,
   }, labelProps), label), required && /*#__PURE__*/React__default["default"].createElement(RequiredText, null, requiredText), /*#__PURE__*/React__default["default"].createElement(SubLabelClickable, null, /*#__PURE__*/React__default["default"].createElement("span", null, subLabel)));
 });
 var theme$1 = styled.createTheme(styled__default["default"]);
-var Label = styled__default["default"].label(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+var Label = styled__default["default"].label(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
   return [o.typography(14).bold, o.font.text1];
 }));
-var RequiredText = styled__default["default"].span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+var RequiredText = styled__default["default"].span(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
   return [o.typography(14), o.font.text3];
 }));
-var SubLabelClickable = styled__default["default"].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+var SubLabelClickable = styled__default["default"].div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
   return [o.typography(14), o.font.text3.hover.press, o.outline["default"].focus];
 }));
 var FieldLabelWrapper = styled__default["default"].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n\n  > ", " {\n    ", "\n  }\n\n  > ", " {\n    ", "\n  }\n"])), RequiredText, theme$1(function (o) {
@@ -701,7 +702,7 @@ var FieldLabelWrapper = styled__default["default"].div(_templateObject4$1 || (_t
   return o.margin.left('auto');
 }));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 var _excluded$1 = ["onChange"],
     _excluded2 = ["onChange"];
@@ -899,11 +900,8 @@ var MultiLineTextField = React__default["default"].forwardRef(function MultiLine
   var syncHeight = React.useCallback(function (textarea) {
     var _$match$length, _$match;
 
-    var rows = (_$match$length = (_$match = (textarea.value + "\n").match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 1;
-
-    if (initialRows <= rows) {
-      setRows(rows);
-    }
+    var rows = ((_$match$length = (_$match = (textarea.value + "\n").match(/\n/g)) == null ? void 0 : _$match.length) != null ? _$match$length : 0) || 1;
+    setRows(initialRows <= rows ? rows : initialRows);
   }, [initialRows]);
   var nonControlled = props.value === undefined;
   var handleChange = React.useCallback(function (value) {
@@ -967,15 +965,15 @@ var MultiLineTextField = React__default["default"].forwardRef(function MultiLine
     invalid: invalid
   }, invalid ? errorMessageProps : descriptionProps), assistiveText));
 });
-var TextFieldRoot = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (p) {
+var TextFieldRoot = styled__default["default"].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (p) {
   return p.isDisabled && {
     opacity: p.theme.elementEffect.disabled.opacity
   };
 });
-var TextFieldLabel = styled__default["default"](FieldLabel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
+var TextFieldLabel = styled__default["default"](FieldLabel)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
   return o.margin.bottom(8);
 }));
-var StyledInputContainer = styled__default["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"])));
+var StyledInputContainer = styled__default["default"].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"])));
 var PrefixContainer = styled__default["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"])));
 var SuffixContainer = styled__default["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  right: 8px;\n  transform: translateY(-50%);\n\n  display: flex;\n  gap: 8px;\n"])));
 var Affix = styled__default["default"].span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  ", "\n"])), theme(function (o) {
@@ -1026,7 +1024,7 @@ var AssistiveText = styled__default["default"].p(_templateObject14 || (_template
 });
 
 var _excluded = ["name", "scale", "unsafeNonGuidelineScale", "className"];
-var Icon = React__default["default"].forwardRef(function IconInner(_ref, ref) {
+var Icon$1 = React__default["default"].forwardRef(function IconInner(_ref, ref) {
   var name = _ref.name,
       scale = _ref.scale,
       unsafeNonGuidelineScale = _ref.unsafeNonGuidelineScale,
@@ -1042,6 +1040,66 @@ var Icon = React__default["default"].forwardRef(function IconInner(_ref, ref) {
   }, rest));
 });
 
+var _templateObject, _templateObject2, _templateObject3;
+function LoadingSpinner(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 48 : _ref$size,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? 16 : _ref$padding,
+      _ref$transparent = _ref.transparent,
+      transparent = _ref$transparent === void 0 ? false : _ref$transparent;
+  return /*#__PURE__*/React__default["default"].createElement(LoadingSpinnerRoot, {
+    size: size,
+    padding: padding,
+    transparent: transparent
+  }, /*#__PURE__*/React__default["default"].createElement(LoadingSpinnerIcon, null));
+}
+var LoadingSpinnerRoot = styled__default["default"].div.attrs({
+  role: 'progressbar'
+})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin: auto;\n  padding: ", "px;\n  border-radius: 8px;\n  font-size: ", "px;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  color: ", ";\n"])), function (props) {
+  return props.padding;
+}, function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, function (props) {
+  return props.size;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      transparent = _ref2.transparent;
+  return transparent ? 'transparent' : polished.transparentize(0.32, theme.color.background1);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color.text4;
+});
+var scaleout = styled$1.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  from {\n    transform: scale(0);\n    opacity: 1;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 0;\n  }\n"])));
+var Icon = styled__default["default"].div.attrs({
+  role: 'presentation'
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 1em;\n  height: 1em;\n  border-radius: 1em;\n  background-color: currentColor;\n  animation: ", " 1s both ease-out;\n  animation-iteration-count: ", ";\n\n  &[data-reset-animation] {\n    animation: none;\n  }\n"])), scaleout, function (p) {
+  return p.once ? 1 : 'infinite';
+});
+var LoadingSpinnerIcon = React__default["default"].forwardRef(function LoadingSpinnerIcon(_ref4, ref) {
+  var _ref4$once = _ref4.once,
+      once = _ref4$once === void 0 ? false : _ref4$once;
+  var iconRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      restart: function restart() {
+        if (!iconRef.current) {
+          return;
+        }
+
+        iconRef.current.dataset.resetAnimation = 'true'; // Force reflow hack!
+        delete iconRef.current.dataset.resetAnimation;
+      }
+    };
+  });
+  return /*#__PURE__*/React__default["default"].createElement(Icon, {
+    ref: iconRef,
+    once: once
+  });
+});
+
 Object.defineProperty(exports, 'SSRProvider', {
   enumerable: true,
   get: function () { return ssr.SSRProvider; }
@@ -1049,8 +1107,10 @@ Object.defineProperty(exports, 'SSRProvider', {
 exports.Button = Button;
 exports.Clickable = Clickable;
 exports.ComponentAbstraction = ComponentAbstraction;
-exports.Icon = Icon;
+exports.Icon = Icon$1;
 exports.IconButton = IconButton;
+exports.LoadingSpinner = LoadingSpinner;
+exports.LoadingSpinnerIcon = LoadingSpinnerIcon;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;