@basic-ui/material 0.1.16 → 1.0.0-alpha.10

package/build/esm/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/color.ts"],"names":["get","parseToRgb","DARK_THEME_CLASS","alpha","colorString","alphaValue","theme","color","startsWith","rgb","red","green","blue","getBackgroundOverlay","backgroundOverlay","Number","background","backgroundBlendMode","backgroundRepeat","getDarkThemeBackgroundOverlay"],"mappings":";AAAA,SAASA,GAAT,QAAuC,oBAAvC;AACA,SAASC,UAAT,QAA2B,UAA3B;AACA,SAASC,gBAAT,QAAiC,aAAjC;AAGA,OAAO,MAAMC,KAAK,GAAG,CAACC,WAAD,EAAsBC,UAAtB,KACnBC,KADgE,IAE7D;AACH,QAAMC,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAApB,EAAiCA,WAAjC,CAAjB;;AACA,MAAIG,KAAK,CAACC,UAAN,CAAiB,KAAjB,CAAJ,EAA6B;AAC3B,UAAMD,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAAZ,GAA0B,MAAlC,EAA0CA,WAA1C,CAAjB;AACA,0BAAeG,KAAf,cAAwBF,UAAxB;AACD;;AAED,QAAMI,GAAG,GAAGR,UAAU,CAACM,KAAD,CAAtB;AACA,wBAAeE,GAAG,CAACC,GAAnB,cAA0BD,GAAG,CAACE,KAA9B,cAAuCF,GAAG,CAACG,IAA3C,cAAmDP,UAAnD;AACD,CAXM;AAaP,OAAO,SAASQ,oBAAT,CACLP,KADK,EAELQ,iBAFK,EAGc;AACnB,MAAIC,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,SAAO;AACLE,IAAAA,UAAU,4BAAqBhB,GAAG,CAACM,KAAD,EAAQ,gBAAR,CAAxB,eAAsDN,GAAG,CACjEM,KADiE,EAEjE,gBAFiE,CAAzD,gBAGHH,KAAK,CACV,YADU,EAEVH,GAAG,CAACM,KAAD,2BAA0BQ,iBAA1B,EAAH,IAAqD,CAF3C,CAAL,CAGLR,KAHK,CAHG,CADL;AAQLW,IAAAA,mBAAmB,EAAE,SARhB;AASLC,IAAAA,gBAAgB,EAAE;AATb,GAAP;AAWD;AAED,OAAO,SAASC,6BAAT,CACLb,KADK,EAELQ,iBAFK,EAGc;AACnB,MAAIC,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,SAAO;AACL,gBAAKZ,gBAAL,mBAA8BA,gBAA9B,iBACKW,oBAAoB,CAACP,KAAD,EAAQQ,iBAAR,CADzB;AADK,GAAP;AAKD","sourcesContent":["import { get, SystemStyleObject } from '@styled-system/css';\nimport { parseToRgb } from 'polished';\nimport { DARK_THEME_CLASS } from './ColorMode';\nimport { Theme } from './theme';\n\nexport const alpha = (colorString: string, alphaValue: number) => (\n  theme: any\n) => {\n  const color = get(theme, 'colors.' + colorString, colorString);\n  if (color.startsWith('var')) {\n    const color = get(theme, 'colors.' + colorString + '_rgb', colorString);\n    return `rgba(${color},${alphaValue})`;\n  }\n\n  const rgb = parseToRgb(color);\n  return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;\n};\n\nexport function getBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(\n      theme,\n      'colors.surface'\n    )}), ${alpha(\n      'on.surface',\n      get(theme, `paper.overlays.${backgroundOverlay}`) || 0\n    )(theme)}`,\n    backgroundBlendMode: 'overlay',\n    backgroundRepeat: 'no-repeat',\n  };\n}\n\nexport function getDarkThemeBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {\n      ...getBackgroundOverlay(theme, backgroundOverlay),\n    },\n  };\n}\n"],"file":"color.js"}
+{"version":3,"sources":["../../src/color.ts"],"names":["get","parseToRgb","DARK_THEME_CLASS","alpha","colorString","alphaValue","theme","color","startsWith","rgb","red","green","blue","mixColor","baseColor","overlayColor","overlayOpacity","getColorOverlay","background","getBackgroundOverlay","backgroundOverlay","Number","overlay","getDarkThemeBackgroundOverlay"],"mappings":";;AACA,SAASA,GAAT,QAAoB,oBAApB;AACA,SAASC,UAAT,QAA2B,UAA3B;AAEA,SAASC,gBAAT,QAAiC,aAAjC;AAGA,OAAO,IAAMC,KAAK,GAChB,SADWA,KACX,CAACC,WAAD,EAAsBC,UAAtB;AAAA,SAA6C,UAACC,KAAD,EAAgB;AAC3D,QAAMC,KAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAApB,EAAiCA,WAAjC,CAAjB;;AACA,QAAIG,KAAK,CAACC,UAAN,CAAiB,KAAjB,CAAJ,EAA6B;AAC3B,UAAMD,MAAK,GAAGP,GAAG,CAACM,KAAD,EAAQ,YAAYF,WAAZ,GAA0B,MAAlC,EAA0CA,WAA1C,CAAjB;;AACA,4BAAeG,MAAf,cAAwBF,UAAxB;AACD;;AAED,QAAMI,GAAG,GAAGR,UAAU,CAACM,KAAD,CAAtB;AACA,0BAAeE,GAAG,CAACC,GAAnB,cAA0BD,GAAG,CAACE,KAA9B,cAAuCF,GAAG,CAACG,IAA3C,cAAmDP,UAAnD;AACD,GATD;AAAA,CADK;AAqBP,OAAO,SAASQ,QAAT,CACLC,SADK,EAELC,YAFK,EAGLC,cAHK,EAImB;AACxB,SAAO,UAACV,KAAD,EAAW;AAChBQ,IAAAA,SAAS,GAAGd,GAAG,CAACM,KAAD,mBAAkBQ,SAAlB,GAA+BA,SAA/B,CAAf;AACAC,IAAAA,YAAY,GAAGC,cAAc,GACzBb,KAAK,CAACY,YAAD,EAAeC,cAAf,CAAL,CAAoCV,KAApC,CADyB,GAEzBN,GAAG,CAACM,KAAD,mBAAkBS,YAAlB,GAAkCA,YAAlC,CAFP;AAIA,qCAA0BA,YAA1B,eAA2CA,YAA3C,gBAA6DD,SAA7D;AACD,GAPD;AAQD;AAED,OAAO,SAASG,eAAT,CACLX,KADK,EAELQ,SAFK,EAGLC,YAHK,EAILC,cAJK,EAKc;AACnB,SAAO;AACLE,IAAAA,UAAU,EAAEL,QAAQ,CAACC,SAAD,EAAYC,YAAZ,EAA0BC,cAA1B,CAAR,CAAkDV,KAAlD;AADP,GAAP;AAGD;AAED,OAAO,SAASa,oBAAT,CACLb,KADK,EAELc,iBAFK,EAIc;AAAA,MADnBL,YACmB,uEADJ,YACI;;AACnB,MAAIM,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AACD,MAAME,OAAO,GAAGtB,GAAG,CAACM,KAAD,2BAA0Bc,iBAA1B,EAAH,IAAqD,CAArE;AACA,SAAOH,eAAe,CAACX,KAAD,EAAQ,SAAR,EAAmBS,YAAnB,EAAiCO,OAAjC,CAAtB;AACD;AAED,OAAO,SAASC,6BAAT,CACLjB,KADK,EAELc,iBAFK,EAIc;AAAA,MADnBL,YACmB,uEADJ,YACI;;AACnB,MAAIM,MAAM,CAACD,iBAAD,CAAN,IAA6B,CAAjC,EAAoC;AAClC,WAAO,EAAP;AACD;;AAED,wCACOlB,gBADP,mBACgCA,gBADhC,gBAEOiB,oBAAoB,CAACb,KAAD,EAAQc,iBAAR,EAA2BL,YAA3B,CAF3B;AAKD","sourcesContent":["import type { SystemStyleObject } from '@styled-system/css';\nimport { get } from '@styled-system/css';\nimport { parseToRgb } from 'polished';\n\nimport { DARK_THEME_CLASS } from './ColorMode';\nimport type { Theme } from './theme';\n\nexport const alpha =\n  (colorString: string, alphaValue: number) => (theme: any) => {\n    const color = get(theme, 'colors.' + colorString, colorString);\n    if (color.startsWith('var')) {\n      const color = get(theme, 'colors.' + colorString + '_rgb', colorString);\n      return `rgba(${color},${alphaValue})`;\n    }\n\n    const rgb = parseToRgb(color);\n    return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;\n  };\n\nexport function mixColor(\n  baseColor: string,\n  overlayColor: string\n): (theme: any) => string;\nexport function mixColor(\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity: number\n): (theme: any) => string;\nexport function mixColor(\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity?: number\n): (theme: any) => string {\n  return (theme) => {\n    baseColor = get(theme, `colors.${baseColor}`, baseColor);\n    overlayColor = overlayOpacity\n      ? alpha(overlayColor, overlayOpacity)(theme)\n      : get(theme, `colors.${overlayColor}`, overlayColor);\n\n    return `linear-gradient(${overlayColor}, ${overlayColor}), ${baseColor}`;\n  };\n}\n\nexport function getColorOverlay(\n  theme: Theme,\n  baseColor: string,\n  overlayColor: string,\n  overlayOpacity: number\n): SystemStyleObject {\n  return {\n    background: mixColor(baseColor, overlayColor, overlayOpacity)(theme),\n  };\n}\n\nexport function getBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n  const overlay = get(theme, `paper.overlays.${backgroundOverlay}`) || 0;\n  return getColorOverlay(theme, 'surface', overlayColor, overlay);\n}\n\nexport function getDarkThemeBackgroundOverlay(\n  theme: Theme,\n  backgroundOverlay: number | string,\n  overlayColor = 'on.surface'\n): SystemStyleObject {\n  if (Number(backgroundOverlay) <= 0) {\n    return {};\n  }\n\n  return {\n    [`.${DARK_THEME_CLASS} &, &.${DARK_THEME_CLASS}`]: {\n      ...getBackgroundOverlay(theme, backgroundOverlay, overlayColor),\n    },\n  };\n}\n"],"file":"color.js"}

package/build/esm/hooks/useAnimation.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 export declare type AnimationStateStyles<TStyleProps extends CSSProperties> = {
     closed: TStyleProps;
     opening?: TStyleProps;

package/build/esm/hooks/useAnimation.js

@@ -1,51 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState, useEffect, useCallback } from 'react';
 export function useAnimation(opts) {
-  const {
-    styles,
-    mode,
-    open: openProp,
-    openTimeoutInMilliseconds = 225,
-    closeTimeoutInMilliseconds = 110
-  } = opts;
-  const animationStyle = styles[mode];
-  const [{
-    timing,
-    open,
-    state,
-    style
-  }, setAnimation] = useState({
+  var styles = opts.styles,
+      mode = opts.mode,
+      openProp = opts.open,
+      _opts$openTimeoutInMi = opts.openTimeoutInMilliseconds,
+      openTimeoutInMilliseconds = _opts$openTimeoutInMi === void 0 ? 225 : _opts$openTimeoutInMi,
+      _opts$closeTimeoutInM = opts.closeTimeoutInMilliseconds,
+      closeTimeoutInMilliseconds = _opts$closeTimeoutInM === void 0 ? 110 : _opts$closeTimeoutInM;
+  var animationStyle = styles[mode];
+
+  var _useState = useState({
     state: 'closed',
     style: animationStyle.closed,
     timing: closeTimeoutInMilliseconds,
     open: openProp
-  });
-  const handleClose = useCallback(() => {
-    setAnimation(animation => animation.state === 'closed' ? animation : _extends({}, animation, {
-      state: 'close',
-      style: animationStyle.close || animationStyle.closed,
-      timing: closeTimeoutInMilliseconds
-    }));
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      _useState2$ = _useState2[0],
+      timing = _useState2$.timing,
+      open = _useState2$.open,
+      state = _useState2$.state,
+      style = _useState2$.style,
+      setAnimation = _useState2[1];
+
+  var handleClose = useCallback(function () {
+    setAnimation(function (animation) {
+      return animation.state === 'closed' ? animation : _extends({}, animation, {
+        state: 'close',
+        style: animationStyle.close || animationStyle.closed,
+        timing: closeTimeoutInMilliseconds
+      });
+    });
   }, [animationStyle, closeTimeoutInMilliseconds]);
-  const handleOpen = useCallback(() => {
-    setAnimation(animation => animation.state === 'open' ? animation : _extends({}, animation, {
-      open: true,
-      state: 'opening',
-      style: animationStyle.opening || animationStyle.closed
-    }));
+  var handleOpen = useCallback(function () {
+    setAnimation(function (animation) {
+      return animation.state === 'open' ? animation : _extends({}, animation, {
+        open: true,
+        state: 'opening',
+        style: animationStyle.opening || animationStyle.closed
+      });
+    });
   }, [animationStyle]);
-  useEffect(() => {
+  useEffect(function () {
     if (state === 'opening') {
-      setAnimation(animation => _extends({}, animation, {
-        state: 'open',
-        style: animationStyle.open,
-        timing: openTimeoutInMilliseconds
-      }));
+      setAnimation(function (animation) {
+        return _extends({}, animation, {
+          state: 'open',
+          style: animationStyle.open,
+          timing: openTimeoutInMilliseconds
+        });
+      });
     }
   }, [animationStyle.open, openTimeoutInMilliseconds, state]);
-  useEffect(() => {
+  useEffect(function () {
     if (state === 'close') {
-      const timeout = setTimeout(() => {
+      var timeout = setTimeout(function () {
         setAnimation({
           state: 'closed',
           style: animationStyle.closed,
@@ -53,10 +64,12 @@ export function useAnimation(opts) {
           timing: closeTimeoutInMilliseconds
         });
       }, closeTimeoutInMilliseconds);
-      return () => clearTimeout(timeout);
+      return function () {
+        return clearTimeout(timeout);
+      };
     }
   }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
-  useEffect(() => {
+  useEffect(function () {
     if (openProp) {
       handleOpen();
     } else {
@@ -64,10 +77,10 @@ export function useAnimation(opts) {
     }
   }, [handleClose, handleOpen, openProp]);
   return {
-    state,
-    style,
-    timing,
-    open
+    state: state,
+    style: style,
+    timing: timing,
+    open: open
   };
 }
 //# sourceMappingURL=useAnimation.js.map

package/build/esm/hooks/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useAnimation.ts"],"names":["useState","useEffect","useCallback","useAnimation","opts","styles","mode","open","openProp","openTimeoutInMilliseconds","closeTimeoutInMilliseconds","animationStyle","timing","state","style","setAnimation","closed","handleClose","animation","close","handleOpen","opening","timeout","setTimeout","clearTimeout"],"mappings":"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","sourcesContent":["import { useState, useEffect, useCallback, CSSProperties } from 'react';\n\nexport type AnimationStateStyles<TStyleProps extends CSSProperties> = {\n  closed: TStyleProps;\n  opening?: TStyleProps;\n  open: TStyleProps;\n  close?: TStyleProps;\n};\n\nexport type AnimationStyles<TStyleProps extends CSSProperties> = Record<\n  string,\n  AnimationStateStyles<TStyleProps>\n>;\n\nexport function useAnimation<\n  TStyles extends AnimationStyles<TStyleProps>,\n  TStyleProps extends CSSProperties\n>(opts: {\n  open: boolean;\n  styles: TStyles;\n  mode: keyof TStyles;\n  openTimeoutInMilliseconds?: number;\n  closeTimeoutInMilliseconds?: number;\n}) {\n  const {\n    styles,\n    mode,\n    open: openProp,\n    openTimeoutInMilliseconds = 225,\n    closeTimeoutInMilliseconds = 110,\n  } = opts;\n  const animationStyle = styles[mode];\n  const [{ timing, open, state, style }, setAnimation] = useState<{\n    state: keyof AnimationStateStyles<TStyleProps>;\n    timing: number;\n    open: boolean;\n    style: CSSProperties;\n  }>({\n    state: 'closed',\n    style: animationStyle.closed,\n    timing: closeTimeoutInMilliseconds,\n    open: openProp,\n  });\n\n  const handleClose = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'closed'\n        ? animation\n        : {\n            ...animation,\n            state: 'close',\n            style: animationStyle.close || animationStyle.closed,\n            timing: closeTimeoutInMilliseconds,\n          }\n    );\n  }, [animationStyle, closeTimeoutInMilliseconds]);\n\n  const handleOpen = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'open'\n        ? animation\n        : {\n            ...animation,\n            open: true,\n            state: 'opening',\n            style: animationStyle.opening || animationStyle.closed,\n          }\n    );\n  }, [animationStyle]);\n\n  useEffect(() => {\n    if (state === 'opening') {\n      setAnimation((animation) => ({\n        ...animation,\n        state: 'open',\n        style: animationStyle.open,\n        timing: openTimeoutInMilliseconds,\n      }));\n    }\n  }, [animationStyle.open, openTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (state === 'close') {\n      const timeout = setTimeout(() => {\n        setAnimation({\n          state: 'closed',\n          style: animationStyle.closed,\n          open: false,\n          timing: closeTimeoutInMilliseconds,\n        });\n      }, closeTimeoutInMilliseconds);\n      return () => clearTimeout(timeout);\n    }\n  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (openProp) {\n      handleOpen();\n    } else {\n      handleClose();\n    }\n  }, [handleClose, handleOpen, openProp]);\n\n  return {\n    state,\n    style,\n    timing,\n    open,\n  };\n}\n"],"file":"useAnimation.js"}
+{"version":3,"sources":["../../../src/hooks/useAnimation.ts"],"names":["useState","useEffect","useCallback","useAnimation","opts","styles","mode","openProp","open","openTimeoutInMilliseconds","closeTimeoutInMilliseconds","animationStyle","state","style","closed","timing","setAnimation","handleClose","animation","close","handleOpen","opening","timeout","setTimeout","clearTimeout"],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport { useState, useEffect, useCallback } from 'react';\n\nexport type AnimationStateStyles<TStyleProps extends CSSProperties> = {\n  closed: TStyleProps;\n  opening?: TStyleProps;\n  open: TStyleProps;\n  close?: TStyleProps;\n};\n\nexport type AnimationStyles<TStyleProps extends CSSProperties> = Record<\n  string,\n  AnimationStateStyles<TStyleProps>\n>;\n\nexport function useAnimation<\n  TStyles extends AnimationStyles<TStyleProps>,\n  TStyleProps extends CSSProperties\n>(opts: {\n  open: boolean;\n  styles: TStyles;\n  mode: keyof TStyles;\n  openTimeoutInMilliseconds?: number;\n  closeTimeoutInMilliseconds?: number;\n}) {\n  const {\n    styles,\n    mode,\n    open: openProp,\n    openTimeoutInMilliseconds = 225,\n    closeTimeoutInMilliseconds = 110,\n  } = opts;\n  const animationStyle = styles[mode];\n  const [{ timing, open, state, style }, setAnimation] = useState<{\n    state: keyof AnimationStateStyles<TStyleProps>;\n    timing: number;\n    open: boolean;\n    style: CSSProperties;\n  }>({\n    state: 'closed',\n    style: animationStyle.closed,\n    timing: closeTimeoutInMilliseconds,\n    open: openProp,\n  });\n\n  const handleClose = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'closed'\n        ? animation\n        : {\n            ...animation,\n            state: 'close',\n            style: animationStyle.close || animationStyle.closed,\n            timing: closeTimeoutInMilliseconds,\n          }\n    );\n  }, [animationStyle, closeTimeoutInMilliseconds]);\n\n  const handleOpen = useCallback(() => {\n    setAnimation((animation) =>\n      animation.state === 'open'\n        ? animation\n        : {\n            ...animation,\n            open: true,\n            state: 'opening',\n            style: animationStyle.opening || animationStyle.closed,\n          }\n    );\n  }, [animationStyle]);\n\n  useEffect(() => {\n    if (state === 'opening') {\n      setAnimation((animation) => ({\n        ...animation,\n        state: 'open',\n        style: animationStyle.open,\n        timing: openTimeoutInMilliseconds,\n      }));\n    }\n  }, [animationStyle.open, openTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (state === 'close') {\n      const timeout = setTimeout(() => {\n        setAnimation({\n          state: 'closed',\n          style: animationStyle.closed,\n          open: false,\n          timing: closeTimeoutInMilliseconds,\n        });\n      }, closeTimeoutInMilliseconds);\n      return () => clearTimeout(timeout);\n    }\n  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);\n\n  useEffect(() => {\n    if (openProp) {\n      handleOpen();\n    } else {\n      handleClose();\n    }\n  }, [handleClose, handleOpen, openProp]);\n\n  return {\n    state,\n    style,\n    timing,\n    open,\n  };\n}\n"],"file":"useAnimation.js"}

package/build/esm/index.d.ts

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,5 +34,6 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';

package/build/esm/index.js

@@ -17,6 +17,7 @@ export * from './Link';
 export * from './List';
 export * from './ListItem';
 export * from './Menu';
+export * from './NavRail';
 export * from './NotchedOutline';
 export * from './Paper';
 export * from './ProgressSpinner';
@@ -33,6 +34,7 @@ export * from './Table';
 export * from './Text';
 export * from './TextField';
 export * from './Tooltip';
+export * from './motion';
 export * from './theme';
 export * from './color';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,OAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,iBAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,gBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './AppBar';\nexport * from './Alert';\nexport * from './Badge';\nexport * from './BaseLine';\nexport * from './BottomSheet';\nexport * from './Box';\nexport * from './Button';\nexport * from './Combobox';\nexport * from './CheckBox';\nexport * from './Chip';\nexport * from './ColorMode';\nexport * from './Divider';\nexport * from './Dialog';\nexport * from './FloatingLabel';\nexport * from './LineRipple';\nexport * from './Link';\nexport * from './List';\nexport * from './ListItem';\nexport * from './Menu';\nexport * from './NotchedOutline';\nexport * from './Paper';\nexport * from './ProgressSpinner';\nexport * from './RadioButton';\nexport * from './Ripple';\nexport * from './Select';\nexport * from './SelectItem';\nexport * from './Skeleton';\nexport * from './Snackbar';\nexport * from './Switch';\nexport * from './Tab';\nexport * from './TabIndicator';\nexport * from './Table';\nexport * from './Text';\nexport * from './TextField';\nexport * from './Tooltip';\nexport * from './theme';\nexport * from './color';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,OAAd;AACA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,iBAAd;AACA,cAAc,cAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,kBAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,eAAd;AACA,cAAc,UAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd;AACA,cAAc,gBAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,aAAd;AACA,cAAc,WAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './AppBar';\nexport * from './Alert';\nexport * from './Badge';\nexport * from './BaseLine';\nexport * from './BottomSheet';\nexport * from './Box';\nexport * from './Button';\nexport * from './Combobox';\nexport * from './CheckBox';\nexport * from './Chip';\nexport * from './ColorMode';\nexport * from './Divider';\nexport * from './Dialog';\nexport * from './FloatingLabel';\nexport * from './LineRipple';\nexport * from './Link';\nexport * from './List';\nexport * from './ListItem';\nexport * from './Menu';\nexport * from './NavRail';\nexport * from './NotchedOutline';\nexport * from './Paper';\nexport * from './ProgressSpinner';\nexport * from './RadioButton';\nexport * from './Ripple';\nexport * from './Select';\nexport * from './SelectItem';\nexport * from './Skeleton';\nexport * from './Snackbar';\nexport * from './Switch';\nexport * from './Tab';\nexport * from './TabIndicator';\nexport * from './Table';\nexport * from './Text';\nexport * from './TextField';\nexport * from './Tooltip';\nexport * from './motion';\nexport * from './theme';\nexport * from './color';\n"],"file":"index.js"}

package/build/esm/motion.d.ts

@@ -0,0 +1,7 @@
+export declare const EASING_EMPHASIZED = "cubic-bezier(0.2, 0, 0, 1)";
+export declare const EASING_EMPHASIZED_ACCELERATE = "cubic-bezier(0.3, 0, 0.8, 0.15)";
+export declare const EASING_EMPHASIZED_DECELERATE = "cubic-bezier(0.05, 0.7, 0.1, 1)";
+export declare const EASING_LINEAR = "cubic-bezier(0, 0, 1, 1)";
+export declare const EASING_STANDARD = "cubic-bezier(0.2, 0, 0, 1)";
+export declare const EASING_STANDARD_ACCELERATE = "cubic-bezier(0.3, 0, 1, 1)";
+export declare const EASING_STANDARD_DECELERATE = "cubic-bezier(0, 0, 0, 1)";

package/build/esm/motion.js

@@ -0,0 +1,8 @@
+export var EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';
+export var EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';
+export var EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+export var EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';
+export var EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+export var EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';
+export var EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';
+//# sourceMappingURL=motion.js.map

package/build/esm/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/motion.ts"],"names":["EASING_EMPHASIZED","EASING_EMPHASIZED_ACCELERATE","EASING_EMPHASIZED_DECELERATE","EASING_LINEAR","EASING_STANDARD","EASING_STANDARD_ACCELERATE","EASING_STANDARD_DECELERATE"],"mappings":"AAAA,OAAO,IAAMA,iBAAiB,GAAG,4BAA1B;AACP,OAAO,IAAMC,4BAA4B,GAAG,iCAArC;AACP,OAAO,IAAMC,4BAA4B,GAAG,iCAArC;AACP,OAAO,IAAMC,aAAa,GAAG,0BAAtB;AACP,OAAO,IAAMC,eAAe,GAAG,4BAAxB;AACP,OAAO,IAAMC,0BAA0B,GAAG,4BAAnC;AACP,OAAO,IAAMC,0BAA0B,GAAG,0BAAnC","sourcesContent":["export const EASING_EMPHASIZED = 'cubic-bezier(0.2, 0, 0, 1)';\nexport const EASING_EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)';\nexport const EASING_EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)';\nexport const EASING_LINEAR = 'cubic-bezier(0, 0, 1, 1)';\nexport const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';\nexport const EASING_STANDARD_ACCELERATE = 'cubic-bezier(0.3, 0, 1, 1)';\nexport const EASING_STANDARD_DECELERATE = 'cubic-bezier(0, 0, 0, 1)';\n"],"file":"motion.js"}

package/build/esm/theme/theme.d.ts

@@ -1,36 +1,59 @@
 export declare const theme: {
     googleFonts: string;
     colors: {
-        background: string;
-        surface: string;
-        error: string;
         primary: string;
         secondary: string;
-        muted: string;
+        tertiary: string;
+        error: string;
+        'primary-container': string;
+        'secondary-container': string;
+        'tertiary-container': string;
+        'error-container': string;
+        background: string;
+        surface: string;
+        'surface-variant': string;
+        outline: string;
         on: {
             primary: string;
             secondary: string;
+            tertiary: string;
             error: string;
+            'primary-container': string;
+            'secondary-container': string;
+            'tertiary-container': string;
+            'error-container': string;
             background: string;
             surface: string;
-            muted: string;
+            'surface-variant': string;
+            outline: string;
         };
         modes: {
             dark: {
-                text: string;
-                background: string;
-                surface: string;
-                error: string;
                 primary: string;
                 secondary: string;
-                muted: string;
+                tertiary: string;
+                error: string;
+                'primary-container': string;
+                'secondary-container': string;
+                'tertiary-container': string;
+                'error-container': string;
+                background: string;
+                surface: string;
+                'surface-variant': string;
+                outline: string;
                 on: {
                     primary: string;
                     secondary: string;
+                    tertiary: string;
                     error: string;
+                    'primary-container': string;
+                    'secondary-container': string;
+                    'tertiary-container': string;
+                    'error-container': string;
                     background: string;
                     surface: string;
-                    muted: string;
+                    'surface-variant': string;
+                    outline: string;
                 };
             };
         };
@@ -42,10 +65,19 @@ export declare const theme: {
     radii: {
         none: number;
         default: string;
+        'extra-small': string;
+        'extra-small_top': string;
+        small: string;
+        medium: string;
         large: string;
+        large_end: string;
+        large_top: string;
+        'extra-large': string;
+        'extra-large_top': string;
+        full: string;
         circle: string;
     };
-    shadows: {
+    shadowsOriginal: {
         0: string;
         1: string;
         2: string;
@@ -72,9 +104,19 @@ export declare const theme: {
         23: string;
         24: string;
     };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+    };
     fonts: {
         body: string;
         heading: string;
+        brand: string;
+        plain: string;
         monospace: string;
     };
     fontSizes: {
@@ -124,6 +166,111 @@ export declare const theme: {
             fontFamily: string;
             lineHeight: string;
         };
+        'display-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'display-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'display-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'headline-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'title-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'label-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-large': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-medium': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
+        'body-small': {
+            fontFamily: "plain" | "brand";
+            lineHeight: string;
+            fontSize: string;
+            letterSpacing: string;
+            fontWeight: number;
+        };
         h1: {
             variant: string;
             fontWeight: string;
@@ -187,9 +334,8 @@ export declare const theme: {
         button: {
             variant: string;
             fontSize: number;
-            fontWeight: string;
             letterSpacing: string;
-            lineHeight: string;
+            fontWeight: string;
         };
         caption: {
             variant: string;
@@ -251,17 +397,17 @@ export declare const theme: {
         variants: {
             base: {
                 variant: string;
-                borderRadius: string;
                 boxShadow: string;
                 py: number;
-                px: number;
+                px: string;
                 height: string;
+                borderRadius: string;
                 cursor: string;
                 outline: string;
             };
             text: {
                 variant: string;
-                px: number;
+                px: string;
             };
             filled: {
                 variant: string;
@@ -276,6 +422,7 @@ export declare const theme: {
                 width: string;
                 maxWidth: string;
                 borderRadius: string;
+                px: number;
             };
             'fab-mini': {
                 variant: string;
@@ -283,6 +430,16 @@ export declare const theme: {
                 maxHeight: string;
                 width: string;
                 maxWidth: string;
+                borderRadius: string;
+                px: number;
+            };
+            'fab-large': {
+                variant: string;
+                height: string;
+                maxHeight: string;
+                width: string;
+                maxWidth: string;
+                borderRadius: string;
                 px: number;
             };
             'fab-extended': {
@@ -303,13 +460,22 @@ export declare const theme: {
         };
         elevations: {
             none: {};
-            contained: {
+            default: {
+                transition: string;
+                '&:hover': {
+                    boxShadow: number;
+                };
+                '&:active,&:focus-visible,&:disabled': {
+                    boxShadow: number;
+                };
+            };
+            elevated: {
                 transition: string;
                 boxShadow: number;
-                ':focus,:hover': {
+                '&:hover': {
                     boxShadow: number;
                 };
-                ':active': {
+                '&:active,&:focus-visible': {
                     boxShadow: number;
                 };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -319,10 +485,10 @@ export declare const theme: {
             floating: {
                 transition: string;
                 boxShadow: number;
-                ':focus,:hover': {
+                ':hover': {
                     boxShadow: number;
                 };
-                ':active': {
+                '&:active,&:focus-visible': {
                     boxShadow: number;
                 };
                 '&:disabled,&:disabled:hover,&:disabled:focus,&:disabled:active': {
@@ -369,39 +535,32 @@ export declare const theme: {
             };
             filled: {
                 variant: string;
+                boxShadow: number;
+                ':active:not([data-disabled])': {
+                    boxShadow: number;
+                };
             };
             outlined: {
                 variant: string;
             };
         };
     };
+    dialogs: {
+        variants: {
+            base: {
+                borderRadius: string;
+            };
+        };
+        backgroundColorOverlay: number;
+    };
     paper: {
         overlays: {
-            '0': number;
-            '1': number;
-            '2': number;
-            '3': number;
-            '4': number;
-            '5': number;
-            '6': number;
-            '7': number;
-            '8': number;
-            '9': number;
-            '10': number;
-            '11': number;
-            '12': number;
-            '13': number;
-            '14': number;
-            '15': number;
-            '16': number;
-            '17': number;
-            '18': number;
-            '19': number;
-            '20': number;
-            '21': number;
-            '22': number;
-            '23': number;
-            '24': number;
+            0: number;
+            1: number;
+            2: number;
+            3: number;
+            4: number;
+            5: number;
         };
     };
     zIndices: {