@superdispatch/ui 0.13.0 → 0.16.0-alpha.0

package/dist-src/v5/columns/Column.js

@@ -0,0 +1,75 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { useResponsiveProp } from "../props/ResponsiveProp.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function computeFlexBasis(scale) {
+  return "".concat(scale * 100, "%");
+}
+
+function flexBasisMixin(width) {
+  switch (width) {
+    case '1/2':
+      return computeFlexBasis(1 / 2);
+
+    case '1/3':
+      return computeFlexBasis(1 / 3);
+
+    case '2/3':
+      return computeFlexBasis(2 / 3);
+
+    case '1/4':
+      return computeFlexBasis(1 / 4);
+
+    case '3/4':
+      return computeFlexBasis(3 / 4);
+
+    case '1/5':
+      return computeFlexBasis(1 / 5);
+
+    case '2/5':
+      return computeFlexBasis(2 / 5);
+
+    case '3/5':
+      return computeFlexBasis(3 / 5);
+
+    case '4/5':
+      return computeFlexBasis(4 / 5);
+  }
+
+  return 'auto';
+}
+
+function columnRootMixin(width) {
+  return css(["flex-grow:0;flex-basis:", ";width:", ";flex-shrink:", ";"], flexBasisMixin(width), width === 'fluid' ? '100%' : 'auto', width === 'fluid' || width === 'adaptive' ? 1 : 0);
+}
+
+var ColumnRoot = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Column__ColumnRoot",
+  componentId: "SD__sc-nqzztj-0"
+})(_ref => {
+  var {
+    theme,
+    columnWidth
+  } = _ref;
+  return css(["min-width:0;", ";", "{", ";}", "{", ";}& > div{padding-top:var(--column-space-top);padding-left:var(--column-space-left);padding-bottom:var(--column-space-bottom);}&:last-child > div{padding-top:0;padding-bottom:0;}"], columnRootMixin(columnWidth[0]), theme.breakpoints.up('sm'), columnRootMixin(columnWidth[1]), theme.breakpoints.up('md'), columnRootMixin(columnWidth[2]));
+});
+export var Column = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    width = 'fluid'
+  } = _ref2;
+  var columnWidth = useResponsiveProp(width);
+  return /*#__PURE__*/_jsx(ColumnRoot, {
+    ref: ref,
+    columnWidth: columnWidth,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    children: /*#__PURE__*/_jsx("div", {
+      children: children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Column.displayName = "Column";

package/dist-src/v5/columns/Columns.js

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+import { parseAlignProp } from "../props/AlignProps.js";
+import { parseCollapsedBelow } from "../props/CollapseProp.js";
+import { parseResponsiveProp } from "../props/ResponsiveProp.js";
+import { parseSpaceProp } from "../props/SpaceProp.js";
+
+function columnsRootMixin(align, spaceProp, isReversed, isCollapsed) {
+  var space = parseSpaceProp(spaceProp);
+  return css(["--column-space-left:", "px;--column-space-top:", "px;--column-space-bottom:", "px;align-items:", ";margin-left:", "px;width:", ";flex-direction:", ";"], isCollapsed ? 0 : space, isCollapsed && isReversed ? space : 0, isCollapsed && !isReversed ? space : 0, parseAlignProp(align), isCollapsed ? 0 : "-".concat(space), isCollapsed ? '100%' : "calc(100% + ".concat(space, "px)"), isCollapsed ? !isReversed ? 'column' : 'column-reverse' : !isReversed ? 'row' : 'row-reverse');
+}
+
+export var Columns = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Columns",
+  componentId: "SD__sc-1uebhbi-0"
+})(_ref => {
+  var {
+    theme,
+    collapseBelow,
+    align: alignProp = 'top',
+    space: spaceProp = 'none',
+    reverse: reverseProp = false
+  } = _ref;
+  var align = parseResponsiveProp(alignProp);
+  var space = parseResponsiveProp(spaceProp);
+  var reverse = parseResponsiveProp(reverseProp);
+  var collapsed = parseCollapsedBelow(collapseBelow);
+  return css(["width:100%;display:flex;", ";", "{", ";}", "{", ";}"], columnsRootMixin(align[0], space[0], reverse[0], collapsed[0]), theme.breakpoints.up('sm'), columnsRootMixin(align[1], space[1], reverse[1], collapsed[1]), theme.breakpoints.up('md'), columnsRootMixin(align[2], space[2], reverse[2], collapsed[2]));
+});

package/dist-src/v5/description-list/DescriptionList.js

@@ -0,0 +1,114 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+var _excluded = ["size"];
+import { styled, SvgIcon, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import { OverflowText } from "../overflow-text/OverflowText.js";
+import { Color } from "../theme/Color.js";
+import { isEmptyReactNode } from "../utils/isEmptyReactNode.js";
+import { useUID } from "../utils/useUID.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DescriptionListItemRoot = /*#__PURE__*/styled('div', {
+  name: 'SD-DescriptionListItem',
+  slot: 'Root'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+var DescriptionListItemIcon = /*#__PURE__*/styled('div')(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    display: 'inline-flex',
+    marginRight: theme.spacing(1),
+    '& > .MuiSvgIcon-root': {
+      color: Color.Dark100,
+      fontSize: theme.spacing(3),
+      [theme.breakpoints.up('sm')]: {
+        fontSize: theme.spacing(2)
+      }
+    }
+  };
+}); //
+// DescriptionListItem
+//
+
+export var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var _ref3, _contentTypographyPro, _contentTypographyPro2;
+
+  var {
+    inset,
+    icon = inset ? /*#__PURE__*/_jsx(SvgIcon, {}) : null,
+    label,
+    labelTypographyProps,
+    content,
+    contentTypographyProps,
+    fallback
+  } = _ref2;
+  var labelID = useUID(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
+  var shouldRenderFallback = isEmptyReactNode(content);
+  return /*#__PURE__*/_jsxs(DescriptionListItemRoot, {
+    ref: ref,
+    "aria-labelledby": label != null ? labelID : undefined,
+    children: [!!icon && /*#__PURE__*/_jsx(DescriptionListItemIcon, {
+      children: icon
+    }), /*#__PURE__*/_jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
+      component: "span",
+      color: shouldRenderFallback && label == null ? 'textSecondary' : 'textPrimary',
+      TooltipProps: _objectSpread(_objectSpread({}, contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : contentTypographyProps.TooltipProps), {}, {
+        title: (_ref3 = (_contentTypographyPro = contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : (_contentTypographyPro2 = contentTypographyProps.TooltipProps) === null || _contentTypographyPro2 === void 0 ? void 0 : _contentTypographyPro2.title) !== null && _contentTypographyPro !== void 0 ? _contentTypographyPro : content) !== null && _ref3 !== void 0 ? _ref3 : undefined
+      }),
+      children: [label != null && /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
+        id: labelID,
+        variant: "body2",
+        component: "span",
+        color: "textSecondary",
+        children: label
+      })), label != null && ' ', !shouldRenderFallback ? content : fallback]
+    }))]
+  });
+}); //
+// DescriptionList
+//
+
+if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
+var DescriptionListRoot = /*#__PURE__*/styled('div', {
+  name: 'SD-DescriptionList',
+  slot: 'Root'
+})(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return _objectSpread(_objectSpread({}, sizeVariant(theme, 2, 1)), {}, {
+    '&[data-size="small"]': sizeVariant(theme, 1, 0.5),
+    '&[data-size="large"]': sizeVariant(theme, 3, 2)
+  });
+});
+
+function sizeVariant(theme, mobileSpacing, desktopSpacing) {
+  return {
+    ["& > ".concat(DescriptionListRoot, ", & > ").concat(DescriptionListItemRoot)]: {
+      '&:not(:last-child)': {
+        paddingBottom: theme.spacing(mobileSpacing),
+        [theme.breakpoints.up('sm')]: {
+          paddingBottom: theme.spacing(desktopSpacing)
+        }
+      }
+    }
+  };
+}
+
+export var DescriptionList = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  var {
+    size
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded);
+
+  return /*#__PURE__*/_jsx(DescriptionListRoot, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    "data-size": size
+  }));
+});
+if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";

package/dist-src/v5/dialog/DialogOverrides.js

@@ -0,0 +1,43 @@
+import { dialogClasses } from '@mui/material';
+export function overrideDialog(theme) {
+  theme.components.MuiDialog = {
+    styleOverrides: {
+      paper: {
+        margin: theme.spacing(3)
+      },
+      paperWidthXs: {
+        maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+        ["&.".concat(dialogClasses.paperScrollBody)]: {
+          [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+            maxWidth: 'calc(100% - 64px)'
+          }
+        }
+      }
+    }
+  };
+  theme.components.MuiDialogTitle = {
+    defaultProps: {
+      // @ts-expect-error DialogTitleProps has missing type def
+      variant: 'h3'
+    }
+  };
+  theme.components.MuiDialogContent = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(0, 3)
+      }
+    }
+  };
+  theme.components.MuiDialogActions = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(3)
+      },
+      spacing: {
+        '& > :not(:first-child)': {
+          marginLeft: theme.spacing(2)
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/drawer/DrawerActions.js

@@ -0,0 +1,69 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import { AppBar, styled, Toolbar } from '@mui/material';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { VisibilityObserver } from "../utils/VisibilityObserver.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    bottom: 0,
+    top: 'auto',
+    borderLeft: 'none',
+    borderRight: 'none',
+    borderBottom: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderTopColor: Color.Transparent
+    }
+  };
+});
+var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&.MuiToolbar-gutters': {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    }
+  };
+});
+export var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
+  var {
+    children
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  return /*#__PURE__*/_jsx(VisibilityObserver, {
+    render: _ref4 => {
+      var {
+        ref,
+        visibility
+      } = _ref4;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/_jsx(StyledToolbar, {
+            children: children
+          })
+        })), /*#__PURE__*/_jsx("div", {
+          ref: ref
+        })]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";

package/dist-src/v5/drawer/DrawerContent.js

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material';
+export var DrawerContent = /*#__PURE__*/styled('div', {
+  name: 'SD-DrawerContent'
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    maxWidth: '100%',
+    padding: theme.spacing(2, 3),
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(2, 4)
+    }
+  };
+});

package/dist-src/v5/drawer/DrawerList.js

@@ -0,0 +1,31 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { List, styled } from '@mui/material';
+
+function listItemMixins(theme, space) {
+  return {
+    '& .MuiListItem-gutters': {
+      paddingLeft: theme.spacing(space),
+      paddingRight: theme.spacing(space),
+      '&.MuiListItem-secondaryAction': {
+        paddingRight: theme.spacing(space * 2)
+      },
+      '& .MuiListItemSecondaryAction-root': {
+        right: theme.spacing(space),
+        '& .MuiIconButton-edgeEnd': {
+          marginRight: theme.spacing(-(space / 2))
+        }
+      }
+    }
+  };
+}
+
+export var DrawerList = /*#__PURE__*/styled(List)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return _objectSpread(_objectSpread({
+    maxWidth: '100%'
+  }, listItemMixins(theme, 3)), {}, {
+    [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
+  });
+});

package/dist-src/v5/drawer/DrawerOverrides.js

@@ -0,0 +1,17 @@
+export function overrideDrawer(theme) {
+  theme.components.MuiDrawer = {
+    defaultProps: {
+      anchor: 'right'
+    },
+    styleOverrides: {
+      paper: {
+        maxWidth: '100%',
+        minWidth: '100%',
+        [theme.breakpoints.up('sm')]: {
+          minWidth: theme.spacing(54),
+          maxWidth: theme.breakpoints.values.sm
+        }
+      }
+    }
+  };
+}

package/dist-src/v5/drawer/DrawerTitle.js

@@ -0,0 +1,119 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
+import { AppBar, Grid, styled, Toolbar, Typography } from '@mui/material';
+import { forwardRef } from 'react';
+import { Color } from "../theme/Color.js";
+import { VisibilityObserver } from "../utils/VisibilityObserver.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var StyledAppBar = /*#__PURE__*/styled(AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderBottomColor: Color.Transparent
+    }
+  };
+});
+var StyledToolbar = /*#__PURE__*/styled(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&.MuiToolbar-gutters': {
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
+      [theme.breakpoints.up('md')]: {
+        paddingLeft: theme.spacing(4),
+        paddingRight: theme.spacing(4)
+      }
+    }
+  };
+});
+var StartAction = /*#__PURE__*/styled(Grid)(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
+    marginRight: theme.spacing(0.5),
+    '& .MuiIconButton-edgeStart': {
+      marginLeft: theme.spacing(-2)
+    }
+  };
+});
+var EndAction = /*#__PURE__*/styled(Grid)(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return {
+    marginLeft: theme.spacing(0.5),
+    '& .MuiIconButton-edgeEnd': {
+      marginRight: theme.spacing(-2)
+    }
+  };
+});
+export var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
+  var {
+    title,
+    titleTypographyProps,
+    subtitle,
+    subtitleTypographyProps,
+    startAction,
+    endAction
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded);
+
+  return /*#__PURE__*/_jsx(VisibilityObserver, {
+    render: _ref6 => {
+      var {
+        ref,
+        visibility
+      } = _ref6;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("div", {
+          ref: ref
+        }), /*#__PURE__*/_jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+          ref: appBarRef,
+          position: "sticky",
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/_jsx(StyledToolbar, {
+            children: /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              alignItems: "center",
+              children: [!!startAction && /*#__PURE__*/_jsx(StartAction, {
+                item: true,
+                children: startAction
+              }), /*#__PURE__*/_jsxs(Grid, {
+                item: true,
+                xs: true,
+                zeroMinWidth: true,
+                children: [/*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({
+                  variant: "h3",
+                  noWrap: true
+                }, titleTypographyProps), {}, {
+                  children: title
+                })), !!subtitle && /*#__PURE__*/_jsx(Typography, _objectSpread(_objectSpread({
+                  variant: "body2",
+                  noWrap: true
+                }, subtitleTypographyProps), {}, {
+                  children: subtitle
+                }))]
+              }), !!endAction && /*#__PURE__*/_jsx(EndAction, {
+                item: true,
+                children: endAction
+              })]
+            })
+          })
+        }))]
+      });
+    }
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";

package/dist-src/v5/grid/GridStack.js

@@ -0,0 +1,33 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "alignItems"];
+import { Grid } from '@material-ui/core';
+import { Children, forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * @deprecated in favor of `Stack`.
+ */
+export var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    alignItems = 'stretch'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var items = Children.toArray(children);
+  return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    container: true,
+    wrap: "nowrap",
+    direction: "column",
+    alignItems: alignItems,
+    children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      zeroMinWidth: true,
+      xs: alignItems === 'stretch' ? 12 : undefined,
+      children: item
+    }, idx))
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";

package/dist-src/v5/grid/InlineGrid.js

@@ -0,0 +1,34 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "wrap", "justify", "alignItems"];
+import { Grid } from '@material-ui/core';
+import { Children, forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+/**
+ * @deprecated in favor of `Inline` component.
+ */
+export var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    wrap = 'wrap',
+    justify = 'flex-start',
+    alignItems = 'flex-start'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var items = Children.toArray(children);
+  return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    wrap: wrap,
+    container: true,
+    justify: justify,
+    alignItems: alignItems,
+    children: items.map((item, idx) => /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      zeroMinWidth: true,
+      children: item
+    }, idx))
+  }));
+});
+if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";

package/dist-src/v5/icon-button/IconButtonOverrides.js

@@ -0,0 +1,60 @@
+import { iconButtonClasses } from '@mui/material';
+import { Color } from "../theme/Color.js";
+export function overrideIconButton(theme) {
+  theme.components.MuiIconButton = {
+    styleOverrides: {
+      root: {
+        // no selector for default color
+        ["&:not(.".concat(iconButtonClasses.colorInherit, "):not(.").concat(iconButtonClasses.colorPrimary, "):not(.").concat(iconButtonClasses.colorSecondary, "):not(.").concat(iconButtonClasses.disabled, ")")]: {
+          color: Color.Dark100
+        },
+        backgroundColor: Color.Transparent,
+        transition: theme.transitions.create(['color', 'background-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        '&:hover': {
+          backgroundColor: Color.Transparent
+        },
+        '&:active': {
+          color: Color.Dark500
+        },
+        '&:hover ': {
+          color: Color.Dark300
+        },
+        '&:focus': {
+          backgroundColor: Color.Silver400
+        },
+        ["&.".concat(iconButtonClasses.disabled)]: {
+          color: Color.Silver500
+        }
+      },
+      colorPrimary: {
+        '&:active': {
+          color: Color.Blue500
+        },
+        '&:hover ': {
+          color: Color.Blue300
+        },
+        '&:focus': {
+          backgroundColor: Color.Blue50
+        }
+      },
+      edgeEnd: {
+        marginRight: theme.spacing(-1)
+      },
+      edgeStart: {
+        marginLeft: theme.spacing(-1)
+      },
+      sizeSmall: {
+        padding: 3,
+        fontSize: theme.typography.pxToRem(18)
+      },
+      sizeMedium: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(24)
+      },
+      sizeLarge: {// todo declare large size
+      }
+    }
+  };
+}

package/dist-src/v5/index.js

@@ -0,0 +1,38 @@
+export * from "./adaptive-toolbar/AdaptiveToolbar.js";
+export * from "./avatar-button/AvatarButton.js";
+export * from "./button/Button.js";
+export * from "./card-button/CardButton.js";
+export * from "./checkbox/CheckboxField.js";
+export * from "./checkbox/CheckboxGroudField.js";
+export * from "./columns/Column.js";
+export * from "./columns/Columns.js";
+export * from "./description-list/DescriptionList.js";
+export * from "./drawer/DrawerActions.js";
+export * from "./drawer/DrawerContent.js";
+export * from "./drawer/DrawerList.js";
+export * from "./drawer/DrawerTitle.js";
+export * from "./grid/GridStack.js";
+export * from "./grid/InlineGrid.js";
+export * from "./info-card/InfoCard.js";
+export * from "./inline/Inline.js";
+export * from "./overflow-text/OverflowText.js";
+export * from "./props/AlignProps.js";
+export * from "./props/CollapseProp.js";
+export * from "./props/ResponsiveProp.js";
+export * from "./props/SpaceProp.js";
+export * from "./radio/RadioField.js";
+export * from "./radio/RadioGroupField.js";
+export * from "./snackbar/Snackbar.js";
+export * from "./snackbar/SnackbarContent.js";
+export * from "./snackbar/SnackbarStack.js";
+export * from "./stack/Stack.js";
+export * from "./tag/Tag.js";
+export * from "./theme/Color.js";
+export * from "./theme/SuperDispatchTheme.js";
+export * from "./theme/ThemeProvider.js";
+export * from "./tiles/Tiles.js";
+export * from "./utils/isEmptyReactNode.js";
+export * from "./utils/mergeRefs.js";
+export * from "./utils/renderChildren.js";
+export * from "./utils/useUID.js";
+export * from "./utils/VisibilityObserver.js";