@companycam/slab-web 0.0.23-beta.8 → 0.0.23

package/dist/bundle.js

@@ -0,0 +1,1436 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var styled = require('styled-components');
+var MdiIcon = require('@mdi/react');
+require('deepmerge');
+require('hoist-non-react-statics');
+var js = require('@mdi/js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var MdiIcon__default = /*#__PURE__*/_interopDefaultLegacy(MdiIcon);
+
+var color_brand_primary = "#0967d2";
+var color_brand_secondary = "#142334";
+var color_brand_accent = "#ffd000";
+var color_brand_upgrade = "#0ce8d6";
+var color_brand_add_on_le = "#7949d1";
+var color_brand_add_on_de = "#bca4e8";
+var color_utility_destroy_le = "#ef4e4e";
+var color_utility_destroy_de = "#f48585";
+var color_utility_caution = "#ffd000";
+var color_utility_success_le = "#12a537";
+var color_utility_success_de = "#3ebd93";
+var color_utility_info = "#42608a";
+var color_utility_assigned = "#e76119";
+var color_background_1_le = "#ffffff";
+var color_background_1_de = "#142334";
+var color_background_2_le = "#f5f7fa";
+var color_background_2_de = "#192d43";
+var color_background_3_le = "#ebeff5";
+var color_background_3_de = "#1f3751";
+var color_background_backdrop = "rgba(31, 55, 81, 0.75)";
+var color_text_default_le = "#142334";
+var color_text_default_de = "#ffffff";
+var color_text_subtle_le = "#4d5a68";
+var color_text_subtle_de = "#c3c8cc";
+var color_text_nonessential_le = "#8191a2";
+var color_text_nonessential_de = "#a0a7af";
+var color_button_background_primary_le = "#0967d2";
+var color_button_background_primary_de = "#6fabf1";
+var color_button_background_secondary_le = "#1f3751";
+var color_button_background_secondary_de = "#ffffff";
+var color_button_background_subtle_le = "#ebeff5";
+var color_button_background_subtle_de = "#2a415a";
+var color_button_background_destroy_le = "#ef4e4e";
+var color_button_background_destroy_de = "#f48585";
+var color_button_background_success_le = "#12a537";
+var color_button_background_success_de = "#3ebd93";
+var color_button_background_tint_le = "#e5f1ff";
+var color_button_background_tint_de = "rgba(255, 255, 255, 0.1)";
+var color_button_text_primary_le = "#ffffff";
+var color_button_text_primary_de = "#142334";
+var color_button_text_secondary_le = "#ffffff";
+var color_button_text_secondary_de = "#142334";
+var color_button_text_subtle_le = "#4d5a68";
+var color_button_text_subtle_de = "#c3c8cc";
+var color_button_text_destroy_le = "#ffffff";
+var color_button_text_destroy_de = "#142334";
+var color_button_text_success_le = "#ffffff";
+var color_button_text_success_de = "#142334";
+var color_link_primary_le = "#0967d2";
+var color_link_primary_de = "#6fabf1";
+var color_link_secondary_le = "#142334";
+var color_link_secondary_de = "#ffffff";
+var color_link_subtle_le = "#4d5a68";
+var color_link_subtle_de = "#c3c8cc";
+var color_border_default_le = "rgba(20, 35, 52, 0.12)";
+var color_border_default_de = "rgba(255, 255, 255, 0.15)";
+var color_border_input_inactive_le = "rgba(20, 35, 52, 0.2)";
+var color_border_input_inactive_de = "rgba(255, 255, 255, 0.22)";
+var color_border_input_active_le = "#0967d2";
+var color_border_input_active_de = "#6fabf1";
+var color_depth_1_le = "rgba(20, 35, 52, 0.13)";
+var color_depth_1_de = "rgba(6, 10, 16, 0.5)";
+var color_depth_2_le = "rgba(20, 35, 52, 0.13)";
+var color_depth_2_de = "rgba(6, 10, 16, 0.6)";
+var color_depth_3_le = "rgba(20, 35, 52, 0.2)";
+var color_depth_3_de = "rgba(6, 10, 16, 0.7)";
+var color_label_green = "#31a03c";
+var color_label_blue = "#4191ed";
+var color_label_purple = "#a227c5";
+var color_label_navy = "#354b62";
+var color_label_yellow = "#ffd000";
+var color_label_orange = "#e76119";
+var color_label_red = "#c73732";
+var color_label_light_gray = "#828c95";
+var color_label_dark_gray = "#4d5a68";
+var color_collab_purple = "#a227c5";
+var color_collab_orange = "#e76119";
+var color_collab_green = "#31a03c";
+var color_collab_blue = "#4191ed";
+var color_collab_red = "#c73732";
+var color_collab_yellow = "#d28e09";
+var color_collab_navy = "#354b62";
+var color_collab_plum = "#413ecf";
+var color_collab_magenta = "#d63baa";
+var color_collab_brown = "#745138";
+var color_collab_owner = "#ffd000";
+var size_spacing_xxs = 2;
+var size_spacing_xs = 4;
+var size_spacing_s = 8;
+var size_spacing_m = 16;
+var size_spacing_l = 24;
+var size_spacing_xl = 32;
+var size_spacing_xxl = 48;
+var size_border_width_s = 1;
+var size_border_width_m = 2;
+var size_border_width_l = 4;
+var size_border_width_xl = 8;
+var size_border_radius_s = 2;
+var size_border_radius_m = 4;
+var size_border_radius_l = 8;
+var size_border_radius_xl = 16;
+var size_border_radius_xxl = 24;
+var size_border_radius_pill = 1000;
+var size_text_xxs = 10;
+var size_text_xs = 12;
+var size_text_s = 14;
+var size_text_m = 16;
+var size_text_l = 20;
+var size_text_xl = 24;
+var size_text_xxl = 32;
+var size_text_xxxl = 42;
+var size_avatar_xs = 16;
+var size_avatar_s = 24;
+var size_avatar_m = 32;
+var size_avatar_l = 40;
+var size_depth_1_blur = 3;
+var size_depth_1_y = 1;
+var size_depth_2_blur = 6;
+var size_depth_2_y = 2;
+var size_depth_3_blur = 12;
+var size_depth_3_y = 4;
+var tokens = {
+	color_brand_primary: color_brand_primary,
+	color_brand_secondary: color_brand_secondary,
+	color_brand_accent: color_brand_accent,
+	color_brand_upgrade: color_brand_upgrade,
+	color_brand_add_on_le: color_brand_add_on_le,
+	color_brand_add_on_de: color_brand_add_on_de,
+	color_utility_destroy_le: color_utility_destroy_le,
+	color_utility_destroy_de: color_utility_destroy_de,
+	color_utility_caution: color_utility_caution,
+	color_utility_success_le: color_utility_success_le,
+	color_utility_success_de: color_utility_success_de,
+	color_utility_info: color_utility_info,
+	color_utility_assigned: color_utility_assigned,
+	color_background_1_le: color_background_1_le,
+	color_background_1_de: color_background_1_de,
+	color_background_2_le: color_background_2_le,
+	color_background_2_de: color_background_2_de,
+	color_background_3_le: color_background_3_le,
+	color_background_3_de: color_background_3_de,
+	color_background_backdrop: color_background_backdrop,
+	color_text_default_le: color_text_default_le,
+	color_text_default_de: color_text_default_de,
+	color_text_subtle_le: color_text_subtle_le,
+	color_text_subtle_de: color_text_subtle_de,
+	color_text_nonessential_le: color_text_nonessential_le,
+	color_text_nonessential_de: color_text_nonessential_de,
+	color_button_background_primary_le: color_button_background_primary_le,
+	color_button_background_primary_de: color_button_background_primary_de,
+	color_button_background_secondary_le: color_button_background_secondary_le,
+	color_button_background_secondary_de: color_button_background_secondary_de,
+	color_button_background_subtle_le: color_button_background_subtle_le,
+	color_button_background_subtle_de: color_button_background_subtle_de,
+	color_button_background_destroy_le: color_button_background_destroy_le,
+	color_button_background_destroy_de: color_button_background_destroy_de,
+	color_button_background_success_le: color_button_background_success_le,
+	color_button_background_success_de: color_button_background_success_de,
+	color_button_background_tint_le: color_button_background_tint_le,
+	color_button_background_tint_de: color_button_background_tint_de,
+	color_button_text_primary_le: color_button_text_primary_le,
+	color_button_text_primary_de: color_button_text_primary_de,
+	color_button_text_secondary_le: color_button_text_secondary_le,
+	color_button_text_secondary_de: color_button_text_secondary_de,
+	color_button_text_subtle_le: color_button_text_subtle_le,
+	color_button_text_subtle_de: color_button_text_subtle_de,
+	color_button_text_destroy_le: color_button_text_destroy_le,
+	color_button_text_destroy_de: color_button_text_destroy_de,
+	color_button_text_success_le: color_button_text_success_le,
+	color_button_text_success_de: color_button_text_success_de,
+	color_link_primary_le: color_link_primary_le,
+	color_link_primary_de: color_link_primary_de,
+	color_link_secondary_le: color_link_secondary_le,
+	color_link_secondary_de: color_link_secondary_de,
+	color_link_subtle_le: color_link_subtle_le,
+	color_link_subtle_de: color_link_subtle_de,
+	color_border_default_le: color_border_default_le,
+	color_border_default_de: color_border_default_de,
+	color_border_input_inactive_le: color_border_input_inactive_le,
+	color_border_input_inactive_de: color_border_input_inactive_de,
+	color_border_input_active_le: color_border_input_active_le,
+	color_border_input_active_de: color_border_input_active_de,
+	color_depth_1_le: color_depth_1_le,
+	color_depth_1_de: color_depth_1_de,
+	color_depth_2_le: color_depth_2_le,
+	color_depth_2_de: color_depth_2_de,
+	color_depth_3_le: color_depth_3_le,
+	color_depth_3_de: color_depth_3_de,
+	color_label_green: color_label_green,
+	color_label_blue: color_label_blue,
+	color_label_purple: color_label_purple,
+	color_label_navy: color_label_navy,
+	color_label_yellow: color_label_yellow,
+	color_label_orange: color_label_orange,
+	color_label_red: color_label_red,
+	color_label_light_gray: color_label_light_gray,
+	color_label_dark_gray: color_label_dark_gray,
+	color_collab_purple: color_collab_purple,
+	color_collab_orange: color_collab_orange,
+	color_collab_green: color_collab_green,
+	color_collab_blue: color_collab_blue,
+	color_collab_red: color_collab_red,
+	color_collab_yellow: color_collab_yellow,
+	color_collab_navy: color_collab_navy,
+	color_collab_plum: color_collab_plum,
+	color_collab_magenta: color_collab_magenta,
+	color_collab_brown: color_collab_brown,
+	color_collab_owner: color_collab_owner,
+	size_spacing_xxs: size_spacing_xxs,
+	size_spacing_xs: size_spacing_xs,
+	size_spacing_s: size_spacing_s,
+	size_spacing_m: size_spacing_m,
+	size_spacing_l: size_spacing_l,
+	size_spacing_xl: size_spacing_xl,
+	size_spacing_xxl: size_spacing_xxl,
+	size_border_width_s: size_border_width_s,
+	size_border_width_m: size_border_width_m,
+	size_border_width_l: size_border_width_l,
+	size_border_width_xl: size_border_width_xl,
+	size_border_radius_s: size_border_radius_s,
+	size_border_radius_m: size_border_radius_m,
+	size_border_radius_l: size_border_radius_l,
+	size_border_radius_xl: size_border_radius_xl,
+	size_border_radius_xxl: size_border_radius_xxl,
+	size_border_radius_pill: size_border_radius_pill,
+	size_text_xxs: size_text_xxs,
+	size_text_xs: size_text_xs,
+	size_text_s: size_text_s,
+	size_text_m: size_text_m,
+	size_text_l: size_text_l,
+	size_text_xl: size_text_xl,
+	size_text_xxl: size_text_xxl,
+	size_text_xxxl: size_text_xxxl,
+	size_avatar_xs: size_avatar_xs,
+	size_avatar_s: size_avatar_s,
+	size_avatar_m: size_avatar_m,
+	size_avatar_l: size_avatar_l,
+	size_depth_1_blur: size_depth_1_blur,
+	size_depth_1_y: size_depth_1_y,
+	size_depth_2_blur: size_depth_2_blur,
+	size_depth_2_y: size_depth_2_y,
+	size_depth_3_blur: size_depth_3_blur,
+	size_depth_3_y: size_depth_3_y
+};
+
+({
+  name: "base",
+  color: {
+    brand: {
+      primary: tokens.color_brand_primary,
+      secondary: tokens.color_brand_secondary,
+      accent: tokens.color_brand_accent,
+      upgrade: tokens.color_brand_upgrade
+    },
+    collab: {
+      purple: tokens.color_collab_purple,
+      orange: tokens.color_collab_orange,
+      green: tokens.color_collab_green,
+      blue: tokens.color_collab_blue,
+      red: tokens.color_collab_red,
+      yellow: tokens.color_collab_yellow,
+      navy: tokens.color_collab_navy,
+      plum: tokens.color_collab_plum,
+      magenta: tokens.color_collab_magenta,
+      brown: tokens.color_collab_brown,
+      owner: tokens.color_collab_owner
+    },
+    label: {
+      green: tokens.color_label_green,
+      blue: tokens.color_label_blue,
+      purple: tokens.color_label_purple,
+      navy: tokens.color_label_navy,
+      yellow: tokens.color_label_yellow,
+      orange: tokens.color_label_orange,
+      red: tokens.color_label_red,
+      lightGray: tokens.color_label_light_gray,
+      darkGray: tokens.color_label_dark_gray
+    },
+    utility: {
+      caution: tokens.color_utility_caution,
+      info: tokens.color_utility_info,
+      assigned: tokens.color_utility_assigned
+    }
+  }
+});
+
+({
+  name: "light_environment",
+  dark: false,
+  color: {
+    brand: {
+      add_on: tokens.color_brand_add_on_le
+    },
+    background: {
+      1: tokens.color_background_1_le,
+      2: tokens.color_background_2_le,
+      3: tokens.color_background_3_le
+    },
+    border: {
+      default: tokens.color_border_default_le,
+      input: {
+        active: tokens.color_border_input_active_le,
+        inactive: tokens.color_border_input_inactive_le
+      }
+    },
+    button: {
+      background: {
+        primary: tokens.color_button_background_primary_le,
+        secondary: tokens.color_button_background_secondary_le,
+        subtle: tokens.color_button_background_subtle_le,
+        tint: tokens.color_button_background_tint_le,
+        destroy: tokens.color_button_background_destroy_le,
+        success: tokens.color_button_background_success_le
+      },
+      text: {
+        primary: tokens.color_button_text_primary_le,
+        secondary: tokens.color_button_text_secondary_le,
+        subtle: tokens.color_button_text_subtle_le
+      }
+    },
+    link: {
+      primary: tokens.color_link_primary_le,
+      secondary: tokens.color_link_secondary_le,
+      subtle: tokens.color_link_subtle_le
+    },
+    depth: {
+      1: tokens.color_depth_1_le,
+      2: tokens.color_depth_2_le,
+      3: tokens.color_depth_3_le
+    },
+    text: {
+      default: tokens.color_text_default_le,
+      subtle: tokens.color_text_subtle_le,
+      nonessential: tokens.color_text_nonessential_le
+    },
+    utility: {
+      success: tokens.color_utility_success_le,
+      destroy: tokens.color_utility_destroy_le
+    }
+  }
+});
+
+({
+  name: "dark_environment",
+  dark: true,
+  color: {
+    brand: {
+      add_on: tokens.color_brand_add_on_de
+    },
+    background: {
+      1: tokens.color_background_1_de,
+      2: tokens.color_background_2_de,
+      3: tokens.color_background_3_de
+    },
+    border: {
+      default: tokens.color_border_default_de,
+      input: {
+        active: tokens.color_border_input_active_de,
+        inactive: tokens.color_border_input_inactive_de
+      }
+    },
+    button: {
+      background: {
+        primary: tokens.color_button_background_primary_de,
+        secondary: tokens.color_button_background_secondary_de,
+        subtle: tokens.color_button_background_subtle_de,
+        tint: tokens.color_button_background_tint_de,
+        destroy: tokens.color_button_background_destroy_de,
+        success: tokens.color_button_background_success_de
+      },
+      text: {
+        primary: tokens.color_button_text_primary_de,
+        secondary: tokens.color_button_text_secondary_de,
+        subtle: tokens.color_button_text_subtle_de
+      }
+    },
+    link: {
+      primary: tokens.color_link_primary_de,
+      secondary: tokens.color_link_secondary_de,
+      subtle: tokens.color_link_subtle_de
+    },
+    depth: {
+      1: tokens.color_depth_1_de,
+      2: tokens.color_depth_2_de,
+      3: tokens.color_depth_3_de
+    },
+    text: {
+      default: tokens.color_text_default_de,
+      subtle: tokens.color_text_subtle_de,
+      nonessential: tokens.color_text_nonessential_de
+    },
+    utility: {
+      success: tokens.color_utility_success_de,
+      destroy: tokens.color_utility_destroy_de
+    }
+  }
+});
+
+const MDI_NAMES = ["check", "upgrade"];
+
+const mapNameToMdiIconPath = name => {
+  switch (name) {
+    case "check":
+      return js.mdiCheck;
+
+    case "upgrade":
+      return js.mdiLightningBolt;
+
+    default:
+      return null;
+  }
+};
+
+const getFontSize = size => {
+  if (size === "small") {
+    return tokens.size_text_s;
+  } else if (size === "medium") {
+    return tokens.size_text_m;
+  } else {
+    return tokens.size_text_l;
+  }
+};
+
+const UpgradeIconContainer = styled__default["default"].div`
+  ${({
+  size
+}) => styled.css`
+    padding: ${getFontSize(size) * 0.1}px;
+    height: ${getFontSize(size)}px;
+    width: ${getFontSize(size)}px;
+    border-radius: ${getFontSize(size)}px;
+  `}
+  background-color: ${tokens.color_brand_upgrade};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Icon = props => {
+  const {
+    name,
+    color,
+    size,
+    style,
+    className
+  } = props;
+  const iconColor = color || "var(--cc_color_text_default)";
+
+  if (!MDI_NAMES.includes(name)) {
+    throw new Error(`'${name}' is not a valid Slab icon name [@companycam/slab] `);
+  } // Return Vector Icon
+
+
+  const mdiIconPath = mapNameToMdiIconPath(name); // unique case: Upgrade Icon
+
+  if (name === "upgrade") {
+    const iconSize = getFontSize(size) * 0.8;
+    return /*#__PURE__*/React__default["default"].createElement(UpgradeIconContainer, {
+      className: className,
+      size: size,
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement(MdiIcon__default["default"], {
+      path: mdiIconPath,
+      size: `${iconSize}px`,
+      color: tokens.color_text_default_le
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(MdiIcon__default["default"], {
+    path: mdiIconPath,
+    size: `${getFontSize(size)}px`,
+    color: iconColor
+  });
+};
+
+Icon.displayName = "Icon";
+Icon.propTypes = {
+  name: PropTypes__default["default"].string.isRequired,
+  color: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf(["tiny", "small", "medium", "large"]), PropTypes__default["default"].number]),
+  style: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object
+  /* allow Icon to be extended as styled-component */
+  , PropTypes__default["default"].array]),
+  className: PropTypes__default["default"].string
+};
+Icon.defaultProps = {
+  name: "",
+  size: "small",
+  style: undefined,
+  className: undefined
+};
+
+const tokenDocs = [{
+  name: "color_brand_primary",
+  value: "#0967d2",
+  category: "color",
+  type: "brand",
+  item: "primary",
+  comment: "Our beloved CoCam deep blue. Use only for branding purposes.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_brand_secondary",
+  value: "#142334",
+  category: "color",
+  type: "brand",
+  item: "secondary",
+  comment: "Complements our primary blue. Use only for branding purposes.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_brand_accent",
+  value: "#ffd000",
+  category: "color",
+  type: "brand",
+  item: "accent",
+  comment: "Used to indicate something is new or coming soon. When used as a background color, pair with color_text_secondary.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_brand_upgrade",
+  value: "#0ce8d6",
+  category: "color",
+  type: "brand",
+  item: "upgrade",
+  comment: "Used to indicate something is part of the Pro plan or part of an upgrade path. When used as a background color, pair with color_text_secondary.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_brand_add_on",
+  value: "#7949d1",
+  category: "color",
+  type: "brand",
+  item: "add_on",
+  comment: "Used to indicate something is an add-on.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_utility_destroy",
+  value: "#ef4e4e",
+  category: "color",
+  type: "utility",
+  item: "destroy",
+  comment: "Use to warn the user of destructive actions or app errors.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_utility_caution",
+  value: "#ffd000",
+  category: "color",
+  type: "utility",
+  item: "caution",
+  comment: "Use to call attention to important information or warnings.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_utility_success",
+  value: "#12a537",
+  category: "color",
+  type: "utility",
+  item: "success",
+  comment: "Use to confirm a successfully completed action.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_utility_info",
+  value: "#42608a",
+  category: "color",
+  type: "utility",
+  item: "info",
+  comment: "Use to inform the user about a neutral state or action.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_utility_assigned",
+  value: "#e76119",
+  category: "color",
+  type: "utility",
+  item: "assigned",
+  comment: "Use to indicate that a user or company is assigned to something.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_background_1",
+  value: "#ffffff",
+  category: "color",
+  type: "background",
+  item: "1",
+  comment: "The default background color in light environments.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_background_2",
+  value: "#f5f7fa",
+  category: "color",
+  type: "background",
+  item: "2",
+  comment: "Use to highlight supporting content: sidebars, modal footers, callouts, etc. Do not use for button backgrounds.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_background_3",
+  value: "#ebeff5",
+  category: "color",
+  type: "background",
+  item: "3",
+  comment: "Use when level 2 is too light: chip and avatar backgrounds, for example. Do not use for button backgrounds.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_background_backdrop",
+  value: "rgba(31, 55, 81, 0.75)",
+  category: "color",
+  type: "background",
+  item: "backdrop",
+  comment: "Partially transparent background for modal or drawer backdrops/overlays.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: false
+}, {
+  name: "color_text_default",
+  value: "#142334",
+  category: "color",
+  type: "text",
+  item: "default",
+  comment: "Body copy font color in our apps.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_text_subtle",
+  value: "#4d5a68",
+  category: "color",
+  type: "text",
+  item: "subtle",
+  comment: "Use for supporting content: helper text, metadata, etc.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_text_nonessential",
+  value: "#8191a2",
+  category: "color",
+  type: "text",
+  item: "nonessential",
+  comment: "Our lightest font color. Use sparingly in hint text, input placeholder text, etc.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_button_background_primary",
+  value: "#0967d2",
+  category: "color",
+  type: "button",
+  item: "background",
+  comment: "Background or outline border color for our primary solid/outline buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_button_background_secondary",
+  value: "#1f3751",
+  category: "color",
+  type: "button",
+  item: "background",
+  comment: "Background or outline border color for our secondary solid/outline buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_button_background_subtle",
+  value: "#ebeff5",
+  category: "color",
+  type: "button",
+  item: "background",
+  comment: "Background or border color for subtle buttons in light env.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_button_background_destroy",
+  value: "#ef4e4e",
+  category: "color",
+  type: "button",
+  item: "background",
+  comment: "Background or border color for destroy buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_button_background_success",
+  value: "#12a537",
+  category: "color",
+  type: "button",
+  item: "background",
+  comment: "Background or border color for success buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_button_background_tint",
+  value: "#e5f1ff",
+  category: "color",
+  type: "button",
+  item: "background",
+  comment: "Light background color tint for hover and active button states",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_button_text_primary",
+  value: "#ffffff",
+  category: "color",
+  type: "button",
+  item: "text",
+  comment: "Text color for our primary solid buttons.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_button_text_secondary",
+  value: "#ffffff",
+  category: "color",
+  type: "button",
+  item: "text",
+  comment: "Text color for our secondary solid buttons.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_button_text_subtle",
+  value: "#4d5a68",
+  category: "color",
+  type: "button",
+  item: "text",
+  comment: "Text color for our subtle solid buttons.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_button_text_destroy",
+  value: "#ffffff",
+  category: "color",
+  type: "button",
+  item: "text",
+  comment: "Text color for our destroy solid buttons.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_button_text_success",
+  value: "#ffffff",
+  category: "color",
+  type: "button",
+  item: "text",
+  comment: "Text color for our success solid buttons.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_link_primary",
+  value: "#0967d2",
+  category: "color",
+  type: "link",
+  item: "primary",
+  comment: "Text color for primary links, as well as our minimal or outline buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_link_secondary",
+  value: "#142334",
+  category: "color",
+  type: "link",
+  item: "secondary",
+  comment: "Text color for secondary links, as well as our minimal or outline buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_link_subtle",
+  value: "#4d5a68",
+  category: "color",
+  type: "link",
+  item: "subtle",
+  comment: "Text color for subtle links, as well as our minimal or outline buttons.",
+  getsLightDarkWeb: true,
+  getsAlphaWeb: true,
+  isThemed: true
+}, {
+  name: "color_border_default",
+  value: "rgba(20, 35, 52, 0.12)",
+  category: "color",
+  type: "border",
+  item: "default",
+  comment: "Our default border color, designed to separate content. Do not use for button or input borders.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_border_input_inactive",
+  value: "rgba(20, 35, 52, 0.2)",
+  category: "color",
+  type: "border",
+  item: "input",
+  comment: "Border color for form inputs in their inactive state.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_border_input_active",
+  value: "#0967d2",
+  category: "color",
+  type: "border",
+  item: "input",
+  comment: "Border color for form inputs in their active state.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_depth_1",
+  value: "rgba(20, 35, 52, 0.13)",
+  category: "color",
+  type: "depth",
+  item: "1",
+  comment: "Color for lowest-elevation shadows. Use for tooltips.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_depth_2",
+  value: "rgba(20, 35, 52, 0.13)",
+  category: "color",
+  type: "depth",
+  item: "2",
+  comment: "Color for mid-elevation shadows. Use for cards and popovers.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_depth_3",
+  value: "rgba(20, 35, 52, 0.2)",
+  category: "color",
+  type: "depth",
+  item: "3",
+  comment: "Color for highest-elevation shadows. Use for modals, floating action bars, etc.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: true
+}, {
+  name: "color_label_green",
+  value: "#31a03c",
+  category: "color",
+  type: "label",
+  item: "green",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_blue",
+  value: "#4191ed",
+  category: "color",
+  type: "label",
+  item: "blue",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_purple",
+  value: "#a227c5",
+  category: "color",
+  type: "label",
+  item: "purple",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_navy",
+  value: "#354b62",
+  category: "color",
+  type: "label",
+  item: "navy",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_yellow",
+  value: "#ffd000",
+  category: "color",
+  type: "label",
+  item: "yellow",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_orange",
+  value: "#e76119",
+  category: "color",
+  type: "label",
+  item: "orange",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_red",
+  value: "#c73732",
+  category: "color",
+  type: "label",
+  item: "red",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_light_gray",
+  value: "#828c95",
+  category: "color",
+  type: "label",
+  item: "light_gray",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_label_dark_gray",
+  value: "#4d5a68",
+  category: "color",
+  type: "label",
+  item: "dark_gray",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_purple",
+  value: "#a227c5",
+  category: "color",
+  type: "collab",
+  item: "purple",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_orange",
+  value: "#e76119",
+  category: "color",
+  type: "collab",
+  item: "orange",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_green",
+  value: "#31a03c",
+  category: "color",
+  type: "collab",
+  item: "green",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_blue",
+  value: "#4191ed",
+  category: "color",
+  type: "collab",
+  item: "blue",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_red",
+  value: "#c73732",
+  category: "color",
+  type: "collab",
+  item: "red",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_yellow",
+  value: "#d28e09",
+  category: "color",
+  type: "collab",
+  item: "yellow",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_navy",
+  value: "#354b62",
+  category: "color",
+  type: "collab",
+  item: "navy",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_plum",
+  value: "#413ecf",
+  category: "color",
+  type: "collab",
+  item: "plum",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_magenta",
+  value: "#d63baa",
+  category: "color",
+  type: "collab",
+  item: "magenta",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_brown",
+  value: "#745138",
+  category: "color",
+  type: "collab",
+  item: "brown",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "color_collab_owner",
+  value: "#ffd000",
+  category: "color",
+  type: "collab",
+  item: "owner",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_xxs",
+  value: "2",
+  category: "size",
+  type: "spacing",
+  item: "xxs",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_xs",
+  value: "4",
+  category: "size",
+  type: "spacing",
+  item: "xs",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_s",
+  value: "8",
+  category: "size",
+  type: "spacing",
+  item: "s",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_m",
+  value: "16",
+  category: "size",
+  type: "spacing",
+  item: "m",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_l",
+  value: "24",
+  category: "size",
+  type: "spacing",
+  item: "l",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_xl",
+  value: "32",
+  category: "size",
+  type: "spacing",
+  item: "xl",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_spacing_xxl",
+  value: "48",
+  category: "size",
+  type: "spacing",
+  item: "xxl",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_width_s",
+  value: "1",
+  category: "size",
+  type: "border",
+  item: "width",
+  comment: "Our lightest border width. Use with our default border color to separate content.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_width_m",
+  value: "2",
+  category: "size",
+  type: "border",
+  item: "width",
+  comment: "Light border width for slightly more emphasis than `s`. Use for focus outline states, outline buttons, etc.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_width_l",
+  value: "4",
+  category: "size",
+  type: "border",
+  item: "width",
+  comment: "Mid-thickness border width. Use for tab-highlight bottom border, for example.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_width_xl",
+  value: "8",
+  category: "size",
+  type: "border",
+  item: "width",
+  comment: "Our heaviest border width. Use for accent-color side border width in Toasts, for example.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_radius_s",
+  value: "2",
+  category: "size",
+  type: "border",
+  item: "radius",
+  comment: "Gives sharp corners a very slight rounding. Use sparingly and only on small elements like `tiny`-sized components.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_radius_m",
+  value: "4",
+  category: "size",
+  type: "border",
+  item: "radius",
+  comment: "Our default border radius for buttons on mobile and labels on both platforms.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_radius_l",
+  value: "8",
+  category: "size",
+  type: "border",
+  item: "radius",
+  comment: "Our default border radius for buttons and modals on the web.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_radius_xl",
+  value: "16",
+  category: "size",
+  type: "border",
+  item: "radius",
+  comment: "Currently unused.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_radius_xxl",
+  value: "24",
+  category: "size",
+  type: "border",
+  item: "radius",
+  comment: "Our default border radius for modals on mobile.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_border_radius_pill",
+  value: "1000",
+  category: "size",
+  type: "border",
+  item: "radius",
+  comment: "Use to create pill-shaped UI elements like chips.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_xxs",
+  value: "10",
+  category: "size",
+  type: "text",
+  item: "xxs",
+  comment: "Use sparingly when space is at a minimum - preferably only on mobile.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_xs",
+  value: "12",
+  category: "size",
+  type: "text",
+  item: "xs",
+  comment: "Use for metadata (date published, etc.) on mobile and on the web where space is tight.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_s",
+  value: "14",
+  category: "size",
+  type: "text",
+  item: "s",
+  comment: "Our default font size on mobile. Can also be used as body copy and metadata on the web.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_m",
+  value: "16",
+  category: "size",
+  type: "text",
+  item: "m",
+  comment: "Our default font size on the web.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_l",
+  value: "20",
+  category: "size",
+  type: "text",
+  item: "l",
+  comment: "Use for headings or featured copy.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_xl",
+  value: "24",
+  category: "size",
+  type: "text",
+  item: "xl",
+  comment: "Use for headings.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_xxl",
+  value: "32",
+  category: "size",
+  type: "text",
+  item: "xxl",
+  comment: "Use for headings.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_text_xxxl",
+  value: "42",
+  category: "size",
+  type: "text",
+  item: "xxxl",
+  comment: "Use for headings.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_avatar_xs",
+  value: "16",
+  category: "size",
+  type: "avatar",
+  item: "xs",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_avatar_s",
+  value: "24",
+  category: "size",
+  type: "avatar",
+  item: "s",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_avatar_m",
+  value: "32",
+  category: "size",
+  type: "avatar",
+  item: "m",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_avatar_l",
+  value: "40",
+  category: "size",
+  type: "avatar",
+  item: "l",
+  comment: null,
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_depth_1_blur",
+  value: "3",
+  category: "size",
+  type: "depth",
+  item: "1",
+  comment: "Blur value in pixels for lowest-elevation shadow. Use for tooltips.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_depth_1_y",
+  value: "1",
+  category: "size",
+  type: "depth",
+  item: "1",
+  comment: "Y offset value in pixels for lowest-elevation shadow. Use for tooltips.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_depth_2_blur",
+  value: "6",
+  category: "size",
+  type: "depth",
+  item: "2",
+  comment: "Blur value in pixels for medium-elevation shadow. Use for cards and popovers.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_depth_2_y",
+  value: "2",
+  category: "size",
+  type: "depth",
+  item: "2",
+  comment: "Y offset value in pixels for medium-elevation shadow. Use for cards and popovers.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_depth_3_blur",
+  value: "12",
+  category: "size",
+  type: "depth",
+  item: "3",
+  comment: "Blur value in pixels for highest-elevation shadow. Use for modals, floating action bars, etc.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}, {
+  name: "size_depth_3_y",
+  value: "4",
+  category: "size",
+  type: "depth",
+  item: "3",
+  comment: "Y offset value in pixels for highest-elevation shadow. Use for modals, floating action bars, etc.",
+  getsLightDarkWeb: false,
+  getsAlphaWeb: false,
+  isThemed: false
+}];
+
+exports.Icon = Icon;
+exports.tokenDocs = tokenDocs;
+exports.tokens = tokens;