powr-sdk-web 6.0.0 → 6.1.0

package/dist/shell/styles.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.v = exports.s = exports.SIDEBAR_WIDTH = exports.NARROW_QUERY = exports.HEADER_HEIGHT = void 0;
+var _tokens = require("../theme/tokens");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Shell styles. Every colour is a `--powr-*` var with today's neutral as the
+ * fallback — the wrapper has no palette of its own (clone-leak guardrail).
+ */
+
+var v = exports.v = {
+  bg: (0, _tokens.powrVar)("bg", "#fafafa"),
+  surface: (0, _tokens.powrVar)("surface", "#ffffff"),
+  text: (0, _tokens.powrVar)("text", "#111827"),
+  muted: (0, _tokens.powrVar)("muted", "#6b7280"),
+  border: (0, _tokens.powrVar)("border", "#e5e7eb"),
+  primary: (0, _tokens.powrVar)("primary", "#2563eb"),
+  primaryFg: (0, _tokens.powrVar)("primary-fg", "#ffffff"),
+  danger: (0, _tokens.powrVar)("danger", "#dc2626"),
+  radius: (0, _tokens.powrVar)("radius", "0.5rem"),
+  font: (0, _tokens.powrVar)("font", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif")
+};
+var SIDEBAR_WIDTH = exports.SIDEBAR_WIDTH = 240;
+var HEADER_HEIGHT = exports.HEADER_HEIGHT = 56;
+var NARROW_QUERY = exports.NARROW_QUERY = "(max-width: 900px)";
+var s = exports.s = {
+  root: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    background: v.bg,
+    color: v.text,
+    fontFamily: v.font
+  },
+  header: {
+    position: "sticky",
+    top: 0,
+    zIndex: 40,
+    height: HEADER_HEIGHT,
+    display: "flex",
+    alignItems: "center",
+    gap: 16,
+    padding: "0 16px",
+    borderBottom: "1px solid ".concat(v.border),
+    background: v.surface
+  },
+  brand: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    fontWeight: 700,
+    fontSize: 16,
+    color: v.text,
+    textDecoration: "none",
+    whiteSpace: "nowrap"
+  },
+  headerNav: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    marginLeft: 8
+  },
+  headerRight: {
+    marginLeft: "auto",
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  body: {
+    display: "flex",
+    flex: 1,
+    minHeight: 0
+  },
+  sidebar: {
+    width: SIDEBAR_WIDTH,
+    flexShrink: 0,
+    position: "sticky",
+    top: HEADER_HEIGHT,
+    alignSelf: "flex-start",
+    height: "calc(100vh - ".concat(HEADER_HEIGHT, "px)"),
+    overflowY: "auto",
+    padding: 12,
+    borderRight: "1px solid ".concat(v.border),
+    background: v.surface
+  },
+  main: {
+    flex: 1,
+    minWidth: 0,
+    padding: "calc(24px * var(--powr-density, 1))"
+  },
+  footer: {
+    padding: "12px 16px",
+    borderTop: "1px solid ".concat(v.border),
+    color: v.muted,
+    fontSize: 12,
+    background: v.surface
+  },
+  navItem: function navItem(active, vertical) {
+    return {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: vertical ? "9px 12px" : "6px 10px",
+      borderRadius: v.radius,
+      fontSize: 14,
+      lineHeight: 1.2,
+      textDecoration: "none",
+      cursor: "pointer",
+      whiteSpace: "nowrap",
+      color: active ? v.primary : v.text,
+      background: active ? "color-mix(in srgb, ".concat(v.primary, " 10%, transparent)") : "transparent",
+      fontWeight: active ? 600 : 500
+    };
+  },
+  navIcon: {
+    display: "inline-flex",
+    width: 18,
+    justifyContent: "center",
+    color: "inherit"
+  },
+  iconButton: {
+    width: 36,
+    height: 36,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: v.radius,
+    border: "1px solid ".concat(v.border),
+    background: v.surface,
+    color: v.text,
+    cursor: "pointer",
+    fontSize: 16,
+    padding: 0
+  },
+  avatarButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    height: 36,
+    padding: "0 10px 0 4px",
+    borderRadius: 999,
+    border: "1px solid ".concat(v.border),
+    background: v.surface,
+    color: v.text,
+    cursor: "pointer",
+    fontSize: 13
+  },
+  avatar: {
+    width: 28,
+    height: 28,
+    borderRadius: "50%",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: v.primary,
+    color: v.primaryFg,
+    fontSize: 12,
+    fontWeight: 700
+  },
+  menu: {
+    position: "absolute",
+    right: 0,
+    top: "calc(100% + 6px)",
+    minWidth: 220,
+    padding: 6,
+    borderRadius: v.radius,
+    border: "1px solid ".concat(v.border),
+    background: v.surface,
+    boxShadow: "0 10px 30px rgba(0,0,0,0.12)",
+    zIndex: 50
+  },
+  menuHeader: {
+    padding: "8px 10px 10px",
+    borderBottom: "1px solid ".concat(v.border),
+    marginBottom: 4
+  },
+  menuItem: function menuItem(danger) {
+    return {
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      gap: 8,
+      padding: "8px 10px",
+      borderRadius: "calc(".concat(v.radius, " - 2px)"),
+      border: "none",
+      background: "transparent",
+      color: danger ? v.danger : v.text,
+      fontSize: 14,
+      textAlign: "left",
+      textDecoration: "none",
+      cursor: "pointer"
+    };
+  },
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.4)",
+    zIndex: 60
+  },
+  drawer: function drawer(side) {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      position: "fixed",
+      top: 0,
+      bottom: 0
+    }, side, 0), "width", "min(360px, 90vw)"), "padding", 16), "overflowY", "auto"), "background", v.surface), "color", v.text), "borderLeft", side === "right" ? "1px solid ".concat(v.border) : "none"), "borderRight", side === "left" ? "1px solid ".concat(v.border) : "none"), "boxShadow", "0 0 40px rgba(0,0,0,0.2)"), "zIndex", 61);
+  },
+  drawerHead: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12
+  },
+  gatePage: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    background: v.bg,
+    color: v.text,
+    fontFamily: v.font
+  },
+  gateCard: {
+    width: "min(480px, 100%)",
+    margin: "40px auto",
+    padding: 8
+  },
+  skeletonBar: function skeletonBar(w) {
+    return {
+      height: 12,
+      width: w,
+      borderRadius: 6,
+      background: v.border,
+      opacity: 0.6
+    };
+  }
+};

package/dist/theme/PowrThemeSettings.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PowrThemeSettings;
+var _react = _interopRequireDefault(require("react"));
+var _PowrThemeProvider = require("./PowrThemeProvider");
+var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * User-level theme selectors: scheme · density · product preset.
+ *
+ * Reads and writes through `usePowrTheme()`, so it needs a `PowrThemeProvider`
+ * above it. Legacy apps mount this inside their own Settings page; the
+ * wrapper opens it in a drawer. Presets come from the product — this panel
+ * never invents colours (no colour wheel).
+ *
+ * `onSave` is the hook for card 3 (host `/users/me/preferences`). Until then
+ * changes are live + cached in localStorage by the provider.
+ */
+
+var SCHEME_LABELS = {
+  light: "Light",
+  dark: "Dark",
+  system: "System"
+};
+var DENSITY_LABELS = {
+  comfortable: "Comfortable",
+  compact: "Compact"
+};
+var styles = {
+  root: {
+    display: "grid",
+    gap: 20,
+    color: (0, _tokens.powrVar)("text", "#111827"),
+    fontFamily: (0, _tokens.powrVar)("font", "system-ui, sans-serif")
+  },
+  title: {
+    margin: 0,
+    fontSize: 16,
+    fontWeight: 600
+  },
+  label: {
+    display: "block",
+    fontSize: 12,
+    fontWeight: 600,
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+    color: (0, _tokens.powrVar)("muted", "#6b7280"),
+    marginBottom: 8
+  },
+  segmented: {
+    display: "inline-flex",
+    padding: 3,
+    gap: 2,
+    borderRadius: (0, _tokens.powrVar)("radius", "0.5rem"),
+    border: "1px solid ".concat((0, _tokens.powrVar)("border", "#e5e7eb")),
+    background: (0, _tokens.powrVar)("bg", "#fafafa")
+  },
+  segment: function segment(active) {
+    return {
+      padding: "6px 12px",
+      fontSize: 13,
+      lineHeight: 1.2,
+      borderRadius: "calc(".concat((0, _tokens.powrVar)("radius", "0.5rem"), " - 2px)"),
+      border: "none",
+      cursor: "pointer",
+      background: active ? (0, _tokens.powrVar)("surface", "#fff") : "transparent",
+      color: active ? (0, _tokens.powrVar)("text", "#111827") : (0, _tokens.powrVar)("muted", "#6b7280"),
+      boxShadow: active ? "0 1px 2px rgba(0,0,0,0.08)" : "none",
+      fontWeight: active ? 600 : 400
+    };
+  },
+  presetGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+    gap: 8
+  },
+  presetCard: function presetCard(active) {
+    return {
+      display: "grid",
+      gap: 8,
+      padding: 10,
+      textAlign: "left",
+      cursor: "pointer",
+      borderRadius: (0, _tokens.powrVar)("radius", "0.5rem"),
+      border: "2px solid ".concat(active ? (0, _tokens.powrVar)("primary", "#2563eb") : (0, _tokens.powrVar)("border", "#e5e7eb")),
+      background: (0, _tokens.powrVar)("surface", "#fff"),
+      color: (0, _tokens.powrVar)("text", "#111827")
+    };
+  },
+  swatchRow: {
+    display: "flex",
+    gap: 4
+  },
+  swatch: function swatch(bg) {
+    return {
+      width: 18,
+      height: 18,
+      borderRadius: 4,
+      background: bg,
+      border: "1px solid ".concat((0, _tokens.powrVar)("border", "#e5e7eb"))
+    };
+  },
+  footer: {
+    display: "flex",
+    gap: 8,
+    alignItems: "center"
+  },
+  button: function button(primary) {
+    return {
+      padding: "8px 14px",
+      fontSize: 13,
+      cursor: "pointer",
+      borderRadius: (0, _tokens.powrVar)("radius", "0.5rem"),
+      border: "1px solid ".concat(primary ? (0, _tokens.powrVar)("primary", "#2563eb") : (0, _tokens.powrVar)("border", "#e5e7eb")),
+      background: primary ? (0, _tokens.powrVar)("primary", "#2563eb") : (0, _tokens.powrVar)("surface", "#fff"),
+      color: primary ? (0, _tokens.powrVar)("primary-fg", "#fff") : (0, _tokens.powrVar)("text", "#111827")
+    };
+  },
+  hint: {
+    fontSize: 12,
+    color: (0, _tokens.powrVar)("muted", "#6b7280"),
+    margin: 0
+  }
+};
+function Segmented(_ref) {
+  var value = _ref.value,
+    options = _ref.options,
+    labels = _ref.labels,
+    onChange = _ref.onChange,
+    name = _ref.name;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    role: "radiogroup",
+    "aria-label": name,
+    style: styles.segmented
+  }, options.map(function (opt) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: opt,
+      type: "button",
+      role: "radio",
+      "aria-checked": value === opt,
+      onClick: function onClick() {
+        return onChange(opt);
+      },
+      style: styles.segment(value === opt)
+    }, labels[opt] || opt);
+  }));
+}
+function presetSwatches(preset, dark) {
+  var t = dark && preset.dark || preset.tokens || {};
+  return [t.bg, t.surface, t.primary, t.text].filter(Boolean);
+}
+
+/**
+ * @param {object} props
+ * @param {string} [props.title="Appearance"]
+ * @param {boolean} [props.showScheme=true]
+ * @param {boolean} [props.showDensity=true]
+ * @param {boolean} [props.showPresets=true] - Hidden automatically when the product passed no presets.
+ * @param {(value: {scheme, density, preset}) => void|Promise<void>} [props.onSave] - Card 3: host save. Shows a Save button when given.
+ * @param {boolean} [props.saving]
+ * @param {string} [props.saveLabel="Save"]
+ */
+function PowrThemeSettings(_ref2) {
+  var _ref2$title = _ref2.title,
+    title = _ref2$title === void 0 ? "Appearance" : _ref2$title,
+    _ref2$showScheme = _ref2.showScheme,
+    showScheme = _ref2$showScheme === void 0 ? true : _ref2$showScheme,
+    _ref2$showDensity = _ref2.showDensity,
+    showDensity = _ref2$showDensity === void 0 ? true : _ref2$showDensity,
+    _ref2$showPresets = _ref2.showPresets,
+    showPresets = _ref2$showPresets === void 0 ? true : _ref2$showPresets,
+    onSave = _ref2.onSave,
+    _ref2$saving = _ref2.saving,
+    saving = _ref2$saving === void 0 ? false : _ref2$saving,
+    _ref2$saveLabel = _ref2.saveLabel,
+    saveLabel = _ref2$saveLabel === void 0 ? "Save" : _ref2$saveLabel;
+  var t = (0, _PowrThemeProvider.usePowrTheme)();
+  var presets = Array.isArray(t.presets) ? t.presets : [];
+  var hasPresets = showPresets && presets.length > 0;
+  var isDark = t.resolvedScheme === "dark";
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.root
+  }, title ? /*#__PURE__*/_react["default"].createElement("h3", {
+    style: styles.title
+  }, title) : null, showScheme ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.label
+  }, "Scheme"), /*#__PURE__*/_react["default"].createElement(Segmented, {
+    name: "Scheme",
+    value: t.scheme,
+    options: _tokens.POWR_SCHEMES,
+    labels: SCHEME_LABELS,
+    onChange: t.setScheme
+  }), t.scheme === "system" ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: _objectSpread(_objectSpread({}, styles.hint), {}, {
+      marginTop: 6
+    })
+  }, "Following your device: ", t.resolvedScheme, ".") : null) : null, showDensity ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.label
+  }, "Density"), /*#__PURE__*/_react["default"].createElement(Segmented, {
+    name: "Density",
+    value: t.density,
+    options: Object.keys(_tokens.POWR_DENSITIES),
+    labels: DENSITY_LABELS,
+    onChange: t.setDensity
+  })) : null, hasPresets ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.label
+  }, "Theme"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.presetGrid
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    "aria-pressed": !t.preset,
+    onClick: function onClick() {
+      return t.setPreset(null);
+    },
+    style: styles.presetCard(!t.preset)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600
+    }
+  }, "Default"), /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.hint
+  }, "App\u2019s standard look")), presets.map(function (p) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: p.id,
+      type: "button",
+      "aria-pressed": t.preset === p.id,
+      onClick: function onClick() {
+        return t.setPreset(p.id);
+      },
+      style: styles.presetCard(t.preset === p.id)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: 13,
+        fontWeight: 600
+      }
+    }, p.label || p.id), /*#__PURE__*/_react["default"].createElement("span", {
+      style: styles.swatchRow
+    }, presetSwatches(p, isDark).map(function (c, i) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: i,
+        style: styles.swatch(c)
+      });
+    })));
+  }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.footer
+  }, onSave ? /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    disabled: saving,
+    onClick: function onClick() {
+      return onSave({
+        scheme: t.scheme,
+        density: t.density,
+        preset: t.preset
+      });
+    },
+    style: _objectSpread(_objectSpread({}, styles.button(true)), {}, {
+      opacity: saving ? 0.6 : 1
+    })
+  }, saving ? "Saving…" : saveLabel) : null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: t.reset,
+    style: styles.button(false)
+  }, "Reset"), !onSave ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: styles.hint
+  }, "Saved on this device.") : null));
+}

package/dist/theme/index.js

@@ -64,6 +64,12 @@ Object.defineProperty(exports, "PowrThemeProvider", {
     return _PowrThemeProvider["default"];
   }
 });
+Object.defineProperty(exports, "PowrThemeSettings", {
+  enumerable: true,
+  get: function get() {
+    return _PowrThemeSettings["default"];
+  }
+});
 Object.defineProperty(exports, "findPreset", {
   enumerable: true,
   get: function get() {
@@ -119,5 +125,7 @@ Object.defineProperty(exports, "usePowrTheme", {
   }
 });
 var _PowrThemeProvider = _interopRequireWildcard(require("./PowrThemeProvider"));
+var _PowrThemeSettings = _interopRequireDefault(require("./PowrThemeSettings"));
 var _tokens = require("./tokens");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/dist/utils/useMediaQuery.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useMediaQuery;
+var _react = require("react");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * `window.matchMedia` as a hook. SSR-safe: returns `fallback` until mounted,
+ * so server and first client render agree (no hydration mismatch).
+ */
+function useMediaQuery(query) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var _useState = (0, _react.useState)(fallback),
+    _useState2 = _slicedToArray(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (typeof window === "undefined" || !window.matchMedia) return undefined;
+    var mq = window.matchMedia(query);
+    var update = function update() {
+      return setMatches(mq.matches);
+    };
+    update();
+    if (mq.addEventListener) mq.addEventListener("change", update);else mq.addListener(update);
+    return function () {
+      if (mq.removeEventListener) mq.removeEventListener("change", update);else mq.removeListener(update);
+    };
+  }, [query]);
+  return matches;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "6.0.0",
+    "version": "6.1.0",
     "main": "dist/index.js",
     "files": [
         "dist"