@vodafone_de/brix-components 3.1.3 → 3.1.6

package/styles/createGetSelector.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
-var _default = theme => (colorScheme, css) => {
-  const root = theme.rootSelector || ':root';
-  const selector = theme.colorSchemeSelector;
-  let rule = selector;
-  if (selector === 'class') {
-    rule = '.%s';
-  }
-  if (selector === 'data') {
-    rule = '[data-%s]';
-  }
-  if (selector?.startsWith('data-') && !selector.includes('%s')) {
-    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
-    rule = `[${selector}="%s"]`;
-  }
-  if (theme.defaultColorScheme === colorScheme) {
-    if (colorScheme === 'dark') {
-      const excludedVariables = {};
-      (0, _excludeVariablesFromRoot.default)(theme.cssVarPrefix).forEach(cssVar => {
-        excludedVariables[cssVar] = css[cssVar];
-        delete css[cssVar];
-      });
-      if (rule === 'media') {
-        return {
-          [root]: css,
-          [`@media (prefers-color-scheme: dark)`]: {
-            [root]: excludedVariables
-          }
-        };
-      }
-      if (rule) {
-        return {
-          [rule.replace('%s', colorScheme)]: excludedVariables,
-          [`${root}, ${rule.replace('%s', colorScheme)}`]: css
-        };
-      }
-      return {
-        [root]: {
-          ...css,
-          ...excludedVariables
-        }
-      };
-    }
-    if (rule && rule !== 'media') {
-      return `${root}, ${rule.replace('%s', String(colorScheme))}`;
-    }
-  } else if (colorScheme) {
-    if (rule === 'media') {
-      return {
-        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
-          [root]: css
-        }
-      };
-    }
-    if (rule) {
-      return rule.replace('%s', String(colorScheme));
-    }
-  }
-  return root;
-};
-exports.default = _default;

package/styles/createMixins.d.ts

@@ -1,32 +0,0 @@
-import * as CSS from 'csstype';
-import { Breakpoints } from '@mui/system';
-export type NormalCssProperties = CSS.Properties<number | string>;
-export type Fontface = CSS.AtRule.FontFace & {
-  fallbacks?: CSS.AtRule.FontFace[];
-};
-
-/**
- * Allows the user to augment the properties available
- */
-export interface BaseCSSProperties extends NormalCssProperties {
-  '@font-face'?: Fontface | Fontface[];
-}
-export interface CSSProperties extends BaseCSSProperties {
-  // Allow pseudo selectors and media queries
-  // `unknown` is used since TS does not allow assigning an interface without
-  // an index signature to one with an index signature. This is to allow type safe
-  // module augmentation.
-  // Technically we want any key not typed in `BaseCSSProperties` to be of type
-  // `CSSProperties` but this doesn't work. The index signature needs to cover
-  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
-  // but this would not allow assigning React.CSSProperties to CSSProperties
-  [k: string]: unknown | CSSProperties;
-}
-export interface Mixins {
-  toolbar: CSSProperties;
-  // ... use interface declaration merging to add custom mixins
-}
-export interface MixinsOptions extends Partial<Mixins> {
-  // ... use interface declaration merging to add custom mixin options
-}
-export default function createMixins(breakpoints: Breakpoints, mixins: MixinsOptions): Mixins;

package/styles/createMixins.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createMixins;
-function createMixins(breakpoints, mixins) {
-  return {
-    toolbar: {
-      minHeight: 56,
-      [breakpoints.up('xs')]: {
-        '@media (orientation: landscape)': {
-          minHeight: 48
-        }
-      },
-      [breakpoints.up('sm')]: {
-        minHeight: 64
-      }
-    },
-    ...mixins
-  };
-}

package/styles/createMuiStrictModeTheme.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createMuiStrictModeTheme;
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _createTheme = _interopRequireDefault(require("./createTheme"));
-function createMuiStrictModeTheme(options, ...args) {
-  return (0, _createTheme.default)((0, _deepmerge.default)({
-    unstable_strictMode: true
-  }, options), ...args);
-}

package/styles/createPalette.d.ts

@@ -1,125 +0,0 @@
-export type PaletteMode = 'light' | 'dark';
-export interface Color {
-  50: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-  600: string;
-  700: string;
-  800: string;
-  900: string;
-  A100: string;
-  A200: string;
-  A400: string;
-  A700: string;
-}
-export {};
-// use standalone interface over typeof colors/commons
-// to enable module augmentation
-export interface CommonColors {
-  black: string;
-  white: string;
-}
-export type ColorPartial = Partial<Color>;
-export interface TypeText {
-  primary: string;
-  secondary: string;
-  disabled: string;
-}
-export interface TypeAction {
-  active: string;
-  hover: string;
-  hoverOpacity: number;
-  selected: string;
-  selectedOpacity: number;
-  disabled: string;
-  disabledOpacity: number;
-  disabledBackground: string;
-  focus: string;
-  focusOpacity: number;
-  activatedOpacity: number;
-}
-export interface TypeBackground {
-  default: string;
-  paper: string;
-}
-export type TypeDivider = string;
-export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
-export interface SimplePaletteColorOptions {
-  light?: string;
-  main: string;
-  dark?: string;
-  contrastText?: string;
-}
-export interface PaletteColor {
-  light: string;
-  main: string;
-  dark: string;
-  contrastText: string;
-}
-export interface TypeObject {
-  text: TypeText;
-  action: TypeAction;
-  divider: TypeDivider;
-  background: TypeBackground;
-}
-export type PaletteTonalOffset = number | {
-  light: number;
-  dark: number;
-};
-export const light: TypeObject;
-export const dark: TypeObject;
-export interface PaletteAugmentColorOptions {
-  color: PaletteColorOptions;
-  mainShade?: number | string;
-  lightShade?: number | string;
-  darkShade?: number | string;
-  name?: number | string;
-}
-export interface Palette {
-  common: CommonColors;
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor;
-  secondary: PaletteColor;
-  error: PaletteColor;
-  warning: PaletteColor;
-  info: PaletteColor;
-  success: PaletteColor;
-  grey: Color;
-  text: TypeText;
-  divider: TypeDivider;
-  action: TypeAction;
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-}
-export interface Channels {
-  mainChannel: string;
-  lightChannel: string;
-  darkChannel: string;
-  contrastTextChannel: string;
-}
-export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
-export interface PaletteOptions {
-  primary?: PaletteColorOptions;
-  secondary?: PaletteColorOptions;
-  error?: PaletteColorOptions;
-  warning?: PaletteColorOptions;
-  info?: PaletteColorOptions;
-  success?: PaletteColorOptions;
-  mode?: PaletteMode;
-  tonalOffset?: PaletteTonalOffset;
-  contrastThreshold?: number;
-  common?: Partial<CommonColors>;
-  grey?: ColorPartial;
-  text?: Partial<TypeText>;
-  divider?: string;
-  action?: Partial<TypeAction>;
-  background?: Partial<TypeBackground>;
-  getContrastText?: (background: string) => string;
-}
-export default function createPalette(palette: PaletteOptions): Palette;

package/styles/createPalette.js

@@ -1,311 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dark = void 0;
-exports.default = createPalette;
-exports.light = void 0;
-var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-var _colorManipulator = require("@mui/system/colorManipulator");
-var _common = _interopRequireDefault(require("../colors/common"));
-var _grey = _interopRequireDefault(require("../colors/grey"));
-var _purple = _interopRequireDefault(require("../colors/purple"));
-var _red = _interopRequireDefault(require("../colors/red"));
-var _orange = _interopRequireDefault(require("../colors/orange"));
-var _blue = _interopRequireDefault(require("../colors/blue"));
-var _lightBlue = _interopRequireDefault(require("../colors/lightBlue"));
-var _green = _interopRequireDefault(require("../colors/green"));
-function getLight() {
-  return {
-    // The colors used to style the text.
-    text: {
-      // The most important text.
-      primary: 'rgba(0, 0, 0, 0.87)',
-      // Secondary text.
-      secondary: 'rgba(0, 0, 0, 0.6)',
-      // Disabled text have even lower visual prominence.
-      disabled: 'rgba(0, 0, 0, 0.38)'
-    },
-    // The color used to divide different elements.
-    divider: 'rgba(0, 0, 0, 0.12)',
-    // The background colors used to style the surfaces.
-    // Consistency between these values is important.
-    background: {
-      paper: _common.default.white,
-      default: _common.default.white
-    },
-    // The colors used to style the action elements.
-    action: {
-      // The color of an active action like an icon button.
-      active: 'rgba(0, 0, 0, 0.54)',
-      // The color of an hovered action.
-      hover: 'rgba(0, 0, 0, 0.04)',
-      hoverOpacity: 0.04,
-      // The color of a selected action.
-      selected: 'rgba(0, 0, 0, 0.08)',
-      selectedOpacity: 0.08,
-      // The color of a disabled action.
-      disabled: 'rgba(0, 0, 0, 0.26)',
-      // The background color of a disabled action.
-      disabledBackground: 'rgba(0, 0, 0, 0.12)',
-      disabledOpacity: 0.38,
-      focus: 'rgba(0, 0, 0, 0.12)',
-      focusOpacity: 0.12,
-      activatedOpacity: 0.12
-    }
-  };
-}
-const light = exports.light = getLight();
-function getDark() {
-  return {
-    text: {
-      primary: _common.default.white,
-      secondary: 'rgba(255, 255, 255, 0.7)',
-      disabled: 'rgba(255, 255, 255, 0.5)',
-      icon: 'rgba(255, 255, 255, 0.5)'
-    },
-    divider: 'rgba(255, 255, 255, 0.12)',
-    background: {
-      paper: '#121212',
-      default: '#121212'
-    },
-    action: {
-      active: _common.default.white,
-      hover: 'rgba(255, 255, 255, 0.08)',
-      hoverOpacity: 0.08,
-      selected: 'rgba(255, 255, 255, 0.16)',
-      selectedOpacity: 0.16,
-      disabled: 'rgba(255, 255, 255, 0.3)',
-      disabledBackground: 'rgba(255, 255, 255, 0.12)',
-      disabledOpacity: 0.38,
-      focus: 'rgba(255, 255, 255, 0.12)',
-      focusOpacity: 0.12,
-      activatedOpacity: 0.24
-    }
-  };
-}
-const dark = exports.dark = getDark();
-function addLightOrDark(intent, direction, shade, tonalOffset) {
-  const tonalOffsetLight = tonalOffset.light || tonalOffset;
-  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
-  if (!intent[direction]) {
-    if (intent.hasOwnProperty(shade)) {
-      intent[direction] = intent[shade];
-    } else if (direction === 'light') {
-      intent.light = (0, _colorManipulator.lighten)(intent.main, tonalOffsetLight);
-    } else if (direction === 'dark') {
-      intent.dark = (0, _colorManipulator.darken)(intent.main, tonalOffsetDark);
-    }
-  }
-}
-function getDefaultPrimary(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: _blue.default[200],
-      light: _blue.default[50],
-      dark: _blue.default[400]
-    };
-  }
-  return {
-    main: _blue.default[700],
-    light: _blue.default[400],
-    dark: _blue.default[800]
-  };
-}
-function getDefaultSecondary(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: _purple.default[200],
-      light: _purple.default[50],
-      dark: _purple.default[400]
-    };
-  }
-  return {
-    main: _purple.default[500],
-    light: _purple.default[300],
-    dark: _purple.default[700]
-  };
-}
-function getDefaultError(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: _red.default[500],
-      light: _red.default[300],
-      dark: _red.default[700]
-    };
-  }
-  return {
-    main: _red.default[700],
-    light: _red.default[400],
-    dark: _red.default[800]
-  };
-}
-function getDefaultInfo(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: _lightBlue.default[400],
-      light: _lightBlue.default[300],
-      dark: _lightBlue.default[700]
-    };
-  }
-  return {
-    main: _lightBlue.default[700],
-    light: _lightBlue.default[500],
-    dark: _lightBlue.default[900]
-  };
-}
-function getDefaultSuccess(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: _green.default[400],
-      light: _green.default[300],
-      dark: _green.default[700]
-    };
-  }
-  return {
-    main: _green.default[800],
-    light: _green.default[500],
-    dark: _green.default[900]
-  };
-}
-function getDefaultWarning(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: _orange.default[400],
-      light: _orange.default[300],
-      dark: _orange.default[700]
-    };
-  }
-  return {
-    main: '#ed6c02',
-    // closest to orange[800] that pass 3:1.
-    light: _orange.default[500],
-    dark: _orange.default[900]
-  };
-}
-function createPalette(palette) {
-  const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2,
-    ...other
-  } = palette;
-  const primary = palette.primary || getDefaultPrimary(mode);
-  const secondary = palette.secondary || getDefaultSecondary(mode);
-  const error = palette.error || getDefaultError(mode);
-  const info = palette.info || getDefaultInfo(mode);
-  const success = palette.success || getDefaultSuccess(mode);
-  const warning = palette.warning || getDefaultWarning(mode);
-
-  // Use the same logic as
-  // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
-  // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-  function getContrastText(background) {
-    const contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
-    if (process.env.NODE_ENV !== 'production') {
-      const contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
-      if (contrast < 3) {
-        console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
-      }
-    }
-    return contrastText;
-  }
-  const augmentColor = ({
-    color,
-    name,
-    mainShade = 500,
-    lightShade = 300,
-    darkShade = 700
-  }) => {
-    color = {
-      ...color
-    };
-    if (!color.main && color[mainShade]) {
-      color.main = color[mainShade];
-    }
-    if (!color.hasOwnProperty('main')) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : (0, _formatMuiErrorMessage.default)(11, name ? ` (${name})` : '', mainShade));
-    }
-    if (typeof color.main !== 'string') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : (0, _formatMuiErrorMessage.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
-    }
-    addLightOrDark(color, 'light', lightShade, tonalOffset);
-    addLightOrDark(color, 'dark', darkShade, tonalOffset);
-    if (!color.contrastText) {
-      color.contrastText = getContrastText(color.main);
-    }
-    return color;
-  };
-  let modeHydrated;
-  if (mode === 'light') {
-    modeHydrated = getLight();
-  } else if (mode === 'dark') {
-    modeHydrated = getDark();
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    if (!modeHydrated) {
-      console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
-    }
-  }
-  const paletteOutput = (0, _deepmerge.default)({
-    // A collection of common colors.
-    common: {
-      ..._common.default
-    },
-    // prevent mutable object.
-    // The palette mode, can be light or dark.
-    mode,
-    // The colors used to represent primary interface elements for a user.
-    primary: augmentColor({
-      color: primary,
-      name: 'primary'
-    }),
-    // The colors used to represent secondary interface elements for a user.
-    secondary: augmentColor({
-      color: secondary,
-      name: 'secondary',
-      mainShade: 'A400',
-      lightShade: 'A200',
-      darkShade: 'A700'
-    }),
-    // The colors used to represent interface elements that the user should be made aware of.
-    error: augmentColor({
-      color: error,
-      name: 'error'
-    }),
-    // The colors used to represent potentially dangerous actions or important messages.
-    warning: augmentColor({
-      color: warning,
-      name: 'warning'
-    }),
-    // The colors used to present information to the user that is neutral and not necessarily important.
-    info: augmentColor({
-      color: info,
-      name: 'info'
-    }),
-    // The colors used to indicate the successful completion of an action that user triggered.
-    success: augmentColor({
-      color: success,
-      name: 'success'
-    }),
-    // The grey colors.
-    grey: _grey.default,
-    // Used by `getContrastText()` to maximize the contrast between
-    // the background and the text.
-    contrastThreshold,
-    // Takes a background color and returns the text color that maximizes the contrast.
-    getContrastText,
-    // Generate a rich color object.
-    augmentColor,
-    // Used by the functions below to shift a color's luminance by approximately
-    // two indexes within its tonal palette.
-    // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset,
-    // The light and dark mode object.
-    ...modeHydrated
-  }, other);
-  return paletteOutput;
-}

package/styles/createStyles.d.ts

@@ -1 +0,0 @@
-export default function createStyles(styles: any): never;

package/styles/createStyles.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createStyles;
-let warnedOnce = false;
-
-// To remove in v6
-function createStyles(styles) {
-  if (!warnedOnce) {
-    console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
-    warnedOnce = true;
-  }
-  return styles;
-}

package/styles/createTheme.d.ts

@@ -1,14 +0,0 @@
-import { CssVarsThemeOptions } from "./createThemeWithVars.js";
-import { Theme, ThemeOptions } from "./createThemeNoVars.js";
-export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
-/**
- * Generate a theme base on the options received.
- * @param options Takes an incomplete theme object and adds the missing parts.
- * @param args Deep merge the arguments with the about to be returned theme.
- * @returns A complete, ready-to-use theme object.
- */
-export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
-  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
-},
-// cast type to skip module augmentation test
-...args: object[]): Theme;