@spaced-out/ui-design-system 0.1.19 → 0.1.21

package/lib/styles/index.js

@@ -3,102 +3,435 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _border = require("./variables/_border.js");
-Object.keys(_border).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _border[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _border[key];
-    }
-  });
-});
-var _color = require("./variables/_color.js");
-Object.keys(_color).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _color[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _color[key];
-    }
-  });
-});
-var _elevation = require("./variables/_elevation.js");
-Object.keys(_elevation).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _elevation[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _elevation[key];
-    }
-  });
-});
-var _font = require("./variables/_font.js");
-Object.keys(_font).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _font[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _font[key];
-    }
-  });
-});
-var _motion = require("./variables/_motion.js");
-Object.keys(_motion).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _motion[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _motion[key];
-    }
-  });
-});
-var _opacity = require("./variables/_opacity.js");
-Object.keys(_opacity).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _opacity[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _opacity[key];
-    }
-  });
-});
-var _shadow = require("./variables/_shadow.js");
-Object.keys(_shadow).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _shadow[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _shadow[key];
-    }
-  });
-});
-var _size = require("./variables/_size.js");
-Object.keys(_size).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _size[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _size[key];
-    }
-  });
-});
-var _space = require("./variables/_space.js");
-Object.keys(_space).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _space[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _space[key];
-    }
-  });
-});
+exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize26 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight120 = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = void 0;
+
+const borderWidthNone = '0px';
+exports.borderWidthNone = borderWidthNone;
+const borderWidthPrimary = '1px';
+exports.borderWidthPrimary = borderWidthPrimary;
+const borderWidthSecondary = '1.5px';
+exports.borderWidthSecondary = borderWidthSecondary;
+const borderWidthTertiary = '2px';
+exports.borderWidthTertiary = borderWidthTertiary;
+const borderRadiusNone = '0px';
+exports.borderRadiusNone = borderRadiusNone;
+const borderRadiusXSmall = '4px';
+exports.borderRadiusXSmall = borderRadiusXSmall;
+const borderRadiusRadioButton = '6px';
+exports.borderRadiusRadioButton = borderRadiusRadioButton;
+const borderRadiusSmall = '8px';
+exports.borderRadiusSmall = borderRadiusSmall;
+const borderRadiusMedium = '12px';
+exports.borderRadiusMedium = borderRadiusMedium;
+const borderRadiusLarge = '20px';
+exports.borderRadiusLarge = borderRadiusLarge;
+const borderRadiusXLarge = '30px';
+exports.borderRadiusXLarge = borderRadiusXLarge;
+const borderRadiusCircle = '50%';
+exports.borderRadiusCircle = borderRadiusCircle;
+const colorTextPrimary = '#17172A';
+exports.colorTextPrimary = colorTextPrimary;
+const colorTextSecondary = '#565656';
+exports.colorTextSecondary = colorTextSecondary;
+const colorTextTertiary = '#7e7e7e';
+exports.colorTextTertiary = colorTextTertiary;
+const colorTextDisabled = '#d1d1d1';
+exports.colorTextDisabled = colorTextDisabled;
+const colorTextClickable = '#5c34cd';
+exports.colorTextClickable = colorTextClickable;
+const colorTextNeutral = '#706F9B';
+exports.colorTextNeutral = colorTextNeutral;
+const colorTextSuccess = '#026b37';
+exports.colorTextSuccess = colorTextSuccess;
+const colorTextInformation = '#0660da';
+exports.colorTextInformation = colorTextInformation;
+const colorTextWarning = '#9e5909';
+exports.colorTextWarning = colorTextWarning;
+const colorTextDanger = '#cf1945';
+exports.colorTextDanger = colorTextDanger;
+const colorTextInversePrimary = '#ffffff';
+exports.colorTextInversePrimary = colorTextInversePrimary;
+const colorTextInverseSecondary = '#d1d1d1';
+exports.colorTextInverseSecondary = colorTextInverseSecondary;
+const colorBorderPrimary = '#e1e1e1';
+exports.colorBorderPrimary = colorBorderPrimary;
+const colorBorderSecondary = '#d1d1d1';
+exports.colorBorderSecondary = colorBorderSecondary;
+const colorBorderDanger = '#e31c4c';
+exports.colorBorderDanger = colorBorderDanger;
+const colorBackgroundBrand = '#271656';
+exports.colorBackgroundBrand = colorBackgroundBrand;
+const colorBackgroundPrimary = '#fafafa';
+exports.colorBackgroundPrimary = colorBackgroundPrimary;
+const colorBackgroundSecondary = '#f4f4f4';
+exports.colorBackgroundSecondary = colorBackgroundSecondary;
+const colorBackgroundTertiary = '#ffffff';
+exports.colorBackgroundTertiary = colorBackgroundTertiary;
+const colorFocusPrimary = '#ccc0f0';
+exports.colorFocusPrimary = colorFocusPrimary;
+const colorFocusDanger = '#f6b9c8';
+exports.colorFocusDanger = colorFocusDanger;
+const colorFillPrimary = '#5c34cd';
+exports.colorFillPrimary = colorFillPrimary;
+const colorFillSecondary = '#efebfa';
+exports.colorFillSecondary = colorFillSecondary;
+const colorFillNone = 'rgba(255,255,255,0)';
+exports.colorFillNone = colorFillNone;
+const colorFillDisabled = '#f4f4f4';
+exports.colorFillDisabled = colorFillDisabled;
+const colorFillInversePrimary = '#17172A';
+exports.colorFillInversePrimary = colorFillInversePrimary;
+const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
+exports.colorTooltipFill = colorTooltipFill;
+const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
+exports.colorBackdropFill = colorBackdropFill;
+const colorButtonFillPrimaryEnabled = '#5c34cd';
+exports.colorButtonFillPrimaryEnabled = colorButtonFillPrimaryEnabled;
+const colorButtonFillPrimaryHovered = '#412592';
+exports.colorButtonFillPrimaryHovered = colorButtonFillPrimaryHovered;
+const colorButtonFillPrimaryPressed = '#412592';
+exports.colorButtonFillPrimaryPressed = colorButtonFillPrimaryPressed;
+const colorButtonFillSecondaryEnabled = '#efebfa';
+exports.colorButtonFillSecondaryEnabled = colorButtonFillSecondaryEnabled;
+const colorButtonFillSecondaryHovered = '#ccc0f0';
+exports.colorButtonFillSecondaryHovered = colorButtonFillSecondaryHovered;
+const colorButtonFillSecondaryPressed = '#ccc0f0';
+exports.colorButtonFillSecondaryPressed = colorButtonFillSecondaryPressed;
+const colorButtonFillTertiaryEnabled = 'rgba(255,255,255,0)';
+exports.colorButtonFillTertiaryEnabled = colorButtonFillTertiaryEnabled;
+const colorButtonFillTertiaryHovered = '#EBEBEB';
+exports.colorButtonFillTertiaryHovered = colorButtonFillTertiaryHovered;
+const colorButtonFillTertiaryPressed = '#EBEBEB';
+exports.colorButtonFillTertiaryPressed = colorButtonFillTertiaryPressed;
+const colorButtonFillGhostEnabled = 'rgba(255,255,255,0)';
+exports.colorButtonFillGhostEnabled = colorButtonFillGhostEnabled;
+const colorButtonFillGhostHovered = '#EBEBEB';
+exports.colorButtonFillGhostHovered = colorButtonFillGhostHovered;
+const colorButtonFillGhostPressed = '#EBEBEB';
+exports.colorButtonFillGhostPressed = colorButtonFillGhostPressed;
+const colorButtonFillDangerEnabled = '#e31c4c';
+exports.colorButtonFillDangerEnabled = colorButtonFillDangerEnabled;
+const colorButtonFillDangerHovered = '#cf1945';
+exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
+const colorButtonFillDangerPressed = '#cf1945';
+exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
+const colorSideMenuIconDefault = '#9F9FBC';
+exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
+const colorSideMenuIconActive = '#ffffff';
+exports.colorSideMenuIconActive = colorSideMenuIconActive;
+const colorSubMenuBackgroundDefault = '#1F1F36';
+exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
+const colorGrayLightest = '#EBEBEB';
+exports.colorGrayLightest = colorGrayLightest;
+const colorNeutral = '#706F9B';
+exports.colorNeutral = colorNeutral;
+const colorNeutralLightest = '#f1f1f5';
+exports.colorNeutralLightest = colorNeutralLightest;
+const colorNeutralLight = '#D3D2E0';
+exports.colorNeutralLight = colorNeutralLight;
+const colorNeutralDark = '#504F6E';
+exports.colorNeutralDark = colorNeutralDark;
+const colorNeutralDarkest = '#2C2C47';
+exports.colorNeutralDarkest = colorNeutralDarkest;
+const colorSuccess = '#03964d';
+exports.colorSuccess = colorSuccess;
+const colorSuccessLightest = '#e6f5ed';
+exports.colorSuccessLightest = colorSuccessLightest;
+const colorSuccessLight = '#8bcfad';
+exports.colorSuccessLight = colorSuccessLight;
+const colorSuccessDark = '#026b37';
+exports.colorSuccessDark = colorSuccessDark;
+const colorSuccessDarkest = '#013f20';
+exports.colorSuccessDarkest = colorSuccessDarkest;
+const colorInformation = '#0769f0';
+exports.colorInformation = colorInformation;
+const colorInformationLightest = '#e6f0fe';
+exports.colorInformationLightest = colorInformationLightest;
+const colorInformationLight = '#8dbaf8';
+exports.colorInformationLight = colorInformationLight;
+const colorInformationDark = '#054baa';
+exports.colorInformationDark = colorInformationDark;
+const colorInformationDarkest = '#032c65';
+exports.colorInformationDarkest = colorInformationDarkest;
+const colorWarning = '#df7e0c';
+exports.colorWarning = colorWarning;
+const colorWarningLightest = '#fcf2e7';
+exports.colorWarningLightest = colorWarningLightest;
+const colorWarningLight = '#f0c48f';
+exports.colorWarningLight = colorWarningLight;
+const colorWarningDark = '#9e5909';
+exports.colorWarningDark = colorWarningDark;
+const colorWarningDarkest = '#5e3505';
+exports.colorWarningDarkest = colorWarningDarkest;
+const colorDanger = '#e31c4c';
+exports.colorDanger = colorDanger;
+const colorDangerLightest = '#fce8ed';
+exports.colorDangerLightest = colorDangerLightest;
+const colorDangerLight = '#f297ad';
+exports.colorDangerLight = colorDangerLight;
+const colorDangerDark = '#a11436';
+exports.colorDangerDark = colorDangerDark;
+const colorDangerDarkest = '#5f0c20';
+exports.colorDangerDarkest = colorDangerDarkest;
+const elevationNone = '0';
+exports.elevationNone = elevationNone;
+const elevationCard = '4';
+exports.elevationCard = elevationCard;
+const elevationTooltip = '4';
+exports.elevationTooltip = elevationTooltip;
+const elevationMenu = '12';
+exports.elevationMenu = elevationMenu;
+const elevationBackdrop = '40';
+exports.elevationBackdrop = elevationBackdrop;
+const elevationModal = '40';
+exports.elevationModal = elevationModal;
+const elevationToast = '60';
+exports.elevationToast = elevationToast;
+const fontFamilyCentra = '"Centra No2"';
+exports.fontFamilyCentra = fontFamilyCentra;
+const fontWeightBook = '400';
+exports.fontWeightBook = fontWeightBook;
+const fontWeightMedium = '500';
+exports.fontWeightMedium = fontWeightMedium;
+const fontSize12 = '12px';
+exports.fontSize12 = fontSize12;
+const fontSize13 = '13px';
+exports.fontSize13 = fontSize13;
+const fontSize14 = '14px';
+exports.fontSize14 = fontSize14;
+const fontSize16 = '16px';
+exports.fontSize16 = fontSize16;
+const fontSize18 = '18px';
+exports.fontSize18 = fontSize18;
+const fontSize26 = '26px';
+exports.fontSize26 = fontSize26;
+const fontSize46 = '46px';
+exports.fontSize46 = fontSize46;
+const fontLetterSpacing0 = '0em';
+exports.fontLetterSpacing0 = fontLetterSpacing0;
+const fontLetterSpacing1 = '0.01em';
+exports.fontLetterSpacing1 = fontLetterSpacing1;
+const fontLetterSpacing2 = '0.02em';
+exports.fontLetterSpacing2 = fontLetterSpacing2;
+const fontLetterSpacing4 = '0.04em';
+exports.fontLetterSpacing4 = fontLetterSpacing4;
+const fontLetterSpacingMinus1 = '-0.01em';
+exports.fontLetterSpacingMinus1 = fontLetterSpacingMinus1;
+const fontLetterSpacingMinus2 = '-0.02em';
+exports.fontLetterSpacingMinus2 = fontLetterSpacingMinus2;
+const fontLetterSpacingMinus4 = '-0.04em';
+exports.fontLetterSpacingMinus4 = fontLetterSpacingMinus4;
+const fontLineHeight100 = '100%';
+exports.fontLineHeight100 = fontLineHeight100;
+const fontLineHeight120 = '120%';
+exports.fontLineHeight120 = fontLineHeight120;
+const fontLineHeight130 = '130%';
+exports.fontLineHeight130 = fontLineHeight130;
+const fontLineHeight140 = '140%';
+exports.fontLineHeight140 = fontLineHeight140;
+const fontLineHeight150 = '150%';
+exports.fontLineHeight150 = fontLineHeight150;
+const fontLineHeight170 = '170%';
+exports.fontLineHeight170 = fontLineHeight170;
+const fontParagraphSpacing0 = '0';
+exports.fontParagraphSpacing0 = fontParagraphSpacing0;
+const fontTextCaseNone = 'none';
+exports.fontTextCaseNone = fontTextCaseNone;
+const fontTextDecorationNone = 'none';
+exports.fontTextDecorationNone = fontTextDecorationNone;
+const motionDurationFast = '100ms';
+exports.motionDurationFast = motionDurationFast;
+const motionDurationNormal = '200ms';
+exports.motionDurationNormal = motionDurationNormal;
+const motionDurationSlow = '300ms';
+exports.motionDurationSlow = motionDurationSlow;
+const motionDurationSlower = '500ms';
+exports.motionDurationSlower = motionDurationSlower;
+const motionDurationSlowest = '1000ms';
+exports.motionDurationSlowest = motionDurationSlowest;
+const motionEaseInEaseOut = 'ease-in-out';
+exports.motionEaseInEaseOut = motionEaseInEaseOut;
+const opacity100 = '100%';
+exports.opacity100 = opacity100;
+const opacity95 = '95%';
+exports.opacity95 = opacity95;
+const opacity90 = '90%';
+exports.opacity90 = opacity90;
+const opacity85 = '85%';
+exports.opacity85 = opacity85;
+const opacity80 = '80%';
+exports.opacity80 = opacity80;
+const opacity70 = '70%';
+exports.opacity70 = opacity70;
+const opacity60 = '60%';
+exports.opacity60 = opacity60;
+const opacity50 = '50%';
+exports.opacity50 = opacity50;
+const opacity40 = '40%';
+exports.opacity40 = opacity40;
+const opacity30 = '30%';
+exports.opacity30 = opacity30;
+const opacity20 = '20%';
+exports.opacity20 = opacity20;
+const opacity15 = '15%';
+exports.opacity15 = opacity15;
+const opacity10 = '10%';
+exports.opacity10 = opacity10;
+const opacity5 = '5%';
+exports.opacity5 = opacity5;
+const opacity0 = '0%';
+exports.opacity0 = opacity0;
+const shadowBoxShadow1Color = '#12121214';
+exports.shadowBoxShadow1Color = shadowBoxShadow1Color;
+const shadowBoxShadow1Type = 'dropShadow';
+exports.shadowBoxShadow1Type = shadowBoxShadow1Type;
+const shadowBoxShadow1X = '0px';
+exports.shadowBoxShadow1X = shadowBoxShadow1X;
+const shadowBoxShadow1Y = '4px';
+exports.shadowBoxShadow1Y = shadowBoxShadow1Y;
+const shadowBoxShadow1Blur = '4px';
+exports.shadowBoxShadow1Blur = shadowBoxShadow1Blur;
+const shadowBoxShadow1Spread = '0px';
+exports.shadowBoxShadow1Spread = shadowBoxShadow1Spread;
+const shadowBoxShadow2Color = '#12121214';
+exports.shadowBoxShadow2Color = shadowBoxShadow2Color;
+const shadowBoxShadow2Type = 'dropShadow';
+exports.shadowBoxShadow2Type = shadowBoxShadow2Type;
+const shadowBoxShadow2X = '0px';
+exports.shadowBoxShadow2X = shadowBoxShadow2X;
+const shadowBoxShadow2Y = '8px';
+exports.shadowBoxShadow2Y = shadowBoxShadow2Y;
+const shadowBoxShadow2Blur = '8px';
+exports.shadowBoxShadow2Blur = shadowBoxShadow2Blur;
+const shadowBoxShadow2Spread = '0px';
+exports.shadowBoxShadow2Spread = shadowBoxShadow2Spread;
+const shadowBoxShadow3Color = '#1212121f';
+exports.shadowBoxShadow3Color = shadowBoxShadow3Color;
+const shadowBoxShadow3Type = 'dropShadow';
+exports.shadowBoxShadow3Type = shadowBoxShadow3Type;
+const shadowBoxShadow3X = '0px';
+exports.shadowBoxShadow3X = shadowBoxShadow3X;
+const shadowBoxShadow3Y = '12px';
+exports.shadowBoxShadow3Y = shadowBoxShadow3Y;
+const shadowBoxShadow3Blur = '12px';
+exports.shadowBoxShadow3Blur = shadowBoxShadow3Blur;
+const shadowBoxShadow3Spread = '0px';
+exports.shadowBoxShadow3Spread = shadowBoxShadow3Spread;
+const shadowBoxShadow4Color = '#12121233';
+exports.shadowBoxShadow4Color = shadowBoxShadow4Color;
+const shadowBoxShadow4Type = 'dropShadow';
+exports.shadowBoxShadow4Type = shadowBoxShadow4Type;
+const shadowBoxShadow4X = '0px';
+exports.shadowBoxShadow4X = shadowBoxShadow4X;
+const shadowBoxShadow4Y = '20px';
+exports.shadowBoxShadow4Y = shadowBoxShadow4Y;
+const shadowBoxShadow4Blur = '20px';
+exports.shadowBoxShadow4Blur = shadowBoxShadow4Blur;
+const shadowBoxShadow4Spread = '0px';
+exports.shadowBoxShadow4Spread = shadowBoxShadow4Spread;
+const size2 = '2px';
+exports.size2 = size2;
+const size4 = '4px';
+exports.size4 = size4;
+const size5 = '5px';
+exports.size5 = size5;
+const size8 = '8px';
+exports.size8 = size8;
+const size10 = '10px';
+exports.size10 = size10;
+const size12 = '12px';
+exports.size12 = size12;
+const size18 = '18px';
+exports.size18 = size18;
+const size20 = '20px';
+exports.size20 = size20;
+const size22 = '22px';
+exports.size22 = size22;
+const size24 = '24px';
+exports.size24 = size24;
+const size26 = '26px';
+exports.size26 = size26;
+const size30 = '30px';
+exports.size30 = size30;
+const size34 = '34px';
+exports.size34 = size34;
+const size36 = '36px';
+exports.size36 = size36;
+const size38 = '38px';
+exports.size38 = size38;
+const size40 = '40px';
+exports.size40 = size40;
+const size42 = '42px';
+exports.size42 = size42;
+const size48 = '48px';
+exports.size48 = size48;
+const size58 = '58px';
+exports.size58 = size58;
+const size60 = '60px';
+exports.size60 = size60;
+const size90 = '90px';
+exports.size90 = size90;
+const size100 = '100px';
+exports.size100 = size100;
+const size110 = '110px';
+exports.size110 = size110;
+const size140 = '140px';
+exports.size140 = size140;
+const size160 = '160px';
+exports.size160 = size160;
+const size228 = '228px';
+exports.size228 = size228;
+const size240 = '240px';
+exports.size240 = size240;
+const size260 = '260px';
+exports.size260 = size260;
+const size276 = '276px';
+exports.size276 = size276;
+const size300 = '300px';
+exports.size300 = size300;
+const size380 = '380px';
+exports.size380 = size380;
+const size400 = '400px';
+exports.size400 = size400;
+const size480 = '480px';
+exports.size480 = size480;
+const size500 = '500px';
+exports.size500 = size500;
+const size580 = '580px';
+exports.size580 = size580;
+const size720 = '720px';
+exports.size720 = size720;
+const size960 = '960px';
+exports.size960 = size960;
+const sizeFluid = '100%';
+exports.sizeFluid = sizeFluid;
+const sizeFullViewportHeight = '100vh';
+exports.sizeFullViewportHeight = sizeFullViewportHeight;
+const sizeFullViewportWidth = '100vw';
+exports.sizeFullViewportWidth = sizeFullViewportWidth;
+const spaceNone = '0px';
+exports.spaceNone = spaceNone;
+const spaceXXSmall = '4px';
+exports.spaceXXSmall = spaceXXSmall;
+const spaceXSmall = '8px';
+exports.spaceXSmall = spaceXSmall;
+const spaceSmall = '12px';
+exports.spaceSmall = spaceSmall;
+const spaceMedium = '20px';
+exports.spaceMedium = spaceMedium;
+const spaceLarge = '32px';
+exports.spaceLarge = spaceLarge;
+const spaceXLarge = '52px';
+exports.spaceXLarge = spaceXLarge;
+const spaceXXLarge = '84px';
+exports.spaceXXLarge = spaceXXLarge;
+const spaceFluid = '100%';
+exports.spaceFluid = spaceFluid;
+const spaceNegFluid = '-100%';
+exports.spaceNegFluid = spaceNegFluid;
+const spaceHalfFluid = '50%';
+exports.spaceHalfFluid = spaceHalfFluid;
+const spaceNegHalfFluid = '-50%';
+exports.spaceNegHalfFluid = spaceNegHalfFluid;