feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toast/lib/components/Timer/Timer.js

@@ -0,0 +1,22 @@
+'use client';
+import * as React from 'react';
+import { useBaseAnimationStyles } from './useTimerStyles.styles';
+export const Timer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const baseAnimationStyles = useBaseAnimationStyles();
+    const { running, timeout, onTimeout } = props;
+    const style = {
+        animationDuration: `${timeout}ms`,
+        animationPlayState: running ? 'running' : 'paused'
+    };
+    if (timeout < 0) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        onAnimationEnd: onTimeout,
+        "data-timer-status": style.animationPlayState,
+        ref: ref,
+        style: style,
+        className: baseAnimationStyles
+    });
+});
+Timer.displayName = 'Timer';

node_modules/@fluentui/react-toast/lib/components/Timer/Timer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timer/Timer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBaseAnimationStyles } from './useTimerStyles.styles';\n\nexport type TimerProps = {\n  running: boolean;\n  timeout: number;\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onTimeout: () => void;\n  as?: 'span';\n};\n\nexport const Timer = React.forwardRef<HTMLDivElement, TimerProps>((props, ref) => {\n  const baseAnimationStyles = useBaseAnimationStyles();\n  const { running, timeout, onTimeout } = props;\n\n  const style: React.CSSProperties = {\n    animationDuration: `${timeout}ms`,\n    animationPlayState: running ? 'running' : 'paused',\n  };\n\n  if (timeout < 0) {\n    return null;\n  }\n\n  return (\n    <span\n      onAnimationEnd={onTimeout}\n      data-timer-status={style.animationPlayState}\n      ref={ref}\n      style={style}\n      className={baseAnimationStyles}\n    />\n  );\n});\n\nTimer.displayName = 'Timer';\n"],"names":["React","useBaseAnimationStyles","Timer","forwardRef","props","ref","baseAnimationStyles","running","timeout","onTimeout","style","animationDuration","animationPlayState","span","onAnimationEnd","data-timer-status","className","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,0BAA0B;AAUjE,OAAO,MAAMC,sBAAQF,MAAMG,UAAU,CAA6B,CAACC,OAAOC;IACxE,MAAMC,sBAAsBL;IAC5B,MAAM,EAAEM,OAAO,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAExC,MAAMM,QAA6B;QACjCC,mBAAmB,GAAGH,QAAQ,EAAE,CAAC;QACjCI,oBAAoBL,UAAU,YAAY;IAC5C;IAEA,IAAIC,UAAU,GAAG;QACf,OAAO;IACT;IAEA,qBACE,oBAACK;QACCC,gBAAgBL;QAChBM,qBAAmBL,MAAME,kBAAkB;QAC3CP,KAAKA;QACLK,OAAOA;QACPM,WAAWV;;AAGjB,GAAG;AAEHJ,MAAMe,WAAW,GAAG"}

node_modules/@fluentui/react-toast/lib/components/Timer/index.js

@@ -0,0 +1 @@
+export { Timer } from './Timer';

node_modules/@fluentui/react-toast/lib/components/Timer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timer/index.ts"],"sourcesContent":["export type { TimerProps } from './Timer';\nexport { Timer } from './Timer';\n"],"names":["Timer"],"mappings":"AACA,SAASA,KAAK,QAAQ,UAAU"}

node_modules/@fluentui/react-toast/lib/components/Timer/useTimerStyles.styles.js

@@ -0,0 +1,4 @@
+'use client';
+
+import { __resetStyles } from '@griffel/react';
+export const useBaseAnimationStyles = /*#__PURE__*/__resetStyles("r16zaflb", "r75casi", [".r16zaflb{animation-name:rsacmq1;}", "@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", ".r75casi{animation-name:rsacmq1;}"]);

node_modules/@fluentui/react-toast/lib/components/Timer/useTimerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","useBaseAnimationStyles"],"sources":["useTimerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles } from '@griffel/react';\nexport const useBaseAnimationStyles = makeResetStyles({\n    animationName: {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 0\n        }\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,QAAgC,gBAAgB;AAChD,OAAO,MAAMC,sBAAsB,gBAAGD,aAAA,yJASrC,CAAC","ignoreList":[]}

node_modules/@fluentui/react-toast/lib/components/Timer/useTimerStyles.styles.raw.js

@@ -0,0 +1,12 @@
+'use client';
+import { makeResetStyles } from '@griffel/react';
+export const useBaseAnimationStyles = makeResetStyles({
+    animationName: {
+        from: {
+            opacity: 0
+        },
+        to: {
+            opacity: 0
+        }
+    }
+});

node_modules/@fluentui/react-toast/lib/components/Timer/useTimerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timer/useTimerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles } from '@griffel/react';\n\nexport const useBaseAnimationStyles = makeResetStyles({\n  animationName: {\n    from: {\n      opacity: 0,\n    },\n    to: {\n      opacity: 0,\n    },\n  },\n});\n"],"names":["makeResetStyles","useBaseAnimationStyles","animationName","from","opacity","to"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,iBAAiB;AAEjD,OAAO,MAAMC,yBAAyBD,gBAAgB;IACpDE,eAAe;QACbC,MAAM;YACJC,SAAS;QACX;QACAC,IAAI;YACFD,SAAS;QACX;IACF;AACF,GAAG"}