@activecollab/components 2.0.498 → 2.0.499

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"}

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":"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","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"}