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

package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js

@@ -0,0 +1,335 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CheckCircleIcon = _interopRequireDefault(require("mdi-react/CheckCircleIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Recipes/TrialExperienceNav'
+};
+exports["default"] = _default;
+
+var ArtIcon = function ArtIcon() {
+  return (0, _react2.jsx)("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react2.jsx)("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 (0, _react2.jsx)("svg", {
+    width: "25",
+    height: "26",
+    viewBox: "0 0 25 26",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react2.jsx)("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 (0, _react2.jsx)("svg", {
+    width: "25",
+    height: "19",
+    viewBox: "0 0 25 19",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react2.jsx)("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 (0, _react2.jsx)("svg", (0, _extends2["default"])({
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 17.5 17.5"
+  }, props), (0, _react2.jsx)("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)"
+  }), (0, _react2.jsx)("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 = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedLinks = _useState2[0],
+      updateSelectedLinks = _useState2[1];
+
+  var onSelectionChange = function onSelectionChange(thisIndex) {
+    var _context2;
+
+    var newArray = [];
+
+    if ((0, _includes["default"])(selectedLinks).call(selectedLinks, thisIndex)) {
+      newArray = (0, _filter["default"])(selectedLinks).call(selectedLinks, function (link) {
+        return link !== thisIndex;
+      });
+    } else {
+      var _context;
+
+      newArray = (0, _concat["default"])(_context = []).call(_context, selectedLinks, [thisIndex]);
+    }
+
+    updateSelectedLinks((0, _concat["default"])(_context2 = []).call(_context2, newArray));
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    minWidth: "39.5px",
+    minHeight: "39.5px",
+    sx: sx.iconContainer
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: icon,
+    color: "accent.40",
+    size: "24px",
+    sx: {
+      zIndex: 3
+    }
+  })), !isLastStage && (0, _react2.jsx)(_index.Separator, {
+    sx: sx.headingSeparator,
+    orientation: "vertical"
+  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    sx: sx.title
+  }, title), (0, _react2.jsx)(_index.Box, {
+    pl: "0px",
+    mb: "25px"
+  }, (0, _map["default"])(links).call(links, function (link, index) {
+    return (0, _react2.jsx)(LinkRow, (0, _extends2["default"])({}, 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 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isSelected = _useState4[0],
+      handleSelectionChange = _useState4[1];
+
+  var onIconPress = function onIconPress() {
+    handleSelectionChange(!isSelected);
+    onSelectionChange(index);
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      height: '23.5px',
+      width: '23.5px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, {
+    onPress: onIconPress,
+    sx: sx.linkRowIconButton,
+    "aria-label": "completed step icon indicator"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
+    size: isSelected ? '20px' : '18px',
+    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
+  }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
+    sx: sx.linkRowSeparator,
+    orientation: "vertical"
+  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
+    href: "https://www.pingidentity.com",
+    target: "_blank",
+    sx: sx.linkRowText
+  }, title)));
+};
+
+var Default = function Default() {
+  // Open the `Story` addons tab to view the source code for full context.
+  return (0, _react2.jsx)(_index.Box, {
+    as: "nav",
+    sx: sx.container
+  }, (0, _react2.jsx)(_index.Box, {
+    paddingLeft: "0px"
+  }, (0, _map["default"])(data).call(data, function (stage, index) {
+    return (0, _react2.jsx)(Stage, {
+      title: stage.title,
+      icon: stage.icon,
+      links: stage.links,
+      isLastStage: index === data.length - 1,
+      key: stage.title
+    });
+  })));
+};
+
+exports.Default = Default;

package/lib/cjs/styles/ColorDocumentation.js

@@ -0,0 +1,319 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.ColorSchema = ColorSchema;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _parseInt2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-int"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _sort = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/sort"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _trunc = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/math/trunc"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _collections = require("@react-stately/collections");
+
+var _Box = _interopRequireDefault(require("../components/Box"));
+
+var _Text = _interopRequireDefault(require("../components/Text"));
+
+var _TextField = _interopRequireDefault(require("../components/TextField"));
+
+var _colors = require("./colors.js");
+
+var _SelectField = _interopRequireDefault(require("../components/SelectField"));
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 (0, _react2.jsx)(_Box["default"], {
+    key: name,
+    isRow: true,
+    gap: 20,
+    p: "sm",
+    sx: {
+      alignItems: 'center',
+      opacity: 1 - distanceFromReference,
+      ':hover': {
+        opacity: 1
+      }
+    }
+  }, (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      width: 100,
+      height: 100,
+      backgroundColor: name,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, (0, _react2.jsx)(_Box["default"], {
+    sx: {
+      width: 50,
+      height: 50,
+      backgroundColor: name,
+      ':hover': {
+        backgroundColor: referenceColor
+      }
+    }
+  })), (0, _react2.jsx)(_Box["default"], null, (0, _react2.jsx)(_Text["default"], {
+    variant: "title"
+  }, name), distanceFromReference <= exactMatchThreshold && (0, _react2.jsx)(_Text["default"], {
+    variant: "title",
+    color: "active"
+  }, "Exact match(>", 100 - (0, _trunc["default"])(exactMatchThreshold * 100), "%)!"), distanceFromReference > exactMatchThreshold && (0, _react2.jsx)(_Text["default"], {
+    variant: "subtitle"
+  }, "matchLevel: ", 100 - (0, _trunc["default"])(distanceFromReference * 100), "%"), (0, _react2.jsx)(_Text["default"], {
+    variant: "bodyWeak"
+  }, hex)));
+}
+
+Color.propTypes = {
+  name: _propTypes["default"].string.isRequired,
+  hex: _propTypes["default"].string.isRequired,
+  distanceFromReference: _propTypes["default"].number,
+  referenceColor: _propTypes["default"].string.isRequired
+};
+
+var Colors = /*#__PURE__*/_react["default"].memo(function (_ref2) {
+  var _context, _context2;
+
+  var distanceFromReferenceCb = _ref2.distanceFromReferenceCb,
+      referenceColor = _ref2.referenceColor;
+  return (0, _react2.jsx)(_Box["default"], {
+    gap: 20
+  }, (0, _map["default"])(_context = (0, _sort["default"])(_context2 = (0, _map["default"])(_colors.flatColorList).call(_colors.flatColorList, function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_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 (0, _react2.jsx)(Color, {
+      hex: hex,
+      name: name,
+      key: name,
+      distanceFromReference: distance,
+      referenceColor: referenceColor
+    });
+  }));
+});
+
+Colors.propTypes = {
+  distanceFromReferenceCb: _propTypes["default"].func.isRequired,
+  referenceColor: _propTypes["default"].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 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = (0, _concat["default"])(_context5 = (0, _concat["default"])(_context6 = (0, _concat["default"])(_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 (0, _map["default"])(_context8 = [(0, _slice["default"])(hex).call(hex, 1, 3), (0, _slice["default"])(hex).call(hex, 3, 5), (0, _slice["default"])(hex).call(hex, 5, 7)]).call(_context8, function (x) {
+    return (0, _parseInt2["default"])(x, 16);
+  });
+}
+
+function rgbToHsl(rgb) {
+  var _rgb = (0, _slicedToArray2["default"])(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;
+    };
+  }
+};
+
+function ColorSchema() {
+  var _context9;
+
+  var _useState = (0, _react.useState)('#FFFFFF'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)((0, _keys["default"])(matchers)[0]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      matcher = _useState4[0],
+      setMatcher = _useState4[1];
+
+  var _useState5 = (0, _react.useState)('#FFFFFF'),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      referenceColor = _useState6[0],
+      setReferenceColor = _useState6[1];
+
+  var filterCallback = _react["default"].useCallback(matchers[matcher](referenceColor), [referenceColor, matcher]);
+
+  (0, _react.useEffect)(function () {
+    var timerId = (0, _setTimeout2["default"])(function () {
+      // let's debounce, re-rendering color list is heavy due to sorting
+      setReferenceColor(inputValue);
+    }, 300);
+    return function () {
+      clearTimeout(timerId);
+    };
+  }, [inputValue]);
+  return (0, _react2.jsx)(_Box["default"], {
+    p: "md"
+  }, (0, _react2.jsx)(_TextField["default"], {
+    label: "Color to find",
+    mb: "lg",
+    controlProps: {
+      value: inputValue,
+      onChange: function onChange(_ref8) {
+        var value = _ref8.target.value;
+        return setInputValue(value);
+      }
+    }
+  }), (0, _react2.jsx)(_SelectField["default"], {
+    selectedKey: matcher,
+    onSelectionChange: setMatcher,
+    label: "Desired method"
+  }, (0, _map["default"])(_context9 = (0, _keys["default"])(matchers)).call(_context9, function (key) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: key
+    }, key);
+  })), (0, _react2.jsx)(Colors, {
+    distanceFromReferenceCb: filterCallback,
+    referenceColor: referenceColor
+  }));
+}

package/lib/cjs/styles/ColorDocumentation.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Colors = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ColorDocumentation = require("./ColorDocumentation");
+
+var _Box = _interopRequireDefault(require("../components/Box"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Color Schema',
+  component: _ColorDocumentation.ColorSchema
+};
+exports["default"] = _default;
+
+var Colors = function Colors() {
+  return (0, _react2.jsx)(_Box["default"], {
+    bg: "neutral.95"
+  }, (0, _react2.jsx)(_ColorDocumentation.ColorSchema, null));
+};
+
+exports.Colors = Colors;