npm - @makeswift/runtime - Versions diffs - 0.14.4 → 0.15.0 - Mend

@makeswift/runtime 0.14.4 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/dist/cjs/components/builtin/Countdown/Countdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\n\ntype Props = {\n id?: ElementIDValue\n date?: DateValue\n variant?: ResponsiveIconRadioGroupValue<\n 'filled' \| 'filled-split' \| 'outline' \| 'outline-split' \| 'clear'\n >\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n gap?: GapXValue\n numberFont?: FontValue\n numberColor?: ResponsiveColor \| null\n blockColor?: ResponsiveColor \| null\n labelFont?: FontValue\n labelColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n BLOCK_CLASS_NAME,\n useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n className,\n )}\n />\n )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n return (\n <div\n {...restOfProps}\n className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n />\n )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n return (\n <div\n {...restOfProps}\n className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n />\n )\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n variant: Props['variant']\n size: Props['size']\n shape: Props['shape']\n gap: Props['gap']\n labelColor?: ResponsiveValue<Color> \| null\n numberFont?: ResponsiveValue<string>\n numberColor?: ResponsiveValue<Color> \| null\n blockColor?: ResponsiveValue<Color> \| null\n labelFont?: ResponsiveValue<string>\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n {\n className,\n width,\n margin,\n variant,\n size,\n shape,\n gap,\n labelColor,\n numberFont,\n numberColor,\n blockColor,\n labelFont,\n ...restOfProps\n }: ContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex' }),\n width,\n margin,\n useStyle(\n useResponsiveStyle([size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n case 'large':\n return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n default:\n return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n }\n }),\n ),\n useStyle({\n [`.${SEGMENT_CLASS_NAME}`]: useResponsiveStyle([gap] as const, ([gap]) => ({\n margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n '&:first-child': {\n marginLeft: 0,\n },\n\n '&:last-child': {\n marginRight: 0,\n },\n })),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return { borderRadius: 500 }\n\n case 'rounded':\n return { borderRadius: 6 }\n\n default:\n return { borderRadius: 0 }\n }\n }),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle(\n [variant, blockColor, numberColor, numberFont] as const,\n ([\n variant = 'filled',\n blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n numberFont = 'sans-serif',\n ]) => {\n switch (variant) {\n case 'filled':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: colorToString(blockColor),\n }\n\n case 'filled-split':\n return {\n position: 'relative',\n color: colorToString(numberColor),\n fontFamily: `\"${numberFont}\"`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 'calc(50% + 1px)',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 'calc(50% + 1px)',\n bottom: 0,\n borderBottomLeftRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n }\n\n case 'outline':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: 'transparent',\n border: `2px solid ${colorToString(blockColor)}`,\n }\n\n case 'outline-split':\n return {\n position: 'relative',\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n border: `2px solid ${colorToString(blockColor)}`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: 0,\n right: 0,\n height: 2,\n marginTop: -1,\n background: colorToString(blockColor),\n },\n }\n\n default:\n return {\n fontFamily: `\"${numberFont}\"`,\n background: 'transparent',\n color: colorToString(numberColor),\n paddingTop: 0,\n paddingBottom: 0,\n }\n }\n },\n ),\n }),\n useStyle({\n [`.${LABEL_CLASS_NAME}`]: useResponsiveStyle(\n [labelColor, labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => ({\n fontFamily: `\"${labelFont}\"`,\n color: colorToString(labelColor),\n }),\n ),\n }),\n className,\n )}\n />\n )\n})\n\nconst getRemaining = (date: Props['date'] \| null \| undefined) => {\n if (date == null) return { days: '0', hours: '0', minutes: '0', seconds: '0' }\n\n const timeDiff = new Date(date).getTime() - Date.now()\n\n if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n let delta = Math.abs(timeDiff) / 1000\n\n const days = Math.floor(delta / 86400)\n delta -= days * 86400\n\n const hours = Math.floor(delta / 3600) % 24\n delta -= hours * 3600\n\n const minutes = Math.floor(delta / 60) % 60\n delta -= minutes * 60\n\n const seconds = parseInt(String(delta % 60), 10)\n\n return {\n days: days.toString(),\n hours: hours.toString(),\n minutes: minutes.toString(),\n seconds: seconds.toString(),\n }\n}\n\nconst Countdown = forwardRef(function Countdown(\n {\n id,\n margin,\n width,\n date,\n variant,\n size,\n shape,\n gap,\n labelColor,\n labelFont,\n numberColor,\n numberFont,\n blockColor,\n daysLabel,\n hoursLabel,\n minutesLabel,\n secondsLabel,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(null))\n\n useEffect(() => {\n setRemaining(getRemaining(date))\n\n const intervalId = setInterval(() => {\n setRemaining(getRemaining(date))\n }, 1000)\n\n return () => clearInterval(intervalId)\n }, [date])\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n variant={variant}\n size={size}\n shape={shape}\n labelColor={labelColor}\n labelFont={labelFont}\n numberColor={numberColor}\n numberFont={numberFont}\n blockColor={blockColor}\n gap={gap}\n >\n <Segment>\n <Block>\n <span>{days}</span>\n </Block>\n <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{hours}</span>\n </Block>\n <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{minutes}</span>\n </Block>\n <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{seconds}</span>\n </Block>\n <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n </Segment>\n </Container>\n )\n})\n\nexport default Countdown\n"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, Ref, useEffect, useState } from 'react'\nimport {\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { ColorValue as Color } from '../../utils/types'\n\ntype Props = {\n id?: ElementIDValue\n date?: DateValue\n variant?: ResponsiveIconRadioGroupValue<\n 'filled' \| 'filled-split' \| 'outline' \| 'outline-split' \| 'clear'\n >\n shape?: ResponsiveIconRadioGroupValue<'pill' \| 'rounded' \| 'square'>\n size?: ResponsiveIconRadioGroupValue<'small' \| 'medium' \| 'large'>\n gap?: GapXValue\n numberFont?: FontValue\n numberColor?: ResponsiveColor \| null\n blockColor?: ResponsiveColor \| null\n labelFont?: FontValue\n labelColor?: ResponsiveColor \| null\n width?: string\n margin?: string\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst BLOCK_CLASS_NAME = 'block'\n\ntype BlockProps = ComponentPropsWithoutRef<'div'>\n\nfunction Block({ className, ...restOfProps }: BlockProps) {\n return (\n <div\n {...restOfProps}\n className={cx(\n BLOCK_CLASS_NAME,\n useStyle({ display: 'block', padding: '0.5em', fontSize: '1em' }),\n className,\n )}\n />\n )\n}\n\nconst LABEL_CLASS_NAME = 'label'\n\ntype LabelProps = ComponentPropsWithoutRef<'div'>\n\nfunction Label({ className, ...restOfProps }: LabelProps) {\n return (\n <div\n {...restOfProps}\n className={cx(LABEL_CLASS_NAME, useStyle({ marginTop: '0.25em' }), className)}\n />\n )\n}\n\nconst SEGMENT_CLASS_NAME = 'segment'\n\ntype SegmentProps = ComponentPropsWithoutRef<'div'>\n\nfunction Segment({ className, ...restOfProps }: SegmentProps) {\n return (\n <div\n {...restOfProps}\n className={cx(SEGMENT_CLASS_NAME, useStyle({ flex: 1, textAlign: 'center' }), className)}\n />\n )\n}\n\ntype ContainerBaseProps = {\n width?: string\n margin?: string\n variant: Props['variant']\n size: Props['size']\n shape: Props['shape']\n gap: Props['gap']\n labelColor?: ResponsiveValue<Color> \| null\n numberFont?: ResponsiveValue<string>\n numberColor?: ResponsiveValue<Color> \| null\n blockColor?: ResponsiveValue<Color> \| null\n labelFont?: ResponsiveValue<string>\n}\n\ntype ContainerProps = ContainerBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n {\n className,\n width,\n margin,\n variant,\n size,\n shape,\n gap,\n labelColor,\n numberFont,\n numberColor,\n blockColor,\n labelFont,\n ...restOfProps\n }: ContainerProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex' }),\n width,\n margin,\n useStyle(\n useResponsiveStyle([size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return { fontSize: 18, [`.${LABEL_CLASS_NAME}`]: { fontSize: 14 } }\n\n case 'large':\n return { fontSize: 32, [`.${LABEL_CLASS_NAME}`]: { fontSize: 18 } }\n\n default:\n return { fontSize: 24, [`.${LABEL_CLASS_NAME}`]: { fontSize: 16 } }\n }\n }),\n ),\n useStyle({\n [`.${SEGMENT_CLASS_NAME}`]: useResponsiveStyle([gap] as const, ([gap]) => ({\n margin: `0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`}`,\n\n '&:first-child': {\n marginLeft: 0,\n },\n\n '&:last-child': {\n marginRight: 0,\n },\n })),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle([shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return { borderRadius: 500 }\n\n case 'rounded':\n return { borderRadius: 6 }\n\n default:\n return { borderRadius: 0 }\n }\n }),\n }),\n useStyle({\n [`.${BLOCK_CLASS_NAME}`]: useResponsiveStyle(\n [variant, blockColor, numberColor, numberFont] as const,\n ([\n variant = 'filled',\n blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n numberFont = 'sans-serif',\n ]) => {\n switch (variant) {\n case 'filled':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: colorToString(blockColor),\n }\n\n case 'filled-split':\n return {\n position: 'relative',\n color: colorToString(numberColor),\n fontFamily: `\"${numberFont}\"`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 'calc(50% + 1px)',\n borderTopLeftRadius: 'inherit',\n borderTopRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n\n '::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 'calc(50% + 1px)',\n bottom: 0,\n borderBottomLeftRadius: 'inherit',\n borderBottomRightRadius: 'inherit',\n background: colorToString(blockColor),\n },\n }\n\n case 'outline':\n return {\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n background: 'transparent',\n border: `2px solid ${colorToString(blockColor)}`,\n }\n\n case 'outline-split':\n return {\n position: 'relative',\n fontFamily: `\"${numberFont}\"`,\n color: colorToString(numberColor),\n border: `2px solid ${colorToString(blockColor)}`,\n\n '> span': {\n position: 'relative',\n zIndex: 1,\n },\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: 0,\n right: 0,\n height: 2,\n marginTop: -1,\n background: colorToString(blockColor),\n },\n }\n\n default:\n return {\n fontFamily: `\"${numberFont}\"`,\n background: 'transparent',\n color: colorToString(numberColor),\n paddingTop: 0,\n paddingBottom: 0,\n }\n }\n },\n ),\n }),\n useStyle({\n [`.${LABEL_CLASS_NAME}`]: useResponsiveStyle(\n [labelColor, labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => ({\n fontFamily: `\"${labelFont}\"`,\n color: colorToString(labelColor),\n }),\n ),\n }),\n className,\n )}\n />\n )\n})\n\nconst getRemaining = (date: Props['date'] \| null \| undefined) => {\n if (date == null) return { days: '0', hours: '0', minutes: '0', seconds: '0' }\n\n const timeDiff = new Date(date).getTime() - Date.now()\n\n if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n let delta = Math.abs(timeDiff) / 1000\n\n const days = Math.floor(delta / 86400)\n delta -= days * 86400\n\n const hours = Math.floor(delta / 3600) % 24\n delta -= hours * 3600\n\n const minutes = Math.floor(delta / 60) % 60\n delta -= minutes * 60\n\n const seconds = parseInt(String(delta % 60), 10)\n\n return {\n days: days.toString(),\n hours: hours.toString(),\n minutes: minutes.toString(),\n seconds: seconds.toString(),\n }\n}\n\nconst Countdown = forwardRef(function Countdown(\n {\n id,\n margin,\n width,\n date,\n variant,\n size,\n shape,\n gap,\n labelColor,\n labelFont,\n numberColor,\n numberFont,\n blockColor,\n daysLabel,\n hoursLabel,\n minutesLabel,\n secondsLabel,\n }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(null))\n\n useEffect(() => {\n setRemaining(getRemaining(date))\n\n const intervalId = setInterval(() => {\n setRemaining(getRemaining(date))\n }, 1000)\n\n return () => clearInterval(intervalId)\n }, [date])\n\n return (\n <Container\n ref={ref}\n id={id}\n width={width}\n margin={margin}\n variant={variant}\n size={size}\n shape={shape}\n labelColor={labelColor}\n labelFont={labelFont}\n numberColor={numberColor}\n numberFont={numberFont}\n blockColor={blockColor}\n gap={gap}\n >\n <Segment>\n <Block>\n <span>{days}</span>\n </Block>\n <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{hours}</span>\n </Block>\n <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{minutes}</span>\n </Block>\n <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n </Segment>\n <Segment>\n <Block>\n <span>{seconds}</span>\n </Block>\n <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n </Segment>\n </Container>\n )\n})\n\nexport default Countdown\n"],"mappings":"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","names":["Container","size","gap","shape","variant","blockColor","numberColor","numberFont","labelColor","labelFont","Countdown"]}

package/dist/cjs/components/builtin/Countdown/register.js CHANGED Viewed

@@ -31,15 +31,14 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_dynamic = __toESM(require("next/dynamic"));
-var import_dynamic2 = require("../../../next/dynamic");
 var import_prop_controllers = require("../../../prop-controllers");
 var import_breakpoints = require("../../../state/modules/breakpoints");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
+var import_react2 = require("react");
 function registerComponent(runtime) {
   return runtime.registerComponent(
-    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(Promise.resolve().then(() => __toESM(require("./Countdown")))))),
+    (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Countdown")))),
     {
       type: import_constants.MakeswiftComponentType.Countdown,
       label: "Countdown",

package/dist/cjs/components/builtin/Countdown/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import ~~dynamic from 'next/dynamic'\nimport~~ { ~~forwardNextDynamicRef } from '../../../next/dynamic'\nimport {~~ Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n ~~forwardNextDynamicRef~~(~~patch => dynamic~~(() => ~~patch(~~import('./Countdown')))),\n {\n type: MakeswiftComponentType.Countdown,\n label: 'Countdown',\n icon: ComponentIcon.Countdown,\n props: {\n id: Props.ElementID(),\n date: Props.Date(() => ({\n preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n })),\n variant: Props.ResponsiveIconRadioGroup({\n label: 'Style',\n options: [\n { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n {\n label: 'Filled split',\n value: 'filled-split',\n icon: 'CountdownSolidSplit16',\n },\n { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n {\n label: 'Outline split',\n value: 'outline-split',\n icon: 'CountdownOutlineSplit16',\n },\n { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n ],\n defaultValue: 'filled',\n }),\n shape: Props.ResponsiveIconRadioGroup({\n label: 'Shape',\n options: [\n { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n ],\n defaultValue: 'rounded',\n }),\n size: Props.ResponsiveIconRadioGroup({\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n }),\n gap: Props.GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n step: 1,\n min: 0,\n max: 100,\n defaultValue: { value: 0, unit: 'px' },\n }),\n numberFont: Props.Font({ label: 'Number font' }),\n numberColor: Props.ResponsiveColor({\n label: 'Number color',\n placeholder: 'white',\n }),\n blockColor: Props.ResponsiveColor({\n label: 'Block color',\n placeholder: 'black',\n }),\n labelFont: Props.Font({ label: 'Label font' }),\n labelColor: Props.ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: Props.TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: Props.TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~qBAAoB;AACpB,IAAAA,kBAAsC;AACtC,~~8BAAsB;AAEtB,yBAAkC;AAClC,uBAAuC;AACvC,6BAA8B;~~AAEvB~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,~~uCAAsB~~,~~eAAS,eAAAC,SAAQ,~~MAAM,~~MAAM,~~6CAAO,aAAa,GAAC~~,CAAC,CAAC~~;AAAA,~~IAC1E~~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","names":["~~import_dynamic~~"~~,"dynamic"~~]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Countdown/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Countdown')),\n {\n type: MakeswiftComponentType.Countdown,\n label: 'Countdown',\n icon: ComponentIcon.Countdown,\n props: {\n id: Props.ElementID(),\n date: Props.Date(() => ({\n preset: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2).toISOString(),\n })),\n variant: Props.ResponsiveIconRadioGroup({\n label: 'Style',\n options: [\n { label: 'Filled', value: 'filled', icon: 'CountdownSolid16' },\n {\n label: 'Filled split',\n value: 'filled-split',\n icon: 'CountdownSolidSplit16',\n },\n { label: 'Outline', value: 'outline', icon: 'CountdownOutline16' },\n {\n label: 'Outline split',\n value: 'outline-split',\n icon: 'CountdownOutlineSplit16',\n },\n { label: 'Clear', value: 'clear', icon: 'CountdownNaked16' },\n ],\n defaultValue: 'filled',\n }),\n shape: Props.ResponsiveIconRadioGroup({\n label: 'Shape',\n options: [\n { label: 'Pill', value: 'pill', icon: 'ButtonPill16' },\n { label: 'Rounded', value: 'rounded', icon: 'ButtonRounded16' },\n { label: 'Square', value: 'square', icon: 'ButtonSquare16' },\n ],\n defaultValue: 'rounded',\n }),\n size: Props.ResponsiveIconRadioGroup({\n label: 'Size',\n options: [\n { label: 'Small', value: 'small', icon: 'SizeSmall16' },\n { label: 'Medium', value: 'medium', icon: 'SizeMedium16' },\n { label: 'Large', value: 'large', icon: 'SizeLarge16' },\n ],\n defaultValue: 'medium',\n }),\n gap: Props.GapX({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n step: 1,\n min: 0,\n max: 100,\n defaultValue: { value: 0, unit: 'px' },\n }),\n numberFont: Props.Font({ label: 'Number font' }),\n numberColor: Props.ResponsiveColor({\n label: 'Number color',\n placeholder: 'white',\n }),\n blockColor: Props.ResponsiveColor({\n label: 'Block color',\n placeholder: 'black',\n }),\n labelFont: Props.Font({ label: 'Label font' }),\n labelColor: Props.ResponsiveColor({\n label: 'Label color',\n placeholder: 'black',\n }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 560, unit: 'px' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n daysLabel: Props.TextInput({ label: 'Days label', placeholder: 'Days' }),\n hoursLabel: Props.TextInput({ label: 'Hours label', placeholder: 'Hours' }),\n minutesLabel: Props.TextInput({\n label: 'Minutes label',\n placeholder: 'Minutes',\n }),\n secondsLabel: Props.TextInput({\n label: 'Seconds label',\n placeholder: 'Seconds',\n }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/cjs/components/builtin/Divider/register.js CHANGED Viewed

@@ -31,14 +31,13 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_dynamic = __toESM(require("next/dynamic"));
-var import_dynamic2 = require("../../../next/dynamic");
 var import_prop_controllers = require("../../../prop-controllers");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
+var import_react2 = require("react");
 function registerComponent(runtime) {
   return runtime.registerComponent(
-    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(Promise.resolve().then(() => __toESM(require("./Divider")))))),
+    (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Divider")))),
     {
       type: import_constants.MakeswiftComponentType.Divider,
       label: "Divider",

package/dist/cjs/components/builtin/Divider/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Divider/register.ts"],"sourcesContent":["import ~~dynamic from 'next/dynamic'\nimport~~ { ~~forwardNextDynamicRef } from '../../../next/dynamic'\nimport {~~ Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n ~~forwardNextDynamicRef~~(~~patch => dynamic~~(() => ~~patch(~~import('./Divider')))),\n {\n type: MakeswiftComponentType.Divider,\n label: 'Divider',\n icon: ComponentIcon.Divider,\n props: {\n id: Props.ElementID(),\n variant: Props.ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'solid', label: 'Solid' },\n { value: 'dashed', label: 'Dashed' },\n { value: 'dotted', label: 'Dotted' },\n { value: 'blended', label: 'Blended' },\n ],\n defaultValue: 'solid',\n }),\n thickness: Props.ResponsiveLength({\n label: 'Height',\n defaultValue: { value: 1, unit: 'px' },\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n }),\n color: Props.ResponsiveColor({ placeholder: 'black' }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~qBAAoB;AACpB,IAAAA,kBAAsC;AACtC,~~8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;~~AAEvB~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,~~uCAAsB~~,~~eAAS,eAAAC,SAAQ,~~MAAM,~~MAAM,~~6CAAO,WAAW,GAAC~~,CAAC,CAAC~~;AAAA,~~IACxE~~;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACvC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAW,8BAAM,iBAAiB;AAAA,UAChC,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,QAC1D,CAAC;AAAA,QACD,OAAO,8BAAM,gBAAgB,EAAE,aAAa,QAAQ,CAAC;AAAA,QACrD,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["~~import_dynamic~~"~~,"dynamic"~~]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Divider/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Divider')),\n {\n type: MakeswiftComponentType.Divider,\n label: 'Divider',\n icon: ComponentIcon.Divider,\n props: {\n id: Props.ElementID(),\n variant: Props.ResponsiveSelect({\n label: 'Style',\n labelOrientation: 'horizontal',\n options: [\n { value: 'solid', label: 'Solid' },\n { value: 'dashed', label: 'Dashed' },\n { value: 'dotted', label: 'Dotted' },\n { value: 'blended', label: 'Blended' },\n ],\n defaultValue: 'solid',\n }),\n thickness: Props.ResponsiveLength({\n label: 'Height',\n defaultValue: { value: 1, unit: 'px' },\n options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n }),\n color: Props.ResponsiveColor({ placeholder: 'black' }),\n width: Props.Width({\n format: Props.Width.Format.ClassName,\n defaultValue: { value: 100, unit: '%' },\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,WAAW,GAAC;AAAA,IAC9B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,iBAAiB;AAAA,UAC9B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,UACvC;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,WAAW,8BAAM,iBAAiB;AAAA,UAChC,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,SAAS,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,MAAM,OAAO,CAAC;AAAA,QAC1D,CAAC;AAAA,QACD,OAAO,8BAAM,gBAAgB,EAAE,aAAa,QAAQ,CAAC;AAAA,QACrD,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ,8BAAM,MAAM,OAAO;AAAA,UAC3B,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,QACxC,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}

package/dist/cjs/components/builtin/Embed/Embed.js CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/components/builtin/Embed/Embed.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n id?: ElementIDValue\n html?: TextAreaValue\n width?: string\n margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n { id, width, margin, html = defaultHtml }: Props,\n ref: Ref<HTMLDivElement \| null>,\n) {\n const [container, setContainer] = useState<HTMLDivElement \| null>(null)\n const [shouldRender, setShouldRender] = useState(false)\n\n useIsomorphicLayoutEffect(() => {\n setShouldRender(true)\n }, [])\n\n useImperativeHandle(ref, () => container, [container])\n\n useEffect(() => {\n // TODO: When we SSR the editor, we can remove the editor check\n // and not run this effect on the first render.\n if (!container) return\n\n const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node: Element) {\n return node.tagName.toLowerCase() === SCRIPT_TAG\n ? NodeFilter.FILTER_ACCEPT\n : NodeFilter.FILTER_REJECT\n },\n })\n\n const nodes: Element[] = []\n\n while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n // scripts are loaded synchronously since that's what a user usually expects with scripts in\n // embedded in HTML which usually comes from the server.\n //\n // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n async function executeScriptsInOrder() {\n for (let i = 0; i < nodes.length; i++) {\n await new Promise<void>(resolve => {\n const node = nodes[i]\n const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n script.textContent = node.textContent\n Array.from(node.attributes).forEach(({ name, value }) => {\n script.setAttribute(name, value)\n })\n\n script.onload = () => resolve()\n script.onerror = () => resolve()\n\n node.parentNode?.insertBefore(script, node)\n node.parentNode?.removeChild(node)\n\n if (!script.hasAttribute('src')) resolve()\n })\n }\n }\n\n executeScriptsInOrder().catch(error => {\n // Ignore errors from user-provided code\n console.error(error)\n })\n }, [container, html])\n\n const className = useStyle({ minHeight: 15 })\n\n if (shouldRender === false) return null\n\n return (\n <div\n ref={setContainer}\n id={id}\n className={cx(className, width, margin)}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n )\n})\n\nexport default Embed\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~AAAA;AAAA;AAAA;AAAA;AAAA;~~AA6GI~~;AA3GJ,mBAA0E;AAG1E,uCAA0C;AAC1C,uBAAyB;AACzB,iBAAmB;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,YAAQ,yBAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,kEAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,WAAW,CAAC,SAAS,CAAC;AAErD,8BAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,gBAAY,2BAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,eAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n id?: ElementIDValue\n html?: TextAreaValue\n width?: string\n margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n { id, width, margin, html = defaultHtml }: Props,\n ref: Ref<HTMLDivElement \| null>,\n) {\n const [container, setContainer] = useState<HTMLDivElement \| null>(null)\n const [shouldRender, setShouldRender] = useState(false)\n\n useIsomorphicLayoutEffect(() => {\n setShouldRender(true)\n }, [])\n\n useImperativeHandle(ref, () => container, [container])\n\n useEffect(() => {\n // TODO: When we SSR the editor, we can remove the editor check\n // and not run this effect on the first render.\n if (!container) return\n\n const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node: Element) {\n return node.tagName.toLowerCase() === SCRIPT_TAG\n ? NodeFilter.FILTER_ACCEPT\n : NodeFilter.FILTER_REJECT\n },\n })\n\n const nodes: Element[] = []\n\n while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n // scripts are loaded synchronously since that's what a user usually expects with scripts in\n // embedded in HTML which usually comes from the server.\n //\n // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n async function executeScriptsInOrder() {\n for (let i = 0; i < nodes.length; i++) {\n await new Promise<void>(resolve => {\n const node = nodes[i]\n const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n script.textContent = node.textContent\n Array.from(node.attributes).forEach(({ name, value }) => {\n script.setAttribute(name, value)\n })\n\n script.onload = () => resolve()\n script.onerror = () => resolve()\n\n node.parentNode?.insertBefore(script, node)\n node.parentNode?.removeChild(node)\n\n if (!script.hasAttribute('src')) resolve()\n })\n }\n }\n\n executeScriptsInOrder().catch(error => {\n // Ignore errors from user-provided code\n console.error(error)\n })\n }, [container, html])\n\n const className = useStyle({ minHeight: 15 })\n\n if (shouldRender === false) return null\n\n return (\n <div\n ref={setContainer}\n id={id}\n className={cx(className, width, margin)}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n )\n})\n\nexport default Embed\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GI;AA3GJ,mBAA0E;AAG1E,uCAA0C;AAC1C,uBAAyB;AACzB,iBAAmB;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,YAAQ,yBAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,kEAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,WAAW,CAAC,SAAS,CAAC;AAErD,8BAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,gBAAY,2BAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,eAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}

package/dist/cjs/components/builtin/Embed/register.js CHANGED Viewed

@@ -31,14 +31,13 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_dynamic = __toESM(require("next/dynamic"));
-var import_dynamic2 = require("../../../next/dynamic");
 var import_prop_controllers = require("../../../prop-controllers");
 var import_constants = require("../constants");
 var import_components_meta = require("../../../state/modules/components-meta");
+var import_react2 = require("react");
 function registerComponent(runtime) {
   return runtime.registerComponent(
-    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(Promise.resolve().then(() => __toESM(require("./Embed")))))),
+    (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Embed")))),
     {
       type: import_constants.MakeswiftComponentType.Embed,
       label: "Embed",

package/dist/cjs/components/builtin/Embed/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Embed/register.ts"],"sourcesContent":["import ~~dynamic from 'next/dynamic'\n\nimport~~ { ~~forwardNextDynamicRef } from '../../../next/dynamic'\nimport {~~ Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n ~~forwardNextDynamicRef~~(~~patch => dynamic~~(() => ~~patch(~~import('./Embed')))),\n {\n type: MakeswiftComponentType.Embed,\n label: 'Embed',\n icon: ComponentIcon.Code,\n props: {\n id: Props.ElementID(),\n html: Props.TextArea({ label: 'Code', rows: 20 }),\n width: Props.Width({ format: Props.Width.Format.ClassName }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~qBAAoB;AAEpB,IAAAA,kBAAsC;AACtC,~~8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;~~AAEvB~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,~~uCAAsB~~,~~eAAS,eAAAC,SAAQ,~~MAAM,~~MAAM,~~6CAAO,SAAS,GAAC~~,CAAC,CAAC~~;AAAA,~~IACtE~~;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,SAAS,EAAE,OAAO,QAAQ,MAAM,GAAG,CAAC;AAAA,QAChD,OAAO,8BAAM,MAAM,EAAE,QAAQ,8BAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QAC3D,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["~~import_dynamic~~"~~,"dynamic"~~]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Embed/register.ts"],"sourcesContent":["import { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Embed')),\n {\n type: MakeswiftComponentType.Embed,\n label: 'Embed',\n icon: ComponentIcon.Code,\n props: {\n id: Props.ElementID(),\n html: Props.TextArea({ label: 'Code', rows: 20 }),\n width: Props.Width({ format: Props.Width.Format.ClassName }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAsB;AAEtB,uBAAuC;AACvC,6BAA8B;AAC9B,IAAAA,gBAAqB;AAEd,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,oBAAK,MAAM,6CAAO,SAAS,GAAC;AAAA,IAC5B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,SAAS,EAAE,OAAO,QAAQ,MAAM,GAAG,CAAC;AAAA,QAChD,OAAO,8BAAM,MAAM,EAAE,QAAQ,8BAAM,MAAM,OAAO,UAAU,CAAC;AAAA,QAC3D,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["import_react"]}

package/dist/cjs/components/builtin/Form/Form.js CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -44,7 +45,7 @@ var import_Button = __toESM(require("../Button"));
 var import_Link = require("../../shared/Link");
 var import_box_model = require("../../../box-model");
 var import_useTableFormFieldRefs = require("../../hooks/useTableFormFieldRefs");
-var import_react2 = require("../../../api/react");
+var import_makeswift_host_api_client = require("../../../next/context/makeswift-host-api-client");
 var import_css = require("@emotion/css");
 var import_responsive_style = require("../../utils/responsive-style");
 var import_use_style = require("../../../runtimes/react/use-style");
@@ -202,7 +203,7 @@ const Form = (0, import_react.forwardRef)(function Form2({
   const fields = (0, import_react.useMemo)(() => fieldsProp?.fields ?? [], [fieldsProp]);
   const grid = (0, import_react.useMemo)(() => fieldsProp?.grid ?? [], [fieldsProp]);
   const table = (0, import_makeswift_api.useTable)(tableId ?? null);
-  const client = (0, import_react2.useMakeswiftClient)();
+  const client = (0, import_makeswift_host_api_client.useMakeswiftHostApiClient)();
   const [refEl, setRefEl] = (0, import_react.useState)(null);
   const [propControllers, setPropControllers] = (0, import_react.useState)(null);
   const [initialValues, setInitialValues] = (0, import_react.useState)(

package/dist/cjs/components/builtin/Form/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["import {\n useState,\n useEffect,\n useRef,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n Ref,\n useImperativeHandle,\n ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n Size,\n Sizes,\n Provider as FormContextProvider,\n Shape,\n Contrast,\n Alignment,\n Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n ElementIDValue,\n GapYValue,\n LinkValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n ResponsiveValue,\n TableFormFieldsDescriptor,\n TableFormFieldsValue,\n TableValue,\n TextInputValue,\n TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftClient } from '../../../api/react'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 12\n\n case Sizes.MEDIUM:\n return 14\n\n case Sizes.LARGE:\n return 18\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\ntype Props = {\n id?: ElementIDValue\n tableId?: TableValue\n fields?: TableFormFieldsValue\n submitLink?: LinkValue\n gap?: GapYValue\n shape?: ResponsiveIconRadioGroupValue<Shape>\n size?: ResponsiveIconRadioGroupValue<Size>\n contrast?: ResponsiveIconRadioGroupValue<Contrast>\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n submitTextStyle?: TextStyleValue\n brandColor?: ResponsiveColor \| null\n submitTextColor?: ResponsiveColor \| null\n submitLabel?: TextInputValue\n submitVariant?: ResponsiveSelectValue<\n 'flat' \| 'outline' \| 'shadow' \| 'clear' \| 'blocky' \| 'bubbly' \| 'skewed'\n >\n submitWidth?: ResponsiveLengthValue\n submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n width?: string\n margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n { className, size, ...restOfProps }: GridFormProps,\n ref: ForwardedRef<HTMLFormElement>,\n) {\n return (\n <form\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n fontSize: getSizeFontSize(size),\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype GridItemBaseProps = {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n rowGap: Props['gap']\n columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n className,\n )}\n />\n )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n switch (alignment) {\n case Alignments.LEFT:\n return '0 auto 0 0'\n case Alignments.RIGHT:\n return '0 0 0 auto'\n default:\n return '0 auto'\n }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n return (\n <Button\n {...restOfProps}\n as=\"button\"\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n useStyle(\n useResponsiveStyle(\n [size, alignment] as const,\n ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n minHeight: getInputSizeHeight(size),\n maxHeight: getInputSizeHeight(size),\n margin: getAlignmentMargin(alignment),\n paddingTop: 0,\n paddingBottom: 0,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n padding: '8px 16px',\n backgroundColor: '#f19eb9',\n borderRadius: 4,\n marginTop: 16,\n }),\n className,\n )}\n />\n )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n return (\n <p\n {...restOfProps}\n className={cx(\n useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n className,\n )}\n />\n )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n switch (tableColumn.__typename) {\n case 'CheckboxTableColumn':\n return false\n\n case 'MultipleSelectTableColumn':\n return []\n\n case 'SingleLineTextTableColumn':\n case 'LongTextTableColumn':\n case 'SingleSelectTableColumn':\n case 'PhoneNumberTableColumn':\n case 'EmailTableColumn':\n case 'URLTableColumn':\n case 'NumberTableColumn':\n default:\n return ''\n }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string \| string[] \| boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n {\n id,\n tableId,\n fields: fieldsProp,\n submitLabel = 'Submit',\n submitLink,\n shape,\n size,\n contrast,\n brandColor,\n gap,\n width,\n margin,\n submitTextStyle,\n submitVariant,\n submitTextColor,\n submitWidth,\n submitAlignment,\n labelTextStyle,\n labelTextColor,\n }: Props,\n ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n const table = useTable(tableId ?? null)\n const client = useMakeswiftClient()\n const [refEl, setRefEl] = useState<HTMLElement \| null>(null)\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const [initialValues, setInitialValues] = useState<Fields>(() =>\n fields.reduce((acc, formField) => {\n const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n const defaultValue = formField ? formField.defaultValue : null\n\n if (tableColumn) {\n acc[tableColumn.name] =\n defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n }\n\n return acc\n }, {} as Fields),\n )\n const controller = propControllers?.fields\n const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n const [isDone, setIsDone] = useState(false)\n const linkRef = useRef<HTMLAnchorElement>(null)\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return refEl instanceof Element ? refEl : null\n },\n getBoxModel() {\n return refEl instanceof Element ? getBox(refEl) : null\n },\n setPropControllers,\n }),\n [refEl, setPropControllers],\n )\n\n useEffect(() => {\n container(refEl)\n }, [container, refEl])\n\n useEffect(() => {\n if (!isDone) return\n\n let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n return () => clearTimeout(timeoutId)\n }, [isDone])\n\n function getTableColumn({ tableColumnId }: any) {\n return table && table.columns.find(field => tableColumnId === field.id)\n }\n\n async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n if (table) {\n const columns: Column[] = []\n\n fields.forEach(field => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data) {\n columns.push({ columnId: field.tableColumnId, data })\n\n if (field.autofill) {\n localStorage.setItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n JSON.stringify(data),\n )\n }\n }\n }\n })\n\n try {\n await client.createTableRecord(table.id, columns)\n setIsDone(true)\n setInitialValues(prev =>\n fields.reduce(\n (acc, field) => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n resetForm()\n\n if (linkRef.current != null) linkRef.current.click()\n } catch (error) {\n setStatus({ error: 'An unexpected error has occurred, please try again later' })\n } finally {\n setSubmitting(false)\n }\n }\n }\n\n useEffect(() => {\n setInitialValues(prev =>\n fields.reduce(\n (acc, formField) => {\n const tableColumn =\n table && table.columns.find(field => field.id === formField.tableColumnId)\n\n if (tableColumn && formField.autofill) {\n const storedValue = localStorage.getItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n )\n\n if (storedValue) {\n try {\n acc[tableColumn.name] = JSON.parse(storedValue)\n } catch (e) {\n // Ignore\n }\n }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n }, [fields, table])\n\n return (\n <FormContextProvider\n value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n >\n {tableId == null ? (\n <Placeholder ref={setRefEl} width={width} margin={margin} />\n ) : (\n <>\n <Formik\n onSubmit={handleSubmit}\n initialValues={initialValues}\n initialStatus={{ error: null }}\n enableReinitialize\n >\n {formik => {\n const error = formik.status && formik.status.error\n const errors = fields\n .map(field => {\n const tableColumn = getTableColumn(field)\n\n return (\n tableColumn &&\n getIn(formik.touched, tableColumn.name) &&\n getIn(formik.errors, tableColumn.name)\n )\n })\n .filter(message => typeof message === 'string')\n\n return (\n <>\n <GridForm\n ref={setRefEl}\n id={id}\n className={cx(width, margin)}\n size={size}\n onSubmit={formik.handleSubmit}\n onReset={formik.handleReset}\n noValidate\n >\n {fields.map((field, index) => {\n const tableColumn = getTableColumn(field)\n\n return (\n <GridItem\n key={field.id}\n ref={items[index]}\n grid={grid}\n index={index}\n rowGap={gap}\n columnGap={gap}\n >\n <Field tableColumn={tableColumn} tableFormField={field} />\n </GridItem>\n )\n })}\n <GridItem\n ref={items[fields.length]}\n grid={grid}\n index={fields.length}\n rowGap={gap}\n columnGap={gap}\n >\n <StyledButton\n type=\"submit\"\n // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n disabled={formik.isSubmitting \|\| isDone}\n shape={shape}\n size={size}\n color={brandColor}\n variant={submitVariant}\n textColor={submitTextColor}\n width={submitWidth}\n alignment={submitAlignment}\n textStyle={submitTextStyle}\n >\n {formik.isSubmitting ? (\n <Spinner />\n ) : isDone ? (\n <IconContainer>\n <Check12 />\n </IconContainer>\n ) : (\n submitLabel\n )}\n </StyledButton>\n {(errors.length > 0 \|\| error) && (\n <ErrorContainer>\n {errors.map(message => (\n <ErrorMessage key={message}>{message}</ErrorMessage>\n ))}\n {error != null && <ErrorMessage>{error}</ErrorMessage>}\n </ErrorContainer>\n )}\n </GridItem>\n </GridForm>\n {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n </>\n )\n }}\n </Formik>\n </>\n )}\n </FormContextProvider>\n )\n})\n\nexport default Form\n"],"mappings":"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","names":["import_react","size","GridItem","Button","alignment","getInputSizeHeight","Form","FormContextProvider","Placeholder","Field","Spinner"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n useState,\n useEffect,\n useRef,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n Ref,\n useImperativeHandle,\n ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n Size,\n Sizes,\n Provider as FormContextProvider,\n Shape,\n Contrast,\n Alignment,\n Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport {\n ElementIDValue,\n GapYValue,\n LinkValue,\n ResponsiveIconRadioGroupValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n ResponsiveValue,\n TableFormFieldsDescriptor,\n TableFormFieldsValue,\n TableValue,\n TextInputValue,\n TextStyleValue,\n} from '../../../prop-controllers/descriptors'\nimport { Link } from '../../shared/Link'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n switch (size) {\n case Sizes.SMALL:\n return 12\n\n case Sizes.MEDIUM:\n return 14\n\n case Sizes.LARGE:\n return 18\n\n default:\n throw new Error(`Invalid form size \"${size}\"`)\n }\n}\n\ntype Props = {\n id?: ElementIDValue\n tableId?: TableValue\n fields?: TableFormFieldsValue\n submitLink?: LinkValue\n gap?: GapYValue\n shape?: ResponsiveIconRadioGroupValue<Shape>\n size?: ResponsiveIconRadioGroupValue<Size>\n contrast?: ResponsiveIconRadioGroupValue<Contrast>\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n submitTextStyle?: TextStyleValue\n brandColor?: ResponsiveColor \| null\n submitTextColor?: ResponsiveColor \| null\n submitLabel?: TextInputValue\n submitVariant?: ResponsiveSelectValue<\n 'flat' \| 'outline' \| 'shadow' \| 'clear' \| 'blocky' \| 'bubbly' \| 'skewed'\n >\n submitWidth?: ResponsiveLengthValue\n submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n width?: string\n margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n { className, size, ...restOfProps }: GridFormProps,\n ref: ForwardedRef<HTMLFormElement>,\n) {\n return (\n <form\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n useStyle(\n useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n fontSize: getSizeFontSize(size),\n })),\n ),\n className,\n )}\n />\n )\n})\n\ntype GridItemBaseProps = {\n grid: ResponsiveValue<{ spans: number[][]; count: number }>\n index: number\n rowGap: Props['gap']\n columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n className,\n )}\n />\n )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n switch (alignment) {\n case Alignments.LEFT:\n return '0 auto 0 0'\n case Alignments.RIGHT:\n return '0 0 0 auto'\n default:\n return '0 auto'\n }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n return (\n <Button\n {...restOfProps}\n as=\"button\"\n className={cx(\n useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n useStyle(\n useResponsiveStyle(\n [size, alignment] as const,\n ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n minHeight: getInputSizeHeight(size),\n maxHeight: getInputSizeHeight(size),\n margin: getAlignmentMargin(alignment),\n paddingTop: 0,\n paddingBottom: 0,\n }),\n ),\n ),\n className,\n )}\n />\n )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return (\n <div\n {...restOfProps}\n className={cx(\n useStyle({\n padding: '8px 16px',\n backgroundColor: '#f19eb9',\n borderRadius: 4,\n marginTop: 16,\n }),\n className,\n )}\n />\n )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n return (\n <p\n {...restOfProps}\n className={cx(\n useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n className,\n )}\n />\n )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n switch (tableColumn.__typename) {\n case 'CheckboxTableColumn':\n return false\n\n case 'MultipleSelectTableColumn':\n return []\n\n case 'SingleLineTextTableColumn':\n case 'LongTextTableColumn':\n case 'SingleSelectTableColumn':\n case 'PhoneNumberTableColumn':\n case 'EmailTableColumn':\n case 'URLTableColumn':\n case 'NumberTableColumn':\n default:\n return ''\n }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string \| string[] \| boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n {\n id,\n tableId,\n fields: fieldsProp,\n submitLabel = 'Submit',\n submitLink,\n shape,\n size,\n contrast,\n brandColor,\n gap,\n width,\n margin,\n submitTextStyle,\n submitVariant,\n submitTextColor,\n submitWidth,\n submitAlignment,\n labelTextStyle,\n labelTextColor,\n }: Props,\n ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n const table = useTable(tableId ?? null)\n const client = useMakeswiftHostApiClient()\n const [refEl, setRefEl] = useState<HTMLElement \| null>(null)\n const [propControllers, setPropControllers] =\n useState<DescriptorsPropControllers<Descriptors> \| null>(null)\n const [initialValues, setInitialValues] = useState<Fields>(() =>\n fields.reduce((acc, formField) => {\n const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n const defaultValue = formField ? formField.defaultValue : null\n\n if (tableColumn) {\n acc[tableColumn.name] =\n defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n }\n\n return acc\n }, {} as Fields),\n )\n const controller = propControllers?.fields\n const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n const [isDone, setIsDone] = useState(false)\n const linkRef = useRef<HTMLAnchorElement>(null)\n\n useImperativeHandle(\n ref,\n () => ({\n getDomNode() {\n return refEl instanceof Element ? refEl : null\n },\n getBoxModel() {\n return refEl instanceof Element ? getBox(refEl) : null\n },\n setPropControllers,\n }),\n [refEl, setPropControllers],\n )\n\n useEffect(() => {\n container(refEl)\n }, [container, refEl])\n\n useEffect(() => {\n if (!isDone) return\n\n let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n return () => clearTimeout(timeoutId)\n }, [isDone])\n\n function getTableColumn({ tableColumnId }: any) {\n return table && table.columns.find(field => tableColumnId === field.id)\n }\n\n async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n if (table) {\n const columns: Column[] = []\n\n fields.forEach(field => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data) {\n columns.push({ columnId: field.tableColumnId, data })\n\n if (field.autofill) {\n localStorage.setItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n JSON.stringify(data),\n )\n }\n }\n }\n })\n\n try {\n await client.createTableRecord(table.id, columns)\n setIsDone(true)\n setInitialValues(prev =>\n fields.reduce(\n (acc, field) => {\n const tableColumn = getTableColumn(field)\n\n if (tableColumn) {\n const data = values[tableColumn.name]\n\n if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n resetForm()\n\n if (linkRef.current != null) linkRef.current.click()\n } catch (error) {\n setStatus({ error: 'An unexpected error has occurred, please try again later' })\n } finally {\n setSubmitting(false)\n }\n }\n }\n\n useEffect(() => {\n setInitialValues(prev =>\n fields.reduce(\n (acc, formField) => {\n const tableColumn =\n table && table.columns.find(field => field.id === formField.tableColumnId)\n\n if (tableColumn && formField.autofill) {\n const storedValue = localStorage.getItem(\n `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n )\n\n if (storedValue) {\n try {\n acc[tableColumn.name] = JSON.parse(storedValue)\n } catch (e) {\n // Ignore\n }\n }\n }\n\n return acc\n },\n { ...prev },\n ),\n )\n }, [fields, table])\n\n return (\n <FormContextProvider\n value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n >\n {tableId == null ? (\n <Placeholder ref={setRefEl} width={width} margin={margin} />\n ) : (\n <>\n <Formik\n onSubmit={handleSubmit}\n initialValues={initialValues}\n initialStatus={{ error: null }}\n enableReinitialize\n >\n {formik => {\n const error = formik.status && formik.status.error\n const errors = fields\n .map(field => {\n const tableColumn = getTableColumn(field)\n\n return (\n tableColumn &&\n getIn(formik.touched, tableColumn.name) &&\n getIn(formik.errors, tableColumn.name)\n )\n })\n .filter(message => typeof message === 'string')\n\n return (\n <>\n <GridForm\n ref={setRefEl}\n id={id}\n className={cx(width, margin)}\n size={size}\n onSubmit={formik.handleSubmit}\n onReset={formik.handleReset}\n noValidate\n >\n {fields.map((field, index) => {\n const tableColumn = getTableColumn(field)\n\n return (\n <GridItem\n key={field.id}\n ref={items[index]}\n grid={grid}\n index={index}\n rowGap={gap}\n columnGap={gap}\n >\n <Field tableColumn={tableColumn} tableFormField={field} />\n </GridItem>\n )\n })}\n <GridItem\n ref={items[fields.length]}\n grid={grid}\n index={fields.length}\n rowGap={gap}\n columnGap={gap}\n >\n <StyledButton\n type=\"submit\"\n // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n disabled={formik.isSubmitting \|\| isDone}\n shape={shape}\n size={size}\n color={brandColor}\n variant={submitVariant}\n textColor={submitTextColor}\n width={submitWidth}\n alignment={submitAlignment}\n textStyle={submitTextStyle}\n >\n {formik.isSubmitting ? (\n <Spinner />\n ) : isDone ? (\n <IconContainer>\n <Check12 />\n </IconContainer>\n ) : (\n submitLabel\n )}\n </StyledButton>\n {(errors.length > 0 \|\| error) && (\n <ErrorContainer>\n {errors.map(message => (\n <ErrorMessage key={message}>{message}</ErrorMessage>\n ))}\n {error != null && <ErrorMessage>{error}</ErrorMessage>}\n </ErrorContainer>\n )}\n </GridItem>\n </GridForm>\n {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n </>\n )\n }}\n </Formik>\n </>\n )}\n </FormContextProvider>\n )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","Button","alignment","getInputSizeHeight","Form","FormContextProvider","Placeholder","Field","Spinner"]}

package/dist/cjs/components/builtin/Form/context/FormContext.js CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/components/builtin/Form/context/FormContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["~~import~~ { createContext, useContext } from 'react'\n\nimport { ResponsiveValue, TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\n\nexport const Alignments = {\n LEFT: 'left',\n CENTER: 'center',\n RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n SQUARE: 'square',\n ROUNDED: 'rounded',\n PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n LIGHT: 'light',\n DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n shape: ResponsiveValue<Shape> \| null \| undefined\n size: ResponsiveValue<Size> \| null \| undefined\n contrast: ResponsiveValue<Contrast> \| null \| undefined\n brandColor: ResponsiveValue<ColorValue> \| null \| undefined\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAAA~~,mBAA0C;AAMnC,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,cAAU,4BAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}
1	+ {"version":3,"sources":["../../../../../../src/components/builtin/Form/context/FormContext.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport { ResponsiveValue, TextStyleValue } from '../../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../../runtimes/react/controls'\nimport { ColorValue } from '../../../utils/types'\n\nexport const Alignments = {\n LEFT: 'left',\n CENTER: 'center',\n RIGHT: 'right',\n} as const\n\nexport type Alignment = typeof Alignments[keyof typeof Alignments]\n\nexport const Shapes = Object.freeze({\n SQUARE: 'square',\n ROUNDED: 'rounded',\n PILL: 'pill',\n} as const)\n\nexport type Shape = typeof Shapes[keyof typeof Shapes]\n\nexport const Sizes = Object.freeze({\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n} as const)\n\nexport type Size = typeof Sizes[keyof typeof Sizes]\n\nexport const Contrasts = Object.freeze({\n LIGHT: 'light',\n DARK: 'dark',\n} as const)\n\nexport type Contrast = typeof Contrasts[keyof typeof Contrasts]\n\nexport type Value = {\n shape: ResponsiveValue<Shape> \| null \| undefined\n size: ResponsiveValue<Size> \| null \| undefined\n contrast: ResponsiveValue<Contrast> \| null \| undefined\n brandColor: ResponsiveValue<ColorValue> \| null \| undefined\n labelTextStyle?: TextStyleValue\n labelTextColor?: ResponsiveColor \| null\n}\n\nconst Context = createContext<Value>({} as Value)\n\nexport function useFormContext(): Value {\n return useContext(Context)\n}\n\nconst { Provider } = Context\n\nexport { Provider }\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA0C;AAMnC,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,CAAU;AAIH,MAAM,QAAQ,OAAO,OAAO;AAAA,EACjC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,CAAU;AAIH,MAAM,YAAY,OAAO,OAAO;AAAA,EACrC,OAAO;AAAA,EACP,MAAM;AACR,CAAU;AAaV,MAAM,cAAU,4BAAqB,CAAC,CAAU;AAEzC,SAAS,iBAAwB;AACtC,aAAO,yBAAW,OAAO;AAC3B;AAEA,MAAM,EAAE,SAAS,IAAI;","names":[]}

package/dist/cjs/components/builtin/Form/register.js CHANGED Viewed

@@ -31,16 +31,15 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_dynamic = __toESM(require("next/dynamic"));
-var import_dynamic2 = require("../../../next/dynamic");
 var import_prop_controllers = require("../../../prop-controllers");
 var import_breakpoints = require("../../../state/modules/breakpoints");
 var import_constants = require("../constants");
 var import_FormContext = require("./context/FormContext");
 var import_components_meta = require("../../../state/modules/components-meta");
+var import_react2 = require("react");
 function registerComponent(runtime) {
   return runtime.registerComponent(
-    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(Promise.resolve().then(() => __toESM(require("./Form")))))),
+    (0, import_react2.lazy)(() => Promise.resolve().then(() => __toESM(require("./Form")))),
     {
       type: import_constants.MakeswiftComponentType.Form,
       label: "Form",

package/dist/cjs/components/builtin/Form/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import ~~dynamic from 'next/dynamic'\n\nimport~~ { ~~forwardNextDynamicRef } from '../../../next/dynamic'\nimport {~~ Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n ~~forwardNextDynamicRef~~(~~patch => dynamic~~(() => ~~patch(~~import('./Form')))),\n {\n type: MakeswiftComponentType.Form,\n label: 'Form',\n icon: ComponentIcon.Form,\n props: {\n id: Props.ElementID(),\n tableId: Props.Table(),\n fields: Props.TableFormFields(),\n submitLink: Props.Link(props => ({\n label: 'Redirect to',\n // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n options: [\n { value: 'OPEN_PAGE', label: 'Open page' },\n { value: 'OPEN_URL', label: 'Open URL' },\n ],\n hidden: props.tableId == null,\n })),\n gap: Props.GapY(props => ({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n defaultValue: { value: 0, unit: 'px' },\n hidden: props.tableId == null,\n })),\n shape: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Shape',\n options: [\n { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n ],\n defaultValue: Shapes.ROUNDED,\n hidden: props.tableId == null,\n })),\n size: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Size',\n options: [\n { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n ],\n defaultValue: Sizes.MEDIUM,\n hidden: props?.tableId == null,\n })),\n contrast: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Color',\n options: [\n { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n ],\n defaultValue: Contrasts.LIGHT,\n hidden: props.tableId == null,\n })),\n labelTextStyle: Props.TextStyle({ label: 'Label text style' }),\n labelTextColor: Props.ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\n const contrast = findBreakpointOverride<Contrast>(\n runtime.getBreakpoints(),\n responsiveContrast,\n device,\n )\n\n return {\n hidden,\n label: 'Label text color',\n placeholder:\n contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n }\n }),\n submitTextStyle: Props.TextStyle({ label: 'Button text style' }),\n brandColor: Props.ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: Props.ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: Props.TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: Props.ResponsiveSelect(props => ({\n label: 'Button style',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n hidden: props.tableId == null,\n })),\n submitWidth: Props.ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Button alignment',\n options: [\n { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n ],\n defaultValue: Alignments.CENTER,\n hidden: props.tableId == null,\n })),\n width: Props.Width({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 550, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n format: Props.Width.Format.ClassName,\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~qBAAoB;AAEpB,IAAAA,kBAAsC;AACtC,~~8BAAuC;AAEvC,yBAA0D;AAC1D,uBAAuC;AACvC,yBAA+D;AAC/D,6BAA8B;~~AAEvB~~,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,~~uCAAsB~~,~~eAAS,eAAAC,SAAQ,~~MAAM,~~MAAM,~~6CAAO,QAAQ,GAAC~~,CAAC,CAAC~~;AAAA,~~IACrE~~;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,MAAM,qCAAc;AAAA,MACpB,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,SAAS,8BAAM,MAAM;AAAA,QACrB,QAAQ,8BAAM,gBAAgB;AAAA,QAC9B,YAAY,8BAAM,KAAK,YAAU;AAAA,UAC/B,OAAO;AAAA;AAAA,UAEP,SAAS;AAAA,YACP,EAAE,OAAO,aAAa,OAAO,YAAY;AAAA,YACzC,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,UACzC;AAAA,UACA,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,KAAK,8BAAM,KAAK,YAAU;AAAA,UACxB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,IAAI,MAAM,KAAK;AAAA,YACjC;AAAA,UACF;AAAA,UACA,OAAO;AAAA,UACP,cAAc,EAAE,OAAO,GAAG,MAAM,KAAK;AAAA,UACrC,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,OAAO,8BAAM,yBAAyB,YAAU;AAAA,UAC9C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,0BAAO,MAAM,MAAM,eAAe;AAAA,YAC1D,EAAE,OAAO,WAAW,OAAO,0BAAO,SAAS,MAAM,kBAAkB;AAAA,YACnE,EAAE,OAAO,UAAU,OAAO,0BAAO,QAAQ,MAAM,iBAAiB;AAAA,UAClE;AAAA,UACA,cAAc,0BAAO;AAAA,UACrB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,MAAM,8BAAM,yBAAyB,YAAU;AAAA,UAC7C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,SAAS,OAAO,yBAAM,OAAO,MAAM,cAAc;AAAA,YAC1D,EAAE,OAAO,UAAU,OAAO,yBAAM,QAAQ,MAAM,eAAe;AAAA,YAC7D,EAAE,OAAO,SAAS,OAAO,yBAAM,OAAO,MAAM,cAAc;AAAA,UAC5D;AAAA,UACA,cAAc,yBAAM;AAAA,UACpB,QAAQ,OAAO,WAAW;AAAA,QAC5B,EAAE;AAAA,QACF,UAAU,8BAAM,yBAAyB,YAAU;AAAA,UACjD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,cAAc,OAAO,6BAAU,OAAO,MAAM,QAAQ;AAAA,YAC7D,EAAE,OAAO,aAAa,OAAO,6BAAU,MAAM,MAAM,SAAS;AAAA,UAC9D;AAAA,UACA,cAAc,6BAAU;AAAA,UACxB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,gBAAgB,8BAAM,UAAU,EAAE,OAAO,mBAAmB,CAAC;AAAA,QAC7D,gBAAgB,8BAAM,gBAAgB,CAAC,OAAO,WAAW;AACvD,gBAAM,SAAS,MAAM,WAAW;AAChC,gBAAM,qBAAqB,MAAM;AACjC,gBAAM,eAAW;AAAA,YACf,QAAQ,eAAe;AAAA,YACvB;AAAA,YACA;AAAA,UACF;AAEA,iBAAO;AAAA,YACL;AAAA,YACA,OAAO;AAAA,YACP,aACE,UAAU,UAAU,6BAAU,OAAO,2BAA2B;AAAA,UACpE;AAAA,QACF,CAAC;AAAA,QACD,iBAAiB,8BAAM,UAAU,EAAE,OAAO,oBAAoB,CAAC;AAAA,QAC/D,YAAY,8BAAM,gBAAgB,YAAU;AAAA,UAC1C,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA;AAAA,QAE3B,EAAE;AAAA,QACF,iBAAiB,8BAAM,gBAAgB,YAAU;AAAA,UAC/C,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,aAAa,8BAAM,UAAU,YAAU;AAAA,UACrC,OAAO;AAAA,UACP,aAAa;AAAA,UACb,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,eAAe,8BAAM,iBAAiB,YAAU;AAAA,UAC9C,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,WAAW,OAAO,UAAU;AAAA,YACrC,EAAE,OAAO,UAAU,OAAO,WAAW;AAAA,YACrC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,YACjC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,YACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,UACrC;AAAA,UACA,cAAc;AAAA,UACd,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,aAAa,8BAAM,iBAAiB,YAAU;AAAA,UAC5C,OAAO;AAAA,UACP,QAAQ,MAAM,WAAW;AAAA;AAAA,QAE3B,EAAE;AAAA,QACF,iBAAiB,8BAAM,yBAAyB,YAAU;AAAA,UACxD,OAAO;AAAA,UACP,SAAS;AAAA,YACP,EAAE,OAAO,QAAQ,OAAO,8BAAW,MAAM,MAAM,cAAc;AAAA,YAC7D,EAAE,OAAO,UAAU,OAAO,8BAAW,QAAQ,MAAM,gBAAgB;AAAA,YACnE,EAAE,OAAO,SAAS,OAAO,8BAAW,OAAO,MAAM,eAAe;AAAA,UAClE;AAAA,UACA,cAAc,8BAAW;AAAA,UACzB,QAAQ,MAAM,WAAW;AAAA,QAC3B,EAAE;AAAA,QACF,OAAO,8BAAM,MAAM;AAAA,UACjB,QAAQ;AAAA,YACN;AAAA,cACE,cAAU,sCAAkB,QAAQ,eAAe,CAAC,EAAE;AAAA,cACtD,OAAO,EAAE,OAAO,KAAK,MAAM,KAAK;AAAA,YAClC;AAAA,UACF;AAAA,UACA,cAAc,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,UACtC,QAAQ,8BAAM,MAAM,OAAO;AAAA,QAC7B,CAAC;AAAA,QACD,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACF;","names":["~~import_dynamic~~"~~,"dynamic"~~]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Form/register.ts"],"sourcesContent":["import { Props, ResponsiveValue } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { Alignments, Contrast, Contrasts, Shapes, Sizes } from './context/FormContext'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\nimport { lazy } from 'react'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Form')),\n {\n type: MakeswiftComponentType.Form,\n label: 'Form',\n icon: ComponentIcon.Form,\n props: {\n id: Props.ElementID(),\n tableId: Props.Table(),\n fields: Props.TableFormFields(),\n submitLink: Props.Link(props => ({\n label: 'Redirect to',\n // TODO: This option is hardcoded. We should import it from LinkPanelOptions\n options: [\n { value: 'OPEN_PAGE', label: 'Open page' },\n { value: 'OPEN_URL', label: 'Open URL' },\n ],\n hidden: props.tableId == null,\n })),\n gap: Props.GapY(props => ({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 10, unit: 'px' },\n },\n ],\n label: 'Gap',\n defaultValue: { value: 0, unit: 'px' },\n hidden: props.tableId == null,\n })),\n shape: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Shape',\n options: [\n { label: 'Pill', value: Shapes.PILL, icon: 'ButtonPill16' },\n { label: 'Rounded', value: Shapes.ROUNDED, icon: 'ButtonRounded16' },\n { label: 'Square', value: Shapes.SQUARE, icon: 'ButtonSquare16' },\n ],\n defaultValue: Shapes.ROUNDED,\n hidden: props.tableId == null,\n })),\n size: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Size',\n options: [\n { label: 'Small', value: Sizes.SMALL, icon: 'SizeSmall16' },\n { label: 'Medium', value: Sizes.MEDIUM, icon: 'SizeMedium16' },\n { label: 'Large', value: Sizes.LARGE, icon: 'SizeLarge16' },\n ],\n defaultValue: Sizes.MEDIUM,\n hidden: props?.tableId == null,\n })),\n contrast: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Color',\n options: [\n { label: 'Light mode', value: Contrasts.LIGHT, icon: 'Sun16' },\n { label: 'Dark mode', value: Contrasts.DARK, icon: 'Moon16' },\n ],\n defaultValue: Contrasts.LIGHT,\n hidden: props.tableId == null,\n })),\n labelTextStyle: Props.TextStyle({ label: 'Label text style' }),\n labelTextColor: Props.ResponsiveColor((props, device) => {\n const hidden = props.tableId == null\n const responsiveContrast = props.contrast as ResponsiveValue<Contrast>\n const contrast = findBreakpointOverride<Contrast>(\n runtime.getBreakpoints(),\n responsiveContrast,\n device,\n )\n\n return {\n hidden,\n label: 'Label text color',\n placeholder:\n contrast?.value === Contrasts.DARK ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.8)',\n }\n }),\n submitTextStyle: Props.TextStyle({ label: 'Button text style' }),\n brandColor: Props.ResponsiveColor(props => ({\n label: 'Button color',\n placeholder: 'black',\n hidden: props.tableId == null,\n // TODO: Add hideAlphaSlider\n })),\n submitTextColor: Props.ResponsiveColor(props => ({\n label: 'Button text color',\n placeholder: 'white',\n hidden: props.tableId == null,\n })),\n submitLabel: Props.TextInput(props => ({\n label: 'Button label',\n placeholder: 'Submit',\n hidden: props.tableId == null,\n })),\n submitVariant: Props.ResponsiveSelect(props => ({\n label: 'Button style',\n options: [\n { value: 'flat', label: 'Flat' },\n { value: 'outline', label: 'Outline' },\n { value: 'shadow', label: 'Floating' },\n { value: 'clear', label: 'Clear' },\n { value: 'blocky', label: 'Blocky' },\n { value: 'bubbly', label: 'Bubbly' },\n { value: 'skewed', label: 'Skewed' },\n ],\n defaultValue: 'flat',\n hidden: props.tableId == null,\n })),\n submitWidth: Props.ResponsiveLength(props => ({\n label: 'Button width',\n hidden: props.tableId == null,\n // TODO: Add placeholder: { value: 'auto' }\n })),\n submitAlignment: Props.ResponsiveIconRadioGroup(props => ({\n label: 'Button alignment',\n options: [\n { label: 'Left', value: Alignments.LEFT, icon: 'AlignLeft16' },\n { label: 'Center', value: Alignments.CENTER, icon: 'AlignCenter16' },\n { label: 'Right', value: Alignments.RIGHT, icon: 'AlignRight16' },\n ],\n defaultValue: Alignments.CENTER,\n hidden: props.tableId == null,\n })),\n width: Props.Width({\n preset: [\n {\n deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n value: { value: 550, unit: 'px' },\n },\n ],\n defaultValue: { value: 100, unit: '%' },\n format: Props.Width.Format.ClassName,\n }),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n },\n },\n )\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/cjs/components/builtin/Image/Image.js CHANGED Viewed

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/cjs/components/builtin/Image/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["~~import~~ { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n ElementIDValue,\n ImageValue,\n LinkValue,\n ResponsiveOpacityValue,\n TextInputValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n id?: ElementIDValue\n file?: ImageValue\n altText?: TextInputValue\n link?: LinkValue\n width?: WidthValue\n margin?: string\n padding?: string\n border?: string\n borderRadius?: string\n boxShadow?: string\n opacity?: ResponsiveOpacityValue\n placeholder?: { src: string; dimensions: { width: number; height: number } }\n className?: string\n priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise<HTMLImageElement>((resolve, reject) => {\n const image = new Image()\n\n image.onload = () => resolve(image)\n image.onerror = reject\n image.src = src\n })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n const baseWidthSize =\n baseWidth == null \|\| baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n return breakpoints\n .map(breakpoint => {\n const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n if (override == null \|\| breakpoint.maxWidth == null \|\| override.value.unit !== 'px') {\n return null\n }\n\n return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n breakpoint.maxWidth,\n override.value.value,\n )}px`\n })\n .filter((size): size is NonNullable<typeof size> => size != null)\n .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n width: number\n height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n {\n id,\n width,\n margin,\n padding,\n file,\n border,\n borderRadius,\n altText,\n link,\n opacity,\n boxShadow,\n placeholder = placeholders.image,\n className,\n priority,\n }: Props,\n ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n const fileId = match(file)\n .with(P.string, v => v)\n .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n .otherwise(() => null)\n const fileData = useFile(fileId)\n const imageSrc = match([file, fileData])\n .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n .otherwise(() => placeholder.src)\n const dataDimensions = match([file, fileData, imageSrc])\n .with(\n [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n )\n .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n .otherwise(() => null)\n const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions \| null>(null)\n const breakpoints = useBreakpoints()\n\n useEffect(() => {\n if (dataDimensions) return\n\n let cleanedUp = false\n\n loadImage(imageSrc)\n .then(image => {\n if (!cleanedUp) {\n setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n }\n })\n .catch(console.error)\n\n return () => {\n cleanedUp = true\n }\n }, [dataDimensions, imageSrc])\n\n const dimensions = dataDimensions ?? measuredDimensions\n const Container = link ? Link : 'div'\n const containerClassName = cx(\n useStyle({ lineHeight: 0, overflow: 'hidden' }),\n useStyle(useResponsiveWidth(width, dimensions?.width)),\n useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n margin,\n padding,\n border,\n borderRadius,\n boxShadow,\n className,\n )\n\n if (!dimensions) return null\n\n return (\n <Container link={link} ref={ref} id={id} className={containerClassName}>\n {nextMajorVersion < 13 ? (\n <NextLegacyImage\n layout=\"responsive\"\n src={imageSrc}\n sizes={imageSizes(breakpoints, width)}\n alt={altText}\n width={dimensions.width}\n height={dimensions.height}\n priority={priority}\n />\n ) : (\n <NextImage\n src={imageSrc}\n priority={priority}\n sizes={imageSizes(breakpoints, width)}\n alt={altText ?? ''}\n width={dimensions.width}\n height={dimensions.height}\n style={{\n width: '100%',\n height: 'auto',\n }}\n />\n )}\n </Container>\n )\n})\n\nexport default ImageComponent\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA;AAAA;AAAA;AAAA;AAAA;~~AA4JQ~~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","names":["import_react","NextImage","Image","fileData","file","opacity","nextMajorVersion"]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n ElementIDValue,\n ImageValue,\n LinkValue,\n ResponsiveOpacityValue,\n TextInputValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { Breakpoints, findBreakpointOverride } from '../../../state/modules/breakpoints'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\nimport { useBreakpoints } from '../../../runtimes/react'\nimport { match, P } from 'ts-pattern'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n id?: ElementIDValue\n file?: ImageValue\n altText?: TextInputValue\n link?: LinkValue\n width?: WidthValue\n margin?: string\n padding?: string\n border?: string\n borderRadius?: string\n boxShadow?: string\n opacity?: ResponsiveOpacityValue\n placeholder?: { src: string; dimensions: { width: number; height: number } }\n className?: string\n priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n return new Promise<HTMLImageElement>((resolve, reject) => {\n const image = new Image()\n\n image.onload = () => resolve(image)\n image.onerror = reject\n image.src = src\n })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n const baseWidthSize =\n baseWidth == null \|\| baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n return breakpoints\n .map(breakpoint => {\n const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n if (override == null \|\| breakpoint.maxWidth == null \|\| override.value.unit !== 'px') {\n return null\n }\n\n return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n breakpoint.maxWidth,\n override.value.value,\n )}px`\n })\n .filter((size): size is NonNullable<typeof size> => size != null)\n .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n width: number\n height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n {\n id,\n width,\n margin,\n padding,\n file,\n border,\n borderRadius,\n altText,\n link,\n opacity,\n boxShadow,\n placeholder = placeholders.image,\n className,\n priority,\n }: Props,\n ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n const fileId = match(file)\n .with(P.string, v => v)\n .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n .otherwise(() => null)\n const fileData = useFile(fileId)\n const imageSrc = match([file, fileData])\n .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n .otherwise(() => placeholder.src)\n const dataDimensions = match([file, fileData, imageSrc])\n .with(\n [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n )\n .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n .otherwise(() => null)\n const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions \| null>(null)\n const breakpoints = useBreakpoints()\n\n useEffect(() => {\n if (dataDimensions) return\n\n let cleanedUp = false\n\n loadImage(imageSrc)\n .then(image => {\n if (!cleanedUp) {\n setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n }\n })\n .catch(console.error)\n\n return () => {\n cleanedUp = true\n }\n }, [dataDimensions, imageSrc])\n\n const dimensions = dataDimensions ?? measuredDimensions\n const Container = link ? Link : 'div'\n const containerClassName = cx(\n useStyle({ lineHeight: 0, overflow: 'hidden' }),\n useStyle(useResponsiveWidth(width, dimensions?.width)),\n useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n margin,\n padding,\n border,\n borderRadius,\n boxShadow,\n className,\n )\n\n if (!dimensions) return null\n\n return (\n <Container link={link} ref={ref} id={id} className={containerClassName}>\n {nextMajorVersion < 13 ? (\n <NextLegacyImage\n layout=\"responsive\"\n src={imageSrc}\n sizes={imageSizes(breakpoints, width)}\n alt={altText}\n width={dimensions.width}\n height={dimensions.height}\n priority={priority}\n />\n ) : (\n <NextImage\n src={imageSrc}\n priority={priority}\n sizes={imageSizes(breakpoints, width)}\n alt={altText ?? ''}\n width={dimensions.width}\n height={dimensions.height}\n style={{\n width: '100%',\n height: 'auto',\n }}\n />\n )}\n </Container>\n )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["import_react","NextImage","Image","fileData","file","opacity","nextMajorVersion"]}

package/dist/cjs/components/builtin/Image/register.js CHANGED Viewed

@@ -31,13 +31,12 @@ __export(register_exports, {
   registerComponent: () => registerComponent
 });
 module.exports = __toCommonJS(register_exports);
-var import_dynamic = __toESM(require("next/dynamic"));
-var import_dynamic2 = require("../../../next/dynamic");
+var import_react = require("react");
 var import_prop_controllers = require("../../../prop-controllers");
 var import_constants = require("../constants");
 function registerComponent(runtime) {
   return runtime.registerComponent(
-    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(Promise.resolve().then(() => __toESM(require("./Image")))))),
+    (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./Image")))),
     {
       type: import_constants.MakeswiftComponentType.Image,
       label: "Image",

package/dist/cjs/components/builtin/Image/register.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import ~~dynamic from 'next/dynamic'\nimport~~ { ~~forwardNextDynamicRef~~ } from '~~../../../next/dynamic~~'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n ~~forwardNextDynamicRef~~(~~patch => dynamic~~(() => ~~patch(~~import('./Image')))),\n {\n type: MakeswiftComponentType.Image,\n label: 'Image',\n props: {\n id: Props.ElementID(),\n file: Props.Image(),\n altText: Props.TextInput({ label: 'Alt text' }),\n link: Props.Link({ label: 'On click' }),\n width: Props.Width(),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n padding: Props.Padding({ format: Props.Padding.Format.ClassName }),\n border: Props.Border({ format: Props.Border.Format.ClassName }),\n borderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n boxShadow: Props.Shadows({ format: Props.Shadows.Format.ClassName }),\n opacity: Props.ResponsiveOpacity(),\n priority: Props.Checkbox({ label: 'Priority' }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~qBAAoB~~;~~AACpB~~,~~IAAAA,kBAAsC;AACtC,~~8BAAsB;AAEtB,uBAAuC;AAEhC,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,~~uCAAsB~~,~~eAAS,eAAAC,SAAQ,~~MAAM,~~MAAM,~~6CAAO,SAAS,GAAC~~,CAAC,CAAC~~;AAAA,~~IACtE~~;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,MAAM;AAAA,QAClB,SAAS,8BAAM,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QAC9C,MAAM,8BAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QACtC,OAAO,8BAAM,MAAM;AAAA,QACnB,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,SAAS,8BAAM,QAAQ,EAAE,QAAQ,8BAAM,QAAQ,OAAO,UAAU,CAAC;AAAA,QACjE,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,cAAc,8BAAM,aAAa,EAAE,QAAQ,8BAAM,aAAa,OAAO,UAAU,CAAC;AAAA,QAChF,WAAW,8BAAM,QAAQ,EAAE,QAAQ,8BAAM,QAAQ,OAAO,UAAU,CAAC;AAAA,QACnE,SAAS,8BAAM,kBAAkB;AAAA,QACjC,UAAU,8BAAM,SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAChD;AAAA,IACF;AAAA,EACF;AACF;","names":[~~"import_dynamic","dynamic"~~]}
1	+ {"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { MakeswiftComponentType } from '../constants'\n\nexport function registerComponent(runtime: ReactRuntime) {\n return runtime.registerComponent(\n lazy(() => import('./Image')),\n {\n type: MakeswiftComponentType.Image,\n label: 'Image',\n props: {\n id: Props.ElementID(),\n file: Props.Image(),\n altText: Props.TextInput({ label: 'Alt text' }),\n link: Props.Link({ label: 'On click' }),\n width: Props.Width(),\n margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n padding: Props.Padding({ format: Props.Padding.Format.ClassName }),\n border: Props.Border({ format: Props.Border.Format.ClassName }),\n borderRadius: Props.BorderRadius({ format: Props.BorderRadius.Format.ClassName }),\n boxShadow: Props.Shadows({ format: Props.Shadows.Format.ClassName }),\n opacity: Props.ResponsiveOpacity(),\n priority: Props.Checkbox({ label: 'Priority' }),\n },\n },\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqB;AACrB,8BAAsB;AAEtB,uBAAuC;AAEhC,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,QACb,mBAAK,MAAM,6CAAO,SAAS,GAAC;AAAA,IAC5B;AAAA,MACE,MAAM,wCAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,8BAAM,UAAU;AAAA,QACpB,MAAM,8BAAM,MAAM;AAAA,QAClB,SAAS,8BAAM,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QAC9C,MAAM,8BAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QACtC,OAAO,8BAAM,MAAM;AAAA,QACnB,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,SAAS,8BAAM,QAAQ,EAAE,QAAQ,8BAAM,QAAQ,OAAO,UAAU,CAAC;AAAA,QACjE,QAAQ,8BAAM,OAAO,EAAE,QAAQ,8BAAM,OAAO,OAAO,UAAU,CAAC;AAAA,QAC9D,cAAc,8BAAM,aAAa,EAAE,QAAQ,8BAAM,aAAa,OAAO,UAAU,CAAC;AAAA,QAChF,WAAW,8BAAM,QAAQ,EAAE,QAAQ,8BAAM,QAAQ,OAAO,UAAU,CAAC;AAAA,QACnE,SAAS,8BAAM,kBAAkB;AAAA,QACjC,UAAU,8BAAM,SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAChD;AAAA,IACF;AAAA,EACF;AACF;","names":[]}