@helpdice/ui 1.0.1 → 1.0.2

package/esm/slider/styles.js

@@ -0,0 +1,21 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      bg: palette.accents_8
+    },
+    secondary: {
+      bg: palette.accents_8
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/snippet/index.d.ts

@@ -0,0 +1,4 @@
+import Snippet from "./snippet";
+export type { SnippetProps, ToastTypes } from "./snippet";
+export type { CopyTypes, SnippetTypes } from "../utils/prop-types";
+export default Snippet;

package/esm/snippet/index.js

@@ -0,0 +1,2 @@
+import Snippet from './snippet';
+export default Snippet;

package/esm/snippet/snippet-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SnippetIcon: React.NamedExoticComponent<object>;
+export default SnippetIcon;

package/esm/snippet/snippet-icon.js

@@ -0,0 +1,25 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var SnippetIconComponent = function SnippetIconComponent() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    style: {
+      color: 'currentcolor'
+    },
+    className: "jsx-418323402"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z",
+    className: "jsx-418323402"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "418323402"
+  }, "svg.jsx-418323402{width:calc(var(--snippet-font-size) * 1.69);height:calc(var(--snippet-font-size) * 1.69);}"));
+};
+SnippetIconComponent.displayName = 'GeistSnippetIcon';
+var SnippetIcon = /*#__PURE__*/React.memo(SnippetIconComponent);
+export default SnippetIcon;

package/esm/snippet/snippet.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SnippetTypes, CopyTypes, NormalTypes } from "../utils/prop-types";
+export type ToastTypes = NormalTypes;
+interface Props {
+    text?: string | string[];
+    symbol?: string;
+    toastText?: string;
+    toastType?: ToastTypes;
+    filled?: boolean;
+    copy?: CopyTypes;
+    type?: SnippetTypes;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SnippetProps = Props & NativeAttrs;
+declare const Snippet: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Snippet;

package/esm/snippet/snippet.js

@@ -0,0 +1,93 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "filled", "children", "symbol", "toastText", "toastType", "text", "copy", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo, useRef } from 'react';
+import useTheme from '../use-theme';
+import { getStyles } from './styles';
+import SnippetIcon from './snippet-icon';
+import useClipboard from '../utils/use-clipboard';
+import useToasts from '../use-toasts';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var textArrayToString = function textArrayToString(text) {
+  return text.reduce(function (pre, current) {
+    if (!current) return pre;
+    return pre ? "".concat(pre, "\n").concat(current) : current;
+  }, '');
+};
+var SnippetComponent = function SnippetComponent(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
+    children = _ref.children,
+    _ref$symbol = _ref.symbol,
+    symbol = _ref$symbol === void 0 ? '$' : _ref$symbol,
+    _ref$toastText = _ref.toastText,
+    toastText = _ref$toastText === void 0 ? 'Copied to clipboard!' : _ref$toastText,
+    _ref$toastType = _ref.toastType,
+    toastType = _ref$toastType === void 0 ? 'success' : _ref$toastType,
+    text = _ref.text,
+    _ref$copy = _ref.copy,
+    copyType = _ref$copy === void 0 ? 'default' : _ref$copy,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useClipboard = useClipboard(),
+    copy = _useClipboard.copy;
+  var _useToasts = useToasts(),
+    setToast = _useToasts.setToast;
+  var ref = useRef(null);
+  var isMultiLine = text && Array.isArray(text);
+  var style = useMemo(function () {
+    return getStyles(type, theme.palette, filled);
+  }, [type, theme.palette, filled]);
+  var showCopyIcon = useMemo(function () {
+    return copyType !== 'prevent';
+  }, [copyType]);
+  var childText = useMemo(function () {
+    if (isMultiLine) return textArrayToString(text);
+    if (!children) return text;
+    if (!ref.current) return '';
+    return ref.current.textContent;
+  }, [ref.current, children, text]);
+  var symbolBefore = useMemo(function () {
+    var str = symbol.trim();
+    return str ? "".concat(str, " ") : '';
+  }, [symbol]);
+  var clickHandler = function clickHandler() {
+    if (!childText || !showCopyIcon) return;
+    copy(childText);
+    if (copyType === 'silent') return;
+    setToast({
+      text: toastText,
+      type: toastType
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2394272060", [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + (props && props.className != null && props.className || useClasses('snippet', className) || "")
+  }), isMultiLine ? text.map(function (t, index) {
+    return /*#__PURE__*/React.createElement("pre", {
+      key: "snippet-".concat(index, "-").concat(t),
+      className: _JSXStyle.dynamic([["2394272060", [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
+    }, t);
+  }) : /*#__PURE__*/React.createElement("pre", {
+    ref: ref,
+    className: _JSXStyle.dynamic([["2394272060", [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]])
+  }, children || text), showCopyIcon && /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["2394272060", [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]]]) + " " + "copy"
+  }, /*#__PURE__*/React.createElement(SnippetIcon, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2394272060",
+    dynamic: [style.color, style.bgColor, style.border, theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, 'initial'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? 'flex-start' : 'center', theme.layout.radius, isMultiLine ? 'var(--snippet-padding-top)' : 0]
+  }, ".snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:".concat(style.color, ";background-color:").concat(style.bgColor, ";border:1px solid ").concat(style.border, ";border-radius:").concat(theme.layout.radius, ";--snippet-font-size:").concat(SCALES.font(0.8125), ";--snippet-padding-top:").concat(SCALES.pt(0.667), ";font-size:var(--snippet-font-size);width:").concat(SCALES.width(1, 'initial'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(2.667), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:").concat(style.color, ";font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'").concat(symbolBefore, "';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;height:calc(100% - 2px);background-color:").concat(style.bgColor, ";display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";-webkit-box-align:").concat(isMultiLine ? 'flex-start' : 'center', ";-ms-flex-align:").concat(isMultiLine ? 'flex-start' : 'center', ";align-items:").concat(isMultiLine ? 'flex-start' : 'center', ";width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:").concat(theme.layout.radius, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:").concat(isMultiLine ? 'var(--snippet-padding-top)' : 0, ";opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}")));
+};
+SnippetComponent.displayName = 'Snippet';
+var Snippet = withScale(SnippetComponent);
+export default Snippet;

package/esm/snippet/styles.d.ts

@@ -0,0 +1,8 @@
+import { SnippetTypes } from "../utils/prop-types";
+import { HUIThemesPalette } from "../themes/presets";
+export type SnippetStyles = {
+    color: string;
+    border: string;
+    bgColor: string;
+};
+export declare const getStyles: (type: SnippetTypes, palette: HUIThemesPalette, fill?: boolean) => SnippetStyles;

package/esm/snippet/styles.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var getStyles = function getStyles(type, palette, fill) {
+  var styles = {
+    "default": {
+      color: palette.foreground,
+      border: palette.border,
+      bgColor: palette.background
+    },
+    success: {
+      color: palette.success,
+      border: palette.success,
+      bgColor: palette.background
+    },
+    warning: {
+      color: palette.warning,
+      border: palette.warning,
+      bgColor: palette.background
+    },
+    error: {
+      color: palette.error,
+      border: palette.error,
+      bgColor: palette.background
+    },
+    secondary: {
+      color: palette.secondary,
+      border: palette.secondary,
+      bgColor: palette.background
+    },
+    lite: {
+      color: palette.foreground,
+      border: palette.border,
+      bgColor: palette.accents_1
+    },
+    dark: {
+      color: palette.background,
+      border: palette.foreground,
+      bgColor: palette.foreground
+    }
+  };
+  var filledTypes = ['success', 'warning', 'error', 'secondary'];
+  var style = styles[type];
+  var shouldFilled = filledTypes.includes(type);
+  if (!fill || !shouldFilled) return style;
+  return _extends({}, style, {
+    color: style.bgColor,
+    bgColor: style.color
+  });
+};

package/esm/spacer/index.d.ts

@@ -0,0 +1,3 @@
+import Spacer from "./spacer";
+export type { SpacerProps } from "./spacer";
+export default Spacer;

package/esm/spacer/index.js

@@ -0,0 +1,2 @@
+import Spacer from './spacer';
+export default Spacer;

package/esm/spacer/spacer.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+interface Props {
+    inline?: boolean;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SpacerProps = Props & NativeAttrs;
+declare const Spacer: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Spacer;

package/esm/spacer/spacer.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["inline", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+var SpacerComponent = function SpacerComponent(_ref) {
+  var _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1994396435", [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1994396435",
+    dynamic: [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "span.__jsx-style-dynamic-selector{display:".concat(inline ? 'inline-block' : 'block', ";width:").concat(SCALES.width(1), ";height:").concat(SCALES.height(1), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+SpacerComponent.displayName = 'Spacer';
+var Spacer = withScale(SpacerComponent);
+export default Spacer;

package/esm/spinner/index.d.ts

@@ -0,0 +1,3 @@
+import Spinner from "./spinner";
+export type { SpinnerProps } from "./spinner";
+export default Spinner;

package/esm/spinner/index.js

@@ -0,0 +1,2 @@
+import Spinner from './spinner';
+export default Spinner;

package/esm/spinner/spinner.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SpinnerProps = Props & NativeAttrs;
+declare const Spinner: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Spinner;

package/esm/spinner/spinner.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getSpans = function getSpans(theme) {
+  return _toConsumableArray(new Array(12)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "spinner-".concat(index),
+      className: _JSXStyle.dynamic([["3296107463", [theme.palette.foreground, theme.layout.radius]]])
+    }, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "3296107463",
+      dynamic: [theme.palette.foreground, theme.layout.radius]
+    }, "span.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.foreground, ";position:absolute;top:-3.9%;width:24%;height:8%;left:-10%;border-radius:").concat(theme.layout.radius, ";-webkit-animation:spinner-__jsx-style-dynamic-selector 1.2s linear 0s infinite normal none running;animation:spinner-__jsx-style-dynamic-selector 1.2s linear 0s infinite normal none running;}span.__jsx-style-dynamic-selector:nth-child(1){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;-webkit-transform:rotate(0deg) translate(146%);-ms-transform:rotate(0deg) translate(146%);transform:rotate(0deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:-1.1s;animation-delay:-1.1s;-webkit-transform:rotate(30deg) translate(146%);-ms-transform:rotate(30deg) translate(146%);transform:rotate(30deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:-1s;animation-delay:-1s;-webkit-transform:rotate(60deg) translate(146%);-ms-transform:rotate(60deg) translate(146%);transform:rotate(60deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(4){-webkit-animation-delay:-0.9s;animation-delay:-0.9s;-webkit-transform:rotate(90deg) translate(146%);-ms-transform:rotate(90deg) translate(146%);transform:rotate(90deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(5){-webkit-animation-delay:-0.8s;animation-delay:-0.8s;-webkit-transform:rotate(120deg) translate(146%);-ms-transform:rotate(120deg) translate(146%);transform:rotate(120deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(6){-webkit-animation-delay:-0.7s;animation-delay:-0.7s;-webkit-transform:rotate(150deg) translate(146%);-ms-transform:rotate(150deg) translate(146%);transform:rotate(150deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(7){-webkit-animation-delay:-0.6s;animation-delay:-0.6s;-webkit-transform:rotate(180deg) translate(146%);-ms-transform:rotate(180deg) translate(146%);transform:rotate(180deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(8){-webkit-animation-delay:-0.5s;animation-delay:-0.5s;-webkit-transform:rotate(210deg) translate(146%);-ms-transform:rotate(210deg) translate(146%);transform:rotate(210deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(9){-webkit-animation-delay:-0.4s;animation-delay:-0.4s;-webkit-transform:rotate(240deg) translate(146%);-ms-transform:rotate(240deg) translate(146%);transform:rotate(240deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(10){-webkit-animation-delay:-0.3s;animation-delay:-0.3s;-webkit-transform:rotate(270deg) translate(146%);-ms-transform:rotate(270deg) translate(146%);transform:rotate(270deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(11){-webkit-animation-delay:-0.2s;animation-delay:-0.2s;-webkit-transform:rotate(300deg) translate(146%);-ms-transform:rotate(300deg) translate(146%);transform:rotate(300deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(12){-webkit-animation-delay:-0.1s;animation-delay:-0.1s;-webkit-transform:rotate(330deg) translate(146%);-ms-transform:rotate(330deg) translate(146%);transform:rotate(330deg) translate(146%);}@-webkit-keyframes spinner-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0.15;}}@keyframes spinner-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0.15;}}")));
+  });
+};
+var SpinnerComponent = function SpinnerComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses('spinner', className);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1153799566", [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1153799566", [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "container"
+  }, getSpans(theme)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1153799566",
+    dynamic: [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".spinner.__jsx-style-dynamic-selector{display:block;box-sizing:border-box;width:".concat(SCALES.width(1.25), ";height:").concat(SCALES.height(1.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.container.__jsx-style-dynamic-selector{width:100%;height:100%;position:relative;left:50%;top:50%;}")));
+};
+SpinnerComponent.displayName = 'Spinner';
+var Spinner = withScale(SpinnerComponent);
+export default Spinner;

package/esm/styled-jsx-server.es.js

@@ -0,0 +1,5 @@
+import { server } from './styled-jsx.es'
+const { flushToHTML } = server
+
+export { server, flushToHTML }
+export default server