@activecollab/components 2.0.498 → 2.0.500

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

@@ -1 +1 @@
-{"version":3,"file":"EmptySlate.styles.js","names":["styled","screen","Typography","Container","div","withConfig","displayName","componentId","lg","SubContainer","StyledImg","img","_ref","$loaded","Title","Description","FooterContainer"],"sources":["../../../../src/components/EmptySlate/EmptySlate.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { screen } from \"../BreakPoints\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const Container = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 24px;\n\n  ${screen.lg} {\n    flex-direction: row;\n  }\n`;\n\nexport const SubContainer = styled.div`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 400px;\n  padding-left: 20px;\n  padding-right: 20px;\n\n  ${screen.lg} {\n    align-items: flex-start;\n  }\n`;\n\nexport const StyledImg = styled.img<{ $loaded: boolean }>`\n  width: 280px;\n  height: 280px;\n  visibility: ${({ $loaded }) => ($loaded ? \"visible\" : \"hidden\")};\n`;\n\nexport const Title = styled(Typography)`\n  margin-block-end: 8px;\n  text-align: center;\n\n  ${screen.lg} {\n    text-align: start;\n  }\n`;\n\nexport const Description = styled(Typography)`\n  text-align: center;\n\n  ${screen.lg} {\n    text-align: start;\n  }\n`;\n\nexport const FooterContainer = styled.div`\n  margin-block-start: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n\n  ${screen.lg} {\n    flex-direction: row;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,UAAU,QAAQ,0BAA0B;AAErD,OAAO,MAAMC,SAAS,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0IAQ/BN,MAAM,CAACO,EAAE,CAGZ;AAED,OAAO,MAAMC,YAAY,GAAGT,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wKASlCN,MAAM,CAACO,EAAE,CAGZ;AAED,OAAO,MAAME,SAAS,GAAGV,MAAM,CAACW,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAGnBK,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OAAQA,OAAO,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC,CAChE;AAED,OAAO,MAAMC,KAAK,GAAGd,MAAM,CAACE,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uEAInCN,MAAM,CAACO,EAAE,CAGZ;AAED,OAAO,MAAMO,WAAW,GAAGf,MAAM,CAACE,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAGzCN,MAAM,CAACO,EAAE,CAGZ;AAED,OAAO,MAAMQ,eAAe,GAAGhB,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yHAOrCN,MAAM,CAACO,EAAE,CAGZ","ignoreList":[]}
+{"version":3,"file":"EmptySlate.styles.js","names":["styled","css","screen","Typography","Container","div","withConfig","displayName","componentId","props","$compact","lg","SubContainer","StyledImg","img","_ref","$loaded","Title","Description","FooterContainer"],"sources":["../../../../src/components/EmptySlate/EmptySlate.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { screen } from \"../BreakPoints\";\nimport { Typography } from \"../Typography/Typography\";\n\ninterface Compact {\n  $compact?: boolean;\n}\n\nexport const Container = styled.div<Compact>`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 24px;\n\n  ${(props) =>\n    props.$compact\n      ? css`\n          gap: 24px;\n        `\n      : css`\n          ${screen.lg} {\n            flex-direction: row;\n          }\n        `}\n`;\n\nexport const SubContainer = styled.div<Compact>`\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 400px;\n  padding-left: 20px;\n  padding-right: 20px;\n\n  ${(props) =>\n    !props.$compact &&\n    css`\n      ${screen.lg} {\n        align-items: flex-start;\n      }\n    `}\n`;\n\nexport const StyledImg = styled.img<{ $loaded: boolean }>`\n  width: 280px;\n  height: 280px;\n  visibility: ${({ $loaded }) => ($loaded ? \"visible\" : \"hidden\")};\n`;\n\nexport const Title = styled(Typography)<Compact>`\n  margin-block-end: ${(props) => (props.$compact ? \"4px\" : \"8px\")};\n  text-align: center;\n\n  ${(props) =>\n    props.$compact &&\n    css`\n      && {\n        line-height: 1.25rem;\n      }\n    `}\n\n  ${(props) =>\n    !props.$compact &&\n    css`\n      ${screen.lg} {\n        text-align: start;\n      }\n    `}\n`;\n\nexport const Description = styled(Typography)<Compact>`\n  text-align: center;\n\n  ${(props) =>\n    props.$compact &&\n    css`\n      && {\n        line-height: 1.125rem;\n      }\n    `}\n\n  ${(props) =>\n    !props.$compact &&\n    css`\n      ${screen.lg} {\n        text-align: start;\n      }\n    `}\n`;\n\nexport const FooterContainer = styled.div`\n  margin-block-start: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n\n  ${screen.lg} {\n    flex-direction: row;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,UAAU,QAAQ,0BAA0B;AAMrD,OAAO,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qHAQ9BC,KAAK,IACNA,KAAK,CAACC,QAAQ,GACVT,GAAG,kBAGHA,GAAG,gCACCC,MAAM,CAACS,EAAE,CAGZ,CACR;AAED,OAAO,MAAMC,YAAY,GAAGZ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+IASjCC,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACfT,GAAG,oCACCC,MAAM,CAACS,EAAE,CAGZ,CACJ;AAED,OAAO,MAAME,SAAS,GAAGb,MAAM,CAACc,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAGnBO,IAAA;EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO;EAAA,OAAQA,OAAO,GAAG,SAAS,GAAG,QAAQ;AAAA,CAAC,CAChE;AAED,OAAO,MAAMC,KAAK,GAAGjB,MAAM,CAACG,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0DAChBC,KAAK,IAAMA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAM,EAG5DD,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,8BAIF,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACfT,GAAG,8BACCC,MAAM,CAACS,EAAE,CAGZ,CACJ;AAED,OAAO,MAAMO,WAAW,GAAGlB,MAAM,CAACG,UAAU,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGxCC,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,+BAIF,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACfT,GAAG,8BACCC,MAAM,CAACS,EAAE,CAGZ,CACJ;AAED,OAAO,MAAMQ,eAAe,GAAGnB,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yHAOrCN,MAAM,CAACS,EAAE,CAGZ","ignoreList":[]}

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

@@ -0,0 +1,63 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
+export declare const FileTileAction: import("styled-components").StyledComponent<"button", any, {}, never>;
+export interface IFileTileProps extends LiHTMLAttributes<HTMLLIElement> {
+    name: string;
+    /** A line under the name, for example the size. */
+    detail?: ReactNode;
+    /** The thumbnail or the file type icon. */
+    preview: ReactNode;
+    /** A layer over the preview, for example the upload progress. */
+    overlay?: ReactNode;
+    /** A control in the top right corner of the preview. */
+    cornerAction?: ReactNode;
+    /** A control at the end of the caption. */
+    captionAction?: ReactNode;
+    /** With it the preview is a button. */
+    onOpen?: () => void;
+    openLabel?: string;
+    /** Extra attributes for the preview button. */
+    openProps?: ButtonHTMLAttributes<HTMLButtonElement> & {
+        "data-testid"?: string;
+    };
+    /** Dims the tile and takes it out of the reach of the pointer. */
+    busy?: boolean;
+    /** The slot of a tile that the user drags: an empty placeholder. */
+    dragging?: boolean;
+}
+export declare const FileTile: React.ForwardRefExoticComponent<IFileTileProps & React.RefAttributes<HTMLLIElement>>;
+export interface IFileTileProgressProps extends HTMLAttributes<HTMLSpanElement> {
+    /** From 0 to 100. */
+    value?: number;
+    label: string;
+    /** Extra attributes for the bar. */
+    barProps?: HTMLAttributes<HTMLSpanElement> & {
+        "data-testid"?: string;
+    };
+}
+export declare const FileTileProgress: ({ value, label, barProps, ...rest }: IFileTileProgressProps) => React.JSX.Element;
+export interface IFileTileErrorProps extends HTMLAttributes<HTMLSpanElement> {
+    label: string;
+}
+export declare const FileTileError: ({ label, ...rest }: IFileTileErrorProps) => React.JSX.Element;
+export interface IFileTileUploadProps extends Omit<IFileTileProps, "overlay" | "cornerAction" | "captionAction"> {
+    /** From 0 to 100. */
+    progress?: number;
+    /** The upload runs: the tile shows the percent and the cancel control. */
+    uploading?: boolean;
+    /** The upload failed. The tile shows the alert and the retry control. */
+    failed?: boolean;
+    onCancel?: () => void;
+    onRetry?: () => void;
+    progressLabel: string;
+    errorLabel: string;
+    cancelLabel: string;
+    retryLabel: string;
+    /** Extra attributes for the parts of the tile. */
+    cancelProps?: Record<string, unknown>;
+    retryProps?: Record<string, unknown>;
+    errorProps?: Record<string, unknown>;
+    barProps?: IFileTileProgressProps["barProps"];
+}
+/** A file on its way to the server: its progress, or its failure with a retry. */
+export declare const FileTileUpload: React.ForwardRefExoticComponent<IFileTileUploadProps & React.RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=FileTile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTile.d.ts","sourceRoot":"","sources":["../../../../src/components/FileTile/FileTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,oBAAoB,EACpB,cAAc,EACd,gBAAgB,EAChB,SAAS,EAEV,MAAM,OAAO,CAAC;AAqBf,eAAO,MAAM,cAAc,uEAAuB,CAAC;AAEnD,MAAM,WAAW,cAAe,SAAQ,gBAAgB,CAAC,aAAa,CAAC;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,OAAO,EAAE,SAAS,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;QACpD,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,kEAAkE;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,sFA2DpB,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,GAAG;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzE;AAED,eAAO,MAAM,gBAAgB,GAAI,qCAK9B,sBAAsB,sBAWxB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,GAAI,oBAAoB,mBAAmB,sBAIpE,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,cAAc,GAAG,eAAe,CAAC;IAC1E,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC/C;AAED,kFAAkF;AAClF,eAAO,MAAM,cAAc,4FAwE1B,CAAC"}

package/dist/esm/components/FileTile/FileTile.js

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["name", "detail", "preview", "overlay", "cornerAction", "captionAction", "onOpen", "openLabel", "openProps", "busy", "dragging", "className"],
+  _excluded2 = ["value", "label", "barProps"],
+  _excluded3 = ["label"],
+  _excluded4 = ["progress", "uploading", "failed", "onCancel", "onRetry", "progressLabel", "errorLabel", "cancelLabel", "retryLabel", "cancelProps", "retryProps", "errorProps", "barProps", "detail"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { StyledFileTile, StyledFileTileAction, StyledFileTileCaption, StyledFileTileCorner, StyledFileTileDetail, StyledFileTileError, StyledFileTileName, StyledFileTileOpen, StyledFileTilePreview, StyledFileTileProgress, StyledFileTileProgressBar, StyledFileTileRetry, StyledFileTileText } from "./Styles";
+import { CancelCrossIcon, WarningIcon } from "../Icons";
+export const FileTileAction = StyledFileTileAction;
+export const FileTile = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let name = _ref.name,
+    detail = _ref.detail,
+    preview = _ref.preview,
+    overlay = _ref.overlay,
+    cornerAction = _ref.cornerAction,
+    captionAction = _ref.captionAction,
+    onOpen = _ref.onOpen,
+    openLabel = _ref.openLabel,
+    openProps = _ref.openProps,
+    _ref$busy = _ref.busy,
+    busy = _ref$busy === void 0 ? false : _ref$busy,
+    _ref$dragging = _ref.dragging,
+    dragging = _ref$dragging === void 0 ? false : _ref$dragging,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledFileTile, _extends({}, rest, {
+    ref: ref,
+    "aria-busy": busy || undefined,
+    $busy: busy,
+    $dragging: dragging,
+    className: classnames("c-file-tile", className)
+  }), /*#__PURE__*/React.createElement(StyledFileTilePreview, null, onOpen ? /*#__PURE__*/React.createElement(StyledFileTileOpen, _extends({
+    as: "button",
+    type: "button",
+    "aria-label": openLabel
+  }, openProps, {
+    onClick: onOpen,
+    $clickable: true,
+    className: "c-file-tile__open"
+  }), preview) : /*#__PURE__*/React.createElement(StyledFileTileOpen, {
+    $clickable: false
+  }, preview), overlay, cornerAction ? /*#__PURE__*/React.createElement(StyledFileTileCorner, null, cornerAction) : null), /*#__PURE__*/React.createElement(StyledFileTileCaption, {
+    className: "c-file-tile__caption"
+  }, /*#__PURE__*/React.createElement(StyledFileTileText, null, /*#__PURE__*/React.createElement(StyledFileTileName, {
+    title: name
+  }, name), detail ? /*#__PURE__*/React.createElement(StyledFileTileDetail, null, detail) : null), captionAction));
+});
+FileTile.displayName = "FileTile";
+export const FileTileProgress = _ref2 => {
+  let _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? 0 : _ref2$value,
+    label = _ref2.label,
+    barProps = _ref2.barProps,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(StyledFileTileProgress, _extends({
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": value
+  }, rest), /*#__PURE__*/React.createElement(StyledFileTileProgressBar, _extends({}, barProps, {
+    style: {
+      width: value + "%"
+    }
+  })));
+};
+export const FileTileError = _ref3 => {
+  let label = _ref3.label,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(StyledFileTileError, _extends({
+    role: "alert",
+    "aria-label": label
+  }, rest), /*#__PURE__*/React.createElement(WarningIcon, null));
+};
+/** A file on its way to the server: its progress, or its failure with a retry. */
+export const FileTileUpload = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let _ref4$progress = _ref4.progress,
+    progress = _ref4$progress === void 0 ? 0 : _ref4$progress,
+    _ref4$uploading = _ref4.uploading,
+    uploading = _ref4$uploading === void 0 ? false : _ref4$uploading,
+    _ref4$failed = _ref4.failed,
+    failed = _ref4$failed === void 0 ? false : _ref4$failed,
+    onCancel = _ref4.onCancel,
+    onRetry = _ref4.onRetry,
+    progressLabel = _ref4.progressLabel,
+    errorLabel = _ref4.errorLabel,
+    cancelLabel = _ref4.cancelLabel,
+    retryLabel = _ref4.retryLabel,
+    cancelProps = _ref4.cancelProps,
+    retryProps = _ref4.retryProps,
+    errorProps = _ref4.errorProps,
+    barProps = _ref4.barProps,
+    detail = _ref4.detail,
+    rest = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  let line = detail;
+  if (uploading) {
+    line = progress + "%";
+  }
+  if (failed) {
+    line = /*#__PURE__*/React.createElement(StyledFileTileRetry, _extends({
+      type: "button"
+    }, retryProps, {
+      onClick: onRetry,
+      className: "c-file-tile__retry"
+    }), retryLabel);
+  }
+  return /*#__PURE__*/React.createElement(FileTile, _extends({}, rest, {
+    ref: ref,
+    detail: line,
+    overlay: failed ? /*#__PURE__*/React.createElement(FileTileError, _extends({
+      label: errorLabel
+    }, errorProps)) : /*#__PURE__*/React.createElement(FileTileProgress, {
+      value: progress,
+      label: progressLabel,
+      barProps: barProps
+    }),
+    cornerAction: (uploading || failed) && onCancel ? /*#__PURE__*/React.createElement(FileTileAction, _extends({
+      type: "button",
+      "aria-label": cancelLabel
+    }, cancelProps, {
+      onClick: onCancel,
+      className: "c-file-tile__cancel"
+    }), /*#__PURE__*/React.createElement(CancelCrossIcon, null)) : null
+  }));
+});
+FileTileUpload.displayName = "FileTileUpload";
+//# sourceMappingURL=FileTile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTile.js","names":["React","forwardRef","classnames","StyledFileTile","StyledFileTileAction","StyledFileTileCaption","StyledFileTileCorner","StyledFileTileDetail","StyledFileTileError","StyledFileTileName","StyledFileTileOpen","StyledFileTilePreview","StyledFileTileProgress","StyledFileTileProgressBar","StyledFileTileRetry","StyledFileTileText","CancelCrossIcon","WarningIcon","FileTileAction","FileTile","_ref","ref","name","detail","preview","overlay","cornerAction","captionAction","onOpen","openLabel","openProps","_ref$busy","busy","_ref$dragging","dragging","className","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","undefined","$busy","$dragging","as","type","onClick","$clickable","title","displayName","FileTileProgress","_ref2","_ref2$value","value","label","barProps","_excluded2","role","style","width","FileTileError","_ref3","_excluded3","FileTileUpload","_ref4","_ref4$progress","progress","_ref4$uploading","uploading","_ref4$failed","failed","onCancel","onRetry","progressLabel","errorLabel","cancelLabel","retryLabel","cancelProps","retryProps","errorProps","_excluded4","line"],"sources":["../../../../src/components/FileTile/FileTile.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  LiHTMLAttributes,\n  ReactNode,\n  forwardRef,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n  StyledFileTile,\n  StyledFileTileAction,\n  StyledFileTileCaption,\n  StyledFileTileCorner,\n  StyledFileTileDetail,\n  StyledFileTileError,\n  StyledFileTileName,\n  StyledFileTileOpen,\n  StyledFileTilePreview,\n  StyledFileTileProgress,\n  StyledFileTileProgressBar,\n  StyledFileTileRetry,\n  StyledFileTileText,\n} from \"./Styles\";\nimport { CancelCrossIcon, WarningIcon } from \"../Icons\";\n\nexport const FileTileAction = StyledFileTileAction;\n\nexport interface IFileTileProps extends LiHTMLAttributes<HTMLLIElement> {\n  name: string;\n  /** A line under the name, for example the size. */\n  detail?: ReactNode;\n  /** The thumbnail or the file type icon. */\n  preview: ReactNode;\n  /** A layer over the preview, for example the upload progress. */\n  overlay?: ReactNode;\n  /** A control in the top right corner of the preview. */\n  cornerAction?: ReactNode;\n  /** A control at the end of the caption. */\n  captionAction?: ReactNode;\n  /** With it the preview is a button. */\n  onOpen?: () => void;\n  openLabel?: string;\n  /** Extra attributes for the preview button. */\n  openProps?: ButtonHTMLAttributes<HTMLButtonElement> & {\n    \"data-testid\"?: string;\n  };\n  /** Dims the tile and takes it out of the reach of the pointer. */\n  busy?: boolean;\n  /** The slot of a tile that the user drags: an empty placeholder. */\n  dragging?: boolean;\n}\n\nexport const FileTile = forwardRef<HTMLLIElement, IFileTileProps>(\n  (\n    {\n      name,\n      detail,\n      preview,\n      overlay,\n      cornerAction,\n      captionAction,\n      onOpen,\n      openLabel,\n      openProps,\n      busy = false,\n      dragging = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => (\n    <StyledFileTile\n      {...rest}\n      ref={ref}\n      aria-busy={busy || undefined}\n      $busy={busy}\n      $dragging={dragging}\n      className={classnames(\"c-file-tile\", className)}\n    >\n      <StyledFileTilePreview>\n        {onOpen ? (\n          <StyledFileTileOpen\n            as=\"button\"\n            type=\"button\"\n            aria-label={openLabel}\n            {...openProps}\n            onClick={onOpen}\n            $clickable\n            className=\"c-file-tile__open\"\n          >\n            {preview}\n          </StyledFileTileOpen>\n        ) : (\n          <StyledFileTileOpen $clickable={false}>{preview}</StyledFileTileOpen>\n        )}\n        {overlay}\n        {cornerAction ? (\n          <StyledFileTileCorner>{cornerAction}</StyledFileTileCorner>\n        ) : null}\n      </StyledFileTilePreview>\n      <StyledFileTileCaption className=\"c-file-tile__caption\">\n        <StyledFileTileText>\n          <StyledFileTileName title={name}>{name}</StyledFileTileName>\n          {detail ? (\n            <StyledFileTileDetail>{detail}</StyledFileTileDetail>\n          ) : null}\n        </StyledFileTileText>\n        {captionAction}\n      </StyledFileTileCaption>\n    </StyledFileTile>\n  )\n);\n\nFileTile.displayName = \"FileTile\";\n\nexport interface IFileTileProgressProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /** From 0 to 100. */\n  value?: number;\n  label: string;\n  /** Extra attributes for the bar. */\n  barProps?: HTMLAttributes<HTMLSpanElement> & { \"data-testid\"?: string };\n}\n\nexport const FileTileProgress = ({\n  value = 0,\n  label,\n  barProps,\n  ...rest\n}: IFileTileProgressProps) => (\n  <StyledFileTileProgress\n    role=\"progressbar\"\n    aria-label={label}\n    aria-valuemin={0}\n    aria-valuemax={100}\n    aria-valuenow={value}\n    {...rest}\n  >\n    <StyledFileTileProgressBar {...barProps} style={{ width: `${value}%` }} />\n  </StyledFileTileProgress>\n);\n\nexport interface IFileTileErrorProps extends HTMLAttributes<HTMLSpanElement> {\n  label: string;\n}\n\nexport const FileTileError = ({ label, ...rest }: IFileTileErrorProps) => (\n  <StyledFileTileError role=\"alert\" aria-label={label} {...rest}>\n    <WarningIcon />\n  </StyledFileTileError>\n);\n\nexport interface IFileTileUploadProps\n  extends Omit<IFileTileProps, \"overlay\" | \"cornerAction\" | \"captionAction\"> {\n  /** From 0 to 100. */\n  progress?: number;\n  /** The upload runs: the tile shows the percent and the cancel control. */\n  uploading?: boolean;\n  /** The upload failed. The tile shows the alert and the retry control. */\n  failed?: boolean;\n  onCancel?: () => void;\n  onRetry?: () => void;\n  progressLabel: string;\n  errorLabel: string;\n  cancelLabel: string;\n  retryLabel: string;\n  /** Extra attributes for the parts of the tile. */\n  cancelProps?: Record<string, unknown>;\n  retryProps?: Record<string, unknown>;\n  errorProps?: Record<string, unknown>;\n  barProps?: IFileTileProgressProps[\"barProps\"];\n}\n\n/** A file on its way to the server: its progress, or its failure with a retry. */\nexport const FileTileUpload = forwardRef<HTMLLIElement, IFileTileUploadProps>(\n  (\n    {\n      progress = 0,\n      uploading = false,\n      failed = false,\n      onCancel,\n      onRetry,\n      progressLabel,\n      errorLabel,\n      cancelLabel,\n      retryLabel,\n      cancelProps,\n      retryProps,\n      errorProps,\n      barProps,\n      detail,\n      ...rest\n    },\n    ref\n  ) => {\n    let line = detail;\n\n    if (uploading) {\n      line = `${progress}%`;\n    }\n\n    if (failed) {\n      line = (\n        <StyledFileTileRetry\n          type=\"button\"\n          {...retryProps}\n          onClick={onRetry}\n          className=\"c-file-tile__retry\"\n        >\n          {retryLabel}\n        </StyledFileTileRetry>\n      );\n    }\n\n    return (\n      <FileTile\n        {...rest}\n        ref={ref}\n        detail={line}\n        overlay={\n          failed ? (\n            <FileTileError label={errorLabel} {...errorProps} />\n          ) : (\n            <FileTileProgress\n              value={progress}\n              label={progressLabel}\n              barProps={barProps}\n            />\n          )\n        }\n        cornerAction={\n          (uploading || failed) && onCancel ? (\n            <FileTileAction\n              type=\"button\"\n              aria-label={cancelLabel}\n              {...cancelProps}\n              onClick={onCancel}\n              className=\"c-file-tile__cancel\"\n            >\n              <CancelCrossIcon />\n            </FileTileAction>\n          ) : null\n        }\n      />\n    );\n  }\n);\n\nFileTileUpload.displayName = \"FileTileUpload\";\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+export declare const StyledFileTileAction: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const StyledFileTile: import("styled-components").StyledComponent<"li", any, {
+    $busy: boolean;
+    $dragging: boolean;
+}, never>;
+export declare const StyledFileTilePreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileTileOpen: import("styled-components").StyledComponent<"div", any, {
+    $clickable: boolean;
+}, never>;
+export declare const StyledFileTileCorner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileTileCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFileTileText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileTileName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileTileDetail: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileTileProgress: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileTileProgressBar: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileTileError: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledFileTileRetry: import("styled-components").StyledComponent<"button", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FileTile/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,uEAgChC,CAAC;AAEF,eAAO,MAAM,cAAc;WAAsB,OAAO;eAAa,OAAO;SA2C3E,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAIjC,CAAC;AAEF,eAAO,MAAM,kBAAkB;gBAA4B,OAAO;SAYjE,CAAC;AAEF,eAAO,MAAM,oBAAoB,oEAKhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAQjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,qEAK9B,CAAC;AASF,eAAO,MAAM,kBAAkB,qEAK9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,qEAIhC,CAAC;AAEF,eAAO,MAAM,sBAAsB,qEASlC,CAAC;AAEF,eAAO,MAAM,yBAAyB,qEAKrC,CAAC;AAEF,eAAO,MAAM,mBAAmB,qEAc/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,uEAU/B,CAAC"}

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

@@ -0,0 +1,64 @@
+import styled, { css } from "styled-components";
+export const StyledFileTileAction = styled.button.withConfig({
+  displayName: "Styles__StyledFileTileAction",
+  componentId: "sc-1bv6320-0"
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:9999px;background-color:var(--surface-raised);cursor:pointer;pointer-events:auto;opacity:0;&:hover,&:focus-visible{background-image:linear-gradient( var(--pill-background-hover),var(--pill-background-hover) );}& svg{width:12px;height:12px;fill:var(--color-theme-900);}@media (hover:none){opacity:1;}"]);
+export const StyledFileTile = styled.li.withConfig({
+  displayName: "Styles__StyledFileTile",
+  componentId: "sc-1bv6320-1"
+})(["position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;list-style:none;border-radius:24px;background-color:var(--surface-raised);box-shadow:var(--shadow-float);&::after{content:\"\";position:absolute;inset:0;z-index:1;border:1px solid var(--border-raised);border-radius:inherit;pointer-events:none;}&:hover ", ",&:focus-within ", "{opacity:1;}", " ", ""], StyledFileTileAction, StyledFileTileAction, _ref => {
+  let $busy = _ref.$busy;
+  return $busy && css(["opacity:0.5;pointer-events:none;"]);
+}, _ref2 => {
+  let $dragging = _ref2.$dragging;
+  return $dragging && css(["background-color:var(--color-theme-200);box-shadow:none;& > *{opacity:0;}"]);
+});
+export const StyledFileTilePreview = styled.div.withConfig({
+  displayName: "Styles__StyledFileTilePreview",
+  componentId: "sc-1bv6320-2"
+})(["position:relative;aspect-ratio:16 / 9;background-color:var(--body-bg-main);"]);
+export const StyledFileTileOpen = styled.div.withConfig({
+  displayName: "Styles__StyledFileTileOpen",
+  componentId: "sc-1bv6320-3"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:transparent;", ""], _ref3 => {
+  let $clickable = _ref3.$clickable;
+  return $clickable && "cursor: pointer;";
+});
+export const StyledFileTileCorner = styled.div.withConfig({
+  displayName: "Styles__StyledFileTileCorner",
+  componentId: "sc-1bv6320-4"
+})(["position:absolute;top:8px;right:8px;display:flex;"]);
+export const StyledFileTileCaption = styled.div.withConfig({
+  displayName: "Styles__StyledFileTileCaption",
+  componentId: "sc-1bv6320-5"
+})(["display:flex;flex-shrink:0;align-items:center;gap:8px;height:40px;padding:0 8px 0 12px;background-color:var(--body-bg-main);"]);
+export const StyledFileTileText = styled.span.withConfig({
+  displayName: "Styles__StyledFileTileText",
+  componentId: "sc-1bv6320-6"
+})(["display:flex;flex:1 1 0%;flex-direction:column;min-width:0;"]);
+const truncate = css(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-theme-900);"]);
+export const StyledFileTileName = styled.span.withConfig({
+  displayName: "Styles__StyledFileTileName",
+  componentId: "sc-1bv6320-7"
+})(["", " font-size:13px;line-height:16px;font-weight:500;"], truncate);
+export const StyledFileTileDetail = styled.span.withConfig({
+  displayName: "Styles__StyledFileTileDetail",
+  componentId: "sc-1bv6320-8"
+})(["", " font-size:11px;line-height:14px;"], truncate);
+export const StyledFileTileProgress = styled.span.withConfig({
+  displayName: "Styles__StyledFileTileProgress",
+  componentId: "sc-1bv6320-9"
+})(["position:absolute;right:12px;bottom:48px;left:12px;height:3px;overflow:hidden;border-radius:9999px;background-color:var(--color-theme-300);"]);
+export const StyledFileTileProgressBar = styled.span.withConfig({
+  displayName: "Styles__StyledFileTileProgressBar",
+  componentId: "sc-1bv6320-10"
+})(["display:block;height:100%;background-color:var(--color-primary);transition:width 150ms cubic-bezier(0.4,0,0.2,1);"]);
+export const StyledFileTileError = styled.span.withConfig({
+  displayName: "Styles__StyledFileTileError",
+  componentId: "sc-1bv6320-11"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:40px;background-color:var(--alert-surface-subtle);& svg{width:24px;height:24px;fill:var(--red-alert);}"]);
+export const StyledFileTileRetry = styled.button.withConfig({
+  displayName: "Styles__StyledFileTileRetry",
+  componentId: "sc-1bv6320-12"
+})(["padding:0;border:0;background:transparent;color:var(--red-alert);font-size:11px;line-height:14px;text-decoration:underline;cursor:pointer;pointer-events:auto;"]);
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","StyledFileTileAction","button","withConfig","displayName","componentId","StyledFileTile","li","_ref","$busy","_ref2","$dragging","StyledFileTilePreview","div","StyledFileTileOpen","_ref3","$clickable","StyledFileTileCorner","StyledFileTileCaption","StyledFileTileText","span","truncate","StyledFileTileName","StyledFileTileDetail","StyledFileTileProgress","StyledFileTileProgressBar","StyledFileTileError","StyledFileTileRetry"],"sources":["../../../../src/components/FileTile/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledFileTileAction = styled.button`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 9999px;\n  background-color: var(--surface-raised);\n  cursor: pointer;\n  pointer-events: auto;\n  opacity: 0;\n\n  &:hover,\n  &:focus-visible {\n    background-image: linear-gradient(\n      var(--pill-background-hover),\n      var(--pill-background-hover)\n    );\n  }\n\n  & svg {\n    width: 12px;\n    height: 12px;\n    fill: var(--color-theme-900);\n  }\n\n  @media (hover: none) {\n    opacity: 1;\n  }\n`;\n\nexport const StyledFileTile = styled.li<{ $busy: boolean; $dragging: boolean }>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  list-style: none;\n  border-radius: 24px;\n  background-color: var(--surface-raised);\n  box-shadow: var(--shadow-float);\n\n  /* The border lies over the content, so it shows on a preview image too. */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    border: 1px solid var(--border-raised);\n    border-radius: inherit;\n    pointer-events: none;\n  }\n\n  &:hover ${StyledFileTileAction}, &:focus-within ${StyledFileTileAction} {\n    opacity: 1;\n  }\n\n  ${({ $busy }) =>\n    $busy &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  ${({ $dragging }) =>\n    $dragging &&\n    css`\n      background-color: var(--color-theme-200);\n      box-shadow: none;\n\n      & > * {\n        opacity: 0;\n      }\n    `}\n`;\n\nexport const StyledFileTilePreview = styled.div`\n  position: relative;\n  aspect-ratio: 16 / 9;\n  background-color: var(--body-bg-main);\n`;\n\nexport const StyledFileTileOpen = styled.div<{ $clickable: boolean }>`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  ${({ $clickable }) => $clickable && \"cursor: pointer;\"}\n`;\n\nexport const StyledFileTileCorner = styled.div`\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n`;\n\nexport const StyledFileTileCaption = styled.div`\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 8px;\n  height: 40px;\n  padding: 0 8px 0 12px;\n  background-color: var(--body-bg-main);\n`;\n\nexport const StyledFileTileText = styled.span`\n  display: flex;\n  flex: 1 1 0%;\n  flex-direction: column;\n  min-width: 0;\n`;\n\nconst truncate = css`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--color-theme-900);\n`;\n\nexport const StyledFileTileName = styled.span`\n  ${truncate}\n  font-size: 13px;\n  line-height: 16px;\n  font-weight: 500;\n`;\n\nexport const StyledFileTileDetail = styled.span`\n  ${truncate}\n  font-size: 11px;\n  line-height: 14px;\n`;\n\nexport const StyledFileTileProgress = styled.span`\n  position: absolute;\n  right: 12px;\n  bottom: 48px;\n  left: 12px;\n  height: 3px;\n  overflow: hidden;\n  border-radius: 9999px;\n  background-color: var(--color-theme-300);\n`;\n\nexport const StyledFileTileProgressBar = styled.span`\n  display: block;\n  height: 100%;\n  background-color: var(--color-primary);\n  transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);\n`;\n\nexport const StyledFileTileError = styled.span`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-bottom: 40px;\n  background-color: var(--alert-surface-subtle);\n\n  & svg {\n    width: 24px;\n    height: 24px;\n    fill: var(--red-alert);\n  }\n`;\n\nexport const StyledFileTileRetry = styled.button`\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--red-alert);\n  font-size: 11px;\n  line-height: 14px;\n  text-decoration: underline;\n  cursor: pointer;\n  pointer-events: auto;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACG,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gbAgChD;AAED,OAAO,MAAMC,cAAc,GAAGP,MAAM,CAACQ,EAAE,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mYAsB3BJ,oBAAoB,EAAoBA,oBAAoB,EAIpEO,IAAA;EAAA,IAAGC,KAAK,GAAAD,IAAA,CAALC,KAAK;EAAA,OACRA,KAAK,IACLT,GAAG,sCAGF;AAAA,GAEDU,KAAA;EAAA,IAAGC,SAAS,GAAAD,KAAA,CAATC,SAAS;EAAA,OACZA,SAAS,IACTX,GAAG,+EAOF;AAAA,EACJ;AAED,OAAO,MAAMY,qBAAqB,GAAGb,MAAM,CAACc,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAI9C;AAED,OAAO,MAAMS,kBAAkB,GAAGf,MAAM,CAACc,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+JAWxCU,KAAA;EAAA,IAAGC,UAAU,GAAAD,KAAA,CAAVC,UAAU;EAAA,OAAOA,UAAU,IAAI,kBAAkB;AAAA,EACvD;AAED,OAAO,MAAMC,oBAAoB,GAAGlB,MAAM,CAACc,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yDAK7C;AAED,OAAO,MAAMa,qBAAqB,GAAGnB,MAAM,CAACc,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oIAQ9C;AAED,OAAO,MAAMc,kBAAkB,GAAGpB,MAAM,CAACqB,IAAI,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mEAK5C;AAED,MAAMgB,QAAQ,GAAGrB,GAAG,6FAKnB;AAED,OAAO,MAAMsB,kBAAkB,GAAGvB,MAAM,CAACqB,IAAI,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DACzCgB,QAAQ,CAIX;AAED,OAAO,MAAME,oBAAoB,GAAGxB,MAAM,CAACqB,IAAI,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8CAC3CgB,QAAQ,CAGX;AAED,OAAO,MAAMG,sBAAsB,GAAGzB,MAAM,CAACqB,IAAI,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mJAShD;AAED,OAAO,MAAMoB,yBAAyB,GAAG1B,MAAM,CAACqB,IAAI,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yHAKnD;AAED,OAAO,MAAMqB,mBAAmB,GAAG3B,MAAM,CAACqB,IAAI,CAAAjB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8MAc7C;AAED,OAAO,MAAMsB,mBAAmB,GAAG5B,MAAM,CAACG,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sKAU/C","ignoreList":[]}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
+export interface IFloatingPillProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** An icon after the text. */
+    icon?: ReactNode;
+    /** Fades the pill out, and takes it out of the reach of the pointer. */
+    leaving?: boolean;
+}
+export declare const FloatingPill: React.ForwardRefExoticComponent<IFloatingPillProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=FloatingPill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPill.d.ts","sourceRoot":"","sources":["../../../../src/components/FloatingPill/FloatingPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAM3E,MAAM,WAAW,kBACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,8FAcxB,CAAC"}

package/dist/esm/components/FloatingPill/FloatingPill.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["icon", "leaving", "className", "children"];
+import React, { forwardRef } from "react";
+import classnames from "classnames";
+import { StyledFloatingPill } from "./Styles";
+export const FloatingPill = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let icon = _ref.icon,
+    _ref$leaving = _ref.leaving,
+    leaving = _ref$leaving === void 0 ? false : _ref$leaving,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledFloatingPill, _extends({
+    type: "button"
+  }, rest, {
+    ref: ref,
+    $leaving: leaving,
+    tabIndex: leaving ? -1 : rest.tabIndex,
+    className: classnames("c-floating-pill", className)
+  }), children, icon);
+});
+FloatingPill.displayName = "FloatingPill";
+//# sourceMappingURL=FloatingPill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPill.js","names":["React","forwardRef","classnames","StyledFloatingPill","FloatingPill","_ref","ref","icon","_ref$leaving","leaving","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","type","$leaving","tabIndex","displayName"],"sources":["../../../../src/components/FloatingPill/FloatingPill.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, ReactNode, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledFloatingPill } from \"./Styles\";\n\nexport interface IFloatingPillProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** An icon after the text. */\n  icon?: ReactNode;\n  /** Fades the pill out, and takes it out of the reach of the pointer. */\n  leaving?: boolean;\n}\n\nexport const FloatingPill = forwardRef<HTMLButtonElement, IFloatingPillProps>(\n  ({ icon, leaving = false, className, children, ...rest }, ref) => (\n    <StyledFloatingPill\n      type=\"button\"\n      {...rest}\n      ref={ref}\n      $leaving={leaving}\n      tabIndex={leaving ? -1 : rest.tabIndex}\n      className={classnames(\"c-floating-pill\", className)}\n    >\n      {children}\n      {icon}\n    </StyledFloatingPill>\n  )\n);\n\nFloatingPill.displayName = \"FloatingPill\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAqCC,UAAU,QAAQ,OAAO;AAE1E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,kBAAkB,QAAQ,UAAU;AAU7C,OAAO,MAAMC,YAAY,gBAAGH,UAAU,CACpC,CAAAI,IAAA,EAA0DC,GAAG;EAAA,IAA1DC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IAAAC,YAAA,GAAAH,IAAA,CAAEI,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAEE,SAAS,GAAAL,IAAA,CAATK,SAAS;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAKC,IAAI,GAAAC,6BAAA,CAAAR,IAAA,EAAAS,SAAA;EAAA,oBACpDd,KAAA,CAAAe,aAAA,CAACZ,kBAAkB,EAAAa,QAAA;IACjBC,IAAI,EAAC;EAAQ,GACTL,IAAI;IACRN,GAAG,EAAEA,GAAI;IACTY,QAAQ,EAAET,OAAQ;IAClBU,QAAQ,EAAEV,OAAO,GAAG,CAAC,CAAC,GAAGG,IAAI,CAACO,QAAS;IACvCT,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEQ,SAAS;EAAE,IAEnDC,QAAQ,EACRJ,IACiB,CAAC;AAAA,CAEzB,CAAC;AAEDH,YAAY,CAACgB,WAAW,GAAG,cAAc","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+export declare const StyledFloatingPill: import("styled-components").StyledComponent<"button", any, {
+    $leaving: boolean;
+}, never>;
+//# sourceMappingURL=Styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FloatingPill/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;cAA6B,OAAO;SA2ClE,CAAC"}

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

@@ -0,0 +1,9 @@
+import styled, { css } from "styled-components";
+export const StyledFloatingPill = styled.button.withConfig({
+  displayName: "Styles__StyledFloatingPill",
+  componentId: "sc-13pfbyz-0"
+})(["display:flex;align-items:center;gap:4px;height:24px;padding:0 6px 0 10px;border:0;border-radius:9999px;background-color:var(--color-secondary);color:#fff;font-family:inherit;font-size:12px;line-height:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1);& svg{fill:#fff;}&:hover{opacity:0.9;}&:focus-visible{outline:2px solid var(--color-secondary);outline-offset:2px;}", " @media (prefers-reduced-motion:reduce){transition:none;}"], _ref => {
+  let $leaving = _ref.$leaving;
+  return $leaving && css(["&&{opacity:0;pointer-events:none;}"]);
+});
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","names":["styled","css","StyledFloatingPill","button","withConfig","displayName","componentId","_ref","$leaving"],"sources":["../../../../src/components/FloatingPill/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledFloatingPill = styled.button<{ $leaving: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 24px;\n  padding: 0 6px 0 10px;\n  border: 0;\n  border-radius: 9999px;\n  background-color: var(--color-secondary);\n  color: #fff;\n  font-family: inherit;\n  font-size: 12px;\n  line-height: 15px;\n  font-weight: 600;\n  white-space: nowrap;\n  cursor: pointer;\n  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);\n\n  & svg {\n    fill: #fff;\n  }\n\n  &:hover {\n    opacity: 0.9;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--color-secondary);\n    outline-offset: 2px;\n  }\n\n  ${({ $leaving }) =>\n    $leaving &&\n    css`\n      && {\n        opacity: 0;\n        pointer-events: none;\n      }\n    `}\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4eA+B3CC,IAAA;EAAA,IAAGC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;EAAA,OACXA,QAAQ,IACRP,GAAG,wCAKF;AAAA,EAKJ","ignoreList":[]}

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

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

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

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

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

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

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

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

package/dist/esm/components/Icons/collection/FlagFilled.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+/**
+ * @component FlagFilledIcon
+ * @description
+ *
+ * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+ * The Icon component is
+ * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+ *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <FlagFilledIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
+ *
+ * @example
+ * return (
+ *   <FlagFilledIcon className="mr-2" />
+ * )
+ *
+ * @see
+ * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+ * @see
+ * https://design.activecollab.com/docs/foundations/icons
+ */
+declare const FlagFilledIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default FlagFilledIcon;
+//# sourceMappingURL=FlagFilled.d.ts.map

package/dist/esm/components/Icons/collection/FlagFilled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagFilled.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/FlagFilled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,cAAc;eAMH,MAAM;+CAmDtB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/components/Icons/collection/FlagFilled.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["gradient"];
+import React from "react";
+import { GradientDefs } from "../../GradientDefs";
+
+/**
+ * @component FlagFilledIcon
+ * @description
+ *
+ * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+ * The Icon component is
+ * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+ *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <FlagFilledIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
+ *
+ * @example
+ * return (
+ *   <FlagFilledIcon className="mr-2" />
+ * )
+ *
+ * @see
+ * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+ * @see
+ * https://design.activecollab.com/docs/foundations/icons
+ */
+const FlagFilledIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let gradient = _ref.gradient,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "data-testid": "FlagFilledIcon",
+    fill: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    focusable: false,
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(GradientDefs, {
+    gradient: gradient
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4 14V2.8",
+    fill: "none",
+    stroke: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    strokeWidth: 1.36,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M4 3.2H11.6L9.84 6L11.6 8.8H4V3.2Z",
+    stroke: gradient ? "url(#icon-gradient)" : props != null && props.fill ? props.fill : "var(--color-theme-600)",
+    strokeWidth: 1.36,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+});
+FlagFilledIcon.displayName = "FlagFilledIcon";
+export default FlagFilledIcon;
+//# sourceMappingURL=FlagFilled.js.map

package/dist/esm/components/Icons/collection/FlagFilled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagFilled.js","names":["React","GradientDefs","FlagFilledIcon","forwardRef","_ref","ref","gradient","props","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","xmlns","width","height","viewBox","fill","focusable","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","displayName"],"sources":["../../../../../src/components/Icons/collection/FlagFilled.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { GradientDefs } from \"../../GradientDefs\";\n\n/**\n * @component FlagFilledIcon\n * @description\n *\n * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.\n * The Icon component is\n * customizable, allowing for variations in size, color, and style to fit the needs of the application.\n *\n * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.\n * Format: \"linear-gradient(<angle>deg, <color1>, <color2>, ...)\"\n *\n * @example\n * return (\n * <FlagFilledIcon gradient=\"linear-gradient(135deg, #4da2ed, #f72222)\" />\n * )\n *\n * @example\n * return (\n *   <FlagFilledIcon className=\"mr-2\" />\n * )\n *\n * @see\n * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons\n * @see\n * https://design.activecollab.com/docs/foundations/icons\n */\nconst FlagFilledIcon = React.forwardRef(\n  (\n    {\n      gradient,\n      ...props\n    }: React.SVGProps<SVGSVGElement> & {\n      gradient?: string;\n    },\n    ref?: React.Ref<SVGSVGElement>\n  ) => (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={16}\n      height={16}\n      viewBox=\"0 0 16 16\"\n      data-testid=\"FlagFilledIcon\"\n      fill={\n        gradient\n          ? \"url(#icon-gradient)\"\n          : props?.fill\n          ? props.fill\n          : \"var(--color-theme-600)\"\n      }\n      focusable={false}\n      ref={ref}\n      {...props}\n    >\n      <GradientDefs gradient={gradient} />\n      <path\n        d=\"M4 14V2.8\"\n        fill=\"none\"\n        stroke={\n          gradient\n            ? \"url(#icon-gradient)\"\n            : props?.fill\n            ? props.fill\n            : \"var(--color-theme-600)\"\n        }\n        strokeWidth={1.36}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M4 3.2H11.6L9.84 6L11.6 8.8H4V3.2Z\"\n        stroke={\n          gradient\n            ? \"url(#icon-gradient)\"\n            : props?.fill\n            ? props.fill\n            : \"var(--color-theme-600)\"\n        }\n        strokeWidth={1.36}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n);\nFlagFilledIcon.displayName = \"FlagFilledIcon\";\nexport default FlagFilledIcon;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,gBAAGF,KAAK,CAACG,UAAU,CACrC,CAAAC,IAAA,EAOEC,GAA8B;EAAA,IAL5BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACLC,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;EAAA,oBAMVT,KAAA,CAAAU,aAAA,QAAAC,QAAA;IACEC,KAAK,EAAC,4BAA4B;IAClCC,KAAK,EAAE,EAAG;IACVC,MAAM,EAAE,EAAG;IACXC,OAAO,EAAC,WAAW;IACnB,eAAY,gBAAgB;IAC5BC,IAAI,EACFV,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAES,IAAI,GACXT,KAAK,CAACS,IAAI,GACV,wBACL;IACDC,SAAS,EAAE,KAAM;IACjBZ,GAAG,EAAEA;EAAI,GACLE,KAAK,gBAETP,KAAA,CAAAU,aAAA,CAACT,YAAY;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACpCN,KAAA,CAAAU,aAAA;IACEQ,CAAC,EAAC,WAAW;IACbF,IAAI,EAAC,MAAM;IACXG,MAAM,EACJb,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAES,IAAI,GACXT,KAAK,CAACS,IAAI,GACV,wBACL;IACDI,WAAW,EAAE,IAAK;IAClBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CAAC,eACFtB,KAAA,CAAAU,aAAA;IACEQ,CAAC,EAAC,oCAAoC;IACtCC,MAAM,EACJb,QAAQ,GACJ,qBAAqB,GACrBC,KAAK,YAALA,KAAK,CAAES,IAAI,GACXT,KAAK,CAACS,IAAI,GACV,wBACL;IACDI,WAAW,EAAE,IAAK;IAClBC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC;EAAO,CACvB,CACE,CAAC;AAAA,CAEV,CAAC;AACDpB,cAAc,CAACqB,WAAW,GAAG,gBAAgB;AAC7C,eAAerB,cAAc","ignoreList":[]}

package/dist/esm/components/Icons/collection/FlagOutline.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+/**
+ * @component FlagOutlineIcon
+ * @description
+ *
+ * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+ * The Icon component is
+ * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+ *
+ * @prop {string} [gradient] - Optional CSS linear-gradient string to apply a custom fill.
+ * Format: "linear-gradient(<angle>deg, <color1>, <color2>, ...)"
+ *
+ * @example
+ * return (
+ * <FlagOutlineIcon gradient="linear-gradient(135deg, #4da2ed, #f72222)" />
+ * )
+ *
+ * @example
+ * return (
+ *   <FlagOutlineIcon className="mr-2" />
+ * )
+ *
+ * @see
+ * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+ * @see
+ * https://design.activecollab.com/docs/foundations/icons
+ */
+declare const FlagOutlineIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & {
+    gradient?: string;
+}, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default FlagOutlineIcon;
+//# sourceMappingURL=FlagOutline.d.ts.map

package/dist/esm/components/Icons/collection/FlagOutline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagOutline.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icons/collection/FlagOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,eAAe;eAMJ,MAAM;+CAoDtB,CAAC;AAEF,eAAe,eAAe,CAAC"}