@vodafone_de/brix-components 3.1.3 → 3.1.6

package/styles/createTypography.js

@@ -1,99 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createTypography;
-var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
-function round(value) {
-  return Math.round(value * 1e5) / 1e5;
-}
-const caseAllCaps = {
-  textTransform: 'uppercase'
-};
-const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
-
-/**
- * @see @link{https://m2.material.io/design/typography/the-type-system.html}
- * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
- */
-function createTypography(palette, typography) {
-  const {
-    fontFamily = defaultFontFamily,
-    // The default font size of the Material Specification.
-    fontSize = 14,
-    // px
-    fontWeightLight = 300,
-    fontWeightRegular = 400,
-    fontWeightMedium = 500,
-    fontWeightBold = 700,
-    // Tell MUI what's the font-size on the html element.
-    // 16px is the default font-size used by browsers.
-    htmlFontSize = 16,
-    // Apply the CSS properties to all the variants.
-    allVariants,
-    pxToRem: pxToRem2,
-    ...other
-  } = typeof typography === 'function' ? typography(palette) : typography;
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof fontSize !== 'number') {
-      console.error('MUI: `fontSize` is required to be a number.');
-    }
-    if (typeof htmlFontSize !== 'number') {
-      console.error('MUI: `htmlFontSize` is required to be a number.');
-    }
-  }
-  const coef = fontSize / 14;
-  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
-    fontFamily,
-    fontWeight,
-    fontSize: pxToRem(size),
-    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
-    lineHeight,
-    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
-    // across font-families can cause issues with the kerning.
-    ...(fontFamily === defaultFontFamily ? {
-      letterSpacing: `${round(letterSpacing / size)}em`
-    } : {}),
-    ...casing,
-    ...allVariants
-  });
-  const variants = {
-    h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
-    h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
-    h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
-    h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
-    h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
-    h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
-    subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
-    subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
-    body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
-    body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
-    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
-    caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
-    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps),
-    // TODO v6: Remove handling of 'inherit' variant from the theme as it is already handled in Material UI's Typography component. Also, remember to remove the associated types.
-    inherit: {
-      fontFamily: 'inherit',
-      fontWeight: 'inherit',
-      fontSize: 'inherit',
-      lineHeight: 'inherit',
-      letterSpacing: 'inherit'
-    }
-  };
-  return (0, _deepmerge.default)({
-    htmlFontSize,
-    pxToRem,
-    fontFamily,
-    fontSize,
-    fontWeightLight,
-    fontWeightRegular,
-    fontWeightMedium,
-    fontWeightBold,
-    ...variants
-  }, other, {
-    clone: false // No need to clone deep
-  });
-}

package/styles/cssUtils.d.ts

@@ -1,25 +0,0 @@
-import { CSSProperties } from "./createMixins.js";
-export function isUnitless(value: string): boolean;
-export function getUnit(input: string): string;
-export function toUnitless(value: string): number;
-export function convertLength(baseFontSize: string): (length: string, toUnit: string) => string;
-export interface AlignPropertyParams {
-  size: number;
-  grid: number;
-}
-export function alignProperty(params: AlignPropertyParams): number;
-export interface FontGridParams {
-  lineHeight: number;
-  pixels: number;
-  htmlFontSize: number;
-}
-export function fontGrid(params: FontGridParams): number;
-export interface ResponsivePropertyParams {
-  cssProperty: string;
-  min: number;
-  max: number;
-  unit?: string;
-  breakpoints?: number[];
-  transform?: (value: number) => number;
-}
-export function responsiveProperty(params: ResponsivePropertyParams): CSSProperties;

package/styles/cssUtils.js

@@ -1,137 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.alignProperty = alignProperty;
-exports.convertLength = convertLength;
-exports.fontGrid = fontGrid;
-exports.getUnit = getUnit;
-exports.isUnitless = isUnitless;
-exports.responsiveProperty = responsiveProperty;
-exports.toUnitless = toUnitless;
-function isUnitless(value) {
-  return String(parseFloat(value)).length === String(value).length;
-}
-
-// Ported from Compass
-// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
-// Emulate the sass function "unit"
-function getUnit(input) {
-  return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
-}
-
-// Emulate the sass function "unitless"
-function toUnitless(length) {
-  return parseFloat(length);
-}
-
-// Convert any CSS <length> or <percentage> value to any another.
-// From https://github.com/KyleAMathews/convert-css-length
-function convertLength(baseFontSize) {
-  return (length, toUnit) => {
-    const fromUnit = getUnit(length);
-
-    // Optimize for cases where `from` and `to` units are accidentally the same.
-    if (fromUnit === toUnit) {
-      return length;
-    }
-
-    // Convert input length to pixels.
-    let pxLength = toUnitless(length);
-    if (fromUnit !== 'px') {
-      if (fromUnit === 'em') {
-        pxLength = toUnitless(length) * toUnitless(baseFontSize);
-      } else if (fromUnit === 'rem') {
-        pxLength = toUnitless(length) * toUnitless(baseFontSize);
-      }
-    }
-
-    // Convert length in pixels to the output unit
-    let outputLength = pxLength;
-    if (toUnit !== 'px') {
-      if (toUnit === 'em') {
-        outputLength = pxLength / toUnitless(baseFontSize);
-      } else if (toUnit === 'rem') {
-        outputLength = pxLength / toUnitless(baseFontSize);
-      } else {
-        return length;
-      }
-    }
-    return parseFloat(outputLength.toFixed(5)) + toUnit;
-  };
-}
-function alignProperty({
-  size,
-  grid
-}) {
-  const sizeBelow = size - size % grid;
-  const sizeAbove = sizeBelow + grid;
-  return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
-}
-
-// fontGrid finds a minimal grid (in rem) for the fontSize values so that the
-// lineHeight falls under a x pixels grid, 4px in the case of Material Design,
-// without changing the relative line height
-function fontGrid({
-  lineHeight,
-  pixels,
-  htmlFontSize
-}) {
-  return pixels / (lineHeight * htmlFontSize);
-}
-
-/**
- * generate a responsive version of a given CSS property
- * @example
- * responsiveProperty({
- *   cssProperty: 'fontSize',
- *   min: 15,
- *   max: 20,
- *   unit: 'px',
- *   breakpoints: [300, 600],
- * })
- *
- * // this returns
- *
- * {
- *   fontSize: '15px',
- *   '@media (min-width:300px)': {
- *     fontSize: '17.5px',
- *   },
- *   '@media (min-width:600px)': {
- *     fontSize: '20px',
- *   },
- * }
- * @param {Object} params
- * @param {string} params.cssProperty - The CSS property to be made responsive
- * @param {number} params.min - The smallest value of the CSS property
- * @param {number} params.max - The largest value of the CSS property
- * @param {string} [params.unit] - The unit to be used for the CSS property
- * @param {Array.number} [params.breakpoints]  - An array of breakpoints
- * @param {number} [params.alignStep] - Round scaled value to fall under this grid
- * @returns {Object} responsive styles for {params.cssProperty}
- */
-function responsiveProperty({
-  cssProperty,
-  min,
-  max,
-  unit = 'rem',
-  breakpoints = [600, 900, 1200],
-  transform = null
-}) {
-  const output = {
-    [cssProperty]: `${min}${unit}`
-  };
-  const factor = (max - min) / breakpoints[breakpoints.length - 1];
-  breakpoints.forEach(breakpoint => {
-    let value = min + factor * breakpoint;
-    if (transform !== null) {
-      value = transform(value);
-    }
-    output[`@media (min-width:${breakpoint}px)`] = {
-      [cssProperty]: `${Math.round(value * 10000) / 10000}${unit}`
-    };
-  });
-  return output;
-}

package/styles/defaultTheme.js

@@ -1,11 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _createTheme = _interopRequireDefault(require("./createTheme"));
-const defaultTheme = (0, _createTheme.default)();
-var _default = exports.default = defaultTheme;

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +0,0 @@
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
- */
-declare const excludeVariablesFromRoot: (cssVarPrefix?: string) => string[];
-export default excludeVariablesFromRoot;

package/styles/excludeVariablesFromRoot.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/**
- * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
- */
-const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(25)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
-var _default = exports.default = excludeVariablesFromRoot;

package/styles/experimental_extendTheme.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = deprecatedExtendTheme;
-var _createThemeWithVars = _interopRequireDefault(require("./createThemeWithVars"));
-let warnedOnce = false;
-function deprecatedExtendTheme(...args) {
-  if (!warnedOnce) {
-    console.warn(['MUI: The `experimental_extendTheme` has been stabilized.', '', "You should use `import { extendTheme } from '@mui/material/styles'`"].join('\n'));
-    warnedOnce = true;
-  }
-  return (0, _createThemeWithVars.default)(...args);
-}

package/styles/getOverlayAlpha.d.ts

@@ -1 +0,0 @@
-export default function getOverlayAlpha(elevation: number): number;

package/styles/getOverlayAlpha.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getOverlayAlpha;
-// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-function getOverlayAlpha(elevation) {
-  let alphaValue;
-  if (elevation < 1) {
-    alphaValue = 5.11916 * elevation ** 2;
-  } else {
-    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
-  }
-  return Math.round(alphaValue * 10) / 1000;
-}

package/styles/identifier.d.ts

@@ -1,2 +0,0 @@
-declare const _default: "$$material";
-export default _default;

package/styles/identifier.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = exports.default = '$$material';

package/styles/index.d.ts

@@ -1,49 +0,0 @@
-export { default as THEME_ID } from "./identifier.js";
-export { default as createTheme, default as unstable_createMuiStrictModeTheme, ThemeOptions, Theme, CssThemeVariables } from "./createTheme.js";
-export { default as adaptV4Theme, DeprecatedThemeOptions } from "./adaptV4Theme.js";
-export { Shadows } from "./shadows.js";
-export { ZIndex } from "./zIndex.js";
-export { CommonColors, Palette, PaletteColor, PaletteColorOptions, PaletteOptions, SimplePaletteColorOptions, TypeText, TypeAction, TypeBackground, PaletteMode, Color } from "./createPalette.js";
-export { default as createColorScheme } from "./createColorScheme.js";
-export { default as createStyles } from "./createStyles.js";
-export { TypographyVariants, TypographyVariantsOptions, TypographyStyle, TypographyVariant } from "./createTypography.js";
-export { default as responsiveFontSizes } from "./responsiveFontSizes.js";
-export { Duration, Easing, Transitions, TransitionsOptions, duration, easing } from "./createTransitions.js";
-export { Mixins, CSSProperties, MixinsOptions } from "./createMixins.js";
-export { Direction, Breakpoint, BreakpointOverrides, Breakpoints, BreakpointsOptions, CreateMUIStyled, Interpolation, CSSInterpolation, CSSObject, css, keyframes,
-// color manipulators
-hexToRgb, rgbToHex, hslToRgb, decomposeColor, recomposeColor, getContrastRatio, getLuminance, emphasize, alpha, darken, lighten, ColorFormat, ColorObject, StyledEngineProvider, SxProps } from '@mui/system';
-export { unstable_createBreakpoints } from '@mui/system/createBreakpoints';
-// TODO: Remove this function in v6.
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function experimental_sx(): any;
-export { default as useTheme } from "./useTheme.js";
-export { default as useThemeProps } from "./useThemeProps.js";
-export * from "./useThemeProps.js";
-export { default as styled } from "./styled.js";
-export { default as ThemeProvider, ThemeProviderProps } from "./ThemeProvider.js";
-export { ComponentsProps, ComponentsPropsList } from "./props.js";
-export { ComponentsVariants } from "./variants.js";
-export { ComponentsOverrides, ComponentNameToClassKey } from "./overrides.js";
-export { Components } from "./components.js";
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from "./cssUtils.js";
-export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
-export interface StyledComponentProps<ClassKey extends string = string> {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ClassNameMap<ClassKey>>;
-}
-export { default as makeStyles } from "./makeStyles.js";
-export { default as withStyles } from "./withStyles.js";
-export { default as withTheme } from "./withTheme.js";
-export * from "./ThemeProviderWithVars.js";
-export type { StorageManager } from '@mui/system/cssVars';
-export { default as extendTheme } from "./createThemeWithVars.js";
-export type { ColorSchemeOverrides, SupportedColorScheme, ColorSystem, CssVarsPalette, Opacity, Overlays, PaletteAlert, PaletteActionChannel, PaletteAppBar, PaletteAvatar, PaletteChip, PaletteColorChannel, PaletteCommonChannel, PaletteFilledInput, PaletteLinearProgress, PaletteSkeleton, PaletteSlider, PaletteSnackbarContent, PaletteSpeedDialAction, PaletteStepConnector, PaletteStepContent, PaletteSwitch, PaletteTableCell, PaletteTextChannel, PaletteTooltip, CssVarsThemeOptions, CssVarsTheme, ThemeVars, ThemeCssVar, ThemeCssVarOverrides, ColorSystemOptions } from "./createThemeWithVars.js";
-export { default as getOverlayAlpha } from "./getOverlayAlpha.js";
-export { default as shouldSkipGeneratingVar } from "./shouldSkipGeneratingVar.js";
-
-// Private methods for creating parts of the theme
-export { default as private_createTypography } from "./createTypography.js";
-export { default as private_excludeVariablesFromRoot } from "./excludeVariablesFromRoot.js";