@activecollab/components 2.0.498 → 2.0.500

package/dist/esm/components/Collapse/Collapse.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["open", "duration", "unmountOnExit", "appear", "clip", "className", "children"];
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { StyledCollapse, StyledCollapseContent } from "./Styles";
+export const Collapse = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let open = _ref.open,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 200 : _ref$duration,
+    _ref$unmountOnExit = _ref.unmountOnExit,
+    unmountOnExit = _ref$unmountOnExit === void 0 ? false : _ref$unmountOnExit,
+    _ref$appear = _ref.appear,
+    appear = _ref$appear === void 0 ? false : _ref$appear,
+    _ref$clip = _ref.clip,
+    clip = _ref$clip === void 0 ? "both" : _ref$clip,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const _useState = useState(open || !unmountOnExit),
+    mounted = _useState[0],
+    setMounted = _useState[1];
+  const _useState2 = useState(open && !appear),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  const mountedRef = useRef(mounted);
+  const isFirstRun = useRef(true);
+  mountedRef.current = mounted;
+  useEffect(() => {
+    const isFirst = isFirstRun.current;
+    isFirstRun.current = false;
+    if (open) {
+      // Content that was painted closed can open in the same frame.
+      if (mountedRef.current && !isFirst) {
+        setExpanded(true);
+        return undefined;
+      }
+      setMounted(true);
+      // Two frames, so the closed state paints before the clip starts.
+      let frame = requestAnimationFrame(() => {
+        frame = requestAnimationFrame(() => setExpanded(true));
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    setExpanded(false);
+    if (!unmountOnExit) {
+      return undefined;
+    }
+    const timer = setTimeout(() => setMounted(false), duration);
+    return () => clearTimeout(timer);
+  }, [duration, open, unmountOnExit]);
+  if (!mounted) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledCollapse, _extends({}, rest, {
+    inert: open ? undefined : "",
+    ref: ref,
+    $open: expanded,
+    $duration: duration,
+    "data-open": expanded,
+    className: classnames("c-collapse", className)
+  }), /*#__PURE__*/React.createElement(StyledCollapseContent, {
+    $clip: clip,
+    className: "c-collapse__content"
+  }, children));
+});
+Collapse.displayName = "Collapse";
+//# sourceMappingURL=Collapse.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapse.js","names":["React","forwardRef","useEffect","useRef","useState","classnames","StyledCollapse","StyledCollapseContent","Collapse","_ref","ref","open","_ref$duration","duration","_ref$unmountOnExit","unmountOnExit","_ref$appear","appear","_ref$clip","clip","className","children","rest","_objectWithoutPropertiesLoose","_excluded","_useState","mounted","setMounted","_useState2","expanded","setExpanded","mountedRef","isFirstRun","current","isFirst","undefined","frame","requestAnimationFrame","cancelAnimationFrame","timer","setTimeout","clearTimeout","createElement","_extends","inert","$open","$duration","$clip","displayName"],"sources":["../../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import React, {\n  HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledCollapse, StyledCollapseContent } from \"./Styles\";\n\nexport interface ICollapseProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shows the content. */\n  open: boolean;\n  /** The time of the clip, in milliseconds. */\n  duration?: number;\n  /** Removes the content from the page after the close. */\n  unmountOnExit?: boolean;\n  /** Opens with a clip on the first render. */\n  appear?: boolean;\n  /** \"vertical\" clips only the height, so content beside the box stays visible. */\n  clip?: \"both\" | \"vertical\";\n}\n\nexport const Collapse = forwardRef<HTMLDivElement, ICollapseProps>(\n  (\n    {\n      open,\n      duration = 200,\n      unmountOnExit = false,\n      appear = false,\n      clip = \"both\",\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [mounted, setMounted] = useState(open || !unmountOnExit);\n    const [expanded, setExpanded] = useState(open && !appear);\n\n    const mountedRef = useRef(mounted);\n    const isFirstRun = useRef(true);\n\n    mountedRef.current = mounted;\n\n    useEffect(() => {\n      const isFirst = isFirstRun.current;\n\n      isFirstRun.current = false;\n\n      if (open) {\n        // Content that was painted closed can open in the same frame.\n        if (mountedRef.current && !isFirst) {\n          setExpanded(true);\n\n          return undefined;\n        }\n\n        setMounted(true);\n        // Two frames, so the closed state paints before the clip starts.\n        let frame = requestAnimationFrame(() => {\n          frame = requestAnimationFrame(() => setExpanded(true));\n        });\n\n        return () => cancelAnimationFrame(frame);\n      }\n\n      setExpanded(false);\n\n      if (!unmountOnExit) {\n        return undefined;\n      }\n\n      const timer = setTimeout(() => setMounted(false), duration);\n\n      return () => clearTimeout(timer);\n    }, [duration, open, unmountOnExit]);\n\n    if (!mounted) {\n      return null;\n    }\n\n    return (\n      <StyledCollapse\n        {...rest}\n        {...{ inert: open ? undefined : \"\" }}\n        ref={ref}\n        $open={expanded}\n        $duration={duration}\n        data-open={expanded}\n        className={classnames(\"c-collapse\", className)}\n      >\n        <StyledCollapseContent $clip={clip} className=\"c-collapse__content\">\n          {children}\n        </StyledCollapseContent>\n      </StyledCollapse>\n    );\n  }\n);\n\nCollapse.displayName = \"Collapse\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAEVC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,UAAU;AAehE,OAAO,MAAMC,QAAQ,gBAAGP,UAAU,CAChC,CAAAQ,IAAA,EAWEC,GAAG,KACA;EAAA,IAVDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAAC,aAAA,GAAAH,IAAA,CACJI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;IAAAE,kBAAA,GAAAL,IAAA,CACdM,aAAa;IAAbA,aAAa,GAAAD,kBAAA,cAAG,KAAK,GAAAA,kBAAA;IAAAE,WAAA,GAAAP,IAAA,CACrBQ,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,SAAA,GAAAT,IAAA,CACdU,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,MAAM,GAAAA,SAAA;IACbE,SAAS,GAAAX,IAAA,CAATW,SAAS;IACTC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAd,IAAA,EAAAe,SAAA;EAIT,MAAAC,SAAA,GAA8BrB,QAAQ,CAACO,IAAI,IAAI,CAACI,aAAa,CAAC;IAAvDW,OAAO,GAAAD,SAAA;IAAEE,UAAU,GAAAF,SAAA;EAC1B,MAAAG,UAAA,GAAgCxB,QAAQ,CAACO,IAAI,IAAI,CAACM,MAAM,CAAC;IAAlDY,QAAQ,GAAAD,UAAA;IAAEE,WAAW,GAAAF,UAAA;EAE5B,MAAMG,UAAU,GAAG5B,MAAM,CAACuB,OAAO,CAAC;EAClC,MAAMM,UAAU,GAAG7B,MAAM,CAAC,IAAI,CAAC;EAE/B4B,UAAU,CAACE,OAAO,GAAGP,OAAO;EAE5BxB,SAAS,CAAC,MAAM;IACd,MAAMgC,OAAO,GAAGF,UAAU,CAACC,OAAO;IAElCD,UAAU,CAACC,OAAO,GAAG,KAAK;IAE1B,IAAItB,IAAI,EAAE;MACR;MACA,IAAIoB,UAAU,CAACE,OAAO,IAAI,CAACC,OAAO,EAAE;QAClCJ,WAAW,CAAC,IAAI,CAAC;QAEjB,OAAOK,SAAS;MAClB;MAEAR,UAAU,CAAC,IAAI,CAAC;MAChB;MACA,IAAIS,KAAK,GAAGC,qBAAqB,CAAC,MAAM;QACtCD,KAAK,GAAGC,qBAAqB,CAAC,MAAMP,WAAW,CAAC,IAAI,CAAC,CAAC;MACxD,CAAC,CAAC;MAEF,OAAO,MAAMQ,oBAAoB,CAACF,KAAK,CAAC;IAC1C;IAEAN,WAAW,CAAC,KAAK,CAAC;IAElB,IAAI,CAACf,aAAa,EAAE;MAClB,OAAOoB,SAAS;IAClB;IAEA,MAAMI,KAAK,GAAGC,UAAU,CAAC,MAAMb,UAAU,CAAC,KAAK,CAAC,EAAEd,QAAQ,CAAC;IAE3D,OAAO,MAAM4B,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC,EAAE,CAAC1B,QAAQ,EAAEF,IAAI,EAAEI,aAAa,CAAC,CAAC;EAEnC,IAAI,CAACW,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACE1B,KAAA,CAAA0C,aAAA,CAACpC,cAAc,EAAAqC,QAAA,KACTrB,IAAI;IACFsB,KAAK,EAAEjC,IAAI,GAAGwB,SAAS,GAAG,EAAE;IAClCzB,GAAG,EAAEA,GAAI;IACTmC,KAAK,EAAEhB,QAAS;IAChBiB,SAAS,EAAEjC,QAAS;IACpB,aAAWgB,QAAS;IACpBT,SAAS,EAAEf,UAAU,CAAC,YAAY,EAAEe,SAAS;EAAE,iBAE/CpB,KAAA,CAAA0C,aAAA,CAACnC,qBAAqB;IAACwC,KAAK,EAAE5B,IAAK;IAACC,SAAS,EAAC;EAAqB,GAChEC,QACoB,CACT,CAAC;AAErB,CACF,CAAC;AAEDb,QAAQ,CAACwC,WAAW,GAAG,UAAU","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+export declare const StyledCollapse: import("styled-components").StyledComponent<"div", any, {
+    $open: boolean;
+    $duration: number;
+}, never>;
+export declare const StyledCollapseContent: import("styled-components").StyledComponent<"div", any, {
+    $clip: "both" | "vertical";
+}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Collapse/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;WAAuB,OAAO;eAAa,MAAM;SAS3E,CAAC;AAEF,eAAO,MAAM,qBAAqB;WAAuB,MAAM,GAAG,UAAU;SAI3E,CAAC"}

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+export const StyledCollapse = styled.div.withConfig({
+  displayName: "Styles__StyledCollapse",
+  componentId: "sc-1ov56au-0"
+})(["display:grid;grid-template-rows:", ";transition:grid-template-rows ", "ms cubic-bezier(0,0,0.2,1);@media (prefers-reduced-motion:reduce){transition:none;}"], _ref => {
+  let $open = _ref.$open;
+  return $open ? "1fr" : "0fr";
+}, _ref2 => {
+  let $duration = _ref2.$duration;
+  return $duration;
+});
+export const StyledCollapseContent = styled.div.withConfig({
+  displayName: "Styles__StyledCollapseContent",
+  componentId: "sc-1ov56au-1"
+})(["min-height:0;", ""], _ref3 => {
+  let $clip = _ref3.$clip;
+  return $clip === "vertical" ? "clip-path: inset(0 -100vw);" : "overflow: hidden;";
+});
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","StyledCollapse","div","withConfig","displayName","componentId","_ref","$open","_ref2","$duration","StyledCollapseContent","_ref3","$clip"],"sources":["../../../../src/components/Collapse/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledCollapse = styled.div<{ $open: boolean; $duration: number }>`\n  display: grid;\n  grid-template-rows: ${({ $open }) => ($open ? \"1fr\" : \"0fr\")};\n  transition: grid-template-rows ${({ $duration }) => $duration}ms\n    cubic-bezier(0, 0, 0.2, 1);\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nexport const StyledCollapseContent = styled.div<{ $clip: \"both\" | \"vertical\" }>`\n  min-height: 0;\n  ${({ $clip }) =>\n    $clip === \"vertical\" ? \"clip-path: inset(0 -100vw);\" : \"overflow: hidden;\"}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mKAEhBC,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAQA,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,EAC3BC,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OAAOA,SAAS;AAAA,EAM9D;AAED,OAAO,MAAMC,qBAAqB,GAAGV,MAAM,CAACE,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0BAE3CM,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OACRA,KAAK,KAAK,UAAU,GAAG,6BAA6B,GAAG,mBAAmB;AAAA,EAC7E","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, ButtonHTMLAttributes } from "react";
+import React, { FC, MouseEvent, ButtonHTMLAttributes, SVGAttributes } from "react";
 export interface ICompleteCheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Change completed state of checkbox */
     completed?: boolean;
@@ -16,4 +16,12 @@ export interface ICompleteCheckboxProps extends ButtonHTMLAttributes<HTMLButtonE
     checkMarkClassName?: string;
 }
 export declare const CompleteCheckbox: FC<ICompleteCheckboxProps>;
+export interface ICompleteCheckboxRingProps extends SVGAttributes<SVGSVGElement> {
+    /** Closes the ring into a full circle and fades it out, when the wait ends. */
+    closing?: boolean;
+    /** The width and the height in pixels. */
+    size?: number;
+}
+/** Stands in the place of a checkbox while its object waits for the server. */
+export declare const CompleteCheckboxRing: ({ closing, size, className, ...rest }: ICompleteCheckboxRingProps) => React.JSX.Element;
 //# sourceMappingURL=CompleteCheckbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMpE,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC"}
+{"version":3,"file":"CompleteCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,EAAE,EACF,UAAU,EACV,oBAAoB,EACpB,aAAa,EACd,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,sBAAsB,CA2BvD,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,aAAa,CAAC,aAAa,CAAC;IACpC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,+EAA+E;AAC/E,eAAO,MAAM,oBAAoB,GAAI,uCAKlC,0BAA0B,sBAW5B,CAAC"}

package/dist/esm/components/CompleteCheckbox/CompleteCheckbox.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"];
+const _excluded = ["completed", "disabled", "animate", "onClick", "className", "primary", "checkMarkClassName"],
+  _excluded2 = ["closing", "size", "className"];
 import React from "react";
 import classnames from "classnames";
-import { StyledCompleteCheckbox } from "./Styles";
+import { StyledCompleteCheckbox, StyledCompleteCheckboxRing } from "./Styles";
 export const CompleteCheckbox = _ref => {
   let _ref$completed = _ref.completed,
     completed = _ref$completed === void 0 ? false : _ref$completed,
@@ -35,4 +36,25 @@ export const CompleteCheckbox = _ref => {
   })));
 };
 CompleteCheckbox.displayName = "CompleteCheckbox";
+/** Stands in the place of a checkbox while its object waits for the server. */
+export const CompleteCheckboxRing = _ref2 => {
+  let _ref2$closing = _ref2.closing,
+    closing = _ref2$closing === void 0 ? false : _ref2$closing,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 20 : _ref2$size,
+    className = _ref2.className,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(StyledCompleteCheckboxRing, _extends({
+    viewBox: "0 0 20 20",
+    "aria-hidden": "true"
+  }, rest, {
+    $closing: closing,
+    $size: size,
+    className: classnames("c-complete-checkbox-ring", className)
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "9"
+  }));
+};
 //# sourceMappingURL=CompleteCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompleteCheckbox.js","names":["React","classnames","StyledCompleteCheckbox","CompleteCheckbox","_ref","_ref$completed","completed","_ref$disabled","disabled","_ref$animate","animate","onClick","className","_ref$primary","primary","checkMarkClassName","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$primary","$completed","$disabled","$animation","$checkMarkClassName","viewBox","d","points","displayName"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, { FC, MouseEvent, ButtonHTMLAttributes } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n  ...rest\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n      $checkMarkClassName={!!checkMarkClassName}\n      {...rest}\n    >\n      <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,sBAAsB,QAAQ,UAAU;AAoBjD,OAAO,MAAMC,gBAA4C,GAAGC,IAAA,IAStD;EAAA,IAAAC,cAAA,GAAAD,IAAA,CARJE,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,aAAA,GAAAH,IAAA,CACjBI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAL,IAAA,CAChBM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACPC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IAAAC,YAAA,GAAAT,IAAA,CACTU,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,kBAAkB,GAAAX,IAAA,CAAlBW,kBAAkB;IACfC,IAAI,GAAAC,6BAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,oBACElB,KAAA,CAAAmB,aAAA,CAACjB,sBAAsB,EAAAkB,QAAA;IACrBT,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEX,UAAU,CAAC,qBAAqB,EAAEW,SAAS,CAAE;IACxDS,QAAQ,EAAEP,OAAQ;IAClBQ,UAAU,EAAEhB,SAAU;IACtBiB,SAAS,EAAEf,QAAS;IACpBgB,UAAU,EAAE,CAAChB,QAAQ,IAAIF,SAAS,IAAII,OAAQ;IAC9Ce,mBAAmB,EAAE,CAAC,CAACV;EAAmB,GACtCC,IAAI,gBAERhB,KAAA,CAAAmB,aAAA;IAAKO,OAAO,EAAC,WAAW;IAACd,SAAS,EAAEG;EAAmB,gBACrDf,KAAA,CAAAmB,aAAA;IAAMQ,CAAC,EAAC;EAA+F,CAAE,CAAC,eAC1G3B,KAAA,CAAAmB,aAAA;IAAUS,MAAM,EAAC;EAAyB,CAAE,CACzC,CACiB,CAAC;AAE7B,CAAC;AAEDzB,gBAAgB,CAAC0B,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"file":"CompleteCheckbox.js","names":["React","classnames","StyledCompleteCheckbox","StyledCompleteCheckboxRing","CompleteCheckbox","_ref","_ref$completed","completed","_ref$disabled","disabled","_ref$animate","animate","onClick","className","_ref$primary","primary","checkMarkClassName","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$primary","$completed","$disabled","$animation","$checkMarkClassName","viewBox","d","points","displayName","CompleteCheckboxRing","_ref2","_ref2$closing","closing","_ref2$size","size","_excluded2","$closing","$size","cx","cy","r"],"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"sourcesContent":["import React, {\n  FC,\n  MouseEvent,\n  ButtonHTMLAttributes,\n  SVGAttributes,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledCompleteCheckbox, StyledCompleteCheckboxRing } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n  ...rest\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n      $checkMarkClassName={!!checkMarkClassName}\n      {...rest}\n    >\n      <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n\nexport interface ICompleteCheckboxRingProps\n  extends SVGAttributes<SVGSVGElement> {\n  /** Closes the ring into a full circle and fades it out, when the wait ends. */\n  closing?: boolean;\n  /** The width and the height in pixels. */\n  size?: number;\n}\n\n/** Stands in the place of a checkbox while its object waits for the server. */\nexport const CompleteCheckboxRing = ({\n  closing = false,\n  size = 20,\n  className,\n  ...rest\n}: ICompleteCheckboxRingProps) => (\n  <StyledCompleteCheckboxRing\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n    {...rest}\n    $closing={closing}\n    $size={size}\n    className={classnames(\"c-complete-checkbox-ring\", className)}\n  >\n    <circle cx=\"10\" cy=\"10\" r=\"9\" />\n  </StyledCompleteCheckboxRing>\n);\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAKL,OAAO;AAEd,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,UAAU;AAoB7E,OAAO,MAAMC,gBAA4C,GAAGC,IAAA,IAStD;EAAA,IAAAC,cAAA,GAAAD,IAAA,CARJE,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,aAAA,GAAAH,IAAA,CACjBI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAL,IAAA,CAChBM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACPC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IAAAC,YAAA,GAAAT,IAAA,CACTU,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,kBAAkB,GAAAX,IAAA,CAAlBW,kBAAkB;IACfC,IAAI,GAAAC,6BAAA,CAAAb,IAAA,EAAAc,SAAA;EAEP,oBACEnB,KAAA,CAAAoB,aAAA,CAAClB,sBAAsB,EAAAmB,QAAA;IACrBT,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEZ,UAAU,CAAC,qBAAqB,EAAEY,SAAS,CAAE;IACxDS,QAAQ,EAAEP,OAAQ;IAClBQ,UAAU,EAAEhB,SAAU;IACtBiB,SAAS,EAAEf,QAAS;IACpBgB,UAAU,EAAE,CAAChB,QAAQ,IAAIF,SAAS,IAAII,OAAQ;IAC9Ce,mBAAmB,EAAE,CAAC,CAACV;EAAmB,GACtCC,IAAI,gBAERjB,KAAA,CAAAoB,aAAA;IAAKO,OAAO,EAAC,WAAW;IAACd,SAAS,EAAEG;EAAmB,gBACrDhB,KAAA,CAAAoB,aAAA;IAAMQ,CAAC,EAAC;EAA+F,CAAE,CAAC,eAC1G5B,KAAA,CAAAoB,aAAA;IAAUS,MAAM,EAAC;EAAyB,CAAE,CACzC,CACiB,CAAC;AAE7B,CAAC;AAEDzB,gBAAgB,CAAC0B,WAAW,GAAG,kBAAkB;AAUjD;AACA,OAAO,MAAMC,oBAAoB,GAAGC,KAAA;EAAA,IAAAC,aAAA,GAAAD,KAAA,CAClCE,OAAO;IAAPA,OAAO,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,UAAA,GAAAH,KAAA,CACfI,IAAI;IAAJA,IAAI,GAAAD,UAAA,cAAG,EAAE,GAAAA,UAAA;IACTtB,SAAS,GAAAmB,KAAA,CAATnB,SAAS;IACNI,IAAI,GAAAC,6BAAA,CAAAc,KAAA,EAAAK,UAAA;EAAA,oBAEPrC,KAAA,CAAAoB,aAAA,CAACjB,0BAA0B,EAAAkB,QAAA;IACzBM,OAAO,EAAC,WAAW;IACnB,eAAY;EAAM,GACdV,IAAI;IACRqB,QAAQ,EAAEJ,OAAQ;IAClBK,KAAK,EAAEH,IAAK;IACZvB,SAAS,EAAEZ,UAAU,CAAC,0BAA0B,EAAEY,SAAS;EAAE,iBAE7Db,KAAA,CAAAoB,aAAA;IAAQoB,EAAE,EAAC,IAAI;IAACC,EAAE,EAAC,IAAI;IAACC,CAAC,EAAC;EAAG,CAAE,CACL,CAAC;AAAA,CAC9B","ignoreList":[]}

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

@@ -6,5 +6,9 @@ interface StyledCompleteCheckboxProps {
     $checkMarkClassName?: boolean;
 }
 export declare const StyledCompleteCheckbox: import("styled-components").StyledComponent<"button", any, StyledCompleteCheckboxProps, never>;
+export declare const StyledCompleteCheckboxRing: import("styled-components").StyledComponent<"svg", any, {
+    $closing: boolean;
+    $size: number;
+}, never>;
 export {};
 //# sourceMappingURL=Styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAoBD,eAAO,MAAM,sBAAsB,gGAgIlC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":[],"mappings":"AAGA,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAoBD,eAAO,MAAM,sBAAsB,gGAgIlC,CAAC;AAsBF,eAAO,MAAM,0BAA0B;cAC3B,OAAO;WACV,MAAM;SA4Bd,CAAC"}

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

@@ -25,4 +25,20 @@ export const StyledCompleteCheckbox = styled.button.withConfig({
   "width": "3rem"
 }));
 StyledCompleteCheckbox.displayName = "StyledCompleteCheckbox";
+const ringSpin = keyframes(["to{transform:rotate(360deg);}"]);
+const ringClose = keyframes(["to{stroke-dasharray:57 0;}"]);
+const ringOut = keyframes(["to{opacity:0;}"]);
+export const StyledCompleteCheckboxRing = styled.svg.withConfig({
+  displayName: "Styles__StyledCompleteCheckboxRing",
+  componentId: "sc-1801dzg-1"
+})(["width:", "px;height:", "px;animation:", " 800ms linear infinite;circle{fill:none;stroke:var(--color-primary);stroke-width:2;stroke-linecap:round;stroke-dasharray:14 43;}", " @media (prefers-reduced-motion:reduce){animation:none;}"], _ref => {
+  let $size = _ref.$size;
+  return $size;
+}, _ref2 => {
+  let $size = _ref2.$size;
+  return $size;
+}, ringSpin, _ref3 => {
+  let $closing = _ref3.$closing;
+  return $closing && css(["animation:", " 800ms linear infinite,", " 100ms 450ms forwards;circle{animation:", " 450ms ease-out forwards;}"], ringSpin, ringOut, ringClose);
+});
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","keyframes","burstScale","burstAnimation","StyledCompleteCheckbox","button","withConfig","displayName","componentId","props","$primary","$completed","$disabled","$animation","$checkMarkClassName"],"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n  $checkMarkClassName?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.button<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n  background-color: transparent;\n  padding: 0;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover,\n      &:focus-visible {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        outline: none;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n\n  ${(props) =>\n    !props.$checkMarkClassName &&\n    css`\n      svg {\n        ${tw`tw-w-12 tw-h-12`}\n      }\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAW1D,MAAMC,UAAU,GAAGD,SAAS,sDAO3B;AAED,MAAME,cAAc,GAAGF,SAAS,wDAO/B;AAED,OAAO,MAAMG,sBAAsB,GAAGL,MAAM,CAACM,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4aAC7C;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAsF,CAAC,EAOrF;EAAA;EAAA;AAAmC,CAAC,EAavCC,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdV,GAAG,4CAIF,EAWES,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdV,GAAG,oCAEF,EAGFS,KAAK,IACNA,KAAK,CAACE,UAAU,IAChBX,GAAG,+RAKC,CAACS,KAAK,CAACC,QAAQ,IACjBV,GAAG,qEACG;EAAA;EAAA;AAA0B,CAAC,CAGhC,EAIGS,KAAK,CAACC,QAAQ,IAChBV,GAAG,uDAEF,EAMCS,KAAK,CAACC,QAAQ,IAChBV,GAAG,oCAEF,CAQJ,EAEAS,KAAK,IACN,CAACA,KAAK,CAACE,UAAU,IACjB,CAACF,KAAK,CAACG,SAAS,IAChBZ,GAAG,2LAOG,CAACS,KAAK,CAACC,QAAQ,IACjBV,GAAG,kEAGF,CAKJ,EAEAS,KAAK,IACNA,KAAK,CAACI,UAAU,IAChBb,GAAG,mFAGcE,UAAU,EACnBC,cAAc,CAErB,EAEAM,KAAK,IACNA,KAAK,CAACG,SAAS,IACfZ,GAAG,wBACG;EAAA;AAAkB,CAAC,CAExB,EAEAS,KAAK,IACN,CAACA,KAAK,CAACK,mBAAmB,IAC1Bd,GAAG,gBAEK;EAAA;EAAA;AAAgB,CAAC,CAExB,CACJ;AAEDI,sBAAsB,CAACG,WAAW,GAAG,wBAAwB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","keyframes","burstScale","burstAnimation","StyledCompleteCheckbox","button","withConfig","displayName","componentId","props","$primary","$completed","$disabled","$animation","$checkMarkClassName","ringSpin","ringClose","ringOut","StyledCompleteCheckboxRing","svg","_ref","$size","_ref2","_ref3","$closing"],"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n  $checkMarkClassName?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.button<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n  background-color: transparent;\n  padding: 0;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover,\n      &:focus-visible {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        outline: none;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n\n  ${(props) =>\n    !props.$checkMarkClassName &&\n    css`\n      svg {\n        ${tw`tw-w-12 tw-h-12`}\n      }\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n\nconst ringSpin = keyframes`\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nconst ringClose = keyframes`\n  to {\n    stroke-dasharray: 57 0;\n  }\n`;\n\nconst ringOut = keyframes`\n  to {\n    opacity: 0;\n  }\n`;\n\nexport const StyledCompleteCheckboxRing = styled.svg<{\n  $closing: boolean;\n  $size: number;\n}>`\n  width: ${({ $size }) => $size}px;\n  height: ${({ $size }) => $size}px;\n  animation: ${ringSpin} 800ms linear infinite;\n\n  circle {\n    fill: none;\n    stroke: var(--color-primary);\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-dasharray: 14 43;\n  }\n\n  ${({ $closing }) =>\n    $closing &&\n    css`\n      animation: ${ringSpin} 800ms linear infinite,\n        ${ringOut} 100ms 450ms forwards;\n\n      circle {\n        animation: ${ringClose} 450ms ease-out forwards;\n      }\n    `}\n\n  @media (prefers-reduced-motion: reduce) {\n    animation: none;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAW1D,MAAMC,UAAU,GAAGD,SAAS,sDAO3B;AAED,MAAME,cAAc,GAAGF,SAAS,wDAO/B;AAED,OAAO,MAAMG,sBAAsB,GAAGL,MAAM,CAACM,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4aAC7C;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAsF,CAAC,EAOrF;EAAA;EAAA;AAAmC,CAAC,EAavCC,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdV,GAAG,4CAIF,EAWES,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdV,GAAG,oCAEF,EAGFS,KAAK,IACNA,KAAK,CAACE,UAAU,IAChBX,GAAG,+RAKC,CAACS,KAAK,CAACC,QAAQ,IACjBV,GAAG,qEACG;EAAA;EAAA;AAA0B,CAAC,CAGhC,EAIGS,KAAK,CAACC,QAAQ,IAChBV,GAAG,uDAEF,EAMCS,KAAK,CAACC,QAAQ,IAChBV,GAAG,oCAEF,CAQJ,EAEAS,KAAK,IACN,CAACA,KAAK,CAACE,UAAU,IACjB,CAACF,KAAK,CAACG,SAAS,IAChBZ,GAAG,2LAOG,CAACS,KAAK,CAACC,QAAQ,IACjBV,GAAG,kEAGF,CAKJ,EAEAS,KAAK,IACNA,KAAK,CAACI,UAAU,IAChBb,GAAG,mFAGcE,UAAU,EACnBC,cAAc,CAErB,EAEAM,KAAK,IACNA,KAAK,CAACG,SAAS,IACfZ,GAAG,wBACG;EAAA;AAAkB,CAAC,CAExB,EAEAS,KAAK,IACN,CAACA,KAAK,CAACK,mBAAmB,IAC1Bd,GAAG,gBAEK;EAAA;EAAA;AAAgB,CAAC,CAExB,CACJ;AAEDI,sBAAsB,CAACG,WAAW,GAAG,wBAAwB;AAE7D,MAAMQ,QAAQ,GAAGd,SAAS,mCAIzB;AAED,MAAMe,SAAS,GAAGf,SAAS,gCAI1B;AAED,MAAMgB,OAAO,GAAGhB,SAAS,oBAIxB;AAED,OAAO,MAAMiB,0BAA0B,GAAGnB,MAAM,CAACoB,GAAG,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8OAIzCY,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OAAOA,KAAK;AAAA,GACnBC,KAAA;EAAA,IAAGD,KAAK,GAAAC,KAAA,CAALD,KAAK;EAAA,OAAOA,KAAK;AAAA,GACjBN,QAAQ,EAUnBQ,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,IACRxB,GAAG,qHACYe,QAAQ,EACjBE,OAAO,EAGID,SAAS,CAEzB;AAAA,EAKJ","ignoreList":[]}

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

@@ -0,0 +1,26 @@
+import React, { HTMLAttributes, Ref } from "react";
+export interface IDockedCardProps extends HTMLAttributes<HTMLElement> {
+    /** Set to false where the same card stands in the flow, for example in a side panel. It then has no look of its own. */
+    docked?: boolean;
+    /** An open card shows its content. A closed card is one click target with a hover look. */
+    open?: boolean;
+    /** Puts the card above its dim and above the sticky parts of the page. */
+    lifted?: boolean;
+    /** Moves the card to its new offset with a transition. */
+    moving?: boolean;
+    /** How far the bottom edge of the card stands under the edge it sticks to, in pixels. */
+    offset?: number;
+}
+/** A card in the flow of the page that sticks to the bottom edge of its scroll container. */
+export declare const DockedCard: React.ForwardRefExoticComponent<IDockedCardProps & React.RefAttributes<HTMLElement>>;
+export interface IDockedCardDimProps extends HTMLAttributes<HTMLDivElement> {
+    /** The ref of the dark layer. */
+    layerRef?: Ref<HTMLDivElement>;
+    /** Extra attributes for the dark layer. */
+    layerProps?: HTMLAttributes<HTMLDivElement> & {
+        "data-testid"?: string;
+    };
+}
+/** The dark layer behind an open docked card. It goes after the card, in the same column. */
+export declare const DockedCardDim: ({ layerRef, layerProps, onClick, className, ...rest }: IDockedCardDimProps) => React.JSX.Element;
+//# sourceMappingURL=DockedCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DockedCard.d.ts","sourceRoot":"","sources":["../../../../src/components/DockedCard/DockedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,EAAc,MAAM,OAAO,CAAC;AAU/D,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACnE,wHAAwH;IACxH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,6FAA6F;AAC7F,eAAO,MAAM,UAAU,sFA6BtB,CAAC;AAIF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1E;AAED,6FAA6F;AAC7F,eAAO,MAAM,aAAa,GAAI,uDAM3B,mBAAmB,sBAYrB,CAAC"}

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

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["docked", "open", "lifted", "moving", "offset", "className", "style", "children"],
+  _excluded2 = ["layerRef", "layerProps", "onClick", "className"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { StyledDockedCard, StyledDockedCardDim, StyledDockedCardDimLayer } from "./Styles";
+/** A card in the flow of the page that sticks to the bottom edge of its scroll container. */
+export const DockedCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let _ref$docked = _ref.docked,
+    docked = _ref$docked === void 0 ? true : _ref$docked,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    _ref$lifted = _ref.lifted,
+    lifted = _ref$lifted === void 0 ? false : _ref$lifted,
+    _ref$moving = _ref.moving,
+    moving = _ref$moving === void 0 ? false : _ref$moving,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 0 : _ref$offset,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledDockedCard, _extends({}, rest, {
+    ref: ref,
+    $docked: docked,
+    $open: open,
+    $lifted: lifted,
+    $moving: moving,
+    "data-open": open,
+    style: docked ? _extends({
+      bottom: -offset
+    }, style) : style,
+    className: classnames("c-docked-card", className)
+  }), children);
+});
+DockedCard.displayName = "DockedCard";
+/** The dark layer behind an open docked card. It goes after the card, in the same column. */
+export const DockedCardDim = _ref2 => {
+  let layerRef = _ref2.layerRef,
+    layerProps = _ref2.layerProps,
+    onClick = _ref2.onClick,
+    className = _ref2.className,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(StyledDockedCardDim, _extends({
+    "aria-hidden": "true"
+  }, rest, {
+    className: classnames("c-docked-card-dim", className)
+  }), /*#__PURE__*/React.createElement(StyledDockedCardDimLayer, _extends({}, layerProps, {
+    ref: layerRef,
+    onClick: onClick
+  })));
+};
+//# sourceMappingURL=DockedCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DockedCard.js","names":["React","forwardRef","classnames","StyledDockedCard","StyledDockedCardDim","StyledDockedCardDimLayer","DockedCard","_ref","ref","_ref$docked","docked","_ref$open","open","_ref$lifted","lifted","_ref$moving","moving","_ref$offset","offset","className","style","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$docked","$open","$lifted","$moving","bottom","displayName","DockedCardDim","_ref2","layerRef","layerProps","onClick","_excluded2"],"sources":["../../../../src/components/DockedCard/DockedCard.tsx"],"sourcesContent":["import React, { HTMLAttributes, Ref, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledDockedCard,\n  StyledDockedCardDim,\n  StyledDockedCardDimLayer,\n} from \"./Styles\";\n\nexport interface IDockedCardProps extends HTMLAttributes<HTMLElement> {\n  /** Set to false where the same card stands in the flow, for example in a side panel. It then has no look of its own. */\n  docked?: boolean;\n  /** An open card shows its content. A closed card is one click target with a hover look. */\n  open?: boolean;\n  /** Puts the card above its dim and above the sticky parts of the page. */\n  lifted?: boolean;\n  /** Moves the card to its new offset with a transition. */\n  moving?: boolean;\n  /** How far the bottom edge of the card stands under the edge it sticks to, in pixels. */\n  offset?: number;\n}\n\n/** A card in the flow of the page that sticks to the bottom edge of its scroll container. */\nexport const DockedCard = forwardRef<HTMLElement, IDockedCardProps>(\n  (\n    {\n      docked = true,\n      open = false,\n      lifted = false,\n      moving = false,\n      offset = 0,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <StyledDockedCard\n      {...rest}\n      ref={ref}\n      $docked={docked}\n      $open={open}\n      $lifted={lifted}\n      $moving={moving}\n      data-open={open}\n      style={docked ? { bottom: -offset, ...style } : style}\n      className={classnames(\"c-docked-card\", className)}\n    >\n      {children}\n    </StyledDockedCard>\n  )\n);\n\nDockedCard.displayName = \"DockedCard\";\n\nexport interface IDockedCardDimProps extends HTMLAttributes<HTMLDivElement> {\n  /** The ref of the dark layer. */\n  layerRef?: Ref<HTMLDivElement>;\n  /** Extra attributes for the dark layer. */\n  layerProps?: HTMLAttributes<HTMLDivElement> & { \"data-testid\"?: string };\n}\n\n/** The dark layer behind an open docked card. It goes after the card, in the same column. */\nexport const DockedCardDim = ({\n  layerRef,\n  layerProps,\n  onClick,\n  className,\n  ...rest\n}: IDockedCardDimProps) => (\n  <StyledDockedCardDim\n    aria-hidden=\"true\"\n    {...rest}\n    className={classnames(\"c-docked-card-dim\", className)}\n  >\n    <StyledDockedCardDimLayer\n      {...layerProps}\n      ref={layerRef}\n      onClick={onClick}\n    />\n  </StyledDockedCardDim>\n);\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAyBC,UAAU,QAAQ,OAAO;AAE9D,OAAOC,UAAU,MAAM,YAAY;AAEnC,SACEC,gBAAgB,EAChBC,mBAAmB,EACnBC,wBAAwB,QACnB,UAAU;AAejB;AACA,OAAO,MAAMC,UAAU,gBAAGL,UAAU,CAClC,CAAAM,IAAA,EAYEC,GAAG;EAAA,IAAAC,WAAA,GAAAF,IAAA,CAVDG,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IAAAE,SAAA,GAAAJ,IAAA,CACbK,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,KAAK,GAAAA,SAAA;IAAAE,WAAA,GAAAN,IAAA,CACZO,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,WAAA,GAAAR,IAAA,CACdS,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,WAAA,GAAAV,IAAA,CACdW,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IACVE,SAAS,GAAAZ,IAAA,CAATY,SAAS;IACTC,KAAK,GAAAb,IAAA,CAALa,KAAK;IACLC,QAAQ,GAAAd,IAAA,CAARc,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAAA,oBAITxB,KAAA,CAAAyB,aAAA,CAACtB,gBAAgB,EAAAuB,QAAA,KACXJ,IAAI;IACRd,GAAG,EAAEA,GAAI;IACTmB,OAAO,EAAEjB,MAAO;IAChBkB,KAAK,EAAEhB,IAAK;IACZiB,OAAO,EAAEf,MAAO;IAChBgB,OAAO,EAAEd,MAAO;IAChB,aAAWJ,IAAK;IAChBQ,KAAK,EAAEV,MAAM,GAAAgB,QAAA;MAAKK,MAAM,EAAE,CAACb;IAAM,GAAKE,KAAK,IAAKA,KAAM;IACtDD,SAAS,EAAEjB,UAAU,CAAC,eAAe,EAAEiB,SAAS;EAAE,IAEjDE,QACe,CAAC;AAAA,CAEvB,CAAC;AAEDf,UAAU,CAAC0B,WAAW,GAAG,YAAY;AASrC;AACA,OAAO,MAAMC,aAAa,GAAGC,KAAA;EAAA,IAC3BC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;IACRC,UAAU,GAAAF,KAAA,CAAVE,UAAU;IACVC,OAAO,GAAAH,KAAA,CAAPG,OAAO;IACPlB,SAAS,GAAAe,KAAA,CAATf,SAAS;IACNG,IAAI,GAAAC,6BAAA,CAAAW,KAAA,EAAAI,UAAA;EAAA,oBAEPtC,KAAA,CAAAyB,aAAA,CAACrB,mBAAmB,EAAAsB,QAAA;IAClB,eAAY;EAAM,GACdJ,IAAI;IACRH,SAAS,EAAEjB,UAAU,CAAC,mBAAmB,EAAEiB,SAAS;EAAE,iBAEtDnB,KAAA,CAAAyB,aAAA,CAACpB,wBAAwB,EAAAqB,QAAA,KACnBU,UAAU;IACd5B,GAAG,EAAE2B,QAAS;IACdE,OAAO,EAAEA;EAAQ,EAClB,CACkB,CAAC;AAAA,CACvB","ignoreList":[]}

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

@@ -0,0 +1,9 @@
+export declare const StyledDockedCard: import("styled-components").StyledComponent<"section", any, {
+    $docked: boolean;
+    $open: boolean;
+    $lifted: boolean;
+    $moving: boolean;
+}, never>;
+export declare const StyledDockedCardDim: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDockedCardDimLayer: import("styled-components").StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DockedCard/Styles.ts"],"names":[],"mappings":"AAyDA,eAAO,MAAM,gBAAgB;aAClB,OAAO;WACT,OAAO;aACL,OAAO;aACP,OAAO;SAGjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAS/B,CAAC;AAEF,eAAO,MAAM,wBAAwB,oEAOpC,CAAC"}

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

@@ -0,0 +1,29 @@
+import styled, { css } from "styled-components";
+const HOVER_SHADOW = "0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.058), transparent), 0 6px 16px 0 light-dark(rgba(0, 0, 0, 0.048), transparent), 0 4px 14px 0 light-dark(transparent, rgba(0, 0, 0, 0.288))";
+const docked = css(["--comments-surface:var(--surface-raised);position:sticky;z-index:", ";display:flex;flex-direction:column;min-width:0;border:1px solid var(--border-raised);border-bottom:0;border-radius:24px 24px 0 0;background-color:var(--comments-surface);box-shadow:var(--shadow-float);", " ", " @media print{position:static;}"], _ref => {
+  let $lifted = _ref.$lifted;
+  return $lifted ? 8 : 5;
+}, _ref2 => {
+  let $moving = _ref2.$moving;
+  return $moving && css(["transition:bottom 200ms cubic-bezier(0,0,0.2,1);will-change:transform;@media (prefers-reduced-motion:reduce){transition:none;}"]);
+}, _ref3 => {
+  let $open = _ref3.$open,
+    $moving = _ref3.$moving;
+  return !$open && css(["cursor:pointer;", " & *{cursor:pointer;}&:hover{border-color:color-mix(in srgb,var(--border-primary),black 40%);}@supports (color:light-dark(red,red)){&:hover{box-shadow:", ";}}"], !$moving && "transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);", HOVER_SHADOW);
+});
+export const StyledDockedCard = styled.section.withConfig({
+  displayName: "Styles__StyledDockedCard",
+  componentId: "sc-1qu0xie-0"
+})(["", ""], _ref4 => {
+  let $docked = _ref4.$docked;
+  return $docked && docked;
+});
+export const StyledDockedCardDim = styled.div.withConfig({
+  displayName: "Styles__StyledDockedCardDim",
+  componentId: "sc-1qu0xie-1"
+})(["position:sticky;bottom:0;z-index:7;height:0;@media print{display:none;}"]);
+export const StyledDockedCardDimLayer = styled.div.withConfig({
+  displayName: "Styles__StyledDockedCardDimLayer",
+  componentId: "sc-1qu0xie-2"
+})(["position:absolute;right:-100vw;bottom:0;left:-100vw;height:100vh;background-color:rgba(0,0,0,0.5);"]);
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","HOVER_SHADOW","docked","_ref","$lifted","_ref2","$moving","_ref3","$open","StyledDockedCard","section","withConfig","displayName","componentId","_ref4","$docked","StyledDockedCardDim","div","StyledDockedCardDimLayer"],"sources":["../../../../src/components/DockedCard/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nconst HOVER_SHADOW =\n  \"0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.058), transparent), 0 6px 16px 0 light-dark(rgba(0, 0, 0, 0.048), transparent), 0 4px 14px 0 light-dark(transparent, rgba(0, 0, 0, 0.288))\";\n\nconst docked = css<{ $open: boolean; $lifted: boolean; $moving: boolean }>`\n  --comments-surface: var(--surface-raised);\n\n  position: sticky;\n  z-index: ${({ $lifted }) => ($lifted ? 8 : 5)};\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--border-raised);\n  border-bottom: 0;\n  border-radius: 24px 24px 0 0;\n  background-color: var(--comments-surface);\n  box-shadow: var(--shadow-float);\n\n  ${({ $moving }) =>\n    $moving &&\n    css`\n      transition: bottom 200ms cubic-bezier(0, 0, 0.2, 1);\n      will-change: transform;\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `}\n\n  ${({ $open, $moving }) =>\n    !$open &&\n    css`\n      cursor: pointer;\n      ${!$moving &&\n      \"transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);\"}\n\n      & * {\n        cursor: pointer;\n      }\n\n      &:hover {\n        border-color: color-mix(in srgb, var(--border-primary), black 40%);\n      }\n\n      @supports (color: light-dark(red, red)) {\n        &:hover {\n          box-shadow: ${HOVER_SHADOW};\n        }\n      }\n    `}\n\n  @media print {\n    position: static;\n  }\n`;\n\nexport const StyledDockedCard = styled.section<{\n  $docked: boolean;\n  $open: boolean;\n  $lifted: boolean;\n  $moving: boolean;\n}>`\n  ${({ $docked }) => $docked && docked}\n`;\n\nexport const StyledDockedCardDim = styled.div`\n  position: sticky;\n  bottom: 0;\n  z-index: 7;\n  height: 0;\n\n  @media print {\n    display: none;\n  }\n`;\n\nexport const StyledDockedCardDimLayer = styled.div`\n  position: absolute;\n  right: -100vw;\n  bottom: 0;\n  left: -100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,MAAMC,YAAY,GAChB,mLAAmL;AAErL,MAAMC,MAAM,GAAGF,GAAG,8TAILG,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OAAQA,OAAO,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC,EAU3CC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OACVA,OAAO,IACPN,GAAG,oIAOF;AAAA,GAEDO,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAEF,OAAO,GAAAC,KAAA,CAAPD,OAAO;EAAA,OACjB,CAACE,KAAK,IACNR,GAAG,wLAEC,CAACM,OAAO,IACV,6GAA6G,EAY3FL,YAAY,CAG/B;AAAA,EAKJ;AAED,OAAO,MAAMQ,gBAAgB,GAAGV,MAAM,CAACW,OAAO,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAM1CC,KAAA;EAAA,IAAGC,OAAO,GAAAD,KAAA,CAAPC,OAAO;EAAA,OAAOA,OAAO,IAAIb,MAAM;AAAA,EACrC;AAED,OAAO,MAAMc,mBAAmB,GAAGjB,MAAM,CAACkB,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+EAS5C;AAED,OAAO,MAAMK,wBAAwB,GAAGnB,MAAM,CAACkB,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0GAOjD","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from "./DockedCard";
+export * from "./useDockedCard";
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/DockedCard/useDockedCard.d.ts

@@ -0,0 +1,37 @@
+import { RefObject } from "react";
+/** The closest ancestor that scrolls. The full page scrolls the document. */
+export declare const getScrollParent: (node?: Element | null) => HTMLElement;
+export interface UseDockedCardOptions {
+    cardRef: RefObject<HTMLElement>;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Set to false where the card is not docked. It then never opens and has no top limit. */
+    enabled?: boolean;
+    /** The time of the move, in milliseconds. */
+    duration?: number;
+    /** The height of the closed card that stays above the edge, in pixels. */
+    peek?: number;
+    /** The element whose bottom edge the open card must not pass. */
+    getTopLimit?: () => Element | null | undefined;
+    /** Called on Escape while the card is open. Without it Escape closes the card. */
+    onEscape?: () => void;
+    /** True while something in the card, such as an open menu, must take Escape itself. */
+    isBusy?: (card: HTMLElement) => boolean;
+}
+/** The moves of a docked card: its offset, its open state, the dim, the Escape key and the frozen scroll. */
+export declare const useDockedCard: ({ cardRef, open, onOpenChange, enabled, duration, peek, getTopLimit, onEscape, isBusy, }: UseDockedCardOptions) => {
+    setOpen: (next: boolean) => void;
+    moving: boolean;
+    /** The card and its dim cover the page while the card is open or on its way. */
+    lifted: boolean;
+    /** The height of the scroll container. */
+    viewHeight: number;
+    /** The bottom edge of the limit element, from the top of the scroll container. Zero with no limit. */
+    topLimit: number;
+    cardHeight: number;
+    /** How far the closed card stands under the edge. */
+    offset: number;
+    dimRef: (node: HTMLElement | null) => void;
+    findScroller: () => HTMLElement;
+};
+//# sourceMappingURL=useDockedCard.d.ts.map

package/dist/esm/components/DockedCard/useDockedCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDockedCard.d.ts","sourceRoot":"","sources":["../../../../src/components/DockedCard/useDockedCard.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAMV,MAAM,OAAO,CAAC;AAMf,6EAA6E;AAC7E,eAAO,MAAM,eAAe,GAAI,OAAO,OAAO,GAAG,IAAI,KAAG,WAcvD,CAAC;AAKF,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/C,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC;CACzC;AAED,6GAA6G;AAC7G,eAAO,MAAM,aAAa,GAAI,0FAU3B,oBAAoB;oBA4BZ,OAAO;;IA+Id,gFAAgF;;IAEhF,0CAA0C;;IAE1C,sGAAsG;;;IAGtG,qDAAqD;;mBA1D9C,WAAW,GAAG,IAAI;;CA+D5B,CAAC"}