@vodafone_de/brix-components 3.1.6 → 3.1.7

package/Paper/Paper.js

@@ -0,0 +1,177 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
+var _paperClasses = require("./paperClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    square,
+    elevation,
+    variant,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]
+  };
+  return (0, _composeClasses.default)(slots, _paperClasses.getPaperUtilityClass, classes);
+};
+const PaperRoot = (0, _zeroStyled.styled)('div', {
+  name: 'MuiPaper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
+  }
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: 'elevation'
+    },
+    style: {
+      boxShadow: 'var(--Paper-shadow)',
+      backgroundImage: 'var(--Paper-overlay)'
+    }
+  }]
+})));
+const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
+    props: inProps,
+    name: 'MuiPaper'
+  });
+  const theme = (0, _zeroStyled.useTheme)();
+  const {
+    className,
+    component = 'div',
+    elevation = 1,
+    square = false,
+    variant = 'elevation',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    component,
+    elevation,
+    square,
+    variant
+  };
+  const classes = useUtilityClasses(ownerState);
+  if (process.env.NODE_ENV !== 'production') {
+    if (theme.shadows[elevation] === undefined) {
+      console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperRoot, {
+    as: component,
+    ownerState: ownerState,
+    className: (0, _clsx.default)(classes.root, className),
+    ref: ref,
+    ...other,
+    style: {
+      ...(variant === 'elevation' && {
+        '--Paper-shadow': (theme.vars || theme).shadows[elevation],
+        ...(theme.vars && {
+          '--Paper-overlay': theme.vars.overlays?.[elevation]
+        }),
+        ...(!theme.vars && theme.palette.mode === 'dark' && {
+          '--Paper-overlay': `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))})`
+        })
+      }),
+      ...other.style
+    }
+  });
+});
+process.env.NODE_ENV !== "production" ? Paper.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.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 1
+   */
+  elevation: (0, _chainPropTypes.default)(_integerPropType.default, props => {
+    const {
+      elevation,
+      variant
+    } = props;
+    if (elevation > 0 && variant === 'outlined') {
+      return new Error(`MUI: Combining \`elevation={${elevation}}\` with \`variant="${variant}"\` has no effect. Either use \`elevation={0}\` or use a different \`variant\`.`);
+    }
+    return null;
+  }),
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: _propTypes.default.bool,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * The variant to use.
+   * @default 'elevation'
+   */
+  variant: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['elevation', 'outlined']), _propTypes.default.string])
+} : void 0;
+var _default = exports.default = Paper;

package/Paper/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Paper.js";
+export type { PaperProps, PaperOwnProps, PaperPropsVariantOverrides, PaperTypeMap } from "./Paper.js";
+export { default as paperClasses } from "./paperClasses.js";
+export * from "./paperClasses.js";

package/Paper/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  paperClasses: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Paper.default;
+  }
+});
+Object.defineProperty(exports, "paperClasses", {
+  enumerable: true,
+  get: function () {
+    return _paperClasses.default;
+  }
+});
+var _Paper = _interopRequireDefault(require("./Paper"));
+var _paperClasses = _interopRequireWildcard(require("./paperClasses"));
+Object.keys(_paperClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _paperClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _paperClasses[key];
+    }
+  });
+});

package/Paper/paperClasses.d.ts

@@ -0,0 +1,64 @@
+export interface PaperClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element unless `square={true}`. */
+  rounded: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `variant="elevation"`. */
+  elevation: string;
+  /** Styles applied to the root element if `elevation={0}`. */
+  elevation0: string;
+  /** Styles applied to the root element if `elevation={1}`. */
+  elevation1: string;
+  /** Styles applied to the root element if `elevation={2}`. */
+  elevation2: string;
+  /** Styles applied to the root element if `elevation={3}`. */
+  elevation3: string;
+  /** Styles applied to the root element if `elevation={4}`. */
+  elevation4: string;
+  /** Styles applied to the root element if `elevation={5}`. */
+  elevation5: string;
+  /** Styles applied to the root element if `elevation={6}`. */
+  elevation6: string;
+  /** Styles applied to the root element if `elevation={7}`. */
+  elevation7: string;
+  /** Styles applied to the root element if `elevation={8}`. */
+  elevation8: string;
+  /** Styles applied to the root element if `elevation={9}`. */
+  elevation9: string;
+  /** Styles applied to the root element if `elevation={10}`. */
+  elevation10: string;
+  /** Styles applied to the root element if `elevation={11}`. */
+  elevation11: string;
+  /** Styles applied to the root element if `elevation={12}`. */
+  elevation12: string;
+  /** Styles applied to the root element if `elevation={13}`. */
+  elevation13: string;
+  /** Styles applied to the root element if `elevation={14}`. */
+  elevation14: string;
+  /** Styles applied to the root element if `elevation={15}`. */
+  elevation15: string;
+  /** Styles applied to the root element if `elevation={16}`. */
+  elevation16: string;
+  /** Styles applied to the root element if `elevation={17}`. */
+  elevation17: string;
+  /** Styles applied to the root element if `elevation={18}`. */
+  elevation18: string;
+  /** Styles applied to the root element if `elevation={19}`. */
+  elevation19: string;
+  /** Styles applied to the root element if `elevation={20}`. */
+  elevation20: string;
+  /** Styles applied to the root element if `elevation={21}`. */
+  elevation21: string;
+  /** Styles applied to the root element if `elevation={22}`. */
+  elevation22: string;
+  /** Styles applied to the root element if `elevation={23}`. */
+  elevation23: string;
+  /** Styles applied to the root element if `elevation={24}`. */
+  elevation24: string;
+}
+export type PaperClassKey = keyof PaperClasses;
+export declare function getPaperUtilityClass(slot: string): string;
+declare const paperClasses: PaperClasses;
+export default paperClasses;

package/Paper/paperClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getPaperUtilityClass = getPaperUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getPaperUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiPaper', slot);
+}
+const paperClasses = (0, _generateUtilityClasses.default)('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
+var _default = exports.default = paperClasses;

package/PigmentContainer/PigmentContainer.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps, Breakpoint } from '@mui/system';
+import { Theme } from "../styles/index.js";
+import { ContainerClasses } from "../Container/containerClasses.js";
+export interface PigmentContainerOwnProps {
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ContainerClasses>;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth?: Breakpoint | false;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface PigmentContainerTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & PigmentContainerOwnProps;
+  defaultComponent: RootComponent;
+}
+export type PigmentContainerProps<RootComponent extends React.ElementType = PigmentContainerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<PigmentContainerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://mui.com/material-ui/api/pigment-container/)
+ */
+declare const PigmentContainer: OverridableComponent<PigmentContainerTypeMap>;
+export default PigmentContainer;

package/PigmentContainer/PigmentContainer.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Container = _interopRequireDefault(require("@mui/material-pigment-css/Container"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _jsxRuntime = require("react/jsx-runtime");
+// @ts-ignore
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    fixed,
+    disableGutters,
+    maxWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', maxWidth && `maxWidth${(0, _capitalize.default)(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
+  };
+  return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiContainer', slot), classes);
+};
+/**
+ *
+ * Demos:
+ *
+ * - [Container](https://mui.com/material-ui/react-container/)
+ *
+ * API:
+ *
+ * - [PigmentContainer API](https://mui.com/material-ui/api/pigment-container/)
+ */
+const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
+  className,
+  disableGutters = false,
+  fixed = false,
+  maxWidth = 'lg',
+  ...props
+}, ref) {
+  const ownerState = {
+    ...props,
+    disableGutters,
+    fixed,
+    maxWidth
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+    className: (0, _clsx.default)(classes.root, className),
+    disableGutters: disableGutters,
+    fixed: fixed,
+    maxWidth: maxWidth,
+    ...props,
+    // @ts-ignore
+    ref: ref
+  });
+});
+process.env.NODE_ENV !== "production" ? PigmentContainer.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: _propTypes.default.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: _propTypes.default.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = exports.default = PigmentContainer;

package/PigmentContainer/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./PigmentContainer.js";
+export * from "./PigmentContainer.js";
+export { default as containerClasses } from "../Container/containerClasses.js";

package/PigmentContainer/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  containerClasses: true
+};
+Object.defineProperty(exports, "containerClasses", {
+  enumerable: true,
+  get: function () {
+    return _containerClasses.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PigmentContainer.default;
+  }
+});
+var _PigmentContainer = _interopRequireWildcard(require("./PigmentContainer"));
+Object.keys(_PigmentContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PigmentContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PigmentContainer[key];
+    }
+  });
+});
+var _containerClasses = _interopRequireDefault(require("../Container/containerClasses"));

package/PigmentGrid/PigmentGrid.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { Breakpoint, Theme } from "../styles/index.js";
+type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | 'grow' | number;
+export interface GridBaseProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns?: ResponsiveStyleValue<number>;
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container?: boolean;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction?: ResponsiveStyleValue<GridDirection>;
+  /**
+   * Defines the offset of the grid.
+   */
+  offset?: ResponsiveStyleValue<number> | undefined;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+  /**
+   * Defines the column size of the grid.
+   */
+  size?: ResponsiveStyleValue<GridSize> | undefined;
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap?: GridWrap;
+}
+export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  };
+  defaultComponent: DefaultComponent;
+}
+export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
+/**
+ *
+ * Demos:
+ *
+ * - [Grid](https://mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [PigmentGrid API](https://mui.com/material-ui/api/pigment-grid/)
+ */
+declare const PigmentGrid: OverridableComponent<GridTypeMap>;
+export default PigmentGrid;