@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -0,0 +1,300 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
+import { IconButton, Link, Box, Icon, Text, Separator } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/TrialExperienceNav'
+};
+
+var ArtIcon = function ArtIcon() {
+  return ___EmotionJSX("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("path", {
+    d: "M12 24C10.4241 24 8.86371 23.6896 7.4078 23.0866C5.95189 22.4835 4.62902 21.5996 3.51472 20.4853C1.26428 18.2348 0 15.1826 0 12C0 8.8174 1.26428 5.76516 3.51472 3.51472C5.76516 1.26428 8.8174 0 12 0C18.6 0 24 4.8 24 10.8C24 12.7096 23.2414 14.5409 21.8912 15.8912C20.5409 17.2414 18.7096 18 16.8 18H14.64C14.28 18 14.04 18.24 14.04 18.6C14.04 18.72 14.16 18.84 14.16 18.96C14.64 19.56 14.88 20.28 14.88 21C15 22.68 13.68 24 12 24ZM12 2.4C9.45392 2.4 7.01212 3.41143 5.21178 5.21178C3.41143 7.01212 2.4 9.45392 2.4 12C2.4 14.5461 3.41143 16.9879 5.21178 18.7882C7.01212 20.5886 9.45392 21.6 12 21.6C12.36 21.6 12.6 21.36 12.6 21C12.6 20.76 12.48 20.64 12.48 20.52C12 19.92 11.76 19.32 11.76 18.6C11.76 16.92 13.08 15.6 14.76 15.6H16.8C18.073 15.6 19.2939 15.0943 20.1941 14.1941C21.0943 13.2939 21.6 12.073 21.6 10.8C21.6 6.12 17.28 2.4 12 2.4ZM5.4 9.6C6.36 9.6 7.2 10.44 7.2 11.4C7.2 12.36 6.36 13.2 5.4 13.2C4.44 13.2 3.6 12.36 3.6 11.4C3.6 10.44 4.44 9.6 5.4 9.6ZM9 4.8C9.96 4.8 10.8 5.64 10.8 6.6C10.8 7.56 9.96 8.4 9 8.4C8.04 8.4 7.2 7.56 7.2 6.6C7.2 5.64 8.04 4.8 9 4.8ZM15 4.8C15.96 4.8 16.8 5.64 16.8 6.6C16.8 7.56 15.96 8.4 15 8.4C14.04 8.4 13.2 7.56 13.2 6.6C13.2 5.64 14.04 4.8 15 4.8ZM18.6 9.6C19.56 9.6 20.4 10.44 20.4 11.4C20.4 12.36 19.56 13.2 18.6 13.2C17.64 13.2 16.8 12.36 16.8 11.4C16.8 10.44 17.64 9.6 18.6 9.6Z",
+    fill: "#4660A2"
+  }));
+};
+
+var EarthMagnifyGlassIcon = function EarthMagnifyGlassIcon() {
+  return ___EmotionJSX("svg", {
+    width: "25",
+    height: "26",
+    viewBox: "0 0 25 26",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("path", {
+    d: "M21.0163 18.992C21.483 18.1461 21.833 17.1795 21.833 16.092C21.833 13.0711 19.4997 10.6545 16.583 10.6545C13.6663 10.6545 11.333 13.0711 11.333 16.092C11.333 19.1128 13.6663 21.5295 16.583 21.5295C17.633 21.5295 18.5663 21.167 19.383 20.6836L23.1163 24.5503L24.7497 22.8586L21.0163 18.992ZM16.583 19.1128C14.9497 19.1128 13.6663 17.7836 13.6663 16.092C13.6663 14.4003 14.9497 13.0711 16.583 13.0711C18.2163 13.0711 19.4997 14.4003 19.4997 16.092C19.4997 17.7836 18.2163 19.1128 16.583 19.1128ZM12.4997 22.7378V25.1545C6.05967 25.1545 0.833008 19.7411 0.833008 13.0711C0.833008 6.40113 6.05967 0.987793 12.4997 0.987793C18.1463 0.987793 22.848 5.14446 23.933 10.6545H21.518C20.7713 7.68196 18.718 5.25321 15.9997 4.11738V4.61279C15.9997 5.94196 14.9497 7.02946 13.6663 7.02946H11.333V9.44613C11.333 10.1107 10.808 10.6545 10.1663 10.6545H7.83301V13.0711H10.1663V16.6961H8.99967L3.41134 10.9082C3.25967 11.609 3.16634 12.322 3.16634 13.0711C3.16634 18.3999 7.35467 22.7378 12.4997 22.7378Z",
+    fill: "#4660A2"
+  }));
+};
+
+var EarthCircleIcon = function EarthCircleIcon() {
+  return ___EmotionJSX("svg", {
+    width: "25",
+    height: "19",
+    viewBox: "0 0 25 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("path", {
+    d: "M21.1198 12.8144C21.0965 12.8144 21.0848 12.8144 21.0615 12.8261C20.7698 10.8544 19.0898 9.33773 17.0365 9.33773C15.4031 9.33773 14.0031 10.3061 13.3498 11.6944C11.5065 11.7877 10.0365 13.3044 10.0365 15.1711C10.0365 17.1077 11.5998 18.6711 13.5365 18.6711L21.1198 18.6477C22.7298 18.6477 24.0365 17.3411 24.0365 15.7311C24.0365 14.1211 22.7298 12.8144 21.1198 12.8144ZM7.70312 0.307728V2.74606C4.98479 3.71439 3.03646 6.29273 3.03646 9.33773C3.03646 11.4027 3.94646 13.2344 5.36979 14.5177V11.6711H7.70312V18.6711H0.703125V16.3377H3.88812C1.93979 14.6344 0.703125 12.1377 0.703125 9.33773C0.703125 4.98606 3.67812 1.34606 7.70312 0.307728ZM19.3698 2.33773H16.1848C17.8531 3.80773 18.9965 5.84939 19.2881 8.17106H16.9315C16.6631 6.58439 15.8465 5.19606 14.7031 4.15773V7.00439H12.3698V0.00439453H19.3698V2.33773Z",
+    fill: "#4660A2"
+  }));
+};
+
+var RadioButtonIcon = function RadioButtonIcon(props) {
+  return ___EmotionJSX("svg", _extends({
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 17.5 17.5"
+  }, props), ___EmotionJSX("path", {
+    className: "cls-1",
+    fill: "#B3BEE8",
+    d: "M9,18.25A8.75,8.75,0,1,1,17.75,9.5,8.76,8.76,0,0,1,9,18.25ZM9,1.75A7.75,7.75,0,1,0,16.75,9.5,7.76,7.76,0,0,0,9,1.75Z",
+    transform: "translate(-0.25 -0.75)"
+  }), ___EmotionJSX("circle", {
+    className: "cls-2",
+    cx: "8.75",
+    cy: "8.75",
+    r: "8.05",
+    fill: "white"
+  }));
+};
+
+var data = [{
+  title: 'Design a Solution',
+  icon: ArtIcon,
+  key: 0,
+  links: [{
+    title: 'Registration'
+  }, {
+    title: 'Authentication'
+  }, {
+    title: 'Profile management'
+  }, {
+    title: 'Experience your solution'
+  }]
+}, {
+  title: 'Explore & Customize',
+  icon: EarthMagnifyGlassIcon,
+  key: 1,
+  links: [{
+    title: 'Edit a user'
+  }, {
+    title: 'Update password policies'
+  }, {
+    title: 'Edit agreements'
+  }, {
+    title: 'Edit notifications'
+  }]
+}, {
+  title: 'Orchestrate & Integrate',
+  icon: EarthCircleIcon,
+  key: 2,
+  links: [{
+    title: 'Learn about DaVinci'
+  }, {
+    title: 'View a workflow'
+  }]
+}];
+var sx = {
+  iconContainer: {
+    backgroundColor: 'accent.80',
+    alignItems: 'center',
+    justifyContent: 'center',
+    mr: 'sm',
+    borderRadius: '50%',
+    zIndex: 3
+  },
+  headingSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.80',
+    maxHeight: '100%',
+    width: '6px !important',
+    zIndex: 2,
+    m: '0px 5px 0px 17px !important'
+  },
+  title: {
+    fontSize: 'md',
+    color: 'accent.30',
+    lineHeight: '18px',
+    fontWeight: '3',
+    m: '12px 0px 28px 5px',
+    maxWidth: '195px'
+  },
+  linkRowIconButton: {
+    '&.is-pressed': {
+      backgroundColor: 'transparent'
+    },
+    '&.is-pressed > svg > path': {
+      fill: 'accent.30'
+    },
+    '&.is-hovered': {
+      backgroundColor: 'transparent'
+    }
+  },
+  linkRowIconSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.30'
+    }
+  },
+  linkRowIconNotSelected: {
+    zIndex: 3,
+    'path': {
+      fill: 'accent.80'
+    }
+  },
+  linkRowSeparator: {
+    flexGrow: 1,
+    backgroundColor: 'accent.30',
+    maxHeight: '100%',
+    width: '1px !important',
+    zIndex: 2,
+    m: '-5px 5px -5px 11.5px !important'
+  },
+  linkRowText: {
+    fontSize: 'md',
+    color: '#163CE3',
+    lineHeight: '18px',
+    fontWeight: '0',
+    m: '3px 0px 20px 10px',
+    maxWidth: '140px'
+  },
+  container: {
+    p: '15px 15px 0px 15px',
+    width: '280px',
+    backgroundColor: 'accent.95',
+    borderRadius: '8px',
+    zIndex: 1,
+    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+  }
+};
+
+var Stage = function Stage(props) {
+  var title = props.title,
+      icon = props.icon,
+      links = props.links,
+      isLastStage = props.isLastStage;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedLinks = _useState2[0],
+      updateSelectedLinks = _useState2[1];
+
+  var onSelectionChange = function onSelectionChange(thisIndex) {
+    var _context2;
+
+    var newArray = [];
+
+    if (_includesInstanceProperty(selectedLinks).call(selectedLinks, thisIndex)) {
+      newArray = _filterInstanceProperty(selectedLinks).call(selectedLinks, function (link) {
+        return link !== thisIndex;
+      });
+    } else {
+      var _context;
+
+      newArray = _concatInstanceProperty(_context = []).call(_context, selectedLinks, [thisIndex]);
+    }
+
+    updateSelectedLinks(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
+  };
+
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    minWidth: "39.5px",
+    minHeight: "39.5px",
+    sx: sx.iconContainer
+  }, ___EmotionJSX(Icon, {
+    icon: icon,
+    color: "accent.40",
+    size: "24px",
+    sx: {
+      zIndex: 3
+    }
+  })), !isLastStage && ___EmotionJSX(Separator, {
+    sx: sx.headingSeparator,
+    orientation: "vertical"
+  })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    sx: sx.title
+  }, title), ___EmotionJSX(Box, {
+    pl: "0px",
+    mb: "25px"
+  }, _mapInstanceProperty(links).call(links, function (link, index) {
+    return ___EmotionJSX(LinkRow, _extends({}, link, {
+      onSelectionChange: onSelectionChange,
+      index: index,
+      isLinkSelected: selectedLinks.length !== 0,
+      isLastLink: index === links.length - 1,
+      key: link.title
+    }));
+  }))));
+};
+
+var LinkRow = function LinkRow(props) {
+  var title = props.title,
+      index = props.index,
+      onSelectionChange = props.onSelectionChange,
+      isLinkSelected = props.isLinkSelected,
+      isLastLink = props.isLastLink;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isSelected = _useState4[0],
+      handleSelectionChange = _useState4[1];
+
+  var onIconPress = function onIconPress() {
+    handleSelectionChange(!isSelected);
+    onSelectionChange(index);
+  };
+
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    sx: {
+      height: '23.5px',
+      width: '23.5px'
+    }
+  }, ___EmotionJSX(IconButton, {
+    onPress: onIconPress,
+    sx: sx.linkRowIconButton,
+    "aria-label": "completed step icon indicator"
+  }, ___EmotionJSX(Icon, {
+    icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
+    size: isSelected ? '20px' : '18px',
+    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
+  }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
+    sx: sx.linkRowSeparator,
+    orientation: "vertical"
+  })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
+    href: "https://www.pingidentity.com",
+    target: "_blank",
+    sx: sx.linkRowText
+  }, title)));
+};
+
+export var Default = function Default() {
+  // Open the `Story` addons tab to view the source code for full context.
+  return ___EmotionJSX(Box, {
+    as: "nav",
+    sx: sx.container
+  }, ___EmotionJSX(Box, {
+    paddingLeft: "0px"
+  }, _mapInstanceProperty(data).call(data, function (stage, index) {
+    return ___EmotionJSX(Stage, {
+      title: stage.title,
+      icon: stage.icon,
+      links: stage.links,
+      isLastStage: index === data.length - 1,
+      key: stage.title
+    });
+  })));
+};

package/lib/styles/ColorDocumentation.js

@@ -0,0 +1,276 @@
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Math$trunc from "@babel/runtime-corejs3/core-js-stable/math/trunc";
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Item } from '@react-stately/collections';
+import Box from '../components/Box';
+import Text from '../components/Text';
+import TextField from '../components/TextField';
+import { flatColorList } from './colors.js';
+import SelectField from '../components/SelectField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var exactMatchThreshold = 0.02;
+
+function Color(_ref) {
+  var name = _ref.name,
+      hex = _ref.hex,
+      distanceFromReference = _ref.distanceFromReference,
+      referenceColor = _ref.referenceColor;
+
+  if (distanceFromReference < 0 || distanceFromReference > 1) {
+    // eslint-disable-next-line no-console
+    console.log("Please check color distance logic. Value ".concat(distanceFromReference, " is outside range [0, 1]"));
+  }
+
+  return ___EmotionJSX(Box, {
+    key: name,
+    isRow: true,
+    gap: 20,
+    p: "sm",
+    sx: {
+      alignItems: 'center',
+      opacity: 1 - distanceFromReference,
+      ':hover': {
+        opacity: 1
+      }
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      width: 100,
+      height: 100,
+      backgroundColor: name,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      width: 50,
+      height: 50,
+      backgroundColor: name,
+      ':hover': {
+        backgroundColor: referenceColor
+      }
+    }
+  })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "title"
+  }, name), distanceFromReference <= exactMatchThreshold && ___EmotionJSX(Text, {
+    variant: "title",
+    color: "active"
+  }, "Exact match(>", 100 - _Math$trunc(exactMatchThreshold * 100), "%)!"), distanceFromReference > exactMatchThreshold && ___EmotionJSX(Text, {
+    variant: "subtitle"
+  }, "matchLevel: ", 100 - _Math$trunc(distanceFromReference * 100), "%"), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, hex)));
+}
+
+Color.propTypes = {
+  name: PropTypes.string.isRequired,
+  hex: PropTypes.string.isRequired,
+  distanceFromReference: PropTypes.number,
+  referenceColor: PropTypes.string.isRequired
+};
+var Colors = /*#__PURE__*/React.memo(function (_ref2) {
+  var _context, _context2;
+
+  var distanceFromReferenceCb = _ref2.distanceFromReferenceCb,
+      referenceColor = _ref2.referenceColor;
+  return ___EmotionJSX(Box, {
+    gap: 20
+  }, _mapInstanceProperty(_context = _sortInstanceProperty(_context2 = _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        name = _ref4[0],
+        hex = _ref4[1];
+
+    return {
+      name: name,
+      hex: hex,
+      distance: distanceFromReferenceCb(hex)
+    };
+  })).call(_context2, function (_ref5, _ref6) {
+    var distance1 = _ref5.distance;
+    var distance2 = _ref6.distance;
+    return distance1 - distance2;
+  })).call(_context, function (_ref7) {
+    var name = _ref7.name,
+        hex = _ref7.hex,
+        distance = _ref7.distance;
+    return ___EmotionJSX(Color, {
+      hex: hex,
+      name: name,
+      key: name,
+      distanceFromReference: distance,
+      referenceColor: referenceColor
+    });
+  }));
+});
+Colors.propTypes = {
+  distanceFromReferenceCb: PropTypes.func.isRequired,
+  referenceColor: PropTypes.string.isRequired
+};
+
+function hexToRgb(input) {
+  var _context8;
+
+  var hex = input;
+
+  if (!hex.match(/^#/)) {
+    hex = "#".concat(hex);
+  }
+
+  if (hex.length === 4) {
+    var _context3, _context4, _context5, _context6, _context7;
+
+    hex = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "#".concat(hex[1])).call(_context7, hex[1])).call(_context6, hex[2])).call(_context5, hex[2])).call(_context4, hex[3])).call(_context3, hex[3]);
+  }
+
+  return _mapInstanceProperty(_context8 = [_sliceInstanceProperty(hex).call(hex, 1, 3), _sliceInstanceProperty(hex).call(hex, 3, 5), _sliceInstanceProperty(hex).call(hex, 5, 7)]).call(_context8, function (x) {
+    return _parseInt(x, 16);
+  });
+}
+
+function rgbToHsl(rgb) {
+  var _rgb = _slicedToArray(rgb, 3),
+      r = _rgb[0],
+      g = _rgb[1],
+      b = _rgb[2];
+
+  r /= 255;
+  g /= 255;
+  b /= 255; // Find greatest and smallest channel values
+
+  var cmin = Math.min(r, g, b);
+  var cmax = Math.max(r, g, b);
+  var delta = cmax - cmin;
+  var h;
+  var s;
+  var l; // Calculate hue
+
+  if (delta === 0) {
+    // No difference
+    h = 0;
+  } else if (cmax === r) {
+    // Red is max
+    h = (g - b) / delta % 6;
+  } else if (cmax === g) {
+    // Green is max
+    // eslint-disable-next-line no-mixed-operators
+    h = (b - r) / delta + 2;
+  } else {
+    // Blue is max
+    // eslint-disable-next-line no-mixed-operators
+    h = (r - g) / delta + 4;
+  }
+
+  h = Math.round(h * 60); // Make negative hues positive behind 360°
+
+  if (h < 0) {
+    h += 360;
+  } // Calculate lightness
+
+
+  l = (cmax + cmin) / 2; // Calculate saturation
+  // eslint-disable-next-line no-mixed-operators
+
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); // Multiply l and s by 100
+
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+}
+
+var matchers = {
+  'RGB Average Diff': function RGBAverageDiff(referenceValue) {
+    return function (entry) {
+      var rgb1 = hexToRgb(entry);
+      var rgb2 = hexToRgb(referenceValue); // eslint-disable-next-line no-mixed-operators
+
+      return (Math.abs(rgb1[0] - rgb2[0]) + // eslint-disable-next-line no-mixed-operators
+      Math.abs(rgb1[1] - rgb2[1]) + // eslint-disable-next-line no-mixed-operators
+      Math.abs(rgb1[2] - rgb2[2])) / (3 * 256);
+    };
+  },
+  'RGB distance': function RGBDistance(referenceValue) {
+    return function (entry) {
+      var rgb1 = hexToRgb(entry);
+      var rgb2 = hexToRgb(referenceValue); // eslint-disable-next-line no-mixed-operators
+
+      return Math.sqrt(Math.pow(rgb1[0] - rgb2[0], 2) + // eslint-disable-next-line no-mixed-operators
+      Math.pow(rgb1[1] - rgb2[1], 2) + // eslint-disable-next-line no-mixed-operators
+      Math.pow(rgb1[2] - rgb2[2], 2)) / (3 * 256);
+    };
+  },
+  'By Hue Difference': function ByHueDifference(referenceValue) {
+    return function (entry) {
+      var h1 = rgbToHsl(hexToRgb(entry))[0];
+      var h2 = rgbToHsl(hexToRgb(referenceValue))[0];
+      var distance = Math.abs(h1 - h2);
+      /*
+      since hue is circle-like value from 0 to 359 degree
+      we want to ensure 2 values of 1 and 359 would be treated as close
+      */
+
+      return Math.min(distance, 360 - distance) / 180;
+    };
+  }
+};
+export function ColorSchema() {
+  var _context9;
+
+  var _useState = useState('#FFFFFF'),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = useState(_Object$keys(matchers)[0]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      matcher = _useState4[0],
+      setMatcher = _useState4[1];
+
+  var _useState5 = useState('#FFFFFF'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      referenceColor = _useState6[0],
+      setReferenceColor = _useState6[1];
+
+  var filterCallback = React.useCallback(matchers[matcher](referenceColor), [referenceColor, matcher]);
+  useEffect(function () {
+    var timerId = _setTimeout(function () {
+      // let's debounce, re-rendering color list is heavy due to sorting
+      setReferenceColor(inputValue);
+    }, 300);
+
+    return function () {
+      clearTimeout(timerId);
+    };
+  }, [inputValue]);
+  return ___EmotionJSX(Box, {
+    p: "md"
+  }, ___EmotionJSX(TextField, {
+    label: "Color to find",
+    mb: "lg",
+    controlProps: {
+      value: inputValue,
+      onChange: function onChange(_ref8) {
+        var value = _ref8.target.value;
+        return setInputValue(value);
+      }
+    }
+  }), ___EmotionJSX(SelectField, {
+    selectedKey: matcher,
+    onSelectionChange: setMatcher,
+    label: "Desired method"
+  }, _mapInstanceProperty(_context9 = _Object$keys(matchers)).call(_context9, function (key) {
+    return ___EmotionJSX(Item, {
+      key: key
+    }, key);
+  })), ___EmotionJSX(Colors, {
+    distanceFromReferenceCb: filterCallback,
+    referenceColor: referenceColor
+  }));
+}

package/lib/styles/ColorDocumentation.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ColorSchema } from './ColorDocumentation';
+import Box from '../components/Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Color Schema',
+  component: ColorSchema
+};
+export var Colors = function Colors() {
+  return ___EmotionJSX(Box, {
+    bg: "neutral.95"
+  }, ___EmotionJSX(ColorSchema, null));
+};

package/lib/styles/ContainerSizes.stories.js

@@ -0,0 +1,76 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import { Box, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Design/Container Sizes'
+};
+var containerArray = [{
+  key: 'xs',
+  size: 'container.xs',
+  bg: 'black',
+  codeString: '<Box size="container.xs" />',
+  widthString: '400px width'
+}, {
+  key: 'sm',
+  size: 'container.sm',
+  bg: 'neutral.10',
+  codeString: '<Box size="container.sm" />',
+  widthString: '550px width'
+}, {
+  key: 'md',
+  size: 'container.md',
+  bg: 'neutral.20',
+  codeString: '<Box size="container.md" />',
+  widthString: '800px width'
+}, {
+  key: 'lg',
+  size: 'container.lg',
+  bg: 'neutral.30',
+  codeString: '<Box size="container.lg" />',
+  widthString: '1200px width'
+}, {
+  key: 'full',
+  size: 'container.full',
+  bg: 'neutral.40',
+  codeString: '<Box size="container.full" />',
+  widthString: '100% width'
+}];
+
+var Container = function Container(props) {
+  var bg = props.bg,
+      codeString = props.codeString,
+      size = props.size,
+      widthString = props.widthString;
+  return ___EmotionJSX(Box, {
+    size: size,
+    maxHeight: "250px",
+    bg: bg,
+    p: "md"
+  }, ___EmotionJSX(Text, {
+    color: "white",
+    fontWeight: 1,
+    fontSize: "xx"
+  }, size), ___EmotionJSX(Text, {
+    color: "white",
+    fontWeight: 0,
+    fontSize: "lg"
+  }, widthString), ___EmotionJSX("br", null), ___EmotionJSX(Text, {
+    color: "white",
+    fontWeight: 0,
+    fontSize: "lg"
+  }, codeString));
+};
+
+export var ContainerSizes = function ContainerSizes() {
+  return ___EmotionJSX(Box, {
+    height: "1250px",
+    width: "1600px"
+  }, ___EmotionJSX(Text, {
+    fontSize: "lg",
+    fontWeight: "0",
+    width: "800px"
+  }, "For cards, panels, and popup modals, these are our standard widths. They should be max widths, and these elements should shrink based on the amount of space available. (Popup modals should never be LG or Full, and probably never MD as well.)"), ___EmotionJSX("br", null), _mapInstanceProperty(containerArray).call(containerArray, function (item) {
+    return ___EmotionJSX(Container, item);
+  }));
+};