@makeswift/runtime 0.0.21 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/dist/Box.cjs.js +502 -0
  2. package/dist/Box.cjs.js.map +1 -0
  3. package/dist/Box.es.js +496 -0
  4. package/dist/Box.es.js.map +1 -0
  5. package/dist/Button.cjs.js +308 -0
  6. package/dist/Button.cjs.js.map +1 -0
  7. package/dist/Button.es.js +301 -0
  8. package/dist/Button.es.js.map +1 -0
  9. package/dist/Carousel.cjs.js +487 -0
  10. package/dist/Carousel.cjs.js.map +1 -0
  11. package/dist/Carousel.es.js +481 -0
  12. package/dist/Carousel.es.js.map +1 -0
  13. package/dist/Countdown.cjs.js +340 -0
  14. package/dist/Countdown.cjs.js.map +1 -0
  15. package/dist/Countdown.es.js +334 -0
  16. package/dist/Countdown.es.js.map +1 -0
  17. package/dist/Divider.cjs.js +115 -0
  18. package/dist/Divider.cjs.js.map +1 -0
  19. package/dist/Divider.es.js +109 -0
  20. package/dist/Divider.es.js.map +1 -0
  21. package/dist/Embed.cjs.js +129 -0
  22. package/dist/Embed.cjs.js.map +1 -0
  23. package/dist/Embed.es.js +123 -0
  24. package/dist/Embed.es.js.map +1 -0
  25. package/dist/Form.cjs.js +1705 -0
  26. package/dist/Form.cjs.js.map +1 -0
  27. package/dist/Form.es.js +1677 -0
  28. package/dist/Form.es.js.map +1 -0
  29. package/dist/Image.cjs2.js +148 -0
  30. package/dist/Image.cjs2.js.map +1 -0
  31. package/dist/Image.es2.js +141 -0
  32. package/dist/Image.es2.js.map +1 -0
  33. package/dist/Navigation.cjs.js +736 -0
  34. package/dist/Navigation.cjs.js.map +1 -0
  35. package/dist/Navigation.es.js +710 -0
  36. package/dist/Navigation.es.js.map +1 -0
  37. package/dist/Root.cjs.js +143 -0
  38. package/dist/Root.cjs.js.map +1 -0
  39. package/dist/Root.es.js +137 -0
  40. package/dist/Root.es.js.map +1 -0
  41. package/dist/SocialLinks.cjs.js +900 -0
  42. package/dist/SocialLinks.cjs.js.map +1 -0
  43. package/dist/SocialLinks.es.js +874 -0
  44. package/dist/SocialLinks.es.js.map +1 -0
  45. package/dist/Text.cjs.js +475 -0
  46. package/dist/Text.cjs.js.map +1 -0
  47. package/dist/Text.es.js +467 -0
  48. package/dist/Text.es.js.map +1 -0
  49. package/dist/Video.cjs.js +121 -0
  50. package/dist/Video.cjs.js.map +1 -0
  51. package/dist/Video.es.js +114 -0
  52. package/dist/Video.es.js.map +1 -0
  53. package/dist/components.cjs.js +80 -58
  54. package/dist/components.cjs.js.map +1 -1
  55. package/dist/components.es.js +41 -18
  56. package/dist/components.es.js.map +1 -1
  57. package/dist/cssMediaRules.cjs.js +222 -0
  58. package/dist/cssMediaRules.cjs.js.map +1 -0
  59. package/dist/cssMediaRules.es.js +213 -0
  60. package/dist/cssMediaRules.es.js.map +1 -0
  61. package/dist/descriptors.es.js +1 -1
  62. package/dist/index.cjs.js +1411 -7742
  63. package/dist/index.cjs.js.map +1 -1
  64. package/dist/index.cjs2.js +522 -0
  65. package/dist/index.cjs2.js.map +1 -0
  66. package/dist/index.cjs3.js +141 -0
  67. package/dist/index.cjs3.js.map +1 -0
  68. package/dist/index.cjs4.js +18 -0
  69. package/dist/index.cjs4.js.map +1 -0
  70. package/dist/index.es.js +1342 -7698
  71. package/dist/index.es.js.map +1 -1
  72. package/dist/index.es2.js +514 -0
  73. package/dist/index.es2.js.map +1 -0
  74. package/dist/index.es3.js +134 -0
  75. package/dist/index.es3.js.map +1 -0
  76. package/dist/index.es4.js +13 -0
  77. package/dist/index.es4.js.map +1 -0
  78. package/dist/next.cjs.js +19 -201
  79. package/dist/next.cjs.js.map +1 -1
  80. package/dist/next.es.js +12 -192
  81. package/dist/next.es.js.map +1 -1
  82. package/dist/placeholders.cjs.js +13 -0
  83. package/dist/placeholders.cjs.js.map +1 -0
  84. package/dist/placeholders.es.js +12 -0
  85. package/dist/placeholders.es.js.map +1 -0
  86. package/dist/react-builder-preview.cjs.js +23 -33
  87. package/dist/react-builder-preview.cjs.js.map +1 -1
  88. package/dist/react-builder-preview.es.js +13 -23
  89. package/dist/react-builder-preview.es.js.map +1 -1
  90. package/dist/react-page.es.js +1 -1
  91. package/dist/react.cjs.js +16 -28
  92. package/dist/react.cjs.js.map +1 -1
  93. package/dist/react.es.js +8 -20
  94. package/dist/react.es.js.map +1 -1
  95. package/dist/types/components/builtin/Box/Box.d.ts +1 -4
  96. package/dist/types/components/builtin/Box/Box.d.ts.map +1 -1
  97. package/dist/types/components/builtin/Box/animations.d.ts +1 -8
  98. package/dist/types/components/builtin/Box/animations.d.ts.map +1 -1
  99. package/dist/types/components/builtin/Box/constants.d.ts +9 -0
  100. package/dist/types/components/builtin/Box/constants.d.ts.map +1 -0
  101. package/dist/types/components/builtin/Box/index.d.ts +2 -2
  102. package/dist/types/components/builtin/Box/index.d.ts.map +1 -1
  103. package/dist/types/components/builtin/Box/register.d.ts +3 -0
  104. package/dist/types/components/builtin/Box/register.d.ts.map +1 -0
  105. package/dist/types/components/builtin/Button/Button.d.ts +1 -4
  106. package/dist/types/components/builtin/Button/Button.d.ts.map +1 -1
  107. package/dist/types/components/builtin/Button/contants.d.ts +2 -0
  108. package/dist/types/components/builtin/Button/contants.d.ts.map +1 -0
  109. package/dist/types/components/builtin/Button/index.d.ts +1 -1
  110. package/dist/types/components/builtin/Button/index.d.ts.map +1 -1
  111. package/dist/types/components/builtin/Button/register.d.ts +3 -0
  112. package/dist/types/components/builtin/Button/register.d.ts.map +1 -0
  113. package/dist/types/components/builtin/Carousel/Carousel.d.ts +0 -3
  114. package/dist/types/components/builtin/Carousel/Carousel.d.ts.map +1 -1
  115. package/dist/types/components/builtin/Carousel/index.d.ts +1 -1
  116. package/dist/types/components/builtin/Carousel/index.d.ts.map +1 -1
  117. package/dist/types/components/builtin/Carousel/register.d.ts +3 -0
  118. package/dist/types/components/builtin/Carousel/register.d.ts.map +1 -0
  119. package/dist/types/components/builtin/Countdown/Countdown.d.ts +0 -3
  120. package/dist/types/components/builtin/Countdown/Countdown.d.ts.map +1 -1
  121. package/dist/types/components/builtin/Countdown/index.d.ts +1 -1
  122. package/dist/types/components/builtin/Countdown/index.d.ts.map +1 -1
  123. package/dist/types/components/builtin/Countdown/register.d.ts +3 -0
  124. package/dist/types/components/builtin/Countdown/register.d.ts.map +1 -0
  125. package/dist/types/components/builtin/Divider/Divider.d.ts +0 -3
  126. package/dist/types/components/builtin/Divider/Divider.d.ts.map +1 -1
  127. package/dist/types/components/builtin/Divider/index.d.ts +1 -1
  128. package/dist/types/components/builtin/Divider/index.d.ts.map +1 -1
  129. package/dist/types/components/builtin/Divider/register.d.ts +3 -0
  130. package/dist/types/components/builtin/Divider/register.d.ts.map +1 -0
  131. package/dist/types/components/builtin/Embed/Embed.d.ts +0 -3
  132. package/dist/types/components/builtin/Embed/Embed.d.ts.map +1 -1
  133. package/dist/types/components/builtin/Embed/index.d.ts +1 -1
  134. package/dist/types/components/builtin/Embed/index.d.ts.map +1 -1
  135. package/dist/types/components/builtin/Embed/register.d.ts +3 -0
  136. package/dist/types/components/builtin/Embed/register.d.ts.map +1 -0
  137. package/dist/types/components/builtin/Form/Form.d.ts +1 -10
  138. package/dist/types/components/builtin/Form/Form.d.ts.map +1 -1
  139. package/dist/types/components/builtin/Form/context/FormContext.d.ts +6 -0
  140. package/dist/types/components/builtin/Form/context/FormContext.d.ts.map +1 -1
  141. package/dist/types/components/builtin/Form/index.d.ts +1 -1
  142. package/dist/types/components/builtin/Form/index.d.ts.map +1 -1
  143. package/dist/types/components/builtin/Form/register.d.ts +3 -0
  144. package/dist/types/components/builtin/Form/register.d.ts.map +1 -0
  145. package/dist/types/components/builtin/Image/Image.d.ts +0 -3
  146. package/dist/types/components/builtin/Image/Image.d.ts.map +1 -1
  147. package/dist/types/components/builtin/Image/index.d.ts +1 -1
  148. package/dist/types/components/builtin/Image/index.d.ts.map +1 -1
  149. package/dist/types/components/builtin/Image/register.d.ts +3 -0
  150. package/dist/types/components/builtin/Image/register.d.ts.map +1 -0
  151. package/dist/types/components/builtin/Navigation/Navigation.d.ts +0 -3
  152. package/dist/types/components/builtin/Navigation/Navigation.d.ts.map +1 -1
  153. package/dist/types/components/builtin/Navigation/index.d.ts +1 -1
  154. package/dist/types/components/builtin/Navigation/index.d.ts.map +1 -1
  155. package/dist/types/components/builtin/Navigation/register.d.ts +3 -0
  156. package/dist/types/components/builtin/Navigation/register.d.ts.map +1 -0
  157. package/dist/types/components/builtin/Root/Root.d.ts +0 -2
  158. package/dist/types/components/builtin/Root/Root.d.ts.map +1 -1
  159. package/dist/types/components/builtin/Root/index.d.ts +1 -1
  160. package/dist/types/components/builtin/Root/index.d.ts.map +1 -1
  161. package/dist/types/components/builtin/Root/register.d.ts +3 -0
  162. package/dist/types/components/builtin/Root/register.d.ts.map +1 -0
  163. package/dist/types/components/builtin/SocialLinks/SocialLinks.d.ts +0 -3
  164. package/dist/types/components/builtin/SocialLinks/SocialLinks.d.ts.map +1 -1
  165. package/dist/types/components/builtin/SocialLinks/index.d.ts +1 -1
  166. package/dist/types/components/builtin/SocialLinks/index.d.ts.map +1 -1
  167. package/dist/types/components/builtin/SocialLinks/register.d.ts +3 -0
  168. package/dist/types/components/builtin/SocialLinks/register.d.ts.map +1 -0
  169. package/dist/types/components/builtin/Text/Text.d.ts +0 -3
  170. package/dist/types/components/builtin/Text/Text.d.ts.map +1 -1
  171. package/dist/types/components/builtin/Text/index.d.ts +1 -1
  172. package/dist/types/components/builtin/Text/index.d.ts.map +1 -1
  173. package/dist/types/components/builtin/Text/register.d.ts +3 -0
  174. package/dist/types/components/builtin/Text/register.d.ts.map +1 -0
  175. package/dist/types/components/builtin/Video/Video.d.ts +0 -3
  176. package/dist/types/components/builtin/Video/Video.d.ts.map +1 -1
  177. package/dist/types/components/builtin/Video/index.d.ts +1 -1
  178. package/dist/types/components/builtin/Video/index.d.ts.map +1 -1
  179. package/dist/types/components/builtin/Video/register.d.ts +3 -0
  180. package/dist/types/components/builtin/Video/register.d.ts.map +1 -0
  181. package/dist/types/components/builtin/index.d.ts +1 -2
  182. package/dist/types/components/builtin/index.d.ts.map +1 -1
  183. package/dist/types/components/builtin/register.d.ts +3 -0
  184. package/dist/types/components/builtin/register.d.ts.map +1 -0
  185. package/dist/types/next.d.ts +12 -2
  186. package/dist/types/next.d.ts.map +1 -1
  187. package/dist/useBoxShadow.cjs.js +78 -0
  188. package/dist/useBoxShadow.cjs.js.map +1 -0
  189. package/dist/useBoxShadow.es.js +77 -0
  190. package/dist/useBoxShadow.es.js.map +1 -0
  191. package/dist/useMediaQuery.cjs.js +26 -0
  192. package/dist/useMediaQuery.cjs.js.map +1 -0
  193. package/dist/useMediaQuery.es.js +25 -0
  194. package/dist/useMediaQuery.es.js.map +1 -0
  195. package/next/plugin.js +1 -0
  196. package/package.json +4 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n DateValue,\n ElementIDValue,\n FontValue,\n GapXValue,\n MarginValue,\n ResponsiveIconRadioGroupValue,\n TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: MarginValue\n daysLabel?: TextInputValue\n hoursLabel?: TextInputValue\n minutesLabel?: TextInputValue\n secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n display: block;\n padding: 0.5em;\n font-size: 1em;\n`\n\nconst Label = styled.div`\n margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n flex: 1;\n text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n shouldForwardProp: prop =>\n ![\n 'margin',\n 'variant',\n 'size',\n 'shape',\n 'gap',\n 'labelColor',\n 'numberFont',\n 'numberColor',\n 'blockColor',\n 'labelFont',\n ].includes(prop),\n})<{\n margin: Props['margin']\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 display: flex;\n ${cssMargin()}\n ${p =>\n cssMediaRules([p.size] as const, ([size = 'medium']) => {\n switch (size) {\n case 'small':\n return css`\n font-size: 18px;\n\n ${Label} {\n font-size: 14px;\n }\n `\n case 'large':\n return css`\n font-size: 32px;\n\n ${Label} {\n font-size: 18px;\n }\n `\n default:\n return css`\n font-size: 24px;\n\n ${Label} {\n font-size: 16px;\n }\n `\n }\n })}\n\n ${Segment} {\n ${p =>\n cssMediaRules(\n [p.gap] as const,\n ([gap]) => css`\n margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n &:first-child {\n margin-left: 0;\n }\n\n &:last-child {\n margin-right: 0;\n }\n `,\n )}\n }\n\n ${Block} {\n ${p =>\n cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n switch (shape) {\n case 'pill':\n return css`\n border-radius: 500px;\n `\n case 'rounded':\n return css`\n border-radius: 6px;\n `\n default:\n return css`\n border-radius: 0;\n `\n }\n })}\n ${p =>\n cssMediaRules(\n [p.variant, p.blockColor, p.numberColor, p.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 css`\n font-family: '${numberFont}';\n color: ${colorToString(numberColor)};\n background: ${colorToString(blockColor)};\n `\n case 'filled-split':\n return css`\n position: relative;\n color: ${colorToString(numberColor)};\n font-family: '${numberFont}';\n\n > span {\n position: relative;\n z-index: 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 border-top-left-radius: inherit;\n border-top-right-radius: 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 border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n background: ${colorToString(blockColor)};\n }\n `\n case 'outline':\n return css`\n font-family: '${numberFont}';\n color: ${colorToString(numberColor)};\n background: transparent;\n border: 2px solid ${colorToString(blockColor)};\n `\n case 'outline-split':\n return css`\n position: relative;\n font-family: '${numberFont}';\n color: ${colorToString(numberColor)};\n border: 2px solid ${colorToString(blockColor)};\n\n > span {\n position: relative;\n z-index: 1;\n }\n\n ::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 2px;\n margin-top: -1px;\n background: ${colorToString(blockColor)};\n }\n `\n default:\n return css`\n font-family: '${numberFont}';\n background: transparent;\n color: ${colorToString(numberColor)};\n padding-top: 0;\n padding-bottom: 0;\n `\n }\n },\n )}\n }\n\n ${Label} {\n ${p =>\n cssMediaRules(\n [p.labelColor, p.labelFont] as const,\n ([\n labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n labelFont = 'sans-serif',\n ]) => css`\n font-family: '${labelFont}';\n color: ${colorToString(labelColor)};\n `,\n )}\n }\n`\n\nconst getRemaining = (date: Props['date'] | 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 { days, hours, minutes, seconds }\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(date))\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 className={cx(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","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}
@@ -0,0 +1,115 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ var React = require("react");
4
+ var styled = require("styled-components");
5
+ var css = require("@emotion/css");
6
+ var cssMediaRules = require("./cssMediaRules.cjs.js");
7
+ var next = require("./index.cjs.js");
8
+ var jsxRuntime = require("react/jsx-runtime");
9
+ require("use-sync-external-store/shim/with-selector");
10
+ require("./react-page.cjs.js");
11
+ require("redux");
12
+ require("redux-thunk");
13
+ require("./actions.cjs.js");
14
+ require("./descriptors.cjs.js");
15
+ require("./style.cjs.js");
16
+ require("./color.cjs.js");
17
+ require("./image.cjs.js");
18
+ require("next/dynamic");
19
+ require("next/document");
20
+ require("slate");
21
+ require("@emotion/server/create-instance");
22
+ require("@apollo/client");
23
+ require("@apollo/client/link/batch-http");
24
+ require("./graphql.cjs.js");
25
+ require("./text-input.cjs.js");
26
+ require("./shape.cjs.js");
27
+ require("color");
28
+ require("react-dom");
29
+ require("html-react-parser");
30
+ require("next/head");
31
+ require("uuid/v4");
32
+ require("corporate-ipsum");
33
+ function _interopDefaultLegacy(e) {
34
+ return e && typeof e === "object" && "default" in e ? e : { "default": e };
35
+ }
36
+ var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
37
+ const IE11MinHeightContainer = styled__default["default"].div.withConfig({
38
+ shouldForwardProp: (prop) => !["margin"].includes(prop)
39
+ })`
40
+ display: flex;
41
+ width: 100%;
42
+ ${cssMediaRules.cssMargin()}
43
+ `;
44
+ const Container = styled__default["default"].div`
45
+ display: flex;
46
+ flex-direction: column;
47
+ justify-content: center;
48
+ min-height: 40px;
49
+ width: 100%;
50
+ `;
51
+ const Line = styled__default["default"].div.withConfig({
52
+ shouldForwardProp: (prop) => !["variant", "color", "thickness"].includes(prop)
53
+ })`
54
+ ${(p) => cssMediaRules.cssMediaRules([p.variant, p.thickness, p.color], ([variant = "solid", thickness = {
55
+ value: 1,
56
+ unit: "px"
57
+ }, color = {
58
+ swatch: {
59
+ hue: 0,
60
+ saturation: 0,
61
+ lightness: 0
62
+ },
63
+ alpha: 1
64
+ }]) => {
65
+ switch (variant) {
66
+ case "solid":
67
+ case "dashed":
68
+ case "dotted":
69
+ return styled.css`
70
+ border-bottom-width: ${thickness == null ? "1px" : `${thickness.value}${thickness.unit}`};
71
+ border-bottom-style: ${variant};
72
+ border-bottom-color: ${next.colorToString(color)};
73
+ `;
74
+ case "blended":
75
+ return styled.css`
76
+ height: ${`${thickness.value}${thickness.unit}`};
77
+ background: linear-gradient(
78
+ ${["90deg", next.colorToString({
79
+ swatch: color.swatch,
80
+ alpha: 0
81
+ }), next.colorToString(color), next.colorToString({
82
+ swatch: color.swatch,
83
+ alpha: 0
84
+ })].join(", ")}
85
+ );
86
+ `;
87
+ default:
88
+ throw new Error(`Invalid variant ${variant}.`);
89
+ }
90
+ })}
91
+ `;
92
+ const Divider = React.forwardRef(function Divider2({
93
+ id,
94
+ variant,
95
+ thickness,
96
+ color,
97
+ width,
98
+ margin
99
+ }, ref) {
100
+ return /* @__PURE__ */ jsxRuntime.jsx(IE11MinHeightContainer, {
101
+ ref,
102
+ id,
103
+ className: css.cx(width),
104
+ margin,
105
+ children: /* @__PURE__ */ jsxRuntime.jsx(Container, {
106
+ children: /* @__PURE__ */ jsxRuntime.jsx(Line, {
107
+ variant,
108
+ thickness,
109
+ color
110
+ })
111
+ })
112
+ });
113
+ });
114
+ exports["default"] = Divider;
115
+ //# sourceMappingURL=Divider.cjs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.cjs.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n ElementIDValue,\n MarginValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: MarginValue\n}\n\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\nconst IE11MinHeightContainer = styled.div.withConfig({\n shouldForwardProp: prop => !['margin'].includes(prop),\n})<{ margin: Props['margin'] }>`\n display: flex;\n width: 100%;\n ${cssMargin()}\n`\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 40px;\n width: 100%;\n`\n\nconst Line = styled.div.withConfig({\n shouldForwardProp: prop => !['variant', 'color', 'thickness'].includes(prop),\n})<{\n variant: Props['variant']\n color?: ResponsiveValue<Color> | null\n thickness: Props['thickness']\n}>`\n ${p =>\n cssMediaRules(\n [p.variant, p.thickness, p.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 css`\n border-bottom-width: ${thickness == null\n ? '1px'\n : `${thickness.value}${thickness.unit}`};\n border-bottom-style: ${variant};\n border-bottom-color: ${colorToString(color)};\n `\n\n case 'blended':\n return css`\n height: ${`${thickness.value}${thickness.unit}`};\n background: linear-gradient(\n ${[\n '90deg',\n colorToString({ swatch: color.swatch, alpha: 0 }),\n colorToString(color),\n colorToString({ swatch: color.swatch, alpha: 0 }),\n ].join(', ')}\n );\n `\n\n default:\n variant as never\n throw new Error(`Invalid variant ${variant}.`)\n }\n },\n )}\n`\n\nconst Divider = forwardRef(function Divider(\n { id, variant, thickness, color, width, margin }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <IE11MinHeightContainer ref={ref} id={id} className={cx(width)} margin={margin}>\n <Container>\n {/* @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop */}\n <Line variant={variant} thickness={thickness} color={color} />\n </Container>\n </IE11MinHeightContainer>\n )\n})\n\nexport default Divider\n"],"names":["IE11MinHeightContainer","styled","div","withConfig","shouldForwardProp","prop","includes","cssMargin","Container","Line","p","cssMediaRules","variant","thickness","color","value","unit","swatch","hue","saturation","lightness","alpha","css","colorToString","join","Error","Divider","forwardRef","id","width","margin","ref","cx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,QAAD,EAAWC,SAASD,IAApB;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,cAAY,UAAA;AAAA;AAGhB,MAAMC,YAAYP,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMO,OAAOR,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTK,CACAC,MAAAA,cAAAA,cACE,CAACD,EAAEE,SAASF,EAAEG,WAAWH,EAAEI,KAA3B,GACA,CAAC,CACCF,UAAU,SACVC,YAAY;AAAA,EAAEE,OAAO;AAAA,EAAGC,MAAM;AAAlB,GACZF,QAAQ;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACIT,UAAAA;AAAAA,SACD;AAAA,SACA;AAAA,SACA;AACIU,aAAAA;qCACkBT,aAAa,OAChC,QACC,GAAEA,UAAUE,QAAQF,UAAUG;AAAAA,qCACZJ;AAAAA,qCACAW,KAAAA,cAAcT,KAAD;AAAA;AAAA,SAGnC;AACIQ,aAAAA;wBACM,GAAET,UAAUE,QAAQF,UAAUG;AAAAA;AAAAA,kBAErC,CACA,SACAO,mBAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAhC,CAAA,GACbE,KAAcT,cAAAA,KAAD,GACbS,mBAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAA,CAAhC,CAJb,EAKAG,KAAK,IALL;AAAA;AAAA;AAAA;AAWA,YAAA,IAAIC,MAAO,mBAAkBb,UAA7B;AAAA;AAEX,CApCU;AAAA;AAwCXc,MAAAA,UAAUC,MAAAA,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIhB;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOe;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,wCACG,wBAAD;AAAA,IAAwB;AAAA,IAAU;AAAA,IAAQ,WAAWC,OAAGH,KAAD;AAAA,IAAS;AAAA,IAAhE,yCACG,WAAD;AAAA,MAAA,yCAEG,MAAD;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAsB;AAAA,MAAA,CAA9C;AAAA,IAAA,CAFF;AAAA,EAAA,CAFJ;AAQD,CAZyB;;"}
@@ -0,0 +1,109 @@
1
+ import { forwardRef } from "react";
2
+ import styled, { css } from "styled-components";
3
+ import { cx } from "@emotion/css";
4
+ import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
5
+ import { o as colorToString } from "./index.es.js";
6
+ import { jsx } from "react/jsx-runtime";
7
+ import "use-sync-external-store/shim/with-selector";
8
+ import "./react-page.es.js";
9
+ import "redux";
10
+ import "redux-thunk";
11
+ import "./actions.es.js";
12
+ import "./descriptors.es.js";
13
+ import "./style.es.js";
14
+ import "./color.es.js";
15
+ import "./image.es.js";
16
+ import "next/dynamic";
17
+ import "next/document";
18
+ import "slate";
19
+ import "@emotion/server/create-instance";
20
+ import "@apollo/client";
21
+ import "@apollo/client/link/batch-http";
22
+ import "./graphql.es.js";
23
+ import "./text-input.es.js";
24
+ import "./shape.es.js";
25
+ import "color";
26
+ import "react-dom";
27
+ import "html-react-parser";
28
+ import "next/head";
29
+ import "uuid/v4";
30
+ import "corporate-ipsum";
31
+ const IE11MinHeightContainer = styled.div.withConfig({
32
+ shouldForwardProp: (prop) => !["margin"].includes(prop)
33
+ })`
34
+ display: flex;
35
+ width: 100%;
36
+ ${cssMargin()}
37
+ `;
38
+ const Container = styled.div`
39
+ display: flex;
40
+ flex-direction: column;
41
+ justify-content: center;
42
+ min-height: 40px;
43
+ width: 100%;
44
+ `;
45
+ const Line = styled.div.withConfig({
46
+ shouldForwardProp: (prop) => !["variant", "color", "thickness"].includes(prop)
47
+ })`
48
+ ${(p) => cssMediaRules([p.variant, p.thickness, p.color], ([variant = "solid", thickness = {
49
+ value: 1,
50
+ unit: "px"
51
+ }, color = {
52
+ swatch: {
53
+ hue: 0,
54
+ saturation: 0,
55
+ lightness: 0
56
+ },
57
+ alpha: 1
58
+ }]) => {
59
+ switch (variant) {
60
+ case "solid":
61
+ case "dashed":
62
+ case "dotted":
63
+ return css`
64
+ border-bottom-width: ${thickness == null ? "1px" : `${thickness.value}${thickness.unit}`};
65
+ border-bottom-style: ${variant};
66
+ border-bottom-color: ${colorToString(color)};
67
+ `;
68
+ case "blended":
69
+ return css`
70
+ height: ${`${thickness.value}${thickness.unit}`};
71
+ background: linear-gradient(
72
+ ${["90deg", colorToString({
73
+ swatch: color.swatch,
74
+ alpha: 0
75
+ }), colorToString(color), colorToString({
76
+ swatch: color.swatch,
77
+ alpha: 0
78
+ })].join(", ")}
79
+ );
80
+ `;
81
+ default:
82
+ throw new Error(`Invalid variant ${variant}.`);
83
+ }
84
+ })}
85
+ `;
86
+ const Divider = forwardRef(function Divider2({
87
+ id,
88
+ variant,
89
+ thickness,
90
+ color,
91
+ width,
92
+ margin
93
+ }, ref) {
94
+ return /* @__PURE__ */ jsx(IE11MinHeightContainer, {
95
+ ref,
96
+ id,
97
+ className: cx(width),
98
+ margin,
99
+ children: /* @__PURE__ */ jsx(Container, {
100
+ children: /* @__PURE__ */ jsx(Line, {
101
+ variant,
102
+ thickness,
103
+ color
104
+ })
105
+ })
106
+ });
107
+ });
108
+ export { Divider as default };
109
+ //# sourceMappingURL=Divider.es.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Divider.es.js","sources":["../src/components/builtin/Divider/Divider.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n ResponsiveValue,\n ElementIDValue,\n MarginValue,\n ResponsiveLengthValue,\n ResponsiveSelectValue,\n} from '../../../prop-controllers/descriptors'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\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?: MarginValue\n}\n\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\nconst IE11MinHeightContainer = styled.div.withConfig({\n shouldForwardProp: prop => !['margin'].includes(prop),\n})<{ margin: Props['margin'] }>`\n display: flex;\n width: 100%;\n ${cssMargin()}\n`\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 40px;\n width: 100%;\n`\n\nconst Line = styled.div.withConfig({\n shouldForwardProp: prop => !['variant', 'color', 'thickness'].includes(prop),\n})<{\n variant: Props['variant']\n color?: ResponsiveValue<Color> | null\n thickness: Props['thickness']\n}>`\n ${p =>\n cssMediaRules(\n [p.variant, p.thickness, p.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 css`\n border-bottom-width: ${thickness == null\n ? '1px'\n : `${thickness.value}${thickness.unit}`};\n border-bottom-style: ${variant};\n border-bottom-color: ${colorToString(color)};\n `\n\n case 'blended':\n return css`\n height: ${`${thickness.value}${thickness.unit}`};\n background: linear-gradient(\n ${[\n '90deg',\n colorToString({ swatch: color.swatch, alpha: 0 }),\n colorToString(color),\n colorToString({ swatch: color.swatch, alpha: 0 }),\n ].join(', ')}\n );\n `\n\n default:\n variant as never\n throw new Error(`Invalid variant ${variant}.`)\n }\n },\n )}\n`\n\nconst Divider = forwardRef(function Divider(\n { id, variant, thickness, color, width, margin }: Props,\n ref: Ref<HTMLDivElement>,\n) {\n return (\n <IE11MinHeightContainer ref={ref} id={id} className={cx(width)} margin={margin}>\n <Container>\n {/* @ts-expect-error: HTMLDivElement `color` attribute conflicts with prop */}\n <Line variant={variant} thickness={thickness} color={color} />\n </Container>\n </IE11MinHeightContainer>\n )\n})\n\nexport default Divider\n"],"names":["IE11MinHeightContainer","styled","div","withConfig","shouldForwardProp","prop","includes","cssMargin","Container","Line","p","cssMediaRules","variant","thickness","color","value","unit","swatch","hue","saturation","lightness","alpha","css","colorToString","join","Error","Divider","forwardRef","id","width","margin","ref","cx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,OAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,QAAD,EAAWC,SAASD,IAApB;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,UAAY;AAAA;AAGhB,MAAMC,YAAYP,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMO,OAAOR,OAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTK,CACAC,MAAAA,cACE,CAACD,EAAEE,SAASF,EAAEG,WAAWH,EAAEI,KAA3B,GACA,CAAC,CACCF,UAAU,SACVC,YAAY;AAAA,EAAEE,OAAO;AAAA,EAAGC,MAAM;AAAlB,GACZF,QAAQ;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,OACJ;AACIT,UAAAA;AAAAA,SACD;AAAA,SACA;AAAA,SACA;AACIU,aAAAA;AAAAA,qCACkBT,aAAa,OAChC,QACC,GAAEA,UAAUE,QAAQF,UAAUG;AAAAA,qCACZJ;AAAAA,qCACAW,cAAcT,KAAD;AAAA;AAAA,SAGnC;AACIQ,aAAAA;AAAAA,wBACM,GAAET,UAAUE,QAAQF,UAAUG;AAAAA;AAAAA,kBAErC,CACA,SACAO,cAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAhC,CAAA,GACbE,cAAcT,KAAD,GACbS,cAAc;AAAA,QAAEN,QAAQH,MAAMG;AAAAA,QAAQI,OAAO;AAAA,MAAA,CAAhC,CAJb,EAKAG,KAAK,IALL;AAAA;AAAA;AAAA;AAWA,YAAA,IAAIC,MAAO,mBAAkBb,UAA7B;AAAA;AAEX,CApCU;AAAA;AAwCXc,MAAAA,UAAUC,WAAW,kBACzB;AAAA,EAAEC;AAAAA,EAAIhB;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAOe;AAAAA,EAAOC;AAAAA,GACxCC,KACA;AACA,6BACG,wBAAD;AAAA,IAAwB;AAAA,IAAU;AAAA,IAAQ,WAAWC,GAAGH,KAAD;AAAA,IAAS;AAAA,IAAhE,8BACG,WAAD;AAAA,MAAA,8BAEG,MAAD;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAsB;AAAA,MAAA,CAA9C;AAAA,IAAA,CAFF;AAAA,EAAA,CAFJ;AAQD,CAZyB;;"}
@@ -0,0 +1,129 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ var React = require("react");
4
+ var styled = require("styled-components");
5
+ var css = require("@emotion/css");
6
+ var cssMediaRules = require("./cssMediaRules.cjs.js");
7
+ var next = require("./index.cjs.js");
8
+ var jsxRuntime = require("react/jsx-runtime");
9
+ require("use-sync-external-store/shim/with-selector");
10
+ require("./react-page.cjs.js");
11
+ require("redux");
12
+ require("redux-thunk");
13
+ require("./actions.cjs.js");
14
+ require("./descriptors.cjs.js");
15
+ require("./style.cjs.js");
16
+ require("./color.cjs.js");
17
+ require("./image.cjs.js");
18
+ require("next/dynamic");
19
+ require("next/document");
20
+ require("slate");
21
+ require("@emotion/server/create-instance");
22
+ require("@apollo/client");
23
+ require("@apollo/client/link/batch-http");
24
+ require("./graphql.cjs.js");
25
+ require("./text-input.cjs.js");
26
+ require("./shape.cjs.js");
27
+ require("color");
28
+ require("react-dom");
29
+ require("html-react-parser");
30
+ require("next/head");
31
+ require("uuid/v4");
32
+ require("corporate-ipsum");
33
+ function _interopDefaultLegacy(e) {
34
+ return e && typeof e === "object" && "default" in e ? e : { "default": e };
35
+ }
36
+ var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
37
+ const Container = styled__default["default"].div.withConfig({
38
+ shouldForwardProp: (prop) => !["margin"].includes(prop)
39
+ })`
40
+ min-height: 15px;
41
+ ${cssMediaRules.cssMargin()}
42
+ `;
43
+ const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
44
+ <svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
45
+ <rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
46
+ <rect x="78" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
47
+ <rect x="116" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
48
+ <rect y="20" width="120" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
49
+ <rect x="128" y="20" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
50
+ <rect x="166" y="20" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
51
+ <rect y="60" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
52
+ <rect x="20" y="80" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
53
+ <rect x="40" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
54
+ <rect x="88" y="100" width="110" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
55
+ <rect x="206" y="100" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
56
+ <rect x="238" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
57
+ <rect x="40" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
58
+ <rect x="88" y="120" width="50" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
59
+ <rect x="146" y="120" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
60
+ <rect x="178" y="120" width="90" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
61
+ <rect x="276" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
62
+ <rect x="20" y="140" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
63
+ <rect y="160" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
64
+ </svg>
65
+ </div>`;
66
+ const SCRIPT_TAG = "script";
67
+ const Embed = React.forwardRef(function Embed2({
68
+ id,
69
+ width,
70
+ margin,
71
+ html = defaultHtml
72
+ }, ref) {
73
+ const [container, setContainer] = React.useState(null);
74
+ const [shouldRender, setShouldRender] = React.useState(false);
75
+ next.useIsomorphicLayoutEffect(() => {
76
+ setShouldRender(true);
77
+ }, []);
78
+ React.useImperativeHandle(ref, () => container, [container]);
79
+ React.useEffect(() => {
80
+ if (!container)
81
+ return;
82
+ const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
83
+ acceptNode(node) {
84
+ return node.tagName.toLowerCase() === SCRIPT_TAG ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
85
+ }
86
+ });
87
+ const nodes = [];
88
+ while (walker.nextNode())
89
+ nodes.push(walker.currentNode);
90
+ async function executeScriptsInOrder() {
91
+ for (let i = 0; i < nodes.length; i++) {
92
+ await new Promise((resolve) => {
93
+ var _a, _b;
94
+ const node = nodes[i];
95
+ const script = node.ownerDocument.createElement(SCRIPT_TAG);
96
+ script.textContent = node.textContent;
97
+ Array.from(node.attributes).forEach(({
98
+ name,
99
+ value
100
+ }) => {
101
+ script.setAttribute(name, value);
102
+ });
103
+ script.onload = () => resolve();
104
+ script.onerror = () => resolve();
105
+ (_a = node.parentNode) == null ? void 0 : _a.insertBefore(script, node);
106
+ (_b = node.parentNode) == null ? void 0 : _b.removeChild(node);
107
+ if (!script.hasAttribute("src"))
108
+ resolve();
109
+ });
110
+ }
111
+ }
112
+ executeScriptsInOrder().catch((error) => {
113
+ console.error(error);
114
+ });
115
+ }, [container, html]);
116
+ if (shouldRender === false)
117
+ return null;
118
+ return /* @__PURE__ */ jsxRuntime.jsx(Container, {
119
+ ref: setContainer,
120
+ id,
121
+ className: css.cx(width),
122
+ margin,
123
+ dangerouslySetInnerHTML: {
124
+ __html: html
125
+ }
126
+ });
127
+ });
128
+ exports["default"] = Embed;
129
+ //# sourceMappingURL=Embed.cjs.js.map
@@ -0,0 +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'\nimport styled from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { cssMargin } from '../../utils/cssMediaRules'\nimport { ElementIDValue, MarginValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n id?: ElementIDValue\n html?: TextAreaValue\n width?: string\n margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n shouldForwardProp: prop => !['margin'].includes(prop),\n})<{ margin: Props['margin'] }>`\n min-height: 15px;\n ${cssMargin()}\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 if (shouldRender === false) return null\n\n return (\n <Container\n ref={setContainer}\n id={id}\n className={cx(width)}\n margin={margin}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssMargin","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","cx","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,YAAYC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,QAAD,EAAWC,SAASD,IAApB;AADU,CAAtB;AAAA;AAAA,IAIdE,cAAY,UAAA;AAAA;AAGhB,MAAMC,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,OAAAA,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;AAkDT,MAAIK,iBAAiB;AAAc,WAAA;AAEnC,wCACG,WAAD;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA,WAAW6C,OAAGlD,KAAD;AAAA,IACb;AAAA,IACA,yBAAyB;AAAA,MAAEmD,QAAQjD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}
@@ -0,0 +1,123 @@
1
+ import { forwardRef, useState, useImperativeHandle, useEffect } from "react";
2
+ import styled from "styled-components";
3
+ import { cx } from "@emotion/css";
4
+ import { b as cssMargin } from "./cssMediaRules.es.js";
5
+ import { p as useIsomorphicLayoutEffect } from "./index.es.js";
6
+ import { jsx } from "react/jsx-runtime";
7
+ import "use-sync-external-store/shim/with-selector";
8
+ import "./react-page.es.js";
9
+ import "redux";
10
+ import "redux-thunk";
11
+ import "./actions.es.js";
12
+ import "./descriptors.es.js";
13
+ import "./style.es.js";
14
+ import "./color.es.js";
15
+ import "./image.es.js";
16
+ import "next/dynamic";
17
+ import "next/document";
18
+ import "slate";
19
+ import "@emotion/server/create-instance";
20
+ import "@apollo/client";
21
+ import "@apollo/client/link/batch-http";
22
+ import "./graphql.es.js";
23
+ import "./text-input.es.js";
24
+ import "./shape.es.js";
25
+ import "color";
26
+ import "react-dom";
27
+ import "html-react-parser";
28
+ import "next/head";
29
+ import "uuid/v4";
30
+ import "corporate-ipsum";
31
+ const Container = styled.div.withConfig({
32
+ shouldForwardProp: (prop) => !["margin"].includes(prop)
33
+ })`
34
+ min-height: 15px;
35
+ ${cssMargin()}
36
+ `;
37
+ const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
38
+ <svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
39
+ <rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
40
+ <rect x="78" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
41
+ <rect x="116" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
42
+ <rect y="20" width="120" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
43
+ <rect x="128" y="20" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
44
+ <rect x="166" y="20" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
45
+ <rect y="60" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
46
+ <rect x="20" y="80" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
47
+ <rect x="40" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
48
+ <rect x="88" y="100" width="110" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
49
+ <rect x="206" y="100" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
50
+ <rect x="238" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
51
+ <rect x="40" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
52
+ <rect x="88" y="120" width="50" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
53
+ <rect x="146" y="120" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
54
+ <rect x="178" y="120" width="90" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
55
+ <rect x="276" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
56
+ <rect x="20" y="140" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
57
+ <rect y="160" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
58
+ </svg>
59
+ </div>`;
60
+ const SCRIPT_TAG = "script";
61
+ const Embed = forwardRef(function Embed2({
62
+ id,
63
+ width,
64
+ margin,
65
+ html = defaultHtml
66
+ }, ref) {
67
+ const [container, setContainer] = useState(null);
68
+ const [shouldRender, setShouldRender] = useState(false);
69
+ useIsomorphicLayoutEffect(() => {
70
+ setShouldRender(true);
71
+ }, []);
72
+ useImperativeHandle(ref, () => container, [container]);
73
+ useEffect(() => {
74
+ if (!container)
75
+ return;
76
+ const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
77
+ acceptNode(node) {
78
+ return node.tagName.toLowerCase() === SCRIPT_TAG ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
79
+ }
80
+ });
81
+ const nodes = [];
82
+ while (walker.nextNode())
83
+ nodes.push(walker.currentNode);
84
+ async function executeScriptsInOrder() {
85
+ for (let i = 0; i < nodes.length; i++) {
86
+ await new Promise((resolve) => {
87
+ var _a, _b;
88
+ const node = nodes[i];
89
+ const script = node.ownerDocument.createElement(SCRIPT_TAG);
90
+ script.textContent = node.textContent;
91
+ Array.from(node.attributes).forEach(({
92
+ name,
93
+ value
94
+ }) => {
95
+ script.setAttribute(name, value);
96
+ });
97
+ script.onload = () => resolve();
98
+ script.onerror = () => resolve();
99
+ (_a = node.parentNode) == null ? void 0 : _a.insertBefore(script, node);
100
+ (_b = node.parentNode) == null ? void 0 : _b.removeChild(node);
101
+ if (!script.hasAttribute("src"))
102
+ resolve();
103
+ });
104
+ }
105
+ }
106
+ executeScriptsInOrder().catch((error) => {
107
+ console.error(error);
108
+ });
109
+ }, [container, html]);
110
+ if (shouldRender === false)
111
+ return null;
112
+ return /* @__PURE__ */ jsx(Container, {
113
+ ref: setContainer,
114
+ id,
115
+ className: cx(width),
116
+ margin,
117
+ dangerouslySetInnerHTML: {
118
+ __html: html
119
+ }
120
+ });
121
+ });
122
+ export { Embed as default };
123
+ //# sourceMappingURL=Embed.es.js.map
@@ -0,0 +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'\nimport styled from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { cssMargin } from '../../utils/cssMediaRules'\nimport { ElementIDValue, MarginValue, TextAreaValue } from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n id?: ElementIDValue\n html?: TextAreaValue\n width?: string\n margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n shouldForwardProp: prop => !['margin'].includes(prop),\n})<{ margin: Props['margin'] }>`\n min-height: 15px;\n ${cssMargin()}\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 if (shouldRender === false) return null\n\n return (\n <Container\n ref={setContainer}\n id={id}\n className={cx(width)}\n margin={margin}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssMargin","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","cx","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,QAAD,EAAWC,SAASD,IAApB;AADU,CAAtB;AAAA;AAAA,IAIdE,UAAY;AAAA;AAGhB,MAAMC,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;AAkDT,MAAIK,iBAAiB;AAAc,WAAA;AAEnC,6BACG,WAAD;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA,WAAW6C,GAAGlD,KAAD;AAAA,IACb;AAAA,IACA,yBAAyB;AAAA,MAAEmD,QAAQjD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}