@amboss/design-system 1.21.3 → 1.23.1

package/build/esm/shared/flattenChildren.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+/**
+ * Copied from https://github.com/grrowl/react-keyed-flatten-children (since ESM import doesn't work with the module)
+ *
+ * Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray),
+ * this utility takes children and returns them as an array for introspection or filtering.
+ *
+ * Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional
+ * array while ensuring element and fragment keys are preserved, unique, and stable between renders.
+ */
+export declare const flattenChildren: (children: React.ReactNode, depth?: number, keys?: string[]) => any;

package/build/esm/shared/flattenChildren.js

@@ -0,0 +1 @@
+import{Children,isValidElement,cloneElement}from"react";import{isFragment}from"react-is";export const flattenChildren=(children,depth=0,keys=[])=>Children.toArray(children).reduce((acc,node,nodeIndex)=>(isFragment(node)?acc.push(...flattenChildren(node.props.children,depth+1,keys.concat(String(node.key||nodeIndex)))):isValidElement(node)?acc.push(cloneElement(node,{key:keys.concat(String(node.key)).join(".")})):("string"==typeof node||"number"==typeof node)&&acc.push(node),acc),[]);

package/build/esm/shared/informDeprecation.d.ts

@@ -0,0 +1 @@
+export declare const informDeprecation: (property: unknown, value: unknown, location: string, details?: string) => void;

package/build/esm/shared/informDeprecation.js

@@ -0,0 +1,2 @@
+export const informDeprecation=(property,value,location,details="")=>{void 0!==property&&property===value&&console.error(`value ${JSON.stringify(value)} is depricated in ${location} 
+ ${details}`)};

package/build/esm/shared/mediaQueries.d.ts

@@ -0,0 +1,14 @@
+import type { ColumnSizes, HorizontalAlignment, MQ, SpaceSizes, TextAlignment, VerticalAlignment, Order, ColumnAlignment, Hyphens } from "../types";
+type MqProp<T> = [
+    T | MQ<T>,
+    Record<T extends string ? T : never, string | number>
+];
+type MqRules = Record<string, MqProp<TextAlignment> | MqProp<SpaceSizes> | MqProp<HorizontalAlignment> | MqProp<VerticalAlignment> | MqProp<ColumnSizes> | MqProp<Order> | MqProp<ColumnAlignment> | MqProp<Hyphens>>;
+type EmotionCssPropertyName = string;
+type EmotionCssValue = string | number;
+type EmotionCssDescription = Record<EmotionCssPropertyName, EmotionCssValue>;
+type MqFunc = (rules: MqRules) => Record<string, EmotionCssValue | EmotionCssDescription>;
+export declare const mq: MqFunc;
+export declare const mqValue: (rules: Record<EmotionCssPropertyName, EmotionCssValue[] | EmotionCssValue>) => Record<string, EmotionCssValue | EmotionCssDescription>;
+export declare function getMediaQueryClasses<T>(s: T | MQ<T> | undefined, styles: Record<string, string>, prefix?: string): string[];
+export {};

package/build/esm/shared/mediaQueries.js

@@ -0,0 +1 @@
+var breakpointRules,breakpointRules1;import breakpoints from"../web-tokens/_breakpoints.json";export const mq=(breakpointRules=[`@media (max-width: ${breakpoints.medium.value}px)`,`@media (min-width: ${breakpoints.medium.value}px) and (max-width: ${breakpoints.large.value}px)`,`@media (min-width: ${breakpoints.large.value}px)`],rules=>{let res={};return breakpointRules.forEach(key=>{res[key]={}}),res["@media screen"]={},Object.entries(rules).forEach(([cssProperty,[prop,map]])=>{if(Array.isArray(prop)){let sm=prop[0],md=prop[1]||prop[0],lg=prop[2]||prop[1]||prop[0],[s,m,l]=breakpointRules;res[s][cssProperty]=map[sm],res[m][cssProperty]=map[md],res[l][cssProperty]=map[lg]}else res["@media screen"][cssProperty]=map[prop]}),res});export const mqValue=(breakpointRules1=[`@media (max-width: ${breakpoints.medium.value}px)`,`@media (min-width: ${breakpoints.medium.value}px) and (max-width: ${breakpoints.large.value}px)`,`@media (min-width: ${breakpoints.large.value}px)`],rules=>{let res={};return breakpointRules1.forEach(key=>{res[key]={}}),res["@media screen"]={},Object.entries(rules).forEach(([cssProperty,cssValues])=>{Array.isArray(cssValues)?breakpointRules1.forEach((breakpoint,index)=>{let i=index;for(;!cssValues[i]&&0!==i;)i-=1;res[breakpoint][cssProperty]=cssValues[i]}):res["@media screen"][cssProperty]=cssValues}),res});export function getMediaQueryClasses(s,styles,prefix=""){let res;if(void 0===s)return[];if(Array.isArray(s)){let sm=s[0],md=s[1]||s[0],lg=s[2]||s[1]||s[0];res=[`${sm}-small`,`${md}-medium`,`${lg}-large`]}else res=[s];return res.map(cl=>`${prefix}${cl}`).map(cl=>styles[cl])}

package/build/esm/shared/replaceDeprecated.d.ts

@@ -0,0 +1 @@
+export declare const replaceDeprecated: (property: unknown, from: unknown, to: unknown, location: string, details?: string) => unknown;

package/build/esm/shared/replaceDeprecated.js

@@ -0,0 +1,2 @@
+export const replaceDeprecated=(property,from,to,location,details="")=>property===from?(console.error(`value ${JSON.stringify(from)} is depricated in ${location} 
+ ${details}`),to):property;

package/build/esm/shared/useAutoPosition.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from "react";
+export type VerticalPosition = "up" | "down";
+export type HorizontalPosition = "left" | "right";
+export type Position = [VerticalPosition, HorizontalPosition];
+export declare const useAutoPosition: (anchorRef: RefObject<HTMLElement>, contentRef: RefObject<HTMLElement>, isActive: boolean) => Position;

package/build/esm/shared/useAutoPosition.js

@@ -0,0 +1 @@
+import{useState,useLayoutEffect}from"react";import{useWindow}from"./useWindow";import{useDocument}from"./useDocument";export const useAutoPosition=(anchorRef,contentRef,isActive)=>{let[verticalPosition,setVerticalPosition]=useState("down"),[horizontalPosition,setHorizontalPosition]=useState("left"),document=useDocument(),window=useWindow();return useLayoutEffect(()=>{if(contentRef){if(isActive){let maxHeight=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0),rect=contentRef.current.getBoundingClientRect(),anchorHeight=anchorRef.current.getBoundingClientRect().height,anchorX=anchorRef.current.getBoundingClientRect().x,screenWidth=window.innerWidth,isUp=rect.top+rect.height>maxHeight,isDown=rect.top-anchorHeight<rect.height;isUp?setVerticalPosition("up"):isDown&&setVerticalPosition("down"),anchorX>screenWidth/2?setHorizontalPosition("left"):anchorX<screenWidth/2&&setHorizontalPosition("right")}else setVerticalPosition("down"),setHorizontalPosition("left")}},[anchorRef,contentRef,document.documentElement.clientHeight,isActive,window.innerHeight,window.innerWidth]),[verticalPosition,horizontalPosition]};

package/build/esm/shared/useDocument.d.ts

@@ -0,0 +1 @@
+export declare function useDocument(): Document;

package/build/esm/shared/useDocument.js

@@ -0,0 +1 @@
+export function useDocument(){return document}

package/build/esm/shared/useDragDown.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+export type UseDragDownOptions = {
+    ref: RefObject<any>;
+    isVisible?: boolean;
+    onDragStart: (touchStartY: number) => void;
+    onDrag: (touchMoveY: number, offsetFromStart: number) => void;
+    onDragEnd: (touchEndY: number, offsetFromStart: number) => void;
+    onDragCancel: () => void;
+};
+/**
+ * Handle Drag down gesture for mobile web
+ */
+export declare function useDragDown({ ref, isVisible, onDragStart, onDrag, onDragEnd, onDragCancel, }: UseDragDownOptions): void;

package/build/esm/shared/useDragDown.js

@@ -0,0 +1 @@
+import{useEffect}from"react";export function useDragDown({ref,isVisible=!1,onDragStart,onDrag,onDragEnd,onDragCancel}){useEffect(()=>{let elm,touchStartY=0,touchMoveY=0,touchEndY=0,dragCancelled=!1,cancelDrag=()=>{dragCancelled=!0,touchStartY=0,touchMoveY=0,touchEndY=0,onDragCancel()},handleTouchStart=evt=>{evt.stopPropagation(),touchMoveY=touchStartY=evt.changedTouches[0].screenY,onDragStart(touchStartY),dragCancelled=!1},handleTouchEnd=evt=>{evt.stopPropagation(),dragCancelled||((touchEndY=evt.changedTouches[0].screenY)>=touchMoveY?onDragEnd(touchEndY,touchEndY-touchStartY):cancelDrag())},handleTouchMove=evt=>{if(evt.stopPropagation(),!dragCancelled){let prevTouchMoveY=touchMoveY;(touchMoveY=evt.changedTouches[0].screenY)>prevTouchMoveY?onDrag(touchMoveY,touchMoveY-touchStartY):cancelDrag()}};return isVisible&&ref.current&&((elm=ref.current).addEventListener("touchstart",handleTouchStart,{passive:!0}),elm.addEventListener("touchend",handleTouchEnd,{passive:!0}),elm.addEventListener("touchmove",handleTouchMove,{passive:!0})),()=>{elm&&(elm.removeEventListener("touchstart",handleTouchStart),elm.removeEventListener("touchend",handleTouchEnd),elm.removeEventListener("touchmove",handleTouchMove))}},[ref,isVisible,onDragStart,onDragCancel,onDragEnd,onDrag])}

package/build/esm/shared/useHover.d.ts

@@ -0,0 +1,2 @@
+import type React from "react";
+export declare function useHover(ref: React.MutableRefObject<any>): boolean;

package/build/esm/shared/useHover.js

@@ -0,0 +1 @@
+import{useEffect,useState}from"react";export function useHover(ref){let[hovered,setHovered]=useState(!1),handleMouseOver=()=>setHovered(!0),handleMouseOut=()=>setHovered(!1);return(useEffect(()=>{if(!ref)return;let node=ref.current;if(node)return node.addEventListener("mouseover",handleMouseOver),node.addEventListener("mouseout",handleMouseOut),()=>{node.removeEventListener("mouseover",handleMouseOver),node.removeEventListener("mouseout",handleMouseOut)}},[ref]),ref)?hovered:null}

package/build/esm/shared/useKeyboard.d.ts

@@ -0,0 +1,17 @@
+import type { RefObject } from "react";
+/**
+ * useKeyboard handles activation of keyboard hotkeys on a given element.
+ * @param {Record<string, (e: KeyboardEvent) => {}} config - A map of keyboardEvent code to function.
+ * @param {RefObject} ref - The element which the keyboard config has to apply on.
+ * @param {boolean} isActive - A flag to determine when the keyboard config has to be applied.
+ *
+ * Example:
+ * useKeyboard({
+ *  Escape: closeMenu,
+ *  ArrowUp: () => { doSomething() },
+ *  KeyB: () => { console.log("bagi") },
+ * }, menuRef, menuOpen)
+ *
+ * This mean that these keyboard shortcuts will be applied on menuRef when the menu is opened.
+ */
+export declare function useKeyboard(config: Record<string, (e: KeyboardEvent) => void | boolean>, ref: RefObject<any>, isActive: boolean): void;

package/build/esm/shared/useKeyboard.js

@@ -0,0 +1 @@
+import{useEffect}from"react";import{useDocument}from"./useDocument";export function useKeyboard(config,ref,isActive){let document=useDocument(),handleKeyboard=event=>{if(!isActive||document.activeElement!==ref.current&&!ref.current.contains(document.activeElement))return;let targetConfigKey=Object.keys(config).find(targetKeys=>targetKeys.split(" ").includes(event.code));targetConfigKey&&(event.preventDefault(),!1===config[targetConfigKey](event)&&event.stopPropagation())};useEffect(()=>(document.addEventListener("keydown",handleKeyboard),()=>{document.removeEventListener("keydown",handleKeyboard)}))}

package/build/esm/shared/useOnEscapePress.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useOnEscapePress: (onEscape: (e: KeyboardEvent) => void, callbackDependencies?: import("react").DependencyList) => void;

package/build/esm/shared/useOnEscapePress.js

@@ -0,0 +1 @@
+import{useEffect,useCallback,useMemo}from"react";import{useDocument}from"./useDocument";let registry={},handleEscape=event=>{if(!event.defaultPrevented){let handlers=Object.values(registry).reverse();for(let i=0;i<handlers.length&&((0,handlers[i])(event),!event.defaultPrevented);i+=1);}},register=(id,handler)=>{registry[id]=handler},deregister=id=>{delete registry[id]},handlerId=0;export const useOnEscapePress=(onEscape,callbackDependencies=[onEscape])=>{let escapeCallback=useCallback(onEscape,callbackDependencies),document=useDocument(),handler=useCallback(event=>{"Escape"===event.key&&escapeCallback(event)},[escapeCallback]),id=useMemo(()=>handlerId+=1,[]);useEffect(()=>(0===Object.keys(registry).length&&document.addEventListener("keydown",handleEscape),register(id,handler),()=>{deregister(id),0===Object.keys(registry).length&&document.removeEventListener("keydown",handleEscape)}),[id,handler,document])};

package/build/esm/shared/useOutsideClick.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from "react";
+/**
+ * useOutsideClick handles outside click of a given element.
+ * @param {RefObject} ref - Reference to a DOM element.
+ * @param {e: Event) => void} handler - Function invoked when a click is triggered outside the referenced element.
+ * @param {boolean} isActive - A flag to determine when the outside click event needs to be applied.
+ *
+ * Example: useOutsideClick(menuRef, closeMenu, menuIsOpen)
+ * Means that when a menu is opened, clicking outside of the menu will close the mneu.
+ */
+export declare const useOutsideClick: (ref: RefObject<any>, handler: (e: Event) => void, isActive: boolean) => void;

package/build/esm/shared/useOutsideClick.js

@@ -0,0 +1 @@
+import{useEffect,useCallback}from"react";import{useWindow}from"./useWindow";export const useOutsideClick=(ref,handler,isActive)=>{let window=useWindow(),outsideClickEvent=useCallback(e=>{ref&&ref.current&&!ref.current.contains(e.target)&&handler(e)},[handler,ref]);useEffect(()=>(isActive&&window.addEventListener("click",outsideClickEvent),()=>{window.removeEventListener("click",outsideClickEvent)}),[isActive,window,outsideClickEvent])};

package/build/esm/shared/useWindow.d.ts

@@ -0,0 +1 @@
+export declare function useWindow(): Window;

package/build/esm/shared/useWindow.js

@@ -0,0 +1 @@
+export function useWindow(){return window}

package/build/esm/types/index.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import type { Static } from "runtypes";
+import { Literal, Union } from "runtypes";
+export declare const LinkTextSizeRuntype: Union<[Literal<"xs">, Literal<"s">, Literal<"m">, Literal<"l">]>;
+export type LinkTextSize = Static<typeof LinkTextSizeRuntype>;
+export declare const TextSizeRuntype: Union<[Literal<"xs">, Literal<"s">, Literal<"m">]>;
+export type TextSize = Static<typeof TextSizeRuntype>;
+export declare const BorderRadiusRuntype: Union<[Literal<"xs">, Literal<"s">, Literal<"m">]>;
+export type BorderRadius = Static<typeof BorderRadiusRuntype>;
+export declare const TextAlignmentRuntype: Union<[Literal<"left">, Literal<"right">, Literal<"center">]>;
+export type TextAlignment = Static<typeof TextAlignmentRuntype>;
+export declare const HorizontalAlignmentRuntype: Union<[Literal<"left">, Literal<"right">, Literal<"center">, Literal<"spaceBetween">]>;
+export type HorizontalAlignment = Static<typeof HorizontalAlignmentRuntype>;
+export declare const VerticalAlignmentRuntype: Union<[Literal<"top">, Literal<"bottom">, Literal<"center">, Literal<"stretch">]>;
+export type VerticalAlignment = Static<typeof VerticalAlignmentRuntype>;
+export declare const SpaceSizesRuntype: Union<[Literal<"zero">, Literal<"xxs">, Literal<"xs">, Literal<"s">, Literal<"m">, Literal<"l">, Literal<"xl">, Literal<"xxl">]>;
+export type SpaceSizes = Static<typeof SpaceSizesRuntype>;
+export declare const ColumsSizesRuntype: Union<[Literal<1>, Literal<2>, Literal<3>, Literal<4>, Literal<5>, Literal<6>, Literal<7>, Literal<8>, Literal<9>, Literal<10>, Literal<11>, Literal<12>, Literal<"auto">, Literal<"narrow">, Literal<"fill">]>;
+export type ColumnSizes = Static<typeof ColumsSizesRuntype>;
+export declare const ColumnAlignmentRunType: Union<[Literal<"auto">, Literal<"start">, Literal<"center">, Literal<"end">]>;
+export type ColumnAlignment = Static<typeof ColumnAlignmentRunType>;
+export declare const OrderRuntype: Union<[Literal<"first">, Literal<"last">, Literal<"unset">]>;
+export type Order = Static<typeof OrderRuntype>;
+export declare const BaseVariationsRuntype: Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>;
+export declare const BaseColorsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>;
+export type BaseVariations = Static<typeof BaseVariationsRuntype>;
+export type BaseColors = Static<typeof BaseColorsRuntype>;
+declare const TextColorsRuntype: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">]>;
+export type TextColors = Static<typeof TextColorsRuntype>;
+declare const TextVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">]>;
+export type TextVariations = Static<typeof TextVariationsRuntype>;
+declare const TextWeightRuntype: Union<[Literal<"normal">, Literal<"bold">, Literal<"black">, Literal<"inherit">]>;
+export type TextWeight = Static<typeof TextWeightRuntype>;
+declare const IconsColorsRuntime: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">, Literal<"quaternary">]>;
+export type IconsColors = Static<typeof IconsColorsRuntime>;
+declare const IconsVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"success">, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">]>;
+export type IconsVariations = Static<typeof IconsVariationsRuntype>;
+declare const CalloutVariationsRuntype: Union<[Literal<"info">, Literal<"success">, Literal<"error">, Literal<"warning">]>;
+export type CalloutVariations = Static<typeof CalloutVariationsRuntype>;
+declare const LinkVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>]>;
+export type LinkVariations = Static<typeof LinkVariationsRuntype>;
+declare const LinkColorsRuntype: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>]>;
+export type LinkColors = Static<typeof LinkColorsRuntype>;
+export type MQ<T> = [T, T?, T?];
+declare const ButtonSizeRuntype: Union<[Literal<"s">, Literal<"m">, Literal<"l">]>;
+export type ButtonSize = Static<typeof ButtonSizeRuntype>;
+export declare const HyphensRuntype: Union<[Literal<"auto">, Literal<"none">, Literal<"manual">]>;
+export type Hyphens = Static<typeof HyphensRuntype>;
+export declare const ToggleSizeRuntype: Union<[Literal<"s">, Literal<"m">]>;
+export type ToggleSize = Static<typeof ToggleSizeRuntype>;
+export type AsProp<C extends React.ElementType> = {
+    as?: C;
+};
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+export type PolymorphicComponentProps<C extends React.ElementType, Props> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];
+export type PolymorphicComponentPropsWithRef<C extends React.ElementType, Props> = PolymorphicComponentProps<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+export {};

package/build/esm/types/index.js

@@ -0,0 +1 @@
+import{Literal,Union}from"runtypes";export const LinkTextSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"),Literal("l"));export const TextSizeRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const BorderRadiusRuntype=Union(Literal("xs"),Literal("s"),Literal("m"));export const TextAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"));export const HorizontalAlignmentRuntype=Union(Literal("left"),Literal("right"),Literal("center"),Literal("spaceBetween"));export const VerticalAlignmentRuntype=Union(Literal("top"),Literal("bottom"),Literal("center"),Literal("stretch"));export const SpaceSizesRuntype=Union(Literal("zero"),Literal("xxs"),Literal("xs"),Literal("s"),Literal("m"),Literal("l"),Literal("xl"),Literal("xxl"));export const ColumsSizesRuntype=Union(Literal(1),Literal(2),Literal(3),Literal(4),Literal(5),Literal(6),Literal(7),Literal(8),Literal(9),Literal(10),Literal(11),Literal(12),Literal("auto"),Literal("narrow"),Literal("fill"));export const ColumnAlignmentRunType=Union(Literal("auto"),Literal("start"),Literal("center"),Literal("end"));export const OrderRuntype=Union(Literal("first"),Literal("last"),Literal("unset"));export const BaseVariationsRuntype=Union(Literal("primary"),Literal("secondary"),Literal("tertiary"));export const BaseColorsRuntype=Union(BaseVariationsRuntype,Literal("accent"));Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning")),Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning")),Union(Literal("normal"),Literal("bold"),Literal("black"),Literal("inherit")),Union(BaseColorsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand"),Literal("quaternary")),Union(BaseVariationsRuntype,Literal("success"),Literal("info"),Literal("error"),Literal("warning"),Literal("inherit"),Literal("brand")),Union(Literal("info"),Literal("success"),Literal("error"),Literal("warning")),Union(BaseVariationsRuntype),Union(BaseColorsRuntype),Union(Literal("s"),Literal("m"),Literal("l"));export const HyphensRuntype=Union(Literal("auto"),Literal("none"),Literal("manual"));export const ToggleSizeRuntype=Union(Literal("s"),Literal("m"));

package/build/esm/web-tokens/_breakpoints.json

@@ -0,0 +1,17 @@
+{
+    "small": {
+        "category": "breakpoint",
+        "value": 576,
+        "variableName": "$breakpoint-small"
+    },
+    "medium": {
+        "category": "breakpoint",
+        "value": 768,
+        "variableName": "$breakpoint-medium"
+    },
+    "large": {
+        "category": "breakpoint",
+        "value": 1280,
+        "variableName": "$breakpoint-large"
+    }
+}