@lifi/widget 4.0.0-beta.8 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACtD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,CAAC;IACV,CAAC,IAAI,aAAa,CAAC,UAAU,EAAE,CAAC,EAAE;QAChC,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAC3B,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ;QACvD,CAAC,KAAK,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;YAC9B,SAAS,EAAE,kBAAkB;YAC7B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;YACtC,CAAC,QAAQ,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;gBAC/B,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;gBAChD,OAAO,EAAE,CAAC;gBACV,MAAM,EAAE,CAAC;aACV;YACD,CAAC,KAAK,aAAa,CAAC,QAAQ,OAAO,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;gBACzD,OAAO,EAAE,GAAG;aACb;SACF;QACD,CAAC,uBAAuB,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;YAC9C,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;YACtC,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;SAC7C;QACD,CAAC,KAAK,aAAa,CAAC,QAAQ,KAAK,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;YACvD,KAAK,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;SACvE;QACD,CAAC,KAAK,aAAa,CAAC,QAAQ,OAAO,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;YACzD,OAAO,EAAE,GAAG;YACZ,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;gBAC3B,OAAO,EAAE,GAAG;aACb,CAAC;SACH;KACF;IACD,CAAC,IAAI,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;QAC3B,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,CAAC,IAAI,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE;QAC3B,YAAY,EAAE,EAAE,GAAG,CAAC;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,kBAAkB,CAAC,EAAE;YACzD,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ;SAC9C,CAAC;QACF,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;KACjF;CACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Switch.js","names":["Switch","MuiSwitch"],"sources":["../../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as MuiSwitch, styled, switchClasses } from '@mui/material'\nimport type React from 'react'\n\nexport const Switch: React.FC<React.ComponentProps<typeof MuiSwitch>> = styled(\n  MuiSwitch\n)(({ theme }) => ({\n  width: 42,\n  height: 24,\n  padding: 0,\n  [`.${switchClasses.switchBase}`]: {\n    padding: 0,\n    margin: theme.spacing(0.25),\n    transitionDuration: theme.transitions.duration.standard,\n    [`&.${switchClasses.checked}`]: {\n      transform: 'translateX(18px)',\n      color: theme.vars.palette.common.white,\n      [`& + .${switchClasses.track}`]: {\n        backgroundColor: theme.vars.palette.primary.main,\n        opacity: 1,\n        border: 0,\n      },\n      [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n        opacity: 0.5,\n      },\n    },\n    [`&.Mui-focusVisible .${switchClasses.thumb}`]: {\n      color: theme.vars.palette.primary.main,\n      border: '6px solid',\n      borderColor: theme.vars.palette.common.white,\n    },\n    [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {\n      color: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 12%, transparent)`,\n    },\n    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {\n      opacity: 0.7,\n      ...theme.applyStyles('dark', {\n        opacity: 0.3,\n      }),\n    },\n  },\n  [`.${switchClasses.thumb}`]: {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  [`.${switchClasses.track}`]: {\n    borderRadius: 24 / 2,\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 16%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAaA,WAA2D,OACtEC,MACF,GAAG,EAAE,aAAa;CAChB,OAAO;CACP,QAAQ;CACR,SAAS;EACR,IAAI,cAAc,eAAe;EAChC,SAAS;EACT,QAAQ,MAAM,QAAQ,GAAI;EAC1B,oBAAoB,MAAM,YAAY,SAAS;GAC9C,KAAK,cAAc,YAAY;GAC9B,WAAW;GACX,OAAO,MAAM,KAAK,QAAQ,OAAO;IAChC,QAAQ,cAAc,UAAU;IAC/B,iBAAiB,MAAM,KAAK,QAAQ,QAAQ;IAC5C,SAAS;IACT,QAAQ;GACV;IACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU,EACzD,SAAS,GACX;EACF;GACC,uBAAuB,cAAc,UAAU;GAC9C,OAAO,MAAM,KAAK,QAAQ,QAAQ;GAClC,QAAQ;GACR,aAAa,MAAM,KAAK,QAAQ,OAAO;EACzC;GACC,KAAK,cAAc,SAAS,IAAI,cAAc,UAAU,EACvD,OAAO,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBACtE;GACC,KAAK,cAAc,SAAS,MAAM,cAAc,UAAU;GACzD,SAAS;GACT,GAAG,MAAM,YAAY,QAAQ,EAC3B,SAAS,GACX,CAAC;EACH;CACF;EACC,IAAI,cAAc,UAAU;EAC3B,WAAW;EACX,OAAO;EACP,QAAQ;CACV;EACC,IAAI,cAAc,UAAU;EAC3B,cAAc,KAAK;EACnB,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,kBAAkB,GAAG,EACzD,UAAU,MAAM,YAAY,SAAS,SACvC,CAAC;EACD,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;CAChF;AACF,EAAE"}

package/dist/esm/components/Tabs/NavigationTabs.js

@@ -1,39 +1,39 @@
-import { styled, Tabs, tabsClasses } from '@mui/material';
-import { Tab } from './Tabs.style.js';
-export const NavigationTabs = styled(Tabs, {
-    name: 'MuiNavigationTabs',
-    slot: 'root',
+import { Tab as Tab$1 } from "./Tabs.style.js";
+import { Tabs, styled, tabsClasses } from "@mui/material";
+//#region src/components/Tabs/NavigationTabs.tsx
+const NavigationTabs = styled(Tabs, {
+	name: "MuiNavigationTabs",
+	slot: "root"
 })(({ theme }) => ({
-    overflow: 'visible', // Prevent shadows from being cut off
-    width: 'fit-content',
-    minHeight: theme.spacing(5),
-    maxHeight: theme.spacing(5),
-    background: 'transparent',
-    ...theme.applyStyles('dark', {
-        backgroundColor: 'transparent',
-    }),
-    [`& .${tabsClasses.scroller}`]: {
-        padding: 0,
-        overflow: 'visible !important', // Enforce since overflow is set dynamically
-    },
-    [`& .${tabsClasses.indicator}`]: {
-        boxShadow: 'none',
-        top: 0,
-        left: 0,
-        height: '100%',
-        width: '100%',
-        borderRadius: theme.vars.shape.borderRadius,
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-        ...theme.applyStyles('dark', {
-            backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-        }),
-    },
+	overflow: "visible",
+	width: "fit-content",
+	minHeight: theme.spacing(5),
+	maxHeight: theme.spacing(5),
+	background: "transparent",
+	...theme.applyStyles("dark", { backgroundColor: "transparent" }),
+	[`& .${tabsClasses.scroller}`]: {
+		padding: 0,
+		overflow: "visible !important"
+	},
+	[`& .${tabsClasses.indicator}`]: {
+		boxShadow: "none",
+		top: 0,
+		left: 0,
+		height: "100%",
+		width: "100%",
+		borderRadius: theme.vars.shape.borderRadius,
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+		...theme.applyStyles("dark", { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)` })
+	}
 }));
-export const NavigationTab = styled(Tab, {
-    name: 'MuiNavigationTab',
-    slot: 'root',
+const NavigationTab = styled(Tab$1, {
+	name: "MuiNavigationTab",
+	slot: "root"
 })(({ theme }) => ({
-    minHeight: theme.spacing(5),
-    maxHeight: theme.spacing(5),
+	minHeight: theme.spacing(5),
+	maxHeight: theme.spacing(5)
 }));
+//#endregion
+export { NavigationTab, NavigationTabs };
+
 //# sourceMappingURL=NavigationTabs.js.map

package/dist/esm/components/Tabs/NavigationTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationTabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/NavigationTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAErC,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,EAAE;IACzC,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjB,QAAQ,EAAE,SAAS,EAAE,qCAAqC;IAC1D,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3B,UAAU,EAAE,aAAa;IACzB,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;QAC3B,eAAe,EAAE,aAAa;KAC/B,CAAC;IACF,CAAC,MAAM,WAAW,CAAC,QAAQ,EAAE,CAAC,EAAE;QAC9B,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,oBAAoB,EAAE,4CAA4C;KAC7E;IACD,CAAC,MAAM,WAAW,CAAC,SAAS,EAAE,CAAC,EAAE;QAC/B,SAAS,EAAE,MAAM;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;QAC3C,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;QAChF,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;YAC3B,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;SACjF,CAAC;KACH;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;IACvC,IAAI,EAAE,kBAAkB;IACxB,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjB,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC5B,CAAC,CAAC,CAAA"}
+{"version":3,"file":"NavigationTabs.js","names":["Tab"],"sources":["../../../../src/components/Tabs/NavigationTabs.tsx"],"sourcesContent":["import { styled, Tabs, tabsClasses } from '@mui/material'\nimport type React from 'react'\nimport { Tab } from './Tabs.style.js'\n\nexport const NavigationTabs: React.FC<React.ComponentProps<typeof Tabs>> =\n  styled(Tabs, {\n    name: 'MuiNavigationTabs',\n    slot: 'root',\n  })(({ theme }) => ({\n    overflow: 'visible', // Prevent shadows from being cut off\n    width: 'fit-content',\n    minHeight: theme.spacing(5),\n    maxHeight: theme.spacing(5),\n    background: 'transparent',\n    ...theme.applyStyles('dark', {\n      backgroundColor: 'transparent',\n    }),\n    [`& .${tabsClasses.scroller}`]: {\n      padding: 0,\n      overflow: 'visible !important', // Enforce since overflow is set dynamically\n    },\n    [`& .${tabsClasses.indicator}`]: {\n      boxShadow: 'none',\n      top: 0,\n      left: 0,\n      height: '100%',\n      width: '100%',\n      borderRadius: theme.vars.shape.borderRadius,\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n      ...theme.applyStyles('dark', {\n        backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n      }),\n    },\n  }))\n\nexport const NavigationTab: React.FC<React.ComponentProps<typeof Tab>> = styled(\n  Tab,\n  {\n    name: 'MuiNavigationTab',\n    slot: 'root',\n  }\n)(({ theme }) => ({\n  minHeight: theme.spacing(5),\n  maxHeight: theme.spacing(5),\n}))\n"],"mappings":";;;AAIA,MAAa,iBACX,OAAO,MAAM;CACX,MAAM;CACN,MAAM;AACR,CAAC,GAAG,EAAE,aAAa;CACjB,UAAU;CACV,OAAO;CACP,WAAW,MAAM,QAAQ,CAAC;CAC1B,WAAW,MAAM,QAAQ,CAAC;CAC1B,YAAY;CACZ,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,cACnB,CAAC;EACA,MAAM,YAAY,aAAa;EAC9B,SAAS;EACT,UAAU;CACZ;EACC,MAAM,YAAY,cAAc;EAC/B,WAAW;EACX,KAAK;EACL,MAAM;EACN,QAAQ;EACR,OAAO;EACP,cAAc,MAAM,KAAK,MAAM;EAC/B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC9E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF,CAAC;CACH;AACF,EAAE;AAEJ,MAAa,gBAA4D,OACvEA,OACA;CACE,MAAM;CACN,MAAM;AACR,CACF,GAAG,EAAE,aAAa;CAChB,WAAW,MAAM,QAAQ,CAAC;CAC1B,WAAW,MAAM,QAAQ,CAAC;AAC5B,EAAE"}

package/dist/esm/components/Tabs/Tabs.style.js

@@ -1,37 +1,31 @@
-import { Tab as MuiTab, Tabs as MuiTabs, styled, tabClasses, tabsClasses, } from '@mui/material';
-const Tabs = styled(MuiTabs)(({ theme }) => ({
-    flex: 1,
-    [`.${tabsClasses.indicator}`]: {
-        top: theme.spacing(0.5),
-        left: theme.spacing(0.5),
-        height: `calc(100% - ${theme.spacing(1)})`,
-        width: `calc(100% - ${theme.spacing(1)})`,
-    },
-    [`.${tabsClasses.fixed}`]: {
-        padding: theme.spacing(0.5),
-    },
+import { Tab, Tabs, styled, tabClasses, tabsClasses } from "@mui/material";
+const CardTabs = styled(styled(Tabs)(({ theme }) => ({
+	flex: 1,
+	[`.${tabsClasses.indicator}`]: {
+		top: theme.spacing(.5),
+		left: theme.spacing(.5),
+		height: `calc(100% - ${theme.spacing(1)})`,
+		width: `calc(100% - ${theme.spacing(1)})`
+	},
+	[`.${tabsClasses.fixed}`]: { padding: theme.spacing(.5) }
+})))(({ theme }) => ({
+	backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,
+	[`.${tabsClasses.indicator}`]: { backgroundColor: theme.vars.palette.background.paper },
+	...theme.applyStyles("dark", {
+		backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,
+		[`.${tabsClasses.indicator}`]: { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)` }
+	})
 }));
-export const CardTabs = styled(Tabs)(({ theme }) => ({
-    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
-    [`.${tabsClasses.indicator}`]: {
-        backgroundColor: theme.vars.palette.background.paper,
-    },
-    ...theme.applyStyles('dark', {
-        backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.08)`,
-        [`.${tabsClasses.indicator}`]: {
-            backgroundColor: `rgba(${theme.vars.palette.common.backgroundChannel} / 0.56)`,
-        },
-    }),
-}));
-export const Tab = styled(MuiTab)(({ theme }) => ({
-    zIndex: 1,
-    flex: 1,
-    textTransform: 'none',
-    fontSize: '1rem',
-    fontWeight: 700,
-    color: theme.vars.palette.common.onBackground,
-    [`&.${tabClasses.selected}`]: {
-        color: theme.vars.palette.common.onBackground,
-    },
+const Tab$1 = styled(Tab)(({ theme }) => ({
+	zIndex: 1,
+	flex: 1,
+	textTransform: "none",
+	fontSize: "1rem",
+	fontWeight: 700,
+	color: theme.vars.palette.common.onBackground,
+	[`&.${tabClasses.selected}`]: { color: theme.vars.palette.common.onBackground }
 }));
+//#endregion
+export { CardTabs, Tab$1 as Tab };
+
 //# sourceMappingURL=Tabs.style.js.map

package/dist/esm/components/Tabs/Tabs.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.style.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,GAAG,IAAI,MAAM,EACb,IAAI,IAAI,OAAO,EACf,MAAM,EACN,UAAU,EACV,WAAW,GACZ,MAAM,eAAe,CAAA;AAEtB,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3C,IAAI,EAAE,CAAC;IACP,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC,EAAE;QAC7B,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACxB,MAAM,EAAE,eAAe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAC1C,KAAK,EAAE,eAAe,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;KAC1C;IACD,CAAC,IAAI,WAAW,CAAC,KAAK,EAAE,CAAC,EAAE;QACzB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;KAC5B;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACnD,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;IAChF,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC,EAAE;QAC7B,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;KACrD;IACD,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;QAC3B,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,UAAU;QAChF,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC,EAAE;YAC7B,eAAe,EAAE,QAAQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,iBAAiB,UAAU;SAC/E;KACF,CAAC;CACH,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAW,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1D,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,GAAG;IACf,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY;IAC7C,CAAC,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC,EAAE;QAC5B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY;KAC9C;CACF,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Tabs.style.js","names":["Tabs","MuiTabs","Tab","MuiTab"],"sources":["../../../../src/components/Tabs/Tabs.style.tsx"],"sourcesContent":["import type { TabProps } from '@mui/material'\nimport {\n  Tab as MuiTab,\n  Tabs as MuiTabs,\n  styled,\n  tabClasses,\n  tabsClasses,\n} from '@mui/material'\nimport type React from 'react'\n\nconst Tabs = styled(MuiTabs)(({ theme }) => ({\n  flex: 1,\n  [`.${tabsClasses.indicator}`]: {\n    top: theme.spacing(0.5),\n    left: theme.spacing(0.5),\n    height: `calc(100% - ${theme.spacing(1)})`,\n    width: `calc(100% - ${theme.spacing(1)})`,\n  },\n  [`.${tabsClasses.fixed}`]: {\n    padding: theme.spacing(0.5),\n  },\n}))\n\nexport const CardTabs: React.FC<React.ComponentProps<typeof MuiTabs>> = styled(\n  Tabs\n)(({ theme }) => ({\n  backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  [`.${tabsClasses.indicator}`]: {\n    backgroundColor: theme.vars.palette.background.paper,\n  },\n  ...theme.applyStyles('dark', {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 8%, transparent)`,\n    [`.${tabsClasses.indicator}`]: {\n      backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.background} 56%, transparent)`,\n    },\n  }),\n}))\n\nexport const Tab: React.FC<React.ComponentProps<typeof MuiTab>> = styled(\n  MuiTab\n)<TabProps>(({ theme }) => ({\n  zIndex: 1,\n  flex: 1,\n  textTransform: 'none',\n  fontSize: '1rem',\n  fontWeight: 700,\n  color: theme.vars.palette.common.onBackground,\n  [`&.${tabClasses.selected}`]: {\n    color: theme.vars.palette.common.onBackground,\n  },\n}))\n"],"mappings":";AAuBA,MAAa,WAA2D,OAb3D,OAAOC,IAAO,GAAG,EAAE,aAAa;CAC3C,MAAM;EACL,IAAI,YAAY,cAAc;EAC7B,KAAK,MAAM,QAAQ,EAAG;EACtB,MAAM,MAAM,QAAQ,EAAG;EACvB,QAAQ,eAAe,MAAM,QAAQ,CAAC,EAAE;EACxC,OAAO,eAAe,MAAM,QAAQ,CAAC,EAAE;CACzC;EACC,IAAI,YAAY,UAAU,EACzB,SAAS,MAAM,QAAQ,EAAG,EAC5B;AACF,EAGED,CACF,GAAG,EAAE,aAAa;CAChB,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;EAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,MAAM,KAAK,QAAQ,WAAW,MACjD;CACA,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa;GAC7E,IAAI,YAAY,cAAc,EAC7B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,WAAW,oBAC9E;CACF,CAAC;AACH,EAAE;AAEF,MAAaE,QAAqD,OAChEC,GACF,GAAa,EAAE,aAAa;CAC1B,QAAQ;CACR,MAAM;CACN,eAAe;CACf,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,OAAO;EAChC,KAAK,WAAW,aAAa,EAC5B,OAAO,MAAM,KAAK,QAAQ,OAAO,aACnC;AACF,EAAE"}

package/dist/esm/components/TextFitter/TextFitter.js

@@ -1,56 +1,62 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInView } from "react-intersection-observer";
+//#region src/components/TextFitter/TextFitter.tsx
 const initialState = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
 };
-export const TextFitter = ({ children, width = '100%', height, preserveAspectRatio = 'xMinYMid meet', textStyle, svgStyle, cropTop, cropBottom, onFit, }) => {
-    const theme = useTheme();
-    const textRef = useRef(null);
-    const [viewBox, setViewBox] = useState(initialState);
-    const [ref] = useInView({
-        onChange(inView) {
-            if (inView) {
-                calculateBox();
-            }
-        },
-    });
-    const calculateBox = useCallback(() => {
-        if (!textRef.current) {
-            return;
-        }
-        const box = textRef.current.getBBox();
-        if (cropTop) {
-            box.y += box.height * cropTop;
-            box.height -= box.height * cropTop;
-        }
-        if (cropBottom) {
-            box.height -= box.height * cropBottom;
-        }
-        setViewBox(box);
-        onFit?.();
-    }, [cropBottom, cropTop, onFit]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes
-    useLayoutEffect(() => {
-        calculateBox();
-    }, [calculateBox, children]);
-    useLayoutEffect(() => {
-        if (document.fonts) {
-            document.fonts.ready.then(() => {
-                calculateBox();
-            });
-        }
-    }, [calculateBox]);
-    return (_jsxs("svg", { style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
-        // height={
-        //   textRect.height && maxHeight && textRect.height >= maxHeight
-        //     ? maxHeight
-        //     : height
-        // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.vars.palette.text.primary, ref: ref, children: [_jsx("title", { children: children }), _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children })] }));
+const TextFitter = ({ children, width = "100%", height, preserveAspectRatio = "xMinYMid meet", textStyle, svgStyle, cropTop, cropBottom, onFit }) => {
+	const theme = useTheme();
+	const textRef = useRef(null);
+	const [viewBox, setViewBox] = useState(initialState);
+	const [ref] = useInView({ onChange(inView) {
+		if (inView) calculateBox();
+	} });
+	const calculateBox = useCallback(() => {
+		if (!textRef.current) return;
+		const box = textRef.current.getBBox();
+		if (cropTop) {
+			box.y += box.height * cropTop;
+			box.height -= box.height * cropTop;
+		}
+		if (cropBottom) box.height -= box.height * cropBottom;
+		setViewBox(box);
+		onFit?.();
+	}, [
+		cropBottom,
+		cropTop,
+		onFit
+	]);
+	useLayoutEffect(() => {
+		calculateBox();
+	}, [calculateBox, children]);
+	useLayoutEffect(() => {
+		if (document.fonts) document.fonts.ready.then(() => {
+			calculateBox();
+		});
+	}, [calculateBox]);
+	return /* @__PURE__ */ jsxs("svg", {
+		style: svgStyle,
+		viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`,
+		width,
+		height,
+		preserveAspectRatio,
+		fill: theme.vars.palette.text.primary,
+		ref,
+		children: [/* @__PURE__ */ jsx("title", { children }), /* @__PURE__ */ jsx("text", {
+			x: 0,
+			y: 0,
+			style: textStyle,
+			ref: textRef,
+			children
+		})]
+	});
 };
+//#endregion
+export { TextFitter };
+
 //# sourceMappingURL=TextFitter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextFitter.js","sourceRoot":"","sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextFitter.js","names":[],"sources":["../../../../src/components/TextFitter/TextFitter.tsx"],"sourcesContent":["import { useTheme } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport type { TextFitterProps } from './types.js'\n\nconst initialState = {\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n}\n\nexport const TextFitter: React.FC<PropsWithChildren<TextFitterProps>> = ({\n  children,\n  width = '100%',\n  height,\n  preserveAspectRatio = 'xMinYMid meet',\n  textStyle,\n  svgStyle,\n  cropTop,\n  cropBottom,\n  onFit,\n}) => {\n  const theme = useTheme()\n  const textRef = useRef<SVGTextElement>(null)\n  const [viewBox, setViewBox] = useState<Partial<DOMRect>>(initialState)\n\n  const [ref] = useInView({\n    onChange(inView) {\n      if (inView) {\n        calculateBox()\n      }\n    },\n  })\n\n  const calculateBox = useCallback(() => {\n    if (!textRef.current) {\n      return\n    }\n    const box = textRef.current.getBBox()\n    if (cropTop) {\n      box.y += box.height * cropTop\n      box.height -= box.height * cropTop\n    }\n    if (cropBottom) {\n      box.height -= box.height * cropBottom\n    }\n    setViewBox(box)\n    onFit?.()\n  }, [cropBottom, cropTop, onFit])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when children changes\n  useLayoutEffect(() => {\n    calculateBox()\n  }, [calculateBox, children])\n\n  useLayoutEffect(() => {\n    if (document.fonts) {\n      document.fonts.ready.then(() => {\n        calculateBox()\n      })\n    }\n  }, [calculateBox])\n\n  return (\n    <svg\n      style={svgStyle}\n      viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}\n      width={width}\n      height={height}\n      // height={\n      //   textRect.height && maxHeight && textRect.height >= maxHeight\n      //     ? maxHeight\n      //     : height\n      // }\n      preserveAspectRatio={preserveAspectRatio}\n      fill={theme.vars.palette.text.primary}\n      ref={ref}\n    >\n      <title>{children}</title>\n      <text x={0} y={0} style={textStyle} ref={textRef}>\n        {children}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,OAAO;CACP,QAAQ;AACV;AAEA,MAAa,cAA4D,EACvE,UACA,QAAQ,QACR,QACA,sBAAsB,iBACtB,WACA,UACA,SACA,YACA,YACI;CACJ,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,SAAS,cAAc,SAA2B,YAAY;CAErE,MAAM,CAAC,OAAO,UAAU,EACtB,SAAS,QAAQ;EACf,IAAI,QACF,aAAa;CAEjB,EACF,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,CAAC,QAAQ,SACX;EAEF,MAAM,MAAM,QAAQ,QAAQ,QAAQ;EACpC,IAAI,SAAS;GACX,IAAI,KAAK,IAAI,SAAS;GACtB,IAAI,UAAU,IAAI,SAAS;EAC7B;EACA,IAAI,YACF,IAAI,UAAU,IAAI,SAAS;EAE7B,WAAW,GAAG;EACd,QAAQ;CACV,GAAG;EAAC;EAAY;EAAS;CAAK,CAAC;CAG/B,sBAAsB;EACpB,aAAa;CACf,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,sBAAsB;EACpB,IAAI,SAAS,OACX,SAAS,MAAM,MAAM,WAAW;GAC9B,aAAa;EACf,CAAC;CAEL,GAAG,CAAC,YAAY,CAAC;CAEjB,OACE,qBAAC,OAAD;EACE,OAAO;EACP,SAAS,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,GAAG,QAAQ,MAAM,GAAG,QAAQ;EACxD;EACC;EAMa;EACrB,MAAM,MAAM,KAAK,QAAQ,KAAK;EACzB;YAZP,CAcE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,GACxB,oBAAC,QAAD;GAAM,GAAG;GAAG,GAAG;GAAG,OAAO;GAAW,KAAK;GACtC;EACG,CAAA,CACH;;AAET"}

package/dist/esm/components/Timer/ExecutionTimerText.js

@@ -0,0 +1,10 @@
+import { useExecutionTimer } from "../../hooks/timer/useExecutionTimer.js";
+//#region src/components/Timer/ExecutionTimerText.tsx
+const ExecutionTimerText = ({ expiryTimestamp }) => {
+	const { formatted } = useExecutionTimer(expiryTimestamp);
+	return formatted;
+};
+//#endregion
+export { ExecutionTimerText };
+
+//# sourceMappingURL=ExecutionTimerText.js.map

package/dist/esm/components/Timer/ExecutionTimerText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExecutionTimerText.js","names":[],"sources":["../../../../src/components/Timer/ExecutionTimerText.tsx"],"sourcesContent":["import { useExecutionTimer } from '../../hooks/timer/useExecutionTimer.js'\n\nexport const ExecutionTimerText = ({\n  expiryTimestamp,\n}: {\n  expiryTimestamp: Date\n}): string | null => {\n  const { formatted } = useExecutionTimer(expiryTimestamp)\n  return formatted\n}\n"],"mappings":";;AAEA,MAAa,sBAAsB,EACjC,sBAGmB;CACnB,MAAM,EAAE,cAAc,kBAAkB,eAAe;CACvD,OAAO;AACT"}

package/dist/esm/components/Timer/StepStatusTimer.js

@@ -0,0 +1,56 @@
+import { CircularProgressPending, ProgressFill, ProgressTrack, RingContainer, StatusCircle, TimerLabel } from "./StepStatusTimer.style.js";
+import { formatTimer, getExpiryTimestamp } from "../../utils/timer.js";
+import { useTimer } from "../../hooks/timer/useTimer.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Timer/StepStatusTimer.tsx
+const TimerRing = ({ step, size = 90, thickness = 2, showLabel = true }) => {
+	const { i18n } = useTranslation();
+	const [isExpired, setExpired] = useState(false);
+	const signedAt = step?.execution?.signedAt;
+	const totalDuration = (step?.estimate.executionDuration ?? 0) * 1e3;
+	const expiryTimestamp = getExpiryTimestamp(step);
+	const { days, hours, minutes, seconds } = useTimer({
+		autoStart: Boolean(signedAt),
+		expiryTimestamp,
+		onExpire: () => setExpired(true)
+	});
+	const hasActiveCountdown = Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds));
+	const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0);
+	const countdownProgress = totalDuration > 0 ? Math.min((totalDuration - remaining) / totalDuration * 100, 100) : 0;
+	return /* @__PURE__ */ jsxs(RingContainer, {
+		sx: {
+			width: size,
+			height: size
+		},
+		children: [
+			/* @__PURE__ */ jsx(ProgressTrack, {
+				variant: "determinate",
+				value: 100,
+				size,
+				thickness
+			}),
+			hasActiveCountdown ? /* @__PURE__ */ jsx(ProgressFill, {
+				variant: "determinate",
+				value: countdownProgress,
+				size,
+				thickness
+			}) : /* @__PURE__ */ jsx(CircularProgressPending, {
+				size,
+				thickness
+			}),
+			showLabel && hasActiveCountdown ? /* @__PURE__ */ jsx(StatusCircle, { children: /* @__PURE__ */ jsx(TimerLabel, { children: formatTimer({
+				locale: i18n.language,
+				days,
+				hours,
+				minutes,
+				seconds
+			}) }) }) : null
+		]
+	});
+};
+//#endregion
+export { TimerRing };
+
+//# sourceMappingURL=StepStatusTimer.js.map

package/dist/esm/components/Timer/StepStatusTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepStatusTimer.js","names":[],"sources":["../../../../src/components/Timer/StepStatusTimer.tsx"],"sourcesContent":["import type { LiFiStepExtended } from '@lifi/sdk'\nimport type React from 'react'\nimport { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTimer } from '../../hooks/timer/useTimer.js'\nimport { formatTimer, getExpiryTimestamp } from '../../utils/timer.js'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\nimport {\n  CircularProgressPending,\n  ProgressFill,\n  ProgressTrack,\n  RingContainer,\n  StatusCircle,\n  TimerLabel,\n} from './StepStatusTimer.style.js'\n\ninterface TimerRingProps {\n  step?: LiFiStepExtended\n  size?: number\n  thickness?: number\n  showLabel?: boolean\n}\n\nexport const TimerRing: React.FC<TimerRingProps> = ({\n  step,\n  size = iconCircleSize,\n  thickness = 2,\n  showLabel = true,\n}) => {\n  const { i18n } = useTranslation()\n  const [isExpired, setExpired] = useState(false)\n\n  const signedAt = step?.execution?.signedAt\n  const totalDuration = (step?.estimate.executionDuration ?? 0) * 1000\n  const expiryTimestamp = getExpiryTimestamp(step)\n\n  const { days, hours, minutes, seconds } = useTimer({\n    autoStart: Boolean(signedAt),\n    expiryTimestamp,\n    onExpire: () => setExpired(true),\n  })\n\n  const hasActiveCountdown =\n    Boolean(signedAt) && !isExpired && (Boolean(minutes) || Boolean(seconds))\n\n  const remaining = Math.max(expiryTimestamp.getTime() - Date.now(), 0)\n  const countdownProgress =\n    totalDuration > 0\n      ? Math.min(((totalDuration - remaining) / totalDuration) * 100, 100)\n      : 0\n\n  return (\n    <RingContainer sx={{ width: size, height: size }}>\n      <ProgressTrack\n        variant=\"determinate\"\n        value={100}\n        size={size}\n        thickness={thickness}\n      />\n      {hasActiveCountdown ? (\n        <ProgressFill\n          variant=\"determinate\"\n          value={countdownProgress}\n          size={size}\n          thickness={thickness}\n        />\n      ) : (\n        <CircularProgressPending size={size} thickness={thickness} />\n      )}\n      {showLabel && hasActiveCountdown ? (\n        <StatusCircle>\n          <TimerLabel>\n            {formatTimer({\n              locale: i18n.language,\n              days,\n              hours,\n              minutes,\n              seconds,\n            })}\n          </TimerLabel>\n        </StatusCircle>\n      ) : null}\n    </RingContainer>\n  )\n}\n"],"mappings":";;;;;;;AAuBA,MAAa,aAAuC,EAClD,MACA,OAAA,IACA,YAAY,GACZ,YAAY,WACR;CACJ,MAAM,EAAE,SAAS,eAAe;CAChC,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,WAAW,MAAM,WAAW;CAClC,MAAM,iBAAiB,MAAM,SAAS,qBAAqB,KAAK;CAChE,MAAM,kBAAkB,mBAAmB,IAAI;CAE/C,MAAM,EAAE,MAAM,OAAO,SAAS,YAAY,SAAS;EACjD,WAAW,QAAQ,QAAQ;EAC3B;EACA,gBAAgB,WAAW,IAAI;CACjC,CAAC;CAED,MAAM,qBACJ,QAAQ,QAAQ,KAAK,CAAC,cAAc,QAAQ,OAAO,KAAK,QAAQ,OAAO;CAEzE,MAAM,YAAY,KAAK,IAAI,gBAAgB,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC;CACpE,MAAM,oBACJ,gBAAgB,IACZ,KAAK,KAAM,gBAAgB,aAAa,gBAAiB,KAAK,GAAG,IACjE;CAEN,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,OAAO;GAAM,QAAQ;EAAK;YAA/C;GACE,oBAAC,eAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA;GACA,qBACC,oBAAC,cAAD;IACE,SAAQ;IACR,OAAO;IACD;IACK;GACZ,CAAA,IAED,oBAAC,yBAAD;IAA+B;IAAiB;GAAY,CAAA;GAE7D,aAAa,qBACZ,oBAAC,cAAD,EAAA,UACE,oBAAC,YAAD,EAAA,UACG,YAAY;IACX,QAAQ,KAAK;IACb;IACA;IACA;IACA;GACF,CAAC,EACS,CAAA,EACA,CAAA,IACZ;EACS;;AAEnB"}

package/dist/esm/components/Timer/StepStatusTimer.style.js

@@ -0,0 +1,67 @@
+import { Box, CircularProgress, Typography, circularProgressClasses, keyframes, styled } from "@mui/material";
+//#region src/components/Timer/StepStatusTimer.style.tsx
+const StatusCircle = styled(Box)({
+	position: "absolute",
+	inset: 0,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+});
+const RingContainer = styled(Box)({
+	position: "relative",
+	width: 90,
+	height: 90
+});
+const ProgressTrack = styled(CircularProgress)(({ theme }) => ({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	color: theme.vars.palette.grey[300],
+	...theme.applyStyles("dark", { color: theme.vars.palette.grey[800] })
+}));
+const ProgressFill = styled(CircularProgress)(({ theme }) => ({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	color: theme.vars.palette.primary.main,
+	...theme.applyStyles("dark", { color: theme.vars.palette.primary.light })
+}));
+const TimerLabel = styled(Typography)({
+	fontSize: 18,
+	fontWeight: 700
+});
+const circleAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`;
+const CircularProgressPending = styled(CircularProgress)`
+  color: ${({ theme }) => theme.vars.palette.primary.main};
+  ${({ theme }) => theme.applyStyles("dark", { color: theme.vars.palette.primary.light })}
+  animation-duration: 3s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  .${circularProgressClasses.circle} {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: round;
+    transform-origin: 100% 100%;
+  }
+`;
+//#endregion
+export { CircularProgressPending, ProgressFill, ProgressTrack, RingContainer, StatusCircle, TimerLabel };
+
+//# sourceMappingURL=StepStatusTimer.style.js.map

package/dist/esm/components/Timer/StepStatusTimer.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepStatusTimer.style.js","names":["MuiCircularProgress"],"sources":["../../../../src/components/Timer/StepStatusTimer.style.tsx"],"sourcesContent":["import {\n  Box,\n  circularProgressClasses,\n  keyframes,\n  CircularProgress as MuiCircularProgress,\n  styled,\n  Typography,\n} from '@mui/material'\nimport type React from 'react'\nimport { iconCircleSize } from '../IconCircle/IconCircle.style.js'\n\nexport const StatusCircle: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n})\n\nexport const RingContainer: React.FC<React.ComponentProps<typeof Box>> = styled(\n  Box\n)({\n  position: 'relative',\n  width: iconCircleSize,\n  height: iconCircleSize,\n})\n\nexport const ProgressTrack: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  color: theme.vars.palette.grey[300],\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.grey[800],\n  }),\n}))\n\nexport const ProgressFill: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)(({ theme }) => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  color: theme.vars.palette.primary.main,\n  ...theme.applyStyles('dark', {\n    color: theme.vars.palette.primary.light,\n  }),\n}))\n\nexport const TimerLabel: React.FC<React.ComponentProps<typeof Typography>> =\n  styled(Typography)({\n    fontSize: 18,\n    fontWeight: 700,\n  })\n\nconst circleAnimation = keyframes`\n  0% {\n    stroke-dashoffset: 129;\n    transform: rotate(0);\n  }\n  50% {\n    stroke-dashoffset: 56;\n    transform: rotate(45deg);\n  };\n  100% {\n    stroke-dashoffset: 129;\n    transform: rotate(360deg);\n  }\n`\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const CircularProgressPending: React.FC<\n  React.ComponentProps<typeof MuiCircularProgress>\n> = styled(MuiCircularProgress)`\n  color: ${({ theme }) => theme.vars.palette.primary.main};\n  ${({ theme }) =>\n    theme.applyStyles('dark', {\n      color: theme.vars.palette.primary.light,\n    })}\n  animation-duration: 3s;\n  position: absolute;\n  top: 0;\n  left: 0;\n  .${circularProgressClasses.circle} {\n    animation-duration: 2s;\n    animation-timing-function: linear;\n    animation-name: ${circleAnimation};\n    stroke-dasharray: 129;\n    stroke-dashoffset: 129;\n    stroke-linecap: round;\n    transform-origin: 100% 100%;\n  }\n`\n"],"mappings":";;AAWA,MAAa,eAA2D,OACtE,GACF,EAAE;CACA,UAAU;CACV,OAAO;CACP,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,CAAC;AAED,MAAa,gBAA4D,OACvE,GACF,EAAE;CACA,UAAU;CACV,OAAA;CACA,QAAA;AACF,CAAC;AAED,MAAa,gBAET,OAAOA,gBAAmB,GAAG,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;AACH,EAAE;AAEF,MAAa,eAET,OAAOA,gBAAmB,GAAG,EAAE,aAAa;CAC9C,UAAU;CACV,KAAK;CACL,MAAM;CACN,OAAO,MAAM,KAAK,QAAQ,QAAQ;CAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;AACH,EAAE;AAEF,MAAa,aACX,OAAO,UAAU,EAAE;CACjB,UAAU;CACV,YAAY;AACd,CAAC;AAEH,MAAM,kBAAkB,SAAS;;;;;;;;;;;;;;AAiBjC,MAAa,0BAET,OAAOA,gBAAmB,CAAC;YACnB,EAAE,YAAY,MAAM,KAAK,QAAQ,QAAQ,KAAK;KACrD,EAAE,YACH,MAAM,YAAY,QAAQ,EACxB,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC,EAAE;;;;;KAKF,wBAAwB,OAAO;;;sBAGd,gBAAgB"}