@makeswift/runtime 0.13.0 → 0.14.0

package/dist/esm/components/builtin/Navigation/components/MobileMenu/index.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { colorToString } from "../../../../utils/colorToString";
+import { Times16 } from "../../../../icons/Times16";
+import Button from "../../../Button";
+import DropDownButton from "./components/MobileDropDownButton";
+import { useResponsiveColor } from "../../../../hooks";
+import { cx } from "@emotion/css";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../../../utils/responsive-style";
+function ButtonLink({
+  className,
+  textColor,
+  color,
+  ...restOfProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...restOfProps,
+      className: cx(useStyle({ margin: "8px 0" }), className),
+      textColor: useResponsiveColor(textColor),
+      color: useResponsiveColor(color)
+    }
+  );
+}
+function Container({
+  className,
+  animation,
+  backgroundColor,
+  open,
+  ...restOfProps
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({
+          position: "fixed",
+          flexDirection: "column",
+          width: "100%",
+          padding: "40px 15px",
+          transition: "transform 300ms ease-in-out",
+          overflowY: "auto",
+          zIndex: 9999,
+          maxWidth: 575
+        }),
+        useStyle(
+          useResponsiveStyle(
+            [animation, backgroundColor],
+            ([animation2, backgroundColor2]) => {
+              if (animation2 == null)
+                return { display: "none" };
+              return {
+                display: "flex",
+                backgroundColor: backgroundColor2 == null ? "black" : colorToString(backgroundColor2),
+                transform: open ? `translate3d(0,0,0)` : `translate3d(${{ coverRight: "", coverLeft: "-" }[animation2]}100%, 0, 0)`,
+                ...{
+                  coverRight: { top: 0, bottom: 0, right: 0 },
+                  coverLeft: { top: 0, bottom: 0, left: 0 }
+                }[animation2]
+              };
+            }
+          )
+        ),
+        className
+      )
+    }
+  );
+}
+function CloseIconContainer({ className, color, ...restOfProps }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({
+          position: "absolute",
+          top: 15,
+          right: 15,
+          padding: 0,
+          border: 0,
+          outline: 0,
+          background: "none",
+          fill: "currentcolor"
+        }),
+        useStyle(
+          useResponsiveStyle([color], ([color2]) => ({
+            color: color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+}
+function MobileMenu({
+  animation,
+  backgroundColor,
+  open = false,
+  closeIconColor,
+  links = [],
+  onClose = () => {
+  }
+}) {
+  return /* @__PURE__ */ jsxs(Container, { animation, backgroundColor, open, children: [
+    /* @__PURE__ */ jsx(CloseIconContainer, { color: closeIconColor, onClick: onClose, children: /* @__PURE__ */ jsx(Times16, {}) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
+        children: links.map((link) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          link.type === "button" && /* @__PURE__ */ jsx(ButtonLink, { ...link.payload, onClick: onClose, children: link.payload.label }),
+          link.type === "dropdown" && /* @__PURE__ */ jsx(DropDownButton, { ...link.payload, onClose })
+        ] }, link.id))
+      }
+    )
+  ] });
+}
+export {
+  MobileMenu as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Navigation/components/MobileMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/MobileMenu/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, Fragment } from 'react'\n\nimport {\n  ResponsiveValue,\n  NavigationLinksValue,\n  NavigationButton as NavigationButtonValue,\n} from '../../../../../prop-controllers/descriptors'\nimport { ColorValue as Color } from '../../../../utils/types'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { Times16 } from '../../../../icons/Times16'\n\nimport Button from '../../../Button'\nimport DropDownButton from './components/MobileDropDownButton'\nimport { ResponsiveColor } from '../../../../../runtimes/react/controls'\nimport { useResponsiveColor } from '../../../../hooks'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\n\ntype NavigationButtonProps = NavigationButtonValue['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction ButtonLink({\n  className,\n  textColor,\n  color,\n  ...restOfProps\n}: NavigationButtonProps): JSX.Element {\n  return (\n    <Button\n      {...restOfProps}\n      className={cx(useStyle({ margin: '8px 0' }), className)}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\ntype ContainerBaseProps = {\n  className?: string\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveValue<Color> | null\n  open: boolean\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof ContainerBaseProps>\n\nfunction Container({\n  className,\n  animation,\n  backgroundColor,\n  open,\n  ...restOfProps\n}: ContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'fixed',\n          flexDirection: 'column',\n          width: '100%',\n          padding: '40px 15px',\n          transition: 'transform 300ms ease-in-out',\n          overflowY: 'auto',\n          zIndex: 9999,\n          maxWidth: 575,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [animation, backgroundColor] as const,\n            ([animation, backgroundColor]) => {\n              if (animation == null) return { display: 'none' }\n\n              return {\n                display: 'flex',\n                backgroundColor: backgroundColor == null ? 'black' : colorToString(backgroundColor),\n                transform: open\n                  ? `translate3d(0,0,0)`\n                  : `translate3d(${{ coverRight: '', coverLeft: '-' }[animation]}100%, 0, 0)`,\n                ...{\n                  coverRight: { top: 0, bottom: 0, right: 0 },\n                  coverLeft: { top: 0, bottom: 0, left: 0 },\n                }[animation],\n              }\n            },\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype CloseIconContainerBaseProps = {\n  className?: string\n  color?: ResponsiveColor | null\n}\n\ntype CloseIconContainerProps = CloseIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof CloseIconContainerBaseProps>\n\nfunction CloseIconContainer({ className, color, ...restOfProps }: CloseIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'absolute',\n          top: 15,\n          right: 15,\n          padding: 0,\n          border: 0,\n          outline: 0,\n          background: 'none',\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle([color] as const, ([color]) => ({\n            color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = {\n  animation?: ResponsiveValue<'coverRight' | 'coverLeft'>\n  backgroundColor?: ResponsiveColor | null\n  closeIconColor?: ResponsiveColor | null\n  links?: NavigationLinksValue\n  onClose?: () => unknown\n  open?: boolean\n}\n\nexport default function MobileMenu({\n  animation,\n  backgroundColor,\n  open = false,\n  closeIconColor,\n  links = [],\n  onClose = () => {},\n}: Props): JSX.Element {\n  return (\n    <Container animation={animation} backgroundColor={backgroundColor} open={open}>\n      <CloseIconContainer color={closeIconColor} onClick={onClose}>\n        <Times16 />\n      </CloseIconContainer>\n      <div\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}\n      >\n        {links.map(link => (\n          <Fragment key={link.id}>\n            {link.type === 'button' && (\n              <ButtonLink {...link.payload} onClick={onClose}>\n                {link.payload.label}\n              </ButtonLink>\n            )}\n            {link.type === 'dropdown' && <DropDownButton {...link.payload} onClose={onClose} />}\n          </Fragment>\n        ))}\n      </div>\n    </Container>\n  )\n}\n"],"mappings":"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","names":["animation","backgroundColor","color"]}

package/dist/esm/components/builtin/Navigation/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Navigation";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Navigation/index.tsx"],"sourcesContent":["export { default } from './Navigation'\n"],"mappings":"AAAA,SAAS,WAAAA,gBAAe;","names":["default"]}

package/dist/esm/components/builtin/Navigation/register.js

@@ -0,0 +1,131 @@
+import dynamic from "next/dynamic";
+import { forwardNextDynamicRef } from "../../../next/dynamic";
+import { Props } from "../../../prop-controllers";
+import { findBreakpointOverride, getBaseBreakpoint } from "../../../state/modules/breakpoints";
+import { MakeswiftComponentType } from "../constants";
+import { ComponentIcon } from "../../../state/modules/components-meta";
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Navigation")))),
+    {
+      type: MakeswiftComponentType.Navigation,
+      label: "Navigation",
+      icon: ComponentIcon.Navigation,
+      props: {
+        id: Props.ElementID(),
+        links: Props.NavigationLinks(),
+        linkTextStyle: Props.TextStyle((props) => {
+          const links = props.links;
+          return {
+            label: "Link text style",
+            hidden: links == null || links.length === 0
+          };
+        }),
+        showLogo: Props.Checkbox({ preset: true, label: "Show logo" }),
+        logoFile: Props.Image((props) => ({
+          label: "Logo",
+          hidden: props.showLogo === false
+        })),
+        logoWidth: Props.ResponsiveLength((props) => ({
+          preset: [
+            {
+              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+              value: { value: 100, unit: "px" }
+            }
+          ],
+          label: "Logo width",
+          min: 0,
+          max: 1e3,
+          // TODO: This is hardcoded value, import it from LengthInputOptions
+          options: [{ value: "px", label: "Pixels", icon: "Px16" }],
+          hidden: props.showLogo === false
+        })),
+        logoAltText: Props.TextInput((props) => ({
+          label: "Logo alt text",
+          hidden: props.showLogo === false
+        })),
+        logoLink: Props.Link((props) => ({
+          label: "Logo on click",
+          hidden: props.showLogo === false
+        })),
+        alignment: Props.ResponsiveIconRadioGroup({
+          label: "Alignment",
+          options: [
+            { label: "Left", value: "flex-start", icon: "AlignLeft16" },
+            { label: "Center", value: "center", icon: "AlignCenter16" },
+            { label: "End", value: "flex-end", icon: "AlignRight16" }
+          ],
+          defaultValue: "flex-end"
+        }),
+        gutter: Props.GapX({
+          preset: [
+            {
+              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+              value: { value: 10, unit: "px" }
+            }
+          ],
+          label: "Link gap",
+          min: 0,
+          max: 100,
+          step: 1,
+          defaultValue: { value: 0, unit: "px" }
+        }),
+        mobileMenuAnimation: Props.ResponsiveSelect({
+          label: "Mobile menu",
+          options: [
+            { value: "coverRight", label: "Cover from right" },
+            { value: "coverLeft", label: "Cover from left" }
+          ]
+        }),
+        mobileMenuOpenIconColor: Props.ResponsiveColor((props, device) => {
+          const mobileMenuAnimation = props.mobileMenuAnimation;
+          const hidden = !findBreakpointOverride(
+            runtime.getBreakpoints(),
+            mobileMenuAnimation,
+            device
+          );
+          return {
+            label: "Open icon color",
+            placeholder: "rgba(161, 168, 194, 0.5)",
+            hidden
+          };
+        }),
+        mobileMenuCloseIconColor: Props.ResponsiveColor((props, device) => {
+          const mobileMenuAnimation = props.mobileMenuAnimation;
+          const hidden = !findBreakpointOverride(
+            runtime.getBreakpoints(),
+            mobileMenuAnimation,
+            device
+          );
+          return {
+            label: "Close icon color",
+            placeholder: "rgba(161, 168, 194, 0.5)",
+            hidden
+          };
+        }),
+        mobileMenuBackgroundColor: Props.ResponsiveColor((props, device) => {
+          const mobileMenuAnimation = props.mobileMenuAnimation;
+          const hidden = !findBreakpointOverride(
+            runtime.getBreakpoints(),
+            mobileMenuAnimation,
+            device
+          );
+          return {
+            label: "Menu BG color",
+            placeholder: "black",
+            hidden
+          };
+        }),
+        width: Props.Width({
+          format: Props.Width.Format.ClassName,
+          defaultValue: { value: 100, unit: "%" }
+        }),
+        margin: Props.Margin({ format: Props.Margin.Format.ClassName })
+      }
+    }
+  );
+}
+export {
+  registerComponent
+};
+//# sourceMappingURL=register.js.map

package/dist/esm/components/builtin/Navigation/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Navigation/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props } from '../../../prop-controllers'\nimport { NavigationLinksValue, ResponsiveValue } from '../../../prop-controllers/descriptors'\nimport { ReactRuntime } from '../../../runtimes/react'\nimport { findBreakpointOverride, getBaseBreakpoint } from '../../../state/modules/breakpoints'\nimport { MakeswiftComponentType } from '../constants'\nimport { ComponentIcon } from '../../../state/modules/components-meta'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Navigation')))),\n    {\n      type: MakeswiftComponentType.Navigation,\n      label: 'Navigation',\n      icon: ComponentIcon.Navigation,\n      props: {\n        id: Props.ElementID(),\n        links: Props.NavigationLinks(),\n        linkTextStyle: Props.TextStyle(props => {\n          const links = props.links as NavigationLinksValue\n\n          return {\n            label: 'Link text style',\n            hidden: links == null || links.length === 0,\n          }\n        }),\n        showLogo: Props.Checkbox({ preset: true, label: 'Show logo' }),\n        logoFile: Props.Image(props => ({\n          label: 'Logo',\n          hidden: props.showLogo === false,\n        })),\n        logoWidth: Props.ResponsiveLength(props => ({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 100, unit: 'px' },\n            },\n          ],\n          label: 'Logo width',\n          min: 0,\n          max: 1000,\n          // TODO: This is hardcoded value, import it from LengthInputOptions\n          options: [{ value: 'px', label: 'Pixels', icon: 'Px16' }],\n          hidden: props.showLogo === false,\n        })),\n        logoAltText: Props.TextInput(props => ({\n          label: 'Logo alt text',\n          hidden: props.showLogo === false,\n        })),\n        logoLink: Props.Link(props => ({\n          label: 'Logo on click',\n          hidden: props.showLogo === false,\n        })),\n        alignment: Props.ResponsiveIconRadioGroup({\n          label: 'Alignment',\n          options: [\n            { label: 'Left', value: 'flex-start', icon: 'AlignLeft16' },\n            { label: 'Center', value: 'center', icon: 'AlignCenter16' },\n            { label: 'End', value: 'flex-end', icon: 'AlignRight16' },\n          ],\n          defaultValue: 'flex-end',\n        }),\n        gutter: Props.GapX({\n          preset: [\n            {\n              deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,\n              value: { value: 10, unit: 'px' },\n            },\n          ],\n          label: 'Link gap',\n          min: 0,\n          max: 100,\n          step: 1,\n          defaultValue: { value: 0, unit: 'px' },\n        }),\n        mobileMenuAnimation: Props.ResponsiveSelect({\n          label: 'Mobile menu',\n          options: [\n            { value: 'coverRight', label: 'Cover from right' },\n            { value: 'coverLeft', label: 'Cover from left' },\n          ],\n        }),\n        mobileMenuOpenIconColor: Props.ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as ResponsiveValue<string>\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Open icon color',\n            placeholder: 'rgba(161, 168, 194, 0.5)',\n            hidden,\n          }\n        }),\n        mobileMenuCloseIconColor: Props.ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as ResponsiveValue<string>\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Close icon color',\n            placeholder: 'rgba(161, 168, 194, 0.5)',\n            hidden,\n          }\n        }),\n        mobileMenuBackgroundColor: Props.ResponsiveColor((props, device) => {\n          const mobileMenuAnimation = props.mobileMenuAnimation as ResponsiveValue<string>\n          const hidden = !findBreakpointOverride(\n            runtime.getBreakpoints(),\n            mobileMenuAnimation,\n            device,\n          )\n\n          return {\n            label: 'Menu BG color',\n            placeholder: 'black',\n            hidden,\n          }\n        }),\n        width: Props.Width({\n          format: Props.Width.Format.ClassName,\n          defaultValue: { value: 100, unit: '%' },\n        }),\n        margin: Props.Margin({ format: Props.Margin.Format.ClassName }),\n      },\n    },\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/builtin/Root/Root.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { normalize } from "polished";
+import { forwardRef } from "react";
+import Placeholder from "./components/Placeholder";
+import { Element } from "../../../runtimes/react";
+import BackgroundsContainer from "../../shared/BackgroundsContainer";
+import { useGlobalStyle } from "../../../runtimes/react/use-global-style";
+import { GridItem } from "../../shared/grid-item";
+import { useStyle } from "../../../runtimes/react/use-style";
+const Root = forwardRef(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
+  useGlobalStyle({
+    html: {
+      boxSizing: "border-box"
+    },
+    "*, *::before, *::after": {
+      boxSizing: "inherit"
+    }
+  });
+  useGlobalStyle(normalize());
+  return /* @__PURE__ */ jsx(BackgroundsContainer, { ref, style: { background: "white" }, backgrounds, children: /* @__PURE__ */ jsx("div", { className: useStyle({ display: "flex", flexWrap: "wrap", width: "100%" }), children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(
+    GridItem,
+    {
+      grid: children.columns,
+      index,
+      columnGap,
+      rowGap,
+      children: /* @__PURE__ */ jsx(Element, { element: child })
+    },
+    child.key
+  )) : /* @__PURE__ */ jsx(Placeholder, {}) }) });
+});
+var Root_default = Root;
+export {
+  Root_default as default
+};
+//# sourceMappingURL=Root.js.map

package/dist/esm/components/builtin/Root/Root.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Root/Root.tsx"],"sourcesContent":["import { normalize } from 'polished'\nimport { forwardRef, Ref } from 'react'\n\nimport Placeholder from './components/Placeholder'\nimport type {\n  GridValue,\n  BackgroundsValue,\n  GapXValue,\n  GapYValue,\n} from '../../../prop-controllers/descriptors'\nimport { Element } from '../../../runtimes/react'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { useGlobalStyle } from '../../../runtimes/react/use-global-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  children?: GridValue\n  backgrounds?: BackgroundsValue\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n}\n\nconst Root = forwardRef(function Page(\n  { children, backgrounds, rowGap, columnGap }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  useGlobalStyle({\n    html: {\n      boxSizing: 'border-box',\n    },\n    '*, *::before, *::after': {\n      boxSizing: 'inherit',\n    },\n  })\n\n  useGlobalStyle(normalize())\n\n  return (\n    <BackgroundsContainer ref={ref} style={{ background: 'white' }} backgrounds={backgrounds}>\n      <div className={useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' })}>\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              grid={children.columns}\n              index={index}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Root\n"],"mappings":"AAkDc;AAlDd,SAAS,iBAAiB;AAC1B,SAAS,kBAAuB;AAEhC,OAAO,iBAAiB;AAOxB,SAAS,eAAe;AACxB,OAAO,0BAA0B;AACjC,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AASzB,MAAM,OAAO,WAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,iBAAe;AAAA,IACb,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IACA,0BAA0B;AAAA,MACxB,WAAW;AAAA,IACb;AAAA,EACF,CAAC;AAED,iBAAe,UAAU,CAAC;AAE1B,SACE,oBAAC,wBAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,8BAAC,SAAI,WAAW,SAAS,EAAE,SAAS,QAAQ,UAAU,QAAQ,OAAO,OAAO,CAAC,GAC1E,sBAAY,SAAS,SAAS,SAAS,IACtC,SAAS,SAAS,IAAI,CAAC,OAAO,UAC5B;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,WAAQ,SAAS,OAAO;AAAA;AAAA,IANpB,MAAM;AAAA,EAOb,CACD,IAED,oBAAC,eAAY,GAEjB,GACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":[]}

package/dist/esm/components/builtin/Root/components/Placeholder/index.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+var Placeholder_default = forwardRef(function Placeholder(_props, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: useStyle({
+        width: "100%",
+        background: "rgba(161, 168, 194, 0.18)",
+        height: 80,
+        padding: 8
+      }),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "100%",
+          height: "100%",
+          style: { overflow: "visible" },
+          children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 0,
+              y: 0,
+              width: "100%",
+              height: "100%",
+              strokeWidth: 2,
+              strokeDasharray: "4 2",
+              fill: "none",
+              stroke: "rgba(161, 168, 194, 0.40)",
+              rx: "4",
+              ry: "4"
+            }
+          )
+        }
+      )
+    }
+  );
+});
+export {
+  Placeholder_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Root/components/Placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/Root/components/Placeholder/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nexport default forwardRef<HTMLDivElement>(function Placeholder(_props, ref) {\n  return (\n    <div\n      ref={ref}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n"],"mappings":"AAoBQ;AApBR,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAEzB,IAAO,sBAAQ,WAA2B,SAAS,YAAY,QAAQ,KAAK;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,SAAS;AAAA,QAClB,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,EAAE,UAAU,UAAU;AAAA,UAE7B;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cACH,OAAM;AAAA,cACN,QAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAgB;AAAA,cAChB,MAAK;AAAA,cACL,QAAO;AAAA,cACP,IAAG;AAAA,cACH,IAAG;AAAA;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}

package/dist/esm/components/builtin/Root/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Root";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/Root/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Root/index.tsx"],"sourcesContent":["export { default } from './Root'\n"],"mappings":"AAAA,SAAS,WAAAA,gBAAe;","names":["default"]}

package/dist/esm/components/builtin/Root/register.js

@@ -0,0 +1,24 @@
+import dynamic from "next/dynamic";
+import { forwardNextDynamicRef } from "../../../next/dynamic";
+import { Props } from "../../../prop-controllers";
+import { MakeswiftComponentType } from "../constants";
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Root")))),
+    {
+      type: MakeswiftComponentType.Root,
+      label: "Page",
+      hidden: true,
+      props: {
+        children: Props.Grid(),
+        backgrounds: Props.Backgrounds(),
+        rowGap: Props.GapY(),
+        columnGap: Props.GapX()
+      }
+    }
+  );
+}
+export {
+  registerComponent
+};
+//# sourceMappingURL=register.js.map

package/dist/esm/components/builtin/Root/register.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/Root/register.ts"],"sourcesContent":["import dynamic from 'next/dynamic'\n\nimport { forwardNextDynamicRef } from '../../../next/dynamic'\nimport { Props } from '../../../prop-controllers'\nimport { ReactRuntime } from '../../../react'\nimport { MakeswiftComponentType } from '../constants'\n\nexport function registerComponent(runtime: ReactRuntime) {\n  return runtime.registerComponent(\n    forwardNextDynamicRef(patch => dynamic(() => patch(import('./Root')))),\n    {\n      type: MakeswiftComponentType.Root,\n      label: 'Page',\n      hidden: true,\n      props: {\n        children: Props.Grid(),\n        backgrounds: Props.Backgrounds(),\n        rowGap: Props.GapY(),\n        columnGap: Props.GapX(),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,OAAO,aAAa;AAEpB,SAAS,6BAA6B;AACtC,SAAS,aAAa;AAEtB,SAAS,8BAA8B;AAEhC,SAAS,kBAAkB,SAAuB;AACvD,SAAO,QAAQ;AAAA,IACb,sBAAsB,WAAS,QAAQ,MAAM,MAAM,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAA,IACrE;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,QACL,UAAU,MAAM,KAAK;AAAA,QACrB,aAAa,MAAM,YAAY;AAAA,QAC/B,QAAQ,MAAM,KAAK;AAAA,QACnB,WAAW,MAAM,KAAK;AAAA,MACxB;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/components/builtin/SocialLinks/SocialLinks.js

@@ -0,0 +1,120 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Link } from "../../shared/Link";
+import { colorToString } from "../../utils/colorToString";
+import { SocialLinksOptions } from "./options";
+import GutterContainer from "../../shared/GutterContainer";
+import SocialLinksPlaceholder from "./components/SocialLinksPlaceholder";
+import { cx } from "@emotion/css";
+import { useStyle } from "../../../runtimes/react/use-style";
+import { useResponsiveStyle } from "../../utils/responsive-style";
+const SocialLinks = forwardRef(function SocialLinks2({
+  id,
+  links: { links, openInNewTab } = { links: [], openInNewTab: false },
+  shape,
+  size,
+  hoverStyle,
+  fill,
+  backgroundColor,
+  alignment,
+  gutter,
+  width,
+  margin
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id,
+      className: cx(
+        useStyle({ display: "flex", flexDirection: "row", flexWrap: "wrap" }),
+        width,
+        margin,
+        useStyle(
+          useResponsiveStyle([alignment], ([alignment2 = "center"]) => ({
+            justifyContent: alignment2
+          }))
+        )
+      ),
+      children: links.length > 0 ? links.map((link, i) => {
+        const option = SocialLinksOptions.find((o) => o.type === link.payload.type);
+        if (!option)
+          throw new Error(`Invalid link payload type ${link.payload.type}`);
+        return /* @__PURE__ */ jsx(
+          GutterContainer,
+          {
+            gutter,
+            first: i === 0,
+            last: i === links.length - 1,
+            children: /* @__PURE__ */ jsx(
+              StyledLink,
+              {
+                backgroundColor,
+                brandColor: option.brandColor,
+                fill,
+                hoverStyle,
+                link: { type: "OPEN_URL", payload: { url: link.payload.url, openInNewTab } },
+                shape,
+                size,
+                children: option == null ? null : option.icon
+              }
+            )
+          },
+          link.id
+        );
+      }) : /* @__PURE__ */ jsx(SocialLinksPlaceholder, { gutter })
+    }
+  );
+});
+var SocialLinks_default = SocialLinks;
+function StyledLink({
+  className,
+  brandColor,
+  shape,
+  size,
+  hoverStyle,
+  fill,
+  backgroundColor,
+  ...restOfProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      ...restOfProps,
+      className: cx(
+        useStyle({
+          display: "block",
+          color: brandColor,
+          transition: "transform, opacity 0.18s",
+          svg: { display: "block" }
+        }),
+        useStyle(
+          useResponsiveStyle(
+            [shape, size, hoverStyle, fill, backgroundColor],
+            ([shape2 = "naked", size2 = "medium", hoverStyle2 = "none", fill2, backgroundColor2]) => ({
+              padding: shape2 === "naked" ? 0 : { small: 10, medium: 12, large: 14 }[size2],
+              borderRadius: { circle: "50%", rounded: "8px", naked: 0, square: 0 }[shape2],
+              background: shape2 === "naked" ? "transparent" : backgroundColor2 == null ? "currentColor" : colorToString(backgroundColor2),
+              ":hover": {
+                none: {},
+                grow: { transform: "scale(1.1)" },
+                shrink: { transform: "scale(0.9)" },
+                fade: { opacity: 0.65 }
+              }[hoverStyle2],
+              svg: {
+                fill: fill2 == null ? shape2 === "naked" || backgroundColor2 != null ? "currentColor" : "white" : colorToString(fill2),
+                width: { small: 16, medium: 20, large: 24 }[size2],
+                height: { small: 16, medium: 20, large: 24 }[size2]
+              }
+            })
+          )
+        ),
+        className
+      )
+    }
+  );
+}
+export {
+  SocialLinks_default as default
+};
+//# sourceMappingURL=SocialLinks.js.map

package/dist/esm/components/builtin/SocialLinks/SocialLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/SocialLinks.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'\n\nimport { Link } from '../../shared/Link'\nimport { colorToString } from '../../utils/colorToString'\nimport { ColorValue as Color } from '../../utils/types'\nimport { SocialLinksOptions, SocialLinksOptionType } from './options'\nimport GutterContainer from '../../shared/GutterContainer'\nimport SocialLinksPlaceholder from './components/SocialLinksPlaceholder'\nimport {\n  ResponsiveValue,\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  ResponsiveSelectValue,\n  GapXValue,\n} from '../../../prop-controllers/descriptors'\nimport { ResponsiveColor } from '../../../runtimes/react/controls'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\n\ntype Props = {\n  id?: ElementIDValue\n  links?: {\n    links: { id: string; payload: { type: SocialLinksOptionType; url: string } }[]\n    openInNewTab: boolean\n  }\n  shape?: ResponsiveIconRadioGroupValue<'naked' | 'circle' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  hoverStyle?: ResponsiveSelectValue<'none' | 'grow' | 'shrink' | 'fade'>\n  fill?: ResponsiveColor | null\n  backgroundColor?: ResponsiveColor | null\n  alignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gutter?: GapXValue\n  width?: string\n  margin?: string\n}\n\nconst SocialLinks = forwardRef(function SocialLinks(\n  {\n    id,\n    links: { links, openInNewTab } = { links: [], openInNewTab: false },\n    shape,\n    size,\n    hoverStyle,\n    fill,\n    backgroundColor,\n    alignment,\n    gutter,\n    width,\n    margin,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }),\n        width,\n        margin,\n        useStyle(\n          useResponsiveStyle([alignment] as const, ([alignment = 'center']) => ({\n            justifyContent: alignment,\n          })),\n        ),\n      )}\n    >\n      {links.length > 0 ? (\n        links.map((link, i) => {\n          const option = SocialLinksOptions.find(o => o.type === link.payload.type)\n\n          if (!option) throw new Error(`Invalid link payload type ${link.payload.type}`)\n\n          return (\n            <GutterContainer\n              key={link.id}\n              gutter={gutter}\n              first={i === 0}\n              last={i === links.length - 1}\n            >\n              <StyledLink\n                backgroundColor={backgroundColor}\n                brandColor={option.brandColor}\n                fill={fill}\n                hoverStyle={hoverStyle}\n                link={{ type: 'OPEN_URL', payload: { url: link.payload.url, openInNewTab } }}\n                shape={shape}\n                size={size}\n              >\n                {option == null ? null : option.icon}\n              </StyledLink>\n            </GutterContainer>\n          )\n        })\n      ) : (\n        <SocialLinksPlaceholder gutter={gutter} />\n      )}\n    </div>\n  )\n})\n\nexport default SocialLinks\n\ntype StyledLinkProps = ComponentPropsWithoutRef<typeof Link> & {\n  brandColor: string\n  shape: Props['shape']\n  size: Props['size']\n  hoverStyle: Props['hoverStyle']\n  fill: ResponsiveValue<Color> | null | undefined\n  backgroundColor: ResponsiveValue<Color> | null | undefined\n}\n\nfunction StyledLink({\n  className,\n  brandColor,\n  shape,\n  size,\n  hoverStyle,\n  fill,\n  backgroundColor,\n  ...restOfProps\n}: StyledLinkProps) {\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          color: brandColor,\n          transition: 'transform, opacity 0.18s',\n          svg: { display: 'block' },\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size, hoverStyle, fill, backgroundColor] as const,\n            ([shape = 'naked', size = 'medium', hoverStyle = 'none', fill, backgroundColor]) => ({\n              padding: shape === 'naked' ? 0 : { small: 10, medium: 12, large: 14 }[size],\n              borderRadius: { circle: '50%', rounded: '8px', naked: 0, square: 0 }[shape],\n              background:\n                shape === 'naked'\n                  ? 'transparent'\n                  : backgroundColor == null\n                  ? 'currentColor'\n                  : colorToString(backgroundColor),\n\n              ':hover': {\n                none: {},\n                grow: { transform: 'scale(1.1)' },\n                shrink: { transform: 'scale(0.9)' },\n                fade: { opacity: 0.65 },\n              }[hoverStyle],\n\n              svg: {\n                fill:\n                  fill == null\n                    ? shape === 'naked' || backgroundColor != null\n                      ? 'currentColor'\n                      : 'white'\n                    : colorToString(fill),\n                width: { small: 16, medium: 20, large: 24 }[size],\n                height: { small: 16, medium: 20, large: 24 }[size],\n              },\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["SocialLinks","alignment","shape","size","hoverStyle","fill","backgroundColor"]}

package/dist/esm/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.js

@@ -0,0 +1,33 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useStyle } from "../../../../../runtimes/react/use-style";
+import GutterContainer from "../../../../shared/GutterContainer";
+const links = [{ id: "1" }, { id: "2" }, { id: "3" }];
+function SocialLinksPlaceholder({ gutter }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: links.map((link, i) => /* @__PURE__ */ jsx(
+    GutterContainer,
+    {
+      gutter,
+      first: i === 0,
+      last: i === links.length - 1,
+      children: /* @__PURE__ */ jsx(PlaceholderLink, {})
+    },
+    link.id
+  )) });
+}
+function PlaceholderLink() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: useStyle({
+        width: 44,
+        height: 44,
+        borderRadius: "50%",
+        backgroundColor: "rgba(161, 168, 194, 0.4)"
+      })
+    }
+  );
+}
+export {
+  SocialLinksPlaceholder as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.tsx"],"sourcesContent":["import { ResponsiveValue, Length } from '../../../../../prop-controllers/descriptors'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nimport GutterContainer from '../../../../shared/GutterContainer'\n\nconst links = [{ id: '1' }, { id: '2' }, { id: '3' }]\n\ntype Props = { gutter?: ResponsiveValue<Length> }\n\nexport default function SocialLinksPlaceholder({ gutter }: Props): JSX.Element {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer\n          key={link.id}\n          gutter={gutter}\n          first={i === 0}\n          last={i === links.length - 1}\n        >\n          <PlaceholderLink />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n\nfunction PlaceholderLink() {\n  return (\n    <div\n      className={useStyle({\n        width: 44,\n        height: 44,\n        borderRadius: '50%',\n        backgroundColor: 'rgba(161, 168, 194, 0.4)',\n      })}\n    />\n  )\n}\n"],"mappings":"AAWI,mBAQM,WARN;AAVJ,SAAS,gBAAgB;AAEzB,OAAO,qBAAqB;AAE5B,MAAM,QAAQ,CAAC,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,GAAG,EAAE,IAAI,IAAI,CAAC;AAIrC,SAAR,uBAAwC,EAAE,OAAO,GAAuB;AAC7E,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA,OAAO,MAAM;AAAA,MACb,MAAM,MAAM,MAAM,SAAS;AAAA,MAE3B,8BAAC,mBAAgB;AAAA;AAAA,IALZ,KAAK;AAAA,EAMZ,CACD,GACH;AAEJ;AAEA,SAAS,kBAAkB;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/components/builtin/SocialLinks/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./SocialLinks";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/builtin/SocialLinks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/builtin/SocialLinks/index.tsx"],"sourcesContent":["export { default } from './SocialLinks'\n"],"mappings":"AAAA,SAAS,WAAAA,gBAAe;","names":["default"]}