@carbon/type 11.10.0-rc.0 → 11.11.0-rc.0

package/umd/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CarbonType = {}));
-})(this, (function (exports) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@carbon/layout')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@carbon/layout'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CarbonType = {}, global.CarbonLayout));
+})(this, (function (exports, layout) { 'use strict';
 
   /**
    * Copyright IBM Corp. 2018, 2018
@@ -92,79 +92,6 @@
     return result;
   }
 
-  /**
-   * Copyright IBM Corp. 2018, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  /**
-   * Copyright IBM Corp. 2018, 2018
-   *
-   * This source code is licensed under the Apache-2.0 license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  // Default, Use with em() and rem() functions
-
-  var baseFontSize = 16;
-  /**
-   * Convert a given px unit to a rem unit
-   * @param {number} px
-   * @returns {string}
-   */
-
-  function rem(px) {
-    return "".concat(px / baseFontSize, "rem");
-  }
-  /**
-   * Convert a given px unit to its string representation
-   * @param {number} value - number of pixels
-   * @returns {string}
-   */
-
-
-  function px(value) {
-    return "".concat(value, "px");
-  } // Breakpoint
-  // Initial map of our breakpoints and their values
-
-
-  var breakpoints = {
-    sm: {
-      width: rem(320),
-      columns: 4,
-      margin: '0'
-    },
-    md: {
-      width: rem(672),
-      columns: 8,
-      margin: rem(16)
-    },
-    lg: {
-      width: rem(1056),
-      columns: 16,
-      margin: rem(16)
-    },
-    xlg: {
-      width: rem(1312),
-      columns: 16,
-      margin: rem(16)
-    },
-    max: {
-      width: rem(1584),
-      columns: 16,
-      margin: rem(24)
-    }
-  };
-
-  function breakpointUp(name) {
-    return "@media (min-width: ".concat(breakpoints[name].width, ")");
-  }
-
-  function breakpoint() {
-    return breakpointUp.apply(void 0, arguments);
-  } // Mini-unit
-
   /**
    * Copyright IBM Corp. 2018, 2018
    *
@@ -173,7 +100,7 @@
    */
   var reset = {
     html: {
-      fontSize: px(baseFontSize)
+      fontSize: layout.px(layout.baseFontSize)
     },
     body: {
       fontFamily: fontFamilies.sans,
@@ -307,127 +234,127 @@
   }
 
   var caption01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var caption02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var label01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var label02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var helperText01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var helperText02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var bodyShort01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var bodyLong01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.42857,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var bodyShort02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.375,
     letterSpacing: 0
   };
   var bodyLong02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.5,
     letterSpacing: 0
   };
   var code01$1 = {
     fontFamily: fontFamilies.mono,
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var code02$1 = {
     fontFamily: fontFamilies.mono,
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.42857,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var heading01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.42857,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var productiveHeading01$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   };
   var heading02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.5,
     letterSpacing: 0
   };
   var productiveHeading02$1 = {
-    fontSize: rem(scale[2]),
+    fontSize: layout.rem(scale[2]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.375,
     letterSpacing: 0
   };
   var productiveHeading03$1 = {
-    fontSize: rem(scale[4]),
+    fontSize: layout.rem(scale[4]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.4,
     letterSpacing: 0
   };
   var productiveHeading04$1 = {
-    fontSize: rem(scale[6]),
+    fontSize: layout.rem(scale[6]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
     letterSpacing: 0
   };
   var productiveHeading05$1 = {
-    fontSize: rem(scale[7]),
-    fontWeight: fontWeights.light,
+    fontSize: layout.rem(scale[7]),
+    fontWeight: fontWeights.regular,
     lineHeight: 1.25,
     letterSpacing: 0
   };
   var productiveHeading06$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
     lineHeight: 1.199,
     letterSpacing: 0
   };
   var productiveHeading07$1 = {
-    fontSize: rem(scale[11]),
+    fontSize: layout.rem(scale[11]),
     fontWeight: fontWeights.light,
     lineHeight: 1.199,
     letterSpacing: 0
@@ -439,138 +366,139 @@
     lineHeight: 1.5
   });
   var expressiveHeading03$1 = {
-    fontSize: rem(scale[4]),
+    fontSize: layout.rem(scale[4]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.4,
     letterSpacing: 0,
     breakpoints: {
       xlg: {
-        fontSize: rem(scale[4]),
-        lineHeight: 1.25
+        fontSize: layout.rem(scale[4]),
+        lineHeight: 1.4
       },
       max: {
-        fontSize: rem(scale[5]),
+        fontSize: layout.rem(scale[5]),
         lineHeight: 1.334
       }
     }
   };
   var expressiveHeading04$1 = {
-    fontSize: rem(scale[6]),
+    fontSize: layout.rem(scale[6]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
     letterSpacing: 0,
     breakpoints: {
       xlg: {
-        fontSize: rem(scale[7]),
-        fontWeight: fontWeights.light,
+        fontSize: layout.rem(scale[7]),
+        fontWeight: fontWeights.regular,
         lineHeight: 1.25
       },
       max: {
-        fontSize: rem(scale[7]),
-        fontWeight: fontWeights.light
+        fontSize: layout.rem(scale[7]),
+        fontWeight: fontWeights.regular
       }
     }
   };
   var expressiveHeading05$1 = {
-    fontSize: rem(scale[7]),
-    fontWeight: fontWeights.light,
+    fontSize: layout.rem(scale[7]),
+    fontWeight: fontWeights.regular,
     lineHeight: 1.25,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[8]),
+        fontSize: layout.rem(scale[8]),
+        fontWeight: fontWeights.light,
         lineHeight: 1.22,
         letterSpacing: 0
       },
       lg: {
-        fontSize: rem(scale[9]),
+        fontSize: layout.rem(scale[9]),
         lineHeight: 1.19,
         letterSpacing: 0
       },
       xlg: {
-        fontSize: rem(scale[10]),
+        fontSize: layout.rem(scale[10]),
         lineHeight: 1.17,
         letterSpacing: 0
       },
       max: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         letterSpacing: 0
       }
     }
   };
   var expressiveHeading06$1 = {
-    fontSize: rem(scale[7]),
+    fontSize: layout.rem(scale[7]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.25,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[8]),
+        fontSize: layout.rem(scale[8]),
         fontWeight: fontWeights.semibold,
         lineHeight: 1.22,
         letterSpacing: 0
       },
       lg: {
-        fontSize: rem(scale[9]),
+        fontSize: layout.rem(scale[9]),
         fontWeight: fontWeights.semibold,
         lineHeight: 1.19,
         letterSpacing: 0
       },
       xlg: {
-        fontSize: rem(scale[10]),
+        fontSize: layout.rem(scale[10]),
         fontWeight: fontWeights.semibold,
         lineHeight: 1.17,
         letterSpacing: 0
       },
       max: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         fontWeight: fontWeights.semibold,
         letterSpacing: 0
       }
     }
   };
   var expressiveParagraph01$1 = {
-    fontSize: rem(scale[5]),
+    fontSize: layout.rem(scale[5]),
     fontWeight: fontWeights.light,
     lineHeight: 1.334,
     letterSpacing: 0,
     breakpoints: {
       lg: {
-        fontSize: rem(scale[6]),
+        fontSize: layout.rem(scale[6]),
         lineHeight: 1.28572
       },
       max: {
-        fontSize: rem(scale[7]),
+        fontSize: layout.rem(scale[7]),
         lineHeight: 1.25
       }
     }
   };
   var quotation01$1 = {
     fontFamily: fontFamilies.serif,
-    fontSize: rem(scale[4]),
+    fontSize: layout.rem(scale[4]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.3,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[4]),
+        fontSize: layout.rem(scale[4]),
         fontWeight: fontWeights.regular,
         letterSpacing: 0
       },
       lg: {
-        fontSize: rem(scale[5]),
+        fontSize: layout.rem(scale[5]),
         fontWeight: fontWeights.regular,
         lineHeight: 1.334,
         letterSpacing: 0
       },
       xlg: {
-        fontSize: rem(scale[6]),
+        fontSize: layout.rem(scale[6]),
         fontWeight: fontWeights.regular,
         lineHeight: 1.28572,
         letterSpacing: 0
       },
       max: {
-        fontSize: rem(scale[7]),
+        fontSize: layout.rem(scale[7]),
         fontWeight: fontWeights.regular,
         lineHeight: 1.25,
         letterSpacing: 0
@@ -579,122 +507,122 @@
   };
   var quotation02$1 = {
     fontFamily: fontFamilies.serif,
-    fontSize: rem(scale[7]),
+    fontSize: layout.rem(scale[7]),
     fontWeight: fontWeights.light,
     lineHeight: 1.25,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[8]),
+        fontSize: layout.rem(scale[8]),
         lineHeight: 1.22
       },
       lg: {
-        fontSize: rem(scale[9]),
+        fontSize: layout.rem(scale[9]),
         lineHeight: 1.19
       },
       xlg: {
-        fontSize: rem(scale[10]),
+        fontSize: layout.rem(scale[10]),
         lineHeight: 1.17
       },
       max: {
-        fontSize: rem(scale[12])
+        fontSize: layout.rem(scale[12])
       }
     }
   };
   var display01$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
     lineHeight: 1.19,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[9])
+        fontSize: layout.rem(scale[9])
       },
       lg: {
-        fontSize: rem(scale[11])
+        fontSize: layout.rem(scale[11])
       },
       xlg: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         lineHeight: 1.17
       },
       max: {
-        fontSize: rem(scale[14]),
+        fontSize: layout.rem(scale[14]),
         lineHeight: 1.13
       }
     }
   };
   var display02$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.semibold,
     lineHeight: 1.19,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[9])
+        fontSize: layout.rem(scale[9])
       },
       lg: {
-        fontSize: rem(scale[11])
+        fontSize: layout.rem(scale[11])
       },
       xlg: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         lineHeight: 1.16
       },
       max: {
-        fontSize: rem(scale[14]),
+        fontSize: layout.rem(scale[14]),
         lineHeight: 1.13
       }
     }
   };
   var display03$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
     lineHeight: 1.19,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[11]),
+        fontSize: layout.rem(scale[11]),
         lineHeight: 1.18
       },
       lg: {
-        fontSize: rem(scale[12]),
+        fontSize: layout.rem(scale[12]),
         lineHeight: 1.16,
-        letterSpacing: px(-0.64)
+        letterSpacing: layout.px(-0.64)
       },
       xlg: {
-        fontSize: rem(scale[14]),
+        fontSize: layout.rem(scale[14]),
         lineHeight: 1.13
       },
       max: {
-        fontSize: rem(scale[15]),
+        fontSize: layout.rem(scale[15]),
         lineHeight: 1.11,
-        letterSpacing: px(-0.96)
+        letterSpacing: layout.px(-0.96)
       }
     }
   };
   var display04$1 = {
-    fontSize: rem(scale[9]),
+    fontSize: layout.rem(scale[9]),
     fontWeight: fontWeights.light,
     lineHeight: 1.19,
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[13]),
+        fontSize: layout.rem(scale[13]),
         lineHeight: 1.15
       },
       lg: {
-        fontSize: rem(scale[16]),
+        fontSize: layout.rem(scale[16]),
         lineHeight: 1.11,
-        letterSpacing: px(-0.64)
+        letterSpacing: layout.px(-0.64)
       },
       xlg: {
-        fontSize: rem(scale[19]),
+        fontSize: layout.rem(scale[19]),
         lineHeight: 1.07,
-        letterSpacing: px(-0.64)
+        letterSpacing: layout.px(-0.64)
       },
       max: {
-        fontSize: rem(scale[22]),
+        fontSize: layout.rem(scale[22]),
         lineHeight: 1.05,
-        letterSpacing: px(-0.96)
+        letterSpacing: layout.px(-0.96)
       }
     }
   }; // Type changes - V11
@@ -702,16 +630,16 @@
   // No changes for code-01, code-02, label-01, label-02
 
   var legal01$1 = {
-    fontSize: rem(scale[0]),
+    fontSize: layout.rem(scale[0]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.33333,
-    letterSpacing: px(0.32)
+    letterSpacing: layout.px(0.32)
   };
   var legal02$1 = {
-    fontSize: rem(scale[1]),
+    fontSize: layout.rem(scale[1]),
     fontWeight: fontWeights.regular,
     lineHeight: 1.28572,
-    letterSpacing: px(0.16)
+    letterSpacing: layout.px(0.16)
   }; // Body styles
 
   var bodyCompact01$1 = bodyShort01$1;
@@ -803,7 +731,7 @@
   });
 
   var _excluded = ["breakpoints"];
-  var breakpointNames = Object.keys(breakpoints);
+  var breakpointNames = Object.keys(layout.breakpoints);
 
   function next(name) {
     return breakpointNames[breakpointNames.indexOf(name) + 1];
@@ -825,7 +753,7 @@
 
     styles.fontSize = fluidTypeSize(styles, 'sm', fluidBreakpoints);
     fluidBreakpointNames.forEach(function (name) {
-      styles[breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
+      styles[layout.breakpoint(name)] = _objectSpread2(_objectSpread2({}, fluidBreakpoints[name]), {}, {
         fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
       });
     });
@@ -833,7 +761,7 @@
   }
 
   function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-    var breakpoint = breakpoints[fluidBreakpointName];
+    var breakpoint = layout.breakpoints[fluidBreakpointName];
     var fluidBreakpoint = fluidBreakpointName === 'sm' ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
     var maxFontSize = defaultStyles.fontSize;
     var minFontSize = defaultStyles.fontSize;
@@ -857,7 +785,7 @@
     }
 
     if (nextFluidBreakpointName) {
-      var nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
+      var nextFluidBreakpoint = layout.breakpoints[nextFluidBreakpointName];
       maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
       maxViewportWidth = nextFluidBreakpoint.width;
       return "calc(".concat(minFontSize, " + ").concat(subtract(maxFontSize, minFontSize), " * ((100vw - ").concat(minViewportWidth, ") / ").concat(subtract(maxViewportWidth, minViewportWidth), "))");