@vodafone_de/brix-components 3.1.6 → 3.1.8

package/esm/styles/createGetSelector.js

@@ -1,60 +0,0 @@
-import excludeVariablesFromRoot from "./excludeVariablesFromRoot.js";
-export 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 = {};
-      excludeVariablesFromRoot(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;
-};

package/esm/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/esm/styles/createMixins.js

@@ -1,16 +0,0 @@
-export default function createMixins(breakpoints, mixins) {
-  return {
-    toolbar: {
-      minHeight: 56,
-      [breakpoints.up('xs')]: {
-        '@media (orientation: landscape)': {
-          minHeight: 48
-        }
-      },
-      [breakpoints.up('sm')]: {
-        minHeight: 64
-      }
-    },
-    ...mixins
-  };
-}

package/esm/styles/createMuiStrictModeTheme.js

@@ -1,7 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-import createTheme from "./createTheme.js";
-export default function createMuiStrictModeTheme(options, ...args) {
-  return createTheme(deepmerge({
-    unstable_strictMode: true
-  }, options), ...args);
-}

package/esm/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/esm/styles/createPalette.js

@@ -1,302 +0,0 @@
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-import deepmerge from '@mui/utils/deepmerge';
-import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator';
-import common from "../colors/common.js";
-import grey from "../colors/grey.js";
-import purple from "../colors/purple.js";
-import red from "../colors/red.js";
-import orange from "../colors/orange.js";
-import blue from "../colors/blue.js";
-import lightBlue from "../colors/lightBlue.js";
-import green from "../colors/green.js";
-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.white,
-      default: common.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
-    }
-  };
-}
-export const light = getLight();
-function getDark() {
-  return {
-    text: {
-      primary: common.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.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
-    }
-  };
-}
-export const 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 = lighten(intent.main, tonalOffsetLight);
-    } else if (direction === 'dark') {
-      intent.dark = darken(intent.main, tonalOffsetDark);
-    }
-  }
-}
-function getDefaultPrimary(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: blue[200],
-      light: blue[50],
-      dark: blue[400]
-    };
-  }
-  return {
-    main: blue[700],
-    light: blue[400],
-    dark: blue[800]
-  };
-}
-function getDefaultSecondary(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: purple[200],
-      light: purple[50],
-      dark: purple[400]
-    };
-  }
-  return {
-    main: purple[500],
-    light: purple[300],
-    dark: purple[700]
-  };
-}
-function getDefaultError(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: red[500],
-      light: red[300],
-      dark: red[700]
-    };
-  }
-  return {
-    main: red[700],
-    light: red[400],
-    dark: red[800]
-  };
-}
-function getDefaultInfo(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: lightBlue[400],
-      light: lightBlue[300],
-      dark: lightBlue[700]
-    };
-  }
-  return {
-    main: lightBlue[700],
-    light: lightBlue[500],
-    dark: lightBlue[900]
-  };
-}
-function getDefaultSuccess(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: green[400],
-      light: green[300],
-      dark: green[700]
-    };
-  }
-  return {
-    main: green[800],
-    light: green[500],
-    dark: green[900]
-  };
-}
-function getDefaultWarning(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: orange[400],
-      light: orange[300],
-      dark: orange[700]
-    };
-  }
-  return {
-    main: '#ed6c02',
-    // closest to orange[800] that pass 3:1.
-    light: orange[500],
-    dark: orange[900]
-  };
-}
-export default 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 = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
-    if (process.env.NODE_ENV !== 'production') {
-      const contrast = 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.` : _formatErrorMessage(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' + '} });' : _formatErrorMessage(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 = deepmerge({
-    // A collection of common colors.
-    common: {
-      ...common
-    },
-    // 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,
-    // 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/esm/styles/createStyles.d.ts

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

package/esm/styles/createStyles.js

@@ -1,10 +0,0 @@
-let warnedOnce = false;
-
-// To remove in v6
-export default 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/esm/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;

package/esm/styles/createTheme.js

@@ -1,98 +0,0 @@
-import createPalette from "./createPalette.js";
-import createThemeWithVars from "./createThemeWithVars.js";
-import createThemeNoVars from "./createThemeNoVars.js";
-// eslint-disable-next-line consistent-return
-function attachColorScheme(theme, scheme, colorScheme) {
-  if (!theme.colorSchemes) {
-    return undefined;
-  }
-  if (colorScheme) {
-    theme.colorSchemes[scheme] = {
-      ...(colorScheme !== true && colorScheme),
-      palette: createPalette({
-        ...(colorScheme === true ? {} : colorScheme.palette),
-        mode: scheme
-      }) // cast type to skip module augmentation test
-    };
-  }
-}
-
-/**
- * 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 = {},
-// cast type to skip module augmentation test
-...args) {
-  const {
-    palette,
-    cssVariables = false,
-    colorSchemes: initialColorSchemes = !palette ? {
-      light: true
-    } : undefined,
-    defaultColorScheme: initialDefaultColorScheme = palette?.mode,
-    ...rest
-  } = options;
-  const defaultColorSchemeInput = initialDefaultColorScheme || 'light';
-  const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
-  const colorSchemesInput = {
-    ...initialColorSchemes,
-    ...(palette ? {
-      [defaultColorSchemeInput]: {
-        ...(typeof defaultScheme !== 'boolean' && defaultScheme),
-        palette
-      }
-    } : undefined)
-  };
-  if (cssVariables === false) {
-    if (!('colorSchemes' in options)) {
-      // Behaves exactly as v5
-      return createThemeNoVars(options, ...args);
-    }
-    let paletteOptions = palette;
-    if (!('palette' in options)) {
-      if (colorSchemesInput[defaultColorSchemeInput]) {
-        if (colorSchemesInput[defaultColorSchemeInput] !== true) {
-          paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
-        } else if (defaultColorSchemeInput === 'dark') {
-          // @ts-ignore to prevent the module augmentation test from failing
-          paletteOptions = {
-            mode: 'dark'
-          };
-        }
-      }
-    }
-    const theme = createThemeNoVars({
-      ...options,
-      palette: paletteOptions
-    }, ...args);
-    theme.defaultColorScheme = defaultColorSchemeInput;
-    theme.colorSchemes = colorSchemesInput;
-    if (theme.palette.mode === 'light') {
-      theme.colorSchemes.light = {
-        ...(colorSchemesInput.light !== true && colorSchemesInput.light),
-        palette: theme.palette
-      };
-      attachColorScheme(theme, 'dark', colorSchemesInput.dark);
-    }
-    if (theme.palette.mode === 'dark') {
-      theme.colorSchemes.dark = {
-        ...(colorSchemesInput.dark !== true && colorSchemesInput.dark),
-        palette: theme.palette
-      };
-      attachColorScheme(theme, 'light', colorSchemesInput.light);
-    }
-    return theme;
-  }
-  if (!palette && !('light' in colorSchemesInput) && defaultColorSchemeInput === 'light') {
-    colorSchemesInput.light = true;
-  }
-  return createThemeWithVars({
-    ...rest,
-    colorSchemes: colorSchemesInput,
-    defaultColorScheme: defaultColorSchemeInput,
-    ...(typeof cssVariables !== 'boolean' && cssVariables)
-  }, ...args);
-}