@makeswift/runtime 0.13.0 → 0.14.0

package/dist/esm/components/shared/Link/index.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import NextLink from "next/link";
+import { useElementId } from "../../../runtimes/react";
+import { usePagePathnameSlice } from "../../../runtimes/react/hooks/makeswift-api";
+const Link = forwardRef(function Link2({ link, onClick = () => {
+}, ...restOfProps }, ref) {
+  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
+  const page = usePagePathnameSlice(pageId ?? null);
+  const elementKey = link?.type === "SCROLL_TO_ELEMENT" ? link.payload.elementIdConfig?.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let useNextLink;
+  let href;
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page) {
+          useNextLink = true;
+          href = `/${page.pathname}`;
+        }
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        useNextLink = true;
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        useNextLink = false;
+        const { to, subject = "", body = "" } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        useNextLink = false;
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        useNextLink = false;
+        href = `#${elementId ?? ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  function handleClick(event) {
+    onClick(event);
+    if (event.defaultPrevented)
+      return;
+    if (event.currentTarget.isContentEditable)
+      return event.preventDefault();
+    if (link && link.type === "SCROLL_TO_ELEMENT") {
+      let hash;
+      try {
+        if (href != null)
+          hash = new URL(`http://www.example.com/${href}`).hash;
+      } catch (error) {
+        console.error(`Link received invalid href: ${href}`, error);
+      }
+      if (href != null && hash != null && href === hash) {
+        event.preventDefault();
+        const view = event.view;
+        scrollIntoView(view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
+  }
+  if (useNextLink && href != null) {
+    return /* @__PURE__ */ jsx(
+      NextLink,
+      {
+        ...restOfProps,
+        ref,
+        target,
+        onClick: handleClick,
+        href,
+        legacyBehavior: false
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("a", { ...restOfProps, ref, href, target, onClick: handleClick });
+});
+export {
+  Link
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/shared/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/shared/Link/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEvent } from 'react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport NextLink from 'next/link'\n\nimport { LinkValue as LinkPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { useElementId } from '../../../runtimes/react'\nimport { usePagePathnameSlice } from '../../../runtimes/react/hooks/makeswift-api'\n\ntype BaseProps = {\n  link?: LinkPropControllerValue\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>\n\nexport const Link = forwardRef<HTMLAnchorElement, Props>(function Link(\n  { link, onClick = () => {}, ...restOfProps }: Props,\n  ref,\n) {\n  const pageId = link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null\n  const page = usePagePathnameSlice(pageId ?? null)\n  const elementKey =\n    link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null\n  const elementId = useElementId(elementKey)\n\n  // We don't want to use `next/link` with relative paths because Next.js will attempt to normalize\n  // it and mess up the path.\n  let useNextLink: boolean | undefined\n  let href: string | undefined\n  let target: '_blank' | '_self' | undefined\n  let block: 'start' | 'center' | 'end' | undefined\n\n  if (link) {\n    switch (link.type) {\n      case 'OPEN_PAGE': {\n        if (page) {\n          useNextLink = true\n\n          href = `/${page.pathname}`\n        }\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'OPEN_URL': {\n        useNextLink = true\n\n        href = link.payload.url\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'SEND_EMAIL': {\n        useNextLink = false\n\n        const { to, subject = '', body = '' } = link.payload\n\n        if (to != null) href = `mailto:${to}?subject=${subject}&body=${body}`\n\n        break\n      }\n\n      case 'CALL_PHONE': {\n        useNextLink = false\n\n        href = `tel:${link.payload.phoneNumber}`\n\n        break\n      }\n\n      case 'SCROLL_TO_ELEMENT': {\n        useNextLink = false\n\n        href = `#${elementId ?? ''}`\n\n        block = link.payload.block\n\n        break\n      }\n\n      default:\n        throw new RangeError(`Invalid link type \"${(link as any).type}.\"`)\n    }\n  }\n\n  function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n    onClick(event)\n\n    if (event.defaultPrevented) return\n\n    /**\n     * When we introduced `next/link` instead of just `a` element slate no longer prevented link from navigating within\n     * content mode. This is a hack to compensate for what would be expected as slate's default behavior.\n     * On upgrade of slate this can be reevaluated.\n     */\n    if (event.currentTarget.isContentEditable) return event.preventDefault()\n\n    if (link && link.type === 'SCROLL_TO_ELEMENT') {\n      let hash: string | undefined\n\n      try {\n        if (href != null) hash = new URL(`http://www.example.com/${href}`).hash\n      } catch (error) {\n        console.error(`Link received invalid href: ${href}`, error)\n      }\n\n      if (href != null && hash != null && href === hash) {\n        event.preventDefault()\n        const view = event.view as unknown as Window\n\n        scrollIntoView(view.document.querySelector(hash)!, {\n          behavior: 'smooth',\n          block,\n        })\n\n        if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n      }\n    }\n  }\n\n  if (useNextLink && href != null) {\n    return (\n      <NextLink\n        {...restOfProps}\n        ref={ref}\n        target={target}\n        onClick={handleClick}\n        href={href}\n        // Next.js v12 has legacyBehavior set to true by default\n        legacyBehavior={false}\n      />\n    )\n  }\n\n  // eslint-disable-next-line\n  return <a {...restOfProps} ref={ref} href={href} target={target} onClick={handleClick} />\n})\n"],"mappings":"AA8HM;AA9HN,SAAmC,kBAA8B;AACjE,OAAO,oBAAoB;AAC3B,OAAO,cAAc;AAGrB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAS9B,MAAM,OAAO,WAAqC,SAASA,MAChE,EAAE,MAAM,UAAU,MAAM;AAAC,GAAG,GAAG,YAAY,GAC3C,KACA;AACA,QAAM,SAAS,QAAQ,KAAK,SAAS,cAAc,KAAK,QAAQ,SAAS;AACzE,QAAM,OAAO,qBAAqB,UAAU,IAAI;AAChD,QAAM,aACJ,MAAM,SAAS,sBAAsB,KAAK,QAAQ,iBAAiB,aAAa;AAClF,QAAM,YAAY,aAAa,UAAU;AAIzC,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,MAAM;AACR,YAAQ,KAAK,MAAM;AAAA,MACjB,KAAK,aAAa;AAChB,YAAI,MAAM;AACR,wBAAc;AAEd,iBAAO,IAAI,KAAK,QAAQ;AAAA,QAC1B;AAEA,iBAAS,KAAK,QAAQ,eAAe,WAAW;AAEhD;AAAA,MACF;AAAA,MAEA,KAAK,YAAY;AACf,sBAAc;AAEd,eAAO,KAAK,QAAQ;AAEpB,iBAAS,KAAK,QAAQ,eAAe,WAAW;AAEhD;AAAA,MACF;AAAA,MAEA,KAAK,cAAc;AACjB,sBAAc;AAEd,cAAM,EAAE,IAAI,UAAU,IAAI,OAAO,GAAG,IAAI,KAAK;AAE7C,YAAI,MAAM;AAAM,iBAAO,UAAU,EAAE,YAAY,OAAO,SAAS,IAAI;AAEnE;AAAA,MACF;AAAA,MAEA,KAAK,cAAc;AACjB,sBAAc;AAEd,eAAO,OAAO,KAAK,QAAQ,WAAW;AAEtC;AAAA,MACF;AAAA,MAEA,KAAK,qBAAqB;AACxB,sBAAc;AAEd,eAAO,IAAI,aAAa,EAAE;AAE1B,gBAAQ,KAAK,QAAQ;AAErB;AAAA,MACF;AAAA,MAEA;AACE,cAAM,IAAI,WAAW,sBAAuB,KAAa,IAAI,IAAI;AAAA,IACrE;AAAA,EACF;AAEA,WAAS,YAAY,OAAsC;AACzD,YAAQ,KAAK;AAEb,QAAI,MAAM;AAAkB;AAO5B,QAAI,MAAM,cAAc;AAAmB,aAAO,MAAM,eAAe;AAEvE,QAAI,QAAQ,KAAK,SAAS,qBAAqB;AAC7C,UAAI;AAEJ,UAAI;AACF,YAAI,QAAQ;AAAM,iBAAO,IAAI,IAAI,0BAA0B,IAAI,EAAE,EAAE;AAAA,MACrE,SAAS,OAAO;AACd,gBAAQ,MAAM,+BAA+B,IAAI,IAAI,KAAK;AAAA,MAC5D;AAEA,UAAI,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,MAAM;AACjD,cAAM,eAAe;AACrB,cAAM,OAAO,MAAM;AAEnB,uBAAe,KAAK,SAAS,cAAc,IAAI,GAAI;AAAA,UACjD,UAAU;AAAA,UACV;AAAA,QACF,CAAC;AAED,YAAI,KAAK,SAAS,SAAS;AAAM,eAAK,QAAQ,UAAU,CAAC,GAAG,IAAI,IAAI;AAAA,MACtE;AAAA,IACF;AAAA,EACF;AAEA,MAAI,eAAe,QAAQ,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QAEA,gBAAgB;AAAA;AAAA,IAClB;AAAA,EAEJ;AAGA,SAAO,oBAAC,OAAG,GAAG,aAAa,KAAU,MAAY,QAAgB,SAAS,aAAa;AACzF,CAAC;","names":["Link"]}

package/dist/esm/components/shared/grid-item.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { useStyle } from "../../runtimes/react/use-style";
+import { useItemAnimation } from "../builtin/Box/animations";
+import { useResponsiveGridItem } from "../utils/responsive-style";
+const gridItemIdentifierClassName = "grid-item";
+function GridItem({
+  grid,
+  index,
+  columnGap,
+  rowGap,
+  className,
+  itemAnimateDuration,
+  itemAnimateDelay,
+  itemStaggerDuration,
+  ...restOfProps
+}) {
+  const gridItemClassName = useStyle(useResponsiveGridItem({ grid, index, columnGap, rowGap }));
+  const animationClassName = useItemAnimation(
+    itemAnimateDuration,
+    itemAnimateDelay,
+    itemStaggerDuration,
+    index
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      className: cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)
+    }
+  );
+}
+export {
+  GridItem,
+  gridItemIdentifierClassName
+};
+//# sourceMappingURL=grid-item.js.map

package/dist/esm/components/shared/grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/shared/grid-item.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport {\n  ResponsiveValue,\n  Length as LengthValue,\n  ResponsiveNumberValue,\n} from '../../prop-controllers'\nimport { useStyle } from '../../runtimes/react/use-style'\nimport { useItemAnimation } from '../builtin/Box/animations'\nimport { useResponsiveGridItem } from '../utils/responsive-style'\n\ntype BaseProps = {\n  className?: string\n  grid: ResponsiveValue<{ spans: Array<Array<number>>; count: number }>\n  index: number\n  columnGap?: ResponsiveValue<LengthValue>\n  rowGap?: ResponsiveValue<LengthValue>\n  itemAnimateDuration?: ResponsiveNumberValue\n  itemAnimateDelay?: ResponsiveNumberValue\n  itemStaggerDuration?: ResponsiveNumberValue\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BaseProps>\n\nexport const gridItemIdentifierClassName = 'grid-item'\n\nexport function GridItem({\n  grid,\n  index,\n  columnGap,\n  rowGap,\n  className,\n  itemAnimateDuration,\n  itemAnimateDelay,\n  itemStaggerDuration,\n  ...restOfProps\n}: Props) {\n  const gridItemClassName = useStyle(useResponsiveGridItem({ grid, index, columnGap, rowGap }))\n  const animationClassName = useItemAnimation(\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n    index,\n  )\n\n  return (\n    <div\n      {...restOfProps}\n      className={cx(gridItemClassName, className, animationClassName, gridItemIdentifierClassName)}\n    />\n  )\n}\n"],"mappings":"AA8CI;AA9CJ,SAAS,UAAU;AAOnB,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AAe/B,MAAM,8BAA8B;AAEpC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,oBAAoB,SAAS,sBAAsB,EAAE,MAAM,OAAO,WAAW,OAAO,CAAC,CAAC;AAC5F,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,mBAAmB,WAAW,oBAAoB,2BAA2B;AAAA;AAAA,EAC7F;AAEJ;","names":[]}

package/dist/esm/components/utils/colorToString.js

@@ -0,0 +1,7 @@
+function colorToString(color) {
+  return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
+}
+export {
+  colorToString
+};
+//# sourceMappingURL=colorToString.js.map

package/dist/esm/components/utils/colorToString.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/utils/colorToString.ts"],"sourcesContent":["import type { ColorValue as Color } from './types'\n\nexport function colorToString(color?: Color): string {\n  return color && color.swatch\n    ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})`\n    : ''\n}\n"],"mappings":"AAEO,SAAS,cAAc,OAAuB;AACnD,SAAO,SAAS,MAAM,SAClB,QAAQ,MAAM,OAAO,GAAG,IAAI,MAAM,OAAO,UAAU,KAAK,MAAM,OAAO,SAAS,KAAK,MAAM,KAAK,MAC9F;AACN;","names":[]}

package/dist/esm/components/utils/columns.js

@@ -0,0 +1,16 @@
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+export {
+  getIndexes
+};
+//# sourceMappingURL=columns.js.map

package/dist/esm/components/utils/columns.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/utils/columns.ts"],"sourcesContent":["export const getIndexes = (spans: Array<Array<number>>, index: number): [number, number] => {\n  const flattened = spans.reduce((a, s) => a.concat(s), [])\n\n  if (index < 0 || index > flattened.length) throw new RangeError()\n\n  let remainder = index\n  let rowIndex = 0\n\n  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {\n    remainder -= spans[rowIndex].length\n    rowIndex += 1\n  }\n\n  return [rowIndex, remainder]\n}\n"],"mappings":"AAAO,MAAM,aAAa,CAAC,OAA6B,UAAoC;AAC1F,QAAM,YAAY,MAAM,OAAO,CAAC,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;AAExD,MAAI,QAAQ,KAAK,QAAQ,UAAU;AAAQ,UAAM,IAAI,WAAW;AAEhE,MAAI,YAAY;AAChB,MAAI,WAAW;AAEf,SAAO,WAAW,MAAM,SAAS,KAAK,aAAa,MAAM,QAAQ,EAAE,QAAQ;AACzE,iBAAa,MAAM,QAAQ,EAAE;AAC7B,gBAAY;AAAA,EACd;AAEA,SAAO,CAAC,UAAU,SAAS;AAC7B;","names":[]}

package/dist/esm/components/utils/drop-first.js

@@ -0,0 +1 @@
+//# sourceMappingURL=drop-first.js.map

package/dist/esm/components/utils/drop-first.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/esm/components/utils/isNonNullable.js

@@ -0,0 +1,7 @@
+function isNonNullable(value) {
+  return value != null;
+}
+export {
+  isNonNullable
+};
+//# sourceMappingURL=isNonNullable.js.map

package/dist/esm/components/utils/isNonNullable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/utils/isNonNullable.ts"],"sourcesContent":["export function isNonNullable<T>(value: T): value is NonNullable<T> {\n  return value != null\n}\n"],"mappings":"AAAO,SAAS,cAAiB,OAAmC;AAClE,SAAO,SAAS;AAClB;","names":[]}

package/dist/esm/components/utils/placeholders.js

@@ -0,0 +1,14 @@
+const placeholders = {
+  image: {
+    src: "data:image/svg+xml,%3Csvg width='360' height='240' viewBox='0 0 360 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M260 59C260 78.33 244.33 94 225 94C205.67 94 190 78.33 190 59C190 39.67 205.67 24 225 24C244.33 24 260 39.67 260 59Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M319 250H417L291.485 124.485C286.799 119.799 279.201 119.799 274.515 124.485L234 165L319 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath d='M311 250L-89 250L102.515 58.4853C107.201 53.799 114.799 53.799 119.485 58.4853L311 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A",
+    dimensions: { width: 360, height: 240 }
+  },
+  video: {
+    src: "data:image/svg+xml,%3Csvg width='712' height='400' viewBox='0 0 712 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M712 0H0V400H712V0ZM356 240C378.091 240 396 222.091 396 200C396 177.909 378.091 160 356 160C333.909 160 316 177.909 316 200C316 222.091 333.909 240 356 240Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M344 216.503V183.497C344 181.95 345.681 180.989 347.014 181.773L375.069 198.276C376.384 199.049 376.384 200.951 375.069 201.724L347.014 218.227C345.681 219.011 344 218.05 344 216.503Z' fill='%23A1A8C2' fill-opacity='0.4'/%3E%3C/svg%3E%0A",
+    dimensions: { width: 712, height: 400 }
+  }
+};
+export {
+  placeholders
+};
+//# sourceMappingURL=placeholders.js.map

package/dist/esm/components/utils/placeholders.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/utils/placeholders.ts"],"sourcesContent":["export const placeholders = {\n  image: {\n    src: \"data:image/svg+xml,%3Csvg width='360' height='240' viewBox='0 0 360 240' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M260 59C260 78.33 244.33 94 225 94C205.67 94 190 78.33 190 59C190 39.67 205.67 24 225 24C244.33 24 260 39.67 260 59Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M319 250H417L291.485 124.485C286.799 119.799 279.201 119.799 274.515 124.485L234 165L319 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3Cpath d='M311 250L-89 250L102.515 58.4853C107.201 53.799 114.799 53.799 119.485 58.4853L311 250Z' fill='%23A1A8C2' fill-opacity='0.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Cpath d='M0 0H360V240H0V0Z' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\",\n    dimensions: { width: 360, height: 240 },\n  },\n  video: {\n    src: \"data:image/svg+xml,%3Csvg width='712' height='400' viewBox='0 0 712 400' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M712 0H0V400H712V0ZM356 240C378.091 240 396 222.091 396 200C396 177.909 378.091 160 356 160C333.909 160 316 177.909 316 200C316 222.091 333.909 240 356 240Z' fill='%23A1A8C2' fill-opacity='0.18'/%3E%3Cpath d='M344 216.503V183.497C344 181.95 345.681 180.989 347.014 181.773L375.069 198.276C376.384 199.049 376.384 200.951 375.069 201.724L347.014 218.227C345.681 219.011 344 218.05 344 216.503Z' fill='%23A1A8C2' fill-opacity='0.4'/%3E%3C/svg%3E%0A\",\n    dimensions: { width: 712, height: 400 },\n  },\n}\n"],"mappings":"AAAO,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,IACL,KAAK;AAAA,IACL,YAAY,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,EACxC;AAAA,EACA,OAAO;AAAA,IACL,KAAK;AAAA,IACL,YAAY,EAAE,OAAO,KAAK,QAAQ,IAAI;AAAA,EACxC;AACF;","names":[]}

package/dist/esm/components/utils/responsive-style.js

@@ -0,0 +1,222 @@
+import {
+  getBreakpoint,
+  getBreakpointMediaQuery,
+  join as joinResponsiveValues
+} from "../../state/modules/breakpoints";
+import { getIndexes } from "./columns";
+import { paddingPropertyDataToStyle } from "../../css/padding";
+import { marginPropertyDataToStyle } from "../../css/margin";
+import { borderRadiusPropertyDataToStyle } from "../../css/border-radius";
+import { borderPropertyDataToStyle } from "../../css/border";
+import { colorToString } from "./colorToString";
+import { useBreakpoints } from "../../runtimes/react";
+function responsiveStyle(breakpoints, responsiveValues, join, strategy) {
+  return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(
+    (acc, { deviceId, value }) => {
+      const breakpoint = getBreakpoint(breakpoints, deviceId);
+      const mediaQuery = getBreakpointMediaQuery(breakpoint);
+      return {
+        ...acc,
+        [mediaQuery]: {
+          ...acc[mediaQuery],
+          ...value
+        }
+      };
+    },
+    {}
+  );
+}
+function useResponsiveStyle(responsiveValues, join, strategy) {
+  return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy);
+}
+function responsiveWidth(breakpoints, widthData, defaultValue = "100%") {
+  return {
+    maxWidth: "100%",
+    ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({
+      width: typeof width === "object" ? `${width.value}${width.unit}` : width
+    }))
+  };
+}
+function useResponsiveWidth(...args) {
+  return responsiveWidth(useBreakpoints(), ...args);
+}
+function responsivePadding(breakpoints, paddingData, defaultValue = {}) {
+  return responsiveStyle(
+    breakpoints,
+    [paddingData],
+    ([padding = {}]) => paddingPropertyDataToStyle(
+      padding,
+      Object.assign(
+        { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },
+        defaultValue
+      )
+    )
+  );
+}
+function useResponsivePadding(...args) {
+  return responsivePadding(useBreakpoints(), ...args);
+}
+function responsiveMargin(breakpoints, marginData, defaultValue = {}) {
+  return responsiveStyle(
+    breakpoints,
+    [marginData],
+    ([margin = {}]) => marginPropertyDataToStyle(
+      margin,
+      Object.assign(
+        { marginTop: 0, marginRight: "auto", marginBottom: 0, marginLeft: "auto" },
+        defaultValue
+      )
+    )
+  );
+}
+function useResponsiveMargin(...args) {
+  return responsiveMargin(useBreakpoints(), ...args);
+}
+function responsiveBorderRadius(breakpoints, borderRadiusData, defaultValue = {}) {
+  return responsiveStyle(
+    breakpoints,
+    [borderRadiusData],
+    ([borderRadius = {}]) => borderRadiusPropertyDataToStyle(
+      borderRadius,
+      Object.assign(
+        {
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          borderBottomLeftRadius: 0
+        },
+        defaultValue
+      )
+    )
+  );
+}
+function useResponsiveBorderRadius(...args) {
+  return responsiveBorderRadius(useBreakpoints(), ...args);
+}
+function useResponsiveBorder(borderData, defaultValue = {}) {
+  return useResponsiveStyle(
+    [borderData],
+    ([border = {}]) => borderPropertyDataToStyle(
+      border,
+      Object.assign(
+        {
+          borderTop: "0px solid black",
+          borderRight: "0px solid black",
+          borderBottom: "0px solid black",
+          borderLeft: "0px solid black"
+        },
+        defaultValue
+      )
+    )
+  );
+}
+const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
+function responsiveGridItem(breakpoints, props) {
+  return {
+    display: "flex",
+    ...responsiveStyle(
+      breakpoints,
+      [props.grid, props.columnGap, props.rowGap],
+      ([
+        { spans, count } = { spans: [[12]], count: 12 },
+        columnGap = { value: 0, unit: "px" },
+        rowGap = { value: 0, unit: "px" }
+      ]) => {
+        const [rowIndex, columnIndex] = getIndexes(spans, props.index);
+        const firstCol = columnIndex === 0;
+        const lastCol = columnIndex === spans[rowIndex].length - 1;
+        const span = spans[rowIndex][columnIndex];
+        const fraction = floor(5)(span / count);
+        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
+        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
+        const iePrecisionError = "0.01px";
+        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
+        const firstRow = rowIndex === 0;
+        const lastRow = rowIndex === spans.length - 1;
+        return span === 0 ? { display: "none" } : {
+          flexBasis,
+          minWidth: flexBasis,
+          // NOTE: IE11 width breaks without max width
+          // https://github.com/philipwalton/flexbugs/issues/3
+          maxWidth: flexBasis,
+          paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+          paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+          paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
+          paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
+        };
+      }
+    )
+  };
+}
+function useResponsiveGridItem(...args) {
+  return responsiveGridItem(useBreakpoints(), ...args);
+}
+const getBoxShadow = (shadows) => shadows.map(
+  ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) => `${inset ? "inset " : ""}${offsetX.toFixed(1)}px ${offsetY.toFixed(
+    1
+  )}px ${blurRadius}px ${spreadRadius}px ${color != null ? colorToString(color) : "rgba(0,0,0,0.2)"}`
+).filter(Boolean).join();
+function responsiveShadow(breakpoints, value) {
+  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({
+    boxShadow: getBoxShadow(shadow)
+  }));
+}
+function useResponsiveShadow(...args) {
+  return responsiveShadow(useBreakpoints(), ...args);
+}
+function responsiveTextStyle(breakpoints, value) {
+  return responsiveStyle(
+    breakpoints,
+    [value],
+    ([
+      textStyle = {
+        fontFamily: null,
+        letterSpacing: null,
+        fontSize: null,
+        fontWeight: null,
+        textTransform: [],
+        fontStyle: []
+      }
+    ]) => {
+      const {
+        fontSize,
+        fontWeight,
+        fontStyle = [],
+        textTransform = [],
+        letterSpacing,
+        fontFamily
+      } = textStyle;
+      return {
+        ...fontFamily == null ? {} : { fontFamily: `"${fontFamily}"` },
+        ...fontWeight == null ? {} : { fontWeight },
+        ...letterSpacing == null ? {} : { letterSpacing },
+        ...fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` },
+        ...textTransform.includes("uppercase") ? { textTransform: "uppercase" } : {},
+        ...fontStyle.includes("italic") ? { fontStyle: "italic" } : {}
+      };
+    }
+  );
+}
+function useResponsiveTextStyle(...args) {
+  return responsiveTextStyle(useBreakpoints(), ...args);
+}
+export {
+  responsiveBorderRadius,
+  responsiveGridItem,
+  responsiveMargin,
+  responsivePadding,
+  responsiveShadow,
+  responsiveStyle,
+  responsiveTextStyle,
+  responsiveWidth,
+  useResponsiveBorder,
+  useResponsiveBorderRadius,
+  useResponsiveGridItem,
+  useResponsiveMargin,
+  useResponsivePadding,
+  useResponsiveShadow,
+  useResponsiveStyle,
+  useResponsiveTextStyle,
+  useResponsiveWidth
+};
+//# sourceMappingURL=responsive-style.js.map

package/dist/esm/components/utils/responsive-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/utils/responsive-style.ts"],"sourcesContent":["import { WidthProperty } from 'csstype'\nimport { CSSObject } from '@emotion/css'\n\nimport {\n  ResponsiveValue,\n  ResponsiveValueType as ExtractResponsiveValue,\n  Length as LengthValue,\n  WidthValue,\n  PaddingValue,\n  MarginValue,\n  BorderRadiusValue,\n  TextStyleValue,\n} from '../../prop-controllers/descriptors'\nimport {\n  FallbackStrategy,\n  getBreakpoint,\n  getBreakpointMediaQuery,\n  join as joinResponsiveValues,\n  Breakpoints,\n} from '../../state/modules/breakpoints'\nimport { getIndexes } from './columns'\nimport { PaddingPropertyData, paddingPropertyDataToStyle } from '../../css/padding'\nimport { MarginPropertyData, marginPropertyDataToStyle } from '../../css/margin'\nimport { BorderRadiusPropertyData, borderRadiusPropertyDataToStyle } from '../../css/border-radius'\nimport { BorderPropertyData, borderPropertyDataToStyle } from '../../css/border'\nimport { BorderPropControllerData } from '../hooks/useBorder'\nimport { colorToString } from './colorToString'\nimport { BoxShadowData, BoxShadowPropControllerData } from '../hooks'\nimport { useBreakpoints } from '../../runtimes/react'\nimport { DropFirst } from './drop-first'\n\nexport function responsiveStyle<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>>(\n  breakpoints: Breakpoints,\n  responsiveValues: A,\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n  strategy?: FallbackStrategy<V>,\n): CSSObject {\n  return joinResponsiveValues(breakpoints, responsiveValues, join, strategy).reduce(\n    (acc, { deviceId, value }) => {\n      const breakpoint = getBreakpoint(breakpoints, deviceId)\n      const mediaQuery = getBreakpointMediaQuery(breakpoint)\n\n      return {\n        ...acc,\n        [mediaQuery]: {\n          ...(acc[mediaQuery] as CSSObject),\n          ...value,\n        },\n      }\n    },\n    {} as CSSObject,\n  )\n}\n\nexport function useResponsiveStyle<\n  V,\n  A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>,\n>(\n  responsiveValues: A,\n  join: (values: { [K in keyof A]: ExtractResponsiveValue<A[K]> | undefined }) => CSSObject,\n  strategy?: FallbackStrategy<V>,\n): CSSObject {\n  return responsiveStyle(useBreakpoints(), responsiveValues, join, strategy)\n}\n\nexport function responsiveWidth(\n  breakpoints: Breakpoints,\n  widthData: WidthValue | undefined,\n  defaultValue: LengthValue | WidthProperty<string | number> = '100%',\n): CSSObject {\n  return {\n    maxWidth: '100%',\n    ...responsiveStyle(breakpoints, [widthData], ([width = defaultValue]) => ({\n      width: typeof width === 'object' ? `${width.value}${width.unit}` : width,\n    })),\n  }\n}\n\nexport function useResponsiveWidth(\n  ...args: DropFirst<Parameters<typeof responsiveWidth>>\n): CSSObject {\n  return responsiveWidth(useBreakpoints(), ...args)\n}\n\nexport function responsivePadding(\n  breakpoints: Breakpoints,\n  paddingData: PaddingValue | undefined,\n  defaultValue: PaddingPropertyData = {} as PaddingPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [paddingData], ([padding = {} as PaddingPropertyData]) =>\n    paddingPropertyDataToStyle(\n      padding,\n      Object.assign(\n        { paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0 },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsivePadding(\n  ...args: DropFirst<Parameters<typeof responsivePadding>>\n): CSSObject {\n  return responsivePadding(useBreakpoints(), ...args)\n}\n\nexport function responsiveMargin(\n  breakpoints: Breakpoints,\n  marginData: MarginValue | undefined,\n  defaultValue: MarginPropertyData = {} as MarginPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [marginData], ([margin = {} as MarginPropertyData]) =>\n    marginPropertyDataToStyle(\n      margin,\n      Object.assign(\n        { marginTop: 0, marginRight: 'auto', marginBottom: 0, marginLeft: 'auto' },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsiveMargin(\n  ...args: DropFirst<Parameters<typeof responsiveMargin>>\n): CSSObject {\n  return responsiveMargin(useBreakpoints(), ...args)\n}\n\nexport function responsiveBorderRadius(\n  breakpoints: Breakpoints,\n  borderRadiusData: BorderRadiusValue | undefined,\n  defaultValue: BorderRadiusPropertyData = {} as BorderRadiusPropertyData,\n): CSSObject {\n  return responsiveStyle(breakpoints, [borderRadiusData], ([borderRadius = {}]) =>\n    borderRadiusPropertyDataToStyle(\n      borderRadius,\n      Object.assign(\n        {\n          borderTopLeftRadius: 0,\n          borderTopRightRadius: 0,\n          borderBottomRightRadius: 0,\n          borderBottomLeftRadius: 0,\n        },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nexport function useResponsiveBorderRadius(\n  ...args: DropFirst<Parameters<typeof responsiveBorderRadius>>\n): CSSObject {\n  return responsiveBorderRadius(useBreakpoints(), ...args)\n}\n\nexport function useResponsiveBorder(\n  borderData: BorderPropControllerData | undefined,\n  defaultValue: BorderPropertyData = {},\n): CSSObject {\n  return useResponsiveStyle([borderData], ([border = {}]) =>\n    borderPropertyDataToStyle(\n      border,\n      Object.assign(\n        {\n          borderTop: '0px solid black',\n          borderRight: '0px solid black',\n          borderBottom: '0px solid black',\n          borderLeft: '0px solid black',\n        },\n        defaultValue,\n      ),\n    ),\n  )\n}\n\nconst floor =\n  (d: number) =>\n  (v: number): number =>\n    Math.floor(10 ** d * v) / 10 ** d\n\nexport function responsiveGridItem(\n  breakpoints: Breakpoints,\n  props: {\n    grid: ResponsiveValue<{ spans: number[][]; count: number }>\n    index: number\n    columnGap?: ResponsiveValue<LengthValue>\n    rowGap?: ResponsiveValue<LengthValue>\n  },\n): CSSObject {\n  return {\n    display: 'flex',\n    ...responsiveStyle(\n      breakpoints,\n      [props.grid, props.columnGap, props.rowGap] as const,\n      ([\n        { spans, count } = { spans: [[12]], count: 12 },\n        columnGap = { value: 0, unit: 'px' },\n        rowGap = { value: 0, unit: 'px' },\n      ]) => {\n        const [rowIndex, columnIndex] = getIndexes(spans, props.index)\n        const firstCol = columnIndex === 0\n        const lastCol = columnIndex === spans[rowIndex].length - 1\n        const span = spans[rowIndex][columnIndex]\n        const fraction = floor(5)(span / count)\n        const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`\n        const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${\n          columnGap.unit\n        } / 2`\n        const iePrecisionError = '0.01px'\n        const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`\n        const firstRow = rowIndex === 0\n        const lastRow = rowIndex === spans.length - 1\n\n        return span === 0\n          ? { display: 'none' }\n          : {\n              flexBasis,\n              minWidth: flexBasis,\n              // NOTE: IE11 width breaks without max width\n              // https://github.com/philipwalton/flexbugs/issues/3\n              maxWidth: flexBasis,\n              paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,\n              paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n              paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,\n            }\n      },\n    ),\n  }\n}\n\nexport function useResponsiveGridItem(\n  ...args: DropFirst<Parameters<typeof responsiveGridItem>>\n): CSSObject {\n  return responsiveGridItem(useBreakpoints(), ...args)\n}\n\nconst getBoxShadow = (shadows: BoxShadowData) =>\n  shadows\n    .map(\n      ({ payload: { inset, offsetX, offsetY, blurRadius, spreadRadius, color } }) =>\n        `${inset ? 'inset ' : ''}${offsetX.toFixed(1)}px ${offsetY.toFixed(\n          1,\n        )}px ${blurRadius}px ${spreadRadius}px ${\n          color != null ? colorToString(color) : 'rgba(0,0,0,0.2)'\n        }`,\n    )\n    .filter(Boolean)\n    .join()\n\nexport function responsiveShadow(\n  breakpoints: Breakpoints,\n  value: BoxShadowPropControllerData | undefined,\n): CSSObject {\n  return responsiveStyle(breakpoints, [value], ([shadow = []]) => ({\n    boxShadow: getBoxShadow(shadow),\n  }))\n}\n\nexport function useResponsiveShadow(\n  ...args: DropFirst<Parameters<typeof responsiveShadow>>\n): CSSObject {\n  return responsiveShadow(useBreakpoints(), ...args)\n}\n\nexport function responsiveTextStyle(\n  breakpoints: Breakpoints,\n  value: TextStyleValue | undefined,\n): CSSObject {\n  return responsiveStyle(\n    breakpoints,\n    [value],\n    ([\n      textStyle = {\n        fontFamily: null,\n        letterSpacing: null,\n        fontSize: null,\n        fontWeight: null,\n        textTransform: [],\n        fontStyle: [],\n      },\n    ]) => {\n      const {\n        fontSize,\n        fontWeight,\n        fontStyle = [],\n        textTransform = [],\n        letterSpacing,\n        fontFamily,\n      } = textStyle\n\n      return {\n        ...(fontFamily == null ? {} : { fontFamily: `\"${fontFamily}\"` }),\n        ...(fontWeight == null ? {} : { fontWeight }),\n        ...(letterSpacing == null ? {} : { letterSpacing }),\n        ...(fontSize == null ? {} : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n        ...(textTransform.includes('uppercase') ? { textTransform: 'uppercase' } : {}),\n        ...(fontStyle.includes('italic') ? { fontStyle: 'italic' } : {}),\n      }\n    },\n  )\n}\n\nexport function useResponsiveTextStyle(\n  ...args: DropFirst<Parameters<typeof responsiveTextStyle>>\n): CSSObject {\n  return responsiveTextStyle(useBreakpoints(), ...args)\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/utils/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/components/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/esm/controls/checkbox.js

@@ -0,0 +1,14 @@
+import { ControlDataTypeKey } from "./control-data-type-key";
+const CheckboxControlDataTypeKey = ControlDataTypeKey;
+const CheckboxControlDataTypeValueV1 = "checkbox::v1";
+const CheckboxControlType = "makeswift::controls::checkbox";
+function Checkbox(config = {}) {
+  return { type: CheckboxControlType, config, version: 1 };
+}
+export {
+  Checkbox,
+  CheckboxControlDataTypeKey,
+  CheckboxControlDataTypeValueV1,
+  CheckboxControlType
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/esm/controls/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/controls/checkbox.ts"],"sourcesContent":["import { ControlDataTypeKey } from \"./control-data-type-key\"\n\nexport const CheckboxControlDataTypeKey = ControlDataTypeKey\n\nexport const CheckboxControlDataTypeValueV1 = 'checkbox::v1'\n\nexport type CheckboxControlDataV0 = boolean\n\nexport type CheckboxControlDataV1 = {\n  [CheckboxControlDataTypeKey]: typeof CheckboxControlDataTypeValueV1\n  value: boolean,\n}\n\nexport type CheckboxControlData = CheckboxControlDataV0 | CheckboxControlDataV1\n\nexport const CheckboxControlType = 'makeswift::controls::checkbox'\n\ntype CheckboxControlConfig = {\n  label?: string\n  defaultValue?: boolean\n}\n\nexport type CheckboxControlDefinition<C extends CheckboxControlConfig = CheckboxControlConfig> = {\n  type: typeof CheckboxControlType\n  config: C\n  version?: 1\n}\n\nexport function Checkbox<C extends CheckboxControlConfig>(\n  config: C = {} as C,\n): CheckboxControlDefinition<C> {\n  return { type: CheckboxControlType, config, version: 1 }\n}\n"],"mappings":"AAAA,SAAS,0BAA0B;AAE5B,MAAM,6BAA6B;AAEnC,MAAM,iCAAiC;AAWvC,MAAM,sBAAsB;AAa5B,SAAS,SACd,SAAY,CAAC,GACiB;AAC9B,SAAO,EAAE,MAAM,qBAAqB,QAAQ,SAAS,EAAE;AACzD;","names":[]}

package/dist/esm/controls/color.js

@@ -0,0 +1,27 @@
+import { match } from "ts-pattern";
+import { ControlDataTypeKey } from "./control-data-type-key";
+const ColorControlDataTypeKey = ControlDataTypeKey;
+const ColorControlDataTypeValueV1 = "color::v1";
+const ColorControlType = "makeswift::controls::color";
+function Color(config = {}) {
+  return { type: ColorControlType, config, version: 1 };
+}
+function copyColorData(value, context) {
+  if (value == null)
+    return value;
+  return match(value).with({ [ColorControlDataTypeKey]: ColorControlDataTypeValueV1 }, (val) => ({
+    ...val,
+    swatchId: context.replacementContext.swatchIds.get(val.swatchId) ?? val.swatchId
+  })).otherwise((val) => ({
+    ...val,
+    swatchId: context.replacementContext.swatchIds.get(val.swatchId) ?? val.swatchId
+  }));
+}
+export {
+  Color,
+  ColorControlDataTypeKey,
+  ColorControlDataTypeValueV1,
+  ColorControlType,
+  copyColorData
+};
+//# sourceMappingURL=color.js.map

package/dist/esm/controls/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/controls/color.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport type { CopyContext } from '../state/react-page'\nimport type { ColorData } from './types'\nimport { ControlDataTypeKey } from './control-data-type-key'\n\nexport const ColorControlDataTypeKey = ControlDataTypeKey\n\nexport const ColorControlDataTypeValueV1 = 'color::v1'\n\nexport type ColorControlDataV0 = ColorData\n\nexport type ColorControlDataV1 = ColorControlDataV0 & {\n  [ColorControlDataTypeKey]: typeof ColorControlDataTypeValueV1\n}\n\nexport type ColorControlData = ColorControlDataV0 | ColorControlDataV1\n\nexport const ColorControlType = 'makeswift::controls::color'\n\ntype ColorControlConfig = {\n  label?: string\n  labelOrientation?: 'horizontal' | 'vertical'\n  defaultValue?: string\n  hideAlpha?: boolean\n}\n\nexport type ColorControlDefinition<C extends ColorControlConfig = ColorControlConfig> = {\n  type: typeof ColorControlType\n  config: C\n  version?: 1\n}\n\nexport function Color<C extends ColorControlConfig>(config = {} as C): ColorControlDefinition<C> {\n  return { type: ColorControlType, config, version: 1 }\n}\n\nexport function copyColorData(\n  value: ColorControlData | undefined,\n  context: CopyContext,\n): ColorControlData | undefined {\n  if (value == null) return value\n\n  return match(value)\n    .with({ [ColorControlDataTypeKey]: ColorControlDataTypeValueV1 }, val => ({\n      ...val,\n      swatchId: context.replacementContext.swatchIds.get(val.swatchId) ?? val.swatchId,\n    }))\n    .otherwise(val => ({\n      ...val,\n      swatchId: context.replacementContext.swatchIds.get(val.swatchId) ?? val.swatchId,\n    }))\n}\n"],"mappings":"AAAA,SAAS,aAAa;AAGtB,SAAS,0BAA0B;AAE5B,MAAM,0BAA0B;AAEhC,MAAM,8BAA8B;AAUpC,MAAM,mBAAmB;AAezB,SAAS,MAAoC,SAAS,CAAC,GAAmC;AAC/F,SAAO,EAAE,MAAM,kBAAkB,QAAQ,SAAS,EAAE;AACtD;AAEO,SAAS,cACd,OACA,SAC8B;AAC9B,MAAI,SAAS;AAAM,WAAO;AAE1B,SAAO,MAAM,KAAK,EACf,KAAK,EAAE,CAAC,uBAAuB,GAAG,4BAA4B,GAAG,UAAQ;AAAA,IACxE,GAAG;AAAA,IACH,UAAU,QAAQ,mBAAmB,UAAU,IAAI,IAAI,QAAQ,KAAK,IAAI;AAAA,EAC1E,EAAE,EACD,UAAU,UAAQ;AAAA,IACjB,GAAG;AAAA,IACH,UAAU,QAAQ,mBAAmB,UAAU,IAAI,IAAI,QAAQ,KAAK,IAAI;AAAA,EAC1E,EAAE;AACN;","names":[]}

package/dist/esm/controls/combobox.js

@@ -0,0 +1,9 @@
+const ComboboxControlType = "makeswift::controls::combobox";
+function Combobox(config) {
+  return { type: ComboboxControlType, config };
+}
+export {
+  Combobox,
+  ComboboxControlType
+};
+//# sourceMappingURL=combobox.js.map

package/dist/esm/controls/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/controls/combobox.ts"],"sourcesContent":["import { Data } from './types'\n\nexport const ComboboxControlType = 'makeswift::controls::combobox'\n\ntype ComboboxControlOption<T extends Data> = { id: string; label: string; value: T }\n\ntype ComboboxControlConfig<T extends Data = Data> = {\n  label?: string\n  getOptions(query: string): ComboboxControlOption<T>[] | Promise<ComboboxControlOption<T>[]>\n}\n\nexport type ComboboxControlDefinition<C extends ComboboxControlConfig = ComboboxControlConfig> = {\n  type: typeof ComboboxControlType\n  config: C\n}\n\nexport type ComboboxControlDefinitionOption<T extends ComboboxControlDefinition> =\n  T['config'] extends ComboboxControlConfig<infer U> ? U : never\n\nexport type ComboboxControlData<T extends ComboboxControlDefinition = ComboboxControlDefinition> =\n  ComboboxControlOption<ComboboxControlDefinitionOption<T>>\n\nexport function Combobox<T extends Data, C extends ComboboxControlConfig<T>>(\n  config: C & {\n    getOptions(query: string): ComboboxControlOption<T>[] | Promise<ComboboxControlOption<T>[]>\n  },\n): ComboboxControlDefinition<C> {\n  return { type: ComboboxControlType, config }\n}\n"],"mappings":"AAEO,MAAM,sBAAsB;AAoB5B,SAAS,SACd,QAG8B;AAC9B,SAAO,EAAE,MAAM,qBAAqB,OAAO;AAC7C;","names":[]}

package/dist/esm/controls/control-data-type-key.js

@@ -0,0 +1,5 @@
+const ControlDataTypeKey = "@@makeswift/type";
+export {
+  ControlDataTypeKey
+};
+//# sourceMappingURL=control-data-type-key.js.map

package/dist/esm/controls/control-data-type-key.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/controls/control-data-type-key.ts"],"sourcesContent":["export const ControlDataTypeKey = '@@makeswift/type'\n"],"mappings":"AAAO,MAAM,qBAAqB;","names":[]}