@makeswift/runtime 0.1.1 → 0.1.4

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'\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;;"}
+{"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;;"}

package/dist/Divider.es.js

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 import styled, { css } from "styled-components";
 import { cx } from "@emotion/css";
 import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
-import { o as colorToString } from "./index.es.js";
+import { p as colorToString } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -23,6 +23,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";

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'\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;;"}
+{"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;;"}

package/dist/Embed.cjs.js

@@ -25,6 +25,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");

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'\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;;"}
+{"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;;"}

package/dist/Embed.es.js

@@ -2,7 +2,7 @@ import { forwardRef, useState, useImperativeHandle, useEffect } from "react";
 import styled from "styled-components";
 import { cx } from "@emotion/css";
 import { b as cssMargin } from "./cssMediaRules.es.js";
-import { p as useIsomorphicLayoutEffect } from "./index.es.js";
+import { q as useIsomorphicLayoutEffect } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -23,6 +23,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";

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'\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;;"}
+{"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;;"}

package/dist/Form.cjs.js

@@ -60,12 +60,12 @@ require("@apollo/client/link/batch-http");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("uuid/v4");
 require("corporate-ipsum");
-require("scroll-into-view-if-needed");
 require("next/link");
 require("css-box-model");
 function _interopDefaultLegacy(e) {

package/dist/Form.es.js

@@ -35,7 +35,7 @@ import styled, { css, keyframes } from "styled-components";
 import { Field as Field$1, getIn, Formik } from "formik";
 import { cx } from "@emotion/css";
 import { c as cssMediaRules, b as cssMargin, i as cssTextStyle, h as cssGridItem } from "./cssMediaRules.es.js";
-import { q as Shapes, s as Sizes, C as Contrasts, o as colorToString, t as useFormContext, u as useIsInBuilder, v as useQuery, T as TABLE_BY_ID, w as useMutation, x as Provider, A as Alignments } from "./index.es.js";
+import { s as Shapes, t as Sizes, C as Contrasts, p as colorToString, v as useFormContext, u as useIsInBuilder, w as useQuery, T as TABLE_BY_ID, x as useMutation, y as Provider, A as Alignments } from "./index.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import ColorHelper from "color";
 import Button$1 from "./Button.es.js";
@@ -59,12 +59,12 @@ import "@apollo/client/link/batch-http";
 import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
-import "scroll-into-view-if-needed";
 import "next/link";
 import "css-box-model";
 var _path;

package/dist/Image.cjs2.js

@@ -29,12 +29,12 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("uuid/v4");
 require("corporate-ipsum");
-require("scroll-into-view-if-needed");
 require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };

package/dist/Image.es2.js

@@ -3,7 +3,7 @@ import { forwardRef, useState, useEffect } from "react";
 import NextImage from "next/image";
 import { css, cx } from "@emotion/css";
 import { b as cssMargin, d as cssPadding, e as cssBorder, f as cssBorderRadius, g as cssBoxShadow, c as cssMediaRules } from "./cssMediaRules.es.js";
-import { l as useFile, j as useBorder, u as useIsInBuilder, r as responsiveWidth, y as DEVICES, z as findDeviceOverride } from "./index.es.js";
+import { l as useFile, j as useBorder, u as useIsInBuilder, r as responsiveWidth, z as DEVICES, B as findDeviceOverride } from "./index.es.js";
 import { u as useBoxShadow } from "./useBoxShadow.es.js";
 import { p as placeholders } from "./placeholders.es.js";
 import { L as Link } from "./index.es3.js";
@@ -27,12 +27,12 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
-import "scroll-into-view-if-needed";
 import "next/link";
 function loadImage(src) {
   return new Promise((resolve, reject) => {

package/dist/Navigation.cjs.js

@@ -63,12 +63,12 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("uuid/v4");
 require("corporate-ipsum");
-require("scroll-into-view-if-needed");
 require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };

package/dist/Navigation.es.js

@@ -38,7 +38,7 @@ import ImageComponent from "./Image.es2.js";
 import Button from "./Button.es.js";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { i as cssTextStyle, c as cssMediaRules, b as cssMargin } from "./cssMediaRules.es.js";
-import { p as useIsomorphicLayoutEffect, k as useResponsiveColor, o as colorToString } from "./index.es.js";
+import { q as useIsomorphicLayoutEffect, k as useResponsiveColor, p as colorToString } from "./index.es.js";
 import { L as Link } from "./index.es3.js";
 import "next/image";
 import "./useBoxShadow.es.js";
@@ -62,12 +62,12 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
-import "scroll-into-view-if-needed";
 import "next/link";
 var _path$5;
 function _extends$5() {

package/dist/Root.cjs.js

@@ -46,6 +46,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");

package/dist/Root.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Root.cjs.js","sources":["../src/components/builtin/Root/components/Placeholder/index.tsx","../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n`\n\ntype Props = Record<string, never>\n\nexport default forwardRef<HTMLDivElement, Props>(function Placeholder(props: Props, ref) {\n  return (\n    <PlaceholderBase {...props} ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </PlaceholderBase>\n  )\n})\n","import styled, { createGlobalStyle } from 'styled-components'\nimport { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport { cssGridItem } from '../../utils/cssMediaRules'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { Props } from '../../../prop-controllers'\n\nconst Normalize = createGlobalStyle`\n  html {\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    box-sizing: inherit;\n  }\n\n  ${normalize()}\n`\n\nconst Grid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n`\n\nconst GridItem = styled.div.withConfig({\n  shouldForwardProp: prop => !['grid', 'index', 'rowGap', 'columnGap'].includes(prop.toString()),\n})`\n  display: flex;\n  align-items: flex-start;\n  ${cssGridItem()}\n`\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <>\n      <Normalize />\n      <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n        <Grid>\n          {children && children.elements.length > 0 ? (\n            children.elements.map((child, index) => (\n              <GridItem\n                key={child.key}\n                grid={children.columns}\n                index={index}\n                columnGap={columnGap}\n                rowGap={rowGap}\n              >\n                <Element element={child} />\n              </GridItem>\n            ))\n          ) : (\n            <Placeholder />\n          )}\n        </Grid>\n      </BackgroundsContainer>\n    </>\n  )\n})\n\nexport default Root\n"],"names":["PlaceholderBase","styled","div","forwardRef","props","ref","overflow","Normalize","createGlobalStyle","normalize","Grid","GridItem","withConfig","shouldForwardProp","prop","includes","toString","cssGridItem","Root","children","backgrounds","rowGap","columnGap","_Fragment","_jsx","BackgroundsContainer","background","elements","length","map","child","index","columns","Element","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,kBAAkBC,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS/B,IAAeC,cAAAA,MAAAA,WAAkC,sBAAqBC,OAAcC,KAAK;AAErF,wCAAC,iBAAD,iCAAqBD,QAArB;AAAA,IAA4B;AAAA,IAC1B,yCAAA,OAAA;AAAA,MACE,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QAAEE,UAAU;AAAA,MAJrB;AAAA,MAME,yCAAA,QAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,IAAG;AAAA,QACH,IAAG;AAAA,MAAA,CAVL;AAAA,IAAA,CANF;AAAA,EAAA,EAFJ;AAuBD,CAxBwB;ACIzB,MAAMC,YAAYC,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IASdC,SAAY,UAAA;AAAA;AAGhB,MAAMC,OAAOT,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAMpB,MAAMS,WAAWV,gBAAAA,WAAOC,IAAIU,WAAW;AAAA,EACrCC,mBAAmBC,CAAAA,SAAQ,CAAC,CAAC,QAAQ,SAAS,UAAU,WAA5B,EAAyCC,SAASD,KAAKE,SAAAA,CAAvD;AADS,CAAtB;AAAA;AAAA;AAAA,IAKbC,cAAc,YAAA;AAAA;AAUZC,MAAAA,OAAOf,MAAAA,WAAW,cACtB;AAAA,EAAEgB;AAAAA,EAAUC;AAAAA,EAAaC;AAAAA,EAAQC;AAAAA,GACjCjB,KACA;AAEE,yCAAAkB,WAAAA,UAAA;AAAA,IAAA,UAAA,CACGC,2BAAAA,IAAA,WADH,CAAA,CAAA,kCAEGC,4BAAD;AAAA,MAAsB;AAAA,MAAU,OAAO;AAAA,QAAEC,YAAY;AAAA,MAArD;AAAA,MAAgE;AAAA,MAAhE,yCACG,MAAD;AAAA,QACGP,UAAAA,YAAYA,SAASQ,SAASC,SAAS,IACtCT,SAASQ,SAASE,IAAI,CAACC,OAAOC,0CAC3B,UAAD;AAAA,UAEE,MAAMZ,SAASa;AAAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UALF,yCAOGC,cAAD;AAAA,YAAS,SAASH;AAAAA,UAAAA,CAAlB;AAAA,QAAA,GANKA,MAAMI,GADb,CADF,IAYCV,2BAAAA,IAAA,aAAD,CAAA,CAAA;AAAA,MAAA,CAdJ;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAwBD,CA5BsB;;"}
+{"version":3,"file":"Root.cjs.js","sources":["../src/components/builtin/Root/components/Placeholder/index.tsx","../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n`\n\ntype Props = Record<string, never>\n\nexport default forwardRef<HTMLDivElement, Props>(function Placeholder(props: Props, ref) {\n  return (\n    <PlaceholderBase {...props} ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </PlaceholderBase>\n  )\n})\n","import styled, { createGlobalStyle } from 'styled-components'\nimport { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport { cssGridItem } from '../../utils/cssMediaRules'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { Props } from '../../../prop-controllers'\n\nconst Normalize = createGlobalStyle`\n  html {\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    box-sizing: inherit;\n  }\n\n  ${normalize()}\n`\n\nconst Grid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n`\n\nconst GridItem = styled.div.withConfig({\n  shouldForwardProp: prop => !['grid', 'index', 'rowGap', 'columnGap'].includes(prop.toString()),\n})`\n  display: flex;\n  align-items: flex-start;\n  ${cssGridItem()}\n`\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <>\n      <Normalize />\n      <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n        <Grid>\n          {children && children.elements.length > 0 ? (\n            children.elements.map((child, index) => (\n              <GridItem\n                key={child.key}\n                grid={children.columns}\n                index={index}\n                columnGap={columnGap}\n                rowGap={rowGap}\n              >\n                <Element element={child} />\n              </GridItem>\n            ))\n          ) : (\n            <Placeholder />\n          )}\n        </Grid>\n      </BackgroundsContainer>\n    </>\n  )\n})\n\nexport default Root\n"],"names":["PlaceholderBase","styled","div","forwardRef","props","ref","overflow","Normalize","createGlobalStyle","normalize","Grid","GridItem","withConfig","shouldForwardProp","prop","includes","toString","cssGridItem","Root","children","backgrounds","rowGap","columnGap","_Fragment","_jsx","BackgroundsContainer","background","elements","length","map","child","index","columns","Element","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,kBAAkBC,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS/B,IAAeC,cAAAA,MAAAA,WAAkC,sBAAqBC,OAAcC,KAAK;AAErF,wCAAC,iBAAD,iCAAqBD,QAArB;AAAA,IAA4B;AAAA,IAC1B,yCAAA,OAAA;AAAA,MACE,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QAAEE,UAAU;AAAA,MAJrB;AAAA,MAME,yCAAA,QAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,IAAG;AAAA,QACH,IAAG;AAAA,MAAA,CAVL;AAAA,IAAA,CANF;AAAA,EAAA,EAFJ;AAuBD,CAxBwB;ACIzB,MAAMC,YAAYC,OAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IASdC,SAAY,UAAA;AAAA;AAGhB,MAAMC,OAAOT,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAMpB,MAAMS,WAAWV,gBAAAA,WAAOC,IAAIU,WAAW;AAAA,EACrCC,mBAAmBC,CAAAA,SAAQ,CAAC,CAAC,QAAQ,SAAS,UAAU,WAA5B,EAAyCC,SAASD,KAAKE,SAAAA,CAAvD;AADS,CAAtB;AAAA;AAAA;AAAA,IAKbC,cAAc,YAAA;AAAA;AAUZC,MAAAA,OAAOf,MAAAA,WAAW,cACtB;AAAA,EAAEgB;AAAAA,EAAUC;AAAAA,EAAaC;AAAAA,EAAQC;AAAAA,GACjCjB,KACA;AAEE,yCAAAkB,WAAAA,UAAA;AAAA,IAAA,UAAA,CACGC,2BAAAA,IAAA,WADH,CAAA,CAAA,kCAEGC,4BAAD;AAAA,MAAsB;AAAA,MAAU,OAAO;AAAA,QAAEC,YAAY;AAAA,MAArD;AAAA,MAAgE;AAAA,MAAhE,yCACG,MAAD;AAAA,QACGP,UAAAA,YAAYA,SAASQ,SAASC,SAAS,IACtCT,SAASQ,SAASE,IAAI,CAACC,OAAOC,0CAC3B,UAAD;AAAA,UAEE,MAAMZ,SAASa;AAAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UALF,yCAOGC,cAAD;AAAA,YAAS,SAASH;AAAAA,UAAAA,CAAlB;AAAA,QAAA,GANKA,MAAMI,GADb,CADF,IAYCV,2BAAAA,IAAA,aAAD,CAAA,CAAA;AAAA,MAAA,CAdJ;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAwBD,CA5BsB;;"}

package/dist/Root.es.js

@@ -44,6 +44,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";

package/dist/Root.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Root.es.js","sources":["../src/components/builtin/Root/components/Placeholder/index.tsx","../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n`\n\ntype Props = Record<string, never>\n\nexport default forwardRef<HTMLDivElement, Props>(function Placeholder(props: Props, ref) {\n  return (\n    <PlaceholderBase {...props} ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </PlaceholderBase>\n  )\n})\n","import styled, { createGlobalStyle } from 'styled-components'\nimport { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport { cssGridItem } from '../../utils/cssMediaRules'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { Props } from '../../../prop-controllers'\n\nconst Normalize = createGlobalStyle`\n  html {\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    box-sizing: inherit;\n  }\n\n  ${normalize()}\n`\n\nconst Grid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n`\n\nconst GridItem = styled.div.withConfig({\n  shouldForwardProp: prop => !['grid', 'index', 'rowGap', 'columnGap'].includes(prop.toString()),\n})`\n  display: flex;\n  align-items: flex-start;\n  ${cssGridItem()}\n`\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <>\n      <Normalize />\n      <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n        <Grid>\n          {children && children.elements.length > 0 ? (\n            children.elements.map((child, index) => (\n              <GridItem\n                key={child.key}\n                grid={children.columns}\n                index={index}\n                columnGap={columnGap}\n                rowGap={rowGap}\n              >\n                <Element element={child} />\n              </GridItem>\n            ))\n          ) : (\n            <Placeholder />\n          )}\n        </Grid>\n      </BackgroundsContainer>\n    </>\n  )\n})\n\nexport default Root\n"],"names":["PlaceholderBase","styled","div","forwardRef","props","ref","overflow","Normalize","createGlobalStyle","normalize","Grid","GridItem","withConfig","shouldForwardProp","prop","includes","toString","cssGridItem","Root","children","backgrounds","rowGap","columnGap","_Fragment","_jsx","background","elements","length","map","child","index","columns","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,kBAAkBC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS/B,IAAeC,cAAAA,WAAkC,sBAAqBC,OAAcC,KAAK;AAErF,6BAAC,iBAAD,iCAAqBD,QAArB;AAAA,IAA4B;AAAA,IAC1B,8BAAA,OAAA;AAAA,MACE,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QAAEE,UAAU;AAAA,MAJrB;AAAA,MAME,8BAAA,QAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,IAAG;AAAA,QACH,IAAG;AAAA,MAAA,CAVL;AAAA,IAAA,CANF;AAAA,EAAA,EAFJ;AAuBD,CAxBwB;ACIzB,MAAMC,YAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IASdC,UAAY;AAAA;AAGhB,MAAMC,OAAOT,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAMpB,MAAMS,WAAWV,OAAOC,IAAIU,WAAW;AAAA,EACrCC,mBAAmBC,CAAAA,SAAQ,CAAC,CAAC,QAAQ,SAAS,UAAU,WAA5B,EAAyCC,SAASD,KAAKE,SAAAA,CAAvD;AADS,CAAtB;AAAA;AAAA;AAAA,IAKbC,YAAc;AAAA;AAUZC,MAAAA,OAAOf,WAAW,cACtB;AAAA,EAAEgB;AAAAA,EAAUC;AAAAA,EAAaC;AAAAA,EAAQC;AAAAA,GACjCjB,KACA;AAEE,8BAAAkB,UAAA;AAAA,IAAA,UAAA,CACGC,oBAAA,WADH,CAAA,CAAA,uBAEG,sBAAD;AAAA,MAAsB;AAAA,MAAU,OAAO;AAAA,QAAEC,YAAY;AAAA,MAArD;AAAA,MAAgE;AAAA,MAAhE,8BACG,MAAD;AAAA,QACGN,UAAAA,YAAYA,SAASO,SAASC,SAAS,IACtCR,SAASO,SAASE,IAAI,CAACC,OAAOC,8BAC3B,UAAD;AAAA,UAEE,MAAMX,SAASY;AAAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UALF,8BAOG,SAAD;AAAA,YAAS,SAASF;AAAAA,UAAAA,CAAlB;AAAA,QAAA,GANKA,MAAMG,GADb,CADF,IAYCR,oBAAA,aAAD,CAAA,CAAA;AAAA,MAAA,CAdJ;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAwBD,CA5BsB;;"}
+{"version":3,"file":"Root.es.js","sources":["../src/components/builtin/Root/components/Placeholder/index.tsx","../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlaceholderBase = styled.div`\n  width: 100%;\n  background: rgba(161, 168, 194, 0.18);\n  height: 80px;\n  padding: 8px;\n`\n\ntype Props = Record<string, never>\n\nexport default forwardRef<HTMLDivElement, Props>(function Placeholder(props: Props, ref) {\n  return (\n    <PlaceholderBase {...props} ref={ref}>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </PlaceholderBase>\n  )\n})\n","import styled, { createGlobalStyle } from 'styled-components'\nimport { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport { cssGridItem } from '../../utils/cssMediaRules'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { Props } from '../../../prop-controllers'\n\nconst Normalize = createGlobalStyle`\n  html {\n    box-sizing: border-box;\n  }\n\n  *, *::before, *::after {\n    box-sizing: inherit;\n  }\n\n  ${normalize()}\n`\n\nconst Grid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n`\n\nconst GridItem = styled.div.withConfig({\n  shouldForwardProp: prop => !['grid', 'index', 'rowGap', 'columnGap'].includes(prop.toString()),\n})`\n  display: flex;\n  align-items: flex-start;\n  ${cssGridItem()}\n`\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <>\n      <Normalize />\n      <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n        <Grid>\n          {children && children.elements.length > 0 ? (\n            children.elements.map((child, index) => (\n              <GridItem\n                key={child.key}\n                grid={children.columns}\n                index={index}\n                columnGap={columnGap}\n                rowGap={rowGap}\n              >\n                <Element element={child} />\n              </GridItem>\n            ))\n          ) : (\n            <Placeholder />\n          )}\n        </Grid>\n      </BackgroundsContainer>\n    </>\n  )\n})\n\nexport default Root\n"],"names":["PlaceholderBase","styled","div","forwardRef","props","ref","overflow","Normalize","createGlobalStyle","normalize","Grid","GridItem","withConfig","shouldForwardProp","prop","includes","toString","cssGridItem","Root","children","backgrounds","rowGap","columnGap","_Fragment","_jsx","background","elements","length","map","child","index","columns","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,kBAAkBC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAS/B,IAAeC,cAAAA,WAAkC,sBAAqBC,OAAcC,KAAK;AAErF,6BAAC,iBAAD,iCAAqBD,QAArB;AAAA,IAA4B;AAAA,IAC1B,8BAAA,OAAA;AAAA,MACE,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QAAEE,UAAU;AAAA,MAJrB;AAAA,MAME,8BAAA,QAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,IAAG;AAAA,QACH,IAAG;AAAA,MAAA,CAVL;AAAA,IAAA,CANF;AAAA,EAAA,EAFJ;AAuBD,CAxBwB;ACIzB,MAAMC,YAAYC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IASdC,UAAY;AAAA;AAGhB,MAAMC,OAAOT,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAMpB,MAAMS,WAAWV,OAAOC,IAAIU,WAAW;AAAA,EACrCC,mBAAmBC,CAAAA,SAAQ,CAAC,CAAC,QAAQ,SAAS,UAAU,WAA5B,EAAyCC,SAASD,KAAKE,SAAAA,CAAvD;AADS,CAAtB;AAAA;AAAA;AAAA,IAKbC,YAAc;AAAA;AAUZC,MAAAA,OAAOf,WAAW,cACtB;AAAA,EAAEgB;AAAAA,EAAUC;AAAAA,EAAaC;AAAAA,EAAQC;AAAAA,GACjCjB,KACA;AAEE,8BAAAkB,UAAA;AAAA,IAAA,UAAA,CACGC,oBAAA,WADH,CAAA,CAAA,uBAEG,sBAAD;AAAA,MAAsB;AAAA,MAAU,OAAO;AAAA,QAAEC,YAAY;AAAA,MAArD;AAAA,MAAgE;AAAA,MAAhE,8BACG,MAAD;AAAA,QACGN,UAAAA,YAAYA,SAASO,SAASC,SAAS,IACtCR,SAASO,SAASE,IAAI,CAACC,OAAOC,8BAC3B,UAAD;AAAA,UAEE,MAAMX,SAASY;AAAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UALF,8BAOG,SAAD;AAAA,YAAS,SAASF;AAAAA,UAAAA,CAAlB;AAAA,QAAA,GANKA,MAAMG,GADb,CADF,IAYCR,oBAAA,aAAD,CAAA,CAAA;AAAA,MAAA,CAdJ;AAAA,IAAA,CAHJ,CAAA;AAAA,EAAA,CADF;AAwBD,CA5BsB;;"}

package/dist/SocialLinks.es.js

@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { cx } from "@emotion/css";
 import { L as Link } from "./index.es3.js";
 import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
-import { o as colorToString } from "./index.es.js";
+import { p as colorToString } from "./index.es.js";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { G as GutterContainer } from "./index.es4.js";
 import "scroll-into-view-if-needed";

package/dist/Text.cjs.js

@@ -63,12 +63,12 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("uuid/v4");
 require("corporate-ipsum");
-require("scroll-into-view-if-needed");
 require("next/link");
 function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };

package/dist/Text.es.js

@@ -39,7 +39,7 @@ import { c as cssMediaRules, b as cssMargin } from "./cssMediaRules.es.js";
 import { g as getBox } from "./box-models.es.js";
 import { Editor } from "slate-react";
 import Lists from "@convertkit/slate-lists";
-import { v as useQuery, B as TYPOGRAPHIES_BY_ID, F as SWATCHES_BY_ID, z as findDeviceOverride, G as shallowMergeFallbacks, o as colorToString, u as useIsInBuilder } from "./index.es.js";
+import { w as useQuery, F as TYPOGRAPHIES_BY_ID, G as SWATCHES_BY_ID, B as findDeviceOverride, H as shallowMergeFallbacks, p as colorToString, u as useIsInBuilder } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
 import { L as Link } from "./index.es3.js";
 import "css-box-model";
@@ -61,12 +61,12 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
-import "scroll-into-view-if-needed";
 import "next/link";
 function useTypography(typographyId) {
   const { error, data } = useQuery(TYPOGRAPHIES_BY_ID, {

package/dist/Video.cjs.js

@@ -46,6 +46,7 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");

package/dist/Video.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.cjs.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled from 'styled-components'\nimport ReactPlayer from 'react-player'\nimport { cx } from '@emotion/css'\n\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\n  MarginValue,\n  VideoValue,\n} from '../../../prop-controllers/descriptors'\nimport { cssBorderRadius, cssMargin } from '../../utils/cssMediaRules'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: MarginValue\n  borderRadius?: BorderRadiusValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'borderRadius'].includes(prop.toString()),\n})<{ margin: Props['margin']; borderRadius: Props['borderRadius'] }>`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${cssMargin()}\n  ${cssBorderRadius()}\n`\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n\n  return (\n    <Container ref={ref} id={id} className={cx(width)} margin={margin} borderRadius={borderRadius}>\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </Container>\n  )\n})\n\nexport default Video\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","toString","cssMargin","cssBorderRadius","ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","cx","position","paddingTop","top","left","right","bottom","_jsx","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,YAAYC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAU,cAAX,EAA2BC,SAASD,KAAKE,UAAzC;AADU,CAAtB;AAAA;AAAA;AAAA;AAAA,IAMdC,cAAY,UAAA;AAAA,IACZC,cAAkB,gBAAA;AAAA;AAGtB,MAAMC,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,qBAAAA,WAAYC,QAAQR,MAAMM,GAA1B;AAEjD,wCACG,WAAD;AAAA,IAAW;AAAA,IAAU;AAAA,IAAQ,WAAWG,OAAGR,KAAD;AAAA,IAAS;AAAA,IAAgB;AAAA,IACjE,yCAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAES,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMf;AAAAA,MAAzD;AAAA,MACE,yCAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEc,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QAAA,UACGV,eAAe,OACdW,2BAAAA,IAACT,qBAAAA,6CACKP;UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNiB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAYnB,SAAS,QAAQ,CAACA,MAAMoB;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkBvB,SAAS,QAAQA,MAAMwB,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAR,2BAAA,IAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKS,aAAAA,aAAazB,MAAM0B;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAFJ;AAyBD,CA/BuB;;"}
+{"version":3,"file":"Video.cjs.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled from 'styled-components'\nimport ReactPlayer from 'react-player'\nimport { cx } from '@emotion/css'\n\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\n  MarginValue,\n  VideoValue,\n} from '../../../prop-controllers/descriptors'\nimport { cssBorderRadius, cssMargin } from '../../utils/cssMediaRules'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: MarginValue\n  borderRadius?: BorderRadiusValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'borderRadius'].includes(prop.toString()),\n})<{ margin: Props['margin']; borderRadius: Props['borderRadius'] }>`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${cssMargin()}\n  ${cssBorderRadius()}\n`\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n\n  return (\n    <Container ref={ref} id={id} className={cx(width)} margin={margin} borderRadius={borderRadius}>\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </Container>\n  )\n})\n\nexport default Video\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","toString","cssMargin","cssBorderRadius","ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","cx","position","paddingTop","top","left","right","bottom","_jsx","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,YAAYC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAU,cAAX,EAA2BC,SAASD,KAAKE,UAAzC;AADU,CAAtB;AAAA;AAAA;AAAA;AAAA,IAMdC,cAAY,UAAA;AAAA,IACZC,cAAkB,gBAAA;AAAA;AAGtB,MAAMC,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,qBAAAA,WAAYC,QAAQR,MAAMM,GAA1B;AAEjD,wCACG,WAAD;AAAA,IAAW;AAAA,IAAU;AAAA,IAAQ,WAAWG,OAAGR,KAAD;AAAA,IAAS;AAAA,IAAgB;AAAA,IACjE,yCAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAES,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMf;AAAAA,MAAzD;AAAA,MACE,yCAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEc,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QAAA,UACGV,eAAe,OACdW,2BAAAA,IAACT,qBAAAA,6CACKP;UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNiB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAYnB,SAAS,QAAQ,CAACA,MAAMoB;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkBvB,SAAS,QAAQA,MAAMwB,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAR,2BAAA,IAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKS,aAAAA,aAAazB,MAAM0B;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAFJ;AAyBD,CA/BuB;;"}

package/dist/Video.es.js

@@ -44,6 +44,7 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";

package/dist/Video.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.es.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled from 'styled-components'\nimport ReactPlayer from 'react-player'\nimport { cx } from '@emotion/css'\n\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\n  MarginValue,\n  VideoValue,\n} from '../../../prop-controllers/descriptors'\nimport { cssBorderRadius, cssMargin } from '../../utils/cssMediaRules'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: MarginValue\n  borderRadius?: BorderRadiusValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'borderRadius'].includes(prop.toString()),\n})<{ margin: Props['margin']; borderRadius: Props['borderRadius'] }>`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${cssMargin()}\n  ${cssBorderRadius()}\n`\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n\n  return (\n    <Container ref={ref} id={id} className={cx(width)} margin={margin} borderRadius={borderRadius}>\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </Container>\n  )\n})\n\nexport default Video\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","toString","cssMargin","cssBorderRadius","ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","cx","position","paddingTop","top","left","right","bottom","_jsx","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAU,cAAX,EAA2BC,SAASD,KAAKE,UAAzC;AADU,CAAtB;AAAA;AAAA;AAAA;AAAA,IAMdC,UAAY;AAAA,IACZC,gBAAkB;AAAA;AAGtB,MAAMC,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,YAAYC,QAAQR,MAAMM,GAA1B;AAEjD,6BACG,WAAD;AAAA,IAAW;AAAA,IAAU;AAAA,IAAQ,WAAWG,GAAGR,KAAD;AAAA,IAAS;AAAA,IAAgB;AAAA,IACjE,8BAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAES,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMf;AAAAA,MAAzD;AAAA,MACE,8BAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEc,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QAAA,UACGV,eAAe,OACdW,oBAAC,8CACKhB;UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNiB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAYnB,SAAS,QAAQ,CAACA,MAAMoB;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkBvB,SAAS,QAAQA,MAAMwB,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAR,oBAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKS,aAAazB,MAAM0B;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAFJ;AAyBD,CA/BuB;;"}
+{"version":3,"file":"Video.es.js","sources":["../src/components/builtin/Video/Video.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport styled from 'styled-components'\nimport ReactPlayer from 'react-player'\nimport { cx } from '@emotion/css'\n\nimport {\n  BorderRadiusValue,\n  ElementIDValue,\n  MarginValue,\n  VideoValue,\n} from '../../../prop-controllers/descriptors'\nimport { cssBorderRadius, cssMargin } from '../../utils/cssMediaRules'\nimport { placeholders } from '../../utils/placeholders'\n\ntype Props = {\n  id?: ElementIDValue\n  video?: VideoValue\n  width?: string\n  margin?: MarginValue\n  borderRadius?: BorderRadiusValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['margin', 'borderRadius'].includes(prop.toString()),\n})<{ margin: Props['margin']; borderRadius: Props['borderRadius'] }>`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  ${cssMargin()}\n  ${cssBorderRadius()}\n`\n\nconst ASPECT_RATIO = 16 / 9\n\nconst Video = forwardRef(function Video(\n  { id, video, width, margin, borderRadius }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const canPlayUrl = video && video.url != null && ReactPlayer.canPlay(video.url)\n\n  return (\n    <Container ref={ref} id={id} className={cx(width)} margin={margin} borderRadius={borderRadius}>\n      <div style={{ position: 'relative', paddingTop: `${100 / ASPECT_RATIO}%` }}>\n        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>\n          {canPlayUrl === true ? (\n            <ReactPlayer\n              {...video}\n              width=\"100%\"\n              height=\"100%\"\n              config={{\n                vimeo: { playerOptions: { background: video != null && !video.controls } },\n                wistia: {\n                  options: {\n                    endVideoBehavior: video != null && video.loop === true ? 'loop' : 'default',\n                  },\n                },\n              }}\n            />\n          ) : (\n            <img width=\"100%\" src={placeholders.video.src} alt=\"Video Placeholder\" />\n          )}\n        </div>\n      </div>\n    </Container>\n  )\n})\n\nexport default Video\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","toString","cssMargin","cssBorderRadius","ASPECT_RATIO","Video","forwardRef","id","video","width","margin","borderRadius","ref","canPlayUrl","url","ReactPlayer","canPlay","cx","position","paddingTop","top","left","right","bottom","_jsx","vimeo","playerOptions","background","controls","wistia","options","endVideoBehavior","loop","placeholders","src"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,CAAQ,SAAA,CAAC,CAAC,UAAU,cAAX,EAA2BC,SAASD,KAAKE,UAAzC;AADU,CAAtB;AAAA;AAAA;AAAA;AAAA,IAMdC,UAAY;AAAA,IACZC,gBAAkB;AAAA;AAGtB,MAAMC,eAAe,KAAK;AAEpBC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAOC;AAAAA,EAAQC;AAAAA,GAC5BC,KACA;AACMC,QAAAA,aAAaL,SAASA,MAAMM,OAAO,QAAQC,YAAYC,QAAQR,MAAMM,GAA1B;AAEjD,6BACG,WAAD;AAAA,IAAW;AAAA,IAAU;AAAA,IAAQ,WAAWG,GAAGR,KAAD;AAAA,IAAS;AAAA,IAAgB;AAAA,IACjE,8BAAA,OAAA;AAAA,MAAK,OAAO;AAAA,QAAES,UAAU;AAAA,QAAYC,YAAa,GAAE,MAAMf;AAAAA,MAAzD;AAAA,MACE,8BAAA,OAAA;AAAA,QAAK,OAAO;AAAA,UAAEc,UAAU;AAAA,UAAYE,KAAK;AAAA,UAAGC,MAAM;AAAA,UAAGC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAvE;AAAA,QAAA,UACGV,eAAe,OACdW,oBAAC,8CACKhB;UACJ,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAQ;AAAA,YACNiB,OAAO;AAAA,cAAEC,eAAe;AAAA,gBAAEC,YAAYnB,SAAS,QAAQ,CAACA,MAAMoB;AAAAA,cAAtC;AAAA,YADlB;AAAA,YAENC,QAAQ;AAAA,cACNC,SAAS;AAAA,gBACPC,kBAAkBvB,SAAS,QAAQA,MAAMwB,SAAS,OAAO,SAAS;AAAA,cAD3D;AAAA,YADH;AAAA,UAFF;AAAA,QAAA,EAJV,IAcAR,oBAAA,OAAA;AAAA,UAAK,OAAM;AAAA,UAAO,KAAKS,aAAazB,MAAM0B;AAAAA,UAAK,KAAI;AAAA,QAAA,CAAnD;AAAA,MAAA,CAhBJ;AAAA,IAAA,CADF;AAAA,EAAA,CAFJ;AAyBD,CA/BuB;;"}

package/dist/components.cjs.js

@@ -18,7 +18,6 @@ var cssMediaRules = require("./cssMediaRules.cjs.js");
 var index = require("./index.cjs2.js");
 var useBoxShadow = require("./useBoxShadow.cjs.js");
 var useMediaQuery = require("./useMediaQuery.cjs.js");
-var index$1 = require("./index.cjs3.js");
 require("react");
 require("styled-components");
 require("framer-motion");
@@ -45,11 +44,14 @@ require("./graphql.cjs.js");
 require("./text-input.cjs.js");
 require("./shape.cjs.js");
 require("color");
+require("scroll-into-view-if-needed");
 require("react-dom");
 require("html-react-parser");
 require("next/head");
 require("uuid/v4");
 require("corporate-ipsum");
+require("./index.cjs3.js");
+require("next/link");
 require("react-use-gesture");
 require("@popmotion/popcorn");
 require("formik");
@@ -62,8 +64,6 @@ require("is-hotkey");
 require("slate-react");
 require("@convertkit/slate-lists");
 require("react-player");
-require("scroll-into-view-if-needed");
-require("next/link");
 exports.Box = Box["default"];
 exports.DEFAULT_BOX_ANIMATE_DELAY = next.DEFAULT_BOX_ANIMATE_DELAY;
 exports.DEFAULT_BOX_ANIMATE_DURATION = next.DEFAULT_BOX_ANIMATE_DURATION;
@@ -77,6 +77,7 @@ exports.Page = next.Page;
 exports.SITE_FONTS_QUERY = next.SITE_FONTS_QUERY;
 exports.useBorder = next.useBorder;
 exports.useFile = next.useFile;
+exports.usePage = next.usePage;
 exports.useResponsiveColor = next.useResponsiveColor;
 exports.Button = Button["default"];
 exports.Carousel = Carousel["default"];
@@ -102,5 +103,4 @@ exports.cssWidth = cssMediaRules.cssWidth;
 exports.useBackgrounds = index.useBackgrounds;
 exports.useBoxShadow = useBoxShadow.useBoxShadow;
 exports.useMediaQuery = useMediaQuery.useMediaQuery;
-exports.usePage = index$1.usePage;
 //# sourceMappingURL=components.cjs.js.map

package/dist/components.es.js

@@ -1,5 +1,5 @@
 export { default as Box } from "./Box.es.js";
-export { d as DEFAULT_BOX_ANIMATE_DELAY, e as DEFAULT_BOX_ANIMATE_DURATION, c as DEFAULT_BOX_ANIMATE_TYPE, g as DEFAULT_ITEM_ANIMATE_DELAY, h as DEFAULT_ITEM_ANIMATE_DURATION, f as DEFAULT_ITEM_ANIMATE_TYPE, i as DEFAULT_ITEM_STAGGER_DURATION, m as PAGE_SNIPPETS_QUERY, n as Page, S as SITE_FONTS_QUERY, j as useBorder, l as useFile, k as useResponsiveColor } from "./index.es.js";
+export { d as DEFAULT_BOX_ANIMATE_DELAY, e as DEFAULT_BOX_ANIMATE_DURATION, c as DEFAULT_BOX_ANIMATE_TYPE, g as DEFAULT_ITEM_ANIMATE_DELAY, h as DEFAULT_ITEM_ANIMATE_DURATION, f as DEFAULT_ITEM_ANIMATE_TYPE, i as DEFAULT_ITEM_STAGGER_DURATION, n as PAGE_SNIPPETS_QUERY, o as Page, S as SITE_FONTS_QUERY, j as useBorder, l as useFile, m as usePage, k as useResponsiveColor } from "./index.es.js";
 export { default as Button } from "./Button.es.js";
 export { default as Carousel } from "./Carousel.es.js";
 export { default as Countdown } from "./Countdown.es.js";
@@ -16,7 +16,6 @@ export { e as cssBorder, f as cssBorderRadius, g as cssBoxShadow, h as cssGridIt
 export { u as useBackgrounds } from "./index.es2.js";
 export { u as useBoxShadow } from "./useBoxShadow.es.js";
 export { u as useMediaQuery } from "./useMediaQuery.es.js";
-export { u as usePage } from "./index.es3.js";
 import "react";
 import "styled-components";
 import "framer-motion";
@@ -43,11 +42,14 @@ import "./graphql.es.js";
 import "./text-input.es.js";
 import "./shape.es.js";
 import "color";
+import "scroll-into-view-if-needed";
 import "react-dom";
 import "html-react-parser";
 import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
+import "./index.es3.js";
+import "next/link";
 import "react-use-gesture";
 import "@popmotion/popcorn";
 import "formik";
@@ -60,6 +62,4 @@ import "is-hotkey";
 import "slate-react";
 import "@convertkit/slate-lists";
 import "react-player";
-import "scroll-into-view-if-needed";
-import "next/link";
 //# sourceMappingURL=components.es.js.map