@makeswift/runtime 0.13.1 → 0.14.1

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.js

@@ -0,0 +1,120 @@
+"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 __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 MobileDropDownButton_exports = {};
+__export(MobileDropDownButton_exports, {
+  default: () => MobileDropDownButton
+});
+module.exports = __toCommonJS(MobileDropDownButton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("react");
+var import_colorToString = require("../../../../../../utils/colorToString");
+var import_hooks = require("../../../../../../hooks");
+var import_CaretDown8 = require("../../../../../../icons/CaretDown8");
+var import_Plus8 = require("../../../../../../icons/Plus8");
+var import_ArrowDown8 = require("../../../../../../icons/ArrowDown8");
+var import_ChevronDown8 = require("../../../../../../icons/ChevronDown8");
+var import_Link = require("../../../../../../shared/Link");
+var import_Button = __toESM(require("../../../../../Button"));
+var import_css = require("@emotion/css");
+var import_use_style = require("../../../../../../../runtimes/react/use-style");
+var import_responsive_style = require("../../../../../../utils/responsive-style");
+function DropDownMenu({ className, open, ...restOfProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({ display: open ? "flex" : "none", flexDirection: "column", padding: 8 }),
+        className
+      )
+    }
+  );
+}
+function ButtonLink({ className, ...restOfProps }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { ...restOfProps, className: (0, import_css.cx)((0, import_use_style.useStyle)({ margin: "8px 0" }), className) });
+}
+function DropDownItem({ color, className, textStyle, ...restOfProps }) {
+  const colorData = (0, import_hooks.useResponsiveColor)(color);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Link.Link,
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          textDecoration: "none",
+          lineHeight: 1.4,
+          padding: "8px 16px",
+          color: "black"
+        }),
+        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveTextStyle)(textStyle)),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)([colorData], ([color2]) => ({
+            color: color2 == null ? "black" : (0, import_colorToString.colorToString)(color2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+}
+function MobileDropDownButton({
+  label,
+  caret,
+  links = [],
+  onClose = () => {
+  },
+  color,
+  textColor,
+  ...restOfProps
+}) {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ButtonLink,
+      {
+        ...restOfProps,
+        textColor: (0, import_hooks.useResponsiveColor)(textColor),
+        color: (0, import_hooks.useResponsiveColor)(color),
+        onPointerDown: () => setIsOpen((prev) => !prev),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginRight: 6 }, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-flex", fill: "currentColor" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            caret === "caret" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CaretDown8.CaretDown8, {}),
+            caret === "plus" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Plus8.Plus8, {}),
+            caret === "arrow-down" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ArrowDown8.ArrowDown8, {}),
+            caret === "chevron-down" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChevronDown8.ChevronDown8, {})
+          ] }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropDownMenu, { open: isOpen, children: links.map(({ id, payload }) => /* @__PURE__ */ (0, import_react.createElement)(DropDownItem, { ...payload, key: id, onClick: onClose }, payload.label)) })
+  ] });
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState } from 'react'\n\nimport {\n  ResponsiveColorValue,\n  TextStyleValue,\n  LinkValue,\n} from '../../../../../../../prop-controllers/descriptors'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: open ? 'flex' : 'none', flexDirection: 'column', padding: 8 }),\n        className,\n      )}\n    />\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  return <Button {...restOfProps} className={cx(useStyle({ margin: '8px 0' }), className)} />\n}\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorValue\n  textStyle?: TextStyleValue\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData] as const, ([color]) => ({\n            color: color == null ? 'black' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkValue\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorValue\n  color?: ResponsiveColorValue\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): JSX.Element {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAsGM;AAxIV,IAAAA,gBAAmD;AAOnD,2BAA8B;AAC9B,mBAAmC;AAEnC,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAE7B,kBAAqB;AACrB,oBAAmB;AACnB,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,OAAO,SAAS,QAAQ,eAAe,UAAU,SAAS,EAAE,CAAC;AAAA,QACjF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAAoB;AAClE,SAAO,4CAAC,cAAAC,SAAA,EAAQ,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,SAAS,GAAY,CAAC,CAACC,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,UACtD,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAiBe,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,sFACG;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","Button","color"]}

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

@@ -0,0 +1,154 @@
+"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 __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 MobileMenu_exports = {};
+__export(MobileMenu_exports, {
+  default: () => MobileMenu
+});
+module.exports = __toCommonJS(MobileMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_colorToString = require("../../../../utils/colorToString");
+var import_Times16 = require("../../../../icons/Times16");
+var import_Button = __toESM(require("../../../Button"));
+var import_MobileDropDownButton = __toESM(require("./components/MobileDropDownButton"));
+var import_hooks = require("../../../../hooks");
+var import_css = require("@emotion/css");
+var import_use_style = require("../../../../../runtimes/react/use-style");
+var import_responsive_style = require("../../../../utils/responsive-style");
+function ButtonLink({
+  className,
+  textColor,
+  color,
+  ...restOfProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Button.default,
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)((0, import_use_style.useStyle)({ margin: "8px 0" }), className),
+      textColor: (0, import_hooks.useResponsiveColor)(textColor),
+      color: (0, import_hooks.useResponsiveColor)(color)
+    }
+  );
+}
+function Container({
+  className,
+  animation,
+  backgroundColor,
+  open,
+  ...restOfProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          position: "fixed",
+          flexDirection: "column",
+          width: "100%",
+          padding: "40px 15px",
+          transition: "transform 300ms ease-in-out",
+          overflowY: "auto",
+          zIndex: 9999,
+          maxWidth: 575
+        }),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)(
+            [animation, backgroundColor],
+            ([animation2, backgroundColor2]) => {
+              if (animation2 == null)
+                return { display: "none" };
+              return {
+                display: "flex",
+                backgroundColor: backgroundColor2 == null ? "black" : (0, import_colorToString.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__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ...restOfProps,
+      className: (0, import_css.cx)(
+        (0, import_use_style.useStyle)({
+          position: "absolute",
+          top: 15,
+          right: 15,
+          padding: 0,
+          border: 0,
+          outline: 0,
+          background: "none",
+          fill: "currentcolor"
+        }),
+        (0, import_use_style.useStyle)(
+          (0, import_responsive_style.useResponsiveStyle)([color], ([color2]) => ({
+            color: color2 == null ? "rgba(161, 168, 194, 0.5)" : (0, import_colorToString.colorToString)(color2)
+          }))
+        ),
+        className
+      )
+    }
+  );
+}
+function MobileMenu({
+  animation,
+  backgroundColor,
+  open = false,
+  closeIconColor,
+  links = [],
+  onClose = () => {
+  }
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { animation, backgroundColor, open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIconContainer, { color: closeIconColor, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Times16.Times16, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 },
+        children: links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          link.type === "button" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonLink, { ...link.payload, onClick: onClose, children: link.payload.label }),
+          link.type === "dropdown" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MobileDropDownButton.default, { ...link.payload, onClose })
+        ] }, link.id))
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":["Button","animation","backgroundColor","color","DropDownButton"]}

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

@@ -0,0 +1,35 @@
+"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 __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 Navigation_exports = {};
+__export(Navigation_exports, {
+  default: () => import_Navigation.default
+});
+module.exports = __toCommonJS(Navigation_exports);
+var import_Navigation = __toESM(require("./Navigation"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAwB;","names":[]}

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

@@ -0,0 +1,165 @@
+"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 __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 register_exports = {};
+__export(register_exports, {
+  registerComponent: () => registerComponent
+});
+module.exports = __toCommonJS(register_exports);
+var import_dynamic = __toESM(require("next/dynamic"));
+var import_dynamic2 = require("../../../next/dynamic");
+var import_prop_controllers = require("../../../prop-controllers");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_constants = require("../constants");
+var import_components_meta = require("../../../state/modules/components-meta");
+function registerComponent(runtime) {
+  return runtime.registerComponent(
+    (0, import_dynamic2.forwardNextDynamicRef)((patch) => (0, import_dynamic.default)(() => patch(import("./Navigation")))),
+    {
+      type: import_constants.MakeswiftComponentType.Navigation,
+      label: "Navigation",
+      icon: import_components_meta.ComponentIcon.Navigation,
+      props: {
+        id: import_prop_controllers.Props.ElementID(),
+        links: import_prop_controllers.Props.NavigationLinks(),
+        linkTextStyle: import_prop_controllers.Props.TextStyle((props) => {
+          const links = props.links;
+          return {
+            label: "Link text style",
+            hidden: links == null || links.length === 0
+          };
+        }),
+        showLogo: import_prop_controllers.Props.Checkbox({ preset: true, label: "Show logo" }),
+        logoFile: import_prop_controllers.Props.Image((props) => ({
+          label: "Logo",
+          hidden: props.showLogo === false
+        })),
+        logoWidth: import_prop_controllers.Props.ResponsiveLength((props) => ({
+          preset: [
+            {
+              deviceId: (0, import_breakpoints.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: import_prop_controllers.Props.TextInput((props) => ({
+          label: "Logo alt text",
+          hidden: props.showLogo === false
+        })),
+        logoLink: import_prop_controllers.Props.Link((props) => ({
+          label: "Logo on click",
+          hidden: props.showLogo === false
+        })),
+        alignment: import_prop_controllers.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: import_prop_controllers.Props.GapX({
+          preset: [
+            {
+              deviceId: (0, import_breakpoints.getBaseBreakpoint)(runtime.getBreakpoints()).id,
+              value: { value: 10, unit: "px" }
+            }
+          ],
+          label: "Link gap",
+          min: 0,
+          max: 100,
+          step: 1,
+          defaultValue: { value: 0, unit: "px" }
+        }),
+        mobileMenuAnimation: import_prop_controllers.Props.ResponsiveSelect({
+          label: "Mobile menu",
+          options: [
+            { value: "coverRight", label: "Cover from right" },
+            { value: "coverLeft", label: "Cover from left" }
+          ]
+        }),
+        mobileMenuOpenIconColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+          const mobileMenuAnimation = props.mobileMenuAnimation;
+          const hidden = !(0, import_breakpoints.findBreakpointOverride)(
+            runtime.getBreakpoints(),
+            mobileMenuAnimation,
+            device
+          );
+          return {
+            label: "Open icon color",
+            placeholder: "rgba(161, 168, 194, 0.5)",
+            hidden
+          };
+        }),
+        mobileMenuCloseIconColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+          const mobileMenuAnimation = props.mobileMenuAnimation;
+          const hidden = !(0, import_breakpoints.findBreakpointOverride)(
+            runtime.getBreakpoints(),
+            mobileMenuAnimation,
+            device
+          );
+          return {
+            label: "Close icon color",
+            placeholder: "rgba(161, 168, 194, 0.5)",
+            hidden
+          };
+        }),
+        mobileMenuBackgroundColor: import_prop_controllers.Props.ResponsiveColor((props, device) => {
+          const mobileMenuAnimation = props.mobileMenuAnimation;
+          const hidden = !(0, import_breakpoints.findBreakpointOverride)(
+            runtime.getBreakpoints(),
+            mobileMenuAnimation,
+            device
+          );
+          return {
+            label: "Menu BG color",
+            placeholder: "black",
+            hidden
+          };
+        }),
+        width: import_prop_controllers.Props.Width({
+          format: import_prop_controllers.Props.Width.Format.ClassName,
+          defaultValue: { value: 100, unit: "%" }
+        }),
+        margin: import_prop_controllers.Props.Margin({ format: import_prop_controllers.Props.Margin.Format.ClassName })
+      }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  registerComponent
+});
+//# sourceMappingURL=register.js.map

package/dist/cjs/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":["import_dynamic","dynamic"]}

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

@@ -0,0 +1,66 @@
+"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 __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 Root_exports = {};
+__export(Root_exports, {
+  default: () => Root_default
+});
+module.exports = __toCommonJS(Root_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_polished = require("polished");
+var import_react = require("react");
+var import_Placeholder = __toESM(require("./components/Placeholder"));
+var import_react2 = require("../../../runtimes/react");
+var import_BackgroundsContainer = __toESM(require("../../shared/BackgroundsContainer"));
+var import_use_global_style = require("../../../runtimes/react/use-global-style");
+var import_grid_item = require("../../shared/grid-item");
+var import_use_style = require("../../../runtimes/react/use-style");
+const Root = (0, import_react.forwardRef)(function Page({ children, backgrounds, rowGap, columnGap }, ref) {
+  (0, import_use_global_style.useGlobalStyle)({
+    html: {
+      boxSizing: "border-box"
+    },
+    "*, *::before, *::after": {
+      boxSizing: "inherit"
+    }
+  });
+  (0, import_use_global_style.useGlobalStyle)((0, import_polished.normalize)());
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BackgroundsContainer.default, { ref, style: { background: "white" }, backgrounds, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" }), children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_grid_item.GridItem,
+    {
+      grid: children.columns,
+      index,
+      columnGap,
+      rowGap,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Element, { element: child })
+    },
+    child.key
+  )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, {}) }) });
+});
+var Root_default = Root;
+//# sourceMappingURL=Root.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDc;AAlDd,sBAA0B;AAC1B,mBAAgC;AAEhC,yBAAwB;AAOxB,IAAAA,gBAAwB;AACxB,kCAAiC;AACjC,8BAA+B;AAC/B,uBAAyB;AACzB,uBAAyB;AASzB,MAAM,WAAO,yBAAW,SAAS,KAC/B,EAAE,UAAU,aAAa,QAAQ,UAAU,GAC3C,KACA;AACA,8CAAe;AAAA,IACb,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IACA,0BAA0B;AAAA,MACxB,WAAW;AAAA,IACb;AAAA,EACF,CAAC;AAED,kDAAe,2BAAU,CAAC;AAE1B,SACE,4CAAC,4BAAAC,SAAA,EAAqB,KAAU,OAAO,EAAE,YAAY,QAAQ,GAAG,aAC9D,sDAAC,SAAI,eAAW,2BAAS,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,sDAAC,yBAAQ,SAAS,OAAO;AAAA;AAAA,IANpB,MAAM;AAAA,EAOb,CACD,IAED,4CAAC,mBAAAC,SAAA,EAAY,GAEjB,GACF;AAEJ,CAAC;AAED,IAAO,eAAQ;","names":["import_react","BackgroundsContainer","Placeholder"]}