@cgi-learning-hub/ui 0.0.1-dev

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/TouchRipple.js

@@ -0,0 +1,340 @@
+import _extends from '../../../../../@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/extends.js';
+import _objectWithoutPropertiesLoose from '../../../../../@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js';
+import * as React from 'react';
+import PropTypes from '../../../../../prop-types@15.8.1/node_modules/prop-types/index.js';
+import { clsx } from '../../../../../clsx@2.1.0/node_modules/clsx/dist/clsx.js';
+import styled from '../styles/styled.js';
+import useThemeProps from '../styles/useThemeProps.js';
+import Ripple from './Ripple.js';
+import touchRippleClasses from './touchRippleClasses.js';
+import { jsx } from 'react/jsx-runtime';
+import TransitionGroup from '../../../../../react-transition-group@4.4.5_react-dom@18.2.0_react@18.2.0/node_modules/react-transition-group/esm/TransitionGroup.js';
+import { keyframes } from '@emotion/react';
+
+const _excluded = ["center", "classes", "className"];
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const DURATION = 550;
+const DELAY_RIPPLE = 80;
+const enterKeyframe = keyframes(_t || (_t = _`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`));
+const exitKeyframe = keyframes(_t2 || (_t2 = _`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`));
+const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`));
+const TouchRippleRoot = styled('span', {
+  name: 'MuiTouchRipple',
+  slot: 'Root'
+})({
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  position: 'absolute',
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: 'inherit'
+});
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+const TouchRippleRipple = styled(Ripple, {
+  name: 'MuiTouchRipple',
+  slot: 'Ripple'
+})(_t4 || (_t4 = _`
+  opacity: 0;
+  position: absolute;
+
+  &.${0} {
+    opacity: 0.3;
+    transform: scale(1);
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  &.${0} {
+    animation-duration: ${0}ms;
+  }
+
+  & .${0} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  & .${0} {
+    opacity: 0;
+    animation-name: ${0};
+    animation-duration: ${0}ms;
+    animation-timing-function: ${0};
+  }
+
+  & .${0} {
+    position: absolute;
+    /* @noflip */
+    left: 0px;
+    top: 0;
+    animation-name: ${0};
+    animation-duration: 2500ms;
+    animation-timing-function: ${0};
+    animation-iteration-count: infinite;
+    animation-delay: 200ms;
+  }
+`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({
+  theme
+}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({
+  theme
+}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({
+  theme
+}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({
+  theme
+}) => theme.transitions.easing.easeInOut);
+
+/**
+ * @ignore - internal component.
+ *
+ * TODO v5: Make private
+ */
+const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiTouchRipple'
+  });
+  const {
+      center: centerProp = false,
+      classes = {},
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [ripples, setRipples] = React.useState([]);
+  const nextKey = React.useRef(0);
+  const rippleCallback = React.useRef(null);
+  React.useEffect(() => {
+    if (rippleCallback.current) {
+      rippleCallback.current();
+      rippleCallback.current = null;
+    }
+  }, [ripples]);
+
+  // Used to filter out mouse emulated events on mobile.
+  const ignoringMouseDown = React.useRef(false);
+  // We use a timer in order to only show the ripples for touch "click" like events.
+  // We don't want to display the ripple for touch scroll events.
+  const startTimer = React.useRef(0);
+
+  // This is the hook called once the previous timeout is ready.
+  const startTimerCommit = React.useRef(null);
+  const container = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (startTimer.current) {
+        clearTimeout(startTimer.current);
+      }
+    };
+  }, []);
+  const startCommit = React.useCallback(params => {
+    const {
+      pulsate,
+      rippleX,
+      rippleY,
+      rippleSize,
+      cb
+    } = params;
+    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/jsx(TouchRippleRipple, {
+      classes: {
+        ripple: clsx(classes.ripple, touchRippleClasses.ripple),
+        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),
+        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),
+        child: clsx(classes.child, touchRippleClasses.child),
+        childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),
+        childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)
+      },
+      timeout: DURATION,
+      pulsate: pulsate,
+      rippleX: rippleX,
+      rippleY: rippleY,
+      rippleSize: rippleSize
+    }, nextKey.current)]);
+    nextKey.current += 1;
+    rippleCallback.current = cb;
+  }, [classes]);
+  const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {
+    const {
+      pulsate = false,
+      center = centerProp || options.pulsate,
+      fakeElement = false // For test purposes
+    } = options;
+    if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {
+      ignoringMouseDown.current = false;
+      return;
+    }
+    if ((event == null ? void 0 : event.type) === 'touchstart') {
+      ignoringMouseDown.current = true;
+    }
+    const element = fakeElement ? null : container.current;
+    const rect = element ? element.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+
+    // Get the size of the ripple
+    let rippleX;
+    let rippleY;
+    let rippleSize;
+    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+      rippleX = Math.round(rect.width / 2);
+      rippleY = Math.round(rect.height / 2);
+    } else {
+      const {
+        clientX,
+        clientY
+      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
+      rippleX = Math.round(clientX - rect.left);
+      rippleY = Math.round(clientY - rect.top);
+    }
+    if (center) {
+      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
+
+      // For some reason the animation is broken on Mobile Chrome if the size is even.
+      if (rippleSize % 2 === 0) {
+        rippleSize += 1;
+      }
+    } else {
+      const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+      const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+      rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+    }
+
+    // Touche devices
+    if (event != null && event.touches) {
+      // check that this isn't another touchstart due to multitouch
+      // otherwise we will only clear a single timer when unmounting while two
+      // are running
+      if (startTimerCommit.current === null) {
+        // Prepare the ripple effect.
+        startTimerCommit.current = () => {
+          startCommit({
+            pulsate,
+            rippleX,
+            rippleY,
+            rippleSize,
+            cb
+          });
+        };
+        // Delay the execution of the ripple effect.
+        startTimer.current = setTimeout(() => {
+          if (startTimerCommit.current) {
+            startTimerCommit.current();
+            startTimerCommit.current = null;
+          }
+        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+      }
+    } else {
+      startCommit({
+        pulsate,
+        rippleX,
+        rippleY,
+        rippleSize,
+        cb
+      });
+    }
+  }, [centerProp, startCommit]);
+  const pulsate = React.useCallback(() => {
+    start({}, {
+      pulsate: true
+    });
+  }, [start]);
+  const stop = React.useCallback((event, cb) => {
+    clearTimeout(startTimer.current);
+
+    // The touch interaction occurs too quickly.
+    // We still want to show ripple effect.
+    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
+      startTimerCommit.current();
+      startTimerCommit.current = null;
+      startTimer.current = setTimeout(() => {
+        stop(event, cb);
+      });
+      return;
+    }
+    startTimerCommit.current = null;
+    setRipples(oldRipples => {
+      if (oldRipples.length > 0) {
+        return oldRipples.slice(1);
+      }
+      return oldRipples;
+    });
+    rippleCallback.current = cb;
+  }, []);
+  React.useImperativeHandle(ref, () => ({
+    pulsate,
+    start,
+    stop
+  }), [pulsate, start, stop]);
+  return /*#__PURE__*/jsx(TouchRippleRoot, _extends({
+    className: clsx(touchRippleClasses.root, classes.root, className),
+    ref: container
+  }, other, {
+    children: /*#__PURE__*/jsx(TransitionGroup, {
+      component: null,
+      exit: true,
+      children: ripples
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string
+} : void 0;
+const TouchRipple$1 = TouchRipple;
+
+export { DELAY_RIPPLE, TouchRippleRipple, TouchRippleRoot, TouchRipple$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/buttonBaseClasses.js

@@ -0,0 +1,9 @@
+import generateUtilityClasses from '../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js';
+import generateUtilityClass from '../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js';
+
+function getButtonBaseUtilityClass(slot) {
+  return generateUtilityClass('MuiButtonBase', slot);
+}
+const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
+
+export { buttonBaseClasses as default, getButtonBaseUtilityClass };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonBase/touchRippleClasses.js

@@ -0,0 +1,5 @@
+import generateUtilityClasses from '../../../../../@mui_utils@5.15.6_@types_react@18.2.48_react@18.2.0/node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js';
+
+const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+
+export { touchRippleClasses as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonGroup/ButtonGroupButtonContext.js

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

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/ButtonGroup/ButtonGroupContext.js

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

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/Stack/Stack.js

@@ -0,0 +1,63 @@
+import PropTypes from '../../../../../prop-types@15.8.1/node_modules/prop-types/index.js';
+import styled from '../styles/styled.js';
+import useThemeProps from '../styles/useThemeProps.js';
+import createStack from '../../../../../@mui_system@5.15.6_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react@18.2.0/node_modules/@mui/system/esm/Stack/createStack.js';
+
+const Stack = createStack({
+  createStyledComponent: styled('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  useThemeProps: inProps => useThemeProps({
+    props: inProps,
+    name: 'MuiStack'
+  })
+});
+process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /**
+   * The system prop, which 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]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
+} : void 0;
+const Stack$1 = Stack;
+
+export { Stack$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/blue.js

@@ -0,0 +1,19 @@
+const blue = {
+  50: '#e3f2fd',
+  100: '#bbdefb',
+  200: '#90caf9',
+  300: '#64b5f6',
+  400: '#42a5f5',
+  500: '#2196f3',
+  600: '#1e88e5',
+  700: '#1976d2',
+  800: '#1565c0',
+  900: '#0d47a1',
+  A100: '#82b1ff',
+  A200: '#448aff',
+  A400: '#2979ff',
+  A700: '#2962ff'
+};
+const blue$1 = blue;
+
+export { blue$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/common.js

@@ -0,0 +1,7 @@
+const common = {
+  black: '#000',
+  white: '#fff'
+};
+const common$1 = common;
+
+export { common$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/green.js

@@ -0,0 +1,19 @@
+const green = {
+  50: '#e8f5e9',
+  100: '#c8e6c9',
+  200: '#a5d6a7',
+  300: '#81c784',
+  400: '#66bb6a',
+  500: '#4caf50',
+  600: '#43a047',
+  700: '#388e3c',
+  800: '#2e7d32',
+  900: '#1b5e20',
+  A100: '#b9f6ca',
+  A200: '#69f0ae',
+  A400: '#00e676',
+  A700: '#00c853'
+};
+const green$1 = green;
+
+export { green$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/grey.js

@@ -0,0 +1,19 @@
+const grey = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#eeeeee',
+  300: '#e0e0e0',
+  400: '#bdbdbd',
+  500: '#9e9e9e',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121',
+  A100: '#f5f5f5',
+  A200: '#eeeeee',
+  A400: '#bdbdbd',
+  A700: '#616161'
+};
+const grey$1 = grey;
+
+export { grey$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/lightBlue.js

@@ -0,0 +1,19 @@
+const lightBlue = {
+  50: '#e1f5fe',
+  100: '#b3e5fc',
+  200: '#81d4fa',
+  300: '#4fc3f7',
+  400: '#29b6f6',
+  500: '#03a9f4',
+  600: '#039be5',
+  700: '#0288d1',
+  800: '#0277bd',
+  900: '#01579b',
+  A100: '#80d8ff',
+  A200: '#40c4ff',
+  A400: '#00b0ff',
+  A700: '#0091ea'
+};
+const lightBlue$1 = lightBlue;
+
+export { lightBlue$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/orange.js

@@ -0,0 +1,19 @@
+const orange = {
+  50: '#fff3e0',
+  100: '#ffe0b2',
+  200: '#ffcc80',
+  300: '#ffb74d',
+  400: '#ffa726',
+  500: '#ff9800',
+  600: '#fb8c00',
+  700: '#f57c00',
+  800: '#ef6c00',
+  900: '#e65100',
+  A100: '#ffd180',
+  A200: '#ffab40',
+  A400: '#ff9100',
+  A700: '#ff6d00'
+};
+const orange$1 = orange;
+
+export { orange$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/purple.js

@@ -0,0 +1,19 @@
+const purple = {
+  50: '#f3e5f5',
+  100: '#e1bee7',
+  200: '#ce93d8',
+  300: '#ba68c8',
+  400: '#ab47bc',
+  500: '#9c27b0',
+  600: '#8e24aa',
+  700: '#7b1fa2',
+  800: '#6a1b9a',
+  900: '#4a148c',
+  A100: '#ea80fc',
+  A200: '#e040fb',
+  A400: '#d500f9',
+  A700: '#aa00ff'
+};
+const purple$1 = purple;
+
+export { purple$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/colors/red.js

@@ -0,0 +1,19 @@
+const red = {
+  50: '#ffebee',
+  100: '#ffcdd2',
+  200: '#ef9a9a',
+  300: '#e57373',
+  400: '#ef5350',
+  500: '#f44336',
+  600: '#e53935',
+  700: '#d32f2f',
+  800: '#c62828',
+  900: '#b71c1c',
+  A100: '#ff8a80',
+  A200: '#ff5252',
+  A400: '#ff1744',
+  A700: '#d50000'
+};
+const red$1 = red;
+
+export { red$1 as default };

package/dist/node_modules/.pnpm/@mui_material@5.15.0_@emotion_react@11.11.1_@emotion_styled@11.11.0_@types_react@18.2.48_react-dom@18.2.0_react@18.2.0/node_modules/@mui/material/styles/createMixins.js

@@ -0,0 +1,19 @@
+import _extends from '../../../../../@babel_runtime@7.23.9/node_modules/@babel/runtime/helpers/esm/extends.js';
+
+function createMixins(breakpoints, mixins) {
+  return _extends({
+    toolbar: {
+      minHeight: 56,
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
+      },
+      [breakpoints.up('sm')]: {
+        minHeight: 64
+      }
+    }
+  }, mixins);
+}
+
+export { createMixins as default };