@basic-ui/material 1.0.0-alpha.26 → 1.0.0-alpha.28

package/build/cjs/index.js

@@ -55,6 +55,7 @@ const theme = {
     surface: '#fcfcfc',
     'surface-variant': '#efdee5',
     outline: '#81747a',
+    'outline-variant': '#d3c2c9',
     on: {
       primary: '#ffffff',
       secondary: '#ffffff',
@@ -67,7 +68,8 @@ const theme = {
       background: '#1f1a1c',
       surface: '#1f1a1c',
       'surface-variant': '#4f4349',
-      outline: '#feecf3'
+      outline: '#feecf3',
+      'outline-variant': '#22191e'
     },
     modes: {
       dark: {
@@ -83,6 +85,7 @@ const theme = {
         surface: '#1f1a1c',
         'surface-variant': '#4f4349',
         outline: '#9b8d93',
+        'outline-variant': '#4f4349',
         on: {
           primary: '#5b0e47',
           secondary: '#402a37',
@@ -95,7 +98,8 @@ const theme = {
           background: '#eae0e3',
           surface: '#eae0e3',
           'surface-variant': '#d3c2c9',
-          outline: '#22191e'
+          outline: '#22191e',
+          'outline-variant': '#efdee5'
         }
       }
     }
@@ -567,6 +571,10 @@ const alpha = (colorString, alphaValue) => theme => {
     return `rgba(${color},${alphaValue})`;
   }
 
+  if (color.startsWith('rgba(')) {
+    return color;
+  }
+
   const rgb = polished.parseToRgb(color);
   return `rgba(${rgb.red},${rgb.green},${rgb.blue},${alphaValue})`;
 };
@@ -623,7 +631,7 @@ const Paper = /*#__PURE__*/react$1.forwardRef(function Paper(props, forwardedRef
       ...(outlined ? {
         borderStyle: 'solid',
         borderWidth: "0.0625rem",
-        borderColor: alpha('on.surface', 0.12)
+        borderColor: 'surface-variant'
       } : {}),
       ...(backgroundOverlay ? getBackgroundOverlay(theme, backgroundOverlay, 'primary') : {}),
       ...(darkThemeBackgroundOverlay ? getDarkThemeBackgroundOverlay(theme, darkThemeBackgroundOverlay, 'primary') : {}),
@@ -890,7 +898,7 @@ const OutlinedButton = /*#__PURE__*/_styled__default["default"](TransparentButto
   },
   '&:disabled': {
     color: alpha('on.surface', 0.38),
-    borderColor: alpha('on.surface', 0.12),
+    borderColor: alpha('outline', 0.12),
     cursor: 'default'
   }
 }), ({
@@ -916,7 +924,7 @@ const OutlinedButton = /*#__PURE__*/_styled__default["default"](TransparentButto
       borderLeftWidth: 0
     }
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyBUcmFuc3BhcmVudEJ1dHRvbiB9IGZyb20gJy4vVHJhbnNwYXJlbnRCdXR0b24nO1xuXG5leHBvcnQgY29uc3QgT3V0bGluZWRCdXR0b24gPSBzdHlsZWQoVHJhbnNwYXJlbnRCdXR0b24pKFxuICBjc3Moe1xuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiByZW0oMSksXG4gICAgYm9yZGVyQ29sb3I6ICdvdXRsaW5lJyxcbiAgICBib3hTaGFkb3c6IDAsXG4gICAgJyY6Zm9jdXMsOiZhY3RpdmUsOiZob3Zlcic6IHsgYm94U2hhZG93OiAwIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgICB9LFxuICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjEyKSxcbiAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgIH0sXG4gIH0pLFxuICAoeyBpc0dyb3VwZWRCdXR0b24gPSBmYWxzZSB9KSA9PlxuICAgIGlzR3JvdXBlZEJ1dHRvbiAmJiB7XG4gICAgICAnW2RhdGEtYnV0dG9uLWdyb3VwPVwiXCJdICYnOiB7XG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlOm50aC1vZi10eXBlKDIpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfVxuKTtcbiJdfQ== */");
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk91dGxpbmVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPOEIiLCJmaWxlIjoiT3V0bGluZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyBUcmFuc3BhcmVudEJ1dHRvbiB9IGZyb20gJy4vVHJhbnNwYXJlbnRCdXR0b24nO1xuXG5leHBvcnQgY29uc3QgT3V0bGluZWRCdXR0b24gPSBzdHlsZWQoVHJhbnNwYXJlbnRCdXR0b24pKFxuICBjc3Moe1xuICAgIGJvcmRlclN0eWxlOiAnc29saWQnLFxuICAgIGJvcmRlcldpZHRoOiByZW0oMSksXG4gICAgYm9yZGVyQ29sb3I6ICdvdXRsaW5lJyxcbiAgICBib3hTaGFkb3c6IDAsXG4gICAgJyY6Zm9jdXMsOiZhY3RpdmUsOiZob3Zlcic6IHsgYm94U2hhZG93OiAwIH0sXG4gICAgJyY6Zm9jdXMtdmlzaWJsZSwmOmFjdGl2ZSc6IHtcbiAgICAgIGJvcmRlckNvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgICB9LFxuICAgICcmOmRpc2FibGVkJzoge1xuICAgICAgY29sb3I6IGFscGhhKCdvbi5zdXJmYWNlJywgMC4zOCksXG4gICAgICBib3JkZXJDb2xvcjogYWxwaGEoJ291dGxpbmUnLCAwLjEyKSxcbiAgICAgIGN1cnNvcjogJ2RlZmF1bHQnLFxuICAgIH0sXG4gIH0pLFxuICAoeyBpc0dyb3VwZWRCdXR0b24gPSBmYWxzZSB9KSA9PlxuICAgIGlzR3JvdXBlZEJ1dHRvbiAmJiB7XG4gICAgICAnW2RhdGEtYnV0dG9uLWdyb3VwPVwiXCJdICYnOiB7XG4gICAgICAgICc6Zmlyc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BSaWdodFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21SaWdodFJhZGl1czogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpub3QoOmZpcnN0LW9mLXR5cGUpOm5vdCg6bGFzdC1vZi10eXBlKSc6IHtcbiAgICAgICAgICBib3JkZXJSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRXaWR0aDogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcExlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJMZWZ0U3R5bGU6ICdzb2xpZCcsXG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bGFzdC1vZi10eXBlOm50aC1vZi10eXBlKDIpJzoge1xuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfVxuKTtcbiJdfQ== */");
 
 function getRippleProperties(theme) {
   return { ...getRippleProperties$2(theme),
@@ -3507,13 +3515,13 @@ const Divider = /*#__PURE__*/react$1.forwardRef(function Divider(props, forwarde
         height: 0,
         borderBottomWidth: "0.0625rem",
         borderBottomStyle: 'solid',
-        borderBottomColor: alpha('on.surface', 0.12)
+        borderBottomColor: 'outline-variant'
       }),
       ...(direction === 'vertical' && {
         width: 0,
         borderRightWidth: "0.0625rem",
         borderRightStyle: 'solid',
-        borderRightColor: alpha('on.surface', 0.12)
+        borderRightColor: 'outline-variant'
       }),
       ...__css
     }
@@ -3767,10 +3775,10 @@ const NavRailIndicator = /*#__PURE__*/react$1.forwardRef(function NavRailIndicat
     "data-nav-rail-item-indicator": "",
     ...otherProps,
     __css: {
-      width: '100%',
       height: '100%',
-      maxWidth: "3.5rem",
-      maxHeight: "3.5rem",
+      width: ["4rem", "3.5rem"],
+      maxWidth: ["4rem", "3.5rem"],
+      maxHeight: ["4rem", "3.5rem"],
       borderRadius: 'full',
       bg: 'var(--indicator-background-color)',
       display: 'flex',
@@ -5592,7 +5600,8 @@ const TabPanel = /*#__PURE__*/react$1.forwardRef(function TabPanel(props, forwar
 const Table = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const {
     children,
-    elevation = 1,
+    elevation = 0,
+    __css,
     ...rest
   } = props;
   return /*#__PURE__*/jsxRuntime.jsx(Paper, {
@@ -5603,6 +5612,14 @@ const Table = /*#__PURE__*/react$1.forwardRef((props, ref) => {
     flexDirection: "column",
     elevation: elevation,
     darkThemeBackgroundOverlay: elevation,
+    borderRadius: "extra-large",
+    __css: {
+      borderColor: 'surface-variant',
+      borderWidth: "0.125rem",
+      borderStyle: 'solid',
+      overflowX: 'auto',
+      ...__css
+    },
     ...rest,
     children: children
   });
@@ -5638,7 +5655,8 @@ const TableHead = /*#__PURE__*/react$1.forwardRef((props, ref) => {
     __css: {
       borderBottomStyle: 'solid',
       borderBottomWidth: "0.0625rem",
-      borderBottomColor: alpha('on.surface', 0.12),
+      borderBottomColor: 'surface-variant',
+      background: mixColor('surface', 'primary', 0.05),
       ...__css
     },
     ...rest,
@@ -5692,7 +5710,7 @@ const TableRow = /*#__PURE__*/react$1.forwardRef((props, ref) => {
     __css: {
       borderBottomStyle: 'solid',
       borderBottomWidth: "0.0625rem",
-      borderBottomColor: alpha('on.surface', 0.12),
+      borderBottomColor: 'surface-variant',
       '&:last-of-type': {
         borderBottom: 'none'
       },