@makeswift/runtime 0.2.19 → 0.3.1

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 (228) hide show
  1. package/dist/Box.cjs.js +35 -70
  2. package/dist/Box.cjs.js.map +1 -1
  3. package/dist/Box.es.js +34 -65
  4. package/dist/Box.es.js.map +1 -1
  5. package/dist/Button.cjs.js +176 -208
  6. package/dist/Button.cjs.js.map +1 -1
  7. package/dist/Button.es.js +177 -208
  8. package/dist/Button.es.js.map +1 -1
  9. package/dist/Carousel.cjs.js +227 -249
  10. package/dist/Carousel.cjs.js.map +1 -1
  11. package/dist/Carousel.es.js +229 -247
  12. package/dist/Carousel.es.js.map +1 -1
  13. package/dist/Countdown.cjs.js +270 -203
  14. package/dist/Countdown.cjs.js.map +1 -1
  15. package/dist/Countdown.es.js +273 -202
  16. package/dist/Countdown.es.js.map +1 -1
  17. package/dist/Divider.cjs.js +50 -71
  18. package/dist/Divider.cjs.js.map +1 -1
  19. package/dist/Divider.es.js +51 -68
  20. package/dist/Divider.es.js.map +1 -1
  21. package/dist/Embed.cjs.js +6 -17
  22. package/dist/Embed.cjs.js.map +1 -1
  23. package/dist/Embed.es.js +7 -14
  24. package/dist/Embed.es.js.map +1 -1
  25. package/dist/Form.cjs.js +723 -553
  26. package/dist/Form.cjs.js.map +1 -1
  27. package/dist/Form.es.js +723 -552
  28. package/dist/Form.es.js.map +1 -1
  29. package/dist/Image.cjs.js +16 -38
  30. package/dist/Image.cjs.js.map +1 -1
  31. package/dist/Image.es.js +17 -38
  32. package/dist/Image.es.js.map +1 -1
  33. package/dist/Navigation.cjs.js +318 -224
  34. package/dist/Navigation.cjs.js.map +1 -1
  35. package/dist/Navigation.es.js +318 -220
  36. package/dist/Navigation.es.js.map +1 -1
  37. package/dist/Root.cjs.js +116 -78
  38. package/dist/Root.cjs.js.map +1 -1
  39. package/dist/Root.es.js +99 -77
  40. package/dist/Root.es.js.map +1 -1
  41. package/dist/SocialLinks.cjs.js +119 -86
  42. package/dist/SocialLinks.cjs.js.map +1 -1
  43. package/dist/SocialLinks.es.js +120 -83
  44. package/dist/SocialLinks.es.js.map +1 -1
  45. package/dist/Text.cjs.js +83 -99
  46. package/dist/Text.cjs.js.map +1 -1
  47. package/dist/Text.es.js +84 -99
  48. package/dist/Text.es.js.map +1 -1
  49. package/dist/Video.cjs.js +8 -19
  50. package/dist/Video.cjs.js.map +1 -1
  51. package/dist/Video.es.js +8 -18
  52. package/dist/Video.es.js.map +1 -1
  53. package/dist/components.cjs.js +6 -18
  54. package/dist/components.cjs.js.map +1 -1
  55. package/dist/components.es.js +5 -8
  56. package/dist/components.es.js.map +1 -1
  57. package/dist/controls.es.js +1 -1
  58. package/dist/grid-item.cjs.js +612 -0
  59. package/dist/grid-item.cjs.js.map +1 -0
  60. package/dist/grid-item.es.js +604 -0
  61. package/dist/grid-item.es.js.map +1 -0
  62. package/dist/index.cjs.js +594 -275
  63. package/dist/index.cjs.js.map +1 -1
  64. package/dist/index.cjs2.js +98 -474
  65. package/dist/index.cjs2.js.map +1 -1
  66. package/dist/index.cjs3.js +20 -107
  67. package/dist/index.cjs3.js.map +1 -1
  68. package/dist/index.es.js +589 -274
  69. package/dist/index.es.js.map +1 -1
  70. package/dist/index.es2.js +99 -473
  71. package/dist/index.es2.js.map +1 -1
  72. package/dist/index.es3.js +21 -103
  73. package/dist/index.es3.js.map +1 -1
  74. package/dist/next.cjs.js +1 -2
  75. package/dist/next.cjs.js.map +1 -1
  76. package/dist/next.es.js +2 -3
  77. package/dist/next.es.js.map +1 -1
  78. package/dist/react-builder-preview.cjs.js +1 -2
  79. package/dist/react-builder-preview.cjs.js.map +1 -1
  80. package/dist/react-builder-preview.es.js +3 -4
  81. package/dist/react-builder-preview.es.js.map +1 -1
  82. package/dist/react.cjs.js +1 -2
  83. package/dist/react.cjs.js.map +1 -1
  84. package/dist/react.es.js +1 -2
  85. package/dist/react.es.js.map +1 -1
  86. package/dist/slot.cjs.js +41 -6
  87. package/dist/slot.cjs.js.map +1 -1
  88. package/dist/slot.es.js +36 -6
  89. package/dist/slot.es.js.map +1 -1
  90. package/dist/types/src/components/builtin/Box/Box.d.ts +7 -7
  91. package/dist/types/src/components/builtin/Box/Box.d.ts.map +1 -1
  92. package/dist/types/src/components/builtin/Box/components/Placeholder/index.d.ts.map +1 -1
  93. package/dist/types/src/components/builtin/Box/register.d.ts.map +1 -1
  94. package/dist/types/src/components/builtin/Button/Button.d.ts +46 -34
  95. package/dist/types/src/components/builtin/Button/Button.d.ts.map +1 -1
  96. package/dist/types/src/components/builtin/Carousel/Carousel.d.ts +5 -5
  97. package/dist/types/src/components/builtin/Carousel/Carousel.d.ts.map +1 -1
  98. package/dist/types/src/components/builtin/Carousel/register.d.ts.map +1 -1
  99. package/dist/types/src/components/builtin/Countdown/Countdown.d.ts +3 -3
  100. package/dist/types/src/components/builtin/Countdown/Countdown.d.ts.map +1 -1
  101. package/dist/types/src/components/builtin/Countdown/register.d.ts.map +1 -1
  102. package/dist/types/src/components/builtin/Divider/Divider.d.ts +3 -3
  103. package/dist/types/src/components/builtin/Divider/Divider.d.ts.map +1 -1
  104. package/dist/types/src/components/builtin/Divider/register.d.ts.map +1 -1
  105. package/dist/types/src/components/builtin/Embed/Embed.d.ts +3 -3
  106. package/dist/types/src/components/builtin/Embed/Embed.d.ts.map +1 -1
  107. package/dist/types/src/components/builtin/Form/Form.d.ts +3 -3
  108. package/dist/types/src/components/builtin/Form/Form.d.ts.map +1 -1
  109. package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts +4 -6
  110. package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts.map +1 -1
  111. package/dist/types/src/components/builtin/Form/components/Field/components/CheckboxTableField/index.d.ts +3 -0
  112. package/dist/types/src/components/builtin/Form/components/Field/components/CheckboxTableField/index.d.ts.map +1 -1
  113. package/dist/types/src/components/builtin/Form/components/Field/components/EmailTableField/index.d.ts +2 -0
  114. package/dist/types/src/components/builtin/Form/components/Field/components/EmailTableField/index.d.ts.map +1 -1
  115. package/dist/types/src/components/builtin/Form/components/Field/components/Input/index.d.ts +3 -7
  116. package/dist/types/src/components/builtin/Form/components/Field/components/Input/index.d.ts.map +1 -1
  117. package/dist/types/src/components/builtin/Form/components/Field/components/Label/index.d.ts +7 -13
  118. package/dist/types/src/components/builtin/Form/components/Field/components/Label/index.d.ts.map +1 -1
  119. package/dist/types/src/components/builtin/Form/components/Field/components/LongTextTableField/index.d.ts +2 -0
  120. package/dist/types/src/components/builtin/Form/components/Field/components/LongTextTableField/index.d.ts.map +1 -1
  121. package/dist/types/src/components/builtin/Form/components/Field/components/MultipleSelectTableField/index.d.ts.map +1 -1
  122. package/dist/types/src/components/builtin/Form/components/Field/components/NumberTableField/index.d.ts +2 -0
  123. package/dist/types/src/components/builtin/Form/components/Field/components/NumberTableField/index.d.ts.map +1 -1
  124. package/dist/types/src/components/builtin/Form/components/Field/components/PhoneNumberTableField/index.d.ts +2 -0
  125. package/dist/types/src/components/builtin/Form/components/Field/components/PhoneNumberTableField/index.d.ts.map +1 -1
  126. package/dist/types/src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.d.ts.map +1 -1
  127. package/dist/types/src/components/builtin/Form/components/Field/components/RadioButton/index.d.ts +4 -8
  128. package/dist/types/src/components/builtin/Form/components/Field/components/RadioButton/index.d.ts.map +1 -1
  129. package/dist/types/src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.d.ts +2 -0
  130. package/dist/types/src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.d.ts.map +1 -1
  131. package/dist/types/src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnRadioButtonGroup/index.d.ts.map +1 -1
  132. package/dist/types/src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.d.ts.map +1 -1
  133. package/dist/types/src/components/builtin/Form/components/Field/components/TextArea/index.d.ts +2 -7
  134. package/dist/types/src/components/builtin/Form/components/Field/components/TextArea/index.d.ts.map +1 -1
  135. package/dist/types/src/components/builtin/Form/components/Field/components/URLTableField/index.d.ts +2 -0
  136. package/dist/types/src/components/builtin/Form/components/Field/components/URLTableField/index.d.ts.map +1 -1
  137. package/dist/types/src/components/builtin/Form/components/Field/services/{cssField.d.ts → responsiveField.d.ts} +5 -4
  138. package/dist/types/src/components/builtin/Form/components/Field/services/responsiveField.d.ts.map +1 -0
  139. package/dist/types/src/components/builtin/Form/components/Placeholder/index.d.ts +2 -3
  140. package/dist/types/src/components/builtin/Form/components/Placeholder/index.d.ts.map +1 -1
  141. package/dist/types/src/components/builtin/Form/components/Spinner/index.d.ts.map +1 -1
  142. package/dist/types/src/components/builtin/Form/register.d.ts.map +1 -1
  143. package/dist/types/src/components/builtin/Image/Image.d.ts +7 -7
  144. package/dist/types/src/components/builtin/Image/Image.d.ts.map +1 -1
  145. package/dist/types/src/components/builtin/Navigation/Navigation.d.ts +3 -3
  146. package/dist/types/src/components/builtin/Navigation/Navigation.d.ts.map +1 -1
  147. package/dist/types/src/components/builtin/Navigation/components/DropDownButton/index.d.ts +8 -81
  148. package/dist/types/src/components/builtin/Navigation/components/DropDownButton/index.d.ts.map +1 -1
  149. package/dist/types/src/components/builtin/Navigation/components/LinksPlaceholder/index.d.ts.map +1 -1
  150. package/dist/types/src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.d.ts +8 -81
  151. package/dist/types/src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.d.ts.map +1 -1
  152. package/dist/types/src/components/builtin/Navigation/components/MobileMenu/index.d.ts.map +1 -1
  153. package/dist/types/src/components/builtin/Navigation/register.d.ts.map +1 -1
  154. package/dist/types/src/components/builtin/Root/Root.d.ts +1 -2
  155. package/dist/types/src/components/builtin/Root/Root.d.ts.map +1 -1
  156. package/dist/types/src/components/builtin/Root/components/Placeholder/index.d.ts +1 -2
  157. package/dist/types/src/components/builtin/Root/components/Placeholder/index.d.ts.map +1 -1
  158. package/dist/types/src/components/builtin/SocialLinks/SocialLinks.d.ts +3 -3
  159. package/dist/types/src/components/builtin/SocialLinks/SocialLinks.d.ts.map +1 -1
  160. package/dist/types/src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.d.ts.map +1 -1
  161. package/dist/types/src/components/builtin/SocialLinks/register.d.ts.map +1 -1
  162. package/dist/types/src/components/builtin/Text/Text.d.ts +3 -3
  163. package/dist/types/src/components/builtin/Text/Text.d.ts.map +1 -1
  164. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Block/index.d.ts +8 -11
  165. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Block/index.d.ts.map +1 -1
  166. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Mark/index.d.ts +3 -6
  167. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Mark/index.d.ts.map +1 -1
  168. package/dist/types/src/components/builtin/Text/components/RichTextEditor/index.d.ts +1 -1
  169. package/dist/types/src/components/builtin/Text/components/RichTextEditor/index.d.ts.map +1 -1
  170. package/dist/types/src/components/builtin/Text/components/RichTextEditor/plugins/Link.d.ts.map +1 -1
  171. package/dist/types/src/components/builtin/Text/register.d.ts.map +1 -1
  172. package/dist/types/src/components/builtin/Video/Video.d.ts +4 -4
  173. package/dist/types/src/components/builtin/Video/Video.d.ts.map +1 -1
  174. package/dist/types/src/components/builtin/Video/register.d.ts.map +1 -1
  175. package/dist/types/src/components/hooks/useBackgrounds.d.ts +1 -1
  176. package/dist/types/src/components/hooks/useBackgrounds.d.ts.map +1 -1
  177. package/dist/types/src/components/index.d.ts +0 -1
  178. package/dist/types/src/components/index.d.ts.map +1 -1
  179. package/dist/types/src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.d.ts.map +1 -1
  180. package/dist/types/src/components/shared/BackgroundsContainer/components/Backgrounds/index.d.ts.map +1 -1
  181. package/dist/types/src/components/shared/BackgroundsContainer/index.d.ts +255 -4
  182. package/dist/types/src/components/shared/BackgroundsContainer/index.d.ts.map +1 -1
  183. package/dist/types/src/components/shared/FallbackComponent/FallbackComponent.d.ts.map +1 -1
  184. package/dist/types/src/components/shared/GutterContainer/index.d.ts +8 -4
  185. package/dist/types/src/components/shared/GutterContainer/index.d.ts.map +1 -1
  186. package/dist/types/src/components/shared/grid-item.d.ts +17 -0
  187. package/dist/types/src/components/shared/grid-item.d.ts.map +1 -0
  188. package/dist/types/src/components/utils/responsive-style.d.ts +22 -1
  189. package/dist/types/src/components/utils/responsive-style.d.ts.map +1 -1
  190. package/dist/types/src/controls/style.d.ts +5 -65
  191. package/dist/types/src/controls/style.d.ts.map +1 -1
  192. package/dist/types/src/css/border-radius.d.ts +20 -0
  193. package/dist/types/src/css/border-radius.d.ts.map +1 -0
  194. package/dist/types/src/css/border.d.ts +31 -0
  195. package/dist/types/src/css/border.d.ts.map +1 -0
  196. package/dist/types/src/css/length-percentage.d.ts +10 -0
  197. package/dist/types/src/css/length-percentage.d.ts.map +1 -0
  198. package/dist/types/src/css/length.d.ts +14 -0
  199. package/dist/types/src/css/length.d.ts.map +1 -0
  200. package/dist/types/src/css/margin.d.ts +20 -0
  201. package/dist/types/src/css/margin.d.ts.map +1 -0
  202. package/dist/types/src/css/padding.d.ts +20 -0
  203. package/dist/types/src/css/padding.d.ts.map +1 -0
  204. package/dist/types/src/next/document.d.ts.map +1 -1
  205. package/dist/types/src/prop-controllers/descriptors.d.ts +96 -33
  206. package/dist/types/src/prop-controllers/descriptors.d.ts.map +1 -1
  207. package/dist/types/src/runtimes/react/controls/style.d.ts.map +1 -1
  208. package/dist/types/src/runtimes/react/controls.d.ts +10 -2
  209. package/dist/types/src/runtimes/react/controls.d.ts.map +1 -1
  210. package/dist/types/src/runtimes/react/use-global-style.d.ts +3 -0
  211. package/dist/types/src/runtimes/react/use-global-style.d.ts.map +1 -0
  212. package/dist/useMediaQuery.es.js +1 -1
  213. package/package.json +2 -4
  214. package/dist/cssMediaRules.cjs.js +0 -210
  215. package/dist/cssMediaRules.cjs.js.map +0 -1
  216. package/dist/cssMediaRules.es.js +0 -201
  217. package/dist/cssMediaRules.es.js.map +0 -1
  218. package/dist/index.cjs4.js +0 -18
  219. package/dist/index.cjs4.js.map +0 -1
  220. package/dist/index.es4.js +0 -13
  221. package/dist/index.es4.js.map +0 -1
  222. package/dist/types/src/components/builtin/Form/components/Field/services/cssField.d.ts.map +0 -1
  223. package/dist/types/src/components/utils/cssMediaRules.d.ts +0 -69
  224. package/dist/types/src/components/utils/cssMediaRules.d.ts.map +0 -1
  225. package/dist/useBoxShadow.cjs.js +0 -78
  226. package/dist/useBoxShadow.cjs.js.map +0 -1
  227. package/dist/useBoxShadow.es.js +0 -77
  228. package/dist/useBoxShadow.es.js.map +0 -1
@@ -18,16 +18,27 @@ var __spreadValues = (a, b) => {
18
18
  return a;
19
19
  };
20
20
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
21
33
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
22
34
  var React = require("react");
23
- var styled = require("styled-components");
24
35
  var framerMotion = require("framer-motion");
25
36
  var reactUseGesture = require("react-use-gesture");
26
37
  var popcorn = require("@popmotion/popcorn");
27
- var cssMediaRules = require("./cssMediaRules.cjs.js");
28
38
  var next = require("./index.cjs.js");
29
39
  var useMediaQuery = require("./useMediaQuery.cjs.js");
30
40
  var Image = require("./Image.cjs.js");
41
+ var css = require("@emotion/css");
31
42
  var jsxRuntime = require("react/jsx-runtime");
32
43
  require("use-sync-external-store/shim/with-selector");
33
44
  require("./react-page.cjs.js");
@@ -43,7 +54,6 @@ require("slate");
43
54
  require("./graphql.cjs.js");
44
55
  require("./text-input.cjs.js");
45
56
  require("./combobox.cjs.js");
46
- require("@emotion/css");
47
57
  require("color");
48
58
  require("scroll-into-view-if-needed");
49
59
  require("./box-models.cjs.js");
@@ -60,14 +70,9 @@ require("set-cookie-parser");
60
70
  require("uuid/v4");
61
71
  require("corporate-ipsum");
62
72
  require("next/image");
63
- require("./useBoxShadow.cjs.js");
64
73
  require("./placeholders.cjs.js");
65
- require("./index.cjs3.js");
74
+ require("./index.cjs2.js");
66
75
  require("next/link");
67
- function _interopDefaultLegacy(e) {
68
- return e && typeof e === "object" && "default" in e ? e : { "default": e };
69
- }
70
- var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
71
76
  const LeftChevron = () => /* @__PURE__ */ jsxRuntime.jsx("svg", {
72
77
  xmlns: "http://www.w3.org/2000/svg",
73
78
  width: "10",
@@ -94,222 +99,6 @@ const RightChevron = () => /* @__PURE__ */ jsxRuntime.jsx("svg", {
94
99
  strokeWidth: "2"
95
100
  })
96
101
  });
97
- const Container = styled__default["default"].div`
98
- position: relative;
99
- height: 100%;
100
- `;
101
- const Wrapper = styled__default["default"].div.withConfig({
102
- shouldForwardProp: (prop) => !["margin", "width"].includes(prop)
103
- })`
104
- position: relative;
105
- display: flex;
106
- flex-direction: column;
107
- ${cssMediaRules.cssWidth("400px")}
108
- ${cssMediaRules.cssMargin()}
109
-
110
- &:focus {
111
- outline: 0;
112
- }
113
- `;
114
- const Arrow = styled__default["default"].div.withConfig({
115
- shouldForwardProp: (prop) => !["background"].includes(prop)
116
- })`
117
- padding: 10px;
118
- border-radius: 50%;
119
- outline: 0;
120
- border: 0;
121
- width: 40px;
122
- height: 40px;
123
- display: flex;
124
- align-items: center;
125
- justify-content: center;
126
- cursor: pointer;
127
- user-select: none;
128
- ${(p) => cssMediaRules.cssMediaRules([p.background], ([background = {
129
- swatch: {
130
- hue: 0,
131
- saturation: 0,
132
- lightness: 100
133
- },
134
- alpha: 1
135
- }]) => styled.css`
136
- background: ${next.colorToString(background)};
137
- `)}
138
-
139
- svg {
140
- transition: transform 0.15s;
141
- stroke: currentColor;
142
- }
143
- `;
144
- const Slop = styled__default["default"].div.withConfig({
145
- shouldForwardProp: (prop) => !["color"].includes(prop)
146
- })`
147
- position: absolute;
148
- top: 0;
149
- bottom: 0;
150
- display: ${(props) => props.hidden ? "none" : "flex"};
151
- align-items: center;
152
- cursor: pointer;
153
- z-index: 2;
154
- ${(p) => cssMediaRules.cssMediaRules([p.color], ([color = {
155
- swatch: {
156
- hue: 0,
157
- saturation: 0,
158
- lightness: 0
159
- },
160
- alpha: 1
161
- }]) => styled.css`
162
- color: ${next.colorToString(color)};
163
- `)}
164
- `;
165
- const Slide = styled__default["default"](framerMotion.motion.div).withConfig({
166
- shouldForwardProp: (prop) => !["pageSize", "alignItems"].includes(prop)
167
- })`
168
- display: flex;
169
- ${(p) => cssMediaRules.cssMediaRules([p.pageSize], ([pageSize = 1]) => styled.css`
170
- flex-basis: ${100 / pageSize}%;
171
- max-width: ${100 / pageSize}%;
172
- min-width: ${100 / pageSize}%;
173
- `)}
174
-
175
- ${(p) => cssMediaRules.cssMediaRules([p.alignItems], ([alignItems = "center"]) => ({
176
- alignItems
177
- }))}
178
- `;
179
- const Reel = styled__default["default"](framerMotion.motion.div).withConfig({
180
- shouldForwardProp: (prop) => !["gap"].includes(prop)
181
- })`
182
- display: flex;
183
- position: relative;
184
- flex-wrap: nowrap;
185
- ${(p) => cssMediaRules.cssMediaRules([p.gap], ([gap = {
186
- value: 0,
187
- unit: "px"
188
- }]) => styled.css`
189
- margin: 0 ${`${-gap.value / 2}${gap.unit}`};
190
-
191
- & > ${Slide} {
192
- padding: 0 ${`${gap.value / 2}${gap.unit}`};
193
- }
194
- `)}
195
- `;
196
- const Page = styled__default["default"](framerMotion.motion.div)`
197
- position: relative;
198
- width: 100%;
199
- `;
200
- const LeftSlop = styled__default["default"](Slop).withConfig({
201
- shouldForwardProp: (prop) => !["position"].includes(prop)
202
- })`
203
- ${(p) => cssMediaRules.cssMediaRules([p.position], ([position = "inside"]) => {
204
- switch (position) {
205
- case "inside":
206
- return styled.css`
207
- transform: translateX(8px);
208
- `;
209
- case "outside":
210
- return styled.css`
211
- transform: translateX(calc(-100% - 8px));
212
- `;
213
- default:
214
- return styled.css`
215
- transform: translateX(calc(-50%));
216
- `;
217
- }
218
- })}
219
- left: 0;
220
-
221
- &:hover > ${Arrow} {
222
- & > svg {
223
- transform: translateX(-2px);
224
- }
225
- }
226
- `;
227
- const RightSlop = styled__default["default"](Slop).withConfig({
228
- shouldForwardProp: (prop) => !["position"].includes(prop)
229
- })`
230
- ${(p) => cssMediaRules.cssMediaRules([p.position], ([position = "inside"]) => {
231
- switch (position) {
232
- case "inside":
233
- return styled.css`
234
- transform: translateX(-8px);
235
- `;
236
- case "outside":
237
- return styled.css`
238
- transform: translateX(calc(100% + 8px));
239
- `;
240
- default:
241
- return styled.css`
242
- transform: translateX(calc(50%));
243
- `;
244
- }
245
- })}
246
- right: 0;
247
-
248
- &:hover > ${Arrow} {
249
- & > svg {
250
- transform: translateX(2px);
251
- }
252
- }
253
- `;
254
- const ClipMask = styled__default["default"].div`
255
- overflow: hidden;
256
- `;
257
- const Dots = styled__default["default"].div.withConfig({
258
- shouldForwardProp: (prop) => !["color"].includes(prop)
259
- })`
260
- display: ${(props) => props.hidden ? "none" : "flex"};
261
- justify-content: center;
262
- margin-top: 20px;
263
- ${(p) => cssMediaRules.cssMediaRules([p.color], ([color = {
264
- swatch: {
265
- hue: 0,
266
- saturation: 0,
267
- lightness: 0
268
- },
269
- alpha: 1
270
- }]) => styled.css`
271
- color: ${next.colorToString(color)};
272
- `)}
273
- `;
274
- const Dot = styled__default["default"].div.withConfig({
275
- shouldForwardProp: (prop) => !["active"].includes(prop)
276
- })`
277
- position: relative;
278
- margin: 0 6px;
279
- border-radius: 50%;
280
- cursor: pointer;
281
- width: 16px;
282
- height: 16px;
283
-
284
- &::before,
285
- &::after {
286
- content: '';
287
- position: absolute;
288
- top: 50%;
289
- left: 50%;
290
- display: block;
291
- border-radius: 50%;
292
- transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
293
- }
294
-
295
- &::before {
296
- box-shadow: 0 0 0 2px currentColor;
297
- transform: translate3d(-50%, -50%, 0);
298
- width: ${(props) => props.active ? 16 : 10}px;
299
- height: ${(props) => props.active ? 16 : 10}px;
300
- }
301
-
302
- &::after {
303
- background: currentColor;
304
- transform: translate3d(-50%, -50%, 0) scale(${(props) => props.active ? 1 : 0});
305
- width: 10px;
306
- height: 10px;
307
- }
308
-
309
- &:hover::after {
310
- transform: translate3d(-50%, -50%, 0) scale(${(props) => props.active ? 1 : 0.5});
311
- }
312
- `;
313
102
  const SWIPE_THRESHOLD = 20;
314
103
  const swipePower = (dx, velocity) => dx * (1 + velocity);
315
104
  const Carousel = React.forwardRef(function Carousel2({
@@ -397,10 +186,154 @@ const Carousel = React.forwardRef(function Carousel2({
397
186
  const intervalId = setInterval(() => isLastPage ? setIndex(0) : paginate(1), delay * 1e3);
398
187
  return () => clearInterval(intervalId);
399
188
  }, [autoplay, delay, paginate, isLastPage]);
400
- return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, {
189
+ const clipMaskClassName = next.useStyle({
190
+ overflow: "hidden"
191
+ });
192
+ const pageClassName = next.useStyle({
193
+ position: "relative",
194
+ width: "100%"
195
+ });
196
+ const slideClassName = css.cx(next.useStyle({
197
+ display: "flex"
198
+ }), next.useStyle(next.responsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
199
+ flexBasis: `${100 / pageSize2}%`,
200
+ maxWidth: `${100 / pageSize2}%`,
201
+ minWidth: `${100 / pageSize2}%`
202
+ }))), next.useStyle(next.responsiveStyle([slideAlignment], ([alignItems = "center"]) => ({
203
+ alignItems
204
+ }))));
205
+ const reelClassName = css.cx(next.useStyle({
206
+ display: "flex",
207
+ position: "relative",
208
+ flexWrap: "nowrap"
209
+ }), next.useStyle(next.responsiveStyle([gap], ([gap2 = {
210
+ value: 0,
211
+ unit: "px"
212
+ }]) => ({
213
+ margin: `0 ${`${-gap2.value / 2}${gap2.unit}`}`,
214
+ [`& > .${slideClassName}`]: {
215
+ padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
216
+ }
217
+ }))));
218
+ const arrowClassName = css.cx(next.useStyle({
219
+ padding: 10,
220
+ borderRadius: "50%",
221
+ outline: 0,
222
+ border: 0,
223
+ width: 40,
224
+ height: 40,
225
+ display: "flex",
226
+ alignItems: "center",
227
+ justifyContent: "center",
228
+ cursor: "pointer",
229
+ userSelect: "none"
230
+ }), next.useStyle(next.responsiveStyle([arrowBackground], ([background = {
231
+ swatch: {
232
+ hue: 0,
233
+ saturation: 0,
234
+ lightness: 100
235
+ },
236
+ alpha: 1
237
+ }]) => ({
238
+ background: next.colorToString(background)
239
+ }))), next.useStyle({
240
+ svg: {
241
+ transition: "transform 0.15s",
242
+ stroke: "currentcolor"
243
+ }
244
+ }));
245
+ const slopClassName = css.cx(next.useStyle({
246
+ position: "absolute",
247
+ top: 0,
248
+ bottom: 0,
249
+ display: "flex",
250
+ "&[hidden]": {
251
+ display: "none"
252
+ },
253
+ alignItems: "center",
254
+ cursor: "pointer",
255
+ zIndex: 2
256
+ }), next.useStyle(next.responsiveStyle([arrowColor], ([color = {
257
+ swatch: {
258
+ hue: 0,
259
+ saturation: 0,
260
+ lightness: 0
261
+ },
262
+ alpha: 1
263
+ }]) => ({
264
+ color: next.colorToString(color)
265
+ }))));
266
+ const leftSlopClassName = css.cx(slopClassName, next.useStyle(next.responsiveStyle([arrowPosition], ([position = "inside"]) => {
267
+ switch (position) {
268
+ case "inside":
269
+ return {
270
+ transform: "translateX(8px)"
271
+ };
272
+ case "outside":
273
+ return {
274
+ transform: "translateX(calc(-100% - 8px))"
275
+ };
276
+ default:
277
+ return {
278
+ transform: "translateX(calc(-50%))"
279
+ };
280
+ }
281
+ })), next.useStyle({
282
+ left: 0,
283
+ [`&:hover > .${arrowClassName}`]: {
284
+ "& > svg": {
285
+ transform: "translateX(-2px)"
286
+ }
287
+ }
288
+ }));
289
+ const rightSlopClassName = css.cx(slopClassName, next.useStyle(next.responsiveStyle([arrowPosition], ([position = "inside"]) => {
290
+ switch (position) {
291
+ case "inside":
292
+ return {
293
+ transform: "translateX(-8px)"
294
+ };
295
+ case "outside":
296
+ return {
297
+ transform: "translateX(calc(100% + 8px))"
298
+ };
299
+ default:
300
+ return {
301
+ transform: "translateX(calc(50%))"
302
+ };
303
+ }
304
+ })), next.useStyle({
305
+ right: 0,
306
+ [`&:hover > .${arrowClassName}`]: {
307
+ "& > svg": {
308
+ transform: "translateX(2px)"
309
+ }
310
+ }
311
+ }));
312
+ const dotsClassName = css.cx(next.useStyle({
313
+ display: showDots ? "flex" : "none",
314
+ justifyContent: "center",
315
+ marginTop: 20
316
+ }), next.useStyle(next.responsiveStyle([dotColor], ([color = {
317
+ swatch: {
318
+ hue: 0,
319
+ saturation: 0,
320
+ lightness: 0
321
+ },
322
+ alpha: 1
323
+ }]) => ({
324
+ color: next.colorToString(color)
325
+ }))));
326
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", {
401
327
  ref,
402
- width,
403
- margin,
328
+ className: css.cx(next.useStyle({
329
+ position: "relative",
330
+ display: "flex",
331
+ flexDirection: "column"
332
+ }), width, margin, next.useStyle({
333
+ "&:focus": {
334
+ outline: 0
335
+ }
336
+ })),
404
337
  tabIndex: -1,
405
338
  onKeyDown: (e) => {
406
339
  switch (e.key) {
@@ -412,12 +345,18 @@ const Carousel = React.forwardRef(function Carousel2({
412
345
  break;
413
346
  }
414
347
  },
415
- children: [/* @__PURE__ */ jsxRuntime.jsxs(Container, {
416
- children: [/* @__PURE__ */ jsxRuntime.jsx(ClipMask, {
417
- children: /* @__PURE__ */ jsxRuntime.jsx(Page, __spreadProps(__spreadValues({}, bindPage()), {
348
+ children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
349
+ className: next.useStyle({
350
+ position: "relative",
351
+ height: "100%"
352
+ }),
353
+ children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
354
+ className: clipMaskClassName,
355
+ children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, __spreadProps(__spreadValues({}, bindPage()), {
356
+ className: pageClassName,
418
357
  animate: animation,
419
- children: /* @__PURE__ */ jsxRuntime.jsx(Reel, {
420
- gap,
358
+ children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
359
+ className: reelClassName,
421
360
  animate: {
422
361
  x: `${-(100 / pageSize) * startIndex}%`
423
362
  },
@@ -431,10 +370,9 @@ const Carousel = React.forwardRef(function Carousel2({
431
370
  children: images.map(({
432
371
  props: imageProps,
433
372
  key
434
- }) => /* @__PURE__ */ jsxRuntime.jsx(Slide, {
373
+ }) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, {
435
374
  id: key,
436
- pageSize: responsivePageSize,
437
- alignItems: slideAlignment,
375
+ className: slideClassName,
438
376
  onMouseDown: (e) => e.preventDefault(),
439
377
  onClick: (e) => {
440
378
  if (swipe.current !== 0)
@@ -457,28 +395,25 @@ const Carousel = React.forwardRef(function Carousel2({
457
395
  }, key))
458
396
  })
459
397
  }))
460
- }), /* @__PURE__ */ jsxRuntime.jsx(LeftSlop, {
398
+ }), /* @__PURE__ */ jsxRuntime.jsx("div", {
461
399
  onClick: () => paginate(-1),
462
- position: arrowPosition,
463
- color: arrowColor,
400
+ className: leftSlopClassName,
464
401
  hidden: !showArrows || isFirstPage,
465
- children: /* @__PURE__ */ jsxRuntime.jsx(Arrow, {
466
- background: arrowBackground,
402
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
403
+ className: arrowClassName,
467
404
  children: /* @__PURE__ */ jsxRuntime.jsx(LeftChevron, {})
468
405
  })
469
- }), /* @__PURE__ */ jsxRuntime.jsx(RightSlop, {
406
+ }), /* @__PURE__ */ jsxRuntime.jsx("div", {
470
407
  onClick: () => paginate(1),
471
- position: arrowPosition,
472
- color: arrowColor,
408
+ className: rightSlopClassName,
473
409
  hidden: !showArrows || isLastPage,
474
- children: /* @__PURE__ */ jsxRuntime.jsx(Arrow, {
475
- background: arrowBackground,
410
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", {
411
+ className: arrowClassName,
476
412
  children: /* @__PURE__ */ jsxRuntime.jsx(RightChevron, {})
477
413
  })
478
414
  })]
479
- }), /* @__PURE__ */ jsxRuntime.jsx(Dots, {
480
- color: dotColor,
481
- hidden: !showDots,
415
+ }), /* @__PURE__ */ jsxRuntime.jsx("div", {
416
+ className: dotsClassName,
482
417
  children: Array.from({
483
418
  length: pageCount
484
419
  }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(Dot, {
@@ -488,5 +423,48 @@ const Carousel = React.forwardRef(function Carousel2({
488
423
  })]
489
424
  });
490
425
  });
426
+ function Dot(_a) {
427
+ var _b = _a, {
428
+ className,
429
+ active
430
+ } = _b, restOfProps = __objRest(_b, [
431
+ "className",
432
+ "active"
433
+ ]);
434
+ return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
435
+ className: css.cx(next.useStyle({
436
+ position: "relative",
437
+ margin: "0 6px",
438
+ borderRadius: "50%",
439
+ cursor: "pointer",
440
+ width: 16,
441
+ height: 16,
442
+ "&::before, &::after": {
443
+ content: '""',
444
+ position: "absolute",
445
+ top: "50%",
446
+ left: "50%",
447
+ display: "block",
448
+ borderRadius: "50%",
449
+ transition: "all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
450
+ },
451
+ "&::before": {
452
+ boxShadow: "0 0 0 2px currentColor",
453
+ transform: "translate3d(-50%, -50%, 0)",
454
+ width: active ? 16 : 10,
455
+ height: active ? 16 : 10
456
+ },
457
+ "&::after": {
458
+ background: "currentColor",
459
+ transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,
460
+ width: 10,
461
+ height: 10
462
+ },
463
+ "&:hover::after": {
464
+ transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`
465
+ }
466
+ }), className)
467
+ }));
468
+ }
491
469
  exports["default"] = Carousel;
492
470
  //# sourceMappingURL=Carousel.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import { useState, useRef, useEffect, useCallback, forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n ResponsiveValue,\n ElementIDValue,\n ImagesValue,\n MarginValue,\n ResponsiveNumberValue,\n ResponsiveIconRadioGroupValue,\n GapXValue,\n CheckboxValue,\n NumberValue,\n BorderValue,\n BorderRadiusValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\nconst LeftChevron = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n <path\n d=\"M7,13,1,7,7,1\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n />\n </svg>\n)\n\nconst RightChevron = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n <path\n d=\"M3,1,9,7,3,13\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n />\n </svg>\n)\n\n// NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far\nconst Container = styled.div`\n position: relative;\n height: 100%;\n`\n\ntype Props = {\n id?: ElementIDValue\n images?: ImagesValue\n width?: WidthValue\n margin?: MarginValue\n pageSize?: ResponsiveNumberValue\n step?: ResponsiveNumberValue\n slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n gap?: GapXValue\n autoplay?: CheckboxValue\n delay?: NumberValue\n showArrows?: CheckboxValue\n arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n arrowColor?: ResponsiveColor | null\n arrowBackground?: ResponsiveColor | null\n showDots?: CheckboxValue\n dotColor?: ResponsiveColor | null\n slideBorder?: BorderValue\n slideBorderRadius?: BorderRadiusValue\n}\n\nconst Wrapper = styled.div.withConfig({\n shouldForwardProp: prop => !['margin', 'width'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n position: relative;\n display: flex;\n flex-direction: column;\n ${cssWidth('400px')}\n ${cssMargin()}\n\n &:focus {\n outline: 0;\n }\n`\n\nconst Arrow = styled.div.withConfig({\n shouldForwardProp: prop => !['background'].includes(prop),\n})<{ background?: ResponsiveValue<Color> | null }>`\n padding: 10px;\n border-radius: 50%;\n outline: 0;\n border: 0;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n user-select: none;\n ${p =>\n cssMediaRules(\n [p.background] as const,\n ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => css`\n background: ${colorToString(background)};\n `,\n )}\n\n svg {\n transition: transform 0.15s;\n stroke: currentColor;\n }\n`\n\nconst Slop = styled.div.withConfig({\n shouldForwardProp: prop => !['color'].includes(prop),\n})<{\n color?: ResponsiveValue<Color> | null\n}>`\n position: absolute;\n top: 0;\n bottom: 0;\n display: ${props => (props.hidden ? 'none' : 'flex')};\n align-items: center;\n cursor: pointer;\n z-index: 2;\n ${p =>\n cssMediaRules(\n [p.color] as const,\n ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n color: ${colorToString(color)};\n `,\n )}\n`\n\nconst Slide = styled(motion.div).withConfig({\n shouldForwardProp: prop => !['pageSize', 'alignItems'].includes(prop),\n})<{\n pageSize: Props['pageSize']\n alignItems: Props['slideAlignment']\n}>`\n display: flex;\n ${p =>\n cssMediaRules(\n [p.pageSize],\n ([pageSize = 1]) => css`\n flex-basis: ${100 / pageSize}%;\n max-width: ${100 / pageSize}%;\n min-width: ${100 / pageSize}%;\n `,\n )}\n\n ${p => cssMediaRules([p.alignItems], ([alignItems = 'center']) => ({ alignItems }))}\n`\n\nconst Reel = styled(motion.div).withConfig({\n shouldForwardProp: prop => !['gap'].includes(prop),\n})<{ gap: Props['gap'] }>`\n display: flex;\n position: relative;\n flex-wrap: nowrap;\n ${p =>\n cssMediaRules(\n [p.gap] as const,\n ([gap = { value: 0, unit: 'px' }]) => css`\n margin: 0 ${`${-gap.value / 2}${gap.unit}`};\n\n & > ${Slide} {\n padding: 0 ${`${gap.value / 2}${gap.unit}`};\n }\n `,\n )}\n`\n\nconst Page = styled(motion.div)`\n position: relative;\n width: 100%;\n`\n\nconst LeftSlop = styled(Slop).withConfig({\n shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n ${p =>\n cssMediaRules([p.position] as const, ([position = 'inside']) => {\n switch (position) {\n case 'inside':\n return css`\n transform: translateX(8px);\n `\n case 'outside':\n return css`\n transform: translateX(calc(-100% - 8px));\n `\n default:\n return css`\n transform: translateX(calc(-50%));\n `\n }\n })}\n left: 0;\n\n &:hover > ${Arrow} {\n & > svg {\n transform: translateX(-2px);\n }\n }\n`\n\nconst RightSlop = styled(Slop).withConfig({\n shouldForwardProp: prop => !['position'].includes(prop),\n})<{ position: Props['arrowPosition'] }>`\n ${p =>\n cssMediaRules([p.position] as const, ([position = 'inside']) => {\n switch (position) {\n case 'inside':\n return css`\n transform: translateX(-8px);\n `\n case 'outside':\n return css`\n transform: translateX(calc(100% + 8px));\n `\n default:\n return css`\n transform: translateX(calc(50%));\n `\n }\n })}\n right: 0;\n\n &:hover > ${Arrow} {\n & > svg {\n transform: translateX(2px);\n }\n }\n`\n\nconst ClipMask = styled.div`\n overflow: hidden;\n`\n\nconst Dots = styled.div.withConfig({\n shouldForwardProp: prop => !['color'].includes(prop),\n})<{ color?: ResponsiveValue<Color> | null }>`\n display: ${props => (props.hidden ? 'none' : 'flex')};\n justify-content: center;\n margin-top: 20px;\n ${p =>\n cssMediaRules(\n [p.color] as const,\n ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => css`\n color: ${colorToString(color)};\n `,\n )}\n`\n\nconst Dot = styled.div.withConfig({\n shouldForwardProp: prop => !['active'].includes(prop),\n})<{ active: boolean }>`\n position: relative;\n margin: 0 6px;\n border-radius: 50%;\n cursor: pointer;\n width: 16px;\n height: 16px;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n border-radius: 50%;\n transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n &::before {\n box-shadow: 0 0 0 2px currentColor;\n transform: translate3d(-50%, -50%, 0);\n width: ${props => (props.active ? 16 : 10)}px;\n height: ${props => (props.active ? 16 : 10)}px;\n }\n\n &::after {\n background: currentColor;\n transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0)});\n width: 10px;\n height: 10px;\n }\n\n &:hover::after {\n transform: translate3d(-50%, -50%, 0) scale(${props => (props.active ? 1 : 0.5)});\n }\n`\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n {\n images = [],\n width,\n margin,\n pageSize: responsivePageSize,\n step: responsiveStep,\n gap,\n slideAlignment,\n showDots,\n showArrows,\n arrowPosition,\n arrowColor,\n arrowBackground,\n dotColor,\n autoplay = false,\n delay = 5,\n slideBorder,\n slideBorderRadius,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [index, setIndex] = useState(0)\n const swipe = useRef(0)\n const startIndex = wrap(0, images.length, index)\n const pageSize = useMediaQuery(responsivePageSize) || 1\n const step = useMediaQuery(responsiveStep) || 1\n const endIndex = startIndex + pageSize\n const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n const pageIndex = Math.ceil(startIndex / step)\n const isFirstPage = pageIndex === 0\n const isLastPage = pageIndex === pageCount - 1\n const paginate = useCallback(\n (pageDistance: number) => {\n if (pageDistance === 0) return\n\n const direction = pageDistance / Math.abs(pageDistance)\n const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n setIndex(index + distance)\n },\n [images, index, startIndex, endIndex, step],\n )\n // @ts-expect-error: `useAnimation` types expect no arguments.\n const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n const bindPage = useGesture(\n {\n onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n animation.start({ x: mx })\n swipe.current = swipePower(dx, velocity)\n },\n onDragEnd: () => {\n animation.start({ x: 0 })\n\n if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n },\n },\n {\n drag: {\n axis: 'x',\n bounds: { left: 0, right: 0 },\n rubberband: true,\n },\n },\n )\n\n useEffect(() => {\n if (!autoplay || pageSize !== 0) setIndex(0)\n }, [autoplay, pageSize])\n\n useEffect(() => {\n if (!autoplay) return () => {}\n\n const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n return () => clearInterval(intervalId)\n }, [autoplay, delay, paginate, isLastPage])\n\n return (\n <Wrapper\n ref={ref}\n width={width}\n margin={margin}\n tabIndex={-1}\n onKeyDown={e => {\n switch (e.key) {\n case 'ArrowRight':\n paginate(1)\n break\n case 'ArrowLeft':\n paginate(-1)\n break\n default:\n }\n }}\n >\n <Container>\n <ClipMask>\n <Page {...bindPage()} animate={animation}>\n <Reel\n gap={gap}\n animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n transition={{\n x: {\n type: 'tween',\n ease: [0.165, 0.84, 0.44, 1],\n duration: 0.5,\n },\n }}\n >\n {images.map(({ props: imageProps, key }) => (\n <Slide\n id={key}\n key={key}\n pageSize={responsivePageSize}\n alignItems={slideAlignment}\n onMouseDown={e => e.preventDefault()}\n onClick={e => {\n if (swipe.current !== 0) e.preventDefault()\n }}\n >\n <Image\n width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n file={imageProps.file}\n altText={imageProps.altText}\n link={imageProps.link}\n border={slideBorder}\n borderRadius={slideBorderRadius}\n />\n </Slide>\n ))}\n </Reel>\n </Page>\n </ClipMask>\n <LeftSlop\n onClick={() => paginate(-1)}\n position={arrowPosition}\n // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n color={arrowColor}\n hidden={!showArrows || isFirstPage}\n >\n <Arrow background={arrowBackground}>\n <LeftChevron />\n </Arrow>\n </LeftSlop>\n <RightSlop\n onClick={() => paginate(1)}\n position={arrowPosition}\n // @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop\n color={arrowColor}\n hidden={!showArrows || isLastPage}\n >\n <Arrow background={arrowBackground}>\n <RightChevron />\n </Arrow>\n </RightSlop>\n </Container>\n {/* @ts-expect-error: HTMLDivElement attributes conflicts with `color` prop */}\n <Dots color={dotColor} hidden={!showDots}>\n {Array.from({ length: pageCount }).map((_, i) => (\n <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n ))}\n </Dots>\n </Wrapper>\n )\n})\n\nexport default Carousel\n"],"names":["LeftChevron","_jsx","RightChevron","Container","styled","div","Wrapper","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","Arrow","p","cssMediaRules","background","swatch","hue","saturation","lightness","alpha","css","colorToString","Slop","props","hidden","color","Slide","motion","pageSize","alignItems","Reel","gap","value","unit","Page","LeftSlop","position","RightSlop","ClipMask","Dots","Dot","active","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","responsivePageSize","step","responsiveStep","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","e","key","_jsxs","ease","duration","map","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i"],"mappings":"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"}
1
+ {"version":3,"file":"Carousel.cjs.js","sources":["../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["import {\n useState,\n useRef,\n useEffect,\n useCallback,\n forwardRef,\n Ref,\n ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from 'react-use-gesture'\nimport { wrap } from '@popmotion/popcorn'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport {\n ElementIDValue,\n ImagesValue,\n ResponsiveNumberValue,\n ResponsiveIconRadioGroupValue,\n GapXValue,\n CheckboxValue,\n NumberValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { responsiveStyle } from '../../utils/responsive-style'\n\nconst LeftChevron = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n <path\n d=\"M7,13,1,7,7,1\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n />\n </svg>\n)\n\nconst RightChevron = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n <path\n d=\"M3,1,9,7,3,13\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n />\n </svg>\n)\n\ntype Props = {\n id?: ElementIDValue\n images?: ImagesValue\n width?: string\n margin?: string\n pageSize?: ResponsiveNumberValue\n step?: ResponsiveNumberValue\n slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n gap?: GapXValue\n autoplay?: CheckboxValue\n delay?: NumberValue\n showArrows?: CheckboxValue\n arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n arrowColor?: ResponsiveColor | null\n arrowBackground?: ResponsiveColor | null\n showDots?: CheckboxValue\n dotColor?: ResponsiveColor | null\n slideBorder?: string\n slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\nconst Carousel = forwardRef(function Carousel(\n {\n images = [],\n width,\n margin,\n pageSize: responsivePageSize,\n step: responsiveStep,\n gap,\n slideAlignment,\n showDots,\n showArrows,\n arrowPosition,\n arrowColor,\n arrowBackground,\n dotColor,\n autoplay = false,\n delay = 5,\n slideBorder,\n slideBorderRadius,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [index, setIndex] = useState(0)\n const swipe = useRef(0)\n const startIndex = wrap(0, images.length, index)\n const pageSize = useMediaQuery(responsivePageSize) || 1\n const step = useMediaQuery(responsiveStep) || 1\n const endIndex = startIndex + pageSize\n const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n const pageIndex = Math.ceil(startIndex / step)\n const isFirstPage = pageIndex === 0\n const isLastPage = pageIndex === pageCount - 1\n const paginate = useCallback(\n (pageDistance: number) => {\n if (pageDistance === 0) return\n\n const direction = pageDistance / Math.abs(pageDistance)\n const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n setIndex(index + distance)\n },\n [images, index, startIndex, endIndex, step],\n )\n // @ts-expect-error: `useAnimation` types expect no arguments.\n const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n const bindPage = useGesture(\n {\n onDrag: ({ movement: [mx], delta: [dx], velocity }) => {\n animation.start({ x: mx })\n swipe.current = swipePower(dx, velocity)\n },\n onDragEnd: () => {\n animation.start({ x: 0 })\n\n if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n },\n },\n {\n drag: {\n axis: 'x',\n bounds: { left: 0, right: 0 },\n rubberband: true,\n },\n },\n )\n\n useEffect(() => {\n if (!autoplay || pageSize !== 0) setIndex(0)\n }, [autoplay, pageSize])\n\n useEffect(() => {\n if (!autoplay) return () => {}\n\n const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n return () => clearInterval(intervalId)\n }, [autoplay, delay, paginate, isLastPage])\n\n const clipMaskClassName = useStyle({ overflow: 'hidden' })\n const pageClassName = useStyle({ position: 'relative', width: '100%' })\n const slideClassName = cx(\n useStyle({ display: 'flex' }),\n useStyle(\n responsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n flexBasis: `${100 / pageSize}%`,\n maxWidth: `${100 / pageSize}%`,\n minWidth: `${100 / pageSize}%`,\n })),\n ),\n useStyle(\n responsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n ),\n )\n const reelClassName = cx(\n useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n useStyle(\n responsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n [`& > .${slideClassName}`]: {\n padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n },\n })),\n ),\n )\n const arrowClassName = cx(\n useStyle({\n padding: 10,\n borderRadius: '50%',\n outline: 0,\n border: 0,\n width: 40,\n height: 40,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer',\n userSelect: 'none',\n }),\n useStyle(\n responsiveStyle(\n [arrowBackground] as const,\n ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n background: colorToString(background),\n }),\n ),\n ),\n useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n )\n const slopClassName = cx(\n useStyle({\n position: 'absolute',\n top: 0,\n bottom: 0,\n\n display: 'flex',\n '&[hidden]': {\n display: 'none',\n },\n\n alignItems: 'center',\n cursor: 'pointer',\n zIndex: 2,\n }),\n useStyle(\n responsiveStyle(\n [arrowColor] as const,\n ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n color: colorToString(color),\n }),\n ),\n ),\n )\n const leftSlopClassName = cx(\n slopClassName,\n useStyle(\n responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n switch (position) {\n case 'inside':\n return { transform: 'translateX(8px)' }\n\n case 'outside':\n return { transform: 'translateX(calc(-100% - 8px))' }\n\n default:\n return { transform: 'translateX(calc(-50%))' }\n }\n }),\n ),\n useStyle({\n left: 0,\n\n [`&:hover > .${arrowClassName}`]: {\n '& > svg': {\n transform: 'translateX(-2px)',\n },\n },\n }),\n )\n const rightSlopClassName = cx(\n slopClassName,\n useStyle(\n responsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n switch (position) {\n case 'inside':\n return { transform: 'translateX(-8px)' }\n\n case 'outside':\n return { transform: 'translateX(calc(100% + 8px))' }\n\n default:\n return { transform: 'translateX(calc(50%))' }\n }\n }),\n ),\n useStyle({\n right: 0,\n\n [`&:hover > .${arrowClassName}`]: {\n '& > svg': {\n transform: 'translateX(2px)',\n },\n },\n }),\n )\n const dotsClassName = cx(\n useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n useStyle(\n responsiveStyle(\n [dotColor] as const,\n ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n color: colorToString(color),\n }),\n ),\n ),\n )\n\n return (\n <div\n ref={ref}\n className={cx(\n useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n width,\n margin,\n useStyle({ '&:focus': { outline: 0 } }),\n )}\n tabIndex={-1}\n onKeyDown={e => {\n switch (e.key) {\n case 'ArrowRight':\n paginate(1)\n break\n case 'ArrowLeft':\n paginate(-1)\n break\n default:\n }\n }}\n >\n {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n <div className={useStyle({ position: 'relative', height: '100%' })}>\n <div className={clipMaskClassName}>\n <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n <motion.div\n className={reelClassName}\n animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n transition={{\n x: {\n type: 'tween',\n ease: [0.165, 0.84, 0.44, 1],\n duration: 0.5,\n },\n }}\n >\n {images.map(({ props: imageProps, key }) => (\n <motion.div\n id={key}\n key={key}\n className={slideClassName}\n onMouseDown={e => e.preventDefault()}\n onClick={e => {\n if (swipe.current !== 0) e.preventDefault()\n }}\n >\n <Image\n width={[{ deviceId: 'desktop', value: { value: 100, unit: '%' } }]}\n file={imageProps.file}\n altText={imageProps.altText}\n link={imageProps.link}\n border={slideBorder}\n borderRadius={slideBorderRadius}\n />\n </motion.div>\n ))}\n </motion.div>\n </motion.div>\n </div>\n <div\n onClick={() => paginate(-1)}\n className={leftSlopClassName}\n hidden={!showArrows || isFirstPage}\n >\n <div className={arrowClassName}>\n <LeftChevron />\n </div>\n </div>\n <div\n onClick={() => paginate(1)}\n className={rightSlopClassName}\n hidden={!showArrows || isLastPage}\n >\n <div className={arrowClassName}>\n <RightChevron />\n </div>\n </div>\n </div>\n <div className={dotsClassName}>\n {Array.from({ length: pageCount }).map((_, i) => (\n <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n ))}\n </div>\n </div>\n )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n className?: string\n active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n position: 'relative',\n margin: '0 6px',\n borderRadius: '50%',\n cursor: 'pointer',\n width: 16,\n height: 16,\n\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n display: 'block',\n borderRadius: '50%',\n transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n },\n\n '&::before': {\n boxShadow: '0 0 0 2px currentColor',\n transform: 'translate3d(-50%, -50%, 0)',\n width: active ? 16 : 10,\n height: active ? 16 : 10,\n },\n\n '&::after': {\n background: 'currentColor',\n transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n width: 10,\n height: 10,\n },\n\n '&:hover::after': {\n transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n },\n }),\n className,\n )}\n />\n )\n}\n"],"names":["LeftChevron","_jsx","RightChevron","SWIPE_THRESHOLD","swipePower","dx","velocity","Carousel","forwardRef","images","width","margin","pageSize","responsivePageSize","step","responsiveStep","gap","slideAlignment","showDots","showArrows","arrowPosition","arrowColor","arrowBackground","dotColor","autoplay","delay","slideBorder","slideBorderRadius","ref","index","setIndex","useState","swipe","useRef","startIndex","wrap","length","useMediaQuery","endIndex","pageCount","Math","ceil","pageIndex","isFirstPage","isLastPage","paginate","useCallback","pageDistance","direction","abs","remaining","slice","distance","min","animation","useAnimation","x","transition","type","stiffness","bindPage","useGesture","onDrag","movement","mx","delta","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","responsiveStyle","flexBasis","maxWidth","minWidth","alignItems","reelClassName","flexWrap","value","unit","padding","arrowClassName","borderRadius","outline","border","height","justifyContent","cursor","userSelect","background","swatch","hue","saturation","lightness","alpha","colorToString","svg","stroke","slopClassName","top","bottom","zIndex","color","leftSlopClassName","transform","rightSlopClassName","dotsClassName","marginTop","flexDirection","e","key","_jsxs","motion","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}