@makeswift/runtime 0.1.4 → 0.1.7

package/dist/Countdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Countdown.cjs.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: WidthValue\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'width',\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  width: Props['width']\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssWidth()}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      width={width}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,QAAQC,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAMrB,MAAMC,QAAQF,gBAAOC,WAAAA;AAAAA;AAAAA;AAIrB,MAAME,UAAUH,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAKvB,MAAMG,YAAYJ,gBAAAA,WAAOC,IAAII,WAAW;AAAA,EACtCC,mBAAmBC,CACjB,SAAA,CAAC,CACC,SACA,UACA,WACA,QACA,SACA,OACA,cACA,cACA,eACA,cACA,WAXD,EAYCC,SAASD,IAZV;AAFmC,CAAtB;AAAA;AAAA,IA6BdE,cAAW,SAAA;AAAA,IACXC,cAAY,UAAA;AAAA,IACZC,CAAAA,MACAC,4BAAc,CAACD,EAAEE,IAAH,GAAmB,CAAC,CAACA,OAAO,cAAc;AAC9CA,UAAAA;AAAAA,SACD;AACIC,aAAAA;;;cAGHZ;AAAAA;AAAAA;AAAAA;AAAAA,SAID;AACIY,aAAAA;;;cAGHZ;AAAAA;AAAAA;AAAAA;AAAAA;AAKGY,aAAAA;;;cAGHZ;AAAAA;AAAAA;AAAAA;AAAAA;AAKT,CA3BY;AAAA;AAAA,IA6BbC;AAAAA,MACEQ,CAAAA,MACAC,4BACE,CAACD,EAAEI,GAAH,GACA,CAAC,CAACA,SAASD;sBACGC,OAAO,OAAO,IAAK,GAAEA,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAH5C;AAAA;AAAA;AAAA,IAgBflB;AAAAA,MACEY,CAAAA,MACAC,4BAAc,CAACD,EAAEO,KAAH,GAAoB,CAAC,CAACA,QAAQ,eAAe;AACjDA,UAAAA;AAAAA,SACD;AACIJ,aAAAA;;;SAGJ;AACIA,aAAAA;;;;AAIAA,aAAAA;;;;AAIZ,CAfY;AAAA,MAgBbH,OACAC,cACE,cAAA,CAACD,EAAEQ,SAASR,EAAES,YAAYT,EAAEU,aAAaV,EAAEW,UAA3C,GACA,CAAC,CACCH,UAAU,UACVC,aAAa;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,GACbN,cAAc;AAAA,EAAEE,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,GACdL,aAAa,kBACT;AACIH,UAAAA;AAAAA,SACD;AACIL,aAAAA;gCACWQ;AAAAA,yBACPM,KAAAA,cAAcP,WAAD;AAAA,8BACRO,KAAAA,cAAcR,UAAD;AAAA;AAAA,SAE1B;AACIN,aAAAA;;yBAEIc,KAAAA,cAAcP,WAAD;AAAA,gCACNC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gCAgBAM,KAAAA,cAAcR,UAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAYbQ,KAAAA,cAAcR,UAAD;AAAA;AAAA;AAAA,SAG5B;AACIN,aAAAA;gCACWQ;AAAAA,yBACPM,KAAAA,cAAcP,WAAD;AAAA;AAAA,oCAEFO,KAAAA,cAAcR,UAAD;AAAA;AAAA,SAEhC;AACIN,aAAAA;;gCAEWQ;AAAAA,yBACPM,KAAAA,cAAcP,WAAD;AAAA,oCACFO,KAAAA,cAAcR,UAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAejBQ,KAAAA,cAAcR,UAAD;AAAA;AAAA;AAAA;AAIxBN,aAAAA;gCACWQ;AAAAA;AAAAA,yBAEPM,KAAAA,cAAcP,WAAD;AAAA;AAAA;AAAA;AAAA;AAK7B,CAzFU;AAAA;AAAA;AAAA,IA6FfnB;AAAAA,MACES,CAAAA,MACAC,cACE,cAAA,CAACD,EAAEkB,YAAYlB,EAAEmB,SAAjB,GACA,CAAC,CACCD,aAAa;AAAA,EAAEN,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,GACbG,YAAY,kBACRhB;0BACYgB;AAAAA,mBACPF,KAAAA,cAAcC,UAAD;AAAA,SAPb;AAAA;AAAA;AAanB,MAAME,eAAe,CAACC,SAAoC;AACxD,MAAIA,QAAQ;AAAa,WAAA;AAAA,MAAEC,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAE7DC,QAAAA,WAAW,IAAIC,KAAKN,IAAT,EAAeO,YAAYD,KAAKE;AAEjD,MAAIH,YAAY;AAAU,WAAA;AAAA,MAAEJ,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAEhEK,MAAAA,QAAQC,KAAKC,IAAIN,QAAT,IAAqB;AAE3BJ,QAAAA,OAAOS,KAAKE,MAAMH,QAAQ,KAAnB;AACbA,WAASR,OAAO;AAEVC,QAAAA,QAAQQ,KAAKE,MAAMH,QAAQ,IAAnB,IAA2B;AACzCA,WAASP,QAAQ;AAEXC,QAAAA,UAAUO,KAAKE,MAAMH,QAAQ,EAAnB,IAAyB;AACzCA,WAASN,UAAU;AAEnB,QAAMC,UAAUS,SAASC,OAAOL,QAAQ,EAAT,GAAc,EAArB;AAEjB,SAAA;AAAA,IAAER;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,EAAAA;AAChC;AAEKW,MAAAA,YAAYC,MAAAA,WAAW,oBAC3B;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAnB;AAAAA,EACAb;AAAAA,EACAN;AAAAA,EACAK;AAAAA,EACAH;AAAAA,EACAc;AAAAA,EACAC;AAAAA,EACAT;AAAAA,EACAC;AAAAA,EACAF;AAAAA,EACAgC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GAEFC,KACA;AACA,QAAM,CAAC;AAAA,IAAEvB;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,KAAWqB,gBAAgBC,MAAAA,SAAS3B,aAAaC,IAAD,CAAb;AAElE2B,QAAAA,UAAU,MAAM;AACD5B,iBAAAA,aAAaC,IAAD,CAAb;AAEN4B,UAAAA,aAAaC,YAAY,MAAM;AACtB9B,mBAAAA,aAAaC,IAAD,CAAb;AAAA,OACX,GAF2B;AAIvB,WAAA,MAAM8B,cAAcF,UAAD;AAAA,EAAA,GACzB,CAAC5B,IAAD,CARM;AAUT,yCACG,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAbF,UAAA,CAeE+B,2BAAA,KAAC,SAAD;AAAA,MAAA,UAAA,CACEC,2BAAA,IAAC,OAAD;AAAA,QACE,yCAAA,QAAA;AAAA,UAAO/B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE+B,2BAAA,IAAC,OAAD;AAAA,QAAA,UAAQZ,aAAa,OAAO,SAASA;AAAAA,MAAAA,CAJvC,CAAA;AAAA,IAAA,CAfF,GAqBEW,2BAAA,KAAC,SAAD;AAAA,MAAA,UAAA,CACEC,2BAAA,IAAC,OAAD;AAAA,QACE,yCAAA,QAAA;AAAA,UAAO9B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE8B,2BAAA,IAAC,OAAD;AAAA,QAAA,UAAQX,cAAc,OAAO,UAAUA;AAAAA,MAAAA,CAJzC,CAAA;AAAA,IAAA,CArBF,GA2BEU,2BAAA,KAAC,SAAD;AAAA,MAAA,UAAA,CACEC,2BAAA,IAAC,OAAD;AAAA,QACE,yCAAA,QAAA;AAAA,UAAO7B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE6B,2BAAA,IAAC,OAAD;AAAA,QAAA,UAAQV,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CA3BF,GAiCES,2BAAA,KAAC,SAAD;AAAA,MAAA,UAAA,CACEC,2BAAA,IAAC,OAAD;AAAA,QACE,yCAAA,QAAA;AAAA,UAAO5B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE4B,2BAAA,IAAC,OAAD;AAAA,QAAA,UAAQT,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CAjCF,CAAA;AAAA,EAAA,CADF;AA0CD,CA5E2B;;"}

package/dist/Countdown.es.js

@@ -1,8 +1,7 @@
 import { forwardRef, useState, useEffect } from "react";
 import styled, { css } from "styled-components";
-import { cx } from "@emotion/css";
 import { p as colorToString } from "./index.es.js";
-import { b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
+import { a as cssWidth, b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
 import "./react-page.es.js";
@@ -17,6 +16,7 @@ import "next/dynamic";
 import "next/document";
 import "slate";
 import "@emotion/server/create-instance";
+import "@emotion/css";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
 import "./graphql.es.js";
@@ -42,9 +42,10 @@ const Segment = styled.div`
   text-align: center;
 `;
 const Container = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["margin", "variant", "size", "shape", "gap", "labelColor", "numberFont", "numberColor", "blockColor", "labelFont"].includes(prop)
+  shouldForwardProp: (prop) => !["width", "margin", "variant", "size", "shape", "gap", "labelColor", "numberFont", "numberColor", "blockColor", "labelFont"].includes(prop)
 })`
   display: flex;
+  ${cssWidth()}
   ${cssMargin()}
   ${(p) => cssMediaRules([p.size], ([size = "medium"]) => {
   switch (size) {
@@ -285,7 +286,7 @@ const Countdown = forwardRef(function Countdown2({
   return /* @__PURE__ */ jsxs(Container, {
     ref,
     id,
-    className: cx(width),
+    width,
     margin,
     variant,
     size,

package/dist/Countdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { cx } from '@emotion/css'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: string\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      className={cx(width)}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","cx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,QAAQC,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAMrB,MAAMC,QAAQF,OAAOC;AAAAA;AAAAA;AAIrB,MAAME,UAAUH,OAAOC;AAAAA;AAAAA;AAAAA;AAKvB,MAAMG,YAAYJ,OAAOC,IAAII,WAAW;AAAA,EACtCC,mBAAmBC,CACjB,SAAA,CAAC,CACC,UACA,WACA,QACA,SACA,OACA,cACA,cACA,eACA,cACA,WAVD,EAWCC,SAASD,IAXV;AAFmC,CAAtB;AAAA;AAAA,IA2BdE,UAAY;AAAA,IACZC,CAAAA,MACAC,cAAc,CAACD,EAAEE,IAAH,GAAmB,CAAC,CAACA,OAAO,cAAc;AAC9CA,UAAAA;AAAAA,SACD;AACIC,aAAAA;AAAAA;AAAAA;AAAAA,cAGHX;AAAAA;AAAAA;AAAAA;AAAAA,SAID;AACIW,aAAAA;AAAAA;AAAAA;AAAAA,cAGHX;AAAAA;AAAAA;AAAAA;AAAAA;AAKGW,aAAAA;AAAAA;AAAAA;AAAAA,cAGHX;AAAAA;AAAAA;AAAAA;AAAAA;AAKT,CA3BY;AAAA;AAAA,IA6BbC;AAAAA,MACEO,CAAAA,MACAC,cACE,CAACD,EAAEI,GAAH,GACA,CAAC,CAACA,SAASD;AAAAA,sBACGC,OAAO,OAAO,IAAK,GAAEA,IAAIC,QAAQ,IAAID,IAAIE;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAH5C;AAAA;AAAA;AAAA,IAgBfjB;AAAAA,MACEW,CAAAA,MACAC,cAAc,CAACD,EAAEO,KAAH,GAAoB,CAAC,CAACA,QAAQ,eAAe;AACjDA,UAAAA;AAAAA,SACD;AACIJ,aAAAA;AAAAA;AAAAA;AAAAA,SAGJ;AACIA,aAAAA;AAAAA;AAAAA;AAAAA;AAIAA,aAAAA;AAAAA;AAAAA;AAAAA;AAIZ,CAfY;AAAA,MAgBbH,OACAC,cACE,CAACD,EAAEQ,SAASR,EAAES,YAAYT,EAAEU,aAAaV,EAAEW,UAA3C,GACA,CAAC,CACCH,UAAU,UACVC,aAAa;AAAA,EAAEG,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,GACbN,cAAc;AAAA,EAAEE,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAqDC,OAAO;AAA5D,GACdL,aAAa,kBACT;AACIH,UAAAA;AAAAA,SACD;AACIL,aAAAA;AAAAA,gCACWQ;AAAAA,yBACPM,cAAcP,WAAD;AAAA,8BACRO,cAAcR,UAAD;AAAA;AAAA,SAE1B;AACIN,aAAAA;AAAAA;AAAAA,yBAEIc,cAAcP,WAAD;AAAA,gCACNC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,gCAgBAM,cAAcR,UAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAYbQ,cAAcR,UAAD;AAAA;AAAA;AAAA,SAG5B;AACIN,aAAAA;AAAAA,gCACWQ;AAAAA,yBACPM,cAAcP,WAAD;AAAA;AAAA,oCAEFO,cAAcR,UAAD;AAAA;AAAA,SAEhC;AACIN,aAAAA;AAAAA;AAAAA,gCAEWQ;AAAAA,yBACPM,cAAcP,WAAD;AAAA,oCACFO,cAAcR,UAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAejBQ,cAAcR,UAAD;AAAA;AAAA;AAAA;AAIxBN,aAAAA;AAAAA,gCACWQ;AAAAA;AAAAA,yBAEPM,cAAcP,WAAD;AAAA;AAAA;AAAA;AAAA;AAK7B,CAzFU;AAAA;AAAA;AAAA,IA6FflB;AAAAA,MACEQ,CAAAA,MACAC,cACE,CAACD,EAAEkB,YAAYlB,EAAEmB,SAAjB,GACA,CAAC,CACCD,aAAa;AAAA,EAAEN,QAAQ;AAAA,IAAEC,KAAK;AAAA,IAAGC,YAAY;AAAA,IAAGC,WAAW;AAAA,EAA9C;AAAA,EAAmDC,OAAO;AAA1D,GACbG,YAAY,kBACRhB;AAAAA,0BACYgB;AAAAA,mBACPF,cAAcC,UAAD;AAAA,SAPb;AAAA;AAAA;AAanB,MAAME,eAAe,CAACC,SAAoC;AACxD,MAAIA,QAAQ;AAAa,WAAA;AAAA,MAAEC,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAE7DC,QAAAA,WAAW,IAAIC,KAAKN,IAAT,EAAeO,YAAYD,KAAKE;AAEjD,MAAIH,YAAY;AAAU,WAAA;AAAA,MAAEJ,MAAM;AAAA,MAAGC,OAAO;AAAA,MAAGC,SAAS;AAAA,MAAGC,SAAS;AAAA,IAAA;AAEhEK,MAAAA,QAAQC,KAAKC,IAAIN,QAAT,IAAqB;AAE3BJ,QAAAA,OAAOS,KAAKE,MAAMH,QAAQ,KAAnB;AACbA,WAASR,OAAO;AAEVC,QAAAA,QAAQQ,KAAKE,MAAMH,QAAQ,IAAnB,IAA2B;AACzCA,WAASP,QAAQ;AAEXC,QAAAA,UAAUO,KAAKE,MAAMH,QAAQ,EAAnB,IAAyB;AACzCA,WAASN,UAAU;AAEnB,QAAMC,UAAUS,SAASC,OAAOL,QAAQ,EAAT,GAAc,EAArB;AAEjB,SAAA;AAAA,IAAER;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,EAAAA;AAChC;AAEKW,MAAAA,YAAYC,WAAW,oBAC3B;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAnB;AAAAA,EACAb;AAAAA,EACAN;AAAAA,EACAK;AAAAA,EACAH;AAAAA,EACAc;AAAAA,EACAC;AAAAA,EACAT;AAAAA,EACAC;AAAAA,EACAF;AAAAA,EACAgC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,GAEFC,KACA;AACA,QAAM,CAAC;AAAA,IAAEvB;AAAAA,IAAMC;AAAAA,IAAOC;AAAAA,IAASC;AAAAA,KAAWqB,gBAAgBC,SAAS3B,aAAaC,IAAD,CAAb;AAElE2B,YAAU,MAAM;AACD5B,iBAAAA,aAAaC,IAAD,CAAb;AAEN4B,UAAAA,aAAaC,YAAY,MAAM;AACtB9B,mBAAAA,aAAaC,IAAD,CAAb;AAAA,OACX,GAF2B;AAIvB,WAAA,MAAM8B,cAAcF,UAAD;AAAA,EAAA,GACzB,CAAC5B,IAAD,CARM;AAUT,8BACG,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW+B,GAAGZ,KAAD;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAbF,UAAA,CAeEa,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAOhC,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIEgC,oBAAC,OAAD;AAAA,QAAA,UAAQb,aAAa,OAAO,SAASA;AAAAA,MAAAA,CAJvC,CAAA;AAAA,IAAA,CAfF,GAqBEY,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO/B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE+B,oBAAC,OAAD;AAAA,QAAA,UAAQZ,cAAc,OAAO,UAAUA;AAAAA,MAAAA,CAJzC,CAAA;AAAA,IAAA,CArBF,GA2BEW,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO9B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE8B,oBAAC,OAAD;AAAA,QAAA,UAAQX,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CA3BF,GAiCEU,qBAAC,SAAD;AAAA,MAAA,UAAA,CACEC,oBAAC,OAAD;AAAA,QACE,8BAAA,QAAA;AAAA,UAAO7B,UAAAA;AAAAA,QAAAA,CAAP;AAAA,MAAA,CAFJ,GAIE6B,oBAAC,OAAD;AAAA,QAAA,UAAQV,gBAAgB,OAAO,YAAYA;AAAAA,MAAAA,CAJ7C,CAAA;AAAA,IAAA,CAjCF,CAAA;AAAA,EAAA,CADF;AA0CD,CA5E2B;;"}
+{"version":3,"file":"Countdown.es.js","sources":["../src/components/builtin/Countdown/Countdown.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  DateValue,\n  ElementIDValue,\n  FontValue,\n  GapXValue,\n  MarginValue,\n  ResponsiveIconRadioGroupValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\n\ntype Props = {\n  id?: ElementIDValue\n  date?: DateValue\n  variant?: ResponsiveIconRadioGroupValue<\n    'filled' | 'filled-split' | 'outline' | 'outline-split' | 'clear'\n  >\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  gap?: GapXValue\n  numberFont?: FontValue\n  numberColor?: ResponsiveColor | null\n  blockColor?: ResponsiveColor | null\n  labelFont?: FontValue\n  labelColor?: ResponsiveColor | null\n  width?: WidthValue\n  margin?: MarginValue\n  daysLabel?: TextInputValue\n  hoursLabel?: TextInputValue\n  minutesLabel?: TextInputValue\n  secondsLabel?: TextInputValue\n}\n\nconst Block = styled.div`\n  display: block;\n  padding: 0.5em;\n  font-size: 1em;\n`\n\nconst Label = styled.div`\n  margin-top: 0.25em;\n`\n\nconst Segment = styled.div`\n  flex: 1;\n  text-align: center;\n`\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop =>\n    ![\n      'width',\n      'margin',\n      'variant',\n      'size',\n      'shape',\n      'gap',\n      'labelColor',\n      'numberFont',\n      'numberColor',\n      'blockColor',\n      'labelFont',\n    ].includes(prop),\n})<{\n  width: Props['width']\n  margin: Props['margin']\n  variant: Props['variant']\n  size: Props['size']\n  shape: Props['shape']\n  gap: Props['gap']\n  labelColor?: ResponsiveValue<Color> | null\n  numberFont?: ResponsiveValue<string>\n  numberColor?: ResponsiveValue<Color> | null\n  blockColor?: ResponsiveValue<Color> | null\n  labelFont?: ResponsiveValue<string>\n}>`\n  display: flex;\n  ${cssWidth()}\n  ${cssMargin()}\n  ${p =>\n    cssMediaRules([p.size] as const, ([size = 'medium']) => {\n      switch (size) {\n        case 'small':\n          return css`\n            font-size: 18px;\n\n            ${Label} {\n              font-size: 14px;\n            }\n          `\n        case 'large':\n          return css`\n            font-size: 32px;\n\n            ${Label} {\n              font-size: 18px;\n            }\n          `\n        default:\n          return css`\n            font-size: 24px;\n\n            ${Label} {\n              font-size: 16px;\n            }\n          `\n      }\n    })}\n\n  ${Segment} {\n    ${p =>\n      cssMediaRules(\n        [p.gap] as const,\n        ([gap]) => css`\n          margin: 0 ${gap == null ? 0 : `${gap.value / 2}${gap.unit}`};\n\n          &:first-child {\n            margin-left: 0;\n          }\n\n          &:last-child {\n            margin-right: 0;\n          }\n        `,\n      )}\n  }\n\n  ${Block} {\n    ${p =>\n      cssMediaRules([p.shape] as const, ([shape = 'rounded']) => {\n        switch (shape) {\n          case 'pill':\n            return css`\n              border-radius: 500px;\n            `\n          case 'rounded':\n            return css`\n              border-radius: 6px;\n            `\n          default:\n            return css`\n              border-radius: 0;\n            `\n        }\n      })}\n    ${p =>\n      cssMediaRules(\n        [p.variant, p.blockColor, p.numberColor, p.numberFont] as const,\n        ([\n          variant = 'filled',\n          blockColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          numberColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n          numberFont = 'sans-serif',\n        ]) => {\n          switch (variant) {\n            case 'filled':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: ${colorToString(blockColor)};\n              `\n            case 'filled-split':\n              return css`\n                position: relative;\n                color: ${colorToString(numberColor)};\n                font-family: '${numberFont}';\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  right: 0;\n                  bottom: calc(50% + 1px);\n                  border-top-left-radius: inherit;\n                  border-top-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n\n                ::after {\n                  content: '';\n                  position: absolute;\n                  left: 0;\n                  right: 0;\n                  top: calc(50% + 1px);\n                  bottom: 0;\n                  border-bottom-left-radius: inherit;\n                  border-bottom-right-radius: inherit;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            case 'outline':\n              return css`\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                background: transparent;\n                border: 2px solid ${colorToString(blockColor)};\n              `\n            case 'outline-split':\n              return css`\n                position: relative;\n                font-family: '${numberFont}';\n                color: ${colorToString(numberColor)};\n                border: 2px solid ${colorToString(blockColor)};\n\n                > span {\n                  position: relative;\n                  z-index: 1;\n                }\n\n                ::before {\n                  content: '';\n                  position: absolute;\n                  top: 50%;\n                  left: 0;\n                  right: 0;\n                  height: 2px;\n                  margin-top: -1px;\n                  background: ${colorToString(blockColor)};\n                }\n              `\n            default:\n              return css`\n                font-family: '${numberFont}';\n                background: transparent;\n                color: ${colorToString(numberColor)};\n                padding-top: 0;\n                padding-bottom: 0;\n              `\n          }\n        },\n      )}\n  }\n\n  ${Label} {\n    ${p =>\n      cssMediaRules(\n        [p.labelColor, p.labelFont] as const,\n        ([\n          labelColor = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n          labelFont = 'sans-serif',\n        ]) => css`\n          font-family: '${labelFont}';\n          color: ${colorToString(labelColor)};\n        `,\n      )}\n  }\n`\n\nconst getRemaining = (date: Props['date'] | undefined) => {\n  if (date == null) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  const timeDiff = new Date(date).getTime() - Date.now()\n\n  if (timeDiff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }\n\n  let delta = Math.abs(timeDiff) / 1000\n\n  const days = Math.floor(delta / 86400)\n  delta -= days * 86400\n\n  const hours = Math.floor(delta / 3600) % 24\n  delta -= hours * 3600\n\n  const minutes = Math.floor(delta / 60) % 60\n  delta -= minutes * 60\n\n  const seconds = parseInt(String(delta % 60), 10)\n\n  return { days, hours, minutes, seconds }\n}\n\nconst Countdown = forwardRef(function Countdown(\n  {\n    id,\n    margin,\n    width,\n    date,\n    variant,\n    size,\n    shape,\n    gap,\n    labelColor,\n    labelFont,\n    numberColor,\n    numberFont,\n    blockColor,\n    daysLabel,\n    hoursLabel,\n    minutesLabel,\n    secondsLabel,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const [{ days, hours, minutes, seconds }, setRemaining] = useState(getRemaining(date))\n\n  useEffect(() => {\n    setRemaining(getRemaining(date))\n\n    const intervalId = setInterval(() => {\n      setRemaining(getRemaining(date))\n    }, 1000)\n\n    return () => clearInterval(intervalId)\n  }, [date])\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      width={width}\n      margin={margin}\n      variant={variant}\n      size={size}\n      shape={shape}\n      labelColor={labelColor}\n      labelFont={labelFont}\n      numberColor={numberColor}\n      numberFont={numberFont}\n      blockColor={blockColor}\n      gap={gap}\n    >\n      <Segment>\n        <Block>\n          <span>{days}</span>\n        </Block>\n        <Label>{daysLabel == null ? 'Days' : daysLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{hours}</span>\n        </Block>\n        <Label>{hoursLabel == null ? 'Hours' : hoursLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{minutes}</span>\n        </Block>\n        <Label>{minutesLabel == null ? 'Minutes' : minutesLabel}</Label>\n      </Segment>\n      <Segment>\n        <Block>\n          <span>{seconds}</span>\n        </Block>\n        <Label>{secondsLabel == null ? 'Seconds' : secondsLabel}</Label>\n      </Segment>\n    </Container>\n  )\n})\n\nexport default Countdown\n"],"names":["Block","styled","div","Label","Segment","Container","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","p","cssMediaRules","size","css","gap","value","unit","shape","variant","blockColor","numberColor","numberFont","swatch","hue","saturation","lightness","alpha","colorToString","labelColor","labelFont","getRemaining","date","days","hours","minutes","seconds","timeDiff","Date","getTime","now","delta","Math","abs","floor","parseInt","String","Countdown","forwardRef","id","margin","width","daysLabel","hoursLabel","minutesLabel","secondsLabel","ref","setRemaining","useState","useEffect","intervalId","setInterval","clearInterval","_jsxs","_jsx"],"mappings":"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"}

package/dist/Divider.cjs.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var styled = require("styled-components");
-var css = require("@emotion/css");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
@@ -19,6 +18,7 @@ require("next/dynamic");
 require("next/document");
 require("slate");
 require("@emotion/server/create-instance");
+require("@emotion/css");
 require("@apollo/client");
 require("@apollo/client/link/batch-http");
 require("./graphql.cjs.js");
@@ -36,10 +36,11 @@ function _interopDefaultLegacy(e) {
 }
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 const IE11MinHeightContainer = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["margin"].includes(prop)
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop)
 })`
   display: flex;
   width: 100%;
+  ${cssMediaRules.cssWidth()}
   ${cssMediaRules.cssMargin()}
 `;
 const Container = styled__default["default"].div`
@@ -101,7 +102,7 @@ const Divider = React.forwardRef(function Divider2({
   return /* @__PURE__ */ jsxRuntime.jsx(IE11MinHeightContainer, {
     ref,
     id,
-    className: css.cx(width),
+    width,
     margin,
     children: /* @__PURE__ */ jsxRuntime.jsx(Container, {
       children: /* @__PURE__ */ jsxRuntime.jsx(Line, {

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'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  WidthValue,\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?: WidthValue\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 => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  display: flex;\n  width: 100%;\n  ${cssWidth()}\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} width={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","cssWidth","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,cAAW,SAAA;AAAA,IACXC,cAAY,UAAA;AAAA;AAGhB,MAAMC,YAAYR,gBAAOC,WAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMQ,OAAOT,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTM,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;AAAA,IAAc;AAAA,IAAxD,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

@@ -1,7 +1,6 @@
 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 { a as cssWidth, b as cssMargin, c as cssMediaRules } from "./cssMediaRules.es.js";
 import { p as colorToString } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
@@ -17,6 +16,7 @@ import "next/dynamic";
 import "next/document";
 import "slate";
 import "@emotion/server/create-instance";
+import "@emotion/css";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
 import "./graphql.es.js";
@@ -30,10 +30,11 @@ import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
 const IE11MinHeightContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["margin"].includes(prop)
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop)
 })`
   display: flex;
   width: 100%;
+  ${cssWidth()}
   ${cssMargin()}
 `;
 const Container = styled.div`
@@ -95,7 +96,7 @@ const Divider = forwardRef(function Divider2({
   return /* @__PURE__ */ jsx(IE11MinHeightContainer, {
     ref,
     id,
-    className: cx(width),
+    width,
     margin,
     children: /* @__PURE__ */ jsx(Container, {
       children: /* @__PURE__ */ jsx(Line, {

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'\n\nimport { cssMediaRules, cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  MarginValue,\n  ResponsiveLengthValue,\n  ResponsiveSelectValue,\n  WidthValue,\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?: WidthValue\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 => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  display: flex;\n  width: 100%;\n  ${cssWidth()}\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} width={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","cssWidth","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,yBAAyBC,OAAOC,IAAIC,WAAW;AAAA,EACnDC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADuB,CAAtB;AAAA;AAAA;AAAA,IAK3BE,SAAW;AAAA,IACXC,UAAY;AAAA;AAGhB,MAAMC,YAAYR,OAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAQzB,MAAMQ,OAAOT,OAAOC,IAAIC,WAAW;AAAA,EACjCC,mBAAmBC,UAAQ,CAAC,CAAC,WAAW,SAAS,WAArB,EAAkCC,SAASD,IAA3C;AADK,CAAtB;AAAA,IAOTM,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;AAAA,IAAc;AAAA,IAAxD,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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var styled = require("styled-components");
-var css = require("@emotion/css");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
@@ -19,6 +18,7 @@ require("next/dynamic");
 require("next/document");
 require("slate");
 require("@emotion/server/create-instance");
+require("@emotion/css");
 require("@apollo/client");
 require("@apollo/client/link/batch-http");
 require("./graphql.cjs.js");
@@ -36,9 +36,10 @@ function _interopDefaultLegacy(e) {
 }
 var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
 const Container = styled__default["default"].div.withConfig({
-  shouldForwardProp: (prop) => !["margin"].includes(prop)
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop)
 })`
   min-height: 15px;
+  ${cssMediaRules.cssWidth()}
   ${cssMediaRules.cssMargin()}
 `;
 const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
@@ -119,7 +120,7 @@ const Embed = React.forwardRef(function Embed2({
   return /* @__PURE__ */ jsxRuntime.jsx(Container, {
     ref: setContainer,
     id,
-    className: css.cx(width),
+    width,
     margin,
     dangerouslySetInnerHTML: {
       __html: html

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'\n\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ElementIDValue,\n  MarginValue,\n  TextAreaValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  min-height: 15px;\n  ${cssWidth()}\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      width={width}\n      margin={margin}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","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","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAYC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADU,CAAtB;AAAA;AAAA,IAIdE,cAAW,SAAA;AAAA,IACXC,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;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,MAAE6C,QAAQhD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}

package/dist/Embed.es.js

@@ -1,7 +1,6 @@
 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 { a as cssWidth, b as cssMargin } from "./cssMediaRules.es.js";
 import { q as useIsomorphicLayoutEffect } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
 import "use-sync-external-store/shim/with-selector";
@@ -17,6 +16,7 @@ import "next/dynamic";
 import "next/document";
 import "slate";
 import "@emotion/server/create-instance";
+import "@emotion/css";
 import "@apollo/client";
 import "@apollo/client/link/batch-http";
 import "./graphql.es.js";
@@ -30,9 +30,10 @@ import "next/head";
 import "uuid/v4";
 import "corporate-ipsum";
 const Container = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["margin"].includes(prop)
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop)
 })`
   min-height: 15px;
+  ${cssWidth()}
   ${cssMargin()}
 `;
 const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
@@ -113,7 +114,7 @@ const Embed = forwardRef(function Embed2({
   return /* @__PURE__ */ jsx(Container, {
     ref: setContainer,
     id,
-    className: cx(width),
+    width,
     margin,
     dangerouslySetInnerHTML: {
       __html: html

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'\n\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ElementIDValue,\n  MarginValue,\n  TextAreaValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  min-height: 15px;\n  ${cssWidth()}\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      width={width}\n      margin={margin}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","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","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADU,CAAtB;AAAA;AAAA,IAIdE,SAAW;AAAA,IACXC,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;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,MAAE6C,QAAQhD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}

package/dist/Form.cjs.js

@@ -34,7 +34,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var React = require("react");
 var styled = require("styled-components");
 var formik = require("formik");
-var css = require("@emotion/css");
 var cssMediaRules = require("./cssMediaRules.cjs.js");
 var next = require("./index.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
@@ -56,6 +55,7 @@ require("next/dynamic");
 require("next/document");
 require("slate");
 require("@emotion/server/create-instance");
+require("@emotion/css");
 require("@apollo/client/link/batch-http");
 require("./graphql.cjs.js");
 require("./text-input.cjs.js");
@@ -289,6 +289,7 @@ const Container$3 = styled__default["default"].div.withConfig({
 })`
   display: flex;
   flex-direction: column;
+  ${cssMediaRules.cssWidth()};
   ${cssMediaRules.cssMargin()};
 `;
 const Label$2 = styled__default["default"].div`
@@ -318,11 +319,13 @@ const Button = styled__default["default"].div`
 `;
 var Placeholder = React.forwardRef(function Placeholder2({
   className,
+  width,
   margin
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Container$3, {
     ref,
     className,
+    width,
     margin,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       style: {
@@ -1405,6 +1408,7 @@ const GridForm = styled__default["default"].form.withConfig({
   ${(props) => cssMediaRules.cssMediaRules([props.size], ([size = next.Sizes.MEDIUM]) => styled.css`
         font-size: ${getSizeFontSize(size)}px;
       `)}
+  ${cssMediaRules.cssWidth()}
   ${cssMediaRules.cssMargin()}
 `;
 const GridItem = styled__default["default"].div.withConfig({
@@ -1642,7 +1646,7 @@ const Form = React.forwardRef(function Form2({
     },
     children: tableId == null ? /* @__PURE__ */ jsxRuntime.jsx(Placeholder, {
       ref: setRefEl,
-      className: css.cx(width),
+      width,
       margin
     }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: /* @__PURE__ */ jsxRuntime.jsx(formik.Formik, {
@@ -1662,7 +1666,7 @@ const Form = React.forwardRef(function Form2({
             children: [/* @__PURE__ */ jsxRuntime.jsxs(GridForm, {
               ref: setRefEl,
               id,
-              className: css.cx(width),
+              width,
               margin,
               size,
               onSubmit: formik$1.handleSubmit,