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

package/dist/index.module.js

@@ -1,6 +1,6 @@
-import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect } from 'react';
+import React, { useContext, useCallback, createContext, useMemo, useRef, useState, useEffect, useImperativeHandle } from 'react';
 export { SSRProvider } from '@react-aria/ssr';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { createTheme } from '@charcoal-ui/styled';
 import { disabledSelector, px } from '@charcoal-ui/utils';
 import warning from 'warning';
@@ -9,6 +9,7 @@ import { useToggleState } from 'react-stately';
 import { useTextField } from '@react-aria/textfield';
 import { useVisuallyHidden } from '@react-aria/visually-hidden';
 import '@charcoal-ui/icons';
+import { transparentize } from 'polished';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -125,7 +126,7 @@ function unreachable(value) {
 
 var theme$2 = createTheme(styled);
 
-var _templateObject$7, _templateObject2$5, _templateObject3$5;
+var _templateObject$8, _templateObject2$6, _templateObject3$6;
 
 var _excluded$6 = ["onClick", "disabled"];
 var Clickable = React.forwardRef(function Clickable(props, ref) {
@@ -150,11 +151,11 @@ var Clickable = React.forwardRef(function Clickable(props, ref) {
     }));
   }
 });
-var clickableCss = css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  /* Clickable style */\n  cursor: pointer;\n\n  ", " {\n    cursor: default;\n  }\n"])), disabledSelector);
-var Button$1 = styled.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.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 = css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  /* Clickable style */\n  cursor: pointer;\n\n  ", " {\n    cursor: default;\n  }\n"])), disabledSelector);
+var Button$1 = styled.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.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.forwardRef(function Button(_ref, ref) {
@@ -182,7 +183,7 @@ var StyledButton = styled(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) {
@@ -249,7 +250,7 @@ function sizeToProps$1(size) {
   }
 }
 
-var _templateObject$5;
+var _templateObject$6;
 
 var _excluded$4 = ["variant", "size", "icon"];
 var IconButton = React.forwardRef(function IconButtonInner(_ref, ref) {
@@ -269,7 +270,7 @@ var IconButton = React.forwardRef(function IconButtonInner(_ref, ref) {
     name: icon
   }));
 });
-var StyledIconButton = styled(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(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;
@@ -356,7 +357,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,
@@ -392,7 +393,7 @@ function Radio(_ref) {
     disabled: isDisabled || isReadonly
   }), children != null && /*#__PURE__*/React.createElement(RadioLabel, null, children));
 }
-var RadioRoot = styled.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.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 px(theme.spacing[4]);
 }, theme$2(function (o) {
@@ -400,7 +401,7 @@ var RadioRoot = styled.label(_templateObject$4 || (_templateObject$4 = _taggedTe
 }));
 var RadioInput = styled.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) {
@@ -416,7 +417,7 @@ var RadioInput = styled.input.attrs({
 }), theme$2(function (o) {
   return o.outline["default"].focus;
 }));
-var RadioLabel = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+var RadioLabel = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
   return [o.typography(14)];
 })); // TODO: use (or polyfill) flex gap
 
@@ -476,7 +477,7 @@ var SelectGroupContext = 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,
@@ -534,18 +535,18 @@ function Select(_ref) {
     "unsafe-non-guideline-scale": 16 / 24
   })), Boolean(children) && /*#__PURE__*/React.createElement(SelectLabel, null, children));
 }
-var SelectRoot = styled.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"])), disabledSelector, function (_ref2) {
+var SelectRoot = styled.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"])), disabledSelector, function (_ref2) {
   var theme = _ref2.theme;
   return px(theme.spacing[4]);
 }, theme$2(function (o) {
   return o.disabled;
 }));
-var SelectLabel = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  ", "\n"])), theme$2(function (o) {
+var SelectLabel = styled.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.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,
@@ -609,7 +610,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) {
@@ -640,18 +641,18 @@ function SwitchCheckbox(props) {
   // eslint-disable-next-line react/destructuring-assignment
   React.createElement(LabelInner, null, props.children) : undefined);
 }
-var Label$1 = styled.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.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 px(theme.spacing[4]);
 }, theme$2(function (o) {
   return o.disabled;
 }), disabledSelector);
-var LabelInner = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
+var LabelInner = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$2(function (o) {
   return o.typography(14);
 }));
 var SwitchInput = styled.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')];
@@ -659,7 +660,7 @@ var SwitchInput = styled.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.forwardRef(function FieldLabel(_ref, ref) {
@@ -680,13 +681,13 @@ var FieldLabel = React.forwardRef(function FieldLabel(_ref, ref) {
   }, labelProps), label), required && /*#__PURE__*/React.createElement(RequiredText, null, requiredText), /*#__PURE__*/React.createElement(SubLabelClickable, null, /*#__PURE__*/React.createElement("span", null, subLabel)));
 });
 var theme$1 = createTheme(styled);
-var Label = styled.label(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+var Label = styled.label(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
   return [o.typography(14).bold, o.font.text1];
 }));
-var RequiredText = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+var RequiredText = styled.span(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
   return [o.typography(14), o.font.text3];
 }));
-var SubLabelClickable = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme$1(function (o) {
+var SubLabelClickable = styled.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.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) {
@@ -695,7 +696,7 @@ var FieldLabelWrapper = styled.div(_templateObject4$1 || (_templateObject4$1 = _
   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"];
@@ -893,11 +894,8 @@ var MultiLineTextField = React.forwardRef(function MultiLineTextFieldInner(_ref2
   var syncHeight = 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 = useCallback(function (value) {
@@ -961,15 +959,15 @@ var MultiLineTextField = React.forwardRef(function MultiLineTextFieldInner(_ref2
     invalid: invalid
   }, invalid ? errorMessageProps : descriptionProps), assistiveText));
 });
-var TextFieldRoot = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (p) {
+var TextFieldRoot = styled.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(FieldLabel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
+var TextFieldLabel = styled(FieldLabel)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), theme(function (o) {
   return o.margin.bottom(8);
 }));
-var StyledInputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"])));
+var StyledInputContainer = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: grid;\n  position: relative;\n"])));
 var PrefixContainer = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n"])));
 var SuffixContainer = styled.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.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  user-select: none;\n\n  ", "\n"])), theme(function (o) {
@@ -1020,7 +1018,7 @@ var AssistiveText = styled.p(_templateObject14 || (_templateObject14 = _taggedTe
 });
 
 var _excluded = ["name", "scale", "unsafeNonGuidelineScale", "className"];
-var Icon = React.forwardRef(function IconInner(_ref, ref) {
+var Icon$1 = React.forwardRef(function IconInner(_ref, ref) {
   var name = _ref.name,
       scale = _ref.scale,
       unsafeNonGuidelineScale = _ref.unsafeNonGuidelineScale,
@@ -1036,5 +1034,65 @@ var Icon = React.forwardRef(function IconInner(_ref, ref) {
   }, rest));
 });
 
-export { Button, Clickable, ComponentAbstraction, Icon, IconButton, Radio, RadioGroup, Select, SelectGroup, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
+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.createElement(LoadingSpinnerRoot, {
+    size: size,
+    padding: padding,
+    transparent: transparent
+  }, /*#__PURE__*/React.createElement(LoadingSpinnerIcon, null));
+}
+var LoadingSpinnerRoot = styled.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' : transparentize(0.32, theme.color.background1);
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.color.text4;
+});
+var scaleout = 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.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.forwardRef(function LoadingSpinnerIcon(_ref4, ref) {
+  var _ref4$once = _ref4.once,
+      once = _ref4$once === void 0 ? false : _ref4$once;
+  var iconRef = useRef(null);
+  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.createElement(Icon, {
+    ref: iconRef,
+    once: once
+  });
+});
+
+export { Button, Clickable, ComponentAbstraction, Icon$1 as Icon, IconButton, LoadingSpinner, LoadingSpinnerIcon, Radio, RadioGroup, Select, SelectGroup, SwitchCheckbox as Switch, TextField, useComponentAbstraction };
 //# sourceMappingURL=index.module.js.map