@clubmed/trident-ui 1.3.1-beta.1 → 1.4.0-beta.1

package/molecules/Tabs/TabList.js

@@ -1,53 +1,45 @@
 "use client";
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { c as e } from "../../chunks/index.js";
-import { useRef as n, useEffect as v } from "react";
-import { useSpring as b, animated as h } from "@react-spring/web";
-import { useActiveTabControl as L } from "./hooks/tabControl.js";
-const j = ({
-  className: f,
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { c } from "../../chunks/index.js";
+import { useRef as n, useEffect as w } from "react";
+import { useActiveTabControl as v } from "./hooks/tabControl.js";
+const C = ({
+  className: o,
   constrained: l = !1,
-  children: i
+  children: a
 }) => {
-  const s = n(null), c = n(null), [m, r] = L(), [{ scrollLeft: a }, o] = b(() => ({
-    from: { scrollLeft: 0 }
-  }));
-  v(() => {
-    if (!r?.current)
+  const e = n(null), s = n(null), [i, t] = v();
+  w(() => {
+    if (!t?.current || !e.current)
       return;
-    const p = r.current.getBoundingClientRect().left, u = s.current.scrollLeft, w = c.current.offsetWidth;
-    o.start({
-      to: {
-        scrollLeft: u + p - w
-      }
-    });
-  }, [a, r, o]);
-  const x = { "--active-tab": m };
-  return /* @__PURE__ */ t(
-    h.div,
+    const x = s.current.offsetWidth ?? 0, u = t.current.getBoundingClientRect(), m = e.current.getBoundingClientRect(), p = e.current.scrollLeft;
+    e.current.scrollLeft = p + (u.left - m.left) - x;
+  }, [t]);
+  const f = { "--active-tab": i };
+  return /* @__PURE__ */ r(
+    "div",
     {
-      ref: s,
       "data-name": "TabsHeader",
-      className: e(
-        "scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
-        f
+      className: c(
+        "scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20",
+        o
       ),
-      scrollLeft: a,
-      children: /* @__PURE__ */ d("div", { role: "tablist", className: e("flex flex-row"), style: x, children: [
-        /* @__PURE__ */ t(
+      ref: e,
+      children: /* @__PURE__ */ d("div", { role: "tablist", className: "flex flex-row", style: f, children: [
+        /* @__PURE__ */ r(
           "div",
           {
-            ref: c,
-            className: e("shrink-0", {
+            ref: s,
+            className: c("shrink-0", {
               "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !l
             })
           }
         ),
-        i,
-        /* @__PURE__ */ t(
+        a,
+        /* @__PURE__ */ r(
           "div",
           {
-            className: e("shrink-0", {
+            className: c("shrink-0", {
               "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !l
             })
           }
@@ -57,6 +49,6 @@ const j = ({
   );
 };
 export {
-  j as TabList
+  C as TabList
 };
 //# sourceMappingURL=TabList.js.map

package/molecules/Tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  type FunctionComponent,\n  type PropsWithChildren,\n} from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n    from: { scrollLeft: 0 },\n  }));\n\n  useEffect(() => {\n    if (!currentControl?.current) {\n      return;\n    }\n\n    const tabLeft = currentControl.current.getBoundingClientRect().left;\n    const scrollLeft = containerRef.current!.scrollLeft;\n    const spacerWidth = spacerRef.current!.offsetWidth;\n\n    scrollApi.start({\n      to: {\n        scrollLeft: scrollLeft + tabLeft - spacerWidth,\n      },\n    });\n  }, [scrollLeft, currentControl, scrollApi]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <animated.div\n      ref={containerRef}\n      data-name=\"TabsHeader\"\n      className={classnames(\n        'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n        className,\n      )}\n      scrollLeft={scrollLeft}\n    >\n      <div role=\"tablist\" className={classnames('flex flex-row')} style={style}>\n        <div\n          ref={spacerRef}\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </animated.div>\n  );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAA,GAE/B,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAA;AAAA,EAAE,EACtB;AAEF,EAAAC,EAAU,MAAM;AACd,QAAI,CAACL,GAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MAAA;AAAA,IACrC,CACD;AAAA,EACH,GAAG,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAE1C,QAAMK,IAAQ,EAAE,gBAAgBT,EAAA;AAEhC,SACE,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MAAA;AAAA,MAEF,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  type FunctionComponent,\n  type PropsWithChildren,\n} from 'react';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  useEffect(() => {\n    if (!currentControl?.current || !ref.current) {\n      return;\n    }\n\n    const spacerWidth = spacerRef.current!.offsetWidth ?? 0;\n    const currentRect = currentControl.current.getBoundingClientRect();\n    const containerRect = ref.current!.getBoundingClientRect();\n    const scroll = ref.current!.scrollLeft;\n\n    ref.current.scrollLeft = scroll + (currentRect.left - containerRect.left) - spacerWidth;\n  }, [currentControl]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <div\n      data-name=\"TabsHeader\"\n      className={classnames(\n        'scrollbar-hidden relative isolate flex max-w-full overflow-x-scroll scroll-smooth py-20',\n        className,\n      )}\n      ref={ref}\n    >\n      <div role=\"tablist\" className=\"flex flex-row\" style={style}>\n        <div\n          ref={spacerRef}\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["TabList","className","constrained","children","ref","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","useEffect","spacerWidth","currentRect","containerRect","scroll","style","jsx","classnames"],"mappings":";;;;;AAqBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAuB,IAAI,GACjCC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAA;AAErC,EAAAC,EAAU,MAAM;AACd,QAAI,CAACF,GAAgB,WAAW,CAACJ,EAAI;AACnC;AAGF,UAAMO,IAAcL,EAAU,QAAS,eAAe,GAChDM,IAAcJ,EAAe,QAAQ,sBAAA,GACrCK,IAAgBT,EAAI,QAAS,sBAAA,GAC7BU,IAASV,EAAI,QAAS;AAE5B,IAAAA,EAAI,QAAQ,aAAaU,KAAUF,EAAY,OAAOC,EAAc,QAAQF;AAAA,EAC9E,GAAG,CAACH,CAAc,CAAC;AAEnB,QAAMO,IAAQ,EAAE,gBAAgBR,EAAA;AAEhC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAhB;AAAA,MAAA;AAAA,MAEF,KAAAG;AAAA,MAEA,4BAAC,OAAA,EAAI,MAAK,WAAU,WAAU,iBAAgB,OAAAW,GAC5C,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKV;AAAA,YACL,WAAWW,EAAW,YAAY;AAAA,cAChC,0FACE,CAACf;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,QACD,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,YAAY;AAAA,cAChC,0FACE,CAACf;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Tabs/TabPanel.js

@@ -1,62 +1,43 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import { c as u } from "../../chunks/index.js";
-import { useRef as b, useEffect as f } from "react";
-import { useSpring as l, animated as h } from "@react-spring/web";
-import { useTabsUid as T, useActiveTab as g } from "./hooks/tabControl.js";
-const n = {
-  opacity: 0,
-  pointerEvents: "none",
-  height: 0
-}, i = {
-  opacity: 1,
-  pointerEvents: "auto",
-  height: "auto"
-}, P = ({
-  value: e,
-  className: c,
+import { jsx as s } from "react/jsx-runtime";
+import { c } from "../../chunks/index.js";
+import { useRef as d, useEffect as b } from "react";
+import { useTabsUid as m, useActiveTab as p } from "./hooks/tabControl.js";
+const $ = ({
+  value: t,
+  className: o,
   onSelect: a,
-  children: m
+  children: i
 }) => {
-  const r = T(), s = b(!1), t = g() === e, [d, o] = l(() => ({
-    from: t ? i : n
-  }));
-  return f(() => {
-    if (!s.current) {
-      s.current = !0;
+  const r = m(), n = d(!1), e = p() === t;
+  return b(() => {
+    if (!n.current) {
+      n.current = !0;
       return;
     }
-    o.start({
-      to: {
-        ...t ? i : n,
-        height: "auto"
-      },
-      onRest: () => {
-        o.start({
-          to: { height: t ? "auto" : 0 },
-          immediate: !0
-        });
-      }
-    }), t && a?.({ value: e });
-  }, [t, o, e, a]), /* @__PURE__ */ p(
-    h.div,
+    e && a?.({ value: t });
+  }, [e, t, a]), /* @__PURE__ */ s(
+    "div",
     {
-      style: d,
-      id: `TabPanel_${e}_${r}`,
-      "data-name": `TabPanel_${e}`,
+      id: `TabPanel_${t}_${r}`,
+      "data-name": `TabPanel_${t}`,
       role: "tabpanel",
-      "aria-hidden": !t,
-      "aria-labelledby": `Tab_${e}_${r}`,
-      tabIndex: t ? 0 : -1,
-      className: u(c, "col-start-1 col-end-1 row-start-1 row-end-1", {
-        "z-0": !t,
-        "z-1": t
-      }),
-      children: m
+      "aria-hidden": !e,
+      "aria-labelledby": `Tab_${t}_${r}`,
+      tabIndex: e ? 0 : -1,
+      className: c(
+        o,
+        "relative col-start-1 row-start-1 transition-opacity duration-500",
+        {
+          "pointer-events-none z-0 h-0 opacity-0": !e,
+          "pointer-events-auto z-1 h-auto opacity-100": e
+        }
+      ),
+      children: i
     }
   );
 };
 export {
-  P as TabPanel
+  $ as TabPanel
 };
 //# sourceMappingURL=TabPanel.js.map

package/molecules/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTab, useTabsUid } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: Props['value'] }) => void;\n}\n\ninterface TabStyle {\n  pointerEvents: 'none' | 'auto';\n  opacity: number;\n  height?: number | 'auto';\n}\n\nconst FROM: TabStyle = {\n  opacity: 0,\n  pointerEvents: 'none',\n  height: 0,\n};\n\nconst TO: TabStyle = {\n  opacity: 1,\n  pointerEvents: 'auto',\n  height: 'auto',\n};\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  const [style, styleApi] = useSpring<TabStyle>(() => ({\n    from: isActive ? TO : FROM,\n  }));\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    styleApi.start({\n      to: {\n        ...(isActive ? TO : FROM),\n        height: 'auto',\n      },\n      onRest: () => {\n        styleApi.start({\n          to: { height: isActive ? 'auto' : 0 },\n          immediate: true,\n        });\n      },\n    });\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, styleApi, value, onSelect]);\n\n  return (\n    <animated.div\n      style={style}\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role=\"tabpanel\"\n      aria-hidden={!isActive}\n      aria-labelledby={`Tab_${value}_${uid}`}\n      tabIndex={isActive ? 0 : -1}\n      className={classnames(className, 'col-start-1 col-end-1 row-start-1 row-end-1', {\n        'z-0': !isActive,\n        'z-1': isActive,\n      })}\n    >\n      {children}\n    </animated.div>\n  );\n};\n"],"names":["FROM","TO","TabPanel","value","className","onSelect","children","uid","useTabsUid","mounted","useRef","isActive","useActiveTab","style","styleApi","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;;;AA2BA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV,GAEaC,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAA,GACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,EAAA,MACaT,GAE3B,CAACU,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWV,IAAKD;AAAA,EAAA,EACtB;AAEF,SAAAgB,EAAU,MAAM;AACd,QAAI,CAACP,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAAK,EAAS,MAAM;AAAA,MACb,IAAI;AAAA,QACF,GAAIH,IAAWV,IAAKD;AAAA,QACpB,QAAQ;AAAA,MAAA;AAAA,MAEV,QAAQ,MAAM;AACZ,QAAAc,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,QAAQH,IAAW,SAAS,EAAA;AAAA,UAClC,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,KACFN,IAAW,EAAE,OAAAF,GAAO;AAAA,EAExB,GAAG,CAACQ,GAAUG,GAAUX,GAAOE,CAAQ,CAAC,GAGtC,gBAAAY;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,OAAAL;AAAA,MACA,IAAI,YAAYV,CAAK,IAAII,CAAG;AAAA,MAC5B,aAAW,YAAYJ,CAAK;AAAA,MAC5B,MAAK;AAAA,MACL,eAAa,CAACQ;AAAA,MACd,mBAAiB,OAAOR,CAAK,IAAII,CAAG;AAAA,MACpC,UAAUI,IAAW,IAAI;AAAA,MACzB,WAAWQ,EAAWf,GAAW,+CAA+C;AAAA,QAC9E,OAAO,CAACO;AAAA,QACR,OAAOA;AAAA,MAAA,CACR;AAAA,MAEA,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\n\nimport { useActiveTab, useTabsUid } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: Props['value'] }) => void;\n}\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, value, onSelect]);\n\n  return (\n    <div\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role=\"tabpanel\"\n      aria-hidden={!isActive}\n      aria-labelledby={`Tab_${value}_${uid}`}\n      tabIndex={isActive ? 0 : -1}\n      className={classnames(\n        className,\n        'relative col-start-1 row-start-1 transition-opacity duration-500',\n        {\n          'pointer-events-none z-0 h-0 opacity-0': !isActive,\n          'pointer-events-auto z-1 h-auto opacity-100': isActive,\n        },\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TabPanel","value","className","onSelect","children","uid","useTabsUid","mounted","useRef","isActive","useActiveTab","useEffect","jsx","classnames"],"mappings":";;;;;AAoBO,MAAMA,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAA,GACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,EAAA,MACaT;AAEjC,SAAAU,EAAU,MAAM;AACd,QAAI,CAACJ,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAIE,KACFN,IAAW,EAAE,OAAAF,GAAO;AAAA,EAExB,GAAG,CAACQ,GAAUR,GAAOE,CAAQ,CAAC,GAG5B,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,YAAYX,CAAK,IAAII,CAAG;AAAA,MAC5B,aAAW,YAAYJ,CAAK;AAAA,MAC5B,MAAK;AAAA,MACL,eAAa,CAACQ;AAAA,MACd,mBAAiB,OAAOR,CAAK,IAAII,CAAG;AAAA,MACpC,UAAUI,IAAW,IAAI;AAAA,MACzB,WAAWI;AAAA,QACTX;AAAA,QACA;AAAA,QACA;AAAA,UACE,yCAAyC,CAACO;AAAA,UAC1C,8CAA8CA;AAAA,QAAA;AAAA,MAChD;AAAA,MAGD,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Tabs/context/TabControl.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as f } from "react/jsx-runtime";
-import { createContext as p, useId as x, useReducer as y, useCallback as u } from "react";
-function v(e) {
+import { createContext as p, useId as v, useReducer as y, useCallback as u } from "react";
+function x(e) {
   const n = [...e.refs.keys()], o = (n.findIndex((t) => t === e.value) + 1) % n.length;
   return { ...e, value: n[o] };
 }
@@ -33,6 +33,7 @@ function b(e, n) {
 function h(e, n) {
   return {
     ...e,
+    ...e.value === -1 && { value: n.payload.value },
     refs: new Map(e.refs).set(n.payload.value, n.payload.ref)
   };
 }
@@ -40,7 +41,7 @@ function w(e, n) {
   return { ...e, value: n.payload };
 }
 const i = {
-  next: v,
+  next: x,
   previous: g,
   start: C,
   end: k,
@@ -70,13 +71,17 @@ const d = p({
   }
 });
 d.displayName = "TabControlContext";
-function P({ selected: e = 0, children: n }) {
-  const r = x(), [o, t] = y(I, { uid: r, value: e, refs: /* @__PURE__ */ new Map() }), a = u((s, c) => {
+function P({ selected: e, children: n }) {
+  const r = v(), [o, t] = y(I, {
+    uid: r,
+    value: e || -1,
+    refs: /* @__PURE__ */ new Map()
+  }), l = u((s, c) => {
     t({ type: "register", payload: { value: s, ref: c } });
-  }, []), l = u((s) => {
+  }, []), a = u((s) => {
     t({ type: "unregister", payload: { value: s } });
   }, []);
-  return /* @__PURE__ */ f(d.Provider, { value: { ...o, dispatch: t, register: a, unregister: l }, children: n });
+  return /* @__PURE__ */ f(d.Provider, { value: { ...o, dispatch: t, register: l, unregister: a }, children: n });
 }
 export {
   d as TabControlContext,

package/molecules/Tabs/context/TabControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabControl.js","sources":["../../../../lib/molecules/Tabs/context/TabControl.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type Dispatch,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useReducer,\n} from 'react';\n\ntype RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;\ntype RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;\n\ntype TabsUpdateAction = {\n  type: 'update';\n  payload: number;\n};\n\ntype TabsRegisterAction<T extends HTMLElement = HTMLElement> = {\n  type: 'register';\n  payload: { value: number; ref: RefObject<T> };\n};\n\ntype TabsUnregisterAction = {\n  type: 'unregister';\n  payload: { value: number };\n};\n\ntype TabsAction<T extends HTMLElement = HTMLElement> =\n  | { type: 'start' | 'end' | 'previous' | 'next' }\n  | TabsUpdateAction\n  | TabsRegisterAction<T>\n  | TabsUnregisterAction;\n\ninterface TabsState<T extends HTMLElement = HTMLElement> {\n  uid: string;\n  value: number;\n  refs: RefTabs<T>;\n}\n\ninterface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {\n  uid: string;\n  value: number;\n  refs: RefTabs<T>;\n  dispatch: Dispatch<TabsAction>;\n  register: (value: number, ref: RefTab<T>) => void;\n  unregister: (value: number) => void;\n}\n\nfunction next(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const index = keys.findIndex((value) => value === state.value);\n  const nextIndex = (index + 1) % keys.length;\n\n  return { ...state, value: keys[nextIndex] };\n}\n\nfunction previous(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const index = keys.findIndex((value) => value === state.value);\n  const previousIndex = (index - 1 + keys.length) % keys.length;\n\n  return { ...state, value: keys[previousIndex] };\n}\n\nfunction start(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const firstIndex = keys[0];\n\n  return {\n    ...state,\n    value: firstIndex,\n  };\n}\n\nfunction end(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const lastIndex = keys[keys.length - 1];\n\n  return {\n    ...state,\n    value: lastIndex,\n  };\n}\n\nfunction unregister(state: TabsState, action: TabsUnregisterAction) {\n  const deletedRefs = new Map(state.refs);\n  deletedRefs.delete(action.payload.value);\n\n  return {\n    ...state,\n    refs: deletedRefs,\n  };\n}\n\nfunction register(state: TabsState, action: TabsRegisterAction) {\n  return {\n    ...state,\n    refs: new Map(state.refs).set(action.payload.value, action.payload.ref),\n  };\n}\n\nfunction update(state: TabsState, action: TabsUpdateAction) {\n  return { ...state, value: action.payload };\n}\n\nconst actions = {\n  next,\n  previous,\n  start,\n  end,\n  register,\n  unregister,\n  update,\n} as const;\n\nfunction tabsReducer(state: TabsState, action: TabsAction): TabsState {\n  if (action.type in actions) {\n    const actionFunction = actions[action.type] as (\n      state: TabsState,\n      action: TabsAction,\n    ) => TabsState;\n\n    return actionFunction(state, action);\n  }\n\n  return state;\n}\n\nexport const TabControlContext = createContext<TabControl>({\n  uid: '',\n  value: 0,\n  refs: new Map(),\n  dispatch: () => {\n    console.warn('Tab Controller Context dispatch used outside of Provider');\n  },\n  register: () => {\n    console.warn('Tab Controller Context register used outside of Provider');\n  },\n  unregister: () => {\n    console.warn('Tab Controller Context unregister used outside of Provider');\n  },\n});\n\nTabControlContext.displayName = 'TabControlContext';\n\nexport interface TabsProviderProps {\n  selected?: number;\n  /**\n   * The selected tab value\n   * @deprecated Min props as no effect on the Tabs component and will be removed in future versions\n   */\n  min?: number;\n\n  /**\n   * The selected tab value\n   * @deprecated Max props as no effect on the Tabs component and will be removed in future versions\n   */\n  max?: number;\n}\n\nexport function TabsProvider({ selected = 0, children }: PropsWithChildren<TabsProviderProps>) {\n  const uid = useId();\n  const [state, dispatch] = useReducer(tabsReducer, { uid, value: selected, refs: new Map() });\n\n  const register = useCallback(<T extends HTMLElement>(value: number, ref: RefTab<T>) => {\n    dispatch({ type: 'register', payload: { value, ref } });\n  }, []);\n\n  const unregister = useCallback((value: number) => {\n    dispatch({ type: 'unregister', payload: { value } });\n  }, []);\n\n  return (\n    <TabControlContext.Provider value={{ ...state, dispatch, register, unregister }}>\n      {children}\n    </TabControlContext.Provider>\n  );\n}\n"],"names":["next","state","keys","nextIndex","value","previous","previousIndex","start","firstIndex","end","lastIndex","unregister","action","deletedRefs","register","update","actions","tabsReducer","actionFunction","TabControlContext","createContext","TabsProvider","selected","children","uid","useId","dispatch","useReducer","useCallback","ref","jsx"],"mappings":"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"}
+{"version":3,"file":"TabControl.js","sources":["../../../../lib/molecules/Tabs/context/TabControl.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type Dispatch,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useReducer,\n} from 'react';\n\ntype RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;\ntype RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;\n\ntype TabsUpdateAction = {\n  type: 'update';\n  payload: number;\n};\n\ntype TabsRegisterAction<T extends HTMLElement = HTMLElement> = {\n  type: 'register';\n  payload: { value: number; ref: RefObject<T> };\n};\n\ntype TabsUnregisterAction = {\n  type: 'unregister';\n  payload: { value: number };\n};\n\ntype TabsAction<T extends HTMLElement = HTMLElement> =\n  | { type: 'start' | 'end' | 'previous' | 'next' }\n  | TabsUpdateAction\n  | TabsRegisterAction<T>\n  | TabsUnregisterAction;\n\ninterface TabsState<T extends HTMLElement = HTMLElement> {\n  uid: string;\n  value: number;\n  refs: RefTabs<T>;\n}\n\ninterface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {\n  uid: string;\n  value: number;\n  refs: RefTabs<T>;\n  dispatch: Dispatch<TabsAction>;\n  register: (value: number, ref: RefTab<T>) => void;\n  unregister: (value: number) => void;\n}\n\nfunction next(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const index = keys.findIndex((value) => value === state.value);\n  const nextIndex = (index + 1) % keys.length;\n\n  return { ...state, value: keys[nextIndex] };\n}\n\nfunction previous(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const index = keys.findIndex((value) => value === state.value);\n  const previousIndex = (index - 1 + keys.length) % keys.length;\n\n  return { ...state, value: keys[previousIndex] };\n}\n\nfunction start(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const firstIndex = keys[0];\n\n  return {\n    ...state,\n    value: firstIndex,\n  };\n}\n\nfunction end(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const lastIndex = keys[keys.length - 1];\n\n  return {\n    ...state,\n    value: lastIndex,\n  };\n}\n\nfunction unregister(state: TabsState, action: TabsUnregisterAction) {\n  const deletedRefs = new Map(state.refs);\n  deletedRefs.delete(action.payload.value);\n\n  return {\n    ...state,\n    refs: deletedRefs,\n  };\n}\n\nfunction register(state: TabsState, action: TabsRegisterAction) {\n  return {\n    ...state,\n    ...(state.value === -1 && { value: action.payload.value }),\n    refs: new Map(state.refs).set(action.payload.value, action.payload.ref),\n  };\n}\n\nfunction update(state: TabsState, action: TabsUpdateAction) {\n  return { ...state, value: action.payload };\n}\n\nconst actions = {\n  next,\n  previous,\n  start,\n  end,\n  register,\n  unregister,\n  update,\n} as const;\n\nfunction tabsReducer(state: TabsState, action: TabsAction): TabsState {\n  if (action.type in actions) {\n    const actionFunction = actions[action.type] as (\n      state: TabsState,\n      action: TabsAction,\n    ) => TabsState;\n\n    return actionFunction(state, action);\n  }\n\n  return state;\n}\n\nexport const TabControlContext = createContext<TabControl>({\n  uid: '',\n  value: 0,\n  refs: new Map(),\n  dispatch: () => {\n    console.warn('Tab Controller Context dispatch used outside of Provider');\n  },\n  register: () => {\n    console.warn('Tab Controller Context register used outside of Provider');\n  },\n  unregister: () => {\n    console.warn('Tab Controller Context unregister used outside of Provider');\n  },\n});\n\nTabControlContext.displayName = 'TabControlContext';\n\nexport interface TabsProviderProps {\n  selected?: number;\n  /**\n   * The selected tab value\n   * @deprecated Min props as no effect on the Tabs component and will be removed in future versions\n   */\n  min?: number;\n\n  /**\n   * The selected tab value\n   * @deprecated Max props as no effect on the Tabs component and will be removed in future versions\n   */\n  max?: number;\n}\n\nexport function TabsProvider({ selected, children }: PropsWithChildren<TabsProviderProps>) {\n  const uid = useId();\n  const [state, dispatch] = useReducer(tabsReducer, {\n    uid,\n    value: selected || -1,\n    refs: new Map(),\n  });\n\n  const register = useCallback(<T extends HTMLElement>(value: number, ref: RefTab<T>) => {\n    dispatch({ type: 'register', payload: { value, ref } });\n  }, []);\n\n  const unregister = useCallback((value: number) => {\n    dispatch({ type: 'unregister', payload: { value } });\n  }, []);\n\n  return (\n    <TabControlContext.Provider value={{ ...state, dispatch, register, unregister }}>\n      {children}\n    </TabControlContext.Provider>\n  );\n}\n"],"names":["next","state","keys","nextIndex","value","previous","previousIndex","start","firstIndex","end","lastIndex","unregister","action","deletedRefs","register","update","actions","tabsReducer","actionFunction","TabControlContext","createContext","TabsProvider","selected","children","uid","useId","dispatch","useReducer","useCallback","ref","jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.1-beta.1",
+  "version": "1.4.0-beta.1",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -102,14 +102,18 @@
     "dev": "storybook dev -p 6006",
     "build": "vite build && npm run build:exports",
     "build:storybook": "storybook build",
+    "build-storybook": "storybook build",
+    "build:check": "tsc -b",
     "lint": "eslint . --report-unused-disable-directives",
     "lint:fix": "eslint . --fix",
     "prettier:write": "prettier . --write --ignore-unknown",
     "test": "vitest run",
     "test:dev": "vitest watch",
     "test:update": "vitest -u",
+    "update": "npx update-browserslist-db@latest",
     "prepare": "husky",
-    "build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm tools/exports-builder/index.ts"
+    "build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm tools/exports-builder/index.ts",
+    "chromatic": "chromatic"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
@@ -123,32 +127,33 @@
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
     "@clubmed/trident-icons": ">=1.3.3",
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
     "@netsells/storybook-mockdate": "0.3.3",
-    "@react-spring/web": "^9.7.3",
-    "@storybook/addon-a11y": "9.1.1",
-    "@storybook/addon-docs": "9.1.1",
-    "@storybook/addon-links": "9.1.1",
-    "@storybook/addon-onboarding": "9.1.1",
-    "@storybook/addon-themes": "9.1.1",
-    "@storybook/addon-vitest": "^9.1.1",
-    "@storybook/react-vite": "9.1.1",
+    "@storybook/addon-a11y": "9.1.7",
+    "@storybook/addon-docs": "9.1.7",
+    "@storybook/addon-links": "9.1.7",
+    "@storybook/addon-onboarding": "9.1.7",
+    "@storybook/addon-themes": "9.1.7",
+    "@storybook/addon-vitest": "9.1.7",
+    "@storybook/react-vite": "9.1.7",
     "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/fs-extra": "^11.0.4",
-    "@types/picomatch": "^2.3.3",
     "@types/lodash": "^4.17.20",
+    "@types/picomatch": "^2.3.3",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "8.45.0",
+    "@typescript-eslint/parser": "8.45.0",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
+    "chromatic": "^13.2.1",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "change-case": "^5.4.3",
@@ -158,7 +163,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^9.1.1",
+    "eslint-plugin-storybook": "9.1.7",
     "figures": "^6.1.0",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.1",
@@ -174,7 +179,7 @@
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "rollup-preserve-directives": "^1.1.1",
-    "storybook": "9.1.1",
+    "storybook": "9.1.7",
     "svgtofont": "^4.2.0",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.2",
@@ -188,7 +193,6 @@
   },
   "peerDependencies": {
     "@clubmed/trident-icons": ">=1.3.3",
-    "@react-spring/web": ">=9",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
     "tailwindcss": ">=3.3.5"
@@ -205,9 +209,6 @@
     },
     "tailwindcss": {
       "optional": false
-    },
-    "@react-spring/web": {
-      "optional": false
     }
   },
   "sideEffects": [

package/tailwind/tailwind.preset.d.ts

@@ -166,6 +166,12 @@ export declare const tailwindPreset: {
             tick: string;
             tock: string;
             boop: string;
+            backdropFadeIn: string;
+            backdropFadeOut: string;
+            backdropSweepIn: string;
+            backdropSweepOut: string;
+            zoomIn: string;
+            zoomOut: string;
         };
         animationDelay: {
             300: string;
@@ -367,6 +373,70 @@ export declare const tailwindPreset: {
                     transform: string;
                 };
             };
+            backdropFadeIn: {
+                '0%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                };
+                '100%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                };
+            };
+            backdropFadeOut: {
+                '0%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                };
+                '100%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                };
+            };
+            backdropSweepIn: {
+                '0%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                    transform: string;
+                };
+                '100%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                    transform: string;
+                };
+            };
+            backdropSweepOut: {
+                '0%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                    transform: string;
+                };
+                '100%': {
+                    'backdrop-filter': string;
+                    opacity: string;
+                    transform: string;
+                };
+            };
+            zoomIn: {
+                '0%': {
+                    transform: string;
+                    opacity: string;
+                };
+                '100%': {
+                    transform: string;
+                    opacity: string;
+                };
+            };
+            zoomOut: {
+                '0%': {
+                    transform: string;
+                    opacity: string;
+                };
+                '100%': {
+                    transform: string;
+                    opacity: string;
+                };
+            };
         };
         aspectRatio: {
             auto: string;

package/tailwind/tailwind.preset.js

@@ -3,8 +3,8 @@ import { hocus as a } from "./plugins/hocus.js";
 import { lineClampSafariFix as n } from "./plugins/lineClampFix.js";
 import { popover as i } from "./plugins/popover.js";
 import { startingStyle as s } from "./plugins/startingStyle.js";
-import { transitionBehavior as m } from "./plugins/transitionBehavior.js";
-import { COLORS as p } from "./colors.js";
+import { transitionBehavior as p } from "./plugins/transitionBehavior.js";
+import { COLORS as m } from "./colors.js";
 const l = {
   fit: "fit-content",
   min: "min-content",
@@ -50,7 +50,7 @@ const l = {
     a,
     o,
     i,
-    m,
+    p,
     s
   ],
   corePlugins: {
@@ -82,7 +82,7 @@ const l = {
         380: "380px"
       }
     },
-    colors: p,
+    colors: m,
     screens: {
       sm: "40rem",
       // '640px',
@@ -170,7 +170,13 @@ const l = {
       slideUp: "slideUp 0.5s ease-out",
       tick: "tick 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards",
       tock: "tock 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards",
-      boop: "boop 230ms cubic-bezier(.76,.24,.65,.85) normal both"
+      boop: "boop 230ms cubic-bezier(.76,.24,.65,.85) normal both",
+      backdropFadeIn: "backdropFadeIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards",
+      backdropFadeOut: "backdropFadeOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards",
+      backdropSweepIn: "backdropSweepIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards",
+      backdropSweepOut: "backdropSweepOut 260ms cubic-bezier(0.4, 0, 1, 1) forwards",
+      zoomIn: "zoomIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards",
+      zoomOut: "zoomOut 180ms cubic-bezier(0.4, 0, 1, 1) forwards"
     },
     animationDelay: {
       300: "300ms",
@@ -364,6 +370,70 @@ const l = {
         "100%": {
           transform: "translateX(101%)"
         }
+      },
+      backdropFadeIn: {
+        "0%": {
+          "backdrop-filter": "blur(0px)",
+          opacity: "0"
+        },
+        "100%": {
+          "backdrop-filter": "blur(10px)",
+          opacity: "0.8"
+        }
+      },
+      backdropFadeOut: {
+        "0%": {
+          "backdrop-filter": "blur(10px)",
+          opacity: "0.8"
+        },
+        "100%": {
+          "backdrop-filter": "blur(0px)",
+          opacity: "0"
+        }
+      },
+      backdropSweepIn: {
+        "0%": {
+          "backdrop-filter": "blur(0px)",
+          opacity: "0",
+          transform: "translateX(-100%)"
+        },
+        "100%": {
+          "backdrop-filter": "blur(10px)",
+          opacity: "0.8",
+          transform: "translateX(0%)"
+        }
+      },
+      backdropSweepOut: {
+        "0%": {
+          "backdrop-filter": "blur(10px)",
+          opacity: "0.8",
+          transform: "translateX(0%)"
+        },
+        "100%": {
+          "backdrop-filter": "blur(0px)",
+          opacity: "0",
+          transform: "translateX(100%)"
+        }
+      },
+      zoomIn: {
+        "0%": {
+          transform: "scale(0.3)",
+          opacity: "0.3"
+        },
+        "100%": {
+          transform: "scale(1)",
+          opacity: "1"
+        }
+      },
+      zoomOut: {
+        "0%": {
+          transform: "scale(1)",
+          opacity: "1"
+        },
+        "100%": {
+          transform: "scale(0.9)",
+          opacity: "0"
+        }
       }
     },
     aspectRatio: {