@makeswift/runtime 0.13.1 → 0.14.0

package/dist/cjs/components/builtin/index.js

@@ -0,0 +1,81 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var builtin_exports = {};
+__export(builtin_exports, {
+  Box: () => import_Box.default,
+  Button: () => import_Button.default,
+  Carousel: () => import_Carousel.default,
+  Countdown: () => import_Countdown.default,
+  Divider: () => import_Divider.default,
+  Embed: () => import_Embed.default,
+  Form: () => import_Form.default,
+  Image: () => import_Image.default,
+  MakeswiftComponentType: () => import_constants.MakeswiftComponentType,
+  Navigation: () => import_Navigation.default,
+  Root: () => import_Root.default,
+  SocialLinks: () => import_SocialLinks.default,
+  Text: () => import_Text.default,
+  Video: () => import_Video.default
+});
+module.exports = __toCommonJS(builtin_exports);
+__reExport(builtin_exports, require("./Box"), module.exports);
+var import_Box = __toESM(require("./Box"));
+var import_Button = __toESM(require("./Button"));
+var import_Carousel = __toESM(require("./Carousel"));
+var import_Countdown = __toESM(require("./Countdown"));
+var import_Divider = __toESM(require("./Divider"));
+var import_Embed = __toESM(require("./Embed"));
+var import_Form = __toESM(require("./Form"));
+var import_Image = __toESM(require("./Image"));
+var import_Navigation = __toESM(require("./Navigation"));
+var import_Root = __toESM(require("./Root"));
+var import_SocialLinks = __toESM(require("./SocialLinks"));
+var import_Text = __toESM(require("./Text"));
+var import_Video = __toESM(require("./Video"));
+var import_constants = require("./constants");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  Button,
+  Carousel,
+  Countdown,
+  Divider,
+  Embed,
+  Form,
+  Image,
+  MakeswiftComponentType,
+  Navigation,
+  Root,
+  SocialLinks,
+  Text,
+  Video,
+  ...require("./Box")
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/builtin/index.ts"],"sourcesContent":["export * from './Box'\nexport { default as Box } from './Box'\nexport { default as Button } from './Button'\nexport { default as Carousel } from './Carousel'\nexport { default as Countdown } from './Countdown'\nexport { default as Divider } from './Divider'\nexport { default as Embed } from './Embed'\nexport { default as Form } from './Form'\nexport { default as Image } from './Image'\nexport { default as Navigation } from './Navigation'\nexport { default as Root } from './Root'\nexport { default as SocialLinks } from './SocialLinks'\nexport { default as Text } from './Text'\nexport { default as Video } from './Video'\n\nexport { MakeswiftComponentType } from './constants'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAc,kBAAd;AACA,iBAA+B;AAC/B,oBAAkC;AAClC,sBAAoC;AACpC,uBAAqC;AACrC,qBAAmC;AACnC,mBAAiC;AACjC,kBAAgC;AAChC,mBAAiC;AACjC,wBAAsC;AACtC,kBAAgC;AAChC,yBAAuC;AACvC,kBAAgC;AAChC,mBAAiC;AAEjC,uBAAuC;","names":[]}

package/dist/cjs/components/builtin/register.js

@@ -0,0 +1,71 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var register_exports = {};
+__export(register_exports, {
+  registerBuiltinComponents: () => registerBuiltinComponents
+});
+module.exports = __toCommonJS(register_exports);
+var import_register = require("./Box/register");
+var import_register2 = require("./Button/register");
+var import_register3 = require("./Carousel/register");
+var import_register4 = require("./Countdown/register");
+var import_register5 = require("./Divider/register");
+var import_register6 = require("./Embed/register");
+var import_register7 = require("./Form/register");
+var import_register8 = require("./Image/register");
+var import_register9 = require("./Navigation/register");
+var import_register10 = require("./Root/register");
+var import_register11 = require("./SocialLinks/register");
+var import_register12 = require("./Text/register");
+var import_register13 = require("./Video/register");
+function registerBuiltinComponents(runtime) {
+  const unregisterBoxComponent = (0, import_register.registerComponent)(runtime);
+  const unregisterButtonComponent = (0, import_register2.registerComponent)(runtime);
+  const unregisterCarouselComponent = (0, import_register3.registerComponent)(runtime);
+  const unregisterCountdownComponent = (0, import_register4.registerComponent)(runtime);
+  const unregisterDividerComponent = (0, import_register5.registerComponent)(runtime);
+  const unregisterEmbedComponent = (0, import_register6.registerComponent)(runtime);
+  const unregisterFormComponent = (0, import_register7.registerComponent)(runtime);
+  const unregisterImageComponent = (0, import_register8.registerComponent)(runtime);
+  const unregisterNavigationComponent = (0, import_register9.registerComponent)(runtime);
+  const unregisterRootComponent = (0, import_register10.registerComponent)(runtime);
+  const unregisterSocialLinksComponent = (0, import_register11.registerComponent)(runtime);
+  const unregisterTextComponent = (0, import_register12.registerComponent)(runtime);
+  const unregisterVideoComponent = (0, import_register13.registerComponent)(runtime);
+  return () => {
+    unregisterBoxComponent();
+    unregisterButtonComponent();
+    unregisterCarouselComponent();
+    unregisterCountdownComponent();
+    unregisterDividerComponent();
+    unregisterEmbedComponent();
+    unregisterFormComponent();
+    unregisterImageComponent();
+    unregisterNavigationComponent();
+    unregisterRootComponent();
+    unregisterSocialLinksComponent();
+    unregisterTextComponent();
+    unregisterVideoComponent();
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerBuiltinComponents
+});
+//# sourceMappingURL=register.js.map

package/dist/cjs/components/builtin/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/builtin/register.ts"],"sourcesContent":["import { ReactRuntime } from '../../runtimes/react'\nimport { registerComponent as registerBoxComponent } from './Box/register'\nimport { registerComponent as registerButtonComponent } from './Button/register'\nimport { registerComponent as registerCarouselComponent } from './Carousel/register'\nimport { registerComponent as registerCountdownComponent } from './Countdown/register'\nimport { registerComponent as registerDividerComponent } from './Divider/register'\nimport { registerComponent as registerEmbedComponent } from './Embed/register'\nimport { registerComponent as registerFormComponent } from './Form/register'\nimport { registerComponent as registerImageComponent } from './Image/register'\nimport { registerComponent as registerNavigationComponent } from './Navigation/register'\nimport { registerComponent as registerRootComponent } from './Root/register'\nimport { registerComponent as registerSocialLinksComponent } from './SocialLinks/register'\nimport { registerComponent as registerTextComponent } from './Text/register'\nimport { registerComponent as registerVideoComponent } from './Video/register'\n\nexport function registerBuiltinComponents(runtime: ReactRuntime) {\n  const unregisterBoxComponent = registerBoxComponent(runtime)\n  const unregisterButtonComponent = registerButtonComponent(runtime)\n  const unregisterCarouselComponent = registerCarouselComponent(runtime)\n  const unregisterCountdownComponent = registerCountdownComponent(runtime)\n  const unregisterDividerComponent = registerDividerComponent(runtime)\n  const unregisterEmbedComponent = registerEmbedComponent(runtime)\n  const unregisterFormComponent = registerFormComponent(runtime)\n  const unregisterImageComponent = registerImageComponent(runtime)\n  const unregisterNavigationComponent = registerNavigationComponent(runtime)\n  const unregisterRootComponent = registerRootComponent(runtime)\n  const unregisterSocialLinksComponent = registerSocialLinksComponent(runtime)\n  const unregisterTextComponent = registerTextComponent(runtime)\n  const unregisterVideoComponent = registerVideoComponent(runtime)\n\n  return () => {\n    unregisterBoxComponent()\n    unregisterButtonComponent()\n    unregisterCarouselComponent()\n    unregisterCountdownComponent()\n    unregisterDividerComponent()\n    unregisterEmbedComponent()\n    unregisterFormComponent()\n    unregisterImageComponent()\n    unregisterNavigationComponent()\n    unregisterRootComponent()\n    unregisterSocialLinksComponent()\n    unregisterTextComponent()\n    unregisterVideoComponent()\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAA0D;AAC1D,IAAAA,mBAA6D;AAC7D,IAAAA,mBAA+D;AAC/D,IAAAA,mBAAgE;AAChE,IAAAA,mBAA8D;AAC9D,IAAAA,mBAA4D;AAC5D,IAAAA,mBAA2D;AAC3D,IAAAA,mBAA4D;AAC5D,IAAAA,mBAAiE;AACjE,IAAAA,oBAA2D;AAC3D,IAAAA,oBAAkE;AAClE,IAAAA,oBAA2D;AAC3D,IAAAA,oBAA4D;AAErD,SAAS,0BAA0B,SAAuB;AAC/D,QAAM,6BAAyB,gBAAAC,mBAAqB,OAAO;AAC3D,QAAM,gCAA4B,iBAAAC,mBAAwB,OAAO;AACjE,QAAM,kCAA8B,iBAAAC,mBAA0B,OAAO;AACrE,QAAM,mCAA+B,iBAAAC,mBAA2B,OAAO;AACvE,QAAM,iCAA6B,iBAAAC,mBAAyB,OAAO;AACnE,QAAM,+BAA2B,iBAAAC,mBAAuB,OAAO;AAC/D,QAAM,8BAA0B,iBAAAC,mBAAsB,OAAO;AAC7D,QAAM,+BAA2B,iBAAAC,mBAAuB,OAAO;AAC/D,QAAM,oCAAgC,iBAAAC,mBAA4B,OAAO;AACzE,QAAM,8BAA0B,kBAAAC,mBAAsB,OAAO;AAC7D,QAAM,qCAAiC,kBAAAC,mBAA6B,OAAO;AAC3E,QAAM,8BAA0B,kBAAAC,mBAAsB,OAAO;AAC7D,QAAM,+BAA2B,kBAAAC,mBAAuB,OAAO;AAE/D,SAAO,MAAM;AACX,2BAAuB;AACvB,8BAA0B;AAC1B,gCAA4B;AAC5B,iCAA6B;AAC7B,+BAA2B;AAC3B,6BAAyB;AACzB,4BAAwB;AACxB,6BAAyB;AACzB,kCAA8B;AAC9B,4BAAwB;AACxB,mCAA+B;AAC/B,4BAAwB;AACxB,6BAAyB;AAAA,EAC3B;AACF;","names":["import_register","registerBoxComponent","registerButtonComponent","registerCarouselComponent","registerCountdownComponent","registerDividerComponent","registerEmbedComponent","registerFormComponent","registerImageComponent","registerNavigationComponent","registerRootComponent","registerSocialLinksComponent","registerTextComponent","registerVideoComponent"]}

package/dist/cjs/components/hooks/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+module.exports = __toCommonJS(hooks_exports);
+__reExport(hooks_exports, require("./useBackgrounds"), module.exports);
+__reExport(hooks_exports, require("./useBorder"), module.exports);
+__reExport(hooks_exports, require("./useBoxShadow"), module.exports);
+__reExport(hooks_exports, require("./useResponsiveColor"), module.exports);
+__reExport(hooks_exports, require("./useMediaQuery"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./useBackgrounds"),
+  ...require("./useBorder"),
+  ...require("./useBoxShadow"),
+  ...require("./useResponsiveColor"),
+  ...require("./useMediaQuery")
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/index.ts"],"sourcesContent":["export * from './useBackgrounds'\nexport * from './useBorder'\nexport * from './useBoxShadow'\nexport * from './useResponsiveColor'\nexport * from './useMediaQuery'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,6BAAd;AACA,0BAAc,wBADd;AAEA,0BAAc,2BAFd;AAGA,0BAAc,iCAHd;AAIA,0BAAc,4BAJd;","names":[]}

package/dist/cjs/components/hooks/useBackgrounds.js

@@ -0,0 +1,137 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBackgrounds_exports = {};
+__export(useBackgrounds_exports, {
+  useBackgrounds: () => useBackgrounds
+});
+module.exports = __toCommonJS(useBackgrounds_exports);
+var import_react = require("react");
+var import_isNonNullable = require("../utils/isNonNullable");
+var import_makeswift_api = require("../../runtimes/react/hooks/makeswift-api");
+var import_introspection = require("../../prop-controllers/introspection");
+var import_ts_pattern = require("ts-pattern");
+function useBackgrounds(value) {
+  const fileIds = (0, import_introspection.getBackgroundsFileIds)(value);
+  const files = (0, import_makeswift_api.useFiles)(fileIds);
+  const swatchIds = (0, import_introspection.getBackgroundsSwatchIds)(value);
+  const swatches = (0, import_makeswift_api.useSwatches)(swatchIds);
+  return (0, import_react.useMemo)(() => {
+    if (value == null)
+      return null;
+    return value.map(({ value: backgrounds, ...restOfValue }) => ({
+      ...restOfValue,
+      value: backgrounds.map((bg) => {
+        if (bg.type === "image" && bg.payload != null) {
+          const { imageId, ...restOfPayload } = bg.payload;
+          const file = files.find((f) => f && f.id === imageId);
+          return file && {
+            ...bg,
+            payload: {
+              ...restOfPayload,
+              publicUrl: file.publicUrl,
+              dimensions: file.dimensions
+            }
+          };
+        }
+        if (bg.type === "image-v1" && bg.payload != null) {
+          return (0, import_ts_pattern.match)(bg).with(
+            {
+              payload: { image: { type: "external-file", width: import_ts_pattern.P.number, height: import_ts_pattern.P.number } }
+            },
+            (val) => {
+              const { image, version, ...restOfPayload } = val.payload;
+              return {
+                ...val,
+                type: "image",
+                payload: {
+                  ...restOfPayload,
+                  publicUrl: image.url,
+                  dimensions: { width: image.width, height: image.height }
+                }
+              };
+            }
+          ).with({ payload: { image: { type: "external-file" } } }, (val) => {
+            const { image, version, ...restOfPayload } = val.payload;
+            return {
+              ...val,
+              type: "image",
+              payload: {
+                ...restOfPayload,
+                publicUrl: image.url,
+                dimensions: null
+              }
+            };
+          }).with({ payload: { image: { type: "makeswift-file" } } }, (val) => {
+            const { image, version, ...restOfPayload } = val.payload;
+            const file = files.find((f) => f && f.id === image.id);
+            return file && {
+              ...val,
+              type: "image",
+              payload: {
+                ...restOfPayload,
+                publicUrl: file.publicUrl,
+                dimensions: file.dimensions
+              }
+            };
+          }).otherwise(() => null);
+        }
+        if (bg.type === "color" && bg.payload != null) {
+          const { swatchId, alpha } = bg.payload;
+          const swatch = swatches.filter(import_isNonNullable.isNonNullable).find((s) => s && s.id === swatchId);
+          return { id: bg.id, type: "color", payload: { swatch, alpha } };
+        }
+        if (bg.type === "gradient" && bg.payload != null && bg.payload.stops.length > 0) {
+          return {
+            id: bg.id,
+            type: "gradient",
+            payload: {
+              angle: bg.payload.angle,
+              isRadial: bg.payload.isRadial,
+              stops: bg.payload.stops.map(({ color, ...restOfStop }) => ({
+                ...restOfStop,
+                color: color && {
+                  swatch: swatches.filter(import_isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId),
+                  alpha: color.alpha
+                }
+              }))
+            }
+          };
+        }
+        if (bg.type === "video" && bg.payload != null) {
+          const { maskColor, ...restOfPayload } = bg.payload;
+          const swatch = maskColor && swatches.find((s) => s && s.id === maskColor.swatchId);
+          return {
+            id: bg.id,
+            type: "video",
+            payload: {
+              ...restOfPayload,
+              maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha }
+            }
+          };
+        }
+        return null;
+      }).filter(import_isNonNullable.isNonNullable)
+    }));
+  }, [files, swatches, value]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBackgrounds
+});
+//# sourceMappingURL=useBackgrounds.js.map

package/dist/cjs/components/hooks/useBackgrounds.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/useBackgrounds.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nimport { ColorValue as Color } from '../utils/types'\nimport { ResponsiveValue } from '../../prop-controllers'\nimport { isNonNullable } from '../utils/isNonNullable'\nimport { BackgroundsValue as ResponsiveBackgroundsValue } from '../../prop-controllers/descriptors'\nimport { useFiles, useSwatches } from '../../runtimes/react/hooks/makeswift-api'\nimport {\n  getBackgroundsFileIds,\n  getBackgroundsSwatchIds,\n} from '../../prop-controllers/introspection'\nimport { match, P } from 'ts-pattern'\n\ntype BackgroundColorData = Color\n\ntype BackgroundGradientStopData = {\n  id: string\n  location: number\n  color: Color | null | undefined\n}\n\ntype BackgroundGradientData = {\n  angle?: number\n  isRadial?: boolean\n  stops: Array<BackgroundGradientStopData>\n}\n\ntype BackgroundImageData = {\n  publicUrl?: string\n  dimensions?: { width: number; height: number } | null\n  position: {\n    x: number\n    y: number\n  }\n  size?: 'cover' | 'contain' | 'auto'\n  repeat?: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'\n  opacity?: number\n  parallax?: number\n}\n\ntype BackgroundVideoData = {\n  url?: string\n  maskColor: Color | null | undefined\n  aspectRatio?: 'wide' | 'standard'\n  opacity?: number\n  zoom?: number\n  parallax?: number\n}\n\ntype BackgroundData =\n  | { id: string; type: 'color'; payload: BackgroundColorData | null | undefined }\n  | { id: string; type: 'image'; payload: BackgroundImageData | null | undefined }\n  | { id: string; type: 'gradient'; payload: BackgroundGradientData | null | undefined }\n  | { id: string; type: 'video'; payload: BackgroundVideoData | null | undefined }\n\nexport type BackgroundsData = Array<BackgroundData>\n\nexport type BackgroundsPropControllerData = ResponsiveValue<BackgroundsData>\n\nexport function useBackgrounds(\n  value: ResponsiveBackgroundsValue | null | undefined,\n): BackgroundsPropControllerData | null | undefined {\n  const fileIds = getBackgroundsFileIds(value)\n  const files = useFiles(fileIds)\n  const swatchIds = getBackgroundsSwatchIds(value)\n  const swatches = useSwatches(swatchIds)\n\n  return useMemo(() => {\n    if (value == null) return null\n\n    return value.map(({ value: backgrounds, ...restOfValue }) => ({\n      ...restOfValue,\n      value: backgrounds\n        .map((bg): BackgroundData | null | undefined => {\n          if (bg.type === 'image' && bg.payload != null) {\n            const { imageId, ...restOfPayload } = bg.payload\n            const file = files.find(f => f && f.id === imageId)\n            return (\n              file && {\n                ...bg,\n                payload: {\n                  ...restOfPayload,\n                  publicUrl: file.publicUrl,\n                  dimensions: file.dimensions,\n                },\n              }\n            )\n          }\n          \n          if (bg.type === 'image-v1' && bg.payload != null) {\n            return match(bg)\n              .with(\n                {\n                  payload: { image: { type: 'external-file', width: P.number, height: P.number } },\n                },\n                val => {\n                  const { image, version, ...restOfPayload } = val.payload\n                  return {\n                    ...val,\n                    type: 'image' as const,\n                    payload: {\n                      ...restOfPayload,\n                      publicUrl: image.url,\n                      dimensions: { width: image.width, height: image.height },\n                    },\n                  }\n                },\n              )\n              .with({ payload: { image: { type: 'external-file' } } }, val => {\n                const { image, version, ...restOfPayload } = val.payload\n                return {\n                  ...val,\n                  type: 'image' as const,\n                  payload: {\n                    ...restOfPayload,\n                    publicUrl: image.url,\n                    dimensions: null,\n                  },\n                }\n              })\n              .with({ payload: { image: { type: 'makeswift-file' } } }, val => {\n                const { image, version, ...restOfPayload } = val.payload\n                const file = files.find(f => f && f.id === image.id)\n                return (\n                  file && {\n                    ...val,\n                    type: 'image' as const,\n                    payload: {\n                      ...restOfPayload,\n                      publicUrl: file.publicUrl,\n                      dimensions: file.dimensions,\n                    },\n                  }\n                )\n              })\n              .otherwise(() => null)\n          }\n\n          if (bg.type === 'color' && bg.payload != null) {\n            const { swatchId, alpha } = bg.payload\n            const swatch = swatches.filter(isNonNullable).find(s => s && s.id === swatchId)\n\n            return { id: bg.id, type: 'color', payload: { swatch, alpha } }\n          }\n\n          if (bg.type === 'gradient' && bg.payload != null && bg.payload.stops.length > 0) {\n            return {\n              id: bg.id,\n              type: 'gradient',\n              payload: {\n                angle: bg.payload.angle,\n                isRadial: bg.payload.isRadial,\n                stops: bg.payload.stops.map(({ color, ...restOfStop }) => ({\n                  ...restOfStop,\n                  color: color && {\n                    swatch: swatches.filter(isNonNullable).find(s => s && s.id === color.swatchId),\n                    alpha: color.alpha,\n                  },\n                })),\n              },\n            }\n          }\n\n          if (bg.type === 'video' && bg.payload != null) {\n            const { maskColor, ...restOfPayload } = bg.payload\n            const swatch = maskColor && swatches.find(s => s && s.id === maskColor.swatchId)\n\n            return {\n              id: bg.id,\n              type: 'video',\n              payload: {\n                ...restOfPayload,\n                maskColor: swatch && maskColor && { swatch, alpha: maskColor.alpha },\n              },\n            }\n          }\n\n          return null\n        })\n        .filter(isNonNullable),\n    }))\n  }, [files, swatches, value])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AAIxB,2BAA8B;AAE9B,2BAAsC;AACtC,2BAGO;AACP,wBAAyB;AAgDlB,SAAS,eACd,OACkD;AAClD,QAAM,cAAU,4CAAsB,KAAK;AAC3C,QAAM,YAAQ,+BAAS,OAAO;AAC9B,QAAM,gBAAY,8CAAwB,KAAK;AAC/C,QAAM,eAAW,kCAAY,SAAS;AAEtC,aAAO,sBAAQ,MAAM;AACnB,QAAI,SAAS;AAAM,aAAO;AAE1B,WAAO,MAAM,IAAI,CAAC,EAAE,OAAO,aAAa,GAAG,YAAY,OAAO;AAAA,MAC5D,GAAG;AAAA,MACH,OAAO,YACJ,IAAI,CAAC,OAA0C;AAC9C,YAAI,GAAG,SAAS,WAAW,GAAG,WAAW,MAAM;AAC7C,gBAAM,EAAE,SAAS,GAAG,cAAc,IAAI,GAAG;AACzC,gBAAM,OAAO,MAAM,KAAK,OAAK,KAAK,EAAE,OAAO,OAAO;AAClD,iBACE,QAAQ;AAAA,YACN,GAAG;AAAA,YACH,SAAS;AAAA,cACP,GAAG;AAAA,cACH,WAAW,KAAK;AAAA,cAChB,YAAY,KAAK;AAAA,YACnB;AAAA,UACF;AAAA,QAEJ;AAEA,YAAI,GAAG,SAAS,cAAc,GAAG,WAAW,MAAM;AAChD,qBAAO,yBAAM,EAAE,EACZ;AAAA,YACC;AAAA,cACE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,OAAO,oBAAE,QAAQ,QAAQ,oBAAE,OAAO,EAAE;AAAA,YACjF;AAAA,YACA,SAAO;AACL,oBAAM,EAAE,OAAO,SAAS,GAAG,cAAc,IAAI,IAAI;AACjD,qBAAO;AAAA,gBACL,GAAG;AAAA,gBACH,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,GAAG;AAAA,kBACH,WAAW,MAAM;AAAA,kBACjB,YAAY,EAAE,OAAO,MAAM,OAAO,QAAQ,MAAM,OAAO;AAAA,gBACzD;AAAA,cACF;AAAA,YACF;AAAA,UACF,EACC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gBAAgB,EAAE,EAAE,GAAG,SAAO;AAC9D,kBAAM,EAAE,OAAO,SAAS,GAAG,cAAc,IAAI,IAAI;AACjD,mBAAO;AAAA,cACL,GAAG;AAAA,cACH,MAAM;AAAA,cACN,SAAS;AAAA,gBACP,GAAG;AAAA,gBACH,WAAW,MAAM;AAAA,gBACjB,YAAY;AAAA,cACd;AAAA,YACF;AAAA,UACF,CAAC,EACA,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,iBAAiB,EAAE,EAAE,GAAG,SAAO;AAC/D,kBAAM,EAAE,OAAO,SAAS,GAAG,cAAc,IAAI,IAAI;AACjD,kBAAM,OAAO,MAAM,KAAK,OAAK,KAAK,EAAE,OAAO,MAAM,EAAE;AACnD,mBACE,QAAQ;AAAA,cACN,GAAG;AAAA,cACH,MAAM;AAAA,cACN,SAAS;AAAA,gBACP,GAAG;AAAA,gBACH,WAAW,KAAK;AAAA,gBAChB,YAAY,KAAK;AAAA,cACnB;AAAA,YACF;AAAA,UAEJ,CAAC,EACA,UAAU,MAAM,IAAI;AAAA,QACzB;AAEA,YAAI,GAAG,SAAS,WAAW,GAAG,WAAW,MAAM;AAC7C,gBAAM,EAAE,UAAU,MAAM,IAAI,GAAG;AAC/B,gBAAM,SAAS,SAAS,OAAO,kCAAa,EAAE,KAAK,OAAK,KAAK,EAAE,OAAO,QAAQ;AAE9E,iBAAO,EAAE,IAAI,GAAG,IAAI,MAAM,SAAS,SAAS,EAAE,QAAQ,MAAM,EAAE;AAAA,QAChE;AAEA,YAAI,GAAG,SAAS,cAAc,GAAG,WAAW,QAAQ,GAAG,QAAQ,MAAM,SAAS,GAAG;AAC/E,iBAAO;AAAA,YACL,IAAI,GAAG;AAAA,YACP,MAAM;AAAA,YACN,SAAS;AAAA,cACP,OAAO,GAAG,QAAQ;AAAA,cAClB,UAAU,GAAG,QAAQ;AAAA,cACrB,OAAO,GAAG,QAAQ,MAAM,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,OAAO;AAAA,gBACzD,GAAG;AAAA,gBACH,OAAO,SAAS;AAAA,kBACd,QAAQ,SAAS,OAAO,kCAAa,EAAE,KAAK,OAAK,KAAK,EAAE,OAAO,MAAM,QAAQ;AAAA,kBAC7E,OAAO,MAAM;AAAA,gBACf;AAAA,cACF,EAAE;AAAA,YACJ;AAAA,UACF;AAAA,QACF;AAEA,YAAI,GAAG,SAAS,WAAW,GAAG,WAAW,MAAM;AAC7C,gBAAM,EAAE,WAAW,GAAG,cAAc,IAAI,GAAG;AAC3C,gBAAM,SAAS,aAAa,SAAS,KAAK,OAAK,KAAK,EAAE,OAAO,UAAU,QAAQ;AAE/E,iBAAO;AAAA,YACL,IAAI,GAAG;AAAA,YACP,MAAM;AAAA,YACN,SAAS;AAAA,cACP,GAAG;AAAA,cACH,WAAW,UAAU,aAAa,EAAE,QAAQ,OAAO,UAAU,MAAM;AAAA,YACrE;AAAA,UACF;AAAA,QACF;AAEA,eAAO;AAAA,MACT,CAAC,EACA,OAAO,kCAAa;AAAA,IACzB,EAAE;AAAA,EACJ,GAAG,CAAC,OAAO,UAAU,KAAK,CAAC;AAC7B;","names":[]}

package/dist/cjs/components/hooks/useBorder.js

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBorder_exports = {};
+__export(useBorder_exports, {
+  useBorder: () => useBorder
+});
+module.exports = __toCommonJS(useBorder_exports);
+var import_introspection = require("../../prop-controllers/introspection");
+var import_makeswift_api = require("../../runtimes/react/hooks/makeswift-api");
+var import_isNonNullable = require("../utils/isNonNullable");
+function mapSideColor(swatches, { color, ...restOfSide }) {
+  return {
+    ...restOfSide,
+    color: color && {
+      alpha: color.alpha,
+      swatch: swatches.filter(import_isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId)
+    }
+  };
+}
+function useBorder(value) {
+  const swatchIds = (0, import_introspection.getBorderSwatchIds)(value);
+  const swatches = (0, import_makeswift_api.useSwatches)(swatchIds);
+  if (value == null)
+    return null;
+  return value.map(({ value: { borderTop, borderBottom, borderLeft, borderRight }, ...rest }) => ({
+    ...rest,
+    value: {
+      borderTop: borderTop && mapSideColor(swatches, borderTop),
+      borderBottom: borderBottom && mapSideColor(swatches, borderBottom),
+      borderLeft: borderLeft && mapSideColor(swatches, borderLeft),
+      borderRight: borderRight && mapSideColor(swatches, borderRight)
+    }
+  }));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBorder
+});
+//# sourceMappingURL=useBorder.js.map

package/dist/cjs/components/hooks/useBorder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/useBorder.ts"],"sourcesContent":["import { BorderStyleProperty } from 'csstype'\n\nimport type { ColorValue as Color } from '../utils/types'\nimport { ResponsiveValue } from '../../prop-controllers'\nimport {\n  BorderValue as ResponsiveBorderValue,\n  BorderSide as BorderValueSide,\n} from '../../prop-controllers/descriptors'\nimport { getBorderSwatchIds } from '../../prop-controllers/introspection'\nimport { useSwatches } from '../../runtimes/react/hooks/makeswift-api'\nimport { Swatch } from '../../api'\nimport { isNonNullable } from '../utils/isNonNullable'\n\nfunction mapSideColor(swatches: (Swatch | null)[], { color, ...restOfSide }: BorderValueSide) {\n  return {\n    ...restOfSide,\n    color: color && {\n      alpha: color.alpha,\n      swatch: swatches.filter(isNonNullable).find(s => s && s.id === color.swatchId),\n    },\n  }\n}\n\nexport type BorderSide = {\n  width: number | null | undefined\n  style: BorderStyleProperty\n  color: Color | null | undefined\n}\n\ntype BorderData = {\n  borderTop: BorderSide | null | undefined\n  borderRight: BorderSide | null | undefined\n  borderBottom: BorderSide | null | undefined\n  borderLeft: BorderSide | null | undefined\n}\n\nexport type BorderPropControllerData = ResponsiveValue<BorderData>\n\nexport function useBorder(\n  value: ResponsiveBorderValue | null | undefined,\n): BorderPropControllerData | null | undefined {\n  const swatchIds = getBorderSwatchIds(value)\n  const swatches = useSwatches(swatchIds)\n\n  if (value == null) return null\n\n  return value.map(({ value: { borderTop, borderBottom, borderLeft, borderRight }, ...rest }) => ({\n    ...rest,\n    value: {\n      borderTop: borderTop && mapSideColor(swatches, borderTop),\n      borderBottom: borderBottom && mapSideColor(swatches, borderBottom),\n      borderLeft: borderLeft && mapSideColor(swatches, borderLeft),\n      borderRight: borderRight && mapSideColor(swatches, borderRight),\n    },\n  }))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,2BAAmC;AACnC,2BAA4B;AAE5B,2BAA8B;AAE9B,SAAS,aAAa,UAA6B,EAAE,OAAO,GAAG,WAAW,GAAoB;AAC5F,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,MACd,OAAO,MAAM;AAAA,MACb,QAAQ,SAAS,OAAO,kCAAa,EAAE,KAAK,OAAK,KAAK,EAAE,OAAO,MAAM,QAAQ;AAAA,IAC/E;AAAA,EACF;AACF;AAiBO,SAAS,UACd,OAC6C;AAC7C,QAAM,gBAAY,yCAAmB,KAAK;AAC1C,QAAM,eAAW,kCAAY,SAAS;AAEtC,MAAI,SAAS;AAAM,WAAO;AAE1B,SAAO,MAAM,IAAI,CAAC,EAAE,OAAO,EAAE,WAAW,cAAc,YAAY,YAAY,GAAG,GAAG,KAAK,OAAO;AAAA,IAC9F,GAAG;AAAA,IACH,OAAO;AAAA,MACL,WAAW,aAAa,aAAa,UAAU,SAAS;AAAA,MACxD,cAAc,gBAAgB,aAAa,UAAU,YAAY;AAAA,MACjE,YAAY,cAAc,aAAa,UAAU,UAAU;AAAA,MAC3D,aAAa,eAAe,aAAa,UAAU,WAAW;AAAA,IAChE;AAAA,EACF,EAAE;AACJ;","names":[]}

package/dist/cjs/components/hooks/useBoxShadow.js

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBoxShadow_exports = {};
+__export(useBoxShadow_exports, {
+  useBoxShadow: () => useBoxShadow
+});
+module.exports = __toCommonJS(useBoxShadow_exports);
+var import_isNonNullable = require("../utils/isNonNullable");
+var import_introspection = require("../../prop-controllers/introspection");
+var import_makeswift_api = require("../../runtimes/react/hooks/makeswift-api");
+const ShadowDefaultValue = {
+  inset: false,
+  offsetX: 0,
+  offsetY: 2,
+  blurRadius: 4,
+  spreadRadius: 0,
+  color: null
+};
+function useBoxShadow(value) {
+  const swatchIds = (0, import_introspection.getBoxShadowsSwatchIds)(value);
+  const swatches = (0, import_makeswift_api.useSwatches)(swatchIds);
+  if (value == null)
+    return null;
+  return value.map(({ value: shadows, ...restOfValue }) => ({
+    ...restOfValue,
+    value: shadows.map(
+      ({
+        payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius },
+        ...restOfShadow
+      }) => ({
+        ...restOfShadow,
+        payload: {
+          color: color != null ? {
+            swatch: swatches.filter(import_isNonNullable.isNonNullable).find((s) => s && s.id === color.swatchId),
+            alpha: color.alpha
+          } : null,
+          inset: inset ?? ShadowDefaultValue.inset,
+          offsetX: offsetX ?? ShadowDefaultValue.offsetX,
+          offsetY: offsetY ?? ShadowDefaultValue.offsetY,
+          blurRadius: blurRadius ?? ShadowDefaultValue.blurRadius,
+          spreadRadius: spreadRadius ?? ShadowDefaultValue.spreadRadius
+        }
+      })
+    )
+  }));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBoxShadow
+});
+//# sourceMappingURL=useBoxShadow.js.map

package/dist/cjs/components/hooks/useBoxShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/useBoxShadow.ts"],"sourcesContent":["import { isNonNullable } from '../utils/isNonNullable'\nimport type { ColorValue as Color } from '../utils/types'\nimport type { ResponsiveValue } from '../../prop-controllers'\nimport type { ShadowsValue as ResponsiveShadowsValue } from '../../prop-controllers/descriptors'\nimport { getBoxShadowsSwatchIds } from '../../prop-controllers/introspection'\nimport { useSwatches } from '../../runtimes/react/hooks/makeswift-api'\n\ntype ShadowData = {\n  id: string\n  payload: {\n    inset: boolean\n    offsetX: number\n    offsetY: number\n    blurRadius: number\n    spreadRadius: number\n    color: Color | null | undefined\n  }\n}\n\nconst ShadowDefaultValue = {\n  inset: false,\n  offsetX: 0,\n  offsetY: 2,\n  blurRadius: 4,\n  spreadRadius: 0,\n  color: null,\n} as const\n\nexport type BoxShadowData = Array<ShadowData>\n\nexport type BoxShadowPropControllerData = ResponsiveValue<BoxShadowData>\n\nexport function useBoxShadow(\n  value: ResponsiveShadowsValue | null | undefined,\n): BoxShadowPropControllerData | null | undefined {\n  const swatchIds = getBoxShadowsSwatchIds(value)\n  const swatches = useSwatches(swatchIds)\n\n  if (value == null) return null\n\n  return value.map(({ value: shadows, ...restOfValue }) => ({\n    ...restOfValue,\n    value: shadows.map(\n      ({\n        payload: { color, inset, offsetX, offsetY, blurRadius, spreadRadius },\n        ...restOfShadow\n      }) => ({\n        ...restOfShadow,\n        payload: {\n          color:\n            color != null\n              ? {\n                  swatch: swatches.filter(isNonNullable).find(s => s && s.id === color.swatchId),\n                  alpha: color.alpha,\n                }\n              : null,\n          inset: inset ?? ShadowDefaultValue.inset,\n          offsetX: offsetX ?? ShadowDefaultValue.offsetX,\n          offsetY: offsetY ?? ShadowDefaultValue.offsetY,\n          blurRadius: blurRadius ?? ShadowDefaultValue.blurRadius,\n          spreadRadius: spreadRadius ?? ShadowDefaultValue.spreadRadius,\n        },\n      }),\n    ),\n  }))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA8B;AAI9B,2BAAuC;AACvC,2BAA4B;AAc5B,MAAM,qBAAqB;AAAA,EACzB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AACT;AAMO,SAAS,aACd,OACgD;AAChD,QAAM,gBAAY,6CAAuB,KAAK;AAC9C,QAAM,eAAW,kCAAY,SAAS;AAEtC,MAAI,SAAS;AAAM,WAAO;AAE1B,SAAO,MAAM,IAAI,CAAC,EAAE,OAAO,SAAS,GAAG,YAAY,OAAO;AAAA,IACxD,GAAG;AAAA,IACH,OAAO,QAAQ;AAAA,MACb,CAAC;AAAA,QACC,SAAS,EAAE,OAAO,OAAO,SAAS,SAAS,YAAY,aAAa;AAAA,QACpE,GAAG;AAAA,MACL,OAAO;AAAA,QACL,GAAG;AAAA,QACH,SAAS;AAAA,UACP,OACE,SAAS,OACL;AAAA,YACE,QAAQ,SAAS,OAAO,kCAAa,EAAE,KAAK,OAAK,KAAK,EAAE,OAAO,MAAM,QAAQ;AAAA,YAC7E,OAAO,MAAM;AAAA,UACf,IACA;AAAA,UACN,OAAO,SAAS,mBAAmB;AAAA,UACnC,SAAS,WAAW,mBAAmB;AAAA,UACvC,SAAS,WAAW,mBAAmB;AAAA,UACvC,YAAY,cAAc,mBAAmB;AAAA,UAC7C,cAAc,gBAAgB,mBAAmB;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,EAAE;AACJ;","names":[]}

package/dist/cjs/components/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useIsomorphicLayoutEffect_exports = {};
+__export(useIsomorphicLayoutEffect_exports, {
+  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect
+});
+module.exports = __toCommonJS(useIsomorphicLayoutEffect_exports);
+var import_react = require("react");
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? import_react.useEffect : import_react.useLayoutEffect;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useIsomorphicLayoutEffect
+});
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

package/dist/cjs/components/hooks/useIsomorphicLayoutEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nconst isSSR =\n  typeof window === 'undefined' ||\n  /ServerSideRendering/.test(window.navigator && window.navigator.userAgent)\n\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAE3C,MAAM,QACJ,OAAO,WAAW,eAClB,sBAAsB,KAAK,OAAO,aAAa,OAAO,UAAU,SAAS;AAEpE,MAAM,4BAA4B,QAAQ,yBAAY;","names":[]}

package/dist/cjs/components/hooks/useMediaQuery.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useMediaQuery_exports = {};
+__export(useMediaQuery_exports, {
+  useMediaQuery: () => useMediaQuery
+});
+module.exports = __toCommonJS(useMediaQuery_exports);
+var import_shim = require("use-sync-external-store/shim");
+var import_react = require("react");
+var import_breakpoints = require("../../state/modules/breakpoints");
+var import_react2 = require("../../runtimes/react");
+const getDeviceQueries = (breakpoints) => breakpoints.map((device) => ({
+  id: device.id,
+  query: (0, import_breakpoints.getBreakpointMediaQuery)(device).replace("@media", "")
+}));
+function useMediaQuery(responsiveValue) {
+  const breakpoints = (0, import_react2.useBreakpoints)();
+  const baseBreakpointId = (0, import_breakpoints.getBaseBreakpoint)(breakpoints).id;
+  const subscribe = (0, import_react.useCallback)(
+    (notify) => {
+      const cleanUpFns = getDeviceQueries(breakpoints).map((q) => {
+        const mediaQueryList = window.matchMedia(q.query);
+        mediaQueryList.addEventListener("change", notify);
+        return () => mediaQueryList.removeEventListener("change", notify);
+      });
+      return () => cleanUpFns.forEach((fn) => fn());
+    },
+    [breakpoints]
+  );
+  const getServerSnapshot = () => (0, import_breakpoints.findBreakpointOverride)(breakpoints, responsiveValue, baseBreakpointId)?.value;
+  function getSnapshot() {
+    const deviceId = getDeviceQueries(breakpoints).reduce(
+      (matchedDevice, deviceQueries) => {
+        if (window.matchMedia(deviceQueries.query).matches) {
+          return deviceQueries.id;
+        }
+        return matchedDevice;
+      },
+      baseBreakpointId
+    );
+    return (0, import_breakpoints.findBreakpointOverride)(breakpoints, responsiveValue, deviceId)?.value;
+  }
+  return (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMediaQuery
+});
+//# sourceMappingURL=useMediaQuery.js.map

package/dist/cjs/components/hooks/useMediaQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport { useCallback } from 'react'\n\nimport { DeviceOverride } from '../../prop-controllers'\nimport {\n  Breakpoints,\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n} from '../../state/modules/breakpoints'\nimport { useBreakpoints } from '../../runtimes/react'\n\nconst getDeviceQueries = (breakpoints: Breakpoints) =>\n  breakpoints.map(device => ({\n    id: device.id,\n    query: getBreakpointMediaQuery(device).replace('@media', ''),\n  }))\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | undefined {\n  const breakpoints = useBreakpoints()\n  const baseBreakpointId = getBaseBreakpoint(breakpoints).id\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const cleanUpFns = getDeviceQueries(breakpoints).map(q => {\n        const mediaQueryList = window.matchMedia(q.query)\n        mediaQueryList.addEventListener('change', notify)\n        return () => mediaQueryList.removeEventListener('change', notify)\n      })\n      return () => cleanUpFns.forEach(fn => fn())\n    },\n    [breakpoints],\n  )\n  const getServerSnapshot = () =>\n    findBreakpointOverride(breakpoints, responsiveValue, baseBreakpointId)?.value\n\n  function getSnapshot() {\n    const deviceId: string = getDeviceQueries(breakpoints).reduce(\n      (matchedDevice, deviceQueries) => {\n        if (window.matchMedia(deviceQueries.query).matches) {\n          return deviceQueries.id\n        }\n        return matchedDevice\n      },\n      baseBreakpointId,\n    )\n    return findBreakpointOverride(breakpoints, responsiveValue, deviceId)?.value\n  }\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAqC;AACrC,mBAA4B;AAG5B,yBAKO;AACP,IAAAA,gBAA+B;AAE/B,MAAM,mBAAmB,CAAC,gBACxB,YAAY,IAAI,aAAW;AAAA,EACzB,IAAI,OAAO;AAAA,EACX,WAAO,4CAAwB,MAAM,EAAE,QAAQ,UAAU,EAAE;AAC7D,EAAE;AAEG,SAAS,cAAiB,iBAA2D;AAC1F,QAAM,kBAAc,8BAAe;AACnC,QAAM,uBAAmB,sCAAkB,WAAW,EAAE;AACxD,QAAM,gBAAY;AAAA,IAChB,CAAC,WAAuB;AACtB,YAAM,aAAa,iBAAiB,WAAW,EAAE,IAAI,OAAK;AACxD,cAAM,iBAAiB,OAAO,WAAW,EAAE,KAAK;AAChD,uBAAe,iBAAiB,UAAU,MAAM;AAChD,eAAO,MAAM,eAAe,oBAAoB,UAAU,MAAM;AAAA,MAClE,CAAC;AACD,aAAO,MAAM,WAAW,QAAQ,QAAM,GAAG,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,QAAM,oBAAoB,UACxB,2CAAuB,aAAa,iBAAiB,gBAAgB,GAAG;AAE1E,WAAS,cAAc;AACrB,UAAM,WAAmB,iBAAiB,WAAW,EAAE;AAAA,MACrD,CAAC,eAAe,kBAAkB;AAChC,YAAI,OAAO,WAAW,cAAc,KAAK,EAAE,SAAS;AAClD,iBAAO,cAAc;AAAA,QACvB;AACA,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AACA,eAAO,2CAAuB,aAAa,iBAAiB,QAAQ,GAAG;AAAA,EACzE;AAEA,aAAO,kCAAqB,WAAW,aAAa,iBAAiB;AACvE;","names":["import_react"]}