@makeswift/runtime 0.8.11 → 0.9.1

package/dist/Countdown.cjs.js.map

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

package/dist/Countdown.es.js

@@ -31,25 +31,25 @@ var __objRest = (source, exclude) => {
 };
 import { cx } from "@emotion/css";
 import { forwardRef, useState, useEffect } from "react";
-import { n as useStyle, o as useResponsiveStyle, r as colorToString } from "./index.es.js";
+import { Z as useStyle } from "./react-page.es.js";
+import { n as useResponsiveStyle, q as colorToString } from "./index.es.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import "use-sync-external-store/shim/with-selector";
-import "next/dynamic";
-import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
 import "./state/breakpoints.es.js";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "slate";
 import "is-hotkey";
 import "slate-react";
-import "@emotion/serialize";
-import "@emotion/utils";
+import "use-sync-external-store/shim/with-selector";
+import "next/dynamic";
 import "./text-input.es.js";
 import "./combobox.es.js";
-import "./select.es.js";
 import "use-sync-external-store/shim";
 import "./types.es.js";
+import "./deepEqual.es.js";
 import "./box-models.es.js";
 import "css-box-model";
 import "color";
@@ -57,6 +57,7 @@ import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
+import "zod";
 import "@emotion/server/create-instance";
 import "next/document";
 import "cors";

package/dist/Countdown.es.js.map

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

package/dist/Divider.cjs.js

@@ -2,32 +2,33 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var next = require("./index.cjs.js");
+var reactPage = require("./react-page.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 require("use-sync-external-store/shim/with-selector");
 require("next/dynamic");
-require("./react-page.cjs.js");
-require("redux");
-require("redux-thunk");
 require("./actions.cjs.js");
-require("./state/breakpoints.cjs.js");
+require("./text-input.cjs.js");
+require("./combobox.cjs.js");
 require("slate");
+require("./state/breakpoints.cjs.js");
 require("is-hotkey");
 require("slate-react");
-require("@emotion/serialize");
-require("@emotion/utils");
-require("./text-input.cjs.js");
-require("./combobox.cjs.js");
-require("./select.cjs.js");
 require("use-sync-external-store/shim");
+require("redux");
+require("redux-thunk");
 require("./types.cjs.js");
+require("./deepEqual.cjs.js");
 require("./box-models.cjs.js");
 require("css-box-model");
 require("color");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
+require("zod");
 require("@emotion/server/create-instance");
 require("next/document");
 require("cors");
@@ -49,12 +50,12 @@ const Divider = React.forwardRef(function Divider2({
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref,
     id,
-    className: css.cx(next.useStyle({
+    className: css.cx(reactPage.useStyle({
       display: "flex",
       width: "100%"
     }), width, margin),
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: next.useStyle({
+      className: reactPage.useStyle({
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
@@ -62,7 +63,7 @@ const Divider = React.forwardRef(function Divider2({
         width: "100%"
       }),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: next.useStyle(next.useResponsiveStyle([variant, thickness, color], ([variant2 = "solid", thickness2 = {
+        className: reactPage.useStyle(next.useResponsiveStyle([variant, thickness, color], ([variant2 = "solid", thickness2 = {
           value: 1,
           unit: "px"
         }, color2 = {

package/dist/Divider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.cjs.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n  ElementIDValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: ElementIDValue\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthValue\n  color?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n    // Wrapping it in another flex container fixes it for some reason, read more here:\n    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n    <div\n      ref={ref}\n      id={id}\n      className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n    >\n      <div\n        className={useStyle({\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          minHeight: 40,\n          width: '100%',\n        })}\n      >\n        <div\n          className={useStyle(\n            useResponsiveStyle(\n              [variant, thickness, color] as const,\n              ([\n                variant = 'solid',\n                thickness = { value: 1, unit: 'px' },\n                color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              ]) => {\n                switch (variant) {\n                  case 'solid':\n                  case 'dashed':\n                  case 'dotted':\n                    return {\n                      borderBottomWidth:\n                        thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n                      borderBottomStyle: variant,\n                      borderBottomColor: colorToString(color),\n                    }\n\n                  case 'blended':\n                    return {\n                      height: `${thickness.value}${thickness.unit}`,\n                      background: `linear-gradient(${[\n                        '90deg',\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                        colorToString(color),\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                      ].join(', ')})`,\n                    }\n\n                  default:\n                    variant as never\n                    throw new Error(`Invalid variant ${variant}.`)\n                }\n              },\n            ),\n          )}\n        />\n      </div>\n    </div>\n  )\n})\n\nexport default Divider\n"],"names":["Divider","forwardRef","id","variant","thickness","color","width","margin","ref","cx","useStyle","display","flexDirection","justifyContent","minHeight","useResponsiveStyle","value","unit","swatch","hue","saturation","lightness","alpha","borderBottomWidth","borderBottomStyle","borderBottomColor","colorToString","height","background","join","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBMA,MAAAA,UAAUC,MAAAA,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,wCAIE,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWC,OAAGC,cAAS;AAAA,MAAEC,SAAS;AAAA,MAAQL,OAAO;AAAA,IAAA,CAA3B,GAAsCA,OAAOC,MAAtD;AAAA,IAEb,yCAAA,OAAA;AAAA,MACE,WAAWG,KAAAA,SAAS;AAAA,QAClBC,SAAS;AAAA,QACTC,eAAe;AAAA,QACfC,gBAAgB;AAAA,QAChBC,WAAW;AAAA,QACXR,OAAO;AAAA,MAAA,CALU;AAAA,MAQnB,yCAAA,OAAA;AAAA,QACE,WAAWI,KAAAA,SACTK,wBACE,CAACZ,SAASC,WAAWC,KAArB,GACA,CAAC,CACCF,WAAU,SACVC,aAAY;AAAA,UAAEY,OAAO;AAAA,UAAGC,MAAM;AAAA,WAC9BZ,SAAQ;AAAA,UAAEa,QAAQ;AAAA,YAAEC,KAAK;AAAA,YAAGC,YAAY;AAAA,YAAGC,WAAW;AAAA,UAA9C;AAAA,UAAmDC,OAAO;AAAA,QAAA,OAC9D;AACInB,kBAAAA;AAAAA,iBACD;AAAA,iBACA;AAAA,iBACA;AACI,qBAAA;AAAA,gBACLoB,mBACEnB,cAAa,OAAO,IAAK,GAAEA,WAAUY,QAAQZ,WAAUa;AAAAA,gBACzDO,mBAAmBrB;AAAAA,gBACnBsB,mBAAmBC,mBAAcrB,MAAD;AAAA,cAAA;AAAA,iBAG/B;AACI,qBAAA;AAAA,gBACLsB,QAAS,GAAEvB,WAAUY,QAAQZ,WAAUa;AAAAA,gBACvCW,YAAa,mBAAkB,CAC7B,SACAF,KAAAA,cAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,GACbI,KAAcrB,cAAAA,MAAD,GACbqB,mBAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,CAJgB,EAK7BO,KAAK,IALwB;AAAA,cAAA;AAAA;AAU3B,oBAAA,IAAIC,MAAO,mBAAkB3B,WAA7B;AAAA;AAAA,QAAA,CA/BI,CADD;AAAA,MAAA,CADrB;AAAA,IAAA,CATF;AAAA,EAAA,CALF;AAwDH,CAhEyB;;"}
+{"version":3,"file":"Divider.cjs.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n  ElementIDValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: ElementIDValue\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthValue\n  color?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n    // Wrapping it in another flex container fixes it for some reason, read more here:\n    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n    <div\n      ref={ref}\n      id={id}\n      className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n    >\n      <div\n        className={useStyle({\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          minHeight: 40,\n          width: '100%',\n        })}\n      >\n        <div\n          className={useStyle(\n            useResponsiveStyle(\n              [variant, thickness, color] as const,\n              ([\n                variant = 'solid',\n                thickness = { value: 1, unit: 'px' },\n                color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              ]) => {\n                switch (variant) {\n                  case 'solid':\n                  case 'dashed':\n                  case 'dotted':\n                    return {\n                      borderBottomWidth:\n                        thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n                      borderBottomStyle: variant,\n                      borderBottomColor: colorToString(color),\n                    }\n\n                  case 'blended':\n                    return {\n                      height: `${thickness.value}${thickness.unit}`,\n                      background: `linear-gradient(${[\n                        '90deg',\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                        colorToString(color),\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                      ].join(', ')})`,\n                    }\n\n                  default:\n                    variant as never\n                    throw new Error(`Invalid variant ${variant}.`)\n                }\n              },\n            ),\n          )}\n        />\n      </div>\n    </div>\n  )\n})\n\nexport default Divider\n"],"names":["Divider","forwardRef","id","variant","thickness","color","width","margin","ref","cx","useStyle","display","flexDirection","justifyContent","minHeight","useResponsiveStyle","value","unit","swatch","hue","saturation","lightness","alpha","borderBottomWidth","borderBottomStyle","borderBottomColor","colorToString","height","background","join","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBMA,MAAAA,UAAUC,MAAAA,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,wCAIE,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWC,OAAGC,mBAAS;AAAA,MAAEC,SAAS;AAAA,MAAQL,OAAO;AAAA,IAAA,CAA3B,GAAsCA,OAAOC,MAAtD;AAAA,IAEb,yCAAA,OAAA;AAAA,MACE,WAAWG,UAAAA,SAAS;AAAA,QAClBC,SAAS;AAAA,QACTC,eAAe;AAAA,QACfC,gBAAgB;AAAA,QAChBC,WAAW;AAAA,QACXR,OAAO;AAAA,MAAA,CALU;AAAA,MAQnB,yCAAA,OAAA;AAAA,QACE,WAAWI,UAAAA,SACTK,wBACE,CAACZ,SAASC,WAAWC,KAArB,GACA,CAAC,CACCF,WAAU,SACVC,aAAY;AAAA,UAAEY,OAAO;AAAA,UAAGC,MAAM;AAAA,WAC9BZ,SAAQ;AAAA,UAAEa,QAAQ;AAAA,YAAEC,KAAK;AAAA,YAAGC,YAAY;AAAA,YAAGC,WAAW;AAAA,UAA9C;AAAA,UAAmDC,OAAO;AAAA,QAAA,OAC9D;AACInB,kBAAAA;AAAAA,iBACD;AAAA,iBACA;AAAA,iBACA;AACI,qBAAA;AAAA,gBACLoB,mBACEnB,cAAa,OAAO,IAAK,GAAEA,WAAUY,QAAQZ,WAAUa;AAAAA,gBACzDO,mBAAmBrB;AAAAA,gBACnBsB,mBAAmBC,mBAAcrB,MAAD;AAAA,cAAA;AAAA,iBAG/B;AACI,qBAAA;AAAA,gBACLsB,QAAS,GAAEvB,WAAUY,QAAQZ,WAAUa;AAAAA,gBACvCW,YAAa,mBAAkB,CAC7B,SACAF,KAAAA,cAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,GACbI,KAAcrB,cAAAA,MAAD,GACbqB,mBAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,CAJgB,EAK7BO,KAAK,IALwB;AAAA,cAAA;AAAA;AAU3B,oBAAA,IAAIC,MAAO,mBAAkB3B,WAA7B;AAAA;AAAA,QAAA,CA/BI,CADD;AAAA,MAAA,CADrB;AAAA,IAAA,CATF;AAAA,EAAA,CALF;AAwDH,CAhEyB;;"}

package/dist/Divider.es.js

@@ -1,31 +1,32 @@
 import { forwardRef } from "react";
-import { n as useStyle, o as useResponsiveStyle, r as colorToString } from "./index.es.js";
+import { n as useResponsiveStyle, q as colorToString } from "./index.es.js";
+import { Z as useStyle } from "./react-page.es.js";
 import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "next/dynamic";
-import "./react-page.es.js";
-import "redux";
-import "redux-thunk";
 import "./actions.es.js";
-import "./state/breakpoints.es.js";
+import "./text-input.es.js";
+import "./combobox.es.js";
 import "slate";
+import "./state/breakpoints.es.js";
 import "is-hotkey";
 import "slate-react";
-import "@emotion/serialize";
-import "@emotion/utils";
-import "./text-input.es.js";
-import "./combobox.es.js";
-import "./select.es.js";
 import "use-sync-external-store/shim";
+import "redux";
+import "redux-thunk";
 import "./types.es.js";
+import "./deepEqual.es.js";
 import "./box-models.es.js";
 import "css-box-model";
 import "color";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
+import "zod";
 import "@emotion/server/create-instance";
 import "next/document";
 import "cors";

package/dist/Divider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.es.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n  ElementIDValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: ElementIDValue\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthValue\n  color?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n    // Wrapping it in another flex container fixes it for some reason, read more here:\n    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n    <div\n      ref={ref}\n      id={id}\n      className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n    >\n      <div\n        className={useStyle({\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          minHeight: 40,\n          width: '100%',\n        })}\n      >\n        <div\n          className={useStyle(\n            useResponsiveStyle(\n              [variant, thickness, color] as const,\n              ([\n                variant = 'solid',\n                thickness = { value: 1, unit: 'px' },\n                color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              ]) => {\n                switch (variant) {\n                  case 'solid':\n                  case 'dashed':\n                  case 'dotted':\n                    return {\n                      borderBottomWidth:\n                        thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n                      borderBottomStyle: variant,\n                      borderBottomColor: colorToString(color),\n                    }\n\n                  case 'blended':\n                    return {\n                      height: `${thickness.value}${thickness.unit}`,\n                      background: `linear-gradient(${[\n                        '90deg',\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                        colorToString(color),\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                      ].join(', ')})`,\n                    }\n\n                  default:\n                    variant as never\n                    throw new Error(`Invalid variant ${variant}.`)\n                }\n              },\n            ),\n          )}\n        />\n      </div>\n    </div>\n  )\n})\n\nexport default Divider\n"],"names":["Divider","forwardRef","id","variant","thickness","color","width","margin","ref","cx","useStyle","display","flexDirection","justifyContent","minHeight","useResponsiveStyle","value","unit","swatch","hue","saturation","lightness","alpha","borderBottomWidth","borderBottomStyle","borderBottomColor","colorToString","height","background","join","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBMA,MAAAA,UAAUC,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,6BAIE,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWC,GAAGC,SAAS;AAAA,MAAEC,SAAS;AAAA,MAAQL,OAAO;AAAA,IAAA,CAA3B,GAAsCA,OAAOC,MAAtD;AAAA,IAEb,8BAAA,OAAA;AAAA,MACE,WAAWG,SAAS;AAAA,QAClBC,SAAS;AAAA,QACTC,eAAe;AAAA,QACfC,gBAAgB;AAAA,QAChBC,WAAW;AAAA,QACXR,OAAO;AAAA,MAAA,CALU;AAAA,MAQnB,8BAAA,OAAA;AAAA,QACE,WAAWI,SACTK,mBACE,CAACZ,SAASC,WAAWC,KAArB,GACA,CAAC,CACCF,WAAU,SACVC,aAAY;AAAA,UAAEY,OAAO;AAAA,UAAGC,MAAM;AAAA,WAC9BZ,SAAQ;AAAA,UAAEa,QAAQ;AAAA,YAAEC,KAAK;AAAA,YAAGC,YAAY;AAAA,YAAGC,WAAW;AAAA,UAA9C;AAAA,UAAmDC,OAAO;AAAA,QAAA,OAC9D;AACInB,kBAAAA;AAAAA,iBACD;AAAA,iBACA;AAAA,iBACA;AACI,qBAAA;AAAA,gBACLoB,mBACEnB,cAAa,OAAO,IAAK,GAAEA,WAAUY,QAAQZ,WAAUa;AAAAA,gBACzDO,mBAAmBrB;AAAAA,gBACnBsB,mBAAmBC,cAAcrB,MAAD;AAAA,cAAA;AAAA,iBAG/B;AACI,qBAAA;AAAA,gBACLsB,QAAS,GAAEvB,WAAUY,QAAQZ,WAAUa;AAAAA,gBACvCW,YAAa,mBAAkB,CAC7B,SACAF,cAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,GACbI,cAAcrB,MAAD,GACbqB,cAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,CAJgB,EAK7BO,KAAK,IALwB;AAAA,cAAA;AAAA;AAU3B,oBAAA,IAAIC,MAAO,mBAAkB3B,WAA7B;AAAA;AAAA,QAAA,CA/BI,CADD;AAAA,MAAA,CADrB;AAAA,IAAA,CATF;AAAA,EAAA,CALF;AAwDH,CAhEyB;;"}
+{"version":3,"file":"Divider.es.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\n\nimport {\n  ElementIDValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype DividerVariant = 'solid' | 'dashed' | 'dotted' | 'blended'\n\ntype Props = {\n  id?: ElementIDValue\n  variant?: ResponsiveSelectValue<DividerVariant>\n  thickness?: ResponsiveLengthValue\n  color?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\nconst Divider = forwardRef(function Divider(\n  { id, variant, thickness, color, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    // IE11 has a bug with Flexbox vertical centering with min height if height is not set.\n    // Wrapping it in another flex container fixes it for some reason, read more here:\n    // https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie\n    <div\n      ref={ref}\n      id={id}\n      className={cx(useStyle({ display: 'flex', width: '100%' }), width, margin)}\n    >\n      <div\n        className={useStyle({\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          minHeight: 40,\n          width: '100%',\n        })}\n      >\n        <div\n          className={useStyle(\n            useResponsiveStyle(\n              [variant, thickness, color] as const,\n              ([\n                variant = 'solid',\n                thickness = { value: 1, unit: 'px' },\n                color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n              ]) => {\n                switch (variant) {\n                  case 'solid':\n                  case 'dashed':\n                  case 'dotted':\n                    return {\n                      borderBottomWidth:\n                        thickness == null ? 1 : `${thickness.value}${thickness.unit}`,\n                      borderBottomStyle: variant,\n                      borderBottomColor: colorToString(color),\n                    }\n\n                  case 'blended':\n                    return {\n                      height: `${thickness.value}${thickness.unit}`,\n                      background: `linear-gradient(${[\n                        '90deg',\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                        colorToString(color),\n                        colorToString({ swatch: color.swatch, alpha: 0 }),\n                      ].join(', ')})`,\n                    }\n\n                  default:\n                    variant as never\n                    throw new Error(`Invalid variant ${variant}.`)\n                }\n              },\n            ),\n          )}\n        />\n      </div>\n    </div>\n  )\n})\n\nexport default Divider\n"],"names":["Divider","forwardRef","id","variant","thickness","color","width","margin","ref","cx","useStyle","display","flexDirection","justifyContent","minHeight","useResponsiveStyle","value","unit","swatch","hue","saturation","lightness","alpha","borderBottomWidth","borderBottomStyle","borderBottomColor","colorToString","height","background","join","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBMA,MAAAA,UAAUC,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,6BAIE,OAAA;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAWC,GAAGC,SAAS;AAAA,MAAEC,SAAS;AAAA,MAAQL,OAAO;AAAA,IAAA,CAA3B,GAAsCA,OAAOC,MAAtD;AAAA,IAEb,8BAAA,OAAA;AAAA,MACE,WAAWG,SAAS;AAAA,QAClBC,SAAS;AAAA,QACTC,eAAe;AAAA,QACfC,gBAAgB;AAAA,QAChBC,WAAW;AAAA,QACXR,OAAO;AAAA,MAAA,CALU;AAAA,MAQnB,8BAAA,OAAA;AAAA,QACE,WAAWI,SACTK,mBACE,CAACZ,SAASC,WAAWC,KAArB,GACA,CAAC,CACCF,WAAU,SACVC,aAAY;AAAA,UAAEY,OAAO;AAAA,UAAGC,MAAM;AAAA,WAC9BZ,SAAQ;AAAA,UAAEa,QAAQ;AAAA,YAAEC,KAAK;AAAA,YAAGC,YAAY;AAAA,YAAGC,WAAW;AAAA,UAA9C;AAAA,UAAmDC,OAAO;AAAA,QAAA,OAC9D;AACInB,kBAAAA;AAAAA,iBACD;AAAA,iBACA;AAAA,iBACA;AACI,qBAAA;AAAA,gBACLoB,mBACEnB,cAAa,OAAO,IAAK,GAAEA,WAAUY,QAAQZ,WAAUa;AAAAA,gBACzDO,mBAAmBrB;AAAAA,gBACnBsB,mBAAmBC,cAAcrB,MAAD;AAAA,cAAA;AAAA,iBAG/B;AACI,qBAAA;AAAA,gBACLsB,QAAS,GAAEvB,WAAUY,QAAQZ,WAAUa;AAAAA,gBACvCW,YAAa,mBAAkB,CAC7B,SACAF,cAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,GACbI,cAAcrB,MAAD,GACbqB,cAAc;AAAA,kBAAER,QAAQb,OAAMa;AAAAA,kBAAQI,OAAO;AAAA,gBAAhC,CAAA,CAJgB,EAK7BO,KAAK,IALwB;AAAA,cAAA;AAAA;AAU3B,oBAAA,IAAIC,MAAO,mBAAkB3B,WAA7B;AAAA;AAAA,QAAA,CA/BI,CADD;AAAA,MAAA,CADrB;AAAA,IAAA,CATF;AAAA,EAAA,CALF;AAwDH,CAhEyB;;"}

package/dist/Embed.cjs.js

@@ -2,43 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
-var next = require("./index.cjs.js");
+var reactPage = require("./react-page.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
-require("use-sync-external-store/shim/with-selector");
-require("next/dynamic");
-require("./react-page.cjs.js");
 require("redux");
 require("redux-thunk");
 require("./actions.cjs.js");
 require("./state/breakpoints.cjs.js");
+require("@emotion/serialize");
+require("@emotion/utils");
 require("slate");
 require("is-hotkey");
 require("slate-react");
-require("@emotion/serialize");
-require("@emotion/utils");
-require("./text-input.cjs.js");
-require("./combobox.cjs.js");
-require("./select.cjs.js");
-require("use-sync-external-store/shim");
-require("./types.cjs.js");
-require("./box-models.cjs.js");
-require("css-box-model");
-require("color");
-require("scroll-into-view-if-needed");
-require("react-dom");
-require("html-react-parser");
-require("next/head");
-require("@emotion/server/create-instance");
-require("next/document");
-require("cors");
-require("path-to-regexp");
-require("cookie");
-require("http-proxy");
-require("set-cookie-parser");
-require("./constants.cjs.js");
-require("uuid");
-require("corporate-ipsum");
 const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
 <svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
@@ -112,7 +87,7 @@ const Embed = React.forwardRef(function Embed2({
       console.error(error);
     });
   }, [container, html]);
-  const className = next.useStyle({
+  const className = reactPage.useStyle({
     minHeight: 15
   });
   if (shouldRender === false)

package/dist/Embed.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Embed.cjs.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","className","useStyle","minHeight","cx","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,MAAAA,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,MAAAA,SAAS,KAAD;AAEhDG,4BAAAA,0BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,QAAAA,oBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,QAAAA,UAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDHgD,QAAAA,YAAYC,KAAAA,SAAS;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAd;AAE1B,MAAI7C,iBAAiB;AAAc,WAAA;AAGjC,wCAAA,OAAA;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA,WAAWgD,IAAAA,GAAGH,WAAWlD,OAAOC,MAAnB;AAAA,IACb,yBAAyB;AAAA,MAAEqD,QAAQpD;AAAAA,IAAV;AAAA,EAAA,CAL7B;AAQD,CA3EuB;;"}
+{"version":3,"file":"Embed.cjs.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","className","useStyle","minHeight","cx","__html"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,MAAAA,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,MAAAA,SAAS,KAAD;AAEhDG,4BAAAA,0BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,QAAAA,oBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,QAAAA,UAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDHgD,QAAAA,YAAYC,UAAAA,SAAS;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAd;AAE1B,MAAI7C,iBAAiB;AAAc,WAAA;AAGjC,wCAAA,OAAA;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA,WAAWgD,IAAAA,GAAGH,WAAWlD,OAAOC,MAAnB;AAAA,IACb,yBAAyB;AAAA,MAAEqD,QAAQpD;AAAAA,IAAV;AAAA,EAAA,CAL7B;AAQD,CA3EuB;;"}

package/dist/Embed.es.js

@@ -1,42 +1,17 @@
 import { forwardRef, useState, useImperativeHandle, useEffect } from "react";
 import { u as useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.es.js";
-import { n as useStyle } from "./index.es.js";
+import { Z as useStyle } from "./react-page.es.js";
 import { cx } from "@emotion/css";
 import { jsx } from "react/jsx-runtime";
-import "use-sync-external-store/shim/with-selector";
-import "next/dynamic";
-import "./react-page.es.js";
 import "redux";
 import "redux-thunk";
 import "./actions.es.js";
 import "./state/breakpoints.es.js";
+import "@emotion/serialize";
+import "@emotion/utils";
 import "slate";
 import "is-hotkey";
 import "slate-react";
-import "@emotion/serialize";
-import "@emotion/utils";
-import "./text-input.es.js";
-import "./combobox.es.js";
-import "./select.es.js";
-import "use-sync-external-store/shim";
-import "./types.es.js";
-import "./box-models.es.js";
-import "css-box-model";
-import "color";
-import "scroll-into-view-if-needed";
-import "react-dom";
-import "html-react-parser";
-import "next/head";
-import "@emotion/server/create-instance";
-import "next/document";
-import "cors";
-import "path-to-regexp";
-import "cookie";
-import "http-proxy";
-import "set-cookie-parser";
-import "./constants.es.js";
-import "uuid";
-import "corporate-ipsum";
 const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
 <svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>

package/dist/Embed.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Embed.es.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","className","useStyle","minHeight","cx","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,SAAS,KAAD;AAEhDG,4BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,sBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,YAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDHgD,QAAAA,YAAYC,SAAS;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAd;AAE1B,MAAI7C,iBAAiB;AAAc,WAAA;AAGjC,6BAAA,OAAA;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA,WAAWgD,GAAGH,WAAWlD,OAAOC,MAAnB;AAAA,IACb,yBAAyB;AAAA,MAAEqD,QAAQpD;AAAAA,IAAV;AAAA,EAAA,CAL7B;AAQD,CA3EuB;;"}
+{"version":3,"file":"Embed.es.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { ElementIDValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","className","useStyle","minHeight","cx","__html"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAMA,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,SAAS,KAAD;AAEhDG,4BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,sBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,YAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDHgD,QAAAA,YAAYC,SAAS;AAAA,IAAEC,WAAW;AAAA,EAAA,CAAd;AAE1B,MAAI7C,iBAAiB;AAAc,WAAA;AAGjC,6BAAA,OAAA;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA,WAAWgD,GAAGH,WAAWlD,OAAOC,MAAnB;AAAA,IACb,yBAAyB;AAAA,MAAEqD,QAAQpD;AAAAA,IAAV;AAAA,EAAA,CAL7B;AAQD,CA3EuB;;"}