@makeswift/runtime 0.26.2 → 0.26.3

package/dist/cjs/runtimes/react/legacy-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/legacy-controls.tsx"],"sourcesContent":["import {\n  useBoxShadow,\n  useBorder as useBorderData,\n  useLinkPropControllerData,\n  useCheckboxPropControllerData,\n  useDatePropControllerData,\n  useFontPropControllerData,\n  useVideoPropControllerData,\n  useTablePropControllerData,\n} from '../../components/hooks'\nimport type { ColorValue } from '../../components/utils/types'\nimport {\n  useResponsiveBorder,\n  useResponsiveBorderRadius,\n  useResponsiveMargin,\n  useResponsivePadding,\n  useResponsiveShadow,\n  useResponsiveWidth,\n} from '../../components/utils/responsive-style'\n\nimport { RenderHook } from './components'\nimport { useStyle } from './use-style'\n\nimport {\n  Types as PropControllerTypes,\n  getShadowsPropControllerDataResponsiveShadowsData,\n  ShadowsPropControllerData,\n  Shadows,\n  ResponsiveValue,\n  BorderPropControllerFormat,\n  ResponsiveBorderData,\n  BorderPropControllerData,\n  getBorderPropControllerDataResponsiveBorderData,\n  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,\n  BorderRadiusPropControllerData,\n  BorderRadiusPropControllerFormat,\n  MarginPropControllerFormat,\n  MarginPropControllerData,\n  getMarginPropControllerDataResponsiveMarginData,\n  PaddingPropControllerData,\n  getPaddingPropControllerDataResponsivePaddingData,\n  PaddingPropControllerFormat,\n  WidthPropControllerData,\n  getWidthPropControllerDataResponsiveLengthData,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  GapX,\n  ResponsiveNumber,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  ResponsiveOpacity,\n  getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nimport { LegacyDescriptor } from '../../prop-controllers/descriptors'\nimport { useResponsiveLengthPropControllerData } from '../../components/hooks/useResponsiveLengthPropControllerData'\nimport { useNumberPropControllerData } from '../../components/hooks/useNumberPropControllerData'\nimport { useResponsiveColorPropControllerData } from '../../components/hooks/useResponsiveColorPropControllerData'\nimport { useTextStylePropControllerData } from '../../components/hooks/useTextStylePropControllerData'\nimport { useNavigationLinksPropControllerData } from '../../components/hooks/useNavigationLinksPropControllerData'\nimport { useTextAreaPropControllerData } from '../../components/hooks/useTextAreaPropControllerData'\nimport { usePropValue } from '../../components/hooks/usePropValue'\nimport { useGapYPropControllerData } from '../../components/hooks/useGapYPropControllerData'\nimport { useElementIDPropControllerData } from '../../components/hooks/useElementIDPropControllerData'\nimport { useTableFormFieldsPropControllerData } from '../../components/hooks/useTableFormFieldsPropControllerData'\nimport { useGridPropControllerData } from '../../components/hooks/useGridPropControllerData'\nimport { useImagePropControllerData } from '../../components/hooks/useImagePropControllerData'\nimport { useImagesPropControllerData } from '../../components/hooks/useImagesPropControllerData'\nimport { useBackgroundsPropControllerData } from '../../components/hooks/useBackgroundsPropControllerData'\nimport { useTextInputPropControllerData } from '../../components/hooks/useTextInputPropControllerData'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(\n  data: WidthPropControllerData | undefined,\n  descriptor: WidthDescriptor,\n): string {\n  const value = getWidthPropControllerDataResponsiveLengthData(data)\n\n  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue))\n}\n\nfunction usePaddingStyle(data: PaddingPropControllerData | undefined): string {\n  const value = getPaddingPropControllerDataResponsivePaddingData(data)\n\n  return useStyle(useResponsivePadding(value))\n}\n\nfunction useMarginStyle(data: MarginPropControllerData | undefined): string {\n  const value = getMarginPropControllerDataResponsiveMarginData(data)\n\n  return useStyle(useResponsiveMargin(value))\n}\n\nfunction useBorderRadiusStyle(data: BorderRadiusPropControllerData | undefined): string {\n  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data)\n\n  return useStyle(useResponsiveBorderRadius(value))\n}\n\nfunction useShadowsStyle(data: ShadowsPropControllerData | undefined): string {\n  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? undefined))\n}\n\nfunction useBorderStyle(\n  data: BorderPropControllerData | undefined,\n): string | ResponsiveBorderData | undefined {\n  const value = getBorderPropControllerDataResponsiveBorderData(data)\n  const borderData = useBorderData(value)\n\n  return useStyle(useResponsiveBorder(borderData ?? undefined))\n}\n\nexport function resolveLegacyDescriptorProp(\n  descriptor: LegacyDescriptor,\n  propName: string,\n  propData: any,\n  props: Record<string, any>,\n  renderFn: (props: Record<string, unknown>) => JSX.Element,\n) {\n  switch (descriptor.type) {\n    case PropControllerTypes.Width:\n      switch (descriptor.options.format) {\n        case WidthPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useWidthStyle}\n              parameters={[propData, descriptor]}\n            >\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case WidthPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getWidthPropControllerDataResponsiveLengthData(propData),\n          })\n      }\n\n    case PropControllerTypes.Padding:\n      switch (descriptor.options.format) {\n        case PaddingPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={usePaddingStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case PaddingPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getPaddingPropControllerDataResponsivePaddingData(propData),\n          })\n      }\n\n    case PropControllerTypes.Margin:\n      switch (descriptor.options.format) {\n        case MarginPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useMarginStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case MarginPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getMarginPropControllerDataResponsiveMarginData(propData),\n          })\n      }\n\n    case PropControllerTypes.BorderRadius:\n      switch (descriptor.options.format) {\n        case BorderRadiusPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useBorderRadiusStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case BorderRadiusPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(propData),\n          })\n      }\n\n    case PropControllerTypes.Backgrounds:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useBackgroundsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Image:\n      return (\n        <RenderHook key={descriptor.type} hook={useImagePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Images:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useImagesPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Number:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNumberPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveNumber:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveNumber, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveIconRadioGroup:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveIconRadioGroup, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveSelect:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveSelect, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveOpacity:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveOpacity, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveLength:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveLengthPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Shadows:\n      switch (descriptor.options.format) {\n        case Shadows.Format.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useShadowsStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case Shadows.Format.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getShadowsPropControllerDataResponsiveShadowsData(propData),\n          })\n      }\n\n    case PropControllerTypes.Border:\n      switch (descriptor.options.format) {\n        case BorderPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useBorderStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case BorderPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderPropControllerDataResponsiveBorderData(propData),\n          })\n      }\n\n    case PropControllerTypes.ResponsiveColor:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveColorPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Link:\n      return (\n        <RenderHook key={descriptor.type} hook={useLinkPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Checkbox:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useCheckboxPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Date:\n      return (\n        <RenderHook key={descriptor.type} hook={useDatePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Font:\n      return (\n        <RenderHook key={descriptor.type} hook={useFontPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Video:\n      return (\n        <RenderHook key={descriptor.type} hook={useVideoPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Table:\n      return (\n        <RenderHook key={descriptor.type} hook={useTablePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextStyle:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextStylePropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.NavigationLinks:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNavigationLinksPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextInput:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextInputPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextArea:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextAreaPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapX:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(GapX, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapY:\n      return (\n        <RenderHook key={descriptor.type} hook={useGapYPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ElementID:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useElementIDPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TableFormFields:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTableFormFieldsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.SocialLinks:\n      return renderFn({\n        ...props,\n        [propName]: getSocialLinksPropControllerDataSocialLinksData(propData),\n      })\n\n    case PropControllerTypes.Grid:\n      return (\n        <RenderHook key={descriptor.type} hook={useGridPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    default:\n      return renderFn({ ...props, [propName]: propData })\n  }\n}\n"],"mappings":"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","names":["useBorderData","PropControllerTypes"]}
+{"version":3,"sources":["../../../../src/runtimes/react/legacy-controls.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport {\n  useBoxShadow,\n  useBorder as useBorderData,\n  useLinkPropControllerData,\n  useCheckboxPropControllerData,\n  useDatePropControllerData,\n  useFontPropControllerData,\n  useVideoPropControllerData,\n  useTablePropControllerData,\n} from '../../components/hooks'\nimport type { ColorValue } from '../../components/utils/types'\nimport {\n  useResponsiveBorder,\n  useResponsiveBorderRadius,\n  useResponsiveMargin,\n  useResponsivePadding,\n  useResponsiveShadow,\n  useResponsiveWidth,\n} from '../../components/utils/responsive-style'\n\nimport { RenderHook } from './components'\nimport { useStyle } from './use-style'\n\nimport {\n  Types as PropControllerTypes,\n  getShadowsPropControllerDataResponsiveShadowsData,\n  ShadowsPropControllerData,\n  Shadows,\n  ResponsiveValue,\n  BorderPropControllerFormat,\n  ResponsiveBorderData,\n  BorderPropControllerData,\n  getBorderPropControllerDataResponsiveBorderData,\n  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,\n  BorderRadiusPropControllerData,\n  BorderRadiusPropControllerFormat,\n  MarginPropControllerFormat,\n  MarginPropControllerData,\n  getMarginPropControllerDataResponsiveMarginData,\n  PaddingPropControllerData,\n  getPaddingPropControllerDataResponsivePaddingData,\n  PaddingPropControllerFormat,\n  WidthPropControllerData,\n  getWidthPropControllerDataResponsiveLengthData,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  GapX,\n  ResponsiveNumber,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  ResponsiveOpacity,\n  getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nimport { LegacyDescriptor } from '../../prop-controllers/descriptors'\nimport { useResponsiveLengthPropControllerData } from '../../components/hooks/useResponsiveLengthPropControllerData'\nimport { useNumberPropControllerData } from '../../components/hooks/useNumberPropControllerData'\nimport { useResponsiveColorPropControllerData } from '../../components/hooks/useResponsiveColorPropControllerData'\nimport { useTextStylePropControllerData } from '../../components/hooks/useTextStylePropControllerData'\nimport { useNavigationLinksPropControllerData } from '../../components/hooks/useNavigationLinksPropControllerData'\nimport { useTextAreaPropControllerData } from '../../components/hooks/useTextAreaPropControllerData'\nimport { usePropValue } from '../../components/hooks/usePropValue'\nimport { useGapYPropControllerData } from '../../components/hooks/useGapYPropControllerData'\nimport { useElementIDPropControllerData } from '../../components/hooks/useElementIDPropControllerData'\nimport { useTableFormFieldsPropControllerData } from '../../components/hooks/useTableFormFieldsPropControllerData'\nimport { useGridPropControllerData } from '../../components/hooks/useGridPropControllerData'\nimport { useImagePropControllerData } from '../../components/hooks/useImagePropControllerData'\nimport { useImagesPropControllerData } from '../../components/hooks/useImagesPropControllerData'\nimport { useBackgroundsPropControllerData } from '../../components/hooks/useBackgroundsPropControllerData'\nimport { useTextInputPropControllerData } from '../../components/hooks/useTextInputPropControllerData'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(\n  data: WidthPropControllerData | undefined,\n  descriptor: WidthDescriptor,\n): string {\n  const value = getWidthPropControllerDataResponsiveLengthData(data)\n\n  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue))\n}\n\nfunction usePaddingStyle(data: PaddingPropControllerData | undefined): string {\n  const value = getPaddingPropControllerDataResponsivePaddingData(data)\n\n  return useStyle(useResponsivePadding(value))\n}\n\nfunction useMarginStyle(data: MarginPropControllerData | undefined): string {\n  const value = getMarginPropControllerDataResponsiveMarginData(data)\n\n  return useStyle(useResponsiveMargin(value))\n}\n\nfunction useBorderRadiusStyle(data: BorderRadiusPropControllerData | undefined): string {\n  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data)\n\n  return useStyle(useResponsiveBorderRadius(value))\n}\n\nfunction useShadowsStyle(data: ShadowsPropControllerData | undefined): string {\n  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? undefined))\n}\n\nfunction useBorderStyle(\n  data: BorderPropControllerData | undefined,\n): string | ResponsiveBorderData | undefined {\n  const value = getBorderPropControllerDataResponsiveBorderData(data)\n  const borderData = useBorderData(value)\n\n  return useStyle(useResponsiveBorder(borderData ?? undefined))\n}\n\nexport function resolveLegacyDescriptorProp(\n  descriptor: LegacyDescriptor,\n  propName: string,\n  propData: any,\n  props: Record<string, any>,\n  renderFn: (props: Record<string, unknown>) => ReactNode,\n) {\n  switch (descriptor.type) {\n    case PropControllerTypes.Width:\n      switch (descriptor.options.format) {\n        case WidthPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useWidthStyle}\n              parameters={[propData, descriptor]}\n            >\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case WidthPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getWidthPropControllerDataResponsiveLengthData(propData),\n          })\n      }\n\n    case PropControllerTypes.Padding:\n      switch (descriptor.options.format) {\n        case PaddingPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={usePaddingStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case PaddingPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getPaddingPropControllerDataResponsivePaddingData(propData),\n          })\n      }\n\n    case PropControllerTypes.Margin:\n      switch (descriptor.options.format) {\n        case MarginPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useMarginStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case MarginPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getMarginPropControllerDataResponsiveMarginData(propData),\n          })\n      }\n\n    case PropControllerTypes.BorderRadius:\n      switch (descriptor.options.format) {\n        case BorderRadiusPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useBorderRadiusStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case BorderRadiusPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(propData),\n          })\n      }\n\n    case PropControllerTypes.Backgrounds:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useBackgroundsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Image:\n      return (\n        <RenderHook key={descriptor.type} hook={useImagePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Images:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useImagesPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Number:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNumberPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveNumber:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveNumber, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveIconRadioGroup:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveIconRadioGroup, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveSelect:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveSelect, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveOpacity:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveOpacity, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveLength:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveLengthPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Shadows:\n      switch (descriptor.options.format) {\n        case Shadows.Format.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useShadowsStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case Shadows.Format.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getShadowsPropControllerDataResponsiveShadowsData(propData),\n          })\n      }\n\n    case PropControllerTypes.Border:\n      switch (descriptor.options.format) {\n        case BorderPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useBorderStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case BorderPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderPropControllerDataResponsiveBorderData(propData),\n          })\n      }\n\n    case PropControllerTypes.ResponsiveColor:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveColorPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Link:\n      return (\n        <RenderHook key={descriptor.type} hook={useLinkPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Checkbox:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useCheckboxPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Date:\n      return (\n        <RenderHook key={descriptor.type} hook={useDatePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Font:\n      return (\n        <RenderHook key={descriptor.type} hook={useFontPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Video:\n      return (\n        <RenderHook key={descriptor.type} hook={useVideoPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Table:\n      return (\n        <RenderHook key={descriptor.type} hook={useTablePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextStyle:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextStylePropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.NavigationLinks:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNavigationLinksPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextInput:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextInputPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextArea:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextAreaPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapX:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(GapX, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapY:\n      return (\n        <RenderHook key={descriptor.type} hook={useGapYPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ElementID:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useElementIDPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TableFormFields:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTableFormFieldsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.SocialLinks:\n      return renderFn({\n        ...props,\n        [propName]: getSocialLinksPropControllerDataSocialLinksData(propData),\n      })\n\n    case PropControllerTypes.Grid:\n      return (\n        <RenderHook key={descriptor.type} hook={useGridPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    default:\n      return renderFn({ ...props, [propName]: propData })\n  }\n}\n"],"mappings":"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","names":["useBorderData","PropControllerTypes"]}

package/dist/cjs/runtimes/react/lib/react-dom.js

@@ -32,9 +32,10 @@ __export(react_dom_exports, {
 });
 module.exports = __toCommonJS(react_dom_exports);
 var import_react_dom = __toESM(require("react-dom"));
+const ReactDOMCompat = import_react_dom.default;
 const reactDOMInternals = import_react_dom.default.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 function findDOMNode(instance) {
-  return import_react_dom.default.findDOMNode ? import_react_dom.default.findDOMNode(instance) : reactDOMInternals.findDOMNode(instance);
+  return ReactDOMCompat.findDOMNode ? ReactDOMCompat.findDOMNode(instance) : reactDOMInternals.findDOMNode(instance);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/runtimes/react/lib/react-dom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/lib/react-dom.ts"],"sourcesContent":["import { type Component } from 'react'\nimport ReactDOM from 'react-dom'\n\n// https://github.com/facebook/react/blob/main/packages/shared/ReactDOMSharedInternals.js\nconst reactDOMInternals = (ReactDOM as any)\n  .__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE as {\n  findDOMNode: typeof ReactDOM.findDOMNode\n}\n\nexport function findDOMNode(instance: Component | null | undefined): Element | Text | null {\n  return ReactDOM.findDOMNode\n    ? ReactDOM.findDOMNode(instance)\n    : reactDOMInternals.findDOMNode(instance)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAAqB;AAGrB,MAAM,oBAAqB,iBAAAA,QACxB;AAII,SAAS,YAAY,UAA+D;AACzF,SAAO,iBAAAA,QAAS,cACZ,iBAAAA,QAAS,YAAY,QAAQ,IAC7B,kBAAkB,YAAY,QAAQ;AAC5C;","names":["ReactDOM"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/lib/react-dom.ts"],"sourcesContent":["import { type Component } from 'react'\nimport ReactDOM from 'react-dom'\n\ntype FindDOMNodeFn = (instance: Component | null | undefined) => Element | Text | null\n\ntype ReactDOMWithLegacyFindDOMNode = typeof ReactDOM & { findDOMNode?: FindDOMNodeFn }\n\n// For React 18 and below\nconst ReactDOMCompat = ReactDOM as ReactDOMWithLegacyFindDOMNode\n\n// For React 19\n// https://github.com/facebook/react/blob/main/packages/shared/ReactDOMSharedInternals.js\nconst reactDOMInternals = (ReactDOM as any)\n  .__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE as {\n  findDOMNode: FindDOMNodeFn\n}\n\nexport function findDOMNode(instance: Component | null | undefined): Element | Text | null {\n  return ReactDOMCompat.findDOMNode\n    ? ReactDOMCompat.findDOMNode(instance)\n    : reactDOMInternals.findDOMNode(instance)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAAqB;AAOrB,MAAM,iBAAiB,iBAAAA;AAIvB,MAAM,oBAAqB,iBAAAA,QACxB;AAII,SAAS,YAAY,UAA+D;AACzF,SAAO,eAAe,cAClB,eAAe,YAAY,QAAQ,IACnC,kBAAkB,YAAY,QAAQ;AAC5C;","names":["ReactDOM"]}

package/dist/cjs/runtimes/react/react-runtime-core.js

@@ -21,6 +21,7 @@ __export(react_runtime_core_exports, {
   ReactRuntimeCore: () => ReactRuntimeCore
 });
 module.exports = __toCommonJS(react_runtime_core_exports);
+var import_activity_with_fallback = require("./components/activity-with-fallback");
 var import_internal = require("../../state/actions/internal");
 var import_components_meta = require("../../state/modules/components-meta");
 var import_runtime_core = require("./runtime-core");
@@ -50,6 +51,11 @@ class ReactRuntimeCore extends import_runtime_core.RuntimeCore {
         props ?? {}
       )
     );
+    if ((0, import_activity_with_fallback.supportsActivity)() && builtinSuspense !== void 0) {
+      console.warn(
+        "builtinSuspense is ignored in React >= 19.2; components are always wrapped in <Activity>."
+      );
+    }
     const unregisterReactComponent = this.store.dispatch(
       (0, import_internal.registerReactComponentEffect)(type, component)
     );

package/dist/cjs/runtimes/react/react-runtime-core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/react-runtime-core.ts"],"sourcesContent":["import { ControlDefinition as UnifiedControlDefinition } from '@makeswift/controls'\n\nimport { type LegacyDescriptor, type DescriptorValueType } from '../../prop-controllers/descriptors'\n\nimport { registerComponentEffect, registerReactComponentEffect } from '../../state/actions/internal'\n\nimport { BreakpointsInput } from '../../state/modules/breakpoints'\nimport { ComponentIcon } from '../../state/modules/components-meta'\nimport type { ComponentType } from '../../state/react-page'\n\nimport { RuntimeCore } from './runtime-core'\n\nfunction validateComponentType(type: string, component?: ComponentType): void {\n  const componentName = component?.name ?? 'Component'\n  if (typeof type !== 'string' || type === '') {\n    throw new Error(\n      `${componentName}: A non-empty string \\`type\\` is required for component registration, got ${type}`,\n    )\n  }\n}\n\nexport class ReactRuntimeCore extends RuntimeCore {\n  registerComponent<\n    ControlDef extends UnifiedControlDefinition,\n    P extends Record<string, LegacyDescriptor | ControlDef>,\n    C extends ComponentType<{ [K in keyof P]: DescriptorValueType<P[K]> }>,\n  >(\n    component: C,\n    {\n      type,\n      label,\n      icon = ComponentIcon.Cube,\n      hidden = false,\n      description,\n      builtinSuspense,\n      props,\n    }: {\n      type: string\n      label: string\n      icon?: ComponentIcon\n      hidden?: boolean\n      description?: string\n      builtinSuspense?: boolean\n      props?: P\n    },\n  ): () => void {\n    validateComponentType(type, component as unknown as ComponentType)\n\n    const unregisterComponent = this.store.dispatch(\n      registerComponentEffect(\n        type,\n        { label, icon, hidden, description, builtinSuspense },\n        props ?? {},\n      ),\n    )\n\n    const unregisterReactComponent = this.store.dispatch(\n      registerReactComponentEffect(type, component as unknown as ComponentType),\n    )\n\n    return () => {\n      unregisterComponent()\n      unregisterReactComponent()\n    }\n  }\n\n  constructor({ breakpoints }: { breakpoints?: BreakpointsInput } = {}) {\n    super({ breakpoints })\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,sBAAsE;AAGtE,6BAA8B;AAG9B,0BAA4B;AAE5B,SAAS,sBAAsB,MAAc,WAAiC;AAC5E,QAAM,gBAAgB,WAAW,QAAQ;AACzC,MAAI,OAAO,SAAS,YAAY,SAAS,IAAI;AAC3C,UAAM,IAAI;AAAA,MACR,GAAG,aAAa,6EAA6E,IAAI;AAAA,IACnG;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,gCAAY;AAAA,EAChD,kBAKE,WACA;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO,qCAAc;AAAA,IACrB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EACF,GASY;AACZ,0BAAsB,MAAM,SAAqC;AAEjE,UAAM,sBAAsB,KAAK,MAAM;AAAA,UACrC;AAAA,QACE;AAAA,QACA,EAAE,OAAO,MAAM,QAAQ,aAAa,gBAAgB;AAAA,QACpD,SAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,2BAA2B,KAAK,MAAM;AAAA,UAC1C,8CAA6B,MAAM,SAAqC;AAAA,IAC1E;AAEA,WAAO,MAAM;AACX,0BAAoB;AACpB,+BAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,YAAY,EAAE,YAAY,IAAwC,CAAC,GAAG;AACpE,UAAM,EAAE,YAAY,CAAC;AAAA,EACvB;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/react-runtime-core.ts"],"sourcesContent":["import { ControlDefinition as UnifiedControlDefinition } from '@makeswift/controls'\n\nimport { type LegacyDescriptor, type DescriptorValueType } from '../../prop-controllers/descriptors'\n\nimport { supportsActivity } from './components/activity-with-fallback'\n\nimport { registerComponentEffect, registerReactComponentEffect } from '../../state/actions/internal'\n\nimport { BreakpointsInput } from '../../state/modules/breakpoints'\nimport { ComponentIcon } from '../../state/modules/components-meta'\nimport type { ComponentType } from '../../state/react-page'\n\nimport { RuntimeCore } from './runtime-core'\n\nfunction validateComponentType(type: string, component?: ComponentType): void {\n  const componentName = component?.name ?? 'Component'\n  if (typeof type !== 'string' || type === '') {\n    throw new Error(\n      `${componentName}: A non-empty string \\`type\\` is required for component registration, got ${type}`,\n    )\n  }\n}\n\nexport class ReactRuntimeCore extends RuntimeCore {\n  registerComponent<\n    ControlDef extends UnifiedControlDefinition,\n    P extends Record<string, LegacyDescriptor | ControlDef>,\n    C extends ComponentType<{ [K in keyof P]: DescriptorValueType<P[K]> }>,\n  >(\n    component: C,\n    {\n      type,\n      label,\n      icon = ComponentIcon.Cube,\n      hidden = false,\n      description,\n      builtinSuspense,\n      props,\n    }: {\n      type: string\n      label: string\n      icon?: ComponentIcon\n      hidden?: boolean\n      description?: string\n      /**\n       * In React <= 19.1, controls the default `<Suspense>` boundary.\n       * Ignored in React >= 19.2; components are always wrapped in `<Activity>`.\n       * Defaults to `true`.\n       */\n      builtinSuspense?: boolean\n      props?: P\n    },\n  ): () => void {\n    validateComponentType(type, component as unknown as ComponentType)\n\n    const unregisterComponent = this.store.dispatch(\n      registerComponentEffect(\n        type,\n        { label, icon, hidden, description, builtinSuspense },\n        props ?? {},\n      ),\n    )\n\n    if (supportsActivity() && builtinSuspense !== undefined) {\n      console.warn(\n        'builtinSuspense is ignored in React >= 19.2; components are always wrapped in <Activity>.',\n      )\n    }\n\n    const unregisterReactComponent = this.store.dispatch(\n      registerReactComponentEffect(type, component as unknown as ComponentType),\n    )\n\n    return () => {\n      unregisterComponent()\n      unregisterReactComponent()\n    }\n  }\n\n  constructor({ breakpoints }: { breakpoints?: BreakpointsInput } = {}) {\n    super({ breakpoints })\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,oCAAiC;AAEjC,sBAAsE;AAGtE,6BAA8B;AAG9B,0BAA4B;AAE5B,SAAS,sBAAsB,MAAc,WAAiC;AAC5E,QAAM,gBAAgB,WAAW,QAAQ;AACzC,MAAI,OAAO,SAAS,YAAY,SAAS,IAAI;AAC3C,UAAM,IAAI;AAAA,MACR,GAAG,aAAa,6EAA6E,IAAI;AAAA,IACnG;AAAA,EACF;AACF;AAEO,MAAM,yBAAyB,gCAAY;AAAA,EAChD,kBAKE,WACA;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO,qCAAc;AAAA,IACrB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAcY;AACZ,0BAAsB,MAAM,SAAqC;AAEjE,UAAM,sBAAsB,KAAK,MAAM;AAAA,UACrC;AAAA,QACE;AAAA,QACA,EAAE,OAAO,MAAM,QAAQ,aAAa,gBAAgB;AAAA,QACpD,SAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAEA,YAAI,gDAAiB,KAAK,oBAAoB,QAAW;AACvD,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,UAAM,2BAA2B,KAAK,MAAM;AAAA,UAC1C,8CAA6B,MAAM,SAAqC;AAAA,IAC1E;AAEA,WAAO,MAAM;AACX,0BAAoB;AACpB,+BAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EAEA,YAAY,EAAE,YAAY,IAAwC,CAAC,GAAG;AACpE,UAAM,EAAE,YAAY,CAAC;AAAA,EACvB;AACF;","names":[]}

package/dist/cjs/runtimes/react/use-global-style.js

@@ -48,7 +48,7 @@ function useGlobalStyle(...args) {
       cache.insert("", serialized, cache.sheet, true);
     }
   }
-  const sheetRef = (0, import_react.useRef)();
+  const sheetRef = (0, import_react.useRef)(null);
   useInsertionEffect(() => {
     const key = `${cache.key}-global`;
     const cacheSheet = cache.sheet;

package/dist/cjs/runtimes/react/use-global-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/use-global-style.ts"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { CSSInterpolation, serializeStyles } from '@emotion/serialize'\nimport { StyleSheet } from '@emotion/sheet'\nimport { insertStyles } from '@emotion/utils'\n\nimport { useCache } from './root-style-registry'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useGlobalStyle(...args: CSSInterpolation[]): void {\n  const cache = useCache()\n  const serialized = serializeStyles(args, cache.registered)\n\n  if (isServer) {\n    if (cache.inserted[serialized.name] === undefined) {\n      cache.insert('', serialized, cache.sheet, true)\n    }\n  }\n\n  const sheetRef = useRef<[StyleSheet, boolean]>()\n\n  // Hydration\n  useInsertionEffect(() => {\n    const key = `${cache.key}-global`\n\n    const cacheSheet = cache.sheet as StyleSheet\n    const sheet = new (cacheSheet.constructor as typeof StyleSheet)({\n      key,\n      nonce: cacheSheet.nonce,\n      container: cacheSheet.container,\n      speedy: cacheSheet.isSpeedy,\n    })\n\n    const node = document.querySelector<HTMLStyleElement>(\n      `style[data-emotion=\"${key} ${serialized.name}\"]`,\n    )\n\n    if (cache.sheet.tags.length > 0) {\n      sheet.before = cache.sheet.tags[0]\n    }\n\n    let rehydrating = false\n\n    if (node != null) {\n      rehydrating = true\n      node.setAttribute('data-emotion', key)\n      sheet.hydrate([node])\n    }\n\n    sheetRef.current = [sheet, rehydrating]\n\n    return () => {\n      sheet.flush()\n    }\n  })\n\n  // Insertion\n  useInsertionEffect(() => {\n    const [sheet, rehydrating] = sheetRef.current ?? []\n\n    if (sheet == null || rehydrating == null) return\n\n    if (rehydrating) {\n      sheetRef.current = [sheet, false]\n\n      return\n    }\n\n    if (serialized.next != null) {\n      insertStyles(cache, serialized.next, true)\n    }\n\n    if (sheet.tags.length > 0) {\n      const element = sheet.tags[sheet.tags.length - 1].nextElementSibling\n\n      sheet.before = element\n\n      sheet.flush()\n    }\n\n    cache.insert('', serialized, sheet, false)\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,mBAAuB;AACvB,uBAAkD;AAElD,mBAA6B;AAE7B,iCAAyB;AAEzB,MAAM,WAAW,OAAO,WAAW;AACnC,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,MAAM,2BAA2B,KAAK,MAAM;AAEhE,SAAS,kBAAkB,MAAgC;AAChE,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,kCAAgB,MAAM,MAAM,UAAU;AAEzD,MAAI,UAAU;AACZ,QAAI,MAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,YAAM,OAAO,IAAI,YAAY,MAAM,OAAO,IAAI;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,eAAW,qBAA8B;AAG/C,qBAAmB,MAAM;AACvB,UAAM,MAAM,GAAG,MAAM,GAAG;AAExB,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,IAAK,WAAW,YAAkC;AAAA,MAC9D;AAAA,MACA,OAAO,WAAW;AAAA,MAClB,WAAW,WAAW;AAAA,MACtB,QAAQ,WAAW;AAAA,IACrB,CAAC;AAED,UAAM,OAAO,SAAS;AAAA,MACpB,uBAAuB,GAAG,IAAI,WAAW,IAAI;AAAA,IAC/C;AAEA,QAAI,MAAM,MAAM,KAAK,SAAS,GAAG;AAC/B,YAAM,SAAS,MAAM,MAAM,KAAK,CAAC;AAAA,IACnC;AAEA,QAAI,cAAc;AAElB,QAAI,QAAQ,MAAM;AAChB,oBAAc;AACd,WAAK,aAAa,gBAAgB,GAAG;AACrC,YAAM,QAAQ,CAAC,IAAI,CAAC;AAAA,IACtB;AAEA,aAAS,UAAU,CAAC,OAAO,WAAW;AAEtC,WAAO,MAAM;AACX,YAAM,MAAM;AAAA,IACd;AAAA,EACF,CAAC;AAGD,qBAAmB,MAAM;AACvB,UAAM,CAAC,OAAO,WAAW,IAAI,SAAS,WAAW,CAAC;AAElD,QAAI,SAAS,QAAQ,eAAe;AAAM;AAE1C,QAAI,aAAa;AACf,eAAS,UAAU,CAAC,OAAO,KAAK;AAEhC;AAAA,IACF;AAEA,QAAI,WAAW,QAAQ,MAAM;AAC3B,qCAAa,OAAO,WAAW,MAAM,IAAI;AAAA,IAC3C;AAEA,QAAI,MAAM,KAAK,SAAS,GAAG;AACzB,YAAM,UAAU,MAAM,KAAK,MAAM,KAAK,SAAS,CAAC,EAAE;AAElD,YAAM,SAAS;AAEf,YAAM,MAAM;AAAA,IACd;AAEA,UAAM,OAAO,IAAI,YAAY,OAAO,KAAK;AAAA,EAC3C,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/use-global-style.ts"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useRef } from 'react'\nimport { CSSInterpolation, serializeStyles } from '@emotion/serialize'\nimport { StyleSheet } from '@emotion/sheet'\nimport { insertStyles } from '@emotion/utils'\n\nimport { useCache } from './root-style-registry'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useGlobalStyle(...args: CSSInterpolation[]): void {\n  const cache = useCache()\n  const serialized = serializeStyles(args, cache.registered)\n\n  if (isServer) {\n    if (cache.inserted[serialized.name] === undefined) {\n      cache.insert('', serialized, cache.sheet, true)\n    }\n  }\n\n  const sheetRef = useRef<[StyleSheet, boolean] | null>(null)\n\n  // Hydration\n  useInsertionEffect(() => {\n    const key = `${cache.key}-global`\n\n    const cacheSheet = cache.sheet as StyleSheet\n    const sheet = new (cacheSheet.constructor as typeof StyleSheet)({\n      key,\n      nonce: cacheSheet.nonce,\n      container: cacheSheet.container,\n      speedy: cacheSheet.isSpeedy,\n    })\n\n    const node = document.querySelector<HTMLStyleElement>(\n      `style[data-emotion=\"${key} ${serialized.name}\"]`,\n    )\n\n    if (cache.sheet.tags.length > 0) {\n      sheet.before = cache.sheet.tags[0]\n    }\n\n    let rehydrating = false\n\n    if (node != null) {\n      rehydrating = true\n      node.setAttribute('data-emotion', key)\n      sheet.hydrate([node])\n    }\n\n    sheetRef.current = [sheet, rehydrating]\n\n    return () => {\n      sheet.flush()\n    }\n  })\n\n  // Insertion\n  useInsertionEffect(() => {\n    const [sheet, rehydrating] = sheetRef.current ?? []\n\n    if (sheet == null || rehydrating == null) return\n\n    if (rehydrating) {\n      sheetRef.current = [sheet, false]\n\n      return\n    }\n\n    if (serialized.next != null) {\n      insertStyles(cache, serialized.next, true)\n    }\n\n    if (sheet.tags.length > 0) {\n      const element = sheet.tags[sheet.tags.length - 1].nextElementSibling\n\n      sheet.before = element\n\n      sheet.flush()\n    }\n\n    cache.insert('', serialized, sheet, false)\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,mBAAuB;AACvB,uBAAkD;AAElD,mBAA6B;AAE7B,iCAAyB;AAEzB,MAAM,WAAW,OAAO,WAAW;AACnC,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,MAAM,2BAA2B,KAAK,MAAM;AAEhE,SAAS,kBAAkB,MAAgC;AAChE,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,kCAAgB,MAAM,MAAM,UAAU;AAEzD,MAAI,UAAU;AACZ,QAAI,MAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,YAAM,OAAO,IAAI,YAAY,MAAM,OAAO,IAAI;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,eAAW,qBAAqC,IAAI;AAG1D,qBAAmB,MAAM;AACvB,UAAM,MAAM,GAAG,MAAM,GAAG;AAExB,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,IAAK,WAAW,YAAkC;AAAA,MAC9D;AAAA,MACA,OAAO,WAAW;AAAA,MAClB,WAAW,WAAW;AAAA,MACtB,QAAQ,WAAW;AAAA,IACrB,CAAC;AAED,UAAM,OAAO,SAAS;AAAA,MACpB,uBAAuB,GAAG,IAAI,WAAW,IAAI;AAAA,IAC/C;AAEA,QAAI,MAAM,MAAM,KAAK,SAAS,GAAG;AAC/B,YAAM,SAAS,MAAM,MAAM,KAAK,CAAC;AAAA,IACnC;AAEA,QAAI,cAAc;AAElB,QAAI,QAAQ,MAAM;AAChB,oBAAc;AACd,WAAK,aAAa,gBAAgB,GAAG;AACrC,YAAM,QAAQ,CAAC,IAAI,CAAC;AAAA,IACtB;AAEA,aAAS,UAAU,CAAC,OAAO,WAAW;AAEtC,WAAO,MAAM;AACX,YAAM,MAAM;AAAA,IACd;AAAA,EACF,CAAC;AAGD,qBAAmB,MAAM;AACvB,UAAM,CAAC,OAAO,WAAW,IAAI,SAAS,WAAW,CAAC;AAElD,QAAI,SAAS,QAAQ,eAAe;AAAM;AAE1C,QAAI,aAAa;AACf,eAAS,UAAU,CAAC,OAAO,KAAK;AAEhC;AAAA,IACF;AAEA,QAAI,WAAW,QAAQ,MAAM;AAC3B,qCAAa,OAAO,WAAW,MAAM,IAAI;AAAA,IAC3C;AAEA,QAAI,MAAM,KAAK,SAAS,GAAG;AACzB,YAAM,UAAU,MAAM,KAAK,MAAM,KAAK,SAAS,CAAC,EAAE;AAElD,YAAM,SAAS;AAEf,YAAM,MAAM;AAAA,IACd;AAEA,UAAM,OAAO,IAAI,YAAY,OAAO,KAAK;AAAA,EAC3C,CAAC;AACH;","names":[]}

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.26.2",
+    version: "0.26.3",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/client/index.js

@@ -196,7 +196,7 @@ Received "${apiKey}" instead.`
       );
     }
     this.graphqlClient = new GraphQLClient(new URL("graphql", apiOrigin).href, {
-      "makeswift-runtime-version": "0.26.2"
+      "makeswift-runtime-version": "0.26.3"
     });
     this.runtime = runtime;
   }
@@ -205,7 +205,7 @@ Received "${apiKey}" instead.`
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.26.2"
+      "makeswift-runtime-version": "0.26.3"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);
@@ -652,7 +652,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.26.2",
+        "makeswift-runtime-version": "0.26.3",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

package/dist/esm/components/builtin/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  Ref,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<Ref<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color"]}

package/dist/esm/components/builtin/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\n\nimport { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\n\n// Utility to wrap a value within a range. Pulled from:\n// https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/wrap.ts\nfunction wrap(min: number, max: number, v: number): number {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > ${classSelector(slideClassName)}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["Carousel","pageSize","gap"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\n\nimport { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\n\n// Utility to wrap a value within a range. Pulled from:\n// https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/wrap.ts\nfunction wrap(min: number, max: number, v: number): number {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > ${classSelector(slideClassName)}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n              // Upgrade framer-motion package to fix type error\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  key={key}\n                  // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n                  // Upgrade framer-motion package to fix type error\n                  className={slideClassName}\n                  onMouseDown={(e: MouseEvent) => e.preventDefault()}\n                  onClick={(e: MouseEvent) => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";AAyCI,cAySE,YAzSF;AAvCJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,QAAQ,oBAAoB;AACrC,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAE9B,OAAO,WAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAU/B,SAAS,KAAK,KAAa,KAAa,GAAmB;AACzD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;AAEA,MAAM,cAAc,MAClB,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aACrE;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA;AACd,GACF;AAGF,MAAM,eAAe,MACnB,oBAAC,SAAI,OAAM,8BAA6B,OAAM,MAAK,QAAO,MAAK,SAAQ,aACrE;AAAA,EAAC;AAAA;AAAA,IACC,GAAE;AAAA,IACF,MAAK;AAAA,IACL,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,aAAY;AAAA;AACd,GACF;AAwBF,MAAM,kBAAkB;AACxB,MAAM,aAAa,CAAC,IAAY,aAAqB,MAAM,IAAI;AAI/D,MAAM,gBAAgB,CAAC,cAAsB,IAAI,UAAU,MAAM,GAAG,EAAE,KAAK,GAAG,CAAC;AAE/E,MAAM,WAAW,WAAW,SAASA,UACnC;AAAA,EACE,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,cAAc,eAAe;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,KAAK;AAC/C,QAAM,WAAW,cAAc,kBAAkB,KAAK;AACtD,QAAM,OAAO,cAAc,cAAc,KAAK;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,YAAY,KAAK,MAAM,OAAO,SAAS,YAAY,OAAO,CAAC;AACjE,QAAM,YAAY,KAAK,KAAK,aAAa,IAAI;AAC7C,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,WAAW;AAAA,IACf,CAAC,iBAAyB;AACxB,UAAI,iBAAiB;AAAG;AAExB,YAAM,YAAY,eAAe,KAAK,IAAI,YAAY;AACtD,YAAM,YAAY,YAAY,IAAI,OAAO,MAAM,QAAQ,IAAI,OAAO,MAAM,GAAG,UAAU;AACrF,YAAM,WAAW,YAAY,KAAK,IAAI,UAAU,QAAQ,OAAO,KAAK,IAAI,YAAY,CAAC;AAErF,eAAS,QAAQ,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY,UAAU,IAAI;AAAA,EAC5C;AAEA,QAAM,YAAY,aAAa,EAAE,GAAG,GAAG,YAAY,EAAE,MAAM,UAAU,WAAW,IAAI,EAAE,CAAC;AACvF,QAAM,WAAW;AAAA,IACf;AAAA,MACE,QAAQ,CAAC,EAAE,UAAU,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,GAAG,UAAU,CAAC,EAAE,EAAE,MAAM;AAC3D,kBAAU,MAAM,EAAE,GAAG,GAAG,CAAC;AACzB,cAAM,UAAU,WAAW,IAAI,EAAE;AAAA,MACnC;AAAA,MACA,WAAW,MAAM;AACf,kBAAU,MAAM,EAAE,GAAG,EAAE,CAAC;AAExB,YAAI,MAAM,UAAU;AAAiB,mBAAS,CAAC;AAAA,iBACtC,MAAM,UAAU,CAAC;AAAiB,mBAAS,EAAE;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ,EAAE,MAAM,GAAG,OAAO,EAAE;AAAA,QAC5B,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,aAAa;AAAG,eAAS,CAAC;AAAA,EAC7C,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,YAAU,MAAM;AACd,QAAI,CAAC;AAAU,aAAO,MAAM;AAAA,MAAC;AAE7B,UAAM,aAAa,YAAY,MAAO,aAAa,SAAS,CAAC,IAAI,SAAS,CAAC,GAAI,QAAQ,GAAI;AAE3F,WAAO,MAAM,cAAc,UAAU;AAAA,EACvC,GAAG,CAAC,UAAU,OAAO,UAAU,UAAU,CAAC;AAE1C,QAAM,oBAAoB,SAAS,EAAE,UAAU,SAAS,CAAC;AACzD,QAAM,gBAAgB,SAAS,EAAE,UAAU,YAAY,OAAO,OAAO,CAAC;AACtE,QAAM,iBAAiB;AAAA,IACrB,SAAS,EAAE,SAAS,OAAO,CAAC;AAAA,IAC5B;AAAA,MACE,mBAAmB,CAAC,kBAAkB,GAAY,CAAC,CAACC,YAAW,CAAC,OAAO;AAAA,QACrE,WAAW,GAAG,MAAMA,SAAQ;AAAA,QAC5B,UAAU,GAAG,MAAMA,SAAQ;AAAA,QAC3B,UAAU,GAAG,MAAMA,SAAQ;AAAA,MAC7B,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC,cAAc,GAAY,CAAC,CAAC,aAAa,QAAQ,OAAO,EAAE,WAAW,EAAE;AAAA,IAC7F;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,SAAS,EAAE,SAAS,QAAQ,UAAU,YAAY,UAAU,SAAS,CAAC;AAAA,IACtE;AAAA,MACE,mBAAmB,CAAC,GAAG,GAAY,CAAC,CAACC,OAAM,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,QACxE,QAAQ,KAAK,GAAG,CAACA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,QAC3C,CAAC,OAAO,cAAc,cAAc,CAAC,EAAE,GAAG;AAAA,UACxC,SAAS,KAAK,GAAGA,KAAI,QAAQ,CAAC,GAAGA,KAAI,IAAI,EAAE;AAAA,QAC7C;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,YAAY;AAAA,IACd,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,eAAe;AAAA,QAChB,CAAC,CAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,IAAI,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UACnF,YAAY,cAAc,UAAU;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS,EAAE,KAAK,EAAE,YAAY,mBAAmB,QAAQ,eAAe,EAAE,CAAC;AAAA,EAC7E;AAEA,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK;AAAA,MACL,QAAQ;AAAA,MAER,SAAS;AAAA,MACT,aAAa;AAAA,QACX,SAAS;AAAA,MACX;AAAA,MAEA,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,UAAU;AAAA,QACX,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UAC5E,OAAO,cAAc,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC,aAAa,GAAY,CAAC,CAAC,WAAW,QAAQ,MAAM;AACtE,gBAAQ,UAAU;AAAA,UAChB,KAAK;AACH,mBAAO,EAAE,WAAW,kBAAkB;AAAA,UAExC,KAAK;AACH,mBAAO,EAAE,WAAW,gCAAgC;AAAA,UAEtD;AACE,mBAAO,EAAE,WAAW,yBAAyB;AAAA,QACjD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MAEN,CAAC,aAAa,cAAc,cAAc,CAAC,EAAE,GAAG;AAAA,QAC9C,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC,aAAa,GAAY,CAAC,CAAC,WAAW,QAAQ,MAAM;AACtE,gBAAQ,UAAU;AAAA,UAChB,KAAK;AACH,mBAAO,EAAE,WAAW,mBAAmB;AAAA,UAEzC,KAAK;AACH,mBAAO,EAAE,WAAW,+BAA+B;AAAA,UAErD;AACE,mBAAO,EAAE,WAAW,wBAAwB;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,CAAC,aAAa,cAAc,cAAc,CAAC,EAAE,GAAG;AAAA,QAC9C,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB;AAAA,IACpB,SAAS,EAAE,SAAS,WAAW,SAAS,QAAQ,gBAAgB,UAAU,WAAW,GAAG,CAAC;AAAA,IACzF;AAAA,MACE;AAAA,QACE,CAAC,QAAQ;AAAA,QACT,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,OAAO;AAAA,UAC5E,OAAO,cAAc,KAAK;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,SAAS,EAAE,UAAU,YAAY,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QAC3E;AAAA,QACA;AAAA,QACA,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC;AAAA,MACxC;AAAA,MACA,UAAU;AAAA,MACV,WAAW,OAAK;AACd,gBAAQ,EAAE,KAAK;AAAA,UACb,KAAK;AACH,qBAAS,CAAC;AACV;AAAA,UACF,KAAK;AACH,qBAAS,EAAE;AACX;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAGA;AAAA,6BAAC,SAAI,WAAW,SAAS,EAAE,UAAU,YAAY,QAAQ,OAAO,CAAC,GAC/D;AAAA,8BAAC,SAAI,WAAW,mBAGd,8BAAC,OAAO,KAAP,EAAY,GAAG,SAAS,GAAG,WAAW,eAAe,SAAS,WAC7D;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cAGC,WAAW;AAAA,cACX,SAAS,EAAE,GAAG,GAAG,EAAE,MAAM,YAAY,UAAU,IAAI;AAAA,cACnD,YAAY;AAAA,gBACV,GAAG;AAAA,kBACD,MAAM;AAAA,kBACN,MAAM,CAAC,OAAO,MAAM,MAAM,CAAC;AAAA,kBAC3B,UAAU;AAAA,gBACZ;AAAA,cACF;AAAA,cAEC,iBAAO,IAAI,CAAC,EAAE,OAAO,YAAY,IAAI,MACpC;AAAA,gBAAC,OAAO;AAAA,gBAAP;AAAA,kBAIC,WAAW;AAAA,kBACX,aAAa,CAAC,MAAkB,EAAE,eAAe;AAAA,kBACjD,SAAS,CAAC,MAAkB;AAC1B,wBAAI,MAAM,YAAY;AAAG,wBAAE,eAAe;AAAA,kBAC5C;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO;AAAA,wBACL;AAAA,0BACE,UAAU,kBAAkB,WAAW,EAAE;AAAA,0BACzC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI;AAAA,wBACjC;AAAA,sBACF;AAAA,sBACA,MAAM,WAAW;AAAA,sBACjB,SAAS,WAAW;AAAA,sBACpB,MAAM,WAAW;AAAA,sBACjB,QAAQ;AAAA,sBACR,cAAc;AAAA;AAAA,kBAChB;AAAA;AAAA,gBArBK;AAAA,cAsBP,CACD;AAAA;AAAA,UACH,GACF,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,SAAS,EAAE;AAAA,cAC1B,WAAW;AAAA,cACX,QAAQ,CAAC,cAAc;AAAA,cAEvB,8BAAC,SAAI,WAAW,gBACd,8BAAC,eAAY,GACf;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM,SAAS,CAAC;AAAA,cACzB,WAAW;AAAA,cACX,QAAQ,CAAC,cAAc;AAAA,cAEvB,8BAAC,SAAI,WAAW,gBACd,8BAAC,gBAAa,GAChB;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QACA,oBAAC,SAAI,WAAW,eACb,gBAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,MACzC,oBAAC,OAAY,QAAQ,MAAM,WAAW,SAAS,MAAM,SAAS,IAAI,SAAS,KAAjE,CAAoE,CAC/E,GACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,mBAAQ;AASf,SAAS,IAAI,EAAE,WAAW,QAAQ,GAAG,YAAY,GAAa;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,QAAQ;AAAA,UAER,uBAAuB;AAAA,YACrB,SAAS;AAAA,YACT,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,SAAS;AAAA,YACT,cAAc;AAAA,YACd,YAAY;AAAA,UACd;AAAA,UAEA,aAAa;AAAA,YACX,WAAW;AAAA,YACX,WAAW;AAAA,YACX,OAAO,SAAS,KAAK;AAAA,YACrB,QAAQ,SAAS,KAAK;AAAA,UACxB;AAAA,UAEA,YAAY;AAAA,YACV,YAAY;AAAA,YACZ,WAAW,oCAAoC,SAAS,IAAI,CAAC;AAAA,YAC7D,OAAO;AAAA,YACP,QAAQ;AAAA,UACV;AAAA,UAEA,kBAAkB;AAAA,YAChB,WAAW,oCAAoC,SAAS,IAAI,CAAC;AAAA,UAC/D;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["Carousel","pageSize","gap"]}

package/dist/esm/components/builtin/Embed/Embed.js

@@ -34,7 +34,9 @@ const Embed = forwardRef(function Embed2({ id, width, margin, html = defaultHtml
   useIsomorphicLayoutEffect(() => {
     setShouldRender(true);
   }, []);
-  useImperativeHandle(ref, () => container, [container]);
+  useImperativeHandle(ref, () => container, [
+    container
+  ]);
   useEffect(() => {
     if (!container)
       return;

package/dist/esm/components/builtin/Embed/Embed.js.map

@@ -1 +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 { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\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":";AA8GI;AA1GJ,SAAS,UAAU,WAAW,YAAiB,2BAA2B;AAE1E,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,UAAU;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,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAoB,KAAK,MAAM,WAAW,CAAC,SAAS,CAAC;AAErD,YAAU,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,YAAY,SAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}
+{"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 { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\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<HTMLDivElement | null, HTMLDivElement | null>(ref, () => container, [\n    container,\n  ])\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":";AAgHI;AA5GJ,SAAS,UAAU,WAAW,YAAiB,2BAA2B;AAE1E,SAAS,iCAAiC;AAC1C,SAAS,gBAAgB;AACzB,SAAS,UAAU;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,QAAQ,WAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,4BAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,sBAAkE,KAAK,MAAM,WAAW;AAAA,IACtF;AAAA,EACF,CAAC;AAED,YAAU,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,YAAY,SAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}

package/dist/esm/components/builtin/Form/components/Field/components/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): JSX.Element {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n\n  return (\n    <Component\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n        useStyle(useResponsiveTextStyle(labelTextStyle)),\n        useStyle(\n          useResponsiveStyle(\n            [size, contrast, labelTextColor] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n              minHeight: getSizeHeight(size),\n              color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"AAwDI;AAvDJ,SAAS,qBAAqB;AAE9B,SAAS,gBAAsB,OAAiB,iBAAiB;AACjE,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,aAAO;AAAA,IAET,KAAK,UAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,IAAI,eAAe;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,QACrD,SAAS,uBAAuB,cAAc,CAAC;AAAA,QAC/C;AAAA,UACE;AAAA,YACE,CAAC,MAAM,UAAU,cAAc;AAAA,YAC/B,CAAC,CAACA,QAAO,MAAM,QAAQC,YAAW,UAAU,OAAO,SAAS,OAAO;AAAA,cACjE,WAAW,cAAcD,KAAI;AAAA,cAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,IAAI,cAAc,SAAS;AAAA,YACjF;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["size","contrast"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): ReactNode {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n\n  return (\n    <Component\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n        useStyle(useResponsiveTextStyle(labelTextStyle)),\n        useStyle(\n          useResponsiveStyle(\n            [size, contrast, labelTextColor] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n              minHeight: getSizeHeight(size),\n              color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"AAwDI;AAvDJ,SAAS,qBAAqB;AAE9B,SAAS,gBAAsB,OAAiB,iBAAiB;AACjE,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET,KAAK,MAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,UAAU;AACb,aAAO;AAAA,IAET,KAAK,UAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,IAAI,eAAe;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,SAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,QACrD,SAAS,uBAAuB,cAAc,CAAC;AAAA,QAC/C;AAAA,UACE;AAAA,YACE,CAAC,MAAM,UAAU,cAAc;AAAA,YAC/B,CAAC,CAACA,QAAO,MAAM,QAAQC,YAAW,UAAU,OAAO,SAAS,OAAO;AAAA,cACjE,WAAW,cAAcD,KAAI;AAAA,cAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,IAAI,cAAc,SAAS;AAAA,YACjF;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["size","contrast"]}

package/dist/esm/components/builtin/Form/components/Field/components/PlaceholderTableField/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { useFormContext, Sizes, Shapes, Value } from '../../../../context/FormContext'\nimport { getSizeHeight as getLabelSizeHeight } from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport { getShapeBorderRadius } from '../../services/responsiveField'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\nfunction Label({ size }: Pick<Value, 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          maxWidth: 120,\n          minWidth: 60,\n          borderRadius: 2,\n          backgroundColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            margin: `calc(0.25 * ${getLabelSizeHeight(size)}px + 2px) 0`,\n            minHeight: 0.5 * getLabelSizeHeight(size),\n            maxHeight: 0.5 * getLabelSizeHeight(size),\n          })),\n        ),\n      )}\n    />\n  )\n}\n\nfunction Input({ shape, size }: Pick<Value, 'shape' | 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          width: '100%',\n          borderWidth: 2,\n          borderStyle: 'solid',\n          borderColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size] as const,\n            ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              borderRadius: getShapeBorderRadius(shape),\n            }),\n          ),\n        ),\n      )}\n    />\n  )\n}\n\nexport default function PlaceholderTableField(): JSX.Element {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":"AAUI,SAqDA,UArDA,KAqDA,YArDA;AAVJ,SAAS,gBAAgB,OAAO,cAAqB;AACrD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,KAAK,GAAwB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,YAC9D,QAAQ,eAAe,mBAAmBA,KAAI,CAAC;AAAA,YAC/C,WAAW,MAAM,mBAAmBA,KAAI;AAAA,YACxC,WAAW,MAAM,mBAAmBA,KAAI;AAAA,UAC1C,EAAE;AAAA,QACJ;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,MAAM,EAAE,OAAO,KAAK,GAAkC;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,UACb,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,UACE;AAAA,YACE,CAAC,OAAO,IAAI;AAAA,YACZ,CAAC,CAACC,SAAQ,OAAO,SAASD,QAAO,MAAM,MAAM,OAAO;AAAA,cAClD,WAAW,mBAAmBA,KAAI;AAAA,cAClC,WAAW,mBAAmBA,KAAI;AAAA,cAClC,cAAc,qBAAqBC,MAAK;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,wBAAsD;AAC3D,QAAM,EAAE,MAAM,MAAM,IAAI,eAAe;AAEvC,SACE,iCACE;AAAA,wBAAC,SAAM,MAAY;AAAA,IACnB,oBAAC,SAAM,OAAc,MAAY;AAAA,KACnC;AAEJ;","names":["size","shape"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { useFormContext, Sizes, Shapes, Value } from '../../../../context/FormContext'\nimport { getSizeHeight as getLabelSizeHeight } from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport { getShapeBorderRadius } from '../../services/responsiveField'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\nfunction Label({ size }: Pick<Value, 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          maxWidth: 120,\n          minWidth: 60,\n          borderRadius: 2,\n          backgroundColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            margin: `calc(0.25 * ${getLabelSizeHeight(size)}px + 2px) 0`,\n            minHeight: 0.5 * getLabelSizeHeight(size),\n            maxHeight: 0.5 * getLabelSizeHeight(size),\n          })),\n        ),\n      )}\n    />\n  )\n}\n\nfunction Input({ shape, size }: Pick<Value, 'shape' | 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          width: '100%',\n          borderWidth: 2,\n          borderStyle: 'solid',\n          borderColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size] as const,\n            ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              borderRadius: getShapeBorderRadius(shape),\n            }),\n          ),\n        ),\n      )}\n    />\n  )\n}\n\nexport default function PlaceholderTableField(): ReactNode {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":"AAWI,SAqDA,UArDA,KAqDA,YArDA;AAVJ,SAAS,gBAAgB,OAAO,cAAqB;AACrD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,KAAK,GAAwB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,UACE,mBAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,MAAM,MAAM,OAAO;AAAA,YAC9D,QAAQ,eAAe,mBAAmBA,KAAI,CAAC;AAAA,YAC/C,WAAW,MAAM,mBAAmBA,KAAI;AAAA,YACxC,WAAW,MAAM,mBAAmBA,KAAI;AAAA,UAC1C,EAAE;AAAA,QACJ;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,MAAM,EAAE,OAAO,KAAK,GAAkC;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,SAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,UACb,SAAS;AAAA,QACX,CAAC;AAAA,QACD;AAAA,UACE;AAAA,YACE,CAAC,OAAO,IAAI;AAAA,YACZ,CAAC,CAACC,SAAQ,OAAO,SAASD,QAAO,MAAM,MAAM,OAAO;AAAA,cAClD,WAAW,mBAAmBA,KAAI;AAAA,cAClC,WAAW,mBAAmBA,KAAI;AAAA,cAClC,cAAc,qBAAqBC,MAAK;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,wBAAoD;AACzD,QAAM,EAAE,MAAM,MAAM,IAAI,eAAe;AAEvC,SACE,iCACE;AAAA,wBAAC,SAAM,MAAY;AAAA,IACnB,oBAAC,SAAM,OAAc,MAAY;AAAA,KACnC;AAEJ;","names":["size","shape"]}

package/dist/esm/components/builtin/Form/components/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Field/index.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Field as FormikField, getIn } from 'formik'\n\nimport SingleLineTextTableField from './components/SingleLineTextTableField'\nimport LongTextTableField from './components/LongTextTableField'\nimport CheckboxTableField from './components/CheckboxTableField'\nimport MultipleSelectTableField from './components/MultipleSelectTableField'\nimport SingleSelectTableField from './components/SingleSelectTableField'\nimport PhoneNumberTableField from './components/PhoneNumberTableField'\nimport EmailTableField from './components/EmailTableField'\nimport URLTableField from './components/URLTableField'\nimport NumberTableField from './components/NumberTableField'\nimport PlaceholderTableField from './components/PlaceholderTableField'\nimport { TableColumn } from '../../types'\n\nfunction getTypeMismatchErrorMessage(tableColumn: TableColumn | null | undefined, label: string) {\n  switch ((tableColumn || {}).__typename) {\n    case 'PhoneNumberTableColumn':\n      return `${label} field must be a valid phone number.`\n\n    case 'EmailTableColumn':\n      return `${label} field must be a valid email.`\n\n    case 'URLTableColumn':\n      return `${label} field must be a valid URL.`\n\n    case 'NumberTableColumn':\n      return `${label} field must be a valid number.`\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'CheckboxTableColumn':\n    default:\n      return `${label} field is invalid.`\n  }\n}\n\nfunction getTableColumnField(tableColumn: TableColumn | null | undefined) {\n  switch ((tableColumn || {}).__typename) {\n    case 'SingleLineTextTableColumn':\n      return SingleLineTextTableField\n\n    case 'LongTextTableColumn':\n      return LongTextTableField\n\n    case 'CheckboxTableColumn':\n      return CheckboxTableField\n\n    case 'MultipleSelectTableColumn':\n      return MultipleSelectTableField\n\n    case 'SingleSelectTableColumn':\n      return SingleSelectTableField\n\n    case 'PhoneNumberTableColumn':\n      return PhoneNumberTableField\n\n    case 'EmailTableColumn':\n      return EmailTableField\n\n    case 'URLTableColumn':\n      return URLTableField\n\n    case 'NumberTableColumn':\n      return NumberTableField\n\n    default:\n      return SingleLineTextTableField\n  }\n}\n\ntype TableFormField = {\n  id: string\n  tableColumnId: string\n  label?: string\n  placeholder?: string\n  required?: boolean\n  hidden?: boolean\n  type?: 'select' | 'radio'\n  hideLabel?: boolean\n}\n\ntype Props = {\n  tableColumn: TableColumn | null | undefined\n  tableFormField: TableFormField\n}\n\n// Escape characters: [ ] '\nfunction escapeCharacters(string: string) {\n  return string.replace(/[[\\]']/g, '\\\\$&')\n}\n\nexport default function Field({\n  tableColumn,\n  tableFormField: {\n    id,\n    label = '',\n    placeholder,\n    required = false,\n    hidden = false,\n    type = 'radio',\n    hideLabel = false,\n  },\n}: Props): JSX.Element {\n  const TableColumnField = getTableColumnField(tableColumn)\n  const input = useRef<\n    | {\n        validity: {\n          valueMissing: boolean\n          typeMismatch: boolean\n        }\n      }\n    | null\n    | undefined\n  >(null)\n\n  if (!tableColumn) return <PlaceholderTableField />\n\n  function validate() {\n    let errorMessage\n\n    if (input.current) {\n      const { validity = {} as ValidityState } = input.current\n\n      if (validity.valueMissing) errorMessage = `${label} is required.`\n\n      if (validity.typeMismatch) errorMessage = getTypeMismatchErrorMessage(tableColumn, label)\n    }\n\n    return errorMessage\n  }\n\n  // We're using `['${tableColumn.name}']` to avoid default Formik nested object behavior\n  // which was causing an issue for table column names containing a dot.\n  // https://formik.org/docs/guides/arrays#avoid-nesting\n  // We need to escape square brackets [ ] because it's also used by Lodash\n  // set array: https://lodash.com/docs/4.17.15#set, which is used by Formik.\n  // We need to escape ' because otherwise Formik will wrap the field name inside a ''\n  // for example, if we have hello'world, Formik will name the field 'hello'world'\n  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`\n\n  return (\n    <FormikField name={formikFieldName} validate={validate}>\n      {({ field, form }: any) =>\n        hidden ? (\n          <input {...field} ref={input} type=\"hidden\" />\n        ) : (\n          <TableColumnField\n            {...field}\n            type={type}\n            form={form}\n            tableColumn={tableColumn}\n            ref={input}\n            id={id}\n            error={getIn(form.touched, field.name) && getIn(form.errors, field.name)}\n            label={label}\n            placeholder={placeholder}\n            required={required}\n            hideLabel={hideLabel}\n          />\n        )\n      }\n    </FormikField>\n  )\n}\n"],"mappings":"AAoH2B;AApH3B,SAAS,cAAc;AACvB,SAAS,SAAS,aAAa,aAAa;AAE5C,OAAO,8BAA8B;AACrC,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,8BAA8B;AACrC,OAAO,4BAA4B;AACnC,OAAO,2BAA2B;AAClC,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,sBAAsB;AAC7B,OAAO,2BAA2B;AAGlC,SAAS,4BAA4B,aAA6C,OAAe;AAC/F,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,GAAG,KAAK;AAAA,EACnB;AACF;AAEA,SAAS,oBAAoB,aAA6C;AACxE,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET;AACE,aAAO;AAAA,EACX;AACF;AAmBA,SAAS,iBAAiB,QAAgB;AACxC,SAAO,OAAO,QAAQ,WAAW,MAAM;AACzC;AAEe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF,GAAuB;AACrB,QAAM,mBAAmB,oBAAoB,WAAW;AACxD,QAAM,QAAQ,OASZ,IAAI;AAEN,MAAI,CAAC;AAAa,WAAO,oBAAC,yBAAsB;AAEhD,WAAS,WAAW;AAClB,QAAI;AAEJ,QAAI,MAAM,SAAS;AACjB,YAAM,EAAE,WAAW,CAAC,EAAmB,IAAI,MAAM;AAEjD,UAAI,SAAS;AAAc,uBAAe,GAAG,KAAK;AAElD,UAAI,SAAS;AAAc,uBAAe,4BAA4B,aAAa,KAAK;AAAA,IAC1F;AAEA,WAAO;AAAA,EACT;AASA,QAAM,kBAAkB,KAAK,iBAAiB,YAAY,IAAI,CAAC;AAE/D,SACE,oBAAC,eAAY,MAAM,iBAAiB,UACjC,WAAC,EAAE,OAAO,KAAK,MACd,SACE,oBAAC,WAAO,GAAG,OAAO,KAAK,OAAO,MAAK,UAAS,IAE5C;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,OAAO,MAAM,KAAK,SAAS,MAAM,IAAI,KAAK,MAAM,KAAK,QAAQ,MAAM,IAAI;AAAA,MACvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Field/index.tsx"],"sourcesContent":["import { useRef, ReactNode } from 'react'\nimport { Field as FormikField, getIn } from 'formik'\n\nimport SingleLineTextTableField from './components/SingleLineTextTableField'\nimport LongTextTableField from './components/LongTextTableField'\nimport CheckboxTableField from './components/CheckboxTableField'\nimport MultipleSelectTableField from './components/MultipleSelectTableField'\nimport SingleSelectTableField from './components/SingleSelectTableField'\nimport PhoneNumberTableField from './components/PhoneNumberTableField'\nimport EmailTableField from './components/EmailTableField'\nimport URLTableField from './components/URLTableField'\nimport NumberTableField from './components/NumberTableField'\nimport PlaceholderTableField from './components/PlaceholderTableField'\nimport { TableColumn } from '../../types'\n\nfunction getTypeMismatchErrorMessage(tableColumn: TableColumn | null | undefined, label: string) {\n  switch ((tableColumn || {}).__typename) {\n    case 'PhoneNumberTableColumn':\n      return `${label} field must be a valid phone number.`\n\n    case 'EmailTableColumn':\n      return `${label} field must be a valid email.`\n\n    case 'URLTableColumn':\n      return `${label} field must be a valid URL.`\n\n    case 'NumberTableColumn':\n      return `${label} field must be a valid number.`\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'CheckboxTableColumn':\n    default:\n      return `${label} field is invalid.`\n  }\n}\n\nfunction getTableColumnField(tableColumn: TableColumn | null | undefined) {\n  switch ((tableColumn || {}).__typename) {\n    case 'SingleLineTextTableColumn':\n      return SingleLineTextTableField\n\n    case 'LongTextTableColumn':\n      return LongTextTableField\n\n    case 'CheckboxTableColumn':\n      return CheckboxTableField\n\n    case 'MultipleSelectTableColumn':\n      return MultipleSelectTableField\n\n    case 'SingleSelectTableColumn':\n      return SingleSelectTableField\n\n    case 'PhoneNumberTableColumn':\n      return PhoneNumberTableField\n\n    case 'EmailTableColumn':\n      return EmailTableField\n\n    case 'URLTableColumn':\n      return URLTableField\n\n    case 'NumberTableColumn':\n      return NumberTableField\n\n    default:\n      return SingleLineTextTableField\n  }\n}\n\ntype TableFormField = {\n  id: string\n  tableColumnId: string\n  label?: string\n  placeholder?: string\n  required?: boolean\n  hidden?: boolean\n  type?: 'select' | 'radio'\n  hideLabel?: boolean\n}\n\ntype Props = {\n  tableColumn: TableColumn | null | undefined\n  tableFormField: TableFormField\n}\n\n// Escape characters: [ ] '\nfunction escapeCharacters(string: string) {\n  return string.replace(/[[\\]']/g, '\\\\$&')\n}\n\nexport default function Field({\n  tableColumn,\n  tableFormField: {\n    id,\n    label = '',\n    placeholder,\n    required = false,\n    hidden = false,\n    type = 'radio',\n    hideLabel = false,\n  },\n}: Props): ReactNode {\n  const TableColumnField = getTableColumnField(tableColumn)\n  const input = useRef<\n    | {\n        validity: {\n          valueMissing: boolean\n          typeMismatch: boolean\n        }\n      }\n    | null\n    | undefined\n  >(null)\n\n  if (!tableColumn) return <PlaceholderTableField />\n\n  function validate() {\n    let errorMessage\n\n    if (input.current) {\n      const { validity = {} as ValidityState } = input.current\n\n      if (validity.valueMissing) errorMessage = `${label} is required.`\n\n      if (validity.typeMismatch) errorMessage = getTypeMismatchErrorMessage(tableColumn, label)\n    }\n\n    return errorMessage\n  }\n\n  // We're using `['${tableColumn.name}']` to avoid default Formik nested object behavior\n  // which was causing an issue for table column names containing a dot.\n  // https://formik.org/docs/guides/arrays#avoid-nesting\n  // We need to escape square brackets [ ] because it's also used by Lodash\n  // set array: https://lodash.com/docs/4.17.15#set, which is used by Formik.\n  // We need to escape ' because otherwise Formik will wrap the field name inside a ''\n  // for example, if we have hello'world, Formik will name the field 'hello'world'\n  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`\n\n  return (\n    <FormikField name={formikFieldName} validate={validate}>\n      {({ field, form }: any) =>\n        hidden ? (\n          <input {...field} ref={input} type=\"hidden\" />\n        ) : (\n          <TableColumnField\n            {...field}\n            type={type}\n            form={form}\n            tableColumn={tableColumn}\n            ref={input}\n            id={id}\n            error={getIn(form.touched, field.name) && getIn(form.errors, field.name)}\n            label={label}\n            placeholder={placeholder}\n            required={required}\n            hideLabel={hideLabel}\n          />\n        )\n      }\n    </FormikField>\n  )\n}\n"],"mappings":"AAoH2B;AApH3B,SAAS,cAAyB;AAClC,SAAS,SAAS,aAAa,aAAa;AAE5C,OAAO,8BAA8B;AACrC,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,8BAA8B;AACrC,OAAO,4BAA4B;AACnC,OAAO,2BAA2B;AAClC,OAAO,qBAAqB;AAC5B,OAAO,mBAAmB;AAC1B,OAAO,sBAAsB;AAC7B,OAAO,2BAA2B;AAGlC,SAAS,4BAA4B,aAA6C,OAAe;AAC/F,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,GAAG,KAAK;AAAA,EACnB;AACF;AAEA,SAAS,oBAAoB,aAA6C;AACxE,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET,KAAK;AACH,aAAO;AAAA,IAET;AACE,aAAO;AAAA,EACX;AACF;AAmBA,SAAS,iBAAiB,QAAgB;AACxC,SAAO,OAAO,QAAQ,WAAW,MAAM;AACzC;AAEe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF,GAAqB;AACnB,QAAM,mBAAmB,oBAAoB,WAAW;AACxD,QAAM,QAAQ,OASZ,IAAI;AAEN,MAAI,CAAC;AAAa,WAAO,oBAAC,yBAAsB;AAEhD,WAAS,WAAW;AAClB,QAAI;AAEJ,QAAI,MAAM,SAAS;AACjB,YAAM,EAAE,WAAW,CAAC,EAAmB,IAAI,MAAM;AAEjD,UAAI,SAAS;AAAc,uBAAe,GAAG,KAAK;AAElD,UAAI,SAAS;AAAc,uBAAe,4BAA4B,aAAa,KAAK;AAAA,IAC1F;AAEA,WAAO;AAAA,EACT;AASA,QAAM,kBAAkB,KAAK,iBAAiB,YAAY,IAAI,CAAC;AAE/D,SACE,oBAAC,eAAY,MAAM,iBAAiB,UACjC,WAAC,EAAE,OAAO,KAAK,MACd,SACE,oBAAC,WAAO,GAAG,OAAO,KAAK,OAAO,MAAK,UAAS,IAE5C;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,OAAO,MAAM,KAAK,SAAS,MAAM,IAAI,KAAK,MAAM,KAAK,QAAQ,MAAM,IAAI;AAAA,MACvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGN;AAEJ;","names":[]}