@carbon/layout 11.51.0 → 11.52.0

package/es/index.js

@@ -1,6 +1,6 @@
-//#region src/tokens.js
+//#region src/tokens.ts
 /**
-* Copyright IBM Corp. 2018, 2023
+* Copyright IBM Corp. 2018, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -44,40 +44,24 @@ const unstable_tokens = [
 	"layout06",
 	"layout07"
 ];
-
 //#endregion
-//#region src/index.js
+//#region src/index.ts
 /**
-* Copyright IBM Corp. 2018, 2023
+* Copyright IBM Corp. 2018, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
 const baseFontSize = 16;
-/**
-* Convert a given px unit to a rem unit
-* @param {number} px
-* @returns {string}
-*/
-function rem(px) {
-	return `${px / baseFontSize}rem`;
-}
-/**
-* Convert a given px unit to a em unit
-* @param {number} px
-* @returns {string}
-*/
-function em(px) {
-	return `${px / baseFontSize}em`;
-}
-/**
-* Convert a given px unit to its string representation
-* @param {number} value - number of pixels
-* @returns {string}
-*/
-function px(value) {
+const rem = (px) => {
+	return `${px / 16}rem`;
+};
+const em = (px) => {
+	return `${px / 16}em`;
+};
+const px = (value) => {
 	return `${value}px`;
-}
+};
 const breakpoints = {
 	sm: {
 		width: rem(320),
@@ -105,19 +89,17 @@ const breakpoints = {
 		margin: rem(24)
 	}
 };
-function breakpointUp(name) {
+const breakpointUp = (name) => {
 	return `@media (min-width: ${breakpoints[name].width})`;
-}
-function breakpointDown(name) {
+};
+const breakpointDown = (name) => {
 	return `@media (max-width: ${breakpoints[name].width})`;
-}
-function breakpoint(...args) {
-	return breakpointUp(...args);
-}
+};
+const breakpoint = breakpointUp;
 const miniUnit = 8;
-function miniUnits(count) {
-	return rem(miniUnit * count);
-}
+const miniUnits = (count) => {
+	return rem(8 * count);
+};
 const spacing01 = miniUnits(.25);
 const spacing02 = miniUnits(.5);
 const spacing03 = miniUnits(1);
@@ -151,9 +133,9 @@ const fluidSpacing02 = "2vw";
 const fluidSpacing03 = "5vw";
 const fluidSpacing04 = "10vw";
 const fluidSpacing = [
-	fluidSpacing01,
-	fluidSpacing02,
-	fluidSpacing03,
+	0,
+	"2vw",
+	"5vw",
 	fluidSpacing04
 ];
 const layout01 = miniUnits(2);
@@ -201,6 +183,5 @@ const sizes = {
 const iconSize01 = "1rem";
 const iconSize02 = "1.25rem";
 const iconSize = [iconSize01, iconSize02];
-
 //#endregion
-export { baseFontSize, breakpoint, breakpointDown, breakpointUp, breakpoints, container, container01, container02, container03, container04, container05, em, fluidSpacing, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize, iconSize01, iconSize02, layout, layout01, layout02, layout03, layout04, layout05, layout06, layout07, miniUnit, miniUnits, px, rem, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, sizes, spacing, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, unstable_tokens };
+export { baseFontSize, breakpoint, breakpointDown, breakpointUp, breakpoints, container, container01, container02, container03, container04, container05, em, fluidSpacing, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize, iconSize01, iconSize02, layout, layout01, layout02, layout03, layout04, layout05, layout06, layout07, miniUnit, miniUnits, px, rem, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, sizes, spacing, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, unstable_tokens };

package/lib/index.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright IBM Corp. 2018, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { unstable_tokens } from './tokens';
+export { unstable_tokens };
+export type BreakpointName = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
+export type Breakpoint = {
+    width: string;
+    columns: number;
+    margin: string;
+};
+export type SizeName = 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | '2XLarge';
+export declare const baseFontSize = 16;
+export declare const rem: (px: number) => string;
+export declare const em: (px: number) => string;
+export declare const px: (value: number) => string;
+export declare const breakpoints: Record<BreakpointName, Breakpoint>;
+export declare const breakpointUp: (name: BreakpointName) => string;
+export declare const breakpointDown: (name: BreakpointName) => string;
+export declare const breakpoint: (name: BreakpointName) => string;
+export declare const miniUnit = 8;
+export declare const miniUnits: (count: number) => string;
+export declare const spacing01: string;
+export declare const spacing02: string;
+export declare const spacing03: string;
+export declare const spacing04: string;
+export declare const spacing05: string;
+export declare const spacing06: string;
+export declare const spacing07: string;
+export declare const spacing08: string;
+export declare const spacing09: string;
+export declare const spacing10: string;
+export declare const spacing11: string;
+export declare const spacing12: string;
+export declare const spacing13: string;
+export declare const spacing: string[];
+export declare const fluidSpacing01 = 0;
+export declare const fluidSpacing02 = "2vw";
+export declare const fluidSpacing03 = "5vw";
+export declare const fluidSpacing04 = "10vw";
+export declare const fluidSpacing: (string | number)[];
+export declare const layout01: string;
+export declare const layout02: string;
+export declare const layout03: string;
+export declare const layout04: string;
+export declare const layout05: string;
+export declare const layout06: string;
+export declare const layout07: string;
+export declare const layout: string[];
+export declare const container01: string;
+export declare const container02: string;
+export declare const container03: string;
+export declare const container04: string;
+export declare const container05: string;
+export declare const container: string[];
+export declare const sizeXSmall: string;
+export declare const sizeSmall: string;
+export declare const sizeMedium: string;
+export declare const sizeLarge: string;
+export declare const sizeXLarge: string;
+export declare const size2XLarge: string;
+export declare const sizes: Record<SizeName, string>;
+export declare const iconSize01 = "1rem";
+export declare const iconSize02 = "1.25rem";
+export declare const iconSize: string[];

package/lib/index.js

@@ -1,8 +1,7 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-//#region src/tokens.js
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/tokens.ts
 /**
-* Copyright IBM Corp. 2018, 2023
+* Copyright IBM Corp. 2018, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -46,40 +45,24 @@ const unstable_tokens = [
 	"layout06",
 	"layout07"
 ];
-
 //#endregion
-//#region src/index.js
+//#region src/index.ts
 /**
-* Copyright IBM Corp. 2018, 2023
+* Copyright IBM Corp. 2018, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
 const baseFontSize = 16;
-/**
-* Convert a given px unit to a rem unit
-* @param {number} px
-* @returns {string}
-*/
-function rem(px) {
-	return `${px / baseFontSize}rem`;
-}
-/**
-* Convert a given px unit to a em unit
-* @param {number} px
-* @returns {string}
-*/
-function em(px) {
-	return `${px / baseFontSize}em`;
-}
-/**
-* Convert a given px unit to its string representation
-* @param {number} value - number of pixels
-* @returns {string}
-*/
-function px(value) {
+const rem = (px) => {
+	return `${px / 16}rem`;
+};
+const em = (px) => {
+	return `${px / 16}em`;
+};
+const px = (value) => {
 	return `${value}px`;
-}
+};
 const breakpoints = {
 	sm: {
 		width: rem(320),
@@ -107,19 +90,17 @@ const breakpoints = {
 		margin: rem(24)
 	}
 };
-function breakpointUp(name) {
+const breakpointUp = (name) => {
 	return `@media (min-width: ${breakpoints[name].width})`;
-}
-function breakpointDown(name) {
+};
+const breakpointDown = (name) => {
 	return `@media (max-width: ${breakpoints[name].width})`;
-}
-function breakpoint(...args) {
-	return breakpointUp(...args);
-}
+};
+const breakpoint = breakpointUp;
 const miniUnit = 8;
-function miniUnits(count) {
-	return rem(miniUnit * count);
-}
+const miniUnits = (count) => {
+	return rem(8 * count);
+};
 const spacing01 = miniUnits(.25);
 const spacing02 = miniUnits(.5);
 const spacing03 = miniUnits(1);
@@ -153,9 +134,9 @@ const fluidSpacing02 = "2vw";
 const fluidSpacing03 = "5vw";
 const fluidSpacing04 = "10vw";
 const fluidSpacing = [
-	fluidSpacing01,
-	fluidSpacing02,
-	fluidSpacing03,
+	0,
+	"2vw",
+	"5vw",
 	fluidSpacing04
 ];
 const layout01 = miniUnits(2);
@@ -203,7 +184,6 @@ const sizes = {
 const iconSize01 = "1rem";
 const iconSize02 = "1.25rem";
 const iconSize = [iconSize01, iconSize02];
-
 //#endregion
 exports.baseFontSize = baseFontSize;
 exports.breakpoint = breakpoint;
@@ -258,4 +238,4 @@ exports.spacing10 = spacing10;
 exports.spacing11 = spacing11;
 exports.spacing12 = spacing12;
 exports.spacing13 = spacing13;
-exports.unstable_tokens = unstable_tokens;
+exports.unstable_tokens = unstable_tokens;

package/lib/tokens.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2018, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const unstable_tokens: readonly ["spacing01", "spacing02", "spacing03", "spacing04", "spacing05", "spacing06", "spacing07", "spacing08", "spacing09", "spacing10", "spacing11", "spacing12", "spacing13", "fluidSpacing01", "fluidSpacing02", "fluidSpacing03", "fluidSpacing04", "container01", "container02", "container03", "container04", "container05", "sizeXSmall", "sizeSmall", "sizeMedium", "sizeLarge", "sizeXLarge", "size2XLarge", "iconSize01", "iconSize02", "layout01", "layout02", "layout03", "layout04", "layout05", "layout06", "layout07"];

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@carbon/layout",
   "description": "Layout helpers for digital and software products using the Carbon Design System",
-  "version": "11.51.0",
+  "version": "11.52.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "module": "es/index.js",
   "sass": "index.scss",
   "repository": {
@@ -26,20 +27,23 @@
     "provenance": true
   },
   "scripts": {
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonLayout && node tasks/build.js",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build": "yarn clean && carbon-cli bundle src/index.ts --name CarbonLayout && node tasks/build.js && yarn build:types",
     "clean": "rimraf es lib umd scss/generated",
     "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.42.0",
+    "@carbon/cli": "^11.43.0",
     "@carbon/cli-reporter": "^10.8.0",
     "@carbon/scss-generator": "^10.20.0",
     "@carbon/test-utils": "^10.41.0",
     "core-js": "^3.16.0",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.3",
+    "typescript-config-carbon": "^0.9.0"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0"
   },
-  "gitHead": "937649543e9cc6af9dfb6b53a2adb76760bca986"
+  "gitHead": "5e89339998bd16c8ddd42e1cc6a2d0c15b3b0af5"
 }

package/src/{index.js → index.ts}

@@ -1,48 +1,47 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { unstable_tokens } from './tokens.js';
+import { unstable_tokens } from './tokens';
 
 export { unstable_tokens };
 
+export type BreakpointName = 'sm' | 'md' | 'lg' | 'xlg' | 'max';
+export type Breakpoint = {
+  width: string;
+  columns: number;
+  margin: string;
+};
+export type SizeName =
+  | 'XSmall'
+  | 'Small'
+  | 'Medium'
+  | 'Large'
+  | 'XLarge'
+  | '2XLarge';
+
 // Convert
 // Default, Use with em() and rem() functions
 export const baseFontSize = 16;
 
-/**
- * Convert a given px unit to a rem unit
- * @param {number} px
- * @returns {string}
- */
-export function rem(px) {
+export const rem = (px: number) => {
   return `${px / baseFontSize}rem`;
-}
+};
 
-/**
- * Convert a given px unit to a em unit
- * @param {number} px
- * @returns {string}
- */
-export function em(px) {
+export const em = (px: number) => {
   return `${px / baseFontSize}em`;
-}
+};
 
-/**
- * Convert a given px unit to its string representation
- * @param {number} value - number of pixels
- * @returns {string}
- */
-export function px(value) {
+export const px = (value: number) => {
   return `${value}px`;
-}
+};
 
 // Breakpoint
 // Initial map of our breakpoints and their values
-export const breakpoints = {
+export const breakpoints: Record<BreakpointName, Breakpoint> = {
   sm: {
     width: rem(320),
     columns: 4,
@@ -70,24 +69,22 @@ export const breakpoints = {
   },
 };
 
-export function breakpointUp(name) {
+export const breakpointUp = (name: BreakpointName) => {
   return `@media (min-width: ${breakpoints[name].width})`;
-}
+};
 
-export function breakpointDown(name) {
+export const breakpointDown = (name: BreakpointName) => {
   return `@media (max-width: ${breakpoints[name].width})`;
-}
+};
 
-export function breakpoint(...args) {
-  return breakpointUp(...args);
-}
+export const breakpoint = breakpointUp;
 
 // Mini-unit
 export const miniUnit = 8;
 
-export function miniUnits(count) {
+export const miniUnits = (count: number) => {
   return rem(miniUnit * count);
-}
+};
 
 // Spacing
 export const spacing01 = miniUnits(0.25);
@@ -169,7 +166,7 @@ export const sizeMedium = rem(40);
 export const sizeLarge = rem(48);
 export const sizeXLarge = rem(64);
 export const size2XLarge = rem(80);
-export const sizes = {
+export const sizes: Record<SizeName, string> = {
   XSmall: sizeXSmall,
   Small: sizeSmall,
   Medium: sizeMedium,

package/src/{tokens.js → tokens.ts}

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2023
+ * Copyright IBM Corp. 2018, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,4 +53,4 @@ export const unstable_tokens = [
   'layout05',
   'layout06',
   'layout07',
-];
+] as const;

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "typescript-config-carbon/tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": false,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src/**/*"]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "./lib"
+  },
+  "include": ["src/**/*"]
+}

package/umd/index.js

@@ -1,13 +1,10 @@
 (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.CarbonLayout = {})));
+	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.CarbonLayout = {}));
 })(this, function(exports) {
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-//#region src/tokens.js
-/**
-	* Copyright IBM Corp. 2018, 2023
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/tokens.ts
+	/**
+	* Copyright IBM Corp. 2018, 2026
 	*
 	* This source code is licensed under the Apache-2.0 license found in the
 	* LICENSE file in the root directory of this source tree.
@@ -51,40 +48,24 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		"layout06",
 		"layout07"
 	];
-
-//#endregion
-//#region src/index.js
-/**
-	* Copyright IBM Corp. 2018, 2023
+	//#endregion
+	//#region src/index.ts
+	/**
+	* Copyright IBM Corp. 2018, 2026
 	*
 	* This source code is licensed under the Apache-2.0 license found in the
 	* LICENSE file in the root directory of this source tree.
 	*/
 	const baseFontSize = 16;
-	/**
-	* Convert a given px unit to a rem unit
-	* @param {number} px
-	* @returns {string}
-	*/
-	function rem(px) {
-		return `${px / baseFontSize}rem`;
-	}
-	/**
-	* Convert a given px unit to a em unit
-	* @param {number} px
-	* @returns {string}
-	*/
-	function em(px) {
-		return `${px / baseFontSize}em`;
-	}
-	/**
-	* Convert a given px unit to its string representation
-	* @param {number} value - number of pixels
-	* @returns {string}
-	*/
-	function px(value) {
+	const rem = (px) => {
+		return `${px / 16}rem`;
+	};
+	const em = (px) => {
+		return `${px / 16}em`;
+	};
+	const px = (value) => {
 		return `${value}px`;
-	}
+	};
 	const breakpoints = {
 		sm: {
 			width: rem(320),
@@ -112,19 +93,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			margin: rem(24)
 		}
 	};
-	function breakpointUp(name) {
+	const breakpointUp = (name) => {
 		return `@media (min-width: ${breakpoints[name].width})`;
-	}
-	function breakpointDown(name) {
+	};
+	const breakpointDown = (name) => {
 		return `@media (max-width: ${breakpoints[name].width})`;
-	}
-	function breakpoint(...args) {
-		return breakpointUp(...args);
-	}
+	};
+	const breakpoint = breakpointUp;
 	const miniUnit = 8;
-	function miniUnits(count) {
-		return rem(miniUnit * count);
-	}
+	const miniUnits = (count) => {
+		return rem(8 * count);
+	};
 	const spacing01 = miniUnits(.25);
 	const spacing02 = miniUnits(.5);
 	const spacing03 = miniUnits(1);
@@ -158,9 +137,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const fluidSpacing03 = "5vw";
 	const fluidSpacing04 = "10vw";
 	const fluidSpacing = [
-		fluidSpacing01,
-		fluidSpacing02,
-		fluidSpacing03,
+		0,
+		"2vw",
+		"5vw",
 		fluidSpacing04
 	];
 	const layout01 = miniUnits(2);
@@ -208,60 +187,59 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	const iconSize01 = "1rem";
 	const iconSize02 = "1.25rem";
 	const iconSize = [iconSize01, iconSize02];
-
-//#endregion
-exports.baseFontSize = baseFontSize;
-exports.breakpoint = breakpoint;
-exports.breakpointDown = breakpointDown;
-exports.breakpointUp = breakpointUp;
-exports.breakpoints = breakpoints;
-exports.container = container;
-exports.container01 = container01;
-exports.container02 = container02;
-exports.container03 = container03;
-exports.container04 = container04;
-exports.container05 = container05;
-exports.em = em;
-exports.fluidSpacing = fluidSpacing;
-exports.fluidSpacing01 = fluidSpacing01;
-exports.fluidSpacing02 = fluidSpacing02;
-exports.fluidSpacing03 = fluidSpacing03;
-exports.fluidSpacing04 = fluidSpacing04;
-exports.iconSize = iconSize;
-exports.iconSize01 = iconSize01;
-exports.iconSize02 = iconSize02;
-exports.layout = layout;
-exports.layout01 = layout01;
-exports.layout02 = layout02;
-exports.layout03 = layout03;
-exports.layout04 = layout04;
-exports.layout05 = layout05;
-exports.layout06 = layout06;
-exports.layout07 = layout07;
-exports.miniUnit = miniUnit;
-exports.miniUnits = miniUnits;
-exports.px = px;
-exports.rem = rem;
-exports.size2XLarge = size2XLarge;
-exports.sizeLarge = sizeLarge;
-exports.sizeMedium = sizeMedium;
-exports.sizeSmall = sizeSmall;
-exports.sizeXLarge = sizeXLarge;
-exports.sizeXSmall = sizeXSmall;
-exports.sizes = sizes;
-exports.spacing = spacing;
-exports.spacing01 = spacing01;
-exports.spacing02 = spacing02;
-exports.spacing03 = spacing03;
-exports.spacing04 = spacing04;
-exports.spacing05 = spacing05;
-exports.spacing06 = spacing06;
-exports.spacing07 = spacing07;
-exports.spacing08 = spacing08;
-exports.spacing09 = spacing09;
-exports.spacing10 = spacing10;
-exports.spacing11 = spacing11;
-exports.spacing12 = spacing12;
-exports.spacing13 = spacing13;
-exports.unstable_tokens = unstable_tokens;
-});
+	//#endregion
+	exports.baseFontSize = baseFontSize;
+	exports.breakpoint = breakpoint;
+	exports.breakpointDown = breakpointDown;
+	exports.breakpointUp = breakpointUp;
+	exports.breakpoints = breakpoints;
+	exports.container = container;
+	exports.container01 = container01;
+	exports.container02 = container02;
+	exports.container03 = container03;
+	exports.container04 = container04;
+	exports.container05 = container05;
+	exports.em = em;
+	exports.fluidSpacing = fluidSpacing;
+	exports.fluidSpacing01 = fluidSpacing01;
+	exports.fluidSpacing02 = fluidSpacing02;
+	exports.fluidSpacing03 = fluidSpacing03;
+	exports.fluidSpacing04 = fluidSpacing04;
+	exports.iconSize = iconSize;
+	exports.iconSize01 = iconSize01;
+	exports.iconSize02 = iconSize02;
+	exports.layout = layout;
+	exports.layout01 = layout01;
+	exports.layout02 = layout02;
+	exports.layout03 = layout03;
+	exports.layout04 = layout04;
+	exports.layout05 = layout05;
+	exports.layout06 = layout06;
+	exports.layout07 = layout07;
+	exports.miniUnit = miniUnit;
+	exports.miniUnits = miniUnits;
+	exports.px = px;
+	exports.rem = rem;
+	exports.size2XLarge = size2XLarge;
+	exports.sizeLarge = sizeLarge;
+	exports.sizeMedium = sizeMedium;
+	exports.sizeSmall = sizeSmall;
+	exports.sizeXLarge = sizeXLarge;
+	exports.sizeXSmall = sizeXSmall;
+	exports.sizes = sizes;
+	exports.spacing = spacing;
+	exports.spacing01 = spacing01;
+	exports.spacing02 = spacing02;
+	exports.spacing03 = spacing03;
+	exports.spacing04 = spacing04;
+	exports.spacing05 = spacing05;
+	exports.spacing06 = spacing06;
+	exports.spacing07 = spacing07;
+	exports.spacing08 = spacing08;
+	exports.spacing09 = spacing09;
+	exports.spacing10 = spacing10;
+	exports.spacing11 = spacing11;
+	exports.spacing12 = spacing12;
+	exports.spacing13 = spacing13;
+	exports.unstable_tokens = unstable_tokens;
+});