@measured/puck 0.1.4 → 0.1.5

package/dist/index.js

@@ -0,0 +1,1188 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+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 __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// ../../node_modules/classnames/index.js
+var require_classnames = __commonJS({
+  "../../node_modules/classnames/index.js"(exports, module2) {
+    (function() {
+      "use strict";
+      var hasOwn = {}.hasOwnProperty;
+      var nativeCodeString = "[native code]";
+      function classNames() {
+        var classes = [];
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (!arg)
+            continue;
+          var argType = typeof arg;
+          if (argType === "string" || argType === "number") {
+            classes.push(arg);
+          } else if (Array.isArray(arg)) {
+            if (arg.length) {
+              var inner = classNames.apply(null, arg);
+              if (inner) {
+                classes.push(inner);
+              }
+            }
+          } else if (argType === "object") {
+            if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+              classes.push(arg.toString());
+              continue;
+            }
+            for (var key in arg) {
+              if (hasOwn.call(arg, key) && arg[key]) {
+                classes.push(key);
+              }
+            }
+          }
+        }
+        return classes.join(" ");
+      }
+      if (typeof module2 !== "undefined" && module2.exports) {
+        classNames.default = classNames;
+        module2.exports = classNames;
+      } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
+        define("classnames", [], function() {
+          return classNames;
+        });
+      } else {
+        window.classNames = classNames;
+      }
+    })();
+  }
+});
+
+// index.ts
+var core_exports = {};
+__export(core_exports, {
+  Puck: () => Puck,
+  Render: () => Render
+});
+module.exports = __toCommonJS(core_exports);
+
+// components/Puck/index.tsx
+var import_react6 = require("react");
+var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
+
+// components/DroppableStrictMode/index.tsx
+var import_react = require("react");
+var import_react_beautiful_dnd = require("react-beautiful-dnd");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DroppableStrictMode = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  const [enabled, setEnabled] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_beautiful_dnd.Droppable, __spreadProps(__spreadValues({}, props), { children }));
+};
+var DroppableStrictMode_default = DroppableStrictMode;
+
+// components/DraggableComponent/index.tsx
+var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
+var styles_module_default = { "DraggableComponent": "_DraggableComponent_10y0g_1", "DraggableComponent-contents": "_DraggableComponent-contents_10y0g_5", "DraggableComponent-overlay": "_DraggableComponent-overlay_10y0g_9", "DraggableComponent--isModifierHeld": "_DraggableComponent--isModifierHeld_10y0g_25", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_10y0g_29", "DraggableComponent-actions": "_DraggableComponent-actions_10y0g_34", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_10y0g_49", "DraggableComponent-action": "_DraggableComponent-action_10y0g_34" };
+
+// lib/get-class-name-factory.ts
+var import_classnames = __toESM(require_classnames());
+var getClassNameFactory = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
+  let descendant = false;
+  let modifiers = false;
+  if (typeof options === "string") {
+    descendant = options;
+  } else if (typeof options === "object") {
+    modifiers = options;
+  }
+  if (descendant) {
+    return baseClass + styles[`${rootClass}-${descendant}`] || "";
+  } else if (modifiers) {
+    const prefixedModifiers = {};
+    for (let modifier in modifiers) {
+      prefixedModifiers[styles[`${rootClass}--${modifier}`]] = modifiers[modifier];
+    }
+    const c = styles[rootClass];
+    return baseClass + (0, import_classnames.default)(__spreadValues({
+      [c]: !!c
+    }, prefixedModifiers));
+  } else {
+    return baseClass + styles[rootClass] || "";
+  }
+};
+var get_class_name_factory_default = getClassNameFactory;
+
+// components/DraggableComponent/index.tsx
+var import_react_feather = require("react-feather");
+
+// lib/use-modifier-held.ts
+var import_react2 = require("react");
+var useModifierHeld = (modifier) => {
+  const [modifierHeld, setModifierHeld] = (0, import_react2.useState)(false);
+  function downHandler({ key }) {
+    if (key === modifier) {
+      setModifierHeld(true);
+    }
+  }
+  function upHandler({ key }) {
+    if (key === modifier) {
+      setModifierHeld(false);
+    }
+  }
+  (0, import_react2.useEffect)(() => {
+    window.addEventListener("keydown", downHandler);
+    window.addEventListener("keyup", upHandler);
+    return () => {
+      window.removeEventListener("keydown", downHandler);
+      window.removeEventListener("keyup", upHandler);
+    };
+  }, []);
+  return modifierHeld;
+};
+
+// components/DraggableComponent/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var getClassName = get_class_name_factory_default("DraggableComponent", styles_module_default);
+var DraggableComponent = ({
+  children,
+  id,
+  index,
+  isSelected = false,
+  onClick = () => null,
+  onDelete = () => null,
+  onDuplicate = () => null,
+  debug,
+  label
+}) => {
+  const isModifierHeld = useModifierHeld("Alt");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_beautiful_dnd2.Draggable, { draggableId: id, index, children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref: provided.innerRef
+    }, provided.draggableProps), provided.dragHandleProps), {
+      className: getClassName({ isSelected, isModifierHeld }),
+      style: __spreadProps(__spreadValues({}, provided.draggableProps.style), {
+        cursor: isModifierHeld ? "initial" : "grab"
+      }),
+      children: [
+        debug,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName("contents"), children }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName("overlay"), onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: getClassName("actions"), children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: getClassName("actionsLabel"), children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.Copy, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: getClassName("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_feather.Trash, {}) })
+        ] }) })
+      ]
+    })
+  ) }, id);
+};
+
+// components/ExternalInput/index.tsx
+var import_react3 = require("react");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css#css-module
+var styles_module_default2 = { "ExternalInput": "_ExternalInput_v316c_1", "ExternalInput-actions": "_ExternalInput-actions_v316c_5", "ExternalInput-button": "_ExternalInput-button_v316c_9", "ExternalInput-detachButton": "_ExternalInput-detachButton_v316c_23", "ExternalInput--hasData": "_ExternalInput--hasData_v316c_30", "ExternalInput-modal": "_ExternalInput-modal_v316c_45", "ExternalInput--modalVisible": "_ExternalInput--modalVisible_v316c_59", "ExternalInput-modalInner": "_ExternalInput-modalInner_v316c_63", "ExternalInput-modalHeading": "_ExternalInput-modalHeading_v316c_74", "ExternalInput-modalTableWrapper": "_ExternalInput-modalTableWrapper_v316c_79" };
+
+// components/ExternalInput/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getClassName2 = get_class_name_factory_default("ExternalInput", styles_module_default2);
+var ExternalInput = ({
+  field,
+  onChange,
+  value = null
+}) => {
+  const [data, setData] = (0, import_react3.useState)([]);
+  const [isOpen, setOpen] = (0, import_react3.useState)(false);
+  const [selectedData, setSelectedData] = (0, import_react3.useState)(value);
+  (0, import_react3.useEffect)(() => {
+    (() => __async(void 0, null, function* () {
+      if (field.adaptor) {
+        const listData = yield field.adaptor.fetchList(field.adaptorParams);
+        if (listData) {
+          setData(listData);
+        }
+      }
+    }))();
+  }, [field.adaptor, field.adaptorParams]);
+  if (!field.adaptor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "Incorrectly configured" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: getClassName2({
+        hasData: !!selectedData,
+        modalVisible: isOpen
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: getClassName2("actions"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              onClick: () => setOpen(true),
+              className: getClassName2("button"),
+              children: selectedData ? selectedData.attributes.title : `Select from ${field.adaptor.name}`
+            }
+          ),
+          selectedData && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              className: getClassName2("detachButton"),
+              onClick: () => {
+                setSelectedData(null);
+                onChange(null);
+              },
+              children: "Detach"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName2("modal"), onClick: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: getClassName2("modalInner"),
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: getClassName2("modalHeading"), children: "Select content" }),
+              data.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: getClassName2("modalTableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: Object.keys(data[0].attributes).map((key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: { textAlign: "left" }, children: key }, key)) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: data.map((item) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "tr",
+                    {
+                      style: { whiteSpace: "nowrap" },
+                      onClick: (e) => {
+                        onChange(item);
+                        setOpen(false);
+                        setSelectedData(item);
+                      },
+                      children: Object.keys(item.attributes).map((key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { children: item.attributes[key] }, key))
+                    },
+                    item.id
+                  );
+                }) })
+              ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: "No content" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css#css-module
+var styles_module_default3 = { "Input": "_Input_1vwgb_1", "Input-label": "_Input-label_1vwgb_14", "Input-input": "_Input-input_1vwgb_20", "Input--readOnly": "_Input--readOnly_1vwgb_41", "Input-group": "_Input-group_1vwgb_50", "Input-action": "_Input-action_1vwgb_72", "Input-addButton": "_Input-addButton_1vwgb_93", "Input-item": "_Input-item_1vwgb_107", "Input-radioGroup": "_Input-radioGroup_1vwgb_114", "Input-radioGroupItems": "_Input-radioGroupItems_1vwgb_119", "Input-radio": "_Input-radio_1vwgb_114" };
+
+// lib/filter.ts
+var filter = (obj, validKeys) => {
+  return validKeys.reduce((acc, item) => {
+    if (typeof obj[item] !== "undefined") {
+      return __spreadProps(__spreadValues({}, acc), { [item]: obj[item] });
+    }
+    return acc;
+  }, {});
+};
+
+// lib/reorder.ts
+var reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+// lib/replace.ts
+var replace = (list, index, newItem) => {
+  const result = Array.from(list);
+  result.splice(index, 1);
+  result.splice(index, 0, newItem);
+  return result;
+};
+
+// components/InputOrGroup/index.tsx
+var import_react_feather2 = require("react-feather");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var getClassName3 = get_class_name_factory_default("Input", styles_module_default3);
+var InputOrGroup = ({
+  name,
+  field,
+  value,
+  label,
+  onChange,
+  readOnly
+}) => {
+  if (field.type === "group") {
+    if (!field.groupFields) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("b", { className: getClassName3("label"), children: label || name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("item"), children: [
+        Array.isArray(value) ? value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("details", { className: getClassName3("group"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("summary", { children: [
+            field.getItemSummary ? field.getItemSummary(item, i) : `Item #${i}`,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: getClassName3("action"),
+                onClick: () => {
+                  const existingValue = value || [];
+                  existingValue.splice(i, 1);
+                  onChange(existingValue);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_feather2.Trash, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("fieldset", { children: Object.keys(field.groupFields).map((fieldName) => {
+            const subField = field.groupFields[fieldName];
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              InputOrGroup,
+              {
+                name: `${name}_${i}_${fieldName}`,
+                label: fieldName,
+                field: subField,
+                value: item[fieldName],
+                onChange: (val) => onChange(
+                  replace(value, i, __spreadProps(__spreadValues({}, item), { [fieldName]: val }))
+                )
+              },
+              `${name}_${i}_${fieldName}`
+            );
+          }) })
+        ] }, `${name}_${i}`)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            className: getClassName3("addButton"),
+            onClick: () => {
+              const existingValue = value || [];
+              onChange([...existingValue, field.defaultItemProps || {}]);
+            },
+            children: "Add item"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (field.type === "external") {
+    if (!field.adaptor) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3(""), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("label"), children: name === "_data" ? "External content" : label || name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ExternalInput, { field, onChange, value })
+    ] });
+  }
+  if (field.type === "select") {
+    if (!field.options) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("label"), children: label || name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "select",
+        {
+          className: getClassName3("input"),
+          onChange: (e) => onChange(e.currentTarget.value),
+          value,
+          children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "option",
+            {
+              label: option.label,
+              value: option.value
+            },
+            option.label + option.value
+          ))
+        }
+      )
+    ] });
+  }
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3({ readOnly }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("label"), children: label || name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "textarea",
+        {
+          className: getClassName3("input"),
+          autoComplete: "off",
+          name,
+          value,
+          onChange: (e) => onChange(e.currentTarget.value),
+          readOnly,
+          rows: 5
+        }
+      )
+    ] });
+  }
+  if (field.type === "radio") {
+    if (!field.options) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: getClassName3("radioGroup"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("label"), children: field.label || name }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("radioGroupItems"), children: field.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "label",
+        {
+          className: getClassName3("radio"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                type: "radio",
+                value: option.value,
+                name,
+                onChange: (e) => onChange(e.currentTarget.value),
+                readOnly,
+                defaultChecked: value === option.value
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: option.label || option.value })
+          ]
+        },
+        option.label + option.value
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: getClassName3({ readOnly }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: getClassName3("label"), children: label || name }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "input",
+      {
+        className: getClassName3("input"),
+        autoComplete: "off",
+        type: field.type,
+        name,
+        value,
+        onChange: (e) => onChange(e.currentTarget.value),
+        readOnly
+      }
+    )
+  ] });
+};
+
+// components/ComponentList/index.tsx
+var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
+var styles_module_default4 = { "ComponentList": "_ComponentList_91nmt_1", "ComponentList-item": "_ComponentList-item_91nmt_9", "ComponentList-itemShadow": "_ComponentList-itemShadow_91nmt_10", "ComponentList-itemIcon": "_ComponentList-itemIcon_91nmt_24" };
+
+// components/ComponentList/index.tsx
+var import_react_feather3 = require("react-feather");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var getClassName4 = get_class_name_factory_default("ComponentList", styles_module_default4);
+var ComponentList = ({ config }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DroppableStrictMode_default, { droppableId: "component-list", isDropDisabled: true, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    __spreadProps(__spreadValues({}, provided.droppableProps), {
+      ref: provided.innerRef,
+      className: getClassName4(),
+      children: Object.keys(config.components).map((componentKey, i) => {
+        const componentConfig = config[componentKey];
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_beautiful_dnd3.Draggable,
+          {
+            draggableId: componentKey,
+            index: i,
+            children: (provided2, snapshot2) => {
+              var _a;
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "div",
+                  __spreadProps(__spreadValues(__spreadValues({
+                    ref: provided2.innerRef
+                  }, provided2.draggableProps), provided2.dragHandleProps), {
+                    className: getClassName4("item"),
+                    style: __spreadProps(__spreadValues({}, provided2.draggableProps.style), {
+                      transform: snapshot2.isDragging ? (_a = provided2.draggableProps.style) == null ? void 0 : _a.transform : "translate(0px, 0px)"
+                    }),
+                    children: [
+                      componentKey,
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName4("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_feather3.Grid, { size: 18 }) })
+                    ]
+                  })
+                ),
+                snapshot2.isDragging && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "div",
+                  {
+                    className: getClassName4("itemShadow"),
+                    style: { transform: "none !important" },
+                    children: [
+                      componentKey,
+                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: getClassName4("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_feather3.Grid, { size: 18 }) })
+                    ]
+                  }
+                )
+              ] });
+            }
+          },
+          componentKey
+        );
+      })
+    })
+  ) });
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css#css-module
+var styles_module_default5 = { "OutlineList": "_OutlineList_gor6f_1", "OutlineList-clickableItem": "_OutlineList-clickableItem_gor6f_36" };
+
+// components/OutlineList/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var getClassName5 = get_class_name_factory_default("OutlineList", styles_module_default5);
+var OutlineList = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: getClassName5(), children });
+};
+OutlineList.Clickable = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: getClassName5("clickableItem"), children });
+OutlineList.Item = ({
+  children,
+  onClick
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "li",
+    {
+      className: onClick ? getClassName5("clickableItem") : "",
+      onClick,
+      children
+    }
+  );
+};
+
+// components/Button/Button.tsx
+var import_react4 = require("react");
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css#css-module
+var Button_module_default = { "Button": "_Button_1bqmn_1", "Button--primary": "_Button--primary_1bqmn_25", "Button--secondary": "_Button--secondary_1bqmn_34", "Button--flush": "_Button--flush_1bqmn_45", "Button--disabled": "_Button--disabled_1bqmn_49", "Button--fullWidth": "_Button--fullWidth_1bqmn_59" };
+
+// components/Button/Button.tsx
+var import_react_spinners = require("react-spinners");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var getClassName6 = get_class_name_factory_default("Button", Button_module_default);
+var Button = ({
+  children,
+  href,
+  onClick,
+  variant = "primary",
+  type,
+  disabled,
+  tabIndex,
+  newTab,
+  fullWidth
+}) => {
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const ElementType = href ? "a" : "button";
+  const el = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    ElementType,
+    {
+      className: getClassName6({
+        primary: variant === "primary",
+        secondary: variant === "secondary",
+        disabled,
+        fullWidth
+      }),
+      onClick: (e) => {
+        if (!onClick)
+          return;
+        setLoading(true);
+        Promise.resolve(onClick(e)).then(() => {
+          setLoading(false);
+        });
+      },
+      type,
+      disabled: disabled || loading,
+      tabIndex,
+      target: newTab ? "_blank" : void 0,
+      rel: newTab ? "noreferrer" : void 0,
+      href,
+      children: [
+        children,
+        loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          "\xA0\xA0",
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners.ClipLoader, { color: "inherit", size: "14px" })
+        ] })
+      ]
+    }
+  );
+  return el;
+};
+
+// lib/use-placeholder-style.ts
+var import_react5 = require("react");
+var usePlaceholderStyle = () => {
+  const queryAttr = "data-rbd-drag-handle-draggable-id";
+  const [placeholderStyle, setPlaceholderStyle] = (0, import_react5.useState)();
+  const onDragUpdate = (update) => {
+    if (!update.destination) {
+      return;
+    }
+    const draggableId = update.draggableId;
+    const destinationIndex = update.destination.index;
+    const domQuery = `[${queryAttr}='${draggableId}']`;
+    const draggedDOM = document.querySelector(domQuery);
+    if (!draggedDOM) {
+      return;
+    }
+    const targetListElement = document.querySelector("#puck-drop-zone");
+    const { clientHeight } = draggedDOM;
+    if (!targetListElement) {
+      return;
+    }
+    let clientY = 0;
+    if (destinationIndex > 0) {
+      const children = Array.from(targetListElement.children).filter((item) => item !== draggedDOM).slice(0, destinationIndex);
+      clientY = children.reduce(
+        (total, item) => total + item.clientHeight + parseInt(window.getComputedStyle(item).marginTop.replace("px", "")),
+        0
+      );
+    }
+    setPlaceholderStyle({
+      position: "absolute",
+      top: clientY,
+      left: 0,
+      height: clientHeight,
+      width: "100%"
+    });
+  };
+  return { onDragUpdate, placeholderStyle };
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
+var styles_module_default6 = { "SidebarSection": "_SidebarSection_jsf8x_1", "SidebarSection-content": "_SidebarSection-content_jsf8x_1", "SidebarSection-title": "_SidebarSection-title_jsf8x_6" };
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css#css-module
+var styles_module_default7 = { "Heading": "_Heading_1y35v_1", "Heading--xxxxl": "_Heading--xxxxl_1y35v_12", "Heading--xxxl": "_Heading--xxxl_1y35v_18", "Heading--xxl": "_Heading--xxl_1y35v_22", "Heading--xl": "_Heading--xl_1y35v_26", "Heading--l": "_Heading--l_1y35v_30", "Heading--m": "_Heading--m_1y35v_34", "Heading--s": "_Heading--s_1y35v_38", "Heading--xs": "_Heading--xs_1y35v_42" };
+
+// components/Heading/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var getClassName7 = get_class_name_factory_default("Heading", styles_module_default7);
+var Heading = ({ children, rank, size = "m" }) => {
+  const Tag = rank ? `h${rank}` : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Tag,
+    {
+      className: getClassName7({
+        [size]: true
+      }),
+      children
+    }
+  );
+};
+
+// components/SidebarSection/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getClassName8 = get_class_name_factory_default("SidebarSection", styles_module_default6);
+var SidebarSection = ({
+  children,
+  title
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("details", { className: getClassName8({}), open: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("summary", { className: getClassName8("title"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Heading, { rank: 2, size: "xs", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: getClassName8("content"), children })
+  ] });
+};
+
+// lib/scroll-into-view.ts
+var scrollIntoView = (el) => {
+  const oldStyle = __spreadValues({}, el.style);
+  el.style.scrollMargin = "256px";
+  if (el) {
+    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
+    el.style.scrollMargin = oldStyle.scrollMargin || "";
+  }
+};
+
+// components/Puck/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var defaultPageFields = {
+  title: { type: "text" }
+};
+var PluginRenderer = ({
+  children,
+  data,
+  plugins,
+  renderMethod
+}) => {
+  return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Item, { data, children: accChildren }),
+    children
+  );
+};
+function Puck({
+  config,
+  data: initialData = { content: [], page: { title: "" } },
+  onChange,
+  onPublish,
+  plugins = [],
+  renderHeader
+}) {
+  var _a, _b;
+  const [data, setData] = (0, import_react6.useState)(initialData);
+  const [selectedIndex, setSelectedIndex] = (0, import_react6.useState)(null);
+  const Page = (0, import_react6.useCallback)(
+    (pageProps) => {
+      var _a2, _b2;
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        PluginRenderer,
+        {
+          plugins,
+          renderMethod: "renderPage",
+          data: pageProps.data,
+          children: ((_a2 = config.page) == null ? void 0 : _a2.render) ? (_b2 = config.page) == null ? void 0 : _b2.render(__spreadProps(__spreadValues({}, pageProps), { editMode: true })) : pageProps.children
+        }
+      );
+    },
+    [config.page]
+  );
+  const PageFieldWrapper = (0, import_react6.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      PluginRenderer,
+      {
+        plugins,
+        renderMethod: "renderPageFields",
+        data: props.data,
+        children: props.children
+      }
+    ),
+    []
+  );
+  const ComponentFieldWrapper = (0, import_react6.useCallback)(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      PluginRenderer,
+      {
+        plugins,
+        renderMethod: "renderFields",
+        data: props.data,
+        children: props.children
+      }
+    ),
+    []
+  );
+  const FieldWrapper = selectedIndex !== null ? ComponentFieldWrapper : PageFieldWrapper;
+  const pageFields = ((_a = config.page) == null ? void 0 : _a.fields) || defaultPageFields;
+  let fields = selectedIndex !== null ? ((_b = config.components[data.content[selectedIndex].type]) == null ? void 0 : _b.fields) || {} : pageFields;
+  (0, import_react6.useEffect)(() => {
+    if (onChange)
+      onChange(data);
+  }, [data]);
+  const { onDragUpdate, placeholderStyle } = usePlaceholderStyle();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_beautiful_dnd4.DragDropContext,
+    {
+      onDragUpdate,
+      onDragEnd: (droppedItem) => {
+        if (!droppedItem.destination) {
+          console.warn("No destination specified");
+          return;
+        }
+        if (droppedItem.source.droppableId === "component-list") {
+          const emptyComponentData = {
+            type: droppedItem.draggableId,
+            props: __spreadProps(__spreadValues({}, config.components[droppedItem.draggableId].defaultProps || {}), {
+              id: `${droppedItem.draggableId}-${(/* @__PURE__ */ new Date()).getTime()}`
+              // TODO make random string
+            })
+          };
+          const newData = __spreadValues({}, data);
+          newData.content.splice(
+            droppedItem.destination.index,
+            0,
+            emptyComponentData
+          );
+          setData(newData);
+          setSelectedIndex(droppedItem.destination.index);
+        } else {
+          setData(__spreadProps(__spreadValues({}, data), {
+            content: reorder(
+              data.content,
+              droppedItem.source.index,
+              droppedItem.destination.index
+            )
+          }));
+          setSelectedIndex(null);
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateAreas: '"header header header" "left editor right"',
+            gridTemplateColumns: "256px auto 256px",
+            gridTemplateRows: "min-content auto",
+            height: "100vh",
+            position: "fixed",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            right: 0
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "header",
+              {
+                style: {
+                  background: "var(--puck-color-grey-0)",
+                  color: "white",
+                  gridArea: "header",
+                  borderBottom: "1px solid #cccccc"
+                },
+                children: renderHeader ? renderHeader({
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      onClick: () => {
+                        onPublish(data);
+                      },
+                      children: "Publish"
+                    }
+                  ),
+                  data,
+                  setData
+                }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "flex-end",
+                      padding: 16
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      Button,
+                      {
+                        onClick: () => {
+                          onPublish(data);
+                        },
+                        children: "Publish"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              "div",
+              {
+                style: {
+                  gridArea: "left",
+                  background: "var(--puck-color-grey-10)",
+                  overflowY: "auto"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarSection, { title: "Components", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ComponentList, { config }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OutlineList, { children: data.content.map((item, i) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      OutlineList.Item,
+                      {
+                        onClick: () => {
+                          setSelectedIndex(i);
+                          const id = data.content[i].props.id;
+                          scrollIntoView(
+                            document.querySelector(
+                              `[data-rbd-drag-handle-draggable-id="draggable-${id}"]`
+                            )
+                          );
+                        },
+                        children: item.type
+                      },
+                      i
+                    );
+                  }) }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                style: {
+                  background: "var(--puck-color-grey-8)",
+                  padding: 32,
+                  overflowY: "auto",
+                  gridArea: "editor"
+                },
+                onClick: () => setSelectedIndex(null),
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "div",
+                  {
+                    className: "puck-root",
+                    style: {
+                      background: "white",
+                      borderRadius: 16,
+                      overflow: "hidden",
+                      zoom: 0.75
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Page, __spreadProps(__spreadValues({ data }, data.page), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DroppableStrictMode_default, { droppableId: "droppable", children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      "div",
+                      __spreadProps(__spreadValues({}, provided.droppableProps), {
+                        ref: provided.innerRef,
+                        style: {
+                          minHeight: 128,
+                          position: "relative",
+                          zoom: 1.33
+                        },
+                        id: "puck-drop-zone",
+                        children: [
+                          data.content.map((item, i) => {
+                            return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              DraggableComponent,
+                              {
+                                label: item.type.toString(),
+                                id: `draggable-${item.props.id}`,
+                                index: i,
+                                isSelected: selectedIndex === i,
+                                onClick: (e) => {
+                                  setSelectedIndex(i);
+                                  e.stopPropagation();
+                                },
+                                onDelete: (e) => {
+                                  const newData = __spreadValues({}, data);
+                                  newData.content.splice(i, 1);
+                                  setSelectedIndex(null);
+                                  setData(newData);
+                                  e.stopPropagation();
+                                },
+                                onDuplicate: (e) => {
+                                  const newData = __spreadValues({}, data);
+                                  const newItem = __spreadProps(__spreadValues({}, newData.content[i]), {
+                                    props: __spreadProps(__spreadValues({}, newData.content[i].props), {
+                                      id: `${newData.content[i].type}-${(/* @__PURE__ */ new Date()).getTime()}`
+                                    })
+                                  });
+                                  newData.content.splice(i + 1, 0, newItem);
+                                  setData(newData);
+                                  e.stopPropagation();
+                                },
+                                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { zoom: 0.75 }, children: config.components[item.type] ? config.components[item.type].render(__spreadProps(__spreadValues(__spreadValues({}, config.components[item.type].defaultProps), item.props), {
+                                  editMode: true
+                                })) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+                                  "No configuration for ",
+                                  item.type
+                                ] }) })
+                              },
+                              item.props.id
+                            );
+                          }),
+                          provided.placeholder,
+                          snapshot.isDraggingOver && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            "div",
+                            {
+                              style: __spreadProps(__spreadValues({}, placeholderStyle), {
+                                background: "var(--puck-color-azure-8)",
+                                zIndex: 0
+                              })
+                            }
+                          )
+                        ]
+                      })
+                    ) }) }))
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "div",
+              {
+                style: {
+                  background: "var(--puck-color-grey-10)",
+                  overflowY: "auto",
+                  gridArea: "right",
+                  fontFamily: "var(--puck-font-stack)"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  SidebarSection,
+                  {
+                    title: selectedIndex !== null ? data.content[selectedIndex].type : "Page",
+                    children: Object.keys(fields).map((fieldName) => {
+                      var _a2, _b2, _c, _d;
+                      const field = fields[fieldName];
+                      const onChange2 = (value) => {
+                        let currentProps;
+                        let newProps;
+                        if (selectedIndex !== null) {
+                          currentProps = data.content[selectedIndex].props;
+                        } else {
+                          currentProps = data.page;
+                        }
+                        if (fieldName === "_data") {
+                          if (!value) {
+                            const _a3 = currentProps._meta || {}, { locked } = _a3, _meta = __objRest(_a3, ["locked"]);
+                            newProps = __spreadProps(__spreadValues({}, currentProps), {
+                              _data: void 0,
+                              _meta
+                            });
+                          } else {
+                            const changedFields = filter(
+                              // filter out anything not supported by this component
+                              value.attributes,
+                              // TODO type properly after getting proper state library
+                              Object.keys(fields)
+                            );
+                            newProps = __spreadProps(__spreadValues(__spreadValues({}, currentProps), changedFields), {
+                              _data: value,
+                              // TODO perf - this is duplicative and will make payload larger
+                              _meta: {
+                                locked: Object.keys(changedFields)
+                              }
+                            });
+                          }
+                        } else {
+                          newProps = __spreadProps(__spreadValues({}, currentProps), {
+                            [fieldName]: value
+                          });
+                        }
+                        if (selectedIndex !== null) {
+                          setData(__spreadProps(__spreadValues({}, data), {
+                            content: replace(data.content, selectedIndex, __spreadProps(__spreadValues({}, data.content[selectedIndex]), {
+                              props: newProps
+                            }))
+                          }));
+                        } else {
+                          setData(__spreadProps(__spreadValues({}, data), { page: newProps }));
+                        }
+                      };
+                      if (selectedIndex !== null) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          InputOrGroup,
+                          {
+                            field,
+                            name: fieldName,
+                            label: field.label,
+                            readOnly: ((_b2 = (_a2 = data.content[selectedIndex].props._meta) == null ? void 0 : _a2.locked) == null ? void 0 : _b2.indexOf(fieldName)) > -1,
+                            value: data.content[selectedIndex].props[fieldName],
+                            onChange: onChange2
+                          },
+                          `${data.content[selectedIndex].props.id}_${fieldName}`
+                        );
+                      } else {
+                        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          InputOrGroup,
+                          {
+                            field,
+                            name: fieldName,
+                            label: field.label,
+                            readOnly: ((_d = (_c = data.page._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(fieldName)) > -1,
+                            value: data.page[fieldName],
+                            onChange: onChange2
+                          },
+                          `page_${fieldName}`
+                        );
+                      }
+                    })
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+
+// components/Render/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Render({ config, data }) {
+  const children = data.content.map((item) => {
+    const Component = config.components[item.type].render;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, __spreadValues({}, item.props), item.props.id);
+  });
+  if (config.page) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(config.page.render, __spreadProps(__spreadValues({}, data.page), { editMode: false, children }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Puck,
+  Render
+});
+/*! Bundled license information:
+
+classnames/index.js:
+  (*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  *)
+*/