@activecollab/components 2.0.498 → 2.0.499

package/dist/esm/hooks/useLongPress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongPress.js","names":["useCallback","useEffect","useMemo","useRef","PRESS_IGNORED","hasSelectedText","selection","window","getSelection","Boolean","isCollapsed","swallowNextClick","swallow","event","preventDefault","stopPropagation","document","addEventListener","capture","once","setTimeout","removeEventListener","NO_HANDLERS","useLongPress","onLongPress","_temp","_ref","_ref$enabled","enabled","_ref$onControls","onControls","_ref$ms","ms","_ref$slop","slop","pressRef","cancel","_pressRef$current","clearTimeout","current","timer","start","control","target","closest","isOnControl","currentTarget","contains","button","ctrlKey","metaKey","x","clientX","y","clientY","move","press","Math","hypot","preventMenu","handlers","onPointerDown","onPointerMove","onPointerUp","onPointerLeave","onPointerCancel","onContextMenu"],"sources":["../../../src/hooks/useLongPress.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport type React from \"react\";\n\nexport const PRESS_IGNORED =\n  \"a, button, img, input, textarea, select, [role='button'], .pre-copy-wrapper\";\n\nexport const hasSelectedText = (): boolean => {\n  const selection = window.getSelection?.();\n\n  return Boolean(selection && !selection.isCollapsed);\n};\n\n// A mouse press ends with a click, which must not reach the target.\nconst swallowNextClick = () => {\n  const swallow = (event: Event) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  document.addEventListener(\"click\", swallow, { capture: true, once: true });\n  window.addEventListener(\n    \"pointerup\",\n    () =>\n      setTimeout(() =>\n        document.removeEventListener(\"click\", swallow, { capture: true })\n      ),\n    { once: true }\n  );\n};\n\nexport interface UseLongPressOptions {\n  /** Without it the hook returns no handlers. */\n  enabled?: boolean;\n  /** The element is a control itself, so a press on it counts. */\n  onControls?: boolean;\n  /** Time the press must last, in milliseconds. */\n  ms?: number;\n  /** Movement that cancels the press, in pixels. */\n  slop?: number;\n}\n\nexport interface LongPressHandlers {\n  onPointerDown?: (event: React.PointerEvent<HTMLElement>) => void;\n  onPointerMove?: (event: React.PointerEvent<HTMLElement>) => void;\n  onPointerUp?: () => void;\n  onPointerLeave?: () => void;\n  onPointerCancel?: () => void;\n  onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;\n}\n\ninterface Press {\n  x: number;\n  y: number;\n  timer: ReturnType<typeof setTimeout>;\n}\n\nconst NO_HANDLERS: LongPressHandlers = {};\n\nexport const useLongPress = (\n  onLongPress?: () => void,\n  {\n    enabled = true,\n    onControls = false,\n    ms = 500,\n    slop = 4,\n  }: UseLongPressOptions = {}\n): LongPressHandlers => {\n  const pressRef = useRef<Press | null>(null);\n\n  const cancel = useCallback(() => {\n    clearTimeout(pressRef.current?.timer);\n    pressRef.current = null;\n  }, []);\n\n  useEffect(() => cancel, [cancel]);\n\n  const start = useCallback(\n    (event: React.PointerEvent<HTMLElement>) => {\n      const control = (event.target as HTMLElement).closest(PRESS_IGNORED);\n      const isOnControl =\n        !onControls &&\n        control &&\n        control !== event.currentTarget &&\n        event.currentTarget.contains(control);\n\n      if (event.button !== 0 || event.ctrlKey || event.metaKey || isOnControl) {\n        return;\n      }\n\n      cancel();\n\n      pressRef.current = {\n        x: event.clientX,\n        y: event.clientY,\n        timer: setTimeout(() => {\n          cancel();\n\n          if (!hasSelectedText()) {\n            swallowNextClick();\n            onLongPress?.();\n          }\n        }, ms),\n      };\n    },\n    [cancel, ms, onControls, onLongPress]\n  );\n\n  const move = useCallback(\n    (event: React.PointerEvent<HTMLElement>) => {\n      const press = pressRef.current;\n\n      if (\n        press &&\n        Math.hypot(event.clientX - press.x, event.clientY - press.y) > slop\n      ) {\n        cancel();\n      }\n    },\n    [cancel, slop]\n  );\n\n  const preventMenu = useCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (pressRef.current) {\n      event.preventDefault();\n    }\n  }, []);\n\n  const handlers = useMemo(\n    () => ({\n      onPointerDown: start,\n      onPointerMove: move,\n      onPointerUp: cancel,\n      onPointerLeave: cancel,\n      onPointerCancel: cancel,\n      onContextMenu: preventMenu,\n    }),\n    [cancel, move, preventMenu, start]\n  );\n\n  return enabled ? handlers : NO_HANDLERS;\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAG/D,OAAO,MAAMC,aAAa,GACxB,6EAA6E;AAE/E,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAe;EAC5C,MAAMC,SAAS,GAAGC,MAAM,CAACC,YAAY,oBAAnBD,MAAM,CAACC,YAAY,CAAG,CAAC;EAEzC,OAAOC,OAAO,CAACH,SAAS,IAAI,CAACA,SAAS,CAACI,WAAW,CAAC;AACrD,CAAC;;AAED;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAIC,KAAY,IAAK;IAChCA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;EACzB,CAAC;EAEDC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEL,OAAO,EAAE;IAAEM,OAAO,EAAE,IAAI;IAAEC,IAAI,EAAE;EAAK,CAAC,CAAC;EAC1EZ,MAAM,CAACU,gBAAgB,CACrB,WAAW,EACX,MACEG,UAAU,CAAC,MACTJ,QAAQ,CAACK,mBAAmB,CAAC,OAAO,EAAET,OAAO,EAAE;IAAEM,OAAO,EAAE;EAAK,CAAC,CAClE,CAAC,EACH;IAAEC,IAAI,EAAE;EAAK,CACf,CAAC;AACH,CAAC;AA4BD,MAAMG,WAA8B,GAAG,CAAC,CAAC;AAEzC,OAAO,MAAMC,YAAY,GAAG,SAAAA,CAC1BC,WAAwB,EAAAC,KAAA,EAOF;EAAA,IAAAC,IAAA,GAAAD,KAAA,cADG,CAAC,CAAC,GAAAA,KAAA;IAAAE,YAAA,GAAAD,IAAA,CAJzBE,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,IAAI,GAAAA,YAAA;IAAAE,eAAA,GAAAH,IAAA,CACdI,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;IAAAE,OAAA,GAAAL,IAAA,CAClBM,EAAE;IAAFA,EAAE,GAAAD,OAAA,cAAG,GAAG,GAAAA,OAAA;IAAAE,SAAA,GAAAP,IAAA,CACRQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,CAAC,GAAAA,SAAA;EAGV,MAAME,QAAQ,GAAGhC,MAAM,CAAe,IAAI,CAAC;EAE3C,MAAMiC,MAAM,GAAGpC,WAAW,CAAC,MAAM;IAAA,IAAAqC,iBAAA;IAC/BC,YAAY,EAAAD,iBAAA,GAACF,QAAQ,CAACI,OAAO,qBAAhBF,iBAAA,CAAkBG,KAAK,CAAC;IACrCL,QAAQ,CAACI,OAAO,GAAG,IAAI;EACzB,CAAC,EAAE,EAAE,CAAC;EAENtC,SAAS,CAAC,MAAMmC,MAAM,EAAE,CAACA,MAAM,CAAC,CAAC;EAEjC,MAAMK,KAAK,GAAGzC,WAAW,CACtBa,KAAsC,IAAK;IAC1C,MAAM6B,OAAO,GAAI7B,KAAK,CAAC8B,MAAM,CAAiBC,OAAO,CAACxC,aAAa,CAAC;IACpE,MAAMyC,WAAW,GACf,CAACf,UAAU,IACXY,OAAO,IACPA,OAAO,KAAK7B,KAAK,CAACiC,aAAa,IAC/BjC,KAAK,CAACiC,aAAa,CAACC,QAAQ,CAACL,OAAO,CAAC;IAEvC,IAAI7B,KAAK,CAACmC,MAAM,KAAK,CAAC,IAAInC,KAAK,CAACoC,OAAO,IAAIpC,KAAK,CAACqC,OAAO,IAAIL,WAAW,EAAE;MACvE;IACF;IAEAT,MAAM,CAAC,CAAC;IAERD,QAAQ,CAACI,OAAO,GAAG;MACjBY,CAAC,EAAEtC,KAAK,CAACuC,OAAO;MAChBC,CAAC,EAAExC,KAAK,CAACyC,OAAO;MAChBd,KAAK,EAAEpB,UAAU,CAAC,MAAM;QACtBgB,MAAM,CAAC,CAAC;QAER,IAAI,CAAC/B,eAAe,CAAC,CAAC,EAAE;UACtBM,gBAAgB,CAAC,CAAC;UAClBa,WAAW,YAAXA,WAAW,CAAG,CAAC;QACjB;MACF,CAAC,EAAEQ,EAAE;IACP,CAAC;EACH,CAAC,EACD,CAACI,MAAM,EAAEJ,EAAE,EAAEF,UAAU,EAAEN,WAAW,CACtC,CAAC;EAED,MAAM+B,IAAI,GAAGvD,WAAW,CACrBa,KAAsC,IAAK;IAC1C,MAAM2C,KAAK,GAAGrB,QAAQ,CAACI,OAAO;IAE9B,IACEiB,KAAK,IACLC,IAAI,CAACC,KAAK,CAAC7C,KAAK,CAACuC,OAAO,GAAGI,KAAK,CAACL,CAAC,EAAEtC,KAAK,CAACyC,OAAO,GAAGE,KAAK,CAACH,CAAC,CAAC,GAAGnB,IAAI,EACnE;MACAE,MAAM,CAAC,CAAC;IACV;EACF,CAAC,EACD,CAACA,MAAM,EAAEF,IAAI,CACf,CAAC;EAED,MAAMyB,WAAW,GAAG3D,WAAW,CAAEa,KAAoC,IAAK;IACxE,IAAIsB,QAAQ,CAACI,OAAO,EAAE;MACpB1B,KAAK,CAACC,cAAc,CAAC,CAAC;IACxB;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM8C,QAAQ,GAAG1D,OAAO,CACtB,OAAO;IACL2D,aAAa,EAAEpB,KAAK;IACpBqB,aAAa,EAAEP,IAAI;IACnBQ,WAAW,EAAE3B,MAAM;IACnB4B,cAAc,EAAE5B,MAAM;IACtB6B,eAAe,EAAE7B,MAAM;IACvB8B,aAAa,EAAEP;EACjB,CAAC,CAAC,EACF,CAACvB,MAAM,EAAEmB,IAAI,EAAEI,WAAW,EAAElB,KAAK,CACnC,CAAC;EAED,OAAOb,OAAO,GAAGgC,QAAQ,GAAGtC,WAAW;AACzC,CAAC","ignoreList":[]}

package/dist/esm/hooks/useResizablePanel.d.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+export declare const clampPanelWidth: (width: unknown, min: number, max: number, fallback?: number) => number;
+export interface UseResizablePanelOptions {
+    /** The side of the layout the panel stands on. Its handle is on the opposite edge. */
+    side: "left" | "right";
+    width: number;
+    min: number;
+    max: number;
+    /** The change of one arrow key press, in pixels. */
+    step?: number;
+    /** Called once at the end of a drag, and on each key press. */
+    onChange: (width: number) => void;
+}
+export interface ResizeHandleProps {
+    active: boolean;
+    onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    "aria-valuemin": number;
+    "aria-valuemax": number;
+    "aria-valuenow": number;
+}
+export declare const useResizablePanel: ({ side, width, min, max, step, onChange, }: UseResizablePanelOptions) => {
+    width: number;
+    isResizing: boolean;
+    handleProps: ResizeHandleProps;
+};
+//# sourceMappingURL=useResizablePanel.d.ts.map

package/dist/esm/hooks/useResizablePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizablePanel.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizablePanel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,eAAe,GAC1B,OAAO,OAAO,EACd,KAAK,MAAM,EACX,KAAK,MAAM,EACX,WAAU,MAAY,KACrB,MAMF,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,sFAAsF;IACtF,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,GAAI,4CAO/B,wBAAwB;;;;CAyG1B,CAAC"}

package/dist/esm/hooks/useResizablePanel.js

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+export const clampPanelWidth = function (width, min, max, fallback) {
+  if (fallback === void 0) {
+    fallback = min;
+  }
+  const numeric = Number(width);
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(Math.max(numeric, min), max);
+};
+export const useResizablePanel = _ref => {
+  let side = _ref.side,
+    width = _ref.width,
+    min = _ref.min,
+    max = _ref.max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 16 : _ref$step,
+    onChange = _ref.onChange;
+  const _useState = useState(() => clampPanelWidth(width, min, max)),
+    resized = _useState[0],
+    setResized = _useState[1];
+  const _useState2 = useState(false),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  const resizedRef = useRef(resized);
+  const isResizingRef = useRef(false);
+  const stopRef = useRef(null);
+  resizedRef.current = resized;
+  useEffect(() => {
+    if (!isResizingRef.current) {
+      setResized(clampPanelWidth(width, min, max));
+    }
+  }, [width, min, max]);
+  useEffect(() => () => stopRef.current == null ? void 0 : stopRef.current(), []);
+  const onPointerDown = useCallback(event => {
+    if (event.button != null && event.button !== 0) return;
+    const startX = event.clientX;
+    const startWidth = resizedRef.current;
+    isResizingRef.current = true;
+    setIsResizing(true);
+    const handleMove = moveEvent => {
+      const delta = side === "right" ? startX - moveEvent.clientX : moveEvent.clientX - startX;
+      const next = clampPanelWidth(startWidth + delta, min, max);
+      resizedRef.current = next;
+      setResized(next);
+    };
+    const handleEnd = () => {
+      stopRef.current == null || stopRef.current();
+      if (resizedRef.current !== startWidth) {
+        onChange(Math.round(resizedRef.current));
+      }
+    };
+    stopRef.current = () => {
+      isResizingRef.current = false;
+      setIsResizing(false);
+      stopRef.current = null;
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleEnd);
+      window.removeEventListener("pointercancel", handleEnd);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleEnd);
+    window.addEventListener("pointercancel", handleEnd);
+    event.preventDefault();
+  }, [side, min, max, onChange]);
+  const onKeyDown = useCallback(event => {
+    const grow = side === "right" ? "ArrowLeft" : "ArrowRight";
+    const shrink = side === "right" ? "ArrowRight" : "ArrowLeft";
+    const current = resizedRef.current;
+    const targets = {
+      [grow]: current + step,
+      [shrink]: current - step,
+      Home: min,
+      End: max
+    };
+    if (!(event.key in targets)) return;
+    event.preventDefault();
+    const next = clampPanelWidth(targets[event.key], min, max);
+    if (next !== current) {
+      resizedRef.current = next;
+      setResized(next);
+      onChange(Math.round(next));
+    }
+  }, [side, min, max, step, onChange]);
+  const handleProps = useMemo(() => ({
+    active: isResizing,
+    onPointerDown,
+    onKeyDown,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": resized
+  }), [isResizing, onPointerDown, onKeyDown, min, max, resized]);
+  return {
+    width: resized,
+    isResizing,
+    handleProps
+  };
+};
+//# sourceMappingURL=useResizablePanel.js.map

package/dist/esm/hooks/useResizablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizablePanel.js","names":["useCallback","useEffect","useMemo","useRef","useState","clampPanelWidth","width","min","max","fallback","numeric","Number","isFinite","Math","useResizablePanel","_ref","side","_ref$step","step","onChange","_useState","resized","setResized","_useState2","isResizing","setIsResizing","resizedRef","isResizingRef","stopRef","current","onPointerDown","event","button","startX","clientX","startWidth","handleMove","moveEvent","delta","next","handleEnd","round","window","removeEventListener","addEventListener","preventDefault","onKeyDown","grow","shrink","targets","Home","End","key","handleProps","active"],"sources":["../../../src/hooks/useResizablePanel.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type React from \"react\";\n\nexport const clampPanelWidth = (\n  width: unknown,\n  min: number,\n  max: number,\n  fallback: number = min\n): number => {\n  const numeric = Number(width);\n\n  if (!Number.isFinite(numeric)) return fallback;\n\n  return Math.min(Math.max(numeric, min), max);\n};\n\nexport interface UseResizablePanelOptions {\n  /** The side of the layout the panel stands on. Its handle is on the opposite edge. */\n  side: \"left\" | \"right\";\n  width: number;\n  min: number;\n  max: number;\n  /** The change of one arrow key press, in pixels. */\n  step?: number;\n  /** Called once at the end of a drag, and on each key press. */\n  onChange: (width: number) => void;\n}\n\nexport interface ResizeHandleProps {\n  active: boolean;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  \"aria-valuenow\": number;\n}\n\nexport const useResizablePanel = ({\n  side,\n  width,\n  min,\n  max,\n  step = 16,\n  onChange,\n}: UseResizablePanelOptions) => {\n  const [resized, setResized] = useState(() =>\n    clampPanelWidth(width, min, max)\n  );\n  const [isResizing, setIsResizing] = useState(false);\n  const resizedRef = useRef(resized);\n  const isResizingRef = useRef(false);\n  const stopRef = useRef<(() => void) | null>(null);\n\n  resizedRef.current = resized;\n\n  useEffect(() => {\n    if (!isResizingRef.current) {\n      setResized(clampPanelWidth(width, min, max));\n    }\n  }, [width, min, max]);\n\n  useEffect(() => () => stopRef.current?.(), []);\n\n  const onPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLElement>) => {\n      if (event.button != null && event.button !== 0) return;\n\n      const startX = event.clientX;\n      const startWidth = resizedRef.current;\n\n      isResizingRef.current = true;\n      setIsResizing(true);\n\n      const handleMove = (moveEvent: PointerEvent) => {\n        const delta =\n          side === \"right\"\n            ? startX - moveEvent.clientX\n            : moveEvent.clientX - startX;\n        const next = clampPanelWidth(startWidth + delta, min, max);\n\n        resizedRef.current = next;\n        setResized(next);\n      };\n\n      const handleEnd = () => {\n        stopRef.current?.();\n\n        if (resizedRef.current !== startWidth) {\n          onChange(Math.round(resizedRef.current));\n        }\n      };\n\n      stopRef.current = () => {\n        isResizingRef.current = false;\n        setIsResizing(false);\n        stopRef.current = null;\n        window.removeEventListener(\"pointermove\", handleMove);\n        window.removeEventListener(\"pointerup\", handleEnd);\n        window.removeEventListener(\"pointercancel\", handleEnd);\n      };\n\n      window.addEventListener(\"pointermove\", handleMove);\n      window.addEventListener(\"pointerup\", handleEnd);\n      window.addEventListener(\"pointercancel\", handleEnd);\n      event.preventDefault();\n    },\n    [side, min, max, onChange]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      const grow = side === \"right\" ? \"ArrowLeft\" : \"ArrowRight\";\n      const shrink = side === \"right\" ? \"ArrowRight\" : \"ArrowLeft\";\n      const current = resizedRef.current;\n      const targets: Record<string, number> = {\n        [grow]: current + step,\n        [shrink]: current - step,\n        Home: min,\n        End: max,\n      };\n\n      if (!(event.key in targets)) return;\n\n      event.preventDefault();\n\n      const next = clampPanelWidth(targets[event.key], min, max);\n\n      if (next !== current) {\n        resizedRef.current = next;\n        setResized(next);\n        onChange(Math.round(next));\n      }\n    },\n    [side, min, max, step, onChange]\n  );\n\n  const handleProps: ResizeHandleProps = useMemo(\n    () => ({\n      active: isResizing,\n      onPointerDown,\n      onKeyDown,\n      \"aria-valuemin\": min,\n      \"aria-valuemax\": max,\n      \"aria-valuenow\": resized,\n    }),\n    [isResizing, onPointerDown, onKeyDown, min, max, resized]\n  );\n\n  return { width: resized, isResizing, handleProps };\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/utils/useContainerCss.d.ts

@@ -0,0 +1,2 @@
+export declare const useContainerCss: (id: string, css: string) => void;
+//# sourceMappingURL=useContainerCss.d.ts.map

package/dist/esm/utils/useContainerCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerCss.d.ts","sourceRoot":"","sources":["../../../src/utils/useContainerCss.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,IAAI,MAAM,EAAE,KAAK,MAAM,SASxC,CAAC"}

package/dist/esm/utils/useContainerCss.js

@@ -0,0 +1,12 @@
+import { useInsertionEffect } from "react";
+
+// styled-components 5 cannot print container queries, so a component adds such rules to the page as plain CSS, once.
+export const useContainerCss = (id, css) => useInsertionEffect(() => {
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+}, [id, css]);
+//# sourceMappingURL=useContainerCss.js.map

package/dist/esm/utils/useContainerCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerCss.js","names":["useInsertionEffect","useContainerCss","id","css","document","getElementById","style","createElement","textContent","head","appendChild"],"sources":["../../../src/utils/useContainerCss.ts"],"sourcesContent":["import { useInsertionEffect } from \"react\";\n\n// styled-components 5 cannot print container queries, so a component adds such rules to the page as plain CSS, once.\nexport const useContainerCss = (id: string, css: string) =>\n  useInsertionEffect(() => {\n    if (!document.getElementById(id)) {\n      const style = document.createElement(\"style\");\n\n      style.id = id;\n      style.textContent = css;\n      document.head.appendChild(style);\n    }\n  }, [id, css]);\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,OAAO;;AAE1C;AACA,OAAO,MAAMC,eAAe,GAAGA,CAACC,EAAU,EAAEC,GAAW,KACrDH,kBAAkB,CAAC,MAAM;EACvB,IAAI,CAACI,QAAQ,CAACC,cAAc,CAACH,EAAE,CAAC,EAAE;IAChC,MAAMI,KAAK,GAAGF,QAAQ,CAACG,aAAa,CAAC,OAAO,CAAC;IAE7CD,KAAK,CAACJ,EAAE,GAAGA,EAAE;IACbI,KAAK,CAACE,WAAW,GAAGL,GAAG;IACvBC,QAAQ,CAACK,IAAI,CAACC,WAAW,CAACJ,KAAK,CAAC;EAClC;AACF,CAAC,EAAE,CAACJ,EAAE,EAAEC,GAAG,CAAC,CAAC","ignoreList":[]}