worked on GarageApp stuff

node_modules/@mui/material/esm/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from "../styles/index.js";
+import { InternalStandardProps as StandardProps } from "../internal/index.js";
+import { ToggleButtonGroupClasses } from "./toggleButtonGroupClasses.js";
+export interface ToggleButtonGroupPropsSizeOverrides {}
+export interface ToggleButtonGroupPropsColorOverrides {}
+export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ToggleButtonGroupClasses>;
+  /**
+   * The color of the button when it is selected.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'standard'
+   */
+  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonGroupPropsColorOverrides>;
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   * @default false
+   */
+  exclusive?: boolean;
+  /**
+   * If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the button group will take up the full width of its container.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   */
+  value?: any;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
+ *
+ * API:
+ *
+ * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
+ */
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

node_modules/@mui/material/esm/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,281 @@
+'use client';
+
+import * as React from 'react';
+import { isFragment } from 'react-is';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
+import getValidReactChildren from '@mui/utils/getValidReactChildren';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import capitalize from "../utils/capitalize.js";
+import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from "./toggleButtonGroupClasses.js";
+import ToggleButtonGroupContext from "./ToggleButtonGroupContext.js";
+import ToggleButtonGroupButtonContext from "./ToggleButtonGroupButtonContext.js";
+import toggleButtonClasses from "../ToggleButton/toggleButtonClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    orientation,
+    fullWidth,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ['root', orientation, fullWidth && 'fullWidth'],
+    grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
+  };
+  return composeClasses(slots, getToggleButtonGroupUtilityClass, classes);
+};
+const ToggleButtonGroupRoot = styled('div', {
+  name: 'MuiToggleButtonGroup',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${toggleButtonGroupClasses.grouped}`]: styles.grouped
+    }, {
+      [`& .${toggleButtonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
+    }, {
+      [`& .${toggleButtonGroupClasses.firstButton}`]: styles.firstButton
+    }, {
+      [`& .${toggleButtonGroupClasses.lastButton}`]: styles.lastButton
+    }, {
+      [`& .${toggleButtonGroupClasses.middleButton}`]: styles.middleButton
+    }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  display: 'inline-flex',
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderTop: 0,
+          marginTop: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginTop: -1,
+        borderTop: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderTop: '1px solid transparent'
+      }
+    }
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderLeft: 0,
+          marginLeft: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginLeft: -1,
+        borderLeft: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderLeft: '1px solid transparent'
+      }
+    }
+  }]
+})));
+const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiToggleButtonGroup'
+  });
+  const {
+    children,
+    className,
+    color = 'standard',
+    disabled = false,
+    exclusive = false,
+    fullWidth = false,
+    onChange,
+    orientation = 'horizontal',
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    disabled,
+    fullWidth,
+    orientation,
+    size
+  };
+  const classes = useUtilityClasses(ownerState);
+  const handleChange = React.useCallback((event, buttonValue) => {
+    if (!onChange) {
+      return;
+    }
+    const index = value && value.indexOf(buttonValue);
+    let newValue;
+    if (value && index >= 0) {
+      newValue = value.slice();
+      newValue.splice(index, 1);
+    } else {
+      newValue = value ? value.concat(buttonValue) : [buttonValue];
+    }
+    onChange(event, newValue);
+  }, [onChange, value]);
+  const handleExclusiveChange = React.useCallback((event, buttonValue) => {
+    if (!onChange) {
+      return;
+    }
+    onChange(event, value === buttonValue ? null : buttonValue);
+  }, [onChange, value]);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    onChange: exclusive ? handleExclusiveChange : handleChange,
+    value,
+    size,
+    fullWidth,
+    color,
+    disabled
+  }), [classes.grouped, exclusive, handleExclusiveChange, handleChange, value, size, fullWidth, color, disabled]);
+  const validChildren = getValidReactChildren(children);
+  const childrenCount = validChildren.length;
+  const getButtonPositionClassName = index => {
+    const isFirstButton = index === 0;
+    const isLastButton = index === childrenCount - 1;
+    if (isFirstButton && isLastButton) {
+      return '';
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
+  };
+  return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, {
+    role: "group",
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState,
+    ...other,
+    children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
+      value: context,
+      children: validChildren.map((child, index) => {
+        if (process.env.NODE_ENV !== 'production') {
+          if (isFragment(child)) {
+            console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          }
+        }
+        return /*#__PURE__*/_jsx(ToggleButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index),
+          children: child
+        }, index);
+      })
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the button when it is selected.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'standard'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['standard', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   * @default false
+   */
+  exclusive: PropTypes.bool,
+  /**
+   * If `true`, the button group will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   */
+  value: PropTypes.any
+} : void 0;
+export default ToggleButtonGroup;

node_modules/@mui/material/esm/ToggleButtonGroup/ToggleButtonGroupButtonContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+declare const ToggleButtonGroupButtonContext: React.Context<string | undefined>;
+export default ToggleButtonGroupButtonContext;

node_modules/@mui/material/esm/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+const ToggleButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupButtonContext.displayName = 'ToggleButtonGroupButtonContext';
+}
+export default ToggleButtonGroupButtonContext;

node_modules/@mui/material/esm/ToggleButtonGroup/ToggleButtonGroupContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { ToggleButtonGroupProps } from "./ToggleButtonGroup.js";
+interface ToggleButtonGroupContextType {
+  className?: string;
+  onChange?: ToggleButtonGroupProps['onChange'];
+  value?: ToggleButtonGroupProps['value'];
+  size?: ToggleButtonGroupProps['size'];
+  fullWidth?: ToggleButtonGroupProps['fullWidth'];
+  color?: ToggleButtonGroupProps['color'];
+  disabled?: ToggleButtonGroupProps['disabled'];
+}
+/**
+ * @ignore - internal component.
+ */
+declare const ToggleButtonGroupContext: React.Context<ToggleButtonGroupContextType>;
+export default ToggleButtonGroupContext;

node_modules/@mui/material/esm/ToggleButtonGroup/ToggleButtonGroupContext.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+const ToggleButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';
+}
+export default ToggleButtonGroupContext;

node_modules/@mui/material/esm/ToggleButtonGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./ToggleButtonGroup.js";
+export * from "./ToggleButtonGroup.js";
+export { default as toggleButtonGroupClasses } from "./toggleButtonGroupClasses.js";
+export * from "./toggleButtonGroupClasses.js";

node_modules/@mui/material/esm/ToggleButtonGroup/index.js

@@ -0,0 +1,3 @@
+export { default } from "./ToggleButtonGroup.js";
+export { default as toggleButtonGroupClasses } from "./toggleButtonGroupClasses.js";
+export * from "./toggleButtonGroupClasses.js";

node_modules/@mui/material/esm/ToggleButtonGroup/isValueSelected.js

@@ -0,0 +1,11 @@
+// Determine if the toggle button value matches, or is contained in, the
+// candidate group value.
+export default function isValueSelected(value, candidate) {
+  if (candidate === undefined || value === undefined) {
+    return false;
+  }
+  if (Array.isArray(candidate)) {
+    return candidate.includes(value);
+  }
+  return value === candidate;
+}

node_modules/@mui/material/esm/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -0,0 +1,34 @@
+export interface ToggleButtonGroupClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the root element if `selected={true}`. */
+  selected: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the children. */
+  grouped: string;
+  /** Styles applied to the children if `orientation="horizontal"`.
+   *  @deprecated Combine the [.MuiToggleButtonGroup-horizontal](/material-ui/api/toggle-button-group/#toggle-button-group-classes-horizontal) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  groupedHorizontal: string;
+  /** Styles applied to the children if `orientation="vertical"`.
+   * @deprecated Combine the [.MuiToggleButtonGroup-vertical](/material-ui/api/toggle-button-group/#toggle-button-group-classes-vertical) and [.MuiToggleButtonGroup-grouped](/material-ui/api/toggle-button-group/#toggle-button-group-classes-grouped) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  groupedVertical: string;
+  /** Styles applied to the root element if `fullWidth={true}`. */
+  fullWidth: string;
+  /** Styles applied to the first button in the toggle button group. */
+  firstButton: string;
+  /** Styles applied to the last button in the toggle button group. */
+  lastButton: string;
+  /** Styles applied to buttons in the middle of the toggle button group. */
+  middleButton: string;
+}
+export type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
+export declare function getToggleButtonGroupUtilityClass(slot: string): string;
+declare const toggleButtonGroupClasses: ToggleButtonGroupClasses;
+export default toggleButtonGroupClasses;

node_modules/@mui/material/esm/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getToggleButtonGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiToggleButtonGroup', slot);
+}
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+export default toggleButtonGroupClasses;