@helpdice/ui 1.6.8 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/dist/Placeholder/index.js +44 -23
  2. package/dist/auto-complete/auto-complete.d.ts +35 -3
  3. package/dist/auto-complete/index.js +45 -22
  4. package/dist/avatar/avatar.d.ts +2 -1
  5. package/dist/avatar/index.js +33 -13
  6. package/dist/badge/index.js +30 -11
  7. package/dist/breadcrumbs/index.js +31 -12
  8. package/dist/button/index.js +34 -14
  9. package/dist/button-dropdown/index.js +31 -12
  10. package/dist/button-group/index.js +30 -11
  11. package/dist/capacity/index.js +30 -11
  12. package/dist/card/index.js +31 -12
  13. package/dist/checkbox/index.js +31 -12
  14. package/dist/code/index.js +30 -11
  15. package/dist/code-block/index.d.ts +10 -0
  16. package/dist/col/index.js +21 -2
  17. package/dist/collapse/index.js +30 -11
  18. package/dist/css-baseline/index.js +24 -5
  19. package/dist/description/index.js +30 -11
  20. package/dist/display/index.js +30 -11
  21. package/dist/divider/index.js +30 -11
  22. package/dist/dot/index.js +30 -11
  23. package/dist/drawer/index.js +30 -11
  24. package/dist/fieldset/index.js +30 -11
  25. package/dist/grid/grid-container.d.ts +3 -3
  26. package/dist/grid/grid.d.ts +3 -3
  27. package/dist/grid/index.js +30 -11
  28. package/dist/image/index.js +31 -12
  29. package/dist/index.d.ts +4 -3
  30. package/dist/index.js +10994 -1501
  31. package/dist/input/index.js +36 -15
  32. package/dist/keyboard/index.js +30 -11
  33. package/dist/link/index.js +31 -12
  34. package/dist/list/index.d.ts +9 -0
  35. package/dist/list/index.js +1287 -0
  36. package/dist/list/list-item.d.ts +53 -0
  37. package/dist/list/list.d.ts +44 -0
  38. package/dist/loading/index.js +30 -11
  39. package/dist/menu/index.d.ts +2 -0
  40. package/dist/menu/index.js +10354 -0
  41. package/dist/menu/menu.d.ts +9 -0
  42. package/dist/modal/index.js +37 -16
  43. package/dist/note/index.js +30 -11
  44. package/dist/page/index.js +30 -11
  45. package/dist/pagination/index.js +30 -11
  46. package/dist/popover/index.js +30 -11
  47. package/dist/progress/index.js +30 -11
  48. package/dist/radio/index.js +30 -11
  49. package/dist/rating/index.js +31 -12
  50. package/dist/row/index.js +21 -2
  51. package/dist/search-bar/index.js +31 -12
  52. package/dist/select/index.js +33 -14
  53. package/dist/slider/index.js +30 -11
  54. package/dist/snippet/index.js +31 -12
  55. package/dist/spacer/index.js +30 -11
  56. package/dist/spinner/index.js +30 -11
  57. package/dist/table/index.d.ts +0 -1
  58. package/dist/table/index.js +1673 -2252
  59. package/dist/tabs/index.js +32 -13
  60. package/dist/tag/index.js +30 -11
  61. package/dist/text/child.d.ts +1 -1
  62. package/dist/text/index.js +44 -23
  63. package/dist/text/text.d.ts +2 -1
  64. package/dist/textarea/index.js +30 -11
  65. package/dist/toggle/index.js +30 -11
  66. package/dist/tooltip/index.js +30 -11
  67. package/dist/tree/index.js +21 -2
  68. package/dist/ui-provider/index.js +34 -14
  69. package/dist/use-scale/index.js +9 -9
  70. package/dist/user/index.js +34 -14
  71. package/dist/utils/collections.d.ts +1 -1
  72. package/esm/auto-complete/auto-complete.d.ts +35 -3
  73. package/esm/auto-complete/auto-complete.js +6 -6
  74. package/esm/avatar/avatar.d.ts +2 -1
  75. package/esm/avatar/avatar.js +3 -2
  76. package/esm/button/button-loading.js +1 -1
  77. package/esm/button/button.js +2 -1
  78. package/esm/button/styles.js +1 -1
  79. package/esm/button-dropdown/icon.js +1 -1
  80. package/esm/checkbox/checkbox.icon.js +1 -1
  81. package/esm/code-block/index.d.ts +10 -0
  82. package/esm/code-block/index.js +31 -27
  83. package/esm/css-baseline/css-baseline.js +3 -3
  84. package/esm/form/FormWrapper.js +4 -4
  85. package/esm/grid/grid-container.d.ts +3 -3
  86. package/esm/grid/grid.d.ts +3 -3
  87. package/esm/index.d.ts +4 -3
  88. package/esm/index.js +4 -4
  89. package/esm/input/input-block-label.js +1 -1
  90. package/esm/input/input-icon.js +1 -1
  91. package/esm/input/input.js +2 -1
  92. package/esm/input/password.js +2 -1
  93. package/esm/link/icon.js +1 -1
  94. package/esm/link/link.js +2 -2
  95. package/esm/list/index.d.ts +9 -0
  96. package/esm/list/index.js +8 -0
  97. package/esm/list/list-item.d.ts +53 -0
  98. package/esm/list/list-item.js +84 -0
  99. package/esm/list/list.d.ts +44 -0
  100. package/esm/list/list.js +29 -0
  101. package/esm/login-with/LoginSocialApple/index.js +17 -17
  102. package/esm/login-with/LoginSocialGithub/index.js +2 -2
  103. package/esm/login-with/LoginSocialInstagram/index.js +2 -2
  104. package/esm/login-with/LoginSocialLinkedin/index.js +2 -2
  105. package/esm/login-with/LoginSocialMicrosoft/index.js +2 -2
  106. package/esm/login-with/LoginSocialPinterest/index.js +9 -9
  107. package/esm/login-with/LoginSocialTiktok/index.js +2 -2
  108. package/esm/login-with/LoginSocialTwitter/index.js +11 -11
  109. package/esm/menu/index.d.ts +2 -0
  110. package/esm/menu/index.js +2 -0
  111. package/esm/menu/menu.d.ts +9 -0
  112. package/esm/menu/menu.js +92 -0
  113. package/esm/modal/modal-action.js +2 -1
  114. package/esm/modal/modal-actions.js +1 -1
  115. package/esm/rating/rating-icon.js +1 -1
  116. package/esm/select/select-icon.js +1 -1
  117. package/esm/select/select-input.js +1 -1
  118. package/esm/select/select-multiple-value.js +1 -1
  119. package/esm/snippet/snippet-icon.js +1 -1
  120. package/esm/table/index.d.ts +0 -1
  121. package/esm/table/index.js +0 -1
  122. package/esm/table/table-body.js +4 -23
  123. package/esm/tabs/tabs.js +2 -2
  124. package/esm/text/child.d.ts +1 -1
  125. package/esm/text/child.js +10 -10
  126. package/esm/text/text.d.ts +2 -1
  127. package/esm/text/text.js +4 -2
  128. package/esm/tooltip/__test__/index.test.js +30 -30
  129. package/esm/utils/collections.d.ts +1 -1
  130. package/esm/utils/collections.js +1 -1
  131. package/package.json +19 -12
  132. package/dist/cart/index.d.ts +0 -72
  133. package/dist/cart/useLocalStorage.d.ts +0 -1
  134. package/dist/table/data-table.d.ts +0 -44
  135. package/esm/cart/index.d.ts +0 -72
  136. package/esm/cart/index.js +0 -265
  137. package/esm/cart/useLocalStorage.d.ts +0 -1
  138. package/esm/cart/useLocalStorage.js +0 -29
  139. package/esm/table/data-table.d.ts +0 -44
  140. package/esm/table/data-table.js +0 -451
  141. /package/esm/utils/use-context-state/{create-geist-context.js → create-ui-context.js} +0 -0
@@ -0,0 +1,9 @@
1
+ import React, { ReactNode } from 'react';
2
+ import { Placement } from '@floating-ui/react-dom';
3
+ interface MenuProps {
4
+ anchor: ReactNode;
5
+ children: ReactNode | ((close: () => void) => ReactNode);
6
+ placement?: Placement;
7
+ }
8
+ declare const Menu: React.FC<MenuProps>;
9
+ export default Menu;
@@ -735,11 +735,12 @@ function requireIndex () {
735
735
 
736
736
  // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
737
737
  // https://github.com/reactwg/react-18/discussions/110
738
- var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
738
+ var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
739
739
  var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
740
740
  function JSXStyle(props) {
741
741
  var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
742
- // If `registry` does not exist, we do nothing here.
742
+ var insertionEffectCalled = React$1.useRef(false);
743
+ // `registry` might not exist while server-side rendering
743
744
  if (!registry) {
744
745
  return null;
745
746
  }
@@ -748,6 +749,24 @@ function requireIndex () {
748
749
  return null;
749
750
  }
750
751
  useInsertionEffect(function() {
752
+ // ReactDOM removes all DOM during hydration in certain cases
753
+ if (!document.head) {
754
+ return;
755
+ }
756
+ registry.add(props);
757
+ insertionEffectCalled.current = true;
758
+ return function() {
759
+ insertionEffectCalled.current = false;
760
+ registry.remove(props);
761
+ };
762
+ }, [
763
+ props.id,
764
+ String(props.dynamic)
765
+ ]);
766
+ React$1.useLayoutEffect(function() {
767
+ if (!document.head || insertionEffectCalled.current) {
768
+ return;
769
+ }
751
770
  registry.add(props);
752
771
  return function() {
753
772
  registry.remove(props);
@@ -1186,7 +1205,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
1186
1205
  };
1187
1206
  var withScale = function withScale(Render) {
1188
1207
  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1189
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
1208
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
1190
1209
  var children = _ref.children,
1191
1210
  props = _objectWithoutProperties(_ref, _excluded$a);
1192
1211
  var _useTheme = useTheme(),
@@ -1246,14 +1265,14 @@ var withScale = function withScale(Render) {
1246
1265
  pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
1247
1266
  pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
1248
1267
  pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
1249
- px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
1250
- py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
1251
- mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
1252
- mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
1253
- mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
1254
- ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
1255
- mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
1256
- my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
1268
+ px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
1269
+ py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
1270
+ mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
1271
+ mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
1272
+ mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
1273
+ ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
1274
+ mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
1275
+ my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
1257
1276
  width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
1258
1277
  height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
1259
1278
  font: makeScaleHandler(font)
@@ -1487,7 +1506,7 @@ var ButtonLoading = function ButtonLoading(_ref) {
1487
1506
  id: "212623367"
1488
1507
  }, ".btn-loading.jsx-212623367{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background-color:var(--helpdice-ui-button-bg);}"));
1489
1508
  };
1490
- ButtonLoading.displayName = 'GeistButtonLoading';
1509
+ ButtonLoading.displayName = 'ButtonLoading';
1491
1510
 
1492
1511
  var _excluded$7 = ["isRight", "isSingle", "children", "className"];
1493
1512
  var ButtonIcon = function ButtonIcon(_ref) {
@@ -1694,7 +1713,7 @@ var getButtonGhostHoverColors = function getButtonGhostHoverColors(palette, _col
1694
1713
  color: 'white'
1695
1714
  }
1696
1715
  };
1697
- var withoutLightType = _color.replace('-light', '');
1716
+ var withoutLightType = _color === null || _color === void 0 ? void 0 : _color.replace('-light', '');
1698
1717
  return colors[withoutLightType] || null;
1699
1718
  };
1700
1719
  var getButtonHoverColors = function getButtonHoverColors(palette, props) {
@@ -1787,7 +1806,8 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
1787
1806
  var buttonRef = React.useRef(null);
1788
1807
  React.useImperativeHandle(ref, function () {
1789
1808
  return buttonRef.current;
1790
- });
1809
+ }); // Changed with !
1810
+
1791
1811
  var _useState = React.useState(false),
1792
1812
  _useState2 = _slicedToArray(_useState, 2),
1793
1813
  dripShow = _useState2[0],
@@ -1915,7 +1935,8 @@ var ModalActionComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1915
1935
  _close = _useModalContext.close;
1916
1936
  React.useImperativeHandle(ref, function () {
1917
1937
  return btnRef.current;
1918
- });
1938
+ }); // Changed with !
1939
+
1919
1940
  var clickHandler = function clickHandler(event) {
1920
1941
  if (disabled) return;
1921
1942
  var actionEvent = Object.assign({}, event, {
@@ -1979,7 +2000,7 @@ var ModalActionsComponent = function ModalActionsComponent(_ref) {
1979
2000
  dynamic: [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]
1980
2001
  }, "footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:auto;position:absolute;bottom:0;left:0;right:0;border-top:1px solid ".concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}footer.__jsx-style-dynamic-selector>button.btn + button.btn{border-left:1px solid ").concat(theme.palette.border, ";}div.__jsx-style-dynamic-selector{height:").concat(height, ";-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}")));
1981
2002
  };
1982
- ModalActionsComponent.displayName = 'GeistModalActions';
2003
+ ModalActionsComponent.displayName = 'ModalActions';
1983
2004
  var ModalActions = /*#__PURE__*/React.memo(ModalActionsComponent);
1984
2005
 
1985
2006
  var useCurrentState = function useCurrentState(initialState) {
@@ -618,11 +618,12 @@ function requireIndex () {
618
618
 
619
619
  // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
620
620
  // https://github.com/reactwg/react-18/discussions/110
621
- var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
621
+ var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
622
622
  var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
623
623
  function JSXStyle(props) {
624
624
  var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
625
- // If `registry` does not exist, we do nothing here.
625
+ var insertionEffectCalled = React$1.useRef(false);
626
+ // `registry` might not exist while server-side rendering
626
627
  if (!registry) {
627
628
  return null;
628
629
  }
@@ -631,6 +632,24 @@ function requireIndex () {
631
632
  return null;
632
633
  }
633
634
  useInsertionEffect(function() {
635
+ // ReactDOM removes all DOM during hydration in certain cases
636
+ if (!document.head) {
637
+ return;
638
+ }
639
+ registry.add(props);
640
+ insertionEffectCalled.current = true;
641
+ return function() {
642
+ insertionEffectCalled.current = false;
643
+ registry.remove(props);
644
+ };
645
+ }, [
646
+ props.id,
647
+ String(props.dynamic)
648
+ ]);
649
+ React$1.useLayoutEffect(function() {
650
+ if (!document.head || insertionEffectCalled.current) {
651
+ return;
652
+ }
634
653
  registry.add(props);
635
654
  return function() {
636
655
  registry.remove(props);
@@ -1016,7 +1035,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
1016
1035
  };
1017
1036
  var withScale = function withScale(Render) {
1018
1037
  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1019
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
1038
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
1020
1039
  var children = _ref.children,
1021
1040
  props = _objectWithoutProperties(_ref, _excluded$1);
1022
1041
  var _useTheme = useTheme(),
@@ -1076,14 +1095,14 @@ var withScale = function withScale(Render) {
1076
1095
  pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
1077
1096
  pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
1078
1097
  pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
1079
- px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
1080
- py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
1081
- mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
1082
- mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
1083
- mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
1084
- ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
1085
- mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
1086
- my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
1098
+ px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
1099
+ py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
1100
+ mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
1101
+ mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
1102
+ mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
1103
+ ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
1104
+ mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
1105
+ my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
1087
1106
  width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
1088
1107
  height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
1089
1108
  font: makeScaleHandler(font)
@@ -651,11 +651,12 @@ function requireIndex () {
651
651
 
652
652
  // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
653
653
  // https://github.com/reactwg/react-18/discussions/110
654
- var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
654
+ var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
655
655
  var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
656
656
  function JSXStyle(props) {
657
657
  var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
658
- // If `registry` does not exist, we do nothing here.
658
+ var insertionEffectCalled = React$1.useRef(false);
659
+ // `registry` might not exist while server-side rendering
659
660
  if (!registry) {
660
661
  return null;
661
662
  }
@@ -664,6 +665,24 @@ function requireIndex () {
664
665
  return null;
665
666
  }
666
667
  useInsertionEffect(function() {
668
+ // ReactDOM removes all DOM during hydration in certain cases
669
+ if (!document.head) {
670
+ return;
671
+ }
672
+ registry.add(props);
673
+ insertionEffectCalled.current = true;
674
+ return function() {
675
+ insertionEffectCalled.current = false;
676
+ registry.remove(props);
677
+ };
678
+ }, [
679
+ props.id,
680
+ String(props.dynamic)
681
+ ]);
682
+ React$1.useLayoutEffect(function() {
683
+ if (!document.head || insertionEffectCalled.current) {
684
+ return;
685
+ }
667
686
  registry.add(props);
668
687
  return function() {
669
688
  registry.remove(props);
@@ -1071,7 +1090,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
1071
1090
  };
1072
1091
  var withScale = function withScale(Render) {
1073
1092
  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1074
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
1093
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
1075
1094
  var children = _ref.children,
1076
1095
  props = _objectWithoutProperties(_ref, _excluded$4);
1077
1096
  var _useTheme = useTheme(),
@@ -1131,14 +1150,14 @@ var withScale = function withScale(Render) {
1131
1150
  pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
1132
1151
  pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
1133
1152
  pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
1134
- px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
1135
- py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
1136
- mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
1137
- mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
1138
- mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
1139
- ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
1140
- mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
1141
- my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
1153
+ px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
1154
+ py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
1155
+ mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
1156
+ mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
1157
+ mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
1158
+ ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
1159
+ mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
1160
+ my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
1142
1161
  width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
1143
1162
  height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
1144
1163
  font: makeScaleHandler(font)
@@ -666,11 +666,12 @@ function requireIndex () {
666
666
 
667
667
  // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
668
668
  // https://github.com/reactwg/react-18/discussions/110
669
- var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
669
+ var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
670
670
  var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
671
671
  function JSXStyle(props) {
672
672
  var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
673
- // If `registry` does not exist, we do nothing here.
673
+ var insertionEffectCalled = React$1.useRef(false);
674
+ // `registry` might not exist while server-side rendering
674
675
  if (!registry) {
675
676
  return null;
676
677
  }
@@ -679,6 +680,24 @@ function requireIndex () {
679
680
  return null;
680
681
  }
681
682
  useInsertionEffect(function() {
683
+ // ReactDOM removes all DOM during hydration in certain cases
684
+ if (!document.head) {
685
+ return;
686
+ }
687
+ registry.add(props);
688
+ insertionEffectCalled.current = true;
689
+ return function() {
690
+ insertionEffectCalled.current = false;
691
+ registry.remove(props);
692
+ };
693
+ }, [
694
+ props.id,
695
+ String(props.dynamic)
696
+ ]);
697
+ React$1.useLayoutEffect(function() {
698
+ if (!document.head || insertionEffectCalled.current) {
699
+ return;
700
+ }
682
701
  registry.add(props);
683
702
  return function() {
684
703
  registry.remove(props);
@@ -1401,7 +1420,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
1401
1420
  };
1402
1421
  var withScale = function withScale(Render) {
1403
1422
  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1404
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
1423
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
1405
1424
  var children = _ref.children,
1406
1425
  props = _objectWithoutProperties(_ref, _excluded$1);
1407
1426
  var _useTheme = useTheme(),
@@ -1461,14 +1480,14 @@ var withScale = function withScale(Render) {
1461
1480
  pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
1462
1481
  pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
1463
1482
  pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
1464
- px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
1465
- py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
1466
- mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
1467
- mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
1468
- mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
1469
- ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
1470
- mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
1471
- my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
1483
+ px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
1484
+ py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
1485
+ mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
1486
+ mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
1487
+ mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
1488
+ ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
1489
+ mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
1490
+ my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
1472
1491
  width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
1473
1492
  height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
1474
1493
  font: makeScaleHandler(font)
@@ -652,11 +652,12 @@ function requireIndex () {
652
652
 
653
653
  // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
654
654
  // https://github.com/reactwg/react-18/discussions/110
655
- var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
655
+ var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
656
656
  var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
657
657
  function JSXStyle(props) {
658
658
  var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
659
- // If `registry` does not exist, we do nothing here.
659
+ var insertionEffectCalled = React$1.useRef(false);
660
+ // `registry` might not exist while server-side rendering
660
661
  if (!registry) {
661
662
  return null;
662
663
  }
@@ -665,6 +666,24 @@ function requireIndex () {
665
666
  return null;
666
667
  }
667
668
  useInsertionEffect(function() {
669
+ // ReactDOM removes all DOM during hydration in certain cases
670
+ if (!document.head) {
671
+ return;
672
+ }
673
+ registry.add(props);
674
+ insertionEffectCalled.current = true;
675
+ return function() {
676
+ insertionEffectCalled.current = false;
677
+ registry.remove(props);
678
+ };
679
+ }, [
680
+ props.id,
681
+ String(props.dynamic)
682
+ ]);
683
+ React$1.useLayoutEffect(function() {
684
+ if (!document.head || insertionEffectCalled.current) {
685
+ return;
686
+ }
668
687
  registry.add(props);
669
688
  return function() {
670
689
  registry.remove(props);
@@ -1396,7 +1415,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
1396
1415
  };
1397
1416
  var withScale = function withScale(Render) {
1398
1417
  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1399
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
1418
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
1400
1419
  var children = _ref.children,
1401
1420
  props = _objectWithoutProperties(_ref, _excluded$3);
1402
1421
  var _useTheme = useTheme(),
@@ -1456,14 +1475,14 @@ var withScale = function withScale(Render) {
1456
1475
  pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
1457
1476
  pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
1458
1477
  pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
1459
- px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
1460
- py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
1461
- mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
1462
- mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
1463
- mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
1464
- ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
1465
- mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
1466
- my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
1478
+ px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
1479
+ py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
1480
+ mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
1481
+ mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
1482
+ mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
1483
+ ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
1484
+ mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
1485
+ my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
1467
1486
  width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
1468
1487
  height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
1469
1488
  font: makeScaleHandler(font)
@@ -618,11 +618,12 @@ function requireIndex () {
618
618
 
619
619
  // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`.
620
620
  // https://github.com/reactwg/react-18/discussions/110
621
- var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect;
621
+ var useInsertionEffect = React__default["default"].useInsertionEffect || React$1.useLayoutEffect;
622
622
  var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined;
623
623
  function JSXStyle(props) {
624
624
  var registry = defaultRegistry ? defaultRegistry : useStyleRegistry();
625
- // If `registry` does not exist, we do nothing here.
625
+ var insertionEffectCalled = React$1.useRef(false);
626
+ // `registry` might not exist while server-side rendering
626
627
  if (!registry) {
627
628
  return null;
628
629
  }
@@ -631,6 +632,24 @@ function requireIndex () {
631
632
  return null;
632
633
  }
633
634
  useInsertionEffect(function() {
635
+ // ReactDOM removes all DOM during hydration in certain cases
636
+ if (!document.head) {
637
+ return;
638
+ }
639
+ registry.add(props);
640
+ insertionEffectCalled.current = true;
641
+ return function() {
642
+ insertionEffectCalled.current = false;
643
+ registry.remove(props);
644
+ };
645
+ }, [
646
+ props.id,
647
+ String(props.dynamic)
648
+ ]);
649
+ React$1.useLayoutEffect(function() {
650
+ if (!document.head || insertionEffectCalled.current) {
651
+ return;
652
+ }
634
653
  registry.add(props);
635
654
  return function() {
636
655
  registry.remove(props);
@@ -1045,7 +1064,7 @@ var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
1045
1064
  };
1046
1065
  var withScale = function withScale(Render) {
1047
1066
  var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
1048
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31, _ref32, _ref33;
1067
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
1049
1068
  var children = _ref.children,
1050
1069
  props = _objectWithoutProperties(_ref, _excluded$1);
1051
1070
  var _useTheme = useTheme(),
@@ -1105,14 +1124,14 @@ var withScale = function withScale(Render) {
1105
1124
  pr: makeScaleHandler((_ref4 = (_ref5 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : pr) !== null && _ref5 !== void 0 ? _ref5 : px) !== null && _ref4 !== void 0 ? _ref4 : padding),
1106
1125
  pb: makeScaleHandler((_ref6 = (_ref7 = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : pb) !== null && _ref7 !== void 0 ? _ref7 : py) !== null && _ref6 !== void 0 ? _ref6 : padding),
1107
1126
  pl: makeScaleHandler((_ref8 = (_ref9 = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : pl) !== null && _ref9 !== void 0 ? _ref9 : px) !== null && _ref8 !== void 0 ? _ref8 : padding),
1108
- px: makeScaleHandler((_ref10 = (_ref11 = (_ref12 = (_ref13 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref13 !== void 0 ? _ref13 : paddingRight) !== null && _ref12 !== void 0 ? _ref12 : pl) !== null && _ref11 !== void 0 ? _ref11 : pr) !== null && _ref10 !== void 0 ? _ref10 : padding),
1109
- py: makeScaleHandler((_ref14 = (_ref15 = (_ref16 = (_ref17 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref17 !== void 0 ? _ref17 : paddingBottom) !== null && _ref16 !== void 0 ? _ref16 : pt) !== null && _ref15 !== void 0 ? _ref15 : pb) !== null && _ref14 !== void 0 ? _ref14 : padding),
1110
- mt: makeScaleHandler((_ref18 = (_ref19 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref19 !== void 0 ? _ref19 : my) !== null && _ref18 !== void 0 ? _ref18 : margin),
1111
- mr: makeScaleHandler((_ref20 = (_ref21 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref21 !== void 0 ? _ref21 : mx) !== null && _ref20 !== void 0 ? _ref20 : margin),
1112
- mb: makeScaleHandler((_ref22 = (_ref23 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref23 !== void 0 ? _ref23 : my) !== null && _ref22 !== void 0 ? _ref22 : margin),
1113
- ml: makeScaleHandler((_ref24 = (_ref25 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref25 !== void 0 ? _ref25 : mx) !== null && _ref24 !== void 0 ? _ref24 : margin),
1114
- mx: makeScaleHandler((_ref26 = (_ref27 = (_ref28 = (_ref29 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref29 !== void 0 ? _ref29 : marginRight) !== null && _ref28 !== void 0 ? _ref28 : ml) !== null && _ref27 !== void 0 ? _ref27 : mr) !== null && _ref26 !== void 0 ? _ref26 : margin),
1115
- my: makeScaleHandler((_ref30 = (_ref31 = (_ref32 = (_ref33 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref33 !== void 0 ? _ref33 : marginBottom) !== null && _ref32 !== void 0 ? _ref32 : mt) !== null && _ref31 !== void 0 ? _ref31 : mb) !== null && _ref30 !== void 0 ? _ref30 : margin),
1127
+ px: makeScaleHandler((_ref0 = (_ref1 = (_ref10 = (_ref11 = px !== null && px !== void 0 ? px : paddingLeft) !== null && _ref11 !== void 0 ? _ref11 : paddingRight) !== null && _ref10 !== void 0 ? _ref10 : pl) !== null && _ref1 !== void 0 ? _ref1 : pr) !== null && _ref0 !== void 0 ? _ref0 : padding),
1128
+ py: makeScaleHandler((_ref12 = (_ref13 = (_ref14 = (_ref15 = py !== null && py !== void 0 ? py : paddingTop) !== null && _ref15 !== void 0 ? _ref15 : paddingBottom) !== null && _ref14 !== void 0 ? _ref14 : pt) !== null && _ref13 !== void 0 ? _ref13 : pb) !== null && _ref12 !== void 0 ? _ref12 : padding),
1129
+ mt: makeScaleHandler((_ref16 = (_ref17 = marginTop !== null && marginTop !== void 0 ? marginTop : mt) !== null && _ref17 !== void 0 ? _ref17 : my) !== null && _ref16 !== void 0 ? _ref16 : margin),
1130
+ mr: makeScaleHandler((_ref18 = (_ref19 = marginRight !== null && marginRight !== void 0 ? marginRight : mr) !== null && _ref19 !== void 0 ? _ref19 : mx) !== null && _ref18 !== void 0 ? _ref18 : margin),
1131
+ mb: makeScaleHandler((_ref20 = (_ref21 = marginBottom !== null && marginBottom !== void 0 ? marginBottom : mb) !== null && _ref21 !== void 0 ? _ref21 : my) !== null && _ref20 !== void 0 ? _ref20 : margin),
1132
+ ml: makeScaleHandler((_ref22 = (_ref23 = marginLeft !== null && marginLeft !== void 0 ? marginLeft : ml) !== null && _ref23 !== void 0 ? _ref23 : mx) !== null && _ref22 !== void 0 ? _ref22 : margin),
1133
+ mx: makeScaleHandler((_ref24 = (_ref25 = (_ref26 = (_ref27 = mx !== null && mx !== void 0 ? mx : marginLeft) !== null && _ref27 !== void 0 ? _ref27 : marginRight) !== null && _ref26 !== void 0 ? _ref26 : ml) !== null && _ref25 !== void 0 ? _ref25 : mr) !== null && _ref24 !== void 0 ? _ref24 : margin),
1134
+ my: makeScaleHandler((_ref28 = (_ref29 = (_ref30 = (_ref31 = my !== null && my !== void 0 ? my : marginTop) !== null && _ref31 !== void 0 ? _ref31 : marginBottom) !== null && _ref30 !== void 0 ? _ref30 : mt) !== null && _ref29 !== void 0 ? _ref29 : mb) !== null && _ref28 !== void 0 ? _ref28 : margin),
1116
1135
  width: makeScaleHandler(width !== null && width !== void 0 ? width : w),
1117
1136
  height: makeScaleHandler(height !== null && height !== void 0 ? height : h),
1118
1137
  font: makeScaleHandler(font)