@makeswift/runtime 0.0.0-018e17a

package/dist/components.es.js

@@ -0,0 +1,298 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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));
+import styled, { css, createGlobalStyle } from "styled-components";
+import { forwardRef } from "react";
+import { j as jsx, b as jsxs, F as Fragment, E as Element } from "./react.es2.js";
+import "./actions.es.js";
+function normalize() {
+  var _ref;
+  return [(_ref = {
+    html: {
+      lineHeight: "1.15",
+      textSizeAdjust: "100%"
+    },
+    body: {
+      margin: "0"
+    },
+    h1: {
+      fontSize: "2em",
+      margin: "0.67em 0"
+    },
+    hr: {
+      boxSizing: "content-box",
+      height: "0",
+      overflow: "visible"
+    },
+    pre: {
+      fontFamily: "monospace, monospace",
+      fontSize: "1em"
+    },
+    a: {
+      backgroundColor: "transparent"
+    },
+    "abbr[title]": {
+      borderBottom: "none",
+      textDecoration: "underline"
+    }
+  }, _ref["b,\n    strong"] = {
+    fontWeight: "bolder"
+  }, _ref["code,\n    kbd,\n    samp"] = {
+    fontFamily: "monospace, monospace",
+    fontSize: "1em"
+  }, _ref.small = {
+    fontSize: "80%"
+  }, _ref["sub,\n    sup"] = {
+    fontSize: "75%",
+    lineHeight: "0",
+    position: "relative",
+    verticalAlign: "baseline"
+  }, _ref.sub = {
+    bottom: "-0.25em"
+  }, _ref.sup = {
+    top: "-0.5em"
+  }, _ref.img = {
+    borderStyle: "none"
+  }, _ref["button,\n    input,\n    optgroup,\n    select,\n    textarea"] = {
+    fontFamily: "inherit",
+    fontSize: "100%",
+    lineHeight: "1.15",
+    margin: "0"
+  }, _ref["button,\n    input"] = {
+    overflow: "visible"
+  }, _ref["button,\n    select"] = {
+    textTransform: "none"
+  }, _ref['button,\n    html [type="button"],\n    [type="reset"],\n    [type="submit"]'] = {
+    WebkitAppearance: "button"
+  }, _ref['button::-moz-focus-inner,\n    [type="button"]::-moz-focus-inner,\n    [type="reset"]::-moz-focus-inner,\n    [type="submit"]::-moz-focus-inner'] = {
+    borderStyle: "none",
+    padding: "0"
+  }, _ref['button:-moz-focusring,\n    [type="button"]:-moz-focusring,\n    [type="reset"]:-moz-focusring,\n    [type="submit"]:-moz-focusring'] = {
+    outline: "1px dotted ButtonText"
+  }, _ref.fieldset = {
+    padding: "0.35em 0.625em 0.75em"
+  }, _ref.legend = {
+    boxSizing: "border-box",
+    color: "inherit",
+    display: "table",
+    maxWidth: "100%",
+    padding: "0",
+    whiteSpace: "normal"
+  }, _ref.progress = {
+    verticalAlign: "baseline"
+  }, _ref.textarea = {
+    overflow: "auto"
+  }, _ref['[type="checkbox"],\n    [type="radio"]'] = {
+    boxSizing: "border-box",
+    padding: "0"
+  }, _ref['[type="number"]::-webkit-inner-spin-button,\n    [type="number"]::-webkit-outer-spin-button'] = {
+    height: "auto"
+  }, _ref['[type="search"]'] = {
+    WebkitAppearance: "textfield",
+    outlineOffset: "-2px"
+  }, _ref['[type="search"]::-webkit-search-decoration'] = {
+    WebkitAppearance: "none"
+  }, _ref["::-webkit-file-upload-button"] = {
+    WebkitAppearance: "button",
+    font: "inherit"
+  }, _ref.details = {
+    display: "block"
+  }, _ref.summary = {
+    display: "list-item"
+  }, _ref.template = {
+    display: "none"
+  }, _ref["[hidden]"] = {
+    display: "none"
+  }, _ref), {
+    "abbr[title]": {
+      textDecoration: "underline dotted"
+    }
+  }];
+}
+const PlaceholderBase = styled.div`
+  width: 100%;
+  background: rgba(161, 168, 194, 0.18);
+  height: 80px;
+  padding: 8px;
+`;
+var Placeholder = forwardRef(function Placeholder2(props, ref) {
+  return /* @__PURE__ */ jsx(PlaceholderBase, __spreadProps(__spreadValues({}, props), {
+    ref,
+    children: /* @__PURE__ */ jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      height: "100%",
+      style: {
+        overflow: "visible"
+      },
+      children: /* @__PURE__ */ jsx("rect", {
+        x: 0,
+        y: 0,
+        width: "100%",
+        height: "100%",
+        strokeWidth: 2,
+        strokeDasharray: "4 2",
+        fill: "none",
+        stroke: "rgba(161, 168, 194, 0.40)",
+        rx: "4",
+        ry: "4"
+      })
+    })
+  }));
+});
+const DEVICES = [
+  { id: "desktop", minWidth: 769 },
+  { id: "tablet", minWidth: 476, maxWidth: 768 },
+  { id: "mobile", maxWidth: 475 }
+];
+const getDevice = (deviceId) => {
+  const device = DEVICES.find(({ id }) => id === deviceId);
+  if (device == null)
+    throw new Error(`Unrecognized device ID: "${deviceId}".`);
+  return device;
+};
+function defaultStrategy(value, fallbacks) {
+  return value || fallbacks[0];
+}
+function findDeviceOverride(values = [], deviceId, strategy = defaultStrategy) {
+  const value = values.find(({ deviceId: d }) => d === deviceId);
+  const fallbacks = DEVICES.slice(0, DEVICES.findIndex((d) => d.id === deviceId) + 1).reverse().map((d) => values.find((v) => v.deviceId === d.id)).filter((override) => Boolean(override));
+  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : void 0;
+}
+function join(responsiveValues, joinFn, strategy) {
+  return DEVICES.map(({ id }) => id).map((deviceId) => {
+    const value = joinFn(responsiveValues.map((responsiveValue) => {
+      const deviceValue = responsiveValue && findDeviceOverride(responsiveValue, deviceId, strategy);
+      return deviceValue == null ? void 0 : deviceValue.value;
+    }));
+    if (value == null)
+      return null;
+    return { deviceId, value };
+  }).filter((override) => Boolean(override));
+}
+const getDeviceMediaQuery = (device) => {
+  const parts = ["@media only screen"];
+  if (device.minWidth != null) {
+    parts.push(`(min-width: ${device.minWidth}px)`);
+  }
+  if (device.maxWidth != null) {
+    parts.push(`(max-width: ${device.maxWidth}px)`);
+  }
+  return parts.join(" and ");
+};
+const getIndexes = (spans, index) => {
+  const flattened = spans.reduce((a, s) => a.concat(s), []);
+  if (index < 0 || index > flattened.length)
+    throw new RangeError();
+  let remainder = index;
+  let rowIndex = 0;
+  while (rowIndex < spans.length - 1 && remainder >= spans[rowIndex].length) {
+    remainder -= spans[rowIndex].length;
+    rowIndex += 1;
+  }
+  return [rowIndex, remainder];
+};
+function cssMediaRules(responsiveValues, join$1, strategy) {
+  return (props) => join(typeof responsiveValues === "function" ? responsiveValues(props) : responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
+    const device = getDevice(deviceId);
+    const mediaQuery = getDeviceMediaQuery(device);
+    return css`
+        ${acc}${mediaQuery} {
+          ${value}
+        }
+      `;
+  }, css``);
+}
+const floor = (d) => (v) => Math.floor(10 ** d * v) / 10 ** d;
+function cssGridItem() {
+  return (props) => css`
+    display: flex;
+
+    /* TODO: A default span of 12 won't work once the column count is modifiable. */
+    ${cssMediaRules([props.grid, props.columnGap, props.rowGap], ([
+    { spans, count } = { spans: [[12]], count: 12 },
+    columnGap = { value: 0, unit: "px" },
+    rowGap = { value: 0, unit: "px" }
+  ]) => {
+    const [rowIndex, columnIndex] = getIndexes(spans, props.index);
+    const firstCol = columnIndex === 0;
+    const lastCol = columnIndex === spans[rowIndex].length - 1;
+    const span = spans[rowIndex][columnIndex];
+    const fraction = floor(5)(span / count);
+    const width = `${fraction} * (100% + ${columnGap.value}${columnGap.unit})`;
+    const excessWidth = `${Number(firstCol) + Number(lastCol)} * ${columnGap.value}${columnGap.unit} / 2`;
+    const iePrecisionError = "0.01px";
+    const flexBasis = `calc(${width} - ${excessWidth} - ${iePrecisionError})`;
+    const firstRow = rowIndex === 0;
+    const lastRow = rowIndex === spans.length - 1;
+    return span === 0 ? { display: "none" } : {
+      flexBasis,
+      minWidth: flexBasis,
+      maxWidth: flexBasis,
+      paddingLeft: firstCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingRight: lastCol ? 0 : `${columnGap.value / 2}${columnGap.unit}`,
+      paddingTop: firstRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`,
+      paddingBottom: lastRow ? 0 : `${rowGap.value / 2}${rowGap.unit}`
+    };
+  })}
+  `;
+}
+const Normalize = createGlobalStyle`
+  html {
+    box-sizing: border-box;
+  }
+
+  *, *::before, *::after {
+    box-sizing: inherit;
+  }
+
+  ${normalize()}
+`;
+const Grid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+const GridItem = styled.div`
+  display: flex;
+  align-items: flex-start;
+  ${cssGridItem()}
+`;
+var Root = forwardRef(function Page({
+  children,
+  rowGap,
+  columnGap
+}, ref) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Normalize, {}), /* @__PURE__ */ jsx(Grid, {
+      ref,
+      children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ jsx(GridItem, {
+        grid: children.columns,
+        index,
+        columnGap,
+        rowGap,
+        children: /* @__PURE__ */ jsx(Element, {
+          element: child
+        })
+      }, child.key)) : /* @__PURE__ */ jsx(Placeholder, {})
+    })]
+  });
+});
+export { Root };
+//# sourceMappingURL=components.es.js.map