npm - @makeswift/runtime - Versions diffs - 0.1.12 → 0.2.1 - Mend

@makeswift/runtime 0.1.12 → 0.2.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 (674) hide show

package/dist/Button.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.cjs.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n ElementIDValue,\n MarginValue,\n TextInputValue,\n ResponsiveSelectValue,\n ResponsiveIconRadioGroupValue,\n TextStyleValue,\n LinkValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n id?: ElementIDValue\n children?: TextInputValue\n link?: LinkValue\n variant?: ResponsiveSelectValue<ButtonVariant>\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n color?: ResponsiveColor\n textColor?: ResponsiveColor\n textStyle?: TextStyleValue\n width?: WidthValue\n margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n shouldForwardProp: prop =>\n !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n prop.toString(),\n ),\n})<{\n width: ControllerProps['width']\n margin: ControllerProps['margin']\n variant: ControllerProps['variant']\n shape: ControllerProps['shape']\n size: ControllerProps['size']\n textColor: ResponsiveValue<Color> \| null \| undefined\n color: ResponsiveValue<Color> \| null \| undefined\n textStyle: ControllerProps['textStyle']\n}>`\n display: table;\n border: 0;\n outline: 0;\n user-select: none;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n text-align: center;\n ${cssWidth('auto')}\n ${cssMargin()}\n ${p =>\n cssMediaRules(\n [p.variant, p.shape, p.size, p.textColor, p.color] as const,\n ([\n variant = 'flat',\n shape = 'rounded',\n size = 'medium',\n textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n const fontSize = {\n value: { small: 12, medium: 14, large: 18 }[size],\n unit: 'px',\n }\n\n return css`\n color: ${colorToString(textColor)};\n border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n font-size: ${`${fontSize.value}${fontSize.unit}`};\n ${{\n flat: css`\n background: ${colorToString(color)};\n border: none;\n transition: ${['color', 'background', 'border', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n outline: css`\n background: transparent;\n box-shadow: inset 0 0 0 2px ${colorToString(color)};\n transition: ${['color', 'background', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n shadow: css`\n background: ${colorToString(color)};\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.18s`)\n .join(', ')};\n\n :hover {\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);\n transform: translateY(-1px);\n }\n\n :active {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);\n transform: translateY(0px);\n }\n `,\n clear: css`\n background: transparent;\n border: none;\n\n :hover {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};\n }\n\n :active {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};\n }\n `,\n blocky: css`\n background: ${colorToString(color)};\n border-width: 1px;\n border-style: solid;\n border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.1s`)\n .join(', ')};\n\n :hover {\n transform: translateY(2px);\n box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n\n :active {\n transform: translateY(4px);\n box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n `,\n bubbly: css`\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n );\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n border-radius: inherit;\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n );\n opacity: 0;\n transition: opacity 0.15s;\n }\n\n :hover {\n :before {\n opacity: 1;\n }\n }\n\n :active {\n :before {\n opacity: 0.25;\n }\n }\n `,\n skewed: css`\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n background: ${colorToString(color)};\n transform: skewX(-12deg);\n border-radius: inherit;\n transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);\n }\n\n :hover:before {\n transform: skew(0deg);\n }\n\n :active:before {\n transform: skew(-8deg);\n }\n `,\n }[variant]}\n `\n },\n )}\n ${cssTextStyle()}\n`\n\ntype BaseProps = {\n id?: ControllerProps['id']\n children?: ReactElement \| string\n link?: ControllerProps['link']\n variant?: ControllerProps['variant']\n shape?: ControllerProps['shape']\n size?: ControllerProps['size']\n textColor?: ControllerProps['textColor']\n color?: ControllerProps['color']\n textStyle?: ControllerProps['textStyle']\n width?: ControllerProps['width']\n margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n {\n id,\n children,\n link,\n variant,\n shape,\n size,\n textColor,\n color,\n textStyle,\n width,\n margin,\n className,\n ...restOfProps\n },\n ref,\n) {\n return (\n <StyledButton\n {...restOfProps}\n ref={ref}\n id={id}\n className={className}\n // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n color={color}\n link={link}\n width={width}\n margin={margin}\n shape={shape}\n size={size}\n textColor={textColor}\n textStyle={textStyle}\n variant={variant}\n >\n {children == null ? 'Button Text' : children}\n </StyledButton>\n )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":"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"}
1	+ {"version":3,"file":"Button.cjs.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n ElementIDValue,\n MarginValue,\n TextInputValue,\n ResponsiveSelectValue,\n ResponsiveIconRadioGroupValue,\n TextStyleValue,\n LinkValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n id?: ElementIDValue\n children?: TextInputValue\n link?: LinkValue\n variant?: ResponsiveSelectValue<ButtonVariant>\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n color?: ResponsiveColor\n textColor?: ResponsiveColor\n textStyle?: TextStyleValue\n width?: WidthValue\n margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n shouldForwardProp: prop =>\n !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n prop.toString(),\n ),\n})<{\n width: ControllerProps['width']\n margin: ControllerProps['margin']\n variant: ControllerProps['variant']\n shape: ControllerProps['shape']\n size: ControllerProps['size']\n textColor: ResponsiveValue<Color> \| null \| undefined\n color: ResponsiveValue<Color> \| null \| undefined\n textStyle: ControllerProps['textStyle']\n}>`\n display: table;\n border: 0;\n outline: 0;\n user-select: none;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n text-align: center;\n ${cssWidth('auto')}\n ${cssMargin()}\n ${p =>\n cssMediaRules(\n [p.variant, p.shape, p.size, p.textColor, p.color] as const,\n ([\n variant = 'flat',\n shape = 'rounded',\n size = 'medium',\n textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n const fontSize = {\n value: { small: 12, medium: 14, large: 18 }[size],\n unit: 'px',\n }\n\n return css`\n color: ${colorToString(textColor)};\n border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n font-size: ${`${fontSize.value}${fontSize.unit}`};\n ${{\n flat: css`\n background: ${colorToString(color)};\n border: none;\n transition: ${['color', 'background', 'border', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n outline: css`\n background: transparent;\n box-shadow: inset 0 0 0 2px ${colorToString(color)};\n transition: ${['color', 'background', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n shadow: css`\n background: ${colorToString(color)};\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.18s`)\n .join(', ')};\n\n :hover {\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);\n transform: translateY(-1px);\n }\n\n :active {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);\n transform: translateY(0px);\n }\n `,\n clear: css`\n background: transparent;\n border: none;\n\n :hover {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};\n }\n\n :active {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};\n }\n `,\n blocky: css`\n background: ${colorToString(color)};\n border-width: 1px;\n border-style: solid;\n border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.1s`)\n .join(', ')};\n\n :hover {\n transform: translateY(2px);\n box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n\n :active {\n transform: translateY(4px);\n box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n `,\n bubbly: css`\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n );\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n border-radius: inherit;\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n );\n opacity: 0;\n transition: opacity 0.15s;\n }\n\n :hover {\n :before {\n opacity: 1;\n }\n }\n\n :active {\n :before {\n opacity: 0.25;\n }\n }\n `,\n skewed: css`\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n background: ${colorToString(color)};\n transform: skewX(-12deg);\n border-radius: inherit;\n transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);\n }\n\n :hover:before {\n transform: skew(0deg);\n }\n\n :active:before {\n transform: skew(-8deg);\n }\n `,\n }[variant]}\n `\n },\n )}\n ${cssTextStyle()}\n`\n\ntype BaseProps = {\n id?: ControllerProps['id']\n children?: ReactElement \| string\n link?: ControllerProps['link']\n variant?: ControllerProps['variant']\n shape?: ControllerProps['shape']\n size?: ControllerProps['size']\n textColor?: ControllerProps['textColor']\n color?: ControllerProps['color']\n textStyle?: ControllerProps['textStyle']\n width?: ControllerProps['width']\n margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n {\n id,\n children,\n link,\n variant,\n shape,\n size,\n textColor,\n color,\n textStyle,\n width,\n margin,\n className,\n ...restOfProps\n },\n ref,\n) {\n return (\n <StyledButton\n {...restOfProps}\n ref={ref}\n id={id}\n className={className}\n // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n color={color}\n link={link}\n width={width}\n margin={margin}\n shape={shape}\n size={size}\n textColor={textColor}\n textStyle={textStyle}\n variant={variant}\n >\n {children == null ? 'Button Text' : children}\n </StyledButton>\n )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":"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"}

package/dist/Button.es.js CHANGED Viewed

@@ -45,21 +45,25 @@ import "./image.es.js";
 import "./color.es.js";
 import "./slot.es.js";
 import "next/dynamic";
-import "next/document";
-import "slate";
-import "@emotion/server/create-instance";
-import "@emotion/css";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
+import "slate";
 import "./graphql.es.js";
-import "./text-input.es.js";
 import "./shape.es.js";
+import "./text-input.es.js";
+import "@emotion/css";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
 import "css-box-model";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+import "set-cookie-parser";
 import "uuid/v4";
 import "corporate-ipsum";
 import "next/link";

package/dist/Button.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.es.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n ElementIDValue,\n MarginValue,\n TextInputValue,\n ResponsiveSelectValue,\n ResponsiveIconRadioGroupValue,\n TextStyleValue,\n LinkValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n id?: ElementIDValue\n children?: TextInputValue\n link?: LinkValue\n variant?: ResponsiveSelectValue<ButtonVariant>\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n color?: ResponsiveColor\n textColor?: ResponsiveColor\n textStyle?: TextStyleValue\n width?: WidthValue\n margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n shouldForwardProp: prop =>\n !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n prop.toString(),\n ),\n})<{\n width: ControllerProps['width']\n margin: ControllerProps['margin']\n variant: ControllerProps['variant']\n shape: ControllerProps['shape']\n size: ControllerProps['size']\n textColor: ResponsiveValue<Color> \| null \| undefined\n color: ResponsiveValue<Color> \| null \| undefined\n textStyle: ControllerProps['textStyle']\n}>`\n display: table;\n border: 0;\n outline: 0;\n user-select: none;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n text-align: center;\n ${cssWidth('auto')}\n ${cssMargin()}\n ${p =>\n cssMediaRules(\n [p.variant, p.shape, p.size, p.textColor, p.color] as const,\n ([\n variant = 'flat',\n shape = 'rounded',\n size = 'medium',\n textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n const fontSize = {\n value: { small: 12, medium: 14, large: 18 }[size],\n unit: 'px',\n }\n\n return css`\n color: ${colorToString(textColor)};\n border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n font-size: ${`${fontSize.value}${fontSize.unit}`};\n ${{\n flat: css`\n background: ${colorToString(color)};\n border: none;\n transition: ${['color', 'background', 'border', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n outline: css`\n background: transparent;\n box-shadow: inset 0 0 0 2px ${colorToString(color)};\n transition: ${['color', 'background', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n shadow: css`\n background: ${colorToString(color)};\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.18s`)\n .join(', ')};\n\n :hover {\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);\n transform: translateY(-1px);\n }\n\n :active {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);\n transform: translateY(0px);\n }\n `,\n clear: css`\n background: transparent;\n border: none;\n\n :hover {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};\n }\n\n :active {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};\n }\n `,\n blocky: css`\n background: ${colorToString(color)};\n border-width: 1px;\n border-style: solid;\n border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.1s`)\n .join(', ')};\n\n :hover {\n transform: translateY(2px);\n box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n\n :active {\n transform: translateY(4px);\n box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n `,\n bubbly: css`\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n );\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n border-radius: inherit;\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n );\n opacity: 0;\n transition: opacity 0.15s;\n }\n\n :hover {\n :before {\n opacity: 1;\n }\n }\n\n :active {\n :before {\n opacity: 0.25;\n }\n }\n `,\n skewed: css`\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n background: ${colorToString(color)};\n transform: skewX(-12deg);\n border-radius: inherit;\n transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);\n }\n\n :hover:before {\n transform: skew(0deg);\n }\n\n :active:before {\n transform: skew(-8deg);\n }\n `,\n }[variant]}\n `\n },\n )}\n ${cssTextStyle()}\n`\n\ntype BaseProps = {\n id?: ControllerProps['id']\n children?: ReactElement \| string\n link?: ControllerProps['link']\n variant?: ControllerProps['variant']\n shape?: ControllerProps['shape']\n size?: ControllerProps['size']\n textColor?: ControllerProps['textColor']\n color?: ControllerProps['color']\n textStyle?: ControllerProps['textStyle']\n width?: ControllerProps['width']\n margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n {\n id,\n children,\n link,\n variant,\n shape,\n size,\n textColor,\n color,\n textStyle,\n width,\n margin,\n className,\n ...restOfProps\n },\n ref,\n) {\n return (\n <StyledButton\n {...restOfProps}\n ref={ref}\n id={id}\n className={className}\n // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n color={color}\n link={link}\n width={width}\n margin={margin}\n shape={shape}\n size={size}\n textColor={textColor}\n textStyle={textStyle}\n variant={variant}\n >\n {children == null ? 'Button Text' : children}\n </StyledButton>\n )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":"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"}
1	+ {"version":3,"file":"Button.es.js","sources":["../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import { ReactElement, ComponentPropsWithoutRef, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport ColorHelper from 'color'\n\nimport { cssMediaRules, cssMargin, cssTextStyle, cssWidth } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n ElementIDValue,\n MarginValue,\n TextInputValue,\n ResponsiveSelectValue,\n ResponsiveIconRadioGroupValue,\n TextStyleValue,\n LinkValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { ButtonVariant } from './contants'\n\ntype ControllerProps = {\n id?: ElementIDValue\n children?: TextInputValue\n link?: LinkValue\n variant?: ResponsiveSelectValue<ButtonVariant>\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n color?: ResponsiveColor\n textColor?: ResponsiveColor\n textStyle?: TextStyleValue\n width?: WidthValue\n margin?: MarginValue\n}\n\nconst StyledButton = styled(Link).withConfig({\n shouldForwardProp: prop =>\n !['width', 'margin', 'variant', 'shape', 'size', 'textColor', 'color', 'textStyle'].includes(\n prop.toString(),\n ),\n})<{\n width: ControllerProps['width']\n margin: ControllerProps['margin']\n variant: ControllerProps['variant']\n shape: ControllerProps['shape']\n size: ControllerProps['size']\n textColor: ResponsiveValue<Color> \| null \| undefined\n color: ResponsiveValue<Color> \| null \| undefined\n textStyle: ControllerProps['textStyle']\n}>`\n display: table;\n border: 0;\n outline: 0;\n user-select: none;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n text-align: center;\n ${cssWidth('auto')}\n ${cssMargin()}\n ${p =>\n cssMediaRules(\n [p.variant, p.shape, p.size, p.textColor, p.color] as const,\n ([\n variant = 'flat',\n shape = 'rounded',\n size = 'medium',\n textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n ]) => {\n const fontSize = {\n value: { small: 12, medium: 14, large: 18 }[size],\n unit: 'px',\n }\n\n return css`\n color: ${colorToString(textColor)};\n border-radius: ${{ square: 0, rounded: 4, pill: 500 }[shape]}px;\n padding: ${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]};\n font-size: ${`${fontSize.value}${fontSize.unit}`};\n ${{\n flat: css`\n background: ${colorToString(color)};\n border: none;\n transition: ${['color', 'background', 'border', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n background: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n background: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n outline: css`\n background: transparent;\n box-shadow: inset 0 0 0 2px ${colorToString(color)};\n transition: ${['color', 'background', 'box-shadow']\n .map(property => `${property} 0.15s ease-in-out`)\n .join(', ')};\n\n :hover {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.1).hex()};\n }\n\n :active {\n box-shadow: inset 0 0 0 2px ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n color: ${ColorHelper(colorToString(color)).darken(0.15).hex()};\n }\n `,\n shadow: css`\n background: ${colorToString(color)};\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.18s`)\n .join(', ')};\n\n :hover {\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3);\n transform: translateY(-1px);\n }\n\n :active {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3);\n transform: translateY(0px);\n }\n `,\n clear: css`\n background: transparent;\n border: none;\n\n :hover {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.5).toString()};\n }\n\n :active {\n color: ${ColorHelper(colorToString(textColor)).alpha(0.6).toString()};\n }\n `,\n blocky: css`\n background: ${colorToString(color)};\n border-width: 1px;\n border-style: solid;\n border-color: ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n box-shadow: 0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n transition: ${['transform', 'box-shadow']\n .map(property => `${property} 0.1s`)\n .join(', ')};\n\n :hover {\n transform: translateY(2px);\n box-shadow: 0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n\n :active {\n transform: translateY(4px);\n box-shadow: 0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()};\n }\n `,\n bubbly: css`\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n );\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n border-radius: inherit;\n background: linear-gradient(\n 180deg,\n ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n );\n opacity: 0;\n transition: opacity 0.15s;\n }\n\n :hover {\n :before {\n opacity: 1;\n }\n }\n\n :active {\n :before {\n opacity: 0.25;\n }\n }\n `,\n skewed: css`\n position: relative;\n z-index: 0;\n\n :before {\n position: absolute;\n content: '';\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n background: ${colorToString(color)};\n transform: skewX(-12deg);\n border-radius: inherit;\n transition: transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75);\n }\n\n :hover:before {\n transform: skew(0deg);\n }\n\n :active:before {\n transform: skew(-8deg);\n }\n `,\n }[variant]}\n `\n },\n )}\n ${cssTextStyle()}\n`\n\ntype BaseProps = {\n id?: ControllerProps['id']\n children?: ReactElement \| string\n link?: ControllerProps['link']\n variant?: ControllerProps['variant']\n shape?: ControllerProps['shape']\n size?: ControllerProps['size']\n textColor?: ControllerProps['textColor']\n color?: ControllerProps['color']\n textStyle?: ControllerProps['textStyle']\n width?: ControllerProps['width']\n margin?: ControllerProps['margin']\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof StyledButton>, keyof BaseProps>\n\nconst Button = forwardRef<HTMLAnchorElement, Props>(function Button(\n {\n id,\n children,\n link,\n variant,\n shape,\n size,\n textColor,\n color,\n textStyle,\n width,\n margin,\n className,\n ...restOfProps\n },\n ref,\n) {\n return (\n <StyledButton\n {...restOfProps}\n ref={ref}\n id={id}\n className={className}\n // @ts-expect-error: HTMLAnchorElement `color` attribute conflicts with prop\n color={color}\n link={link}\n width={width}\n margin={margin}\n shape={shape}\n size={size}\n textColor={textColor}\n textStyle={textStyle}\n variant={variant}\n >\n {children == null ? 'Button Text' : children}\n </StyledButton>\n )\n})\n\nexport default Button\n"],"names":["StyledButton","styled","Link","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","p","cssMediaRules","variant","shape","size","textColor","color","swatch","hue","saturation","lightness","alpha","fontSize","value","small","medium","large","unit","css","colorToString","square","rounded","pill","flat","map","property","join","ColorHelper","darken","hex","outline","shadow","clear","blocky","bubbly","lighten","saturate","skewed","cssTextStyle","Button","forwardRef","ref","id","children","link","textStyle","width","margin","className","restOfProps"],"mappings":"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"}

package/dist/Carousel.cjs.js CHANGED Viewed

@@ -25,7 +25,7 @@ var framerMotion = require("framer-motion");
 var reactUseGesture = require("react-use-gesture");
 var popcorn = require("@popmotion/popcorn");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
-var next = require("./index.cjs.js");
+var index = require("./index.cjs.js");
 var useMediaQuery = require("./useMediaQuery.cjs.js");
 var Image = require("./Image.cjs2.js");
 var jsxRuntime = require("react/jsx-runtime");
@@ -38,15 +38,13 @@ require("./image.cjs.js");
 require("./color.cjs.js");
 require("./slot.cjs.js");
 require("next/dynamic");
-require("next/document");
-require("slate");
-require("@emotion/server/create-instance");
-require("@emotion/css");
 require("@apollo/client");
 require("@apollo/client/link/batch-http");
+require("slate");
 require("./graphql.cjs.js");
-require("./text-input.cjs.js");
 require("./shape.cjs.js");
+require("./text-input.cjs.js");
+require("@emotion/css");
 require("color");
 require("scroll-into-view-if-needed");
 require("./box-models.cjs.js");
@@ -54,6 +52,12 @@ require("css-box-model");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
 require("uuid/v4");
 require("corporate-ipsum");
 require("next/image");
@@ -130,7 +134,7 @@ const Arrow = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        background: ${next.colorToString(background)};
+        background: ${index.colorToString(background)};
       `)}
   svg {
@@ -156,7 +160,7 @@ const Slop = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        color: ${next.colorToString(color)};
+        color: ${index.colorToString(color)};
       `)}
 `;
 const Slide = styled__default["default"](framerMotion.motion.div).withConfig({
@@ -265,7 +269,7 @@ const Dots = styled__default["default"].div.withConfig({
   },
   alpha: 1
 }]) => styled.css`
-        color: ${next.colorToString(color)};
+        color: ${index.colorToString(color)};
       `)}
 `;
 const Dot = styled__default["default"].div.withConfig({
@@ -328,9 +332,9 @@ const Carousel = React.forwardRef(function Carousel2({
   slideBorder,
   slideBorderRadius
 }, ref) {
-  const [index, setIndex] = React.useState(0);
+  const [index2, setIndex] = React.useState(0);
   const swipe = React.useRef(0);
-  const startIndex = popcorn.wrap(0, images.length, index);
+  const startIndex = popcorn.wrap(0, images.length, index2);
   const pageSize = useMediaQuery.useMediaQuery(responsivePageSize) || 1;
   const step = useMediaQuery.useMediaQuery(responsiveStep) || 1;
   const endIndex = startIndex + pageSize;
@@ -344,8 +348,8 @@ const Carousel = React.forwardRef(function Carousel2({
     const direction = pageDistance / Math.abs(pageDistance);
     const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex);
     const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance));
-    setIndex(index + distance);
-  }, [images, index, startIndex, endIndex, step]);
+    setIndex(index2 + distance);
+  }, [images, index2, startIndex, endIndex, step]);
   const animation = framerMotion.useAnimation({
     x: 0,
     transition: {

package/dist/Carousel.cjs.js.map CHANGED Viewed

	@@ -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 => {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,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,CAAA;AAYF,MAAME,YAAYC,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AA0BzB,MAAMC,UAAUF,gBAAAA,WAAOC,IAAIE,WAAW;AAAA,EACpCC,mBAAmBC,UAAQ,CAAC,CAAC,UAAU,OAAX,EAAoBC,SAASD,IAA7B;AADQ,CAAtB;AAAA;AAAA;AAAA;AAAA,IAMZE,cAAAA,SAAS,OAAD;AAAA,IACRC,cAAY,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhB,MAAMC,QAAQT,gBAAAA,WAAOC,IAAIE,WAAW;AAAA,EAClCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,YAAD,EAAeC,SAASD,IAAxB;AADM,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcVK,CAAAA,MACAC,4BACE,CAACD,EAAEE,UAAH,GACA,CAAC,CAACA,aAAa;AAAA,EAAEC,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,OAAqEC,OAAAA;AAAAA,sBACpEC,KAAAA,cAAcP,UAAD;AAAA,OAHlB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAajB,MAAMQ,OAAOpB,gBAAAA,WAAOC,IAAIE,WAAW;AAAA,EACjCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,OAAD,EAAUC,SAASD,IAAnB;AADK,CAAtB;AAAA;AAAA;AAAA;AAAA,aAQAgB,CAAAA,UAAUA,MAAMC,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA,IAI3CZ,CAAAA,MACAC,4BACE,CAACD,EAAEa,KAAH,GACA,CAAC,CAACA,QAAQ;AAAA,EAAEV,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OAAmEC,OAAAA;AAAAA,iBAClEC,KAAAA,cAAcI,KAAD;AAAA,OAHb;AAAA;AAQjB,MAAMC,QAAQxB,gBAAAA,WAAOyB,aAAAA,OAAOxB,GAAR,EAAaE,WAAW;AAAA,EAC1CC,mBAAmBC,UAAQ,CAAC,CAAC,YAAY,YAAb,EAA2BC,SAASD,IAApC;AADc,CAA9B;AAAA;AAAA,IAOVK,CAAAA,MACAC,4BACE,CAACD,EAAEgB,QAAH,GACA,CAAC,CAACA,WAAW,OAAOR;sBACJ,MAAMQ;AAAAA,qBACP,MAAMA;AAAAA,qBACN,MAAMA;AAAAA,OALV;AAAA;AAAA,IASbhB,CAAAA,MAAKC,4BAAc,CAACD,EAAEiB,UAAH,GAAgB,CAAC,CAACA,aAAa,cAAe;AAAA,EAAEA;AAAF,EAA/C;AAAA;AAGtB,MAAMC,OAAO5B,gBAAAA,WAAOyB,aAAAA,OAAOxB,GAAR,EAAaE,WAAW;AAAA,EACzCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,KAAD,EAAQC,SAASD,IAAjB;AADa,CAA9B;AAAA;AAAA;AAAA;AAAA,IAMTK,CAAAA,MACAC,4BACE,CAACD,EAAEmB,GAAH,GACA,CAAC,CAACA,MAAM;AAAA,EAAEC,OAAO;AAAA,EAAGC,MAAM;AAAlB,OAA8Bb,OAAAA;AAAAA,oBACvB,GAAE,CAACW,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA,cAE9BP;AAAAA,uBACU,GAAEK,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA,OAN7B;AAAA;AAYjB,MAAMC,OAAOhC,gBAAOyB,WAAAA,oBAAOxB,GAAR;AAAA;AAAA;AAAA;AAKnB,MAAMgC,WAAWjC,gBAAAA,WAAOoB,IAAD,EAAOjB,WAAW;AAAA,EACvCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAD,EAAaC,SAASD,IAAtB;AADW,CAAxB;AAAA,IAGbK,CAAAA,MACAC,4BAAc,CAACD,EAAEwB,QAAH,GAAuB,CAAC,CAACA,WAAW,cAAc;AACtDA,UAAAA;AAAAA,SACD;AACIhB,aAAAA;;;SAGJ;AACIA,aAAAA;;;;AAIAA,aAAAA;;;;AAIZ,CAfY;AAAA;AAAA;AAAA,cAkBHT;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAOd,MAAM0B,YAAYnC,gBAAAA,WAAOoB,IAAD,EAAOjB,WAAW;AAAA,EACxCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAD,EAAaC,SAASD,IAAtB;AADY,CAAxB;AAAA,IAGdK,CAAAA,MACAC,4BAAc,CAACD,EAAEwB,QAAH,GAAuB,CAAC,CAACA,WAAW,cAAc;AACtDA,UAAAA;AAAAA,SACD;AACIhB,aAAAA;;;SAGJ;AACIA,aAAAA;;;;AAIAA,aAAAA;;;;AAIZ,CAfY;AAAA;AAAA;AAAA,cAkBHT;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAOd,MAAM2B,WAAWpC,gBAAOC,WAAAA;AAAAA;AAAAA;AAIxB,MAAMoC,OAAOrC,gBAAAA,WAAOC,IAAIE,WAAW;AAAA,EACjCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,OAAD,EAAUC,SAASD,IAAnB;AADK,CAAtB;AAAA,aAGAgB,CAAAA,UAAUA,MAAMC,SAAS,SAAS;AAAA;AAAA;AAAA,IAG3CZ,CAAAA,MACAC,4BACE,CAACD,EAAEa,KAAH,GACA,CAAC,CAACA,QAAQ;AAAA,EAAEV,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OAAmEC,OAAAA;AAAAA,iBAClEC,KAAAA,cAAcI,KAAD;AAAA,OAHb;AAAA;AAQjB,MAAMe,MAAMtC,gBAAAA,WAAOC,IAAIE,WAAW;AAAA,EAChCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,QAAD,EAAWC,SAASD,IAApB;AADI,CAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAwBCgB,CAAAA,UAAUA,MAAMkB,SAAS,KAAK;AAAA,cAC7BlB,CAAAA,UAAUA,MAAMkB,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kDAKMlB,CAAAA,UAAUA,MAAMkB,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kDAM7BlB,CAAAA,UAAUA,MAAMkB,SAAS,IAAI;AAAA;AAAA;AAI/E,MAAMC,kBAAkB;AACxB,MAAMC,aAAa,CAACC,IAAYC,aAAqBD,KAAUC,KAAAA;AAEzDC,MAAAA,WAAWC,MAAAA,WAAW,mBAC1B;AAAA,EACEC,SAAS,CADX;AAAA,EAEEC;AAAAA,EACAC;AAAAA,EACAtB,UAAUuB;AAAAA,EACVC,MAAMC;AAAAA,EACNtB;AAAAA,EACAuB;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;AACM,QAAA,CAACC,OAAOC,YAAYC,MAAAA,SAAS,CAAD;AAC5BC,QAAAA,QAAQC,aAAO,CAAD;AACdC,QAAAA,aAAaC,QAAAA,KAAK,GAAGxB,OAAOyB,QAAQP,KAAnB;AACjBtC,QAAAA,WAAW8C,cAAAA,cAAcvB,kBAAD,KAAwB;AAChDC,QAAAA,OAAOsB,cAAAA,cAAcrB,cAAD,KAAoB;AAC9C,QAAMsB,WAAWJ,aAAa3C;AAC9B,QAAMgD,YAAYC,KAAKC,aAAaL,SAAS7C,YAAYwB,OAAO,CAA9C;AACZ2B,QAAAA,YAAYF,KAAKC,KAAKP,aAAanB,IAAvB;AAClB,QAAM4B,cAAcD,cAAc;AAC5BE,QAAAA,aAAaF,cAAcH,YAAY;AACvCM,QAAAA,WAAWC,kBACfC,CAAgB,iBAAA;AACVA,QAAAA,iBAAiB;AAAG;AAElBC,UAAAA,YAAYD,eAAeP,KAAKS,IAAIF,YAAT;AAC3BG,UAAAA,YAAYF,YAAY,IAAIrC,OAAOwC,MAAMb,QAAb,IAAyB3B,OAAOwC,MAAM,GAAGjB,UAAhB;AACrDkB,UAAAA,WAAWJ,YAAYR,KAAKa,IAAIH,UAAUd,QAAQrB,OAAOyB,KAAKS,IAAIF,YAAT,CAAlC;AAE7BjB,aAASD,QAAQuB,QAAT;AAAA,EAAA,GAEV,CAACzC,QAAQkB,OAAOK,YAAYI,UAAUvB,IAAtC,CAV0B;AAatBuC,QAAAA,YAAYC,aAAAA,aAAa;AAAA,IAAEC,GAAG;AAAA,IAAGC,YAAY;AAAA,MAAEC,MAAM;AAAA,MAAUC,WAAW;AAAA,IAA7B;AAAA,EAAA,CAArB;AACxBC,QAAAA,WAAWC,gBAAAA,WACf;AAAA,IACEC,QAAQ,CAAC;AAAA,MAAEC,UAAU,CAACC;AAAAA,MAAKC,OAAO,CAAC1D;AAAAA,MAAKC;AAAAA,UAAe;AACrD8C,gBAAUY,MAAM;AAAA,QAAEV,GAAGQ;AAAAA,MAAAA,CAArB;AACMG,YAAAA,UAAU7D,WAAWC,IAAIC,QAAL;AAAA,IAH9B;AAAA,IAKE4D,WAAW,MAAM;AACfd,gBAAUY,MAAM;AAAA,QAAEV,GAAG;AAAA,MAAA,CAArB;AAEIxB,UAAAA,MAAMmC,UAAU9D;AAAiBwC,iBAAS,CAAD;AAAA,eACpCb,MAAMmC,UAAU,CAAC9D;AAAiBwC,iBAAS,EAAD;AAAA,IACpD;AAAA,EAAA,GAEH;AAAA,IACEwB,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,CAACnD,YAAYjC,aAAa;AAAGuC,eAAS,CAAD;AAAA,EAAA,GACxC,CAACN,UAAUjC,QAAX,CAFM;AAIToF,QAAAA,UAAU,MAAM;AACd,QAAI,CAACnD;AAAU,aAAO,MAAM;AAAA,MAAA;AAEtBoD,UAAAA,aAAaC,YAAY,MAAOjC,aAAad,SAAS,CAAD,IAAMe,SAAS,CAAD,GAAMpB,QAAQ,GAAzD;AAEvB,WAAA,MAAMqD,cAAcF,UAAD;AAAA,KACzB,CAACpD,UAAUC,OAAOoB,UAAUD,UAA5B,CANM;AAQT,yCACG,SAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAWmC,CAAK,MAAA;AACNA,cAAAA,EAAEC;AAAAA,aACH;AACHnC,mBAAS,CAAD;AACR;AAAA,aACG;AACHA,mBAAS,EAAD;AACR;AAAA;AAAA,IAZR;AAAA,IAAA,UAAA,CAiBEoC,2BAAA,KAAC,WAAD;AAAA,MAAA,UAAA,CACEvH,2BAAA,IAAC,UAAD;AAAA,QAAA,yCACG,MAASkG,iCAAAA,SAAV,IAAUA;AAAAA,UAAY,SAASN;AAAAA,UAA/B,yCACG,MAAD;AAAA,YACE;AAAA,YACA,SAAS;AAAA,cAAEE,GAAI,GAAE,CAAE,OAAMjE,YAAY2C;AAAAA,YAFvC;AAAA,YAGE,YAAY;AAAA,cACVsB,GAAG;AAAA,gBACDE,MAAM;AAAA,gBACNwB,MAAM,CAAC,OAAO,MAAM,MAAM,CAApB;AAAA,gBACNC,UAAU;AAAA,cAHT;AAAA,YAJP;AAAA,YAAA,UAWGxE,OAAOyE,IAAI,CAAC;AAAA,cAAElG,OAAOmG;AAAAA,cAAYL;AAAAA,iDAC/B,OAAD;AAAA,cACE,IAAIA;AAAAA,cAEJ,UAAUlE;AAAAA,cACV,YAAYG;AAAAA,cACZ,aAAa8D,CAAKA,MAAAA,EAAEO,eALtB;AAAA,cAME,SAASP,CAAK,MAAA;AACR/C,oBAAAA,MAAMmC,YAAY;AAAGY,oBAAEO,eAAF;AAAA,cAP7B;AAAA,cAAA,yCAUGC,kBAAD;AAAA,gBACE,OAAO,CAAC;AAAA,kBAAEC,UAAU;AAAA,kBAAW7F,OAAO;AAAA,oBAAEA,OAAO;AAAA,oBAAKC,MAAM;AAAA,kBAApB;AAAA,gBAAA,CAA/B;AAAA,gBACP,MAAMyF,WAAWI;AAAAA,gBACjB,SAASJ,WAAWK;AAAAA,gBACpB,MAAML,WAAWM;AAAAA,gBACjB,QAAQjE;AAAAA,gBACR,cAAcC;AAAAA,cAAAA,CANhB;AAAA,YAVF,GAEOqD,GAFP,CADD;AAAA,UAAA,CAXH;AAAA,QAAA,EADF;AAAA,MAAA,CAFJ,GAsCEtH,2BAAA,IAAC,UAAD;AAAA,QACE,SAAS,MAAMmF,SAAS,EAAD;AAAA,QACvB,UAAUzB;AAAAA,QAEV,OAAOC;AAAAA,QACP,QAAQ,CAACF,cAAcwB;AAAAA,QALzB,yCAOG,OAAD;AAAA,UAAO,YAAYrB;AAAAA,UAAnB,UACE5D,2BAAAA,IAAC,aAAD,EAAA;AAAA,QAAA,CADF;AAAA,MAAA,CA7CJ,GAiDEA,2BAAA,IAAC,WAAD;AAAA,QACE,SAAS,MAAMmF,SAAS,CAAD;AAAA,QACvB,UAAUzB;AAAAA,QAEV,OAAOC;AAAAA,QACP,QAAQ,CAACF,cAAcyB;AAAAA,QALzB,yCAOG,OAAD;AAAA,UAAO,YAAYtB;AAAAA,UAAnB,UACE5D,2BAAAA,IAAC,cAAD,EAAA;AAAA,QAAA,CADF;AAAA,MAAA,CAxDJ,CAAA;AAAA,IAAA,CAjBF,GA+EEA,2BAAA,IAAC,MAAD;AAAA,MAAM,OAAO6D;AAAAA,MAAU,QAAQ,CAACL;AAAAA,MAC7B0E,UAAAA,MAAMC,KAAK;AAAA,QAAEzD,QAAQG;AAAAA,MAAAA,CAArB,EAAkC6C,IAAI,CAACU,GAAGC,qCACxC,KAAD;AAAA,QAAa,QAAQA,MAAMrD;AAAAA,QAAW,SAAS,MAAMG,SAASkD,IAAIrD,SAAL;AAAA,MAA7D,GAAUqD,CAAV,CADD;AAAA,IAAA,CAhFL,CAAA;AAAA,EAAA,CADF;AAuFD,CAvK0B;;"}
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 => {\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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"}

package/dist/Carousel.es.js CHANGED Viewed

@@ -36,15 +36,13 @@ import "./image.es.js";
 import "./color.es.js";
 import "./slot.es.js";
 import "next/dynamic";
-import "next/document";
-import "slate";
-import "@emotion/server/create-instance";
-import "@emotion/css";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
+import "slate";
 import "./graphql.es.js";
-import "./text-input.es.js";
 import "./shape.es.js";
+import "./text-input.es.js";
+import "@emotion/css";
 import "color";
 import "scroll-into-view-if-needed";
 import "./box-models.es.js";
@@ -52,6 +50,12 @@ import "css-box-model";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+import "set-cookie-parser";
 import "uuid/v4";
 import "corporate-ipsum";
 import "next/image";

package/dist/Carousel.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.es.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 => {\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.es.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 => {\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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"}