@makeswift/runtime 0.8.11 → 0.9.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.
- package/dist/Box.cjs.js +16 -15
- package/dist/Box.cjs.js.map +1 -1
- package/dist/Box.es.js +11 -10
- package/dist/Box.es.js.map +1 -1
- package/dist/Button.cjs.js +13 -12
- package/dist/Button.cjs.js.map +1 -1
- package/dist/Button.es.js +11 -10
- package/dist/Button.es.js.map +1 -1
- package/dist/Carousel.cjs.js +28 -27
- package/dist/Carousel.cjs.js.map +1 -1
- package/dist/Carousel.es.js +7 -6
- package/dist/Carousel.es.js.map +1 -1
- package/dist/Countdown.cjs.js +16 -15
- package/dist/Countdown.cjs.js.map +1 -1
- package/dist/Countdown.es.js +8 -7
- package/dist/Countdown.es.js.map +1 -1
- package/dist/Divider.cjs.js +13 -12
- package/dist/Divider.cjs.js.map +1 -1
- package/dist/Divider.es.js +11 -10
- package/dist/Divider.es.js.map +1 -1
- package/dist/Embed.cjs.js +4 -29
- package/dist/Embed.cjs.js.map +1 -1
- package/dist/Embed.es.js +3 -28
- package/dist/Embed.es.js.map +1 -1
- package/dist/Form.cjs.js +52 -51
- package/dist/Form.cjs.js.map +1 -1
- package/dist/Form.es.js +8 -7
- package/dist/Form.es.js.map +1 -1
- package/dist/Image.cjs.js +9 -8
- package/dist/Image.cjs.js.map +1 -1
- package/dist/Image.es.js +8 -7
- package/dist/Image.es.js.map +1 -1
- package/dist/LiveProvider.cjs.js +6 -5
- package/dist/LiveProvider.cjs.js.map +1 -1
- package/dist/LiveProvider.es.js +8 -7
- package/dist/LiveProvider.es.js.map +1 -1
- package/dist/Navigation.cjs.js +28 -27
- package/dist/Navigation.cjs.js.map +1 -1
- package/dist/Navigation.es.js +7 -6
- package/dist/Navigation.es.js.map +1 -1
- package/dist/PreviewProvider.cjs.js +23 -7
- package/dist/PreviewProvider.cjs.js.map +1 -1
- package/dist/PreviewProvider.es.js +24 -8
- package/dist/PreviewProvider.es.js.map +1 -1
- package/dist/ReadOnlyText.cjs.js +22 -20
- package/dist/ReadOnlyText.cjs.js.map +1 -1
- package/dist/ReadOnlyText.es.js +18 -16
- package/dist/ReadOnlyText.es.js.map +1 -1
- package/dist/ReadOnlyTextV2.cjs.js +19 -17
- package/dist/ReadOnlyTextV2.cjs.js.map +1 -1
- package/dist/ReadOnlyTextV2.es.js +16 -14
- package/dist/ReadOnlyTextV2.es.js.map +1 -1
- package/dist/Root.cjs.js +8 -7
- package/dist/Root.cjs.js.map +1 -1
- package/dist/Root.es.js +6 -5
- package/dist/Root.es.js.map +1 -1
- package/dist/SocialLinks.cjs.js +15 -14
- package/dist/SocialLinks.cjs.js.map +1 -1
- package/dist/SocialLinks.es.js +11 -10
- package/dist/SocialLinks.es.js.map +1 -1
- package/dist/Text.cjs.js +5 -4
- package/dist/Text.cjs.js.map +1 -1
- package/dist/Text.es.js +6 -5
- package/dist/Text.es.js.map +1 -1
- package/dist/Video.cjs.js +4 -29
- package/dist/Video.cjs.js.map +1 -1
- package/dist/Video.es.js +3 -28
- package/dist/Video.es.js.map +1 -1
- package/dist/actions.cjs.js +16 -1
- package/dist/actions.cjs.js.map +1 -1
- package/dist/actions.es.js +14 -2
- package/dist/actions.es.js.map +1 -1
- package/dist/builder.cjs.js +5 -0
- package/dist/builder.cjs.js.map +1 -1
- package/dist/builder.es.js +5 -0
- package/dist/builder.es.js.map +1 -1
- package/dist/components.cjs.js +10 -9
- package/dist/components.cjs.js.map +1 -1
- package/dist/components.es.js +10 -9
- package/dist/components.es.js.map +1 -1
- package/dist/control-serialization.cjs.js +89 -10
- package/dist/control-serialization.cjs.js.map +1 -1
- package/dist/control-serialization.es.js +90 -11
- package/dist/control-serialization.es.js.map +1 -1
- package/dist/controls.cjs.js +12 -3
- package/dist/controls.cjs.js.map +1 -1
- package/dist/controls.es.js +6 -2
- package/dist/controls.es.js.map +1 -1
- package/dist/deepEqual.cjs.js +40 -0
- package/dist/deepEqual.cjs.js.map +1 -0
- package/dist/deepEqual.es.js +39 -0
- package/dist/deepEqual.es.js.map +1 -0
- package/dist/index.cjs.js +298 -292
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs10.js +18 -16
- package/dist/index.cjs10.js.map +1 -1
- package/dist/index.cjs2.js +14 -14
- package/dist/index.cjs2.js.map +1 -1
- package/dist/index.cjs4.js +2 -1
- package/dist/index.cjs4.js.map +1 -1
- package/dist/index.cjs5.js +0 -522
- package/dist/index.cjs5.js.map +1 -1
- package/dist/index.cjs6.js +1 -2
- package/dist/index.cjs6.js.map +1 -1
- package/dist/index.cjs7.js +0 -52
- package/dist/index.cjs7.js.map +1 -1
- package/dist/index.cjs8.js +5 -4
- package/dist/index.cjs8.js.map +1 -1
- package/dist/index.cjs9.js +72 -69
- package/dist/index.cjs9.js.map +1 -1
- package/dist/index.es.js +282 -275
- package/dist/index.es.js.map +1 -1
- package/dist/index.es10.js +16 -14
- package/dist/index.es10.js.map +1 -1
- package/dist/index.es2.js +3 -3
- package/dist/index.es3.js +1 -1
- package/dist/index.es4.js +2 -1
- package/dist/index.es4.js.map +1 -1
- package/dist/index.es5.js +2 -514
- package/dist/index.es5.js.map +1 -1
- package/dist/index.es6.js +1 -2
- package/dist/index.es6.js.map +1 -1
- package/dist/index.es7.js +2 -53
- package/dist/index.es7.js.map +1 -1
- package/dist/index.es8.js +5 -4
- package/dist/index.es8.js.map +1 -1
- package/dist/index.es9.js +74 -71
- package/dist/index.es9.js.map +1 -1
- package/dist/leaf.cjs.js +1 -1
- package/dist/leaf.cjs.js.map +1 -1
- package/dist/leaf.es.js +2 -2
- package/dist/main.cjs.js +8 -0
- package/dist/main.cjs.js.map +1 -1
- package/dist/main.es.js +7 -2
- package/dist/main.es.js.map +1 -1
- package/dist/next.cjs.js +5 -4
- package/dist/next.cjs.js.map +1 -1
- package/dist/next.es.js +6 -5
- package/dist/next.es.js.map +1 -1
- package/dist/prop-controllers.cjs.js +5 -0
- package/dist/prop-controllers.cjs.js.map +1 -1
- package/dist/prop-controllers.es.js +5 -0
- package/dist/prop-controllers.es.js.map +1 -1
- package/dist/react-page.cjs.js +1013 -190
- package/dist/react-page.cjs.js.map +1 -1
- package/dist/react-page.es.js +968 -185
- package/dist/react-page.es.js.map +1 -1
- package/dist/react.cjs.js +5 -4
- package/dist/react.cjs.js.map +1 -1
- package/dist/react.es.js +5 -4
- package/dist/react.es.js.map +1 -1
- package/dist/slate.cjs.js +96 -14
- package/dist/slate.cjs.js.map +1 -1
- package/dist/slate.es.js +89 -6
- package/dist/slate.es.js.map +1 -1
- package/dist/types/src/api/graphql/documents/queries.d.ts.map +1 -1
- package/dist/types/src/api/graphql/generated/types.d.ts +0 -8
- package/dist/types/src/api/graphql/generated/types.d.ts.map +1 -1
- package/dist/types/src/builder/serialization/control-serialization.d.ts +3 -3
- package/dist/types/src/builder/serialization/control-serialization.d.ts.map +1 -1
- package/dist/types/src/builder/serialization/controls/rich-text-v2.d.ts +2 -2
- package/dist/types/src/builder/serialization/controls/rich-text-v2.d.ts.map +1 -1
- package/dist/types/src/builder/serialization/controls/style-v2.d.ts +5 -0
- package/dist/types/src/builder/serialization/controls/style-v2.d.ts.map +1 -0
- package/dist/types/src/components/builtin/Button/Button.d.ts +1 -1
- package/dist/types/src/components/builtin/Carousel/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Countdown/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Divider/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Embed/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts +1 -1
- package/dist/types/src/components/builtin/Form/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/SocialLinks/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/EditableText/editable-text.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/ReadOnlyText.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/components/Element/block.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Video/register.d.ts.map +1 -1
- package/dist/types/src/components/hooks/useIsomorphicLayoutEffect.d.ts +2 -2
- package/dist/types/src/components/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -1
- package/dist/types/src/controls/control.d.ts +3 -2
- package/dist/types/src/controls/control.d.ts.map +1 -1
- package/dist/types/src/controls/index.d.ts +1 -0
- package/dist/types/src/controls/index.d.ts.map +1 -1
- package/dist/types/src/controls/rich-text-v2/rich-text-v2.d.ts +10 -5
- package/dist/types/src/controls/rich-text-v2/rich-text-v2.d.ts.map +1 -1
- package/dist/types/src/controls/style-v2.d.ts +55 -0
- package/dist/types/src/controls/style-v2.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +2 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/next/api-handler/handlers/manifest.d.ts +3 -1
- package/dist/types/src/next/api-handler/handlers/manifest.d.ts.map +1 -1
- package/dist/types/src/next/api-handler/handlers/proxy-preview-mode.d.ts.map +1 -1
- package/dist/types/src/next/api-handler/index.d.ts +2 -1
- package/dist/types/src/next/api-handler/index.d.ts.map +1 -1
- package/dist/types/src/next/client.d.ts +7 -7
- package/dist/types/src/next/client.d.ts.map +1 -1
- package/dist/types/src/next/index.d.ts +8 -5
- package/dist/types/src/next/index.d.ts.map +1 -1
- package/dist/types/src/next/preview-mode.d.ts +17 -3
- package/dist/types/src/next/preview-mode.d.ts.map +1 -1
- package/dist/types/src/prop-controllers/descriptors.d.ts +4 -3
- package/dist/types/src/prop-controllers/descriptors.d.ts.map +1 -1
- package/dist/types/src/prop-controllers/instances.d.ts +2 -2
- package/dist/types/src/prop-controllers/instances.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/control.d.ts +3 -2
- package/dist/types/src/runtimes/react/controls/control.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.d.ts +2 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/rich-text-v2.d.ts +1 -1
- package/dist/types/src/runtimes/react/controls/rich-text-v2/rich-text-v2.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/style-v2.d.ts +4 -0
- package/dist/types/src/runtimes/react/controls/style-v2.d.ts.map +1 -0
- package/dist/types/src/runtimes/react/controls.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/index.d.ts +3 -1
- package/dist/types/src/runtimes/react/index.d.ts.map +1 -1
- package/dist/types/src/slate/BlockPlugin/constants.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/dedent.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/indent.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/index.d.ts +29 -3
- package/dist/types/src/slate/BlockPlugin/index.d.ts.map +1 -1
- package/dist/types/src/slate/BlockPlugin/toggleList.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/unwrapList.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/utils/filterForSubtreeRoots.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/utils/getSelectedListItems.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/utils/location.d.ts.map +1 -0
- package/dist/types/src/slate/BlockPlugin/wrapList.d.ts.map +1 -0
- package/dist/types/src/slate/InlineModePlugin/index.d.ts +2 -1
- package/dist/types/src/slate/InlineModePlugin/index.d.ts.map +1 -1
- package/dist/types/src/slate/TextAlignPlugin/index.d.ts +9 -0
- package/dist/types/src/slate/TextAlignPlugin/index.d.ts.map +1 -0
- package/dist/types/src/slate/index.d.ts +1 -1
- package/dist/types/src/slate/index.d.ts.map +1 -1
- package/dist/types/src/slate/types.d.ts +18 -0
- package/dist/types/src/slate/types.d.ts.map +1 -1
- package/dist/types/src/slate/utils/element.d.ts +1 -2
- package/dist/types/src/slate/utils/element.d.ts.map +1 -1
- package/dist/types/src/state/actions.d.ts +26 -1
- package/dist/types/src/state/actions.d.ts.map +1 -1
- package/dist/types/src/state/modules/components-meta.d.ts +25 -1
- package/dist/types/src/state/modules/components-meta.d.ts.map +1 -1
- package/dist/types/src/state/modules/locales.d.ts +16 -0
- package/dist/types/src/state/modules/locales.d.ts.map +1 -0
- package/dist/types/src/state/react-builder-preview.d.ts +2 -0
- package/dist/types/src/state/react-builder-preview.d.ts.map +1 -1
- package/dist/types/src/state/react-page.d.ts +5 -1
- package/dist/types/src/state/react-page.d.ts.map +1 -1
- package/dist/useMediaQuery.es.js +1 -1
- package/package.json +6 -3
- package/dist/select.cjs.js +0 -8
- package/dist/select.cjs.js.map +0 -1
- package/dist/select.es.js +0 -6
- package/dist/select.es.js.map +0 -1
- package/dist/types/src/slate/ListPlugin/constants.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/dedent.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/indent.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/index.d.ts +0 -17
- package/dist/types/src/slate/ListPlugin/index.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/toggleList.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/unwrapList.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/utils/filterForSubtreeRoots.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/utils/getSelectedListItems.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/utils/location.d.ts.map +0 -1
- package/dist/types/src/slate/ListPlugin/wrapList.d.ts.map +0 -1
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/constants.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/dedent.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/indent.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/toggleList.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/unwrapList.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/utils/filterForSubtreeRoots.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/utils/getSelectedListItems.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/utils/location.d.ts +0 -0
- /package/dist/types/src/slate/{ListPlugin → BlockPlugin}/wrapList.d.ts +0 -0
package/dist/Carousel.cjs.js
CHANGED
|
@@ -37,10 +37,10 @@ var react = require("@use-gesture/react");
|
|
|
37
37
|
var popcorn = require("@popmotion/popcorn");
|
|
38
38
|
var next = require("./index.cjs.js");
|
|
39
39
|
require("use-sync-external-store/shim");
|
|
40
|
-
require("./react-page.cjs.js");
|
|
40
|
+
var reactPage = require("./react-page.cjs.js");
|
|
41
41
|
require("slate");
|
|
42
|
-
require("is-hotkey");
|
|
43
42
|
var state_breakpoints = require("./state/breakpoints.cjs.js");
|
|
43
|
+
require("is-hotkey");
|
|
44
44
|
require("slate-react");
|
|
45
45
|
var useMediaQuery = require("./useMediaQuery.cjs.js");
|
|
46
46
|
var Image = require("./Image.cjs.js");
|
|
@@ -49,21 +49,22 @@ var jsxRuntime = require("react/jsx-runtime");
|
|
|
49
49
|
require("use-sync-external-store/shim/with-selector");
|
|
50
50
|
require("next/dynamic");
|
|
51
51
|
require("./actions.cjs.js");
|
|
52
|
-
require("@emotion/serialize");
|
|
53
|
-
require("@emotion/utils");
|
|
54
52
|
require("./text-input.cjs.js");
|
|
55
53
|
require("./combobox.cjs.js");
|
|
56
|
-
require("./select.cjs.js");
|
|
57
54
|
require("redux");
|
|
58
55
|
require("redux-thunk");
|
|
59
56
|
require("./types.cjs.js");
|
|
57
|
+
require("./deepEqual.cjs.js");
|
|
60
58
|
require("./box-models.cjs.js");
|
|
61
59
|
require("css-box-model");
|
|
62
60
|
require("color");
|
|
61
|
+
require("@emotion/serialize");
|
|
62
|
+
require("@emotion/utils");
|
|
63
63
|
require("scroll-into-view-if-needed");
|
|
64
64
|
require("react-dom");
|
|
65
65
|
require("html-react-parser");
|
|
66
66
|
require("next/head");
|
|
67
|
+
require("zod");
|
|
67
68
|
require("@emotion/server/create-instance");
|
|
68
69
|
require("next/document");
|
|
69
70
|
require("cors");
|
|
@@ -194,27 +195,27 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
194
195
|
const intervalId = setInterval(() => isLastPage ? setIndex(0) : paginate(1), delay * 1e3);
|
|
195
196
|
return () => clearInterval(intervalId);
|
|
196
197
|
}, [autoplay, delay, paginate, isLastPage]);
|
|
197
|
-
const clipMaskClassName =
|
|
198
|
+
const clipMaskClassName = reactPage.useStyle({
|
|
198
199
|
overflow: "hidden"
|
|
199
200
|
});
|
|
200
|
-
const pageClassName =
|
|
201
|
+
const pageClassName = reactPage.useStyle({
|
|
201
202
|
position: "relative",
|
|
202
203
|
width: "100%"
|
|
203
204
|
});
|
|
204
|
-
const slideClassName = css.cx(
|
|
205
|
+
const slideClassName = css.cx(reactPage.useStyle({
|
|
205
206
|
display: "flex"
|
|
206
|
-
}),
|
|
207
|
+
}), reactPage.useStyle(next.useResponsiveStyle([responsivePageSize], ([pageSize2 = 1]) => ({
|
|
207
208
|
flexBasis: `${100 / pageSize2}%`,
|
|
208
209
|
maxWidth: `${100 / pageSize2}%`,
|
|
209
210
|
minWidth: `${100 / pageSize2}%`
|
|
210
|
-
}))),
|
|
211
|
+
}))), reactPage.useStyle(next.useResponsiveStyle([slideAlignment], ([alignItems = "center"]) => ({
|
|
211
212
|
alignItems
|
|
212
213
|
}))));
|
|
213
|
-
const reelClassName = css.cx(
|
|
214
|
+
const reelClassName = css.cx(reactPage.useStyle({
|
|
214
215
|
display: "flex",
|
|
215
216
|
position: "relative",
|
|
216
217
|
flexWrap: "nowrap"
|
|
217
|
-
}),
|
|
218
|
+
}), reactPage.useStyle(next.useResponsiveStyle([gap], ([gap2 = {
|
|
218
219
|
value: 0,
|
|
219
220
|
unit: "px"
|
|
220
221
|
}]) => ({
|
|
@@ -223,7 +224,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
223
224
|
padding: `0 ${`${gap2.value / 2}${gap2.unit}`}`
|
|
224
225
|
}
|
|
225
226
|
}))));
|
|
226
|
-
const arrowClassName = css.cx(
|
|
227
|
+
const arrowClassName = css.cx(reactPage.useStyle({
|
|
227
228
|
padding: 10,
|
|
228
229
|
borderRadius: "50%",
|
|
229
230
|
outline: 0,
|
|
@@ -235,7 +236,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
235
236
|
justifyContent: "center",
|
|
236
237
|
cursor: "pointer",
|
|
237
238
|
userSelect: "none"
|
|
238
|
-
}),
|
|
239
|
+
}), reactPage.useStyle(next.useResponsiveStyle([arrowBackground], ([background = {
|
|
239
240
|
swatch: {
|
|
240
241
|
hue: 0,
|
|
241
242
|
saturation: 0,
|
|
@@ -244,13 +245,13 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
244
245
|
alpha: 1
|
|
245
246
|
}]) => ({
|
|
246
247
|
background: next.colorToString(background)
|
|
247
|
-
}))),
|
|
248
|
+
}))), reactPage.useStyle({
|
|
248
249
|
svg: {
|
|
249
250
|
transition: "transform 0.15s",
|
|
250
251
|
stroke: "currentcolor"
|
|
251
252
|
}
|
|
252
253
|
}));
|
|
253
|
-
const slopClassName = css.cx(
|
|
254
|
+
const slopClassName = css.cx(reactPage.useStyle({
|
|
254
255
|
position: "absolute",
|
|
255
256
|
top: 0,
|
|
256
257
|
bottom: 0,
|
|
@@ -261,7 +262,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
261
262
|
alignItems: "center",
|
|
262
263
|
cursor: "pointer",
|
|
263
264
|
zIndex: 2
|
|
264
|
-
}),
|
|
265
|
+
}), reactPage.useStyle(next.useResponsiveStyle([arrowColor], ([color = {
|
|
265
266
|
swatch: {
|
|
266
267
|
hue: 0,
|
|
267
268
|
saturation: 0,
|
|
@@ -271,7 +272,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
271
272
|
}]) => ({
|
|
272
273
|
color: next.colorToString(color)
|
|
273
274
|
}))));
|
|
274
|
-
const leftSlopClassName = css.cx(slopClassName,
|
|
275
|
+
const leftSlopClassName = css.cx(slopClassName, reactPage.useStyle(next.useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
|
|
275
276
|
switch (position) {
|
|
276
277
|
case "inside":
|
|
277
278
|
return {
|
|
@@ -286,7 +287,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
286
287
|
transform: "translateX(calc(-50%))"
|
|
287
288
|
};
|
|
288
289
|
}
|
|
289
|
-
})),
|
|
290
|
+
})), reactPage.useStyle({
|
|
290
291
|
left: 0,
|
|
291
292
|
[`&:hover > .${arrowClassName}`]: {
|
|
292
293
|
"& > svg": {
|
|
@@ -294,7 +295,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
294
295
|
}
|
|
295
296
|
}
|
|
296
297
|
}));
|
|
297
|
-
const rightSlopClassName = css.cx(slopClassName,
|
|
298
|
+
const rightSlopClassName = css.cx(slopClassName, reactPage.useStyle(next.useResponsiveStyle([arrowPosition], ([position = "inside"]) => {
|
|
298
299
|
switch (position) {
|
|
299
300
|
case "inside":
|
|
300
301
|
return {
|
|
@@ -309,7 +310,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
309
310
|
transform: "translateX(calc(50%))"
|
|
310
311
|
};
|
|
311
312
|
}
|
|
312
|
-
})),
|
|
313
|
+
})), reactPage.useStyle({
|
|
313
314
|
right: 0,
|
|
314
315
|
[`&:hover > .${arrowClassName}`]: {
|
|
315
316
|
"& > svg": {
|
|
@@ -317,11 +318,11 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
317
318
|
}
|
|
318
319
|
}
|
|
319
320
|
}));
|
|
320
|
-
const dotsClassName = css.cx(
|
|
321
|
+
const dotsClassName = css.cx(reactPage.useStyle({
|
|
321
322
|
display: showDots ? "flex" : "none",
|
|
322
323
|
justifyContent: "center",
|
|
323
324
|
marginTop: 20
|
|
324
|
-
}),
|
|
325
|
+
}), reactPage.useStyle(next.useResponsiveStyle([dotColor], ([color = {
|
|
325
326
|
swatch: {
|
|
326
327
|
hue: 0,
|
|
327
328
|
saturation: 0,
|
|
@@ -333,11 +334,11 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
333
334
|
}))));
|
|
334
335
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
335
336
|
ref,
|
|
336
|
-
className: css.cx(
|
|
337
|
+
className: css.cx(reactPage.useStyle({
|
|
337
338
|
position: "relative",
|
|
338
339
|
display: "flex",
|
|
339
340
|
flexDirection: "column"
|
|
340
|
-
}), width, margin,
|
|
341
|
+
}), width, margin, reactPage.useStyle({
|
|
341
342
|
"&:focus": {
|
|
342
343
|
outline: 0
|
|
343
344
|
}
|
|
@@ -354,7 +355,7 @@ const Carousel = React.forwardRef(function Carousel2({
|
|
|
354
355
|
}
|
|
355
356
|
},
|
|
356
357
|
children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
357
|
-
className:
|
|
358
|
+
className: reactPage.useStyle({
|
|
358
359
|
position: "relative",
|
|
359
360
|
height: "100%"
|
|
360
361
|
}),
|
|
@@ -440,7 +441,7 @@ function Dot(_a) {
|
|
|
440
441
|
"active"
|
|
441
442
|
]);
|
|
442
443
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
|
|
443
|
-
className: css.cx(
|
|
444
|
+
className: css.cx(reactPage.useStyle({
|
|
444
445
|
position: "relative",
|
|
445
446
|
margin: "0 6px",
|
|
446
447
|
borderRadius: "50%",
|
package/dist/Carousel.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 '@use-gesture/react'\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 { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\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 breakpoints = useBreakpoints()\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: [vx] }) => {\n animation.start({ x: mx })\n swipe.current = swipePower(dx, vx)\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 useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n flexBasis: `${100 / pageSize}%`,\n maxWidth: `${100 / pageSize}%`,\n minWidth: `${100 / pageSize}%`,\n })),\n ),\n useStyle(\n useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n ),\n )\n const reelClassName = cx(\n useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n useStyle(\n useResponsiveStyle([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 useResponsiveStyle(\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 useResponsiveStyle(\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 useResponsiveStyle([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 useResponsiveStyle([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 useResponsiveStyle(\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 {/* https://github.com/framer/motion/issues/1723 */}\n {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\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={[\n {\n deviceId: getBaseBreakpoint(breakpoints).id,\n value: { value: 100, unit: '%' },\n },\n ]}\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","breakpoints","useBreakpoints","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","vx","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","useResponsiveStyle","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","getBaseBreakpoint","id","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"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 '@use-gesture/react'\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 { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\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 breakpoints = useBreakpoints()\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: [vx] }) => {\n animation.start({ x: mx })\n swipe.current = swipePower(dx, vx)\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 useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n flexBasis: `${100 / pageSize}%`,\n maxWidth: `${100 / pageSize}%`,\n minWidth: `${100 / pageSize}%`,\n })),\n ),\n useStyle(\n useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n ),\n )\n const reelClassName = cx(\n useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n useStyle(\n useResponsiveStyle([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 useResponsiveStyle(\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 useResponsiveStyle(\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 useResponsiveStyle([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 useResponsiveStyle([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 useResponsiveStyle(\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 {/* https://github.com/framer/motion/issues/1723 */}\n {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\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={[\n {\n deviceId: getBaseBreakpoint(breakpoints).id,\n value: { value: 100, unit: '%' },\n },\n ]}\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","breakpoints","useBreakpoints","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","vx","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","useResponsiveStyle","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","getBaseBreakpoint","id","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,cAAc,MAClBC,2BAAA,IAAA,OAAA;AAAA,EAAK,OAAM;AAAA,EAA6B,OAAM;AAAA,EAAK,QAAO;AAAA,EAAK,SAAQ;AAAA,EACrE,yCAAA,QAAA;AAAA,IACE,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA,EAAA,CALd;AADF,CADF;AAYA,MAAMC,eAAe,MACnBD,2BAAA,IAAA,OAAA;AAAA,EAAK,OAAM;AAAA,EAA6B,OAAM;AAAA,EAAK,QAAO;AAAA,EAAK,SAAQ;AAAA,EACrE,yCAAA,QAAA;AAAA,IACE,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA,EAAA,CALd;AADF,CADF;AAiCA,MAAME,kBAAkB;AACxB,MAAMC,aAAa,CAACC,IAAYC,aAAqBD,KAAUC,KAAAA;AAEzDC,MAAAA,WAAWC,MAAAA,WAAW,mBAC1B;AAAA,EACEC,SAAS,CADX;AAAA,EAEEC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACVC,MAAMC;AAAAA,EACNC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,GAEFC,KACA;AACMC,QAAAA,cAAcC,KAAAA;AACd,QAAA,CAACC,OAAOC,YAAYC,MAAAA,SAAS,CAAD;AAC5BC,QAAAA,QAAQC,aAAO,CAAD;AACdC,QAAAA,aAAaC,QAAAA,KAAK,GAAG5B,OAAO6B,QAAQP,KAAnB;AACjBnB,QAAAA,WAAW2B,cAAAA,cAAc1B,kBAAD,KAAwB;AAChDC,QAAAA,OAAOyB,cAAAA,cAAcxB,cAAD,KAAoB;AAC9C,QAAMyB,WAAWJ,aAAaxB;AAC9B,QAAM6B,YAAYC,KAAKC,aAAaL,SAAS1B,YAAYE,OAAO,CAA9C;AACZ8B,QAAAA,YAAYF,KAAKC,KAAKP,aAAatB,IAAvB;AAClB,QAAM+B,cAAcD,cAAc;AAC5BE,QAAAA,aAAaF,cAAcH,YAAY;AACvCM,QAAAA,WAAWC,kBACf,CAACC,iBAAyB;AACpBA,QAAAA,iBAAiB;AAAG;AAElBC,UAAAA,YAAYD,eAAeP,KAAKS,IAAIF,YAAT;AAC3BG,UAAAA,YAAYF,YAAY,IAAIzC,OAAO4C,MAAMb,QAAb,IAAyB/B,OAAO4C,MAAM,GAAGjB,UAAhB;AACrDkB,UAAAA,WAAWJ,YAAYR,KAAKa,IAAIH,UAAUd,QAAQxB,OAAO4B,KAAKS,IAAIF,YAAT,CAAlC;AAE7BjB,aAASD,QAAQuB,QAAT;AAAA,EAAA,GAEV,CAAC7C,QAAQsB,OAAOK,YAAYI,UAAU1B,IAAtC,CAV0B;AAatB0C,QAAAA,YAAYC,aAAAA,aAAa;AAAA,IAAEC,GAAG;AAAA,IAAGC,YAAY;AAAA,MAAEC,MAAM;AAAA,MAAUC,WAAW;AAAA,IAA7B;AAAA,EAAA,CAArB;AACxBC,QAAAA,WAAWC,MAAAA,WACf;AAAA,IACEC,QAAQ,CAAC;AAAA,MAAEC,UAAU,CAACC;AAAAA,MAAKC,OAAO,CAAC9D;AAAAA,MAAKC,UAAU,CAAC8D;AAAAA,UAAU;AAC3DZ,gBAAUa,MAAM;AAAA,QAAEX,GAAGQ;AAAAA,MAAAA,CAArB;AACMI,YAAAA,UAAUlE,WAAWC,IAAI+D,EAAL;AAAA,IAH9B;AAAA,IAKEG,WAAW,MAAM;AACff,gBAAUa,MAAM;AAAA,QAAEX,GAAG;AAAA,MAAA,CAArB;AAEIxB,UAAAA,MAAMoC,UAAUnE;AAAiB4C,iBAAS,CAAD;AAAA,eACpCb,MAAMoC,UAAU,CAACnE;AAAiB4C,iBAAS,EAAD;AAAA,IACpD;AAAA,EAAA,GAEH;AAAA,IACEyB,MAAM;AAAA,MACJC,MAAM;AAAA,MACNC,QAAQ;AAAA,QAAEC,MAAM;AAAA,QAAGC,OAAO;AAAA,MAFtB;AAAA,MAGJC,YAAY;AAAA,IAHR;AAAA,EAAA,CAdiB;AAsB3BC,QAAAA,UAAU,MAAM;AACV,QAAA,CAACtD,YAAYZ,aAAa;AAAGoB,eAAS,CAAD;AAAA,EAAA,GACxC,CAACR,UAAUZ,QAAX,CAFM;AAITkE,QAAAA,UAAU,MAAM;AACd,QAAI,CAACtD;AAAU,aAAO,MAAM;AAAA,MAAA;AAEtBuD,UAAAA,aAAaC,YAAY,MAAOlC,aAAad,SAAS,CAAD,IAAMe,SAAS,CAAD,GAAMtB,QAAQ,GAAzD;AAEvB,WAAA,MAAMwD,cAAcF,UAAD;AAAA,KACzB,CAACvD,UAAUC,OAAOsB,UAAUD,UAA5B,CANM;AAQHoC,QAAAA,oBAAoBC,UAAAA,SAAS;AAAA,IAAEC,UAAU;AAAA,EAAA,CAAb;AAC5BC,QAAAA,gBAAgBF,UAAAA,SAAS;AAAA,IAAEG,UAAU;AAAA,IAAY5E,OAAO;AAAA,EAAA,CAAhC;AACxB6E,QAAAA,iBAAiBC,OACrBL,mBAAS;AAAA,IAAEM,SAAS;AAAA,EAAA,CAAZ,GACRN,UAAAA,SACEO,KAAAA,mBAAmB,CAAC7E,kBAAD,GAA+B,CAAC,CAACD,YAAW,OAAQ;AAAA,IACrE+E,WAAY,GAAE,MAAM/E;AAAAA,IACpBgF,UAAW,GAAE,MAAMhF;AAAAA,IACnBiF,UAAW,GAAE,MAAMjF;AAAAA,EAAAA,EAHH,CADZ,GAORuE,UACEO,SAAAA,wBAAmB,CAACzE,cAAD,GAA2B,CAAC,CAAC6E,aAAa,cAAe;AAAA,IAAEA;AAAAA,EAAAA,EAA5D,CADZ,CATe;AAanBC,QAAAA,gBAAgBP,OACpBL,mBAAS;AAAA,IAAEM,SAAS;AAAA,IAAQH,UAAU;AAAA,IAAYU,UAAU;AAAA,EAAA,CAApD,GACRb,UACEO,SAAAA,KAAAA,mBAAmB,CAAC1E,GAAD,GAAgB,CAAC,CAACA,OAAM;AAAA,IAAEiF,OAAO;AAAA,IAAGC,MAAM;AAAA,EAAA,OAAa;AAAA,IACxEvF,QAAS,KAAK,GAAE,CAACK,KAAIiF,QAAQ,IAAIjF,KAAIkF;AAAAA,KACnC,QAAOX,mBAAmB;AAAA,MAC1BY,SAAU,KAAK,GAAEnF,KAAIiF,QAAQ,IAAIjF,KAAIkF;AAAAA,IADX;AAAA,EAAA,EAFZ,CADZ,CAFc;AAWlBE,QAAAA,iBAAiBZ,OACrBL,mBAAS;AAAA,IACPgB,SAAS;AAAA,IACTE,cAAc;AAAA,IACdC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR7F,OAAO;AAAA,IACP8F,QAAQ;AAAA,IACRf,SAAS;AAAA,IACTK,YAAY;AAAA,IACZW,gBAAgB;AAAA,IAChBC,QAAQ;AAAA,IACRC,YAAY;AAAA,EAAA,CAXN,GAaRxB,UACEO,SAAAA,KAAAA,mBACE,CAACpE,eAAD,GACA,CAAC,CAACsF,aAAa;AAAA,IAAEC,QAAQ;AAAA,MAAEC,KAAK;AAAA,MAAGC,YAAY;AAAA,MAAGC,WAAW;AAAA,IAA9C;AAAA,IAAqDC,OAAO;AAAA,EAAA,OAAU;AAAA,IACnFL,YAAYM,mBAAcN,UAAD;AAAA,EAAA,EAHX,CADZ,GAQRzB,mBAAS;AAAA,IAAEgC,KAAK;AAAA,MAAExD,YAAY;AAAA,MAAmByD,QAAQ;AAAA,IAAzC;AAAA,EAAR,CAAA,CAtBe;AAwBnBC,QAAAA,gBAAgB7B,OACpBL,mBAAS;AAAA,IACPG,UAAU;AAAA,IACVgC,KAAK;AAAA,IACLC,QAAQ;AAAA,IAER9B,SAAS;AAAA,IACI,aAAA;AAAA,MACXA,SAAS;AAAA,IAPJ;AAAA,IAUPK,YAAY;AAAA,IACZY,QAAQ;AAAA,IACRc,QAAQ;AAAA,EAAA,CAZF,GAcRrC,UACEO,SAAAA,KAAAA,mBACE,CAACrE,UAAD,GACA,CAAC,CAACoG,QAAQ;AAAA,IAAEZ,QAAQ;AAAA,MAAEC,KAAK;AAAA,MAAGC,YAAY;AAAA,MAAGC,WAAW;AAAA,IAA9C;AAAA,IAAmDC,OAAO;AAAA,EAAA,OAAU;AAAA,IAC5EQ,OAAOP,mBAAcO,KAAD;AAAA,EAAA,EAHN,CADZ,CAfc;AAwBlBC,QAAAA,oBAAoBlC,IAAAA,GACxB6B,eACAlC,mBACEO,KAAAA,mBAAmB,CAACtE,aAAD,GAA0B,CAAC,CAACkE,WAAW,cAAc;AAC9DA,YAAAA;AAAAA,WACD;AACI,eAAA;AAAA,UAAEqC,WAAW;AAAA,QAAA;AAAA,WAEjB;AACI,eAAA;AAAA,UAAEA,WAAW;AAAA,QAAA;AAAA;AAGb,eAAA;AAAA,UAAEA,WAAW;AAAA,QAAA;AAAA;AAAA,EAApB,CATY,CADZ,GAcRxC,UAAAA,SAAS;AAAA,IACPR,MAAM;AAAA,KAEJ,cAAayB,mBAAmB;AAAA,MACrB,WAAA;AAAA,QACTuB,WAAW;AAAA,MADF;AAAA,IADqB;AAAA,EAH5B,CAAA,CAhBkB;AA0BtBC,QAAAA,qBAAqBpC,IAAAA,GACzB6B,eACAlC,mBACEO,KAAAA,mBAAmB,CAACtE,aAAD,GAA0B,CAAC,CAACkE,WAAW,cAAc;AAC9DA,YAAAA;AAAAA,WACD;AACI,eAAA;AAAA,UAAEqC,WAAW;AAAA,QAAA;AAAA,WAEjB;AACI,eAAA;AAAA,UAAEA,WAAW;AAAA,QAAA;AAAA;AAGb,eAAA;AAAA,UAAEA,WAAW;AAAA,QAAA;AAAA;AAAA,EAApB,CATY,CADZ,GAcRxC,UAAAA,SAAS;AAAA,IACPP,OAAO;AAAA,KAEL,cAAawB,mBAAmB;AAAA,MACrB,WAAA;AAAA,QACTuB,WAAW;AAAA,MADF;AAAA,IADqB;AAAA,EAH5B,CAAA,CAhBmB;AA0BvBE,QAAAA,gBAAgBrC,OACpBL,mBAAS;AAAA,IAAEM,SAASvE,WAAW,SAAS;AAAA,IAAQuF,gBAAgB;AAAA,IAAUqB,WAAW;AAAA,EAAA,CAA7E,GACR3C,UACEO,SAAAA,KAAAA,mBACE,CAACnE,QAAD,GACA,CAAC,CAACkG,QAAQ;AAAA,IAAEZ,QAAQ;AAAA,MAAEC,KAAK;AAAA,MAAGC,YAAY;AAAA,MAAGC,WAAW;AAAA,IAA9C;AAAA,IAAmDC,OAAO;AAAA,EAAA,OAAU;AAAA,IAC5EQ,OAAOP,mBAAcO,KAAD;AAAA,EAAA,EAHN,CADZ,CAFc;AAatB,yCAAA,OAAA;AAAA,IACE;AAAA,IACA,WAAWjC,OACTL,mBAAS;AAAA,MAAEG,UAAU;AAAA,MAAYG,SAAS;AAAA,MAAQsC,eAAe;AAAA,IAAA,CAAzD,GACRrH,OACAC,QACAwE,mBAAS;AAAA,MAAa,WAAA;AAAA,QAAEmB,SAAS;AAAA,MAAX;AAAA,IAAA,CAAd,CAJG;AAAA,IAMb,UAAU;AAAA,IACV,WAAW0B,CAAK,MAAA;AACNA,cAAAA,EAAEC;AAAAA,aACH;AACHlF,mBAAS,CAAD;AACR;AAAA,aACG;AACHA,mBAAS,EAAD;AACR;AAAA;AAAA,IAhBR;AAAA,IAsBE,UAAA,CAAAmF,2BAAA,KAAA,OAAA;AAAA,MAAK,WAAW/C,UAAAA,SAAS;AAAA,QAAEG,UAAU;AAAA,QAAYkB,QAAQ;AAAA,MAAA,CAAjC;AAAA,MACtB,UAAA,CAAAvG,2BAAA,IAAA,OAAA;AAAA,QAAK,WAAWiF;AAAAA,QAAhB,UAGGjF,2BAAAA,IAAAkI,aAAA,OAAO,KAAR,iCAAgBrE,SAAhB,IAAA;AAAA,UAA4B,WAAWuB;AAAAA,UAAe,SAAS7B;AAAAA,UAC7D,UAACvD,2BAAAA,IAAAkI,aAAA,OAAO,KAAR;AAAA,YACE,WAAWpC;AAAAA,YACX,SAAS;AAAA,cAAErC,GAAI,GAAE,CAAE,OAAM9C,YAAYwB;AAAAA,YAFvC;AAAA,YAGE,YAAY;AAAA,cACVsB,GAAG;AAAA,gBACDE,MAAM;AAAA,gBACNwE,MAAM,CAAC,OAAO,MAAM,MAAM,CAApB;AAAA,gBACNC,UAAU;AAAA,cAHT;AAAA,YAJP;AAAA,YAAA,UAWG5H,OAAO6H,IAAI,CAAC;AAAA,cAAEC,OAAOC;AAAAA,cAAYP;AAAAA,kBAChChI,2BAAA,IAACkI,oBAAO,KAAR;AAAA,cACE,IAAIF;AAAAA,cAEJ,WAAW1C;AAAAA,cACX,aAAayC,CAAKA,MAAAA,EAAES,eAJtB;AAAA,cAKE,SAAST,CAAK,MAAA;AACR9F,oBAAAA,MAAMoC,YAAY;AAAG0D,oBAAES,eAAF;AAAA,cAN7B;AAAA,cAAA,yCASGC,kBAAD;AAAA,gBACE,OAAO,CACL;AAAA,kBACEC,UAAUC,kBAAAA,kBAAkB/G,WAAD,EAAcgH;AAAAA,kBACzC5C,OAAO;AAAA,oBAAEA,OAAO;AAAA,oBAAKC,MAAM;AAAA,kBAApB;AAAA,gBAAA,CAHJ;AAAA,gBAMP,MAAMsC,WAAWM;AAAAA,gBACjB,SAASN,WAAWO;AAAAA,gBACpB,MAAMP,WAAWQ;AAAAA,gBACjB,QAAQtH;AAAAA,gBACR,cAAcC;AAAAA,cAAAA,CAXhB;AAAA,YATF,GAEOsG,GAFP,CADD;AAAA,UAAA,CAXH;AAAA,QAAA,EADF;AAAA,MAAA,CAHF,GA2CAhI,2BAAA,IAAA,OAAA;AAAA,QACE,SAAS,MAAM8C,SAAS,EAAD;AAAA,QACvB,WAAW2E;AAAAA,QACX,QAAQ,CAACvG,cAAc0B;AAAAA,QAEvB,yCAAA,OAAA;AAAA,UAAK,WAAWuD;AAAAA,UAAhB,UACEnG,2BAAAA,IAAC,aAAD,EAAA;AAAA,QAAA,CADF;AAAA,MAAA,CALF,GASAA,2BAAA,IAAA,OAAA;AAAA,QACE,SAAS,MAAM8C,SAAS,CAAD;AAAA,QACvB,WAAW6E;AAAAA,QACX,QAAQ,CAACzG,cAAc2B;AAAAA,QAEvB,yCAAA,OAAA;AAAA,UAAK,WAAWsD;AAAAA,UAAhB,UACEnG,2BAAAA,IAAC,cAAD,EAAA;AAAA,QAAA,CADF;AAAA,MAAA,CA1DJ,CAAA;AAAA,IAAA,CAAA,GA+DAA,2BAAA,IAAA,OAAA;AAAA,MAAK,WAAW4H;AAAAA,MACboB,UAAAA,MAAMC,KAAK;AAAA,QAAE5G,QAAQG;AAAAA,MAAAA,CAArB,EAAkC6F,IAAI,CAACa,GAAGC,qCACxC,KAAD;AAAA,QAAa,QAAQA,MAAMxG;AAAAA,QAAW,SAAS,MAAMG,SAASqG,IAAIxG,SAAL;AAAA,MAA7D,GAAUwG,CAAV,CADD;AAAA,IAAA,CAtFL,CAAA;AAAA,EAAA,CADF;AA6FD,CAxT0B;AAmU3B,aAAa,IAAiD;AAAjD,eAAEC;AAAAA;AAAAA,IAAWC;AAAAA,MAAb,IAAwBC,wBAAxB,IAAwBA;AAAAA,IAAtBF;AAAAA,IAAWC;AAAAA;AACxB,gFAEQC;IACJ,WAAW/D,OACTL,mBAAS;AAAA,MACPG,UAAU;AAAA,MACV3E,QAAQ;AAAA,MACR0F,cAAc;AAAA,MACdK,QAAQ;AAAA,MACRhG,OAAO;AAAA,MACP8F,QAAQ;AAAA,MAEe,uBAAA;AAAA,QACrBgD,SAAS;AAAA,QACTlE,UAAU;AAAA,QACVgC,KAAK;AAAA,QACL3C,MAAM;AAAA,QACNc,SAAS;AAAA,QACTY,cAAc;AAAA,QACd1C,YAAY;AAAA,MAfP;AAAA,MAkBM,aAAA;AAAA,QACX8F,WAAW;AAAA,QACX9B,WAAW;AAAA,QACXjH,OAAO4I,SAAS,KAAK;AAAA,QACrB9C,QAAQ8C,SAAS,KAAK;AAAA,MAtBjB;AAAA,MAyBK,YAAA;AAAA,QACV1C,YAAY;AAAA,QACZe,WAAY,oCAAmC2B,SAAS,IAAI;AAAA,QAC5D5I,OAAO;AAAA,QACP8F,QAAQ;AAAA,MA7BH;AAAA,MAgCW,kBAAA;AAAA,QAChBmB,WAAY,oCAAmC2B,SAAS,IAAI;AAAA,MAD5C;AAAA,IAhCZ,CAAA,GAoCRD,SArCW;AAAA,EAAA,EAHjB;AA4CD;;"}
|
package/dist/Carousel.es.js
CHANGED
|
@@ -33,12 +33,12 @@ import { forwardRef, useState, useRef, useCallback, useEffect } from "react";
|
|
|
33
33
|
import { useAnimation, motion } from "framer-motion";
|
|
34
34
|
import { useGesture } from "@use-gesture/react";
|
|
35
35
|
import { wrap } from "@popmotion/popcorn";
|
|
36
|
-
import {
|
|
36
|
+
import { r as useBreakpoints, n as useResponsiveStyle, q as colorToString } from "./index.es.js";
|
|
37
37
|
import "use-sync-external-store/shim";
|
|
38
|
-
import "./react-page.es.js";
|
|
38
|
+
import { Z as useStyle } from "./react-page.es.js";
|
|
39
39
|
import "slate";
|
|
40
|
-
import "is-hotkey";
|
|
41
40
|
import { getBaseBreakpoint } from "./state/breakpoints.es.js";
|
|
41
|
+
import "is-hotkey";
|
|
42
42
|
import "slate-react";
|
|
43
43
|
import { u as useMediaQuery } from "./useMediaQuery.es.js";
|
|
44
44
|
import ImageComponent from "./Image.es.js";
|
|
@@ -47,21 +47,22 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
47
47
|
import "use-sync-external-store/shim/with-selector";
|
|
48
48
|
import "next/dynamic";
|
|
49
49
|
import "./actions.es.js";
|
|
50
|
-
import "@emotion/serialize";
|
|
51
|
-
import "@emotion/utils";
|
|
52
50
|
import "./text-input.es.js";
|
|
53
51
|
import "./combobox.es.js";
|
|
54
|
-
import "./select.es.js";
|
|
55
52
|
import "redux";
|
|
56
53
|
import "redux-thunk";
|
|
57
54
|
import "./types.es.js";
|
|
55
|
+
import "./deepEqual.es.js";
|
|
58
56
|
import "./box-models.es.js";
|
|
59
57
|
import "css-box-model";
|
|
60
58
|
import "color";
|
|
59
|
+
import "@emotion/serialize";
|
|
60
|
+
import "@emotion/utils";
|
|
61
61
|
import "scroll-into-view-if-needed";
|
|
62
62
|
import "react-dom";
|
|
63
63
|
import "html-react-parser";
|
|
64
64
|
import "next/head";
|
|
65
|
+
import "zod";
|
|
65
66
|
import "@emotion/server/create-instance";
|
|
66
67
|
import "next/document";
|
|
67
68
|
import "cors";
|
package/dist/Carousel.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.es.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 '@use-gesture/react'\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 { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\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 breakpoints = useBreakpoints()\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: [vx] }) => {\n animation.start({ x: mx })\n swipe.current = swipePower(dx, vx)\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 useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n flexBasis: `${100 / pageSize}%`,\n maxWidth: `${100 / pageSize}%`,\n minWidth: `${100 / pageSize}%`,\n })),\n ),\n useStyle(\n useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n ),\n )\n const reelClassName = cx(\n useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n useStyle(\n useResponsiveStyle([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 useResponsiveStyle(\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 useResponsiveStyle(\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 useResponsiveStyle([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 useResponsiveStyle([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 useResponsiveStyle(\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 {/* https://github.com/framer/motion/issues/1723 */}\n {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\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={[\n {\n deviceId: getBaseBreakpoint(breakpoints).id,\n value: { value: 100, unit: '%' },\n },\n ]}\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","breakpoints","useBreakpoints","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","vx","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","useResponsiveStyle","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","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","getBaseBreakpoint","id","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.es.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 '@use-gesture/react'\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 { useResponsiveStyle } from '../../utils/responsive-style'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../../runtimes/react'\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 breakpoints = useBreakpoints()\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: [vx] }) => {\n animation.start({ x: mx })\n swipe.current = swipePower(dx, vx)\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 useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n flexBasis: `${100 / pageSize}%`,\n maxWidth: `${100 / pageSize}%`,\n minWidth: `${100 / pageSize}%`,\n })),\n ),\n useStyle(\n useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n ),\n )\n const reelClassName = cx(\n useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n useStyle(\n useResponsiveStyle([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 useResponsiveStyle(\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 useResponsiveStyle(\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 useResponsiveStyle([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 useResponsiveStyle([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 useResponsiveStyle(\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 {/* https://github.com/framer/motion/issues/1723 */}\n {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\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={[\n {\n deviceId: getBaseBreakpoint(breakpoints).id,\n value: { value: 100, unit: '%' },\n },\n ]}\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","breakpoints","useBreakpoints","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","vx","start","current","onDragEnd","drag","axis","bounds","left","right","rubberband","useEffect","intervalId","setInterval","clearInterval","clipMaskClassName","useStyle","overflow","pageClassName","position","slideClassName","cx","display","useResponsiveStyle","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","ease","duration","map","props","imageProps","preventDefault","Image","deviceId","getBaseBreakpoint","id","file","altText","link","Array","from","_","i","className","active","restOfProps","content","boxShadow"],"mappings":"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"}
|
package/dist/Countdown.cjs.js
CHANGED
|
@@ -33,25 +33,25 @@ var __objRest = (source, exclude) => {
|
|
|
33
33
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
34
34
|
var css = require("@emotion/css");
|
|
35
35
|
var React = require("react");
|
|
36
|
+
var reactPage = require("./react-page.cjs.js");
|
|
36
37
|
var next = require("./index.cjs.js");
|
|
37
38
|
var jsxRuntime = require("react/jsx-runtime");
|
|
38
|
-
require("use-sync-external-store/shim/with-selector");
|
|
39
|
-
require("next/dynamic");
|
|
40
|
-
require("./react-page.cjs.js");
|
|
41
39
|
require("redux");
|
|
42
40
|
require("redux-thunk");
|
|
43
41
|
require("./actions.cjs.js");
|
|
44
42
|
require("./state/breakpoints.cjs.js");
|
|
43
|
+
require("@emotion/serialize");
|
|
44
|
+
require("@emotion/utils");
|
|
45
45
|
require("slate");
|
|
46
46
|
require("is-hotkey");
|
|
47
47
|
require("slate-react");
|
|
48
|
-
require("
|
|
49
|
-
require("
|
|
48
|
+
require("use-sync-external-store/shim/with-selector");
|
|
49
|
+
require("next/dynamic");
|
|
50
50
|
require("./text-input.cjs.js");
|
|
51
51
|
require("./combobox.cjs.js");
|
|
52
|
-
require("./select.cjs.js");
|
|
53
52
|
require("use-sync-external-store/shim");
|
|
54
53
|
require("./types.cjs.js");
|
|
54
|
+
require("./deepEqual.cjs.js");
|
|
55
55
|
require("./box-models.cjs.js");
|
|
56
56
|
require("css-box-model");
|
|
57
57
|
require("color");
|
|
@@ -59,6 +59,7 @@ require("scroll-into-view-if-needed");
|
|
|
59
59
|
require("react-dom");
|
|
60
60
|
require("html-react-parser");
|
|
61
61
|
require("next/head");
|
|
62
|
+
require("zod");
|
|
62
63
|
require("@emotion/server/create-instance");
|
|
63
64
|
require("next/document");
|
|
64
65
|
require("cors");
|
|
@@ -77,7 +78,7 @@ function Block(_a) {
|
|
|
77
78
|
"className"
|
|
78
79
|
]);
|
|
79
80
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
|
|
80
|
-
className: css.cx(BLOCK_CLASS_NAME,
|
|
81
|
+
className: css.cx(BLOCK_CLASS_NAME, reactPage.useStyle({
|
|
81
82
|
display: "block",
|
|
82
83
|
padding: "0.5em",
|
|
83
84
|
fontSize: "1em"
|
|
@@ -92,7 +93,7 @@ function Label(_c) {
|
|
|
92
93
|
"className"
|
|
93
94
|
]);
|
|
94
95
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
|
|
95
|
-
className: css.cx(LABEL_CLASS_NAME,
|
|
96
|
+
className: css.cx(LABEL_CLASS_NAME, reactPage.useStyle({
|
|
96
97
|
marginTop: "0.25em"
|
|
97
98
|
}), className)
|
|
98
99
|
}));
|
|
@@ -105,7 +106,7 @@ function Segment(_e) {
|
|
|
105
106
|
"className"
|
|
106
107
|
]);
|
|
107
108
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
|
|
108
|
-
className: css.cx(SEGMENT_CLASS_NAME,
|
|
109
|
+
className: css.cx(SEGMENT_CLASS_NAME, reactPage.useStyle({
|
|
109
110
|
flex: 1,
|
|
110
111
|
textAlign: "center"
|
|
111
112
|
}), className)
|
|
@@ -141,9 +142,9 @@ const Container = React.forwardRef(function Container2(_g, ref) {
|
|
|
141
142
|
]);
|
|
142
143
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({}, restOfProps), {
|
|
143
144
|
ref,
|
|
144
|
-
className: css.cx(
|
|
145
|
+
className: css.cx(reactPage.useStyle({
|
|
145
146
|
display: "flex"
|
|
146
|
-
}), width, margin,
|
|
147
|
+
}), width, margin, reactPage.useStyle(next.useResponsiveStyle([size], ([size2 = "medium"]) => {
|
|
147
148
|
switch (size2) {
|
|
148
149
|
case "small":
|
|
149
150
|
return {
|
|
@@ -167,7 +168,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
|
|
|
167
168
|
}
|
|
168
169
|
};
|
|
169
170
|
}
|
|
170
|
-
})),
|
|
171
|
+
})), reactPage.useStyle({
|
|
171
172
|
[`.${SEGMENT_CLASS_NAME}`]: next.useResponsiveStyle([gap], ([gap2]) => ({
|
|
172
173
|
margin: `0 ${gap2 == null ? 0 : `${gap2.value / 2}${gap2.unit}`}`,
|
|
173
174
|
"&:first-child": {
|
|
@@ -177,7 +178,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
|
|
|
177
178
|
marginRight: 0
|
|
178
179
|
}
|
|
179
180
|
}))
|
|
180
|
-
}),
|
|
181
|
+
}), reactPage.useStyle({
|
|
181
182
|
[`.${BLOCK_CLASS_NAME}`]: next.useResponsiveStyle([shape], ([shape2 = "rounded"]) => {
|
|
182
183
|
switch (shape2) {
|
|
183
184
|
case "pill":
|
|
@@ -194,7 +195,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
|
|
|
194
195
|
};
|
|
195
196
|
}
|
|
196
197
|
})
|
|
197
|
-
}),
|
|
198
|
+
}), reactPage.useStyle({
|
|
198
199
|
[`.${BLOCK_CLASS_NAME}`]: next.useResponsiveStyle([variant, blockColor, numberColor, numberFont], ([variant2 = "filled", blockColor2 = {
|
|
199
200
|
swatch: {
|
|
200
201
|
hue: 0,
|
|
@@ -287,7 +288,7 @@ const Container = React.forwardRef(function Container2(_g, ref) {
|
|
|
287
288
|
};
|
|
288
289
|
}
|
|
289
290
|
})
|
|
290
|
-
}),
|
|
291
|
+
}), reactPage.useStyle({
|
|
291
292
|
[`.${LABEL_CLASS_NAME}`]: next.useResponsiveStyle([labelColor, labelFont], ([labelColor2 = {
|
|
292
293
|
swatch: {
|
|
293
294
|
hue: 0,
|