@vodafone_de/brix-components 7.1.7 → 7.1.9

package/dist/{styled-B-_SmQSA.js → styled-13a_Vk0D.js}

@@ -6,13 +6,13 @@ import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js"
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
-import { c as borderRadiusFull } from "./BorderRadius-ClUShVLu.js";
+import { a as borderRadiusFull } from "./BorderRadius-2LdggXbQ.js";
 import { a as fontWeightBold } from "./FontWeight-C2pGs7aR.js";
 import { s as smallSize, m as mediumSize } from "./SizeTypes-Ck_RdzIf.js";
 import { b as spacingXs, e as spacing2Xs, c as spacingSm, a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
 import { g as getForegroundColor } from "./colorUtils-lb0oJttx.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 import { e as colorObjectSuccess, c as colorObjectNeutral, f as colorObjectAccent, a as colorObjectBrand } from "./ObjectColor-0RAzLGI5.js";
 const primaryBadgeAppearance = "primary";
 const secondaryBadgeAppearance = "secondary";

package/dist/{styled-CPNO3vN5.js → styled-BKmRVjNA.js}

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { a as spacingMd } from "./Spacing-BMQelJYr.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const GridStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "GridStyled",

package/dist/{styled-D8a-ap4J.js → styled-B_ihuvyB.js}

@@ -5,7 +5,7 @@ import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { f as colorBorderSubtle } from "./BorderColor-CYdSW9dg.js";
 import { a as spacingMd } from "./Spacing-BMQelJYr.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const DividerLineStyled = styled.hr.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "DividerLineStyled",

package/dist/{styled-jl0239KS.js → styled-C6Wms75x.js}

@@ -8,7 +8,7 @@ import { f as colorBorderSubtle } from "./BorderColor-CYdSW9dg.js";
 import { e as borderWidthDivider } from "./BorderWidth-eg_mz82k.js";
 import { d as spacingXl, a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 import { e as colorBackgroundBrand, f as colorBackgroundBrandGradient, a as colorBackgroundSubtle, c as colorBackgroundNeutral } from "./BackgroundColor-DSOSZvNi.js";
 const ContainerAppearanceColor = {
   primary: colorBackgroundNeutral,

package/dist/{styled-SllFJc7o.js → styled-CKK_LUlC.js}

@@ -14,14 +14,14 @@ import { getIconColor } from "./foundations/token/getIconColor/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { c as colorBorderFocus, f as colorBorderSubtle } from "./BorderColor-CYdSW9dg.js";
-import { b as borderRadiusMd, a as borderRadiusNone } from "./BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd, c as borderRadiusNone } from "./BorderRadius-2LdggXbQ.js";
 import { a as borderWidthFocus, d as borderWidthSm } from "./BorderWidth-eg_mz82k.js";
 import { t as textHeadingXs } from "./HeadingSize-CfCRn3Lh.js";
 import { b as colorIconBrand } from "./IconColor-CtC9WUgr.js";
 import { a as spacingMd, b as spacingXs, s as spacingNone } from "./Spacing-BMQelJYr.js";
 import { a as colorTextNeutral, f as colorTextBrand } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
-import { C as CardAppearanceColor } from "./styled-1OrCdMDT.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
+import { C as CardAppearanceColor } from "./styled-CQLDmqmZ.js";
 const linkListItemVariantVertical = "vertical";
 const linkListItemVariantHorizontal = "horizontal";
 const focusStyles = {

package/dist/{styled-1OrCdMDT.js → styled-CQLDmqmZ.js}

@@ -6,10 +6,10 @@ import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
-import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd } from "./BorderRadius-2LdggXbQ.js";
 import { a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 import { g as getCssVar } from "./getCssVar-BP6T9pFM.js";
 import { f as colorBackgroundBrandGradient, c as colorBackgroundNeutral } from "./BackgroundColor-DSOSZvNi.js";
 const CardAppearanceColor = {

package/dist/{styled-BTBLpB_G.js → styled-CWusLu5R.js}

@@ -10,11 +10,11 @@ import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral, a as colorBackgroundSubtle } from "./BackgroundColor-DSOSZvNi.js";
 import { c as colorBorderFocus, a as colorBorderNeutral, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "./BorderColor-CYdSW9dg.js";
-import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd } from "./BorderRadius-2LdggXbQ.js";
 import { b as borderWidthUnselected } from "./BorderWidth-eg_mz82k.js";
 import { c as spacingSm, b as spacingXs } from "./Spacing-BMQelJYr.js";
 import { c as colorTextPlaceholder, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const InputWrapperStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(["readOnly"]),
   displayName: "InputWrapperStyled",

package/dist/{styled-VAsSnb5y.js → styled-Csv7V9ez.js}

@@ -7,7 +7,7 @@ import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { a as fontWeightBold, b as fontWeightLight } from "./FontWeight-C2pGs7aR.js";
 import { b as spacingXs, c as spacingSm, a as spacingMd, g as spacingLg, d as spacingXl } from "./Spacing-BMQelJYr.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const headingAlignLeft = "left";
 const headingAlignCenter = "center";
 const mapHeadingSizeToFontWeight = {

package/dist/{styled-Djetw1lK.js → styled-D57p2ktn.js}

@@ -1,11 +1,11 @@
 import styled from "styled-components";
-import { a as CardStyled } from "./styled-1OrCdMDT.js";
-import { D as DemoBoxStyled } from "./styled-CW4e5Qa3.js";
-import { v as viewport } from "./index-Ck2bCrhT.js";
+import { a as CardStyled } from "./styled-CQLDmqmZ.js";
+import { D as DemoBoxStyled } from "./styled-DCLv3G2j.js";
+import viewport from "./foundations/media-query/viewport/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const getColumnWidth = ({
   sm,
   md,

package/dist/{styled-CW4e5Qa3.js → styled-DCLv3G2j.js}

@@ -6,7 +6,7 @@ import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { g as colorBorderWarning } from "./BorderColor-CYdSW9dg.js";
 import { c as spacingSm, a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { b as colorTextInverseStatic } from "./TextColor-DsntmDNw.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const DemoBoxStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "DemoBoxStyled",

package/dist/{styled-CyZvsdJs.js → styled-DG6HSLPJ.js}

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { a as spacingMd, s as spacingNone } from "./Spacing-BMQelJYr.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const flexOrientationHorizontal = "horizontal";
 const flexOrientationVertical = "vertical";
 const flexJustifyStart = "start";

package/dist/{styled-RnVr222F.js → styled-DUsRG1Xh.js}

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 import { l as inlineIconModeStroke, I as IconWithAccent } from "./props-7dcsjRUx.js";
 const InlineIconStyled = styled.svg.withConfig({
   shouldForwardProp: filterProps(),

package/dist/{styled-U9du2n1i.js → styled-D_F38PuI.js}

@@ -2,7 +2,7 @@ import styled, { keyframes, css } from "styled-components";
 import Body from "./components/Body/index.js";
 import forcedColors from "./foundations/media-query/forcedColors/index.js";
 import reducedMotion from "./foundations/media-query/reducedMotion/index.js";
-import { v as viewport } from "./index-Ck2bCrhT.js";
+import viewport from "./foundations/media-query/viewport/index.js";
 import { getBackgroundColor } from "./foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
@@ -14,7 +14,7 @@ import { b as colorBackgroundOverlay } from "./BackgroundColor-DSOSZvNi.js";
 import { o as opacityOverlay } from "./Opacity-smkGiwsf.js";
 import { l as largeSize } from "./SizeTypes-Ck_RdzIf.js";
 import { s as spacingNone } from "./Spacing-BMQelJYr.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const loadingSpinnerOverlays = {
   Light: `rgba(255, 255, 255, ${getOpacity(opacityOverlay)})`,
   Dark: `rgba(38, 38, 38, ${getOpacity(opacityOverlay)})`

package/dist/{styled-q7r_5eaz.js → styled-Dk6VS_Sg.js}

@@ -1,19 +1,19 @@
 import styled from "styled-components";
 import { g as getButtonAppearance } from "./ButtonAppearanceHelper-D2SlSoU8.js";
 import { I as IconLoader } from "./index-C3dW-7e_.js";
-import { v as viewport } from "./index-Ck2bCrhT.js";
+import viewport from "./foundations/media-query/viewport/index.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getOpacity } from "./foundations/token/getOpacity/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
-import { b as borderRadiusMd } from "./BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd } from "./BorderRadius-2LdggXbQ.js";
 import { f as fontWeightRegular } from "./FontWeight-C2pGs7aR.js";
 import { a as opacityDisabled } from "./Opacity-smkGiwsf.js";
 import { b as spacingXs, d as spacingXl, s as spacingNone, a as spacingMd } from "./Spacing-BMQelJYr.js";
 import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const leftPosition = "left";
 const primaryAppearance = "primary";
 const tertiaryAppearance = "tertiary";

package/dist/{styled-DJWrbsIZ.js → styled-DoOOutJj.js}

@@ -7,7 +7,7 @@ import { getSpacing } from "./foundations/token/getSpacing/index.js";
 import { f as fontWeightRegular } from "./FontWeight-C2pGs7aR.js";
 import { a as spacingMd, s as spacingNone } from "./Spacing-BMQelJYr.js";
 import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 const TextListItemStyled = styled.li.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "TextListItemStyled",

package/dist/{styled-DOK4C5Ml.js → styled-QLVvcMdB.js}

@@ -1,6 +1,6 @@
 import require$$0 from "react";
 import styled from "styled-components";
-import { a as filterProps } from "./filterProps-CTn92eZw.js";
+import { a as filterProps } from "./filterProps-CPul3CC8.js";
 var richTextReactRenderer_es5 = {};
 var dist = {};
 var isPlainObj;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "7.1.7",
+  "version": "7.1.9",
   "exports": {
     "./package.json": "./package.json",
     ".": {

package/dist/components/ResponsiveImage/index.d.ts

@@ -1,5 +0,0 @@
-import { FC } from 'react';
-import { ResponsiveImageProps } from './props';
-declare const ResponsiveImage: FC<ResponsiveImageProps>;
-export default ResponsiveImage;
-export * from './props';

package/dist/components/ResponsiveImage/index.js

@@ -1,89 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { v as viewport, a as breakpoint_large, c as breakpoint_medium } from "../../index-Ck2bCrhT.js";
-import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
-import styled from "styled-components";
-import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
-import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
-import { a as filterProps } from "../../filterProps-CTn92eZw.js";
-const ResponsiveImagePictureStyled = styled.picture.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "ResponsiveImagePictureStyled",
-  componentId: "sc-1itvcas-0"
-})({});
-const ResponsiveImageStyled = styled.img.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "ResponsiveImageStyled",
-  componentId: "sc-1itvcas-1"
-})({
-  display: "block",
-  width: "100%"
-}, ({
-  images
-}) => {
-  var _a, _b;
-  return {
-    ...images.sm.objectFit && {
-      objectFit: images.sm.objectFit
-    },
-    ...((_a = images.md) == null ? void 0 : _a.objectFit) && viewport.md({
-      objectFit: images.md.objectFit
-    }),
-    ...((_b = images.lg) == null ? void 0 : _b.objectFit) && viewport.lg({
-      objectFit: images.lg.objectFit
-    })
-  };
-}, ({
-  images
-}) => {
-  var _a, _b;
-  return {
-    ...images.sm.objectPosition && {
-      objectPosition: images.sm.objectPosition
-    },
-    ...((_a = images.md) == null ? void 0 : _a.objectPosition) && viewport.md({
-      objectPosition: images.md.objectPosition
-    }),
-    ...((_b = images.lg) == null ? void 0 : _b.objectPosition) && viewport.lg({
-      objectPosition: images.lg.objectPosition
-    })
-  };
-}, ({
-  images = {}
-}) => {
-  var _a, _b, _c;
-  return {
-    ...((_a = images.sm) == null ? void 0 : _a.aspectRatio) && {
-      aspectRatio: images.sm.aspectRatio
-    },
-    ...((_b = images.md) == null ? void 0 : _b.aspectRatio) && viewport.md({
-      aspectRatio: images.md.aspectRatio
-    }),
-    ...((_c = images.lg) == null ? void 0 : _c.aspectRatio) && viewport.lg({
-      aspectRatio: images.lg.aspectRatio
-    })
-  };
-}, ({
-  images: {
-    sm: {
-      corners
-    }
-  }
-}) => ({
-  borderRadius: corners === "rounded" ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
-}), getBottomSpacing);
-const ResponsiveImage = ({
-  images,
-  bottomSpacing = spacingMd,
-  ...props
-}) => /* @__PURE__ */ jsxs(ResponsiveImagePictureStyled, { ...props, children: [
-  images.lg && /* @__PURE__ */ jsx("source", { media: `(min-width: ${breakpoint_large})`, srcSet: images.lg.src }),
-  images.md && /* @__PURE__ */ jsx("source", { media: `(min-width: ${breakpoint_medium})`, srcSet: images.md.src }),
-  /* @__PURE__ */ jsx(ResponsiveImageStyled, { ..."" === images.sm.alt ? {
-    "aria-hidden": true
-  } : {}, images, ...images.sm, bottomSpacing })
-] });
-export {
-  ResponsiveImage as default
-};

package/dist/components/ResponsiveImage/props.d.ts

@@ -1,16 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { ImageProps } from '../Image/props';
-import { PatternProps } from '../../foundations/PatternProps';
-import { ViewportName } from '../../foundations/types/Viewport';
-export type ResponsiveImageType = {
-    sm: ImageProps;
-} & {
-    [key in Exclude<ViewportName, 'sm'>]?: ImageProps;
-};
-export interface ResponsiveImageProps extends PatternProps, HTMLAttributes<HTMLElement> {
-    /**
-     * Pin component's name from string to the concrete name
-     */
-    component?: 'ResponsiveImage';
-    images: ResponsiveImageType;
-}

package/dist/components/ResponsiveImage/styled.d.ts

@@ -1,4 +0,0 @@
-import { ImageProps } from '../Image/props';
-import { ResponsiveImageProps } from './props';
-export declare const ResponsiveImagePictureStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, Omit<ResponsiveImageProps, "bottomSpacing" | "images">>> & string;
-export declare const ResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, ImageProps & Pick<ResponsiveImageProps, "images">>> & string;

package/dist/filterProps-CTn92eZw.js

@@ -1,17 +0,0 @@
-const propsNotPassToDomDefault = ["accordionType", "activeId", "activeIndex", "setActiveId", "align", "animated", "appearance", "aspectRatio", "autoLayout", "apiKey", "badge", "borderBottom", "bottomSpacing", "buttonLink", "buttons", "coloringMode", "colorSwatch", "component", "contentGridDesktopColumns", "corners", "coversFullPage", "description", "elevation", "expanded", "filterItems", "footnote", "gapSpacing", "grow", "handleOnClick", "handleOnToogle", "hasOverlay", "heading", "heightSm", "heightMd", "heightLg", "horizontalAlignment", "icon", "iconAlign", "iconName", "iconPosition", "images", "internal", "isActive", "isChecked", "isDisabled", "isFullscreen", "isInHoverRange", "isLastItemInList", "isOpen", "isOrdered", "isSelected", "isTransparentBackground", "items", "jumpToClickedItem", "justify", "justifyHorizontal", "label", "lg", "loadingSpinnerChild", "mapId", "md", "message", "more", "needsBorder", "nextAriaLabel", "notificationType", "objectFit", "objectPosition", "offset", "onUpdate", "openMultiple", "orientation", "padding", "prefix", "prefixWeight", "prevAriaLabel", "price", "productId", "promoPrice", "screenReaderInstruction", "showList", "size", "sm", "spacing", "spinnerType", "status", "stretch", "strikePrice", "suffix", "tag", "textContent", "uid", "variant", "verticalPadding", "viewportHeight", "weight", "width"];
-const filterProps = (propsNotPassToDom = []) => {
-  const shouldForwardProp = (prop) => {
-    if ("string" !== typeof prop) {
-      return false;
-    }
-    return ![...propsNotPassToDom, ...propsNotPassToDomDefault].includes(prop);
-  };
-  return shouldForwardProp;
-};
-const filterPropsForUnstyledComponent = (props) => {
-  return Object.fromEntries(Object.entries(props).filter(([key]) => !propsNotPassToDomDefault.includes(key)));
-};
-export {
-  filterProps as a,
-  filterPropsForUnstyledComponent as f
-};

package/dist/index-Ck2bCrhT.js

@@ -1,32 +0,0 @@
-const breakpoint_medium_number = 768;
-const breakpoint_medium = `${breakpoint_medium_number}px`;
-const breakpoint_large_number = 1025;
-const breakpoint_large = `${breakpoint_large_number}px`;
-const mediumMediaQuery = `screen and (min-width: ${breakpoint_medium})`;
-const largeMediaQuery = `screen and (min-width: ${breakpoint_large})`;
-const md = (stylesInViewport) => {
-  return {
-    [`@media ${mediumMediaQuery}`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const lg = (stylesInViewport) => {
-  return {
-    [`@media ${largeMediaQuery}`]: {
-      ...stylesInViewport
-    }
-  };
-};
-const viewport = {
-  md,
-  lg
-};
-export {
-  breakpoint_large as a,
-  breakpoint_medium_number as b,
-  breakpoint_medium as c,
-  largeMediaQuery as l,
-  mediumMediaQuery as m,
-  viewport as v
-};