@activecollab/components 2.0.498 → 2.0.500

package/dist/esm/components/DockedCard/useDockedCard.js

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+const getDocumentScroller = () => document.scrollingElement || document.documentElement;
+
+/** The closest ancestor that scrolls. The full page scrolls the document. */
+export const getScrollParent = node => {
+  let element = node == null ? void 0 : node.parentElement;
+  while (element && element !== document.body) {
+    const _window$getComputedSt = window.getComputedStyle(element),
+      overflowY = _window$getComputedSt.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return element;
+    }
+    element = element.parentElement;
+  }
+  return getDocumentScroller();
+};
+const isDocumentScroller = element => element === document.scrollingElement || element === document.documentElement;
+/** The moves of a docked card: its offset, its open state, the dim, the Escape key and the frozen scroll. */
+export const useDockedCard = _ref => {
+  let cardRef = _ref.cardRef,
+    open = _ref.open,
+    onOpenChange = _ref.onOpenChange,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 200 : _ref$duration,
+    _ref$peek = _ref.peek,
+    peek = _ref$peek === void 0 ? 0 : _ref$peek,
+    getTopLimit = _ref.getTopLimit,
+    onEscape = _ref.onEscape,
+    isBusy = _ref.isBusy;
+  const scrollerRef = useRef(null);
+  const dimNodeRef = useRef(null);
+  const timerRef = useRef();
+  const _useState = useState(0),
+    viewHeight = _useState[0],
+    setViewHeight = _useState[1];
+  const _useState2 = useState(0),
+    cardHeight = _useState2[0],
+    setCardHeight = _useState2[1];
+  const _useState3 = useState(0),
+    topLimit = _useState3[0],
+    setTopLimit = _useState3[1];
+  const _useState4 = useState(false),
+    moving = _useState4[0],
+    setMoving = _useState4[1];
+  const latest = useRef({
+    enabled,
+    onOpenChange,
+    onEscape,
+    isBusy,
+    getTopLimit
+  });
+  latest.current = {
+    enabled,
+    onOpenChange,
+    onEscape,
+    isBusy,
+    getTopLimit
+  };
+
+  // Found once: a frozen scroller has no scroll in its style, so a later search would miss it.
+  const findScroller = useCallback(() => {
+    var _scrollerRef$current;
+    scrollerRef.current = (_scrollerRef$current = scrollerRef.current) != null ? _scrollerRef$current : getScrollParent(cardRef.current);
+    return scrollerRef.current;
+  }, [cardRef]);
+
+  // The card moves with a transition only when it opens or closes, not when its content changes its height.
+  const setOpen = useCallback(next => {
+    if (!latest.current.enabled) {
+      return;
+    }
+    if (!next) {
+      var _dimNodeRef$current;
+      (_dimNodeRef$current = dimNodeRef.current) == null || _dimNodeRef$current.animate == null || _dimNodeRef$current.animate([{
+        opacity: 1
+      }, {
+        opacity: 0
+      }], {
+        duration,
+        fill: "forwards"
+      });
+    }
+    clearTimeout(timerRef.current);
+    setMoving(true);
+    latest.current.onOpenChange(next);
+    timerRef.current = setTimeout(() => setMoving(false), duration + 50);
+  }, [duration]);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  useEffect(() => {
+    const scroller = findScroller();
+    const isDocument = isDocumentScroller(scroller);
+    const measure = () => setViewHeight(isDocument ? window.innerHeight : scroller.clientHeight);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      return undefined;
+    }
+
+    // eslint-disable-next-line compat/compat
+    const observer = new ResizeObserver(measure);
+    observer.observe(isDocument ? document.documentElement : scroller);
+    return () => observer.disconnect();
+  }, [findScroller]);
+  useLayoutEffect(() => {
+    const scroller = findScroller();
+    const limit = latest.current.getTopLimit == null ? void 0 : latest.current.getTopLimit();
+    if (!enabled || !scroller || !limit) {
+      setTopLimit(0);
+      return;
+    }
+    const scrollerTop = scroller === getDocumentScroller() ? 0 : scroller.getBoundingClientRect().top;
+    setTopLimit(Math.max(0, Math.round(limit.getBoundingClientRect().bottom - scrollerTop)));
+  }, [open, enabled, viewHeight, findScroller]);
+
+  // A menu, a list or a dialog above the card takes its own Escape.
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const handleKeyDown = event => {
+      var _latest$current$isBus;
+      const card = cardRef.current;
+      const target = event.target;
+      const isOwn = target === document.body || (target.closest == null ? void 0 : target.closest(".c-window")) === (card == null ? void 0 : card.closest(".c-window"));
+      const busy = card ? (_latest$current$isBus = latest.current.isBusy == null ? void 0 : latest.current.isBusy(card)) != null ? _latest$current$isBus : false : false;
+      if (event.key === "Escape" && !event.defaultPrevented && isOwn && !busy) {
+        var _latest$current$onEsc;
+        event.preventDefault();
+        event.stopPropagation();
+        ((_latest$current$onEsc = latest.current.onEscape) != null ? _latest$current$onEsc : () => setOpen(false))();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [open, cardRef, setOpen]);
+  const dimRef = useCallback(node => {
+    dimNodeRef.current = node;
+    node == null || node.animate == null || node.animate([{
+      opacity: 0
+    }, {
+      opacity: 1
+    }], duration);
+  }, [duration]);
+
+  // The height places the card, so each render reads it before the paint. The observer covers what comes in later.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => {
+    var _cardRef$current$offs, _cardRef$current;
+    setCardHeight((_cardRef$current$offs = (_cardRef$current = cardRef.current) == null ? void 0 : _cardRef$current.offsetHeight) != null ? _cardRef$current$offs : 0);
+  });
+  useLayoutEffect(() => {
+    const card = cardRef.current;
+    if (!card || typeof ResizeObserver === "undefined") {
+      return undefined;
+    }
+
+    // eslint-disable-next-line compat/compat
+    const observer = new ResizeObserver(() => flushSync(() => setCardHeight(card.offsetHeight)));
+    observer.observe(card);
+    return () => observer.disconnect();
+  }, [cardRef]);
+
+  // The page does not scroll under the open card.
+  const frozen = open || moving;
+  useEffect(() => {
+    if (!frozen) {
+      return undefined;
+    }
+    const scroller = findScroller();
+    const previous = scroller.style.overflow;
+    scroller.style.overflow = "hidden";
+    return () => {
+      scroller.style.overflow = previous;
+    };
+  }, [frozen, findScroller]);
+  return {
+    setOpen,
+    moving,
+    /** The card and its dim cover the page while the card is open or on its way. */
+    lifted: frozen,
+    /** The height of the scroll container. */
+    viewHeight,
+    /** The bottom edge of the limit element, from the top of the scroll container. Zero with no limit. */
+    topLimit,
+    cardHeight,
+    /** How far the closed card stands under the edge. */
+    offset: Math.max(0, cardHeight - peek),
+    dimRef,
+    findScroller
+  };
+};
+//# sourceMappingURL=useDockedCard.js.map

package/dist/esm/components/DockedCard/useDockedCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDockedCard.js","names":["useCallback","useEffect","useLayoutEffect","useRef","useState","flushSync","getDocumentScroller","document","scrollingElement","documentElement","getScrollParent","node","element","parentElement","body","_window$getComputedSt","window","getComputedStyle","overflowY","isDocumentScroller","useDockedCard","_ref","cardRef","open","onOpenChange","_ref$enabled","enabled","_ref$duration","duration","_ref$peek","peek","getTopLimit","onEscape","isBusy","scrollerRef","dimNodeRef","timerRef","_useState","viewHeight","setViewHeight","_useState2","cardHeight","setCardHeight","_useState3","topLimit","setTopLimit","_useState4","moving","setMoving","latest","current","findScroller","_scrollerRef$current","setOpen","next","_dimNodeRef$current","animate","opacity","fill","clearTimeout","setTimeout","scroller","isDocument","measure","innerHeight","clientHeight","ResizeObserver","undefined","observer","observe","disconnect","limit","scrollerTop","getBoundingClientRect","top","Math","max","round","bottom","handleKeyDown","event","_latest$current$isBus","card","target","isOwn","closest","busy","key","defaultPrevented","_latest$current$onEsc","preventDefault","stopPropagation","addEventListener","removeEventListener","dimRef","_cardRef$current$offs","_cardRef$current","offsetHeight","frozen","previous","style","overflow","lifted","offset"],"sources":["../../../../src/components/DockedCard/useDockedCard.ts"],"sourcesContent":["import {\n  RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\nconst getDocumentScroller = () =>\n  (document.scrollingElement || document.documentElement) as HTMLElement;\n\n/** The closest ancestor that scrolls. The full page scrolls the document. */\nexport const getScrollParent = (node?: Element | null): HTMLElement => {\n  let element = node?.parentElement;\n\n  while (element && element !== document.body) {\n    const { overflowY } = window.getComputedStyle(element);\n\n    if (overflowY === \"auto\" || overflowY === \"scroll\") {\n      return element;\n    }\n\n    element = element.parentElement;\n  }\n\n  return getDocumentScroller();\n};\n\nconst isDocumentScroller = (element: HTMLElement) =>\n  element === document.scrollingElement || element === document.documentElement;\n\nexport interface UseDockedCardOptions {\n  cardRef: RefObject<HTMLElement>;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Set to false where the card is not docked. It then never opens and has no top limit. */\n  enabled?: boolean;\n  /** The time of the move, in milliseconds. */\n  duration?: number;\n  /** The height of the closed card that stays above the edge, in pixels. */\n  peek?: number;\n  /** The element whose bottom edge the open card must not pass. */\n  getTopLimit?: () => Element | null | undefined;\n  /** Called on Escape while the card is open. Without it Escape closes the card. */\n  onEscape?: () => void;\n  /** True while something in the card, such as an open menu, must take Escape itself. */\n  isBusy?: (card: HTMLElement) => boolean;\n}\n\n/** The moves of a docked card: its offset, its open state, the dim, the Escape key and the frozen scroll. */\nexport const useDockedCard = ({\n  cardRef,\n  open,\n  onOpenChange,\n  enabled = true,\n  duration = 200,\n  peek = 0,\n  getTopLimit,\n  onEscape,\n  isBusy,\n}: UseDockedCardOptions) => {\n  const scrollerRef = useRef<HTMLElement | null>(null);\n  const dimNodeRef = useRef<HTMLElement | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [viewHeight, setViewHeight] = useState(0);\n  const [cardHeight, setCardHeight] = useState(0);\n  const [topLimit, setTopLimit] = useState(0);\n  const [moving, setMoving] = useState(false);\n  const latest = useRef({\n    enabled,\n    onOpenChange,\n    onEscape,\n    isBusy,\n    getTopLimit,\n  });\n\n  latest.current = { enabled, onOpenChange, onEscape, isBusy, getTopLimit };\n\n  // Found once: a frozen scroller has no scroll in its style, so a later search would miss it.\n  const findScroller = useCallback(() => {\n    scrollerRef.current =\n      scrollerRef.current ?? getScrollParent(cardRef.current);\n\n    return scrollerRef.current;\n  }, [cardRef]);\n\n  // The card moves with a transition only when it opens or closes, not when its content changes its height.\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!latest.current.enabled) {\n        return;\n      }\n\n      if (!next) {\n        dimNodeRef.current?.animate?.([{ opacity: 1 }, { opacity: 0 }], {\n          duration,\n          fill: \"forwards\",\n        });\n      }\n\n      clearTimeout(timerRef.current);\n      setMoving(true);\n      latest.current.onOpenChange(next);\n      timerRef.current = setTimeout(() => setMoving(false), duration + 50);\n    },\n    [duration]\n  );\n\n  useEffect(() => () => clearTimeout(timerRef.current), []);\n\n  useEffect(() => {\n    const scroller = findScroller();\n    const isDocument = isDocumentScroller(scroller);\n    const measure = () =>\n      setViewHeight(isDocument ? window.innerHeight : scroller.clientHeight);\n\n    measure();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    // eslint-disable-next-line compat/compat\n    const observer = new ResizeObserver(measure);\n\n    observer.observe(isDocument ? document.documentElement : scroller);\n\n    return () => observer.disconnect();\n  }, [findScroller]);\n\n  useLayoutEffect(() => {\n    const scroller = findScroller();\n    const limit = latest.current.getTopLimit?.();\n\n    if (!enabled || !scroller || !limit) {\n      setTopLimit(0);\n\n      return;\n    }\n\n    const scrollerTop =\n      scroller === getDocumentScroller()\n        ? 0\n        : scroller.getBoundingClientRect().top;\n\n    setTopLimit(\n      Math.max(\n        0,\n        Math.round(limit.getBoundingClientRect().bottom - scrollerTop)\n      )\n    );\n  }, [open, enabled, viewHeight, findScroller]);\n\n  // A menu, a list or a dialog above the card takes its own Escape.\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const card = cardRef.current;\n      const target = event.target as Element;\n      const isOwn =\n        target === document.body ||\n        target.closest?.(\".c-window\") === card?.closest(\".c-window\");\n      const busy = card ? latest.current.isBusy?.(card) ?? false : false;\n\n      if (event.key === \"Escape\" && !event.defaultPrevented && isOwn && !busy) {\n        event.preventDefault();\n        event.stopPropagation();\n        (latest.current.onEscape ?? (() => setOpen(false)))();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown, true);\n\n    return () => document.removeEventListener(\"keydown\", handleKeyDown, true);\n  }, [open, cardRef, setOpen]);\n\n  const dimRef = useCallback(\n    (node: HTMLElement | null) => {\n      dimNodeRef.current = node;\n      node?.animate?.([{ opacity: 0 }, { opacity: 1 }], duration);\n    },\n    [duration]\n  );\n\n  // The height places the card, so each render reads it before the paint. The observer covers what comes in later.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    setCardHeight(cardRef.current?.offsetHeight ?? 0);\n  });\n\n  useLayoutEffect(() => {\n    const card = cardRef.current;\n\n    if (!card || typeof ResizeObserver === \"undefined\") {\n      return undefined;\n    }\n\n    // eslint-disable-next-line compat/compat\n    const observer = new ResizeObserver(() =>\n      flushSync(() => setCardHeight(card.offsetHeight))\n    );\n\n    observer.observe(card);\n\n    return () => observer.disconnect();\n  }, [cardRef]);\n\n  // The page does not scroll under the open card.\n  const frozen = open || moving;\n\n  useEffect(() => {\n    if (!frozen) {\n      return undefined;\n    }\n\n    const scroller = findScroller();\n    const previous = scroller.style.overflow;\n\n    scroller.style.overflow = \"hidden\";\n\n    return () => {\n      scroller.style.overflow = previous;\n    };\n  }, [frozen, findScroller]);\n\n  return {\n    setOpen,\n    moving,\n    /** The card and its dim cover the page while the card is open or on its way. */\n    lifted: frozen,\n    /** The height of the scroll container. */\n    viewHeight,\n    /** The bottom edge of the limit element, from the top of the scroll container. Zero with no limit. */\n    topLimit,\n    cardHeight,\n    /** How far the closed card stands under the edge. */\n    offset: Math.max(0, cardHeight - peek),\n    dimRef,\n    findScroller,\n  };\n};\n"],"mappings":"AAAA,SAEEA,WAAW,EACXC,SAAS,EACTC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,SAAS,QAAQ,WAAW;AAErC,MAAMC,mBAAmB,GAAGA,CAAA,KACzBC,QAAQ,CAACC,gBAAgB,IAAID,QAAQ,CAACE,eAA+B;;AAExE;AACA,OAAO,MAAMC,eAAe,GAAIC,IAAqB,IAAkB;EACrE,IAAIC,OAAO,GAAGD,IAAI,oBAAJA,IAAI,CAAEE,aAAa;EAEjC,OAAOD,OAAO,IAAIA,OAAO,KAAKL,QAAQ,CAACO,IAAI,EAAE;IAC3C,MAAAC,qBAAA,GAAsBC,MAAM,CAACC,gBAAgB,CAACL,OAAO,CAAC;MAA9CM,SAAS,GAAAH,qBAAA,CAATG,SAAS;IAEjB,IAAIA,SAAS,KAAK,MAAM,IAAIA,SAAS,KAAK,QAAQ,EAAE;MAClD,OAAON,OAAO;IAChB;IAEAA,OAAO,GAAGA,OAAO,CAACC,aAAa;EACjC;EAEA,OAAOP,mBAAmB,CAAC,CAAC;AAC9B,CAAC;AAED,MAAMa,kBAAkB,GAAIP,OAAoB,IAC9CA,OAAO,KAAKL,QAAQ,CAACC,gBAAgB,IAAII,OAAO,KAAKL,QAAQ,CAACE,eAAe;AAoB/E;AACA,OAAO,MAAMW,aAAa,GAAGC,IAAA,IAUD;EAAA,IAT1BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,YAAY,GAAAH,IAAA,CAAZG,YAAY;IAAAC,YAAA,GAAAJ,IAAA,CACZK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,IAAI,GAAAA,YAAA;IAAAE,aAAA,GAAAN,IAAA,CACdO,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;IAAAE,SAAA,GAAAR,IAAA,CACdS,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,CAAC,GAAAA,SAAA;IACRE,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,MAAM,GAAAZ,IAAA,CAANY,MAAM;EAEN,MAAMC,WAAW,GAAG/B,MAAM,CAAqB,IAAI,CAAC;EACpD,MAAMgC,UAAU,GAAGhC,MAAM,CAAqB,IAAI,CAAC;EACnD,MAAMiC,QAAQ,GAAGjC,MAAM,CAAgC,CAAC;EACxD,MAAAkC,SAAA,GAAoCjC,QAAQ,CAAC,CAAC,CAAC;IAAxCkC,UAAU,GAAAD,SAAA;IAAEE,aAAa,GAAAF,SAAA;EAChC,MAAAG,UAAA,GAAoCpC,QAAQ,CAAC,CAAC,CAAC;IAAxCqC,UAAU,GAAAD,UAAA;IAAEE,aAAa,GAAAF,UAAA;EAChC,MAAAG,UAAA,GAAgCvC,QAAQ,CAAC,CAAC,CAAC;IAApCwC,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAC5B,MAAAG,UAAA,GAA4B1C,QAAQ,CAAC,KAAK,CAAC;IAApC2C,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,MAAMG,MAAM,GAAG9C,MAAM,CAAC;IACpBuB,OAAO;IACPF,YAAY;IACZQ,QAAQ;IACRC,MAAM;IACNF;EACF,CAAC,CAAC;EAEFkB,MAAM,CAACC,OAAO,GAAG;IAAExB,OAAO;IAAEF,YAAY;IAAEQ,QAAQ;IAAEC,MAAM;IAAEF;EAAY,CAAC;;EAEzE;EACA,MAAMoB,YAAY,GAAGnD,WAAW,CAAC,MAAM;IAAA,IAAAoD,oBAAA;IACrClB,WAAW,CAACgB,OAAO,IAAAE,oBAAA,GACjBlB,WAAW,CAACgB,OAAO,YAAAE,oBAAA,GAAI1C,eAAe,CAACY,OAAO,CAAC4B,OAAO,CAAC;IAEzD,OAAOhB,WAAW,CAACgB,OAAO;EAC5B,CAAC,EAAE,CAAC5B,OAAO,CAAC,CAAC;;EAEb;EACA,MAAM+B,OAAO,GAAGrD,WAAW,CACxBsD,IAAa,IAAK;IACjB,IAAI,CAACL,MAAM,CAACC,OAAO,CAACxB,OAAO,EAAE;MAC3B;IACF;IAEA,IAAI,CAAC4B,IAAI,EAAE;MAAA,IAAAC,mBAAA;MACT,CAAAA,mBAAA,GAAApB,UAAU,CAACe,OAAO,aAAlBK,mBAAA,CAAoBC,OAAO,YAA3BD,mBAAA,CAAoBC,OAAO,CAAG,CAAC;QAAEC,OAAO,EAAE;MAAE,CAAC,EAAE;QAAEA,OAAO,EAAE;MAAE,CAAC,CAAC,EAAE;QAC9D7B,QAAQ;QACR8B,IAAI,EAAE;MACR,CAAC,CAAC;IACJ;IAEAC,YAAY,CAACvB,QAAQ,CAACc,OAAO,CAAC;IAC9BF,SAAS,CAAC,IAAI,CAAC;IACfC,MAAM,CAACC,OAAO,CAAC1B,YAAY,CAAC8B,IAAI,CAAC;IACjClB,QAAQ,CAACc,OAAO,GAAGU,UAAU,CAAC,MAAMZ,SAAS,CAAC,KAAK,CAAC,EAAEpB,QAAQ,GAAG,EAAE,CAAC;EACtE,CAAC,EACD,CAACA,QAAQ,CACX,CAAC;EAED3B,SAAS,CAAC,MAAM,MAAM0D,YAAY,CAACvB,QAAQ,CAACc,OAAO,CAAC,EAAE,EAAE,CAAC;EAEzDjD,SAAS,CAAC,MAAM;IACd,MAAM4D,QAAQ,GAAGV,YAAY,CAAC,CAAC;IAC/B,MAAMW,UAAU,GAAG3C,kBAAkB,CAAC0C,QAAQ,CAAC;IAC/C,MAAME,OAAO,GAAGA,CAAA,KACdxB,aAAa,CAACuB,UAAU,GAAG9C,MAAM,CAACgD,WAAW,GAAGH,QAAQ,CAACI,YAAY,CAAC;IAExEF,OAAO,CAAC,CAAC;IAET,IAAI,OAAOG,cAAc,KAAK,WAAW,EAAE;MACzC,OAAOC,SAAS;IAClB;;IAEA;IACA,MAAMC,QAAQ,GAAG,IAAIF,cAAc,CAACH,OAAO,CAAC;IAE5CK,QAAQ,CAACC,OAAO,CAACP,UAAU,GAAGvD,QAAQ,CAACE,eAAe,GAAGoD,QAAQ,CAAC;IAElE,OAAO,MAAMO,QAAQ,CAACE,UAAU,CAAC,CAAC;EACpC,CAAC,EAAE,CAACnB,YAAY,CAAC,CAAC;EAElBjD,eAAe,CAAC,MAAM;IACpB,MAAM2D,QAAQ,GAAGV,YAAY,CAAC,CAAC;IAC/B,MAAMoB,KAAK,GAAGtB,MAAM,CAACC,OAAO,CAACnB,WAAW,oBAA1BkB,MAAM,CAACC,OAAO,CAACnB,WAAW,CAAG,CAAC;IAE5C,IAAI,CAACL,OAAO,IAAI,CAACmC,QAAQ,IAAI,CAACU,KAAK,EAAE;MACnC1B,WAAW,CAAC,CAAC,CAAC;MAEd;IACF;IAEA,MAAM2B,WAAW,GACfX,QAAQ,KAAKvD,mBAAmB,CAAC,CAAC,GAC9B,CAAC,GACDuD,QAAQ,CAACY,qBAAqB,CAAC,CAAC,CAACC,GAAG;IAE1C7B,WAAW,CACT8B,IAAI,CAACC,GAAG,CACN,CAAC,EACDD,IAAI,CAACE,KAAK,CAACN,KAAK,CAACE,qBAAqB,CAAC,CAAC,CAACK,MAAM,GAAGN,WAAW,CAC/D,CACF,CAAC;EACH,CAAC,EAAE,CAACjD,IAAI,EAAEG,OAAO,EAAEY,UAAU,EAAEa,YAAY,CAAC,CAAC;;EAE7C;EACAlD,SAAS,CAAC,MAAM;IACd,IAAI,CAACsB,IAAI,EAAE;MACT,OAAO4C,SAAS;IAClB;IAEA,MAAMY,aAAa,GAAIC,KAAoB,IAAK;MAAA,IAAAC,qBAAA;MAC9C,MAAMC,IAAI,GAAG5D,OAAO,CAAC4B,OAAO;MAC5B,MAAMiC,MAAM,GAAGH,KAAK,CAACG,MAAiB;MACtC,MAAMC,KAAK,GACTD,MAAM,KAAK5E,QAAQ,CAACO,IAAI,IACxB,CAAAqE,MAAM,CAACE,OAAO,oBAAdF,MAAM,CAACE,OAAO,CAAG,WAAW,CAAC,OAAKH,IAAI,oBAAJA,IAAI,CAAEG,OAAO,CAAC,WAAW,CAAC;MAC9D,MAAMC,IAAI,GAAGJ,IAAI,IAAAD,qBAAA,GAAGhC,MAAM,CAACC,OAAO,CAACjB,MAAM,oBAArBgB,MAAM,CAACC,OAAO,CAACjB,MAAM,CAAGiD,IAAI,CAAC,YAAAD,qBAAA,GAAI,KAAK,GAAG,KAAK;MAElE,IAAID,KAAK,CAACO,GAAG,KAAK,QAAQ,IAAI,CAACP,KAAK,CAACQ,gBAAgB,IAAIJ,KAAK,IAAI,CAACE,IAAI,EAAE;QAAA,IAAAG,qBAAA;QACvET,KAAK,CAACU,cAAc,CAAC,CAAC;QACtBV,KAAK,CAACW,eAAe,CAAC,CAAC;QACvB,EAAAF,qBAAA,GAACxC,MAAM,CAACC,OAAO,CAAClB,QAAQ,YAAAyD,qBAAA,GAAK,MAAMpC,OAAO,CAAC,KAAK,CAAC,EAAG,CAAC;MACvD;IACF,CAAC;IAED9C,QAAQ,CAACqF,gBAAgB,CAAC,SAAS,EAAEb,aAAa,EAAE,IAAI,CAAC;IAEzD,OAAO,MAAMxE,QAAQ,CAACsF,mBAAmB,CAAC,SAAS,EAAEd,aAAa,EAAE,IAAI,CAAC;EAC3E,CAAC,EAAE,CAACxD,IAAI,EAAED,OAAO,EAAE+B,OAAO,CAAC,CAAC;EAE5B,MAAMyC,MAAM,GAAG9F,WAAW,CACvBW,IAAwB,IAAK;IAC5BwB,UAAU,CAACe,OAAO,GAAGvC,IAAI;IACzBA,IAAI,YAAJA,IAAI,CAAE6C,OAAO,YAAb7C,IAAI,CAAE6C,OAAO,CAAG,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EAAE;MAAEA,OAAO,EAAE;IAAE,CAAC,CAAC,EAAE7B,QAAQ,CAAC;EAC7D,CAAC,EACD,CAACA,QAAQ,CACX,CAAC;;EAED;EACA;EACA1B,eAAe,CAAC,MAAM;IAAA,IAAA6F,qBAAA,EAAAC,gBAAA;IACpBtD,aAAa,EAAAqD,qBAAA,IAAAC,gBAAA,GAAC1E,OAAO,CAAC4B,OAAO,qBAAf8C,gBAAA,CAAiBC,YAAY,YAAAF,qBAAA,GAAI,CAAC,CAAC;EACnD,CAAC,CAAC;EAEF7F,eAAe,CAAC,MAAM;IACpB,MAAMgF,IAAI,GAAG5D,OAAO,CAAC4B,OAAO;IAE5B,IAAI,CAACgC,IAAI,IAAI,OAAOhB,cAAc,KAAK,WAAW,EAAE;MAClD,OAAOC,SAAS;IAClB;;IAEA;IACA,MAAMC,QAAQ,GAAG,IAAIF,cAAc,CAAC,MAClC7D,SAAS,CAAC,MAAMqC,aAAa,CAACwC,IAAI,CAACe,YAAY,CAAC,CAClD,CAAC;IAED7B,QAAQ,CAACC,OAAO,CAACa,IAAI,CAAC;IAEtB,OAAO,MAAMd,QAAQ,CAACE,UAAU,CAAC,CAAC;EACpC,CAAC,EAAE,CAAChD,OAAO,CAAC,CAAC;;EAEb;EACA,MAAM4E,MAAM,GAAG3E,IAAI,IAAIwB,MAAM;EAE7B9C,SAAS,CAAC,MAAM;IACd,IAAI,CAACiG,MAAM,EAAE;MACX,OAAO/B,SAAS;IAClB;IAEA,MAAMN,QAAQ,GAAGV,YAAY,CAAC,CAAC;IAC/B,MAAMgD,QAAQ,GAAGtC,QAAQ,CAACuC,KAAK,CAACC,QAAQ;IAExCxC,QAAQ,CAACuC,KAAK,CAACC,QAAQ,GAAG,QAAQ;IAElC,OAAO,MAAM;MACXxC,QAAQ,CAACuC,KAAK,CAACC,QAAQ,GAAGF,QAAQ;IACpC,CAAC;EACH,CAAC,EAAE,CAACD,MAAM,EAAE/C,YAAY,CAAC,CAAC;EAE1B,OAAO;IACLE,OAAO;IACPN,MAAM;IACN;IACAuD,MAAM,EAAEJ,MAAM;IACd;IACA5D,UAAU;IACV;IACAM,QAAQ;IACRH,UAAU;IACV;IACA8D,MAAM,EAAE5B,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEnC,UAAU,GAAGX,IAAI,CAAC;IACtCgE,MAAM;IACN3C;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/components/EditableContent/EditableContent.d.ts

@@ -4,7 +4,7 @@ export interface EditableContentInterface {
     /** Typography variant. */
     variant?: Variant;
     /** Typography weight. */
-    weight?: "light" | "regular" | "bold" | "medium";
+    weight?: "light" | "regular" | "bold" | "medium" | "semibold";
     /** Input props. */
     inputProps?: Partial<React.ComponentPropsWithoutRef<"input">>;
     /** Disable edit mode. */

package/dist/esm/components/EditableContent/EditableContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAKpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACjD,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,oOA8F3B,CAAC"}
+{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,GAAG,EAAuB,MAAM,OAAO,CAAC;AAKpE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD,MAAM,WAAW,wBAAwB;IACvC,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC9D,mBAAmB;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,eAAe,oOA8F3B,CAAC"}

package/dist/esm/components/EditableContent/EditableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","StyledDiv","StyledInput","StyledSpan","useHoverSuppression","useForkRef","EditableContent","_ref","ref","className","_ref$variant","variant","weight","_ref$disabled","disabled","inputProps","wrapRef","children","invalid","onMouseLeave","props","_objectWithoutPropertiesLoose","_excluded","intInputRef","handleRef","_useHoverSuppression","hoverSuppressed","suppressHoverOnKey","releaseHover","handleBlur","evt","current","scrollLeft","onBlur","handleKeyDown","onKeyDown","handleFocus","onFocus","handleMouseLeave","createElement","_extends","forwardedAs","$disabled","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\n\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\nimport { useHoverSuppression } from \"./useHoverSuppression\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n  /** Disable edit mode. */\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Wrapper reference. */\n  wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n  (\n    {\n      className,\n      variant = \"Body 2\",\n      weight,\n      disabled = false,\n      inputProps,\n      wrapRef,\n      children,\n      invalid,\n      onMouseLeave,\n      ...props\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n    const { hoverSuppressed, suppressHoverOnKey, releaseHover } =\n      useHoverSuppression();\n\n    const handleBlur = useCallback(\n      (evt) => {\n        if (intInputRef?.current) {\n          intInputRef.current.scrollLeft = 0;\n        }\n        typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n      },\n      [inputProps]\n    );\n\n    const handleKeyDown = useCallback(\n      (evt) => {\n        suppressHoverOnKey(evt);\n        typeof inputProps?.onKeyDown === \"function\" &&\n          inputProps.onKeyDown(evt);\n      },\n      [inputProps, suppressHoverOnKey]\n    );\n\n    const handleFocus = useCallback(\n      (evt) => {\n        releaseHover();\n        typeof inputProps?.onFocus === \"function\" && inputProps.onFocus(evt);\n      },\n      [inputProps, releaseHover]\n    );\n\n    const handleMouseLeave = useCallback(\n      (evt) => {\n        releaseHover();\n        typeof onMouseLeave === \"function\" && onMouseLeave(evt);\n      },\n      [onMouseLeave, releaseHover]\n    );\n\n    return (\n      <StyledDiv\n        className={className}\n        ref={wrapRef}\n        {...props}\n        onMouseLeave={handleMouseLeave}\n      >\n        <StyledSpan\n          variant={variant}\n          forwardedAs=\"span\"\n          weight={weight}\n          $disabled={disabled}\n          className=\"presentation\"\n        >\n          {children ? children : inputProps?.value}\n        </StyledSpan>\n        <StyledInput\n          {...inputProps}\n          ref={handleRef}\n          forwardedAs=\"input\"\n          variant={variant}\n          weight={weight}\n          value={inputProps?.value}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          disabled={disabled}\n          data-form-type=\"other\"\n          data-hover-suppressed={hoverSuppressed}\n          invalid={invalid}\n        />\n      </StyledDiv>\n    );\n  }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"EditableContent.js","names":["React","forwardRef","useCallback","useRef","StyledDiv","StyledInput","StyledSpan","useHoverSuppression","useForkRef","EditableContent","_ref","ref","className","_ref$variant","variant","weight","_ref$disabled","disabled","inputProps","wrapRef","children","invalid","onMouseLeave","props","_objectWithoutPropertiesLoose","_excluded","intInputRef","handleRef","_useHoverSuppression","hoverSuppressed","suppressHoverOnKey","releaseHover","handleBlur","evt","current","scrollLeft","onBlur","handleKeyDown","onKeyDown","handleFocus","onFocus","handleMouseLeave","createElement","_extends","forwardedAs","$disabled","value","displayName"],"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useCallback, useRef } from \"react\";\n\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\nimport { useHoverSuppression } from \"./useHoverSuppression\";\nimport { useForkRef } from \"../../utils\";\nimport { Variant } from \"../Typography/Typography\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\" | \"semibold\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n  /** Disable edit mode. */\n  disabled?: boolean;\n  invalid?: boolean;\n  /** Wrapper reference. */\n  wrapRef?: Ref<HTMLDivElement>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n  (\n    {\n      className,\n      variant = \"Body 2\",\n      weight,\n      disabled = false,\n      inputProps,\n      wrapRef,\n      children,\n      invalid,\n      onMouseLeave,\n      ...props\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n    const { hoverSuppressed, suppressHoverOnKey, releaseHover } =\n      useHoverSuppression();\n\n    const handleBlur = useCallback(\n      (evt) => {\n        if (intInputRef?.current) {\n          intInputRef.current.scrollLeft = 0;\n        }\n        typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n      },\n      [inputProps]\n    );\n\n    const handleKeyDown = useCallback(\n      (evt) => {\n        suppressHoverOnKey(evt);\n        typeof inputProps?.onKeyDown === \"function\" &&\n          inputProps.onKeyDown(evt);\n      },\n      [inputProps, suppressHoverOnKey]\n    );\n\n    const handleFocus = useCallback(\n      (evt) => {\n        releaseHover();\n        typeof inputProps?.onFocus === \"function\" && inputProps.onFocus(evt);\n      },\n      [inputProps, releaseHover]\n    );\n\n    const handleMouseLeave = useCallback(\n      (evt) => {\n        releaseHover();\n        typeof onMouseLeave === \"function\" && onMouseLeave(evt);\n      },\n      [onMouseLeave, releaseHover]\n    );\n\n    return (\n      <StyledDiv\n        className={className}\n        ref={wrapRef}\n        {...props}\n        onMouseLeave={handleMouseLeave}\n      >\n        <StyledSpan\n          variant={variant}\n          forwardedAs=\"span\"\n          weight={weight}\n          $disabled={disabled}\n          className=\"presentation\"\n        >\n          {children ? children : inputProps?.value}\n        </StyledSpan>\n        <StyledInput\n          {...inputProps}\n          ref={handleRef}\n          forwardedAs=\"input\"\n          variant={variant}\n          weight={weight}\n          value={inputProps?.value}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          disabled={disabled}\n          data-form-type=\"other\"\n          data-hover-suppressed={hoverSuppressed}\n          invalid={invalid}\n        />\n      </StyledDiv>\n    );\n  }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/EditorFrame/EditorFrame.d.ts

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from "react";
+export type EditorFrameLook = "field" | "card" | "raised";
+export interface IEditorFrameProps extends HTMLAttributes<HTMLDivElement> {
+    /** "field" for an edit in place, "card" for a composer, "raised" for an editor on the page. */
+    look?: EditorFrameLook;
+    /** The corner radius in pixels. Each look has its own default. */
+    radius?: number;
+    /** The element of the frame. A form keeps its submit handling on the frame. */
+    as?: "div" | "form";
+}
+export declare const EditorFrame: React.ForwardRefExoticComponent<IEditorFrameProps & React.RefAttributes<HTMLDivElement>>;
+/** The row of actions under the editor, with a line above it. */
+export declare const EditorFrameFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=EditorFrame.d.ts.map

package/dist/esm/components/EditorFrame/EditorFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorFrame.d.ts","sourceRoot":"","sources":["../../../../src/components/EditorFrame/EditorFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAW1D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,+FAA+F;IAC/F,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACrB;AAQD,eAAO,MAAM,WAAW,0FAYvB,CAAC;AAIF,iEAAiE;AACjE,eAAO,MAAM,iBAAiB,6GAe5B,CAAC"}

package/dist/esm/components/EditorFrame/EditorFrame.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["look", "radius", "className", "children"],
+  _excluded2 = ["className", "children"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { FOOTER_CONTAINER_CSS, StyledEditorFrame, StyledEditorFrameFooter } from "./Styles";
+import { useContainerCss } from "../../utils/useContainerCss";
+const RADIUS = {
+  field: 14,
+  card: 16,
+  raised: 20
+};
+export const EditorFrame = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let _ref$look = _ref.look,
+    look = _ref$look === void 0 ? "field" : _ref$look,
+    radius = _ref.radius,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledEditorFrame, _extends({}, rest, {
+    ref: ref,
+    $look: look,
+    $radius: radius != null ? radius : RADIUS[look],
+    className: classnames("c-editor-frame", className)
+  }), children);
+});
+EditorFrame.displayName = "EditorFrame";
+
+/** The row of actions under the editor, with a line above it. */
+export const EditorFrameFooter = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let className = _ref2.className,
+    children = _ref2.children,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  useContainerCss("c-editor-frame-container", FOOTER_CONTAINER_CSS);
+  return /*#__PURE__*/React.createElement(StyledEditorFrameFooter, _extends({}, rest, {
+    ref: ref,
+    className: classnames("c-editor-frame__footer", className)
+  }), children);
+});
+EditorFrameFooter.displayName = "EditorFrameFooter";
+//# sourceMappingURL=EditorFrame.js.map

package/dist/esm/components/EditorFrame/EditorFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorFrame.js","names":["React","forwardRef","classnames","FOOTER_CONTAINER_CSS","StyledEditorFrame","StyledEditorFrameFooter","useContainerCss","RADIUS","field","card","raised","EditorFrame","_ref","ref","_ref$look","look","radius","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$look","$radius","displayName","EditorFrameFooter","_ref2","_excluded2"],"sources":["../../../../src/components/EditorFrame/EditorFrame.tsx"],"sourcesContent":["import React, { HTMLAttributes, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  FOOTER_CONTAINER_CSS,\n  StyledEditorFrame,\n  StyledEditorFrameFooter,\n} from \"./Styles\";\nimport { useContainerCss } from \"../../utils/useContainerCss\";\n\nexport type EditorFrameLook = \"field\" | \"card\" | \"raised\";\n\nexport interface IEditorFrameProps extends HTMLAttributes<HTMLDivElement> {\n  /** \"field\" for an edit in place, \"card\" for a composer, \"raised\" for an editor on the page. */\n  look?: EditorFrameLook;\n  /** The corner radius in pixels. Each look has its own default. */\n  radius?: number;\n  /** The element of the frame. A form keeps its submit handling on the frame. */\n  as?: \"div\" | \"form\";\n}\n\nconst RADIUS: Record<EditorFrameLook, number> = {\n  field: 14,\n  card: 16,\n  raised: 20,\n};\n\nexport const EditorFrame = forwardRef<HTMLDivElement, IEditorFrameProps>(\n  ({ look = \"field\", radius, className, children, ...rest }, ref) => (\n    <StyledEditorFrame\n      {...rest}\n      ref={ref}\n      $look={look}\n      $radius={radius ?? RADIUS[look]}\n      className={classnames(\"c-editor-frame\", className)}\n    >\n      {children}\n    </StyledEditorFrame>\n  )\n);\n\nEditorFrame.displayName = \"EditorFrame\";\n\n/** The row of actions under the editor, with a line above it. */\nexport const EditorFrameFooter = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...rest }, ref) => {\n  useContainerCss(\"c-editor-frame-container\", FOOTER_CONTAINER_CSS);\n\n  return (\n    <StyledEditorFrameFooter\n      {...rest}\n      ref={ref}\n      className={classnames(\"c-editor-frame__footer\", className)}\n    >\n      {children}\n    </StyledEditorFrameFooter>\n  );\n});\n\nEditorFrameFooter.displayName = \"EditorFrameFooter\";\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAoBC,UAAU,QAAQ,OAAO;AAEzD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,oBAAoB,EACpBC,iBAAiB,EACjBC,uBAAuB,QAClB,UAAU;AACjB,SAASC,eAAe,QAAQ,6BAA6B;AAa7D,MAAMC,MAAuC,GAAG;EAC9CC,KAAK,EAAE,EAAE;EACTC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE;AACV,CAAC;AAED,OAAO,MAAMC,WAAW,gBAAGV,UAAU,CACnC,CAAAW,IAAA,EAA2DC,GAAG;EAAA,IAAAC,SAAA,GAAAF,IAAA,CAA3DG,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA;IAAEE,MAAM,GAAAJ,IAAA,CAANI,MAAM;IAAEC,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBACrDrB,KAAA,CAAAsB,aAAA,CAAClB,iBAAiB,EAAAmB,QAAA,KACZJ,IAAI;IACRN,GAAG,EAAEA,GAAI;IACTW,KAAK,EAAET,IAAK;IACZU,OAAO,EAAET,MAAM,WAANA,MAAM,GAAIT,MAAM,CAACQ,IAAI,CAAE;IAChCE,SAAS,EAAEf,UAAU,CAAC,gBAAgB,EAAEe,SAAS;EAAE,IAElDC,QACgB,CAAC;AAAA,CAExB,CAAC;AAEDP,WAAW,CAACe,WAAW,GAAG,aAAa;;AAEvC;AACA,OAAO,MAAMC,iBAAiB,gBAAG1B,UAAU,CAGzC,CAAA2B,KAAA,EAAmCf,GAAG,KAAK;EAAA,IAAxCI,SAAS,GAAAW,KAAA,CAATX,SAAS;IAAEC,QAAQ,GAAAU,KAAA,CAARV,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAQ,KAAA,EAAAC,UAAA;EAC/BvB,eAAe,CAAC,0BAA0B,EAAEH,oBAAoB,CAAC;EAEjE,oBACEH,KAAA,CAAAsB,aAAA,CAACjB,uBAAuB,EAAAkB,QAAA,KAClBJ,IAAI;IACRN,GAAG,EAAEA,GAAI;IACTI,SAAS,EAAEf,UAAU,CAAC,wBAAwB,EAAEe,SAAS;EAAE,IAE1DC,QACsB,CAAC;AAE9B,CAAC,CAAC;AAEFS,iBAAiB,CAACD,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/dist/esm/components/EditorFrame/Styles.d.ts

@@ -0,0 +1,13 @@
+declare const LOOKS: {
+    field: import("styled-components").FlattenSimpleInterpolation;
+    card: import("styled-components").FlattenSimpleInterpolation;
+    raised: import("styled-components").FlattenSimpleInterpolation;
+};
+export declare const StyledEditorFrame: import("styled-components").StyledComponent<"div", any, {
+    $look: keyof typeof LOOKS;
+    $radius: number;
+}, never>;
+export declare const FOOTER_CONTAINER_CSS = "\n@container (min-width: 900px) {\n  .c-editor-frame__footer { padding-right: 19px; padding-left: 19px; }\n}\n";
+export declare const StyledEditorFrameFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/EditorFrame/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EditorFrame/Styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,KAAK;;;;CAYV,CAAC;AAEF,eAAO,MAAM,iBAAiB;WACrB,MAAM,OAAO,KAAK;aAChB,MAAM;SAQhB,CAAC;AAEF,eAAO,MAAM,oBAAoB,mHAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,oEAQnC,CAAC"}

package/dist/esm/components/EditorFrame/Styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from "styled-components";
+const LOOKS = {
+  field: css(["background-color:var(--color-theme-200);"]),
+  card: css(["background-color:var(--surface-bubble);box-shadow:var(--shadow-soft);"]),
+  raised: css(["background-color:var(--surface-raised);box-shadow:var(--shadow-float);"])
+};
+export const StyledEditorFrame = styled.div.withConfig({
+  displayName: "Styles__StyledEditorFrame",
+  componentId: "sc-ruvdwa-0"
+})(["position:relative;min-width:0;border:1px solid var(--border-raised);border-radius:", "px;", ""], _ref => {
+  let $radius = _ref.$radius;
+  return $radius;
+}, _ref2 => {
+  let $look = _ref2.$look;
+  return LOOKS[$look];
+});
+export const FOOTER_CONTAINER_CSS = "\n@container (min-width: 900px) {\n  .c-editor-frame__footer { padding-right: 19px; padding-left: 19px; }\n}\n";
+export const StyledEditorFrameFooter = styled.div.withConfig({
+  displayName: "Styles__StyledEditorFrameFooter",
+  componentId: "sc-ruvdwa-1"
+})(["display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:52px;padding:10px 11px;border-top:1px solid var(--border-raised);"]);
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/EditorFrame/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","LOOKS","field","card","raised","StyledEditorFrame","div","withConfig","displayName","componentId","_ref","$radius","_ref2","$look","FOOTER_CONTAINER_CSS","StyledEditorFrameFooter"],"sources":["../../../../src/components/EditorFrame/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nconst LOOKS = {\n  field: css`\n    background-color: var(--color-theme-200);\n  `,\n  card: css`\n    background-color: var(--surface-bubble);\n    box-shadow: var(--shadow-soft);\n  `,\n  raised: css`\n    background-color: var(--surface-raised);\n    box-shadow: var(--shadow-float);\n  `,\n};\n\nexport const StyledEditorFrame = styled.div<{\n  $look: keyof typeof LOOKS;\n  $radius: number;\n}>`\n  position: relative;\n  min-width: 0;\n  border: 1px solid var(--border-raised);\n  border-radius: ${({ $radius }) => $radius}px;\n\n  ${({ $look }) => LOOKS[$look]}\n`;\n\nexport const FOOTER_CONTAINER_CSS = `\n@container (min-width: 900px) {\n  .c-editor-frame__footer { padding-right: 19px; padding-left: 19px; }\n}\n`;\n\nexport const StyledEditorFrameFooter = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px 12px;\n  min-height: 52px;\n  padding: 10px 11px;\n  border-top: 1px solid var(--border-raised);\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,MAAMC,KAAK,GAAG;EACZC,KAAK,EAAEF,GAAG,8CAET;EACDG,IAAI,EAAEH,GAAG,2EAGR;EACDI,MAAM,EAAEJ,GAAG;AAIb,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGN,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sGAOxBC,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OAAOA,OAAO;AAAA,GAEvCC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAOZ,KAAK,CAACY,KAAK,CAAC;AAAA,EAC9B;AAED,OAAO,MAAMC,oBAAoB,mHAIhC;AAED,OAAO,MAAMC,uBAAuB,GAAGhB,MAAM,CAACO,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gJAQhD","ignoreList":[]}

package/dist/esm/components/EditorFrame/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./EditorFrame";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/EditorFrame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EditorFrame/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/esm/components/EditorFrame/index.js

@@ -0,0 +1,2 @@
+export * from "./EditorFrame";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/EditorFrame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/EditorFrame/index.ts"],"sourcesContent":["export * from \"./EditorFrame\";\n"],"mappings":"AAAA,cAAc,eAAe","ignoreList":[]}

package/dist/esm/components/EmptySlate/EmptySlate.d.ts

@@ -1,12 +1,17 @@
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 export interface EmptySlateProps extends HTMLAttributes<HTMLDivElement> {
-    src: string;
-    alt: string;
+    /** The image. Not needed with an illustration. */
+    src?: string;
+    alt?: string;
     title: string;
     description?: string;
+    /** A drawing in place of the image, such as an inline SVG that follows the theme. */
+    illustration?: ReactNode;
+    /** "compact" is stacked and centered, with small text, for a panel. */
+    size?: "regular" | "compact";
 }
 export declare const EmptySlate: {
-    ({ title, description, src, alt, children, ...rest }: EmptySlateProps): React.JSX.Element;
+    ({ title, description, src, alt, illustration, size, children, ...rest }: EmptySlateProps): React.JSX.Element;
     Footer: {
         ({ children, ...rest }: {
             [x: string]: any;

package/dist/esm/components/EmptySlate/EmptySlate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptySlate.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD,eAAO,MAAM,UAAU;0DAOpB,eAAe;;;;;;;;;CAmCjB,CAAC"}
+{"version":3,"file":"EmptySlate.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EACd,SAAS,EAKV,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qFAAqF;IACrF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAC9B;AAKD,eAAO,MAAM,UAAU;8EASpB,eAAe;;;;;;;;;CA+CjB,CAAC"}

package/dist/esm/components/EmptySlate/EmptySlate.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["title", "description", "src", "alt", "children"];
+const _excluded = ["title", "description", "src", "alt", "illustration", "size", "children"];
 import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Container, Description, SubContainer, Title, StyledImg } from "./EmptySlate.styles";
 import { EmptySlateFooter } from "./EmptySlateFooter";
@@ -9,9 +9,14 @@ export const EmptySlate = _ref => {
   let title = _ref.title,
     description = _ref.description,
     src = _ref.src,
-    alt = _ref.alt,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? "" : _ref$alt,
+    illustration = _ref.illustration,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "regular" : _ref$size,
     children = _ref.children,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const compact = size === "compact";
   const imageRef = useRef(null);
   const _useState = useState(),
     loadedSrc = _useState[0],
@@ -23,19 +28,24 @@ export const EmptySlate = _ref => {
     }
   }, [markLoaded]);
   return /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
-    role: "status"
-  }), /*#__PURE__*/React.createElement(StyledImg, {
+    role: "status",
+    $compact: compact
+  }), illustration != null ? illustration : src ? /*#__PURE__*/React.createElement(StyledImg, {
     ref: imageRef,
     src: src,
     alt: alt,
     onLoad: markLoaded,
     $loaded: loadedSrc === src
-  }), /*#__PURE__*/React.createElement(SubContainer, null, /*#__PURE__*/React.createElement(Title, {
-    weight: "light",
-    variant: "Title 1"
+  }) : null, /*#__PURE__*/React.createElement(SubContainer, {
+    $compact: compact
+  }, /*#__PURE__*/React.createElement(Title, {
+    weight: compact ? "semibold" : "light",
+    variant: compact ? "Body 1" : "Title 1",
+    $compact: compact
   }, title), description && /*#__PURE__*/React.createElement(Description, {
-    color: "tertiary",
-    variant: "Body 1"
+    color: compact ? "secondary" : "tertiary",
+    variant: compact ? "Body 2" : "Body 1",
+    $compact: compact
   }, description), children));
 };
 EmptySlate.Footer = EmptySlateFooter;

package/dist/esm/components/EmptySlate/EmptySlate.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptySlate.js","names":["React","useCallback","useLayoutEffect","useRef","useState","Container","Description","SubContainer","Title","StyledImg","EmptySlateFooter","isAlreadyLoaded","image","complete","naturalWidth","EmptySlate","_ref","title","description","src","alt","children","rest","_objectWithoutPropertiesLoose","_excluded","imageRef","_useState","loadedSrc","setLoadedSrc","markLoaded","current","createElement","_extends","role","ref","onLoad","$loaded","weight","variant","color","Footer","displayName"],"sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  Container,\n  Description,\n  SubContainer,\n  Title,\n  StyledImg,\n} from \"./EmptySlate.styles\";\nimport { EmptySlateFooter } from \"./EmptySlateFooter\";\n\nexport interface EmptySlateProps extends HTMLAttributes<HTMLDivElement> {\n  src: string;\n  alt: string;\n  title: string;\n  description?: string;\n}\n\nconst isAlreadyLoaded = (image: HTMLImageElement | null) =>\n  !!image && image.complete && image.naturalWidth > 0;\n\nexport const EmptySlate = ({\n  title,\n  description,\n  src,\n  alt,\n  children,\n  ...rest\n}: EmptySlateProps) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [loadedSrc, setLoadedSrc] = useState<string>();\n\n  const markLoaded = useCallback(() => setLoadedSrc(src), [src]);\n\n  useLayoutEffect(() => {\n    if (isAlreadyLoaded(imageRef.current)) {\n      markLoaded();\n    }\n  }, [markLoaded]);\n\n  return (\n    <Container {...rest} role=\"status\">\n      <StyledImg\n        ref={imageRef}\n        src={src}\n        alt={alt}\n        onLoad={markLoaded}\n        $loaded={loadedSrc === src}\n      />\n      <SubContainer>\n        <Title weight=\"light\" variant=\"Title 1\">\n          {title}\n        </Title>\n        {description && (\n          <Description color=\"tertiary\" variant=\"Body 1\">\n            {description}\n          </Description>\n        )}\n\n        {children}\n      </SubContainer>\n    </Container>\n  );\n};\n\nEmptySlate.Footer = EmptySlateFooter;\n\nEmptySlate.displayName = \"EmptySlate\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAEVC,WAAW,EACXC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SACEC,SAAS,EACTC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,SAAS,QACJ,qBAAqB;AAC5B,SAASC,gBAAgB,QAAQ,oBAAoB;AASrD,MAAMC,eAAe,GAAIC,KAA8B,IACrD,CAAC,CAACA,KAAK,IAAIA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,YAAY,GAAG,CAAC;AAErD,OAAO,MAAMC,UAAU,GAAGC,IAAA,IAOH;EAAA,IANrBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACHC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IACHC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAP,IAAA,EAAAQ,SAAA;EAEP,MAAMC,QAAQ,GAAGtB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAAuB,SAAA,GAAkCtB,QAAQ,CAAS,CAAC;IAA7CuB,SAAS,GAAAD,SAAA;IAAEE,YAAY,GAAAF,SAAA;EAE9B,MAAMG,UAAU,GAAG5B,WAAW,CAAC,MAAM2B,YAAY,CAACT,GAAG,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAE9DjB,eAAe,CAAC,MAAM;IACpB,IAAIS,eAAe,CAACc,QAAQ,CAACK,OAAO,CAAC,EAAE;MACrCD,UAAU,CAAC,CAAC;IACd;EACF,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,oBACE7B,KAAA,CAAA+B,aAAA,CAAC1B,SAAS,EAAA2B,QAAA,KAAKV,IAAI;IAAEW,IAAI,EAAC;EAAQ,iBAChCjC,KAAA,CAAA+B,aAAA,CAACtB,SAAS;IACRyB,GAAG,EAAET,QAAS;IACdN,GAAG,EAAEA,GAAI;IACTC,GAAG,EAAEA,GAAI;IACTe,MAAM,EAAEN,UAAW;IACnBO,OAAO,EAAET,SAAS,KAAKR;EAAI,CAC5B,CAAC,eACFnB,KAAA,CAAA+B,aAAA,CAACxB,YAAY,qBACXP,KAAA,CAAA+B,aAAA,CAACvB,KAAK;IAAC6B,MAAM,EAAC,OAAO;IAACC,OAAO,EAAC;EAAS,GACpCrB,KACI,CAAC,EACPC,WAAW,iBACVlB,KAAA,CAAA+B,aAAA,CAACzB,WAAW;IAACiC,KAAK,EAAC,UAAU;IAACD,OAAO,EAAC;EAAQ,GAC3CpB,WACU,CACd,EAEAG,QACW,CACL,CAAC;AAEhB,CAAC;AAEDN,UAAU,CAACyB,MAAM,GAAG9B,gBAAgB;AAEpCK,UAAU,CAAC0B,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"file":"EmptySlate.js","names":["React","useCallback","useLayoutEffect","useRef","useState","Container","Description","SubContainer","Title","StyledImg","EmptySlateFooter","isAlreadyLoaded","image","complete","naturalWidth","EmptySlate","_ref","title","description","src","_ref$alt","alt","illustration","_ref$size","size","children","rest","_objectWithoutPropertiesLoose","_excluded","compact","imageRef","_useState","loadedSrc","setLoadedSrc","markLoaded","current","createElement","_extends","role","$compact","ref","onLoad","$loaded","weight","variant","color","Footer","displayName"],"sources":["../../../../src/components/EmptySlate/EmptySlate.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  Container,\n  Description,\n  SubContainer,\n  Title,\n  StyledImg,\n} from \"./EmptySlate.styles\";\nimport { EmptySlateFooter } from \"./EmptySlateFooter\";\n\nexport interface EmptySlateProps extends HTMLAttributes<HTMLDivElement> {\n  /** The image. Not needed with an illustration. */\n  src?: string;\n  alt?: string;\n  title: string;\n  description?: string;\n  /** A drawing in place of the image, such as an inline SVG that follows the theme. */\n  illustration?: ReactNode;\n  /** \"compact\" is stacked and centered, with small text, for a panel. */\n  size?: \"regular\" | \"compact\";\n}\n\nconst isAlreadyLoaded = (image: HTMLImageElement | null) =>\n  !!image && image.complete && image.naturalWidth > 0;\n\nexport const EmptySlate = ({\n  title,\n  description,\n  src,\n  alt = \"\",\n  illustration,\n  size = \"regular\",\n  children,\n  ...rest\n}: EmptySlateProps) => {\n  const compact = size === \"compact\";\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [loadedSrc, setLoadedSrc] = useState<string>();\n\n  const markLoaded = useCallback(() => setLoadedSrc(src), [src]);\n\n  useLayoutEffect(() => {\n    if (isAlreadyLoaded(imageRef.current)) {\n      markLoaded();\n    }\n  }, [markLoaded]);\n\n  return (\n    <Container {...rest} role=\"status\" $compact={compact}>\n      {illustration ??\n        (src ? (\n          <StyledImg\n            ref={imageRef}\n            src={src}\n            alt={alt}\n            onLoad={markLoaded}\n            $loaded={loadedSrc === src}\n          />\n        ) : null)}\n      <SubContainer $compact={compact}>\n        <Title\n          weight={compact ? \"semibold\" : \"light\"}\n          variant={compact ? \"Body 1\" : \"Title 1\"}\n          $compact={compact}\n        >\n          {title}\n        </Title>\n        {description && (\n          <Description\n            color={compact ? \"secondary\" : \"tertiary\"}\n            variant={compact ? \"Body 2\" : \"Body 1\"}\n            $compact={compact}\n          >\n            {description}\n          </Description>\n        )}\n\n        {children}\n      </SubContainer>\n    </Container>\n  );\n};\n\nEmptySlate.Footer = EmptySlateFooter;\n\nEmptySlate.displayName = \"EmptySlate\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,eAAe,EACfC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,SACEC,SAAS,EACTC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,SAAS,QACJ,qBAAqB;AAC5B,SAASC,gBAAgB,QAAQ,oBAAoB;AAcrD,MAAMC,eAAe,GAAIC,KAA8B,IACrD,CAAC,CAACA,KAAK,IAAIA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,YAAY,GAAG,CAAC;AAErD,OAAO,MAAMC,UAAU,GAAGC,IAAA,IASH;EAAA,IARrBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IAAAC,QAAA,GAAAJ,IAAA,CACHK,GAAG;IAAHA,GAAG,GAAAD,QAAA,cAAG,EAAE,GAAAA,QAAA;IACRE,YAAY,GAAAN,IAAA,CAAZM,YAAY;IAAAC,SAAA,GAAAP,IAAA,CACZQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,SAAS,GAAAA,SAAA;IAChBE,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,MAAMC,OAAO,GAAGL,IAAI,KAAK,SAAS;EAClC,MAAMM,QAAQ,GAAG3B,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAA4B,SAAA,GAAkC3B,QAAQ,CAAS,CAAC;IAA7C4B,SAAS,GAAAD,SAAA;IAAEE,YAAY,GAAAF,SAAA;EAE9B,MAAMG,UAAU,GAAGjC,WAAW,CAAC,MAAMgC,YAAY,CAACd,GAAG,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAE9DjB,eAAe,CAAC,MAAM;IACpB,IAAIS,eAAe,CAACmB,QAAQ,CAACK,OAAO,CAAC,EAAE;MACrCD,UAAU,CAAC,CAAC;IACd;EACF,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,oBACElC,KAAA,CAAAoC,aAAA,CAAC/B,SAAS,EAAAgC,QAAA,KAAKX,IAAI;IAAEY,IAAI,EAAC,QAAQ;IAACC,QAAQ,EAAEV;EAAQ,IAClDP,YAAY,WAAZA,YAAY,GACVH,GAAG,gBACFnB,KAAA,CAAAoC,aAAA,CAAC3B,SAAS;IACR+B,GAAG,EAAEV,QAAS;IACdX,GAAG,EAAEA,GAAI;IACTE,GAAG,EAAEA,GAAI;IACToB,MAAM,EAAEP,UAAW;IACnBQ,OAAO,EAAEV,SAAS,KAAKb;EAAI,CAC5B,CAAC,GACA,IAAI,eACVnB,KAAA,CAAAoC,aAAA,CAAC7B,YAAY;IAACgC,QAAQ,EAAEV;EAAQ,gBAC9B7B,KAAA,CAAAoC,aAAA,CAAC5B,KAAK;IACJmC,MAAM,EAAEd,OAAO,GAAG,UAAU,GAAG,OAAQ;IACvCe,OAAO,EAAEf,OAAO,GAAG,QAAQ,GAAG,SAAU;IACxCU,QAAQ,EAAEV;EAAQ,GAEjBZ,KACI,CAAC,EACPC,WAAW,iBACVlB,KAAA,CAAAoC,aAAA,CAAC9B,WAAW;IACVuC,KAAK,EAAEhB,OAAO,GAAG,WAAW,GAAG,UAAW;IAC1Ce,OAAO,EAAEf,OAAO,GAAG,QAAQ,GAAG,QAAS;IACvCU,QAAQ,EAAEV;EAAQ,GAEjBX,WACU,CACd,EAEAO,QACW,CACL,CAAC;AAEhB,CAAC;AAEDV,UAAU,CAAC+B,MAAM,GAAGpC,gBAAgB;AAEpCK,UAAU,CAACgC,WAAW,GAAG,YAAY","ignoreList":[]}

package/dist/esm/components/EmptySlate/EmptySlate.styles.d.ts

@@ -1,13 +1,17 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface Compact {
+    $compact?: boolean;
+}
+export declare const Container: import("styled-components").StyledComponent<"div", any, Compact, never>;
+export declare const SubContainer: import("styled-components").StyledComponent<"div", any, Compact, never>;
 export declare const StyledImg: import("styled-components").StyledComponent<"img", any, {
     $loaded: boolean;
 }, never>;
 export declare const Title: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
     displayName?: string;
-}, any, {}, never>;
+}, any, Compact, never>;
 export declare const Description: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
     displayName?: string;
-}, any, {}, never>;
+}, any, Compact, never>;
 export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};
 //# sourceMappingURL=EmptySlate.styles.d.ts.map

package/dist/esm/components/EmptySlate/EmptySlate.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptySlate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,oEAWrB,CAAC;AAEF,eAAO,MAAM,YAAY,oEAYxB,CAAC;AAEF,eAAO,MAAM,SAAS;aAAyB,OAAO;SAIrD,CAAC;AAEF,eAAO,MAAM,KAAK;;kBAOjB,CAAC;AAEF,eAAO,MAAM,WAAW;;kBAMvB,CAAC;AAEF,eAAO,MAAM,eAAe,oEAU3B,CAAC"}
+{"version":3,"file":"EmptySlate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptySlate/EmptySlate.styles.ts"],"names":[],"mappings":"AAKA,UAAU,OAAO;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,yEAkBrB,CAAC;AAEF,eAAO,MAAM,YAAY,yEAgBxB,CAAC;AAEF,eAAO,MAAM,SAAS;aAAyB,OAAO;SAIrD,CAAC;AAEF,eAAO,MAAM,KAAK;;uBAmBjB,CAAC;AAEF,eAAO,MAAM,WAAW;;uBAkBvB,CAAC;AAEF,eAAO,MAAM,eAAe,oEAU3B,CAAC"}

package/dist/esm/components/EmptySlate/EmptySlate.styles.js

@@ -1,14 +1,14 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { screen } from "../BreakPoints";
 import { Typography } from "../Typography/Typography";
 export const Container = styled.div.withConfig({
   displayName: "EmptySlatestyles__Container",
   componentId: "sc-jfbqky-0"
-})(["display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;gap:24px;", "{flex-direction:row;}"], screen.lg);
+})(["display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;gap:24px;", ""], props => props.$compact ? css(["gap:24px;"]) : css(["", "{flex-direction:row;}"], screen.lg));
 export const SubContainer = styled.div.withConfig({
   displayName: "EmptySlatestyles__SubContainer",
   componentId: "sc-jfbqky-1"
-})(["display:flex;align-items:center;flex-direction:column;justify-content:center;max-width:400px;padding-left:20px;padding-right:20px;", "{align-items:flex-start;}"], screen.lg);
+})(["display:flex;align-items:center;flex-direction:column;justify-content:center;max-width:400px;padding-left:20px;padding-right:20px;", ""], props => !props.$compact && css(["", "{align-items:flex-start;}"], screen.lg));
 export const StyledImg = styled.img.withConfig({
   displayName: "EmptySlatestyles__StyledImg",
   componentId: "sc-jfbqky-2"
@@ -19,11 +19,11 @@ export const StyledImg = styled.img.withConfig({
 export const Title = styled(Typography).withConfig({
   displayName: "EmptySlatestyles__Title",
   componentId: "sc-jfbqky-3"
-})(["margin-block-end:8px;text-align:center;", "{text-align:start;}"], screen.lg);
+})(["margin-block-end:", ";text-align:center;", " ", ""], props => props.$compact ? "4px" : "8px", props => props.$compact && css(["&&{line-height:1.25rem;}"]), props => !props.$compact && css(["", "{text-align:start;}"], screen.lg));
 export const Description = styled(Typography).withConfig({
   displayName: "EmptySlatestyles__Description",
   componentId: "sc-jfbqky-4"
-})(["text-align:center;", "{text-align:start;}"], screen.lg);
+})(["text-align:center;", " ", ""], props => props.$compact && css(["&&{line-height:1.125rem;}"]), props => !props.$compact && css(["", "{text-align:start;}"], screen.lg));
 export const FooterContainer = styled.div.withConfig({
   displayName: "EmptySlatestyles__FooterContainer",
   componentId: "sc-jfbqky-5"