@codecademy/gamut-styles 17.1.3-alpha.5daf90.0 → 17.1.3-alpha.8efe7d.0

package/dist/themes/enterprise.js

@@ -0,0 +1,68 @@
+import { createTheme } from '@codecademy/variance';
+import { enterprisePalette } from '../variables';
+import { coreTheme } from './core';
+export var enterpriseTheme = createTheme(coreTheme).addColors(enterprisePalette).addColorModes('light', {
+  light: {
+    text: {
+      _: 'gray-900',
+      accent: 'blue',
+      disabled: 'gray-500',
+      secondary: 'gray-500'
+    },
+    background: {
+      _: 'white',
+      contrast: 'white',
+      current: 'white',
+      primary: 'beige',
+      selected: 'blue-50',
+      disabled: 'gray-100',
+      hover: 'gray-200'
+    },
+    primary: {
+      _: 'blue',
+      hover: 'blue-400',
+      inverse: 'white'
+    },
+    secondary: {
+      _: 'gray-900',
+      hover: 'gray-800'
+    },
+    interface: {
+      _: 'blue',
+      hover: 'blue-400'
+    },
+    danger: {
+      _: 'red',
+      hover: 'red-600'
+    }
+  },
+  dark: {
+    text: {
+      _: 'white',
+      accent: 'blue',
+      disabled: 'gray-100',
+      secondary: 'gray-200'
+    },
+    background: {
+      _: 'gray-900',
+      current: 'gray-800',
+      primary: 'gray-900',
+      selected: 'gray-700',
+      disabled: 'gray-500',
+      hover: 'gray-600'
+    },
+    primary: {
+      _: 'skyBlue',
+      hover: 'skyBlue-100',
+      inverse: 'blue'
+    },
+    secondary: {
+      _: 'white',
+      hover: 'blue-50'
+    },
+    interface: {
+      _: 'white',
+      hover: 'blue-50'
+    }
+  }
+}).build();

package/dist/themes/index.d.ts

@@ -1,3 +1,4 @@
 export * from './core';
 export * from './platform';
 export * from './admin';
+export * from './enterprise';

package/dist/themes/index.js

@@ -1,3 +1,4 @@
 export * from './core';
 export * from './platform';
-export * from './admin';
+export * from './admin';
+export * from './enterprise';

package/dist/themes/platform.d.ts

@@ -929,7 +929,7 @@ export declare const platformTheme: Record<"breakpoints", {
         }, "-", "_">;
     }>;
     mode: "light" | "dark";
-    _getColorValue: (color: import("@codecademy/variance").Path<{
+    _getColorValue: (color: "text" | import("@codecademy/variance").Path<{
         readonly beige: "#FFF0E5";
         readonly blue: "#1557FF";
         readonly green: "#008A27";
@@ -997,7 +997,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly "white-200": string;
         readonly "white-600": string;
         readonly "white-700": string;
-    }, "-"> | "text" | "secondary" | "background" | "primary" | "danger" | "interface" | "shadow-opaque" | "shadow-solid" | "text-disabled" | "text-accent" | "text-secondary" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | import("@codecademy/variance").Path<{
+    }, "-"> | "secondary" | "background" | "primary" | "danger" | "interface" | "text-disabled" | "text-accent" | "text-secondary" | "shadow-opaque" | "shadow-solid" | "secondary-hover" | "feedback-error" | "feedback-success" | "feedback-warning" | "background-disabled" | "background-contrast" | "background-current" | "background-primary" | "background-selected" | "background-hover" | "primary-hover" | "primary-inverse" | "danger-hover" | "interface-hover" | import("@codecademy/variance").Path<{
         readonly lightBeige: "#FFFBF8";
         readonly gold: "#8A7300";
         readonly teal: "#027E97";

package/dist/themes/platform.js

@@ -7,7 +7,7 @@ import { coreTheme } from './core';
  * That are not needed for the rest of the application.
  */
 
-export const platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
+export var platformTheme = createTheme(coreTheme).addColors(platformPalette).addColorModes('dark', {
   light: {
     editor: {
       attribute: 'green-700',

package/dist/utilities/themed.js

@@ -10,10 +10,8 @@ import get from 'lodash/get';
  */
 
 export function themed(path) {
-  return _ref => {
-    let {
-      theme
-    } = _ref;
+  return function (_ref) {
+    var theme = _ref.theme;
     return get(theme, path);
   };
 }

package/dist/variables/borderRadii.js

@@ -1,4 +1,4 @@
-export const borderRadii = {
+export var borderRadii = {
   none: '0px',
   sm: '2px',
   md: '4px',

package/dist/variables/colors.d.ts

@@ -191,3 +191,103 @@ export declare const platformPalette: {
     readonly "teal-500": "#027E97";
     readonly "purple-300": "#B3CCFF";
 };
+export declare const enterpriseSwatches: {
+    readonly blue: {
+        readonly '50': "#F0F8FE";
+        readonly '100': "#E0F2FE";
+        readonly '200': "#B7DDF8";
+        readonly '300': "#78BAE9";
+        readonly '400': "#3498DF";
+        readonly '500': "#0073C4";
+        readonly '600': "#005998";
+        readonly '700': "#00406C";
+        readonly '800': "#002640";
+        readonly '900': "#001626";
+    };
+    readonly gray: {
+        readonly '50': "#F3F5F7";
+        readonly '100': "#E1E6EA";
+        readonly '200': "#CAD4DC";
+        readonly '300': "#AAB8C1";
+        readonly '400': "#80919C";
+        readonly '500': "#6B7B85";
+        readonly '600': "#56646E";
+        readonly '700': "#404E58";
+        readonly '800': "#2B3841";
+        readonly '900': "#15222B";
+    };
+    readonly skyBlue: {
+        readonly '100': "#E6FAFF";
+        readonly '500': "#21B9E8";
+    };
+    readonly green: {
+        readonly '0': "#EBF6E4";
+        readonly '400': "#6EAB49";
+        readonly '500': "#42811A";
+        readonly '700': "#1D4C12";
+    };
+    readonly pink: {
+        readonly '100': "#FEE7F2";
+        readonly '400': "#DF659E";
+        readonly '500': "#CD397E";
+    };
+    readonly yellow: {
+        readonly '0': "#FEFAE8";
+        readonly '500': "#E8C427";
+    };
+    readonly orange: {
+        readonly '500': "#F2A036";
+    };
+    readonly red: {
+        readonly '0': "#FBE8E8";
+        readonly '100': "#F4C7C7";
+        readonly '500': "#BE3636";
+        readonly '600': "#932729";
+    };
+};
+export declare const enterprisePalette: {
+    readonly mulberryPink: "#CD397E";
+    readonly blue: "#3498DF";
+    readonly green: "#42811A";
+    readonly skyBlue: "#21B9E8";
+    readonly yellow: "#E8C427";
+    readonly red: "#BE3636";
+    readonly gray: "#6B7B85";
+    readonly black: "#000C14";
+    readonly "blue-100": "#E0F2FE";
+    readonly "blue-300": "#78BAE9";
+    readonly "blue-400": "#3498DF";
+    readonly "blue-500": "#0073C4";
+    readonly "blue-800": "#002640";
+    readonly "green-0": "#EBF6E4";
+    readonly "green-400": "#6EAB49";
+    readonly "green-700": "#1D4C12";
+    readonly "yellow-0": "#FEFAE8";
+    readonly "yellow-500": "#E8C427";
+    readonly "pink-400": "#DF659E";
+    readonly "red-0": "#FBE8E8";
+    readonly "red-100": "#F4C7C7";
+    readonly "red-500": "#BE3636";
+    readonly "red-600": "#932729";
+    readonly "orange-500": "#F2A036";
+    readonly "gray-100": "#E1E6EA";
+    readonly "gray-300": "#AAB8C1";
+    readonly "gray-800": "#2B3841";
+    readonly "gray-200": "#CAD4DC";
+    readonly "gray-600": "#56646E";
+    readonly "gray-900": "#15222B";
+    readonly "blue-200": "#B7DDF8";
+    readonly "blue-600": "#005998";
+    readonly "blue-700": "#00406C";
+    readonly "blue-900": "#001626";
+    readonly "blue-50": "#F0F8FE";
+    readonly "green-500": "#42811A";
+    readonly "pink-100": "#FEE7F2";
+    readonly "pink-500": "#CD397E";
+    readonly "gray-400": "#80919C";
+    readonly "gray-500": "#6B7B85";
+    readonly "gray-700": "#404E58";
+    readonly "gray-50": "#F3F5F7";
+    readonly "skyBlue-100": "#E6FAFF";
+    readonly "skyBlue-500": "#21B9E8";
+};

package/dist/variables/colors.js

@@ -1,13 +1,19 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { flattenScale } from '@codecademy/variance';
 import { rgba } from 'polished';
 /**
  * Core Colors
  */
 
-const black = '#000000';
-const white = '#ffffff';
-const navy = '#10162F';
-const effects = {
+var black = '#000000';
+var white = '#ffffff';
+var navy = '#10162F';
+var effects = {
   shadow: {
     black: {
       slight: rgba(black, 0.15),
@@ -19,7 +25,7 @@ const effects = {
     }
   }
 };
-export const coreSwatches = {
+export var coreSwatches = {
   beige: {
     '100': '#FFF0E5'
   },
@@ -88,7 +94,7 @@ export const coreSwatches = {
     '700': rgba(white, 0.8)
   }
 };
-export const trueColors = {
+export var trueColors = {
   beige: coreSwatches.beige[100],
   blue: coreSwatches.blue[500],
   green: coreSwatches.green[700],
@@ -105,20 +111,16 @@ export const trueColors = {
   paleRed: coreSwatches.red[100],
   red: coreSwatches.red[500],
   yellow: coreSwatches.yellow[500],
-  black,
-  white
-};
-export const corePalette = {
-  ...flattenScale(coreSwatches),
-  ...flattenScale(effects),
-  ...trueColors
+  black: black,
+  white: white
 };
+export var corePalette = _objectSpread(_objectSpread(_objectSpread({}, flattenScale(coreSwatches)), flattenScale(effects)), trueColors);
 
 /**
  * Platform Colors
  */
 
-export const platformSwatches = {
+export var platformSwatches = {
   beige: {
     '0': '#FFFBF8'
   },
@@ -138,13 +140,81 @@ export const platformSwatches = {
     '300': '#B3CCFF'
   }
 };
-const truePlatformColors = {
+var truePlatformColors = {
   lightBeige: platformSwatches.beige[0],
   gold: platformSwatches.gold[800],
   teal: platformSwatches.teal[500],
   purple: platformSwatches.purple[300]
 };
-export const platformPalette = {
-  ...flattenScale(platformSwatches),
-  ...truePlatformColors
-};
+export var platformPalette = _objectSpread(_objectSpread({}, flattenScale(platformSwatches)), truePlatformColors);
+
+/**
+ * Enterprise Colors
+ */
+
+var enterpriseBlack = '#000C14';
+export var enterpriseSwatches = {
+  blue: {
+    '50': '#F0F8FE',
+    '100': '#E0F2FE',
+    '200': '#B7DDF8',
+    '300': '#78BAE9',
+    '400': '#3498DF',
+    '500': '#0073C4',
+    '600': '#005998',
+    '700': '#00406C',
+    '800': '#002640',
+    '900': '#001626'
+  },
+  gray: {
+    '50': '#F3F5F7',
+    '100': '#E1E6EA',
+    '200': '#CAD4DC',
+    '300': '#AAB8C1',
+    '400': '#80919C',
+    '500': '#6B7B85',
+    '600': '#56646E',
+    '700': '#404E58',
+    '800': '#2B3841',
+    '900': '#15222B'
+  },
+  skyBlue: {
+    '100': '#E6FAFF',
+    '500': '#21B9E8'
+  },
+  green: {
+    '0': '#EBF6E4',
+    '400': '#6EAB49',
+    '500': '#42811A',
+    '700': '#1D4C12'
+  },
+  pink: {
+    '100': '#FEE7F2',
+    '400': '#DF659E',
+    '500': '#CD397E'
+  },
+  yellow: {
+    '0': '#FEFAE8',
+    '500': '#E8C427'
+  },
+  orange: {
+    '500': '#F2A036'
+  },
+  red: {
+    '0': '#FBE8E8',
+    '100': '#F4C7C7',
+    '500': '#BE3636',
+    '600': '#932729'
+  }
+};
+var trueEnterpriseColors = {
+  mulberryPink: enterpriseSwatches.pink[500],
+  blue: enterpriseSwatches.blue[400],
+  green: enterpriseSwatches.green[500],
+  skyBlue: enterpriseSwatches.skyBlue[500],
+  yellow: enterpriseSwatches.yellow[500],
+  red: enterpriseSwatches.red[500],
+  gray: enterpriseSwatches.gray[500],
+  black: enterpriseBlack
+};
+export var enterprisePalette = _objectSpread(_objectSpread({}, flattenScale(enterpriseSwatches)), trueEnterpriseColors);

package/dist/variables/deprecated-colors.d.ts

@@ -149,8 +149,8 @@ export declare const colors: {
     readonly "gray-900": "#19191a";
     readonly "beige-0": "#FFF0E5";
     readonly "blue-900": "#10162f";
-    readonly "gray-0": "#ffffff";
     readonly "gray-400": "#a2a2a6";
     readonly "gray-500": "#828285";
     readonly "gray-700": "#4b4b4d";
+    readonly "gray-0": "#ffffff";
 };

package/dist/variables/deprecated-colors.js

@@ -1,18 +1,20 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { flattenScale } from '@codecademy/variance';
 import { corePalette } from './colors';
-const {
-  black,
-  white
-} = corePalette;
-
+var black = corePalette.black,
+  white = corePalette.white;
 /**
  * @deprecated
  * Using these variables directly is no longer supported.
  *
  * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
  */
-
-export const interactiveColors = {
+export var interactiveColors = {
   dark: corePalette.hyper,
   light: corePalette.yellow
 };
@@ -24,7 +26,7 @@ export const interactiveColors = {
  * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
  */
 
-export const editorColors = {
+export var editorColors = {
   blue: '#83fff5',
   deepPurple: '#cc7bc2',
   gray: '#939598',
@@ -42,7 +44,7 @@ export const editorColors = {
  * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
  */
 
-export const platformColors = {
+export var platformColors = {
   mint: {
     '500': '#37c3be',
     '600': '#2c9c98',
@@ -67,7 +69,7 @@ export const platformColors = {
  * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
  */
 
-export const swatches = {
+export var swatches = {
   beige: {
     '0': '#FFF0E5'
   },
@@ -123,7 +125,7 @@ export const swatches = {
  * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
  */
 
-const trueColors = {
+var trueColors = {
   beige: swatches.beige[0],
   blue: swatches.blue[500],
   green: swatches.green[700],
@@ -139,8 +141,8 @@ const trueColors = {
   pink: swatches.pink[400],
   red: swatches.red[500],
   yellow: swatches.yellow[500],
-  black,
-  white
+  black: black,
+  white: white
 };
 
 /**
@@ -150,7 +152,4 @@ const trueColors = {
  * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors)
  */
 
-export const colors = {
-  ...flattenScale(swatches),
-  ...trueColors
-};
+export var colors = _objectSpread(_objectSpread({}, flattenScale(swatches)), trueColors);

package/dist/variables/elements.js

@@ -1,4 +1,4 @@
-export const elements = {
+export var elements = {
   headerHeight: {
     base: '4rem',
     md: '5rem'

package/dist/variables/responsive.js

@@ -1,19 +1,21 @@
-export const breakpoints = {
+export var breakpoints = {
   xs: '480px',
   sm: '768px',
   md: '1024px',
   lg: '1200px',
   xl: '1440px'
 };
-const createMediaQuery = (size, direction) => `@media only screen and (${direction}-width: ${breakpoints[size]})`;
-export const mediaQueries = {
+var createMediaQuery = function createMediaQuery(size, direction) {
+  return "@media only screen and (".concat(direction, "-width: ").concat(breakpoints[size], ")");
+};
+export var mediaQueries = {
   xs: createMediaQuery('xs', 'min'),
   sm: createMediaQuery('sm', 'min'),
   md: createMediaQuery('md', 'min'),
   lg: createMediaQuery('lg', 'min'),
   xl: createMediaQuery('xl', 'min')
 };
-export const contentWidths = {
+export var contentWidths = {
   md: breakpoints.lg,
   max: breakpoints.xl
 };

package/dist/variables/spacing.js

@@ -1,5 +1,5 @@
 import { pxRem } from '../styles/pxRem';
-export const spacing = {
+export var spacing = {
   0: 0,
   4: pxRem(4),
   8: pxRem(8),

package/dist/variables/timing.js

@@ -1,12 +1,12 @@
-export const timingValues = {
+export var timingValues = {
   fast: 150,
   medium: 200,
   base: 300,
   slow: 350
 };
-export const timing = {
-  fast: `${timingValues.fast}ms`,
-  medium: `${timingValues.medium}ms`,
-  base: `${timingValues.base}ms`,
-  slow: `${timingValues.slow}ms`
+export var timing = {
+  fast: "".concat(timingValues.fast, "ms"),
+  medium: "".concat(timingValues.medium, "ms"),
+  base: "".concat(timingValues.base, "ms"),
+  slow: "".concat(timingValues.slow, "ms")
 };

package/dist/variables/typography.js

@@ -1,21 +1,15 @@
 import { pxRem } from '../styles/pxRem';
-export const fontAccent = `"Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
-"Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-"Helvetica Neue", sans-serif`;
-export const fontBase = `"Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
-"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-sans-serif`;
-export const fontMonospace = `Monaco, Menlo, "Ubuntu Mono", "Droid Sans Mono", Consolas,
-monospace`;
-export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
-"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
-export const fontFamily = {
+export var fontAccent = "\"Suisse\", \"Apercu\", -apple-system, BlinkMacSystemFont,\n\"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\",\n\"Helvetica Neue\", sans-serif";
+export var fontBase = "\"Apercu\", -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n\"Roboto\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\nsans-serif";
+export var fontMonospace = "Monaco, Menlo, \"Ubuntu Mono\", \"Droid Sans Mono\", Consolas,\nmonospace";
+export var fontSystem = "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Ubuntu\",\n\"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif";
+export var fontFamily = {
   accent: fontAccent,
   base: fontBase,
   monospace: fontMonospace,
   system: fontSystem
 };
-export const fontSize = {
+export var fontSize = {
   64: pxRem(64),
   44: pxRem(44),
   34: pxRem(34),
@@ -26,12 +20,12 @@ export const fontSize = {
   16: pxRem(16),
   14: pxRem(14)
 };
-export const lineHeight = {
+export var lineHeight = {
   base: 1.5,
   spacedTitle: 1.3,
   title: 1.2
 };
-export const fontWeight = {
+export var fontWeight = {
   base: 400,
   title: 700,
   700: 700,