glints-aries 4.1.3 → 4.1.4

package/lib/Navigation/Dropdown/Dropdown.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Dropdown = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _components = require("../../General/Icon/components");
+var _DomUtils = require("../../Utils/DomUtils");
+var _DropdownStyle = require("./DropdownStyle");
+var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
+var _excluded = ["label", "showHoverLine", "dropDownPlacement", "noLineBreak", "iconDefaultColor", "showFullWidth", "disabled", "hoverToOpen", "onChange", "children", "leftIcon", "className", "itemElement"];
+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 Dropdown = function Dropdown(_ref) {
+  var label = _ref.label,
+    _ref$showHoverLine = _ref.showHoverLine,
+    showHoverLine = _ref$showHoverLine === void 0 ? false : _ref$showHoverLine,
+    _ref$dropDownPlacemen = _ref.dropDownPlacement,
+    dropDownPlacement = _ref$dropDownPlacemen === void 0 ? 'left' : _ref$dropDownPlacemen,
+    _ref$noLineBreak = _ref.noLineBreak,
+    noLineBreak = _ref$noLineBreak === void 0 ? false : _ref$noLineBreak,
+    _ref$iconDefaultColor = _ref.iconDefaultColor,
+    iconDefaultColor = _ref$iconDefaultColor === void 0 ? 'black' : _ref$iconDefaultColor,
+    _ref$showFullWidth = _ref.showFullWidth,
+    showFullWidth = _ref$showFullWidth === void 0 ? false : _ref$showFullWidth,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hoverToOpen = _ref.hoverToOpen,
+    hoverToOpen = _ref$hoverToOpen === void 0 ? false : _ref$hoverToOpen,
+    onChange = _ref.onChange,
+    children = _ref.children,
+    leftIcon = _ref.leftIcon,
+    className = _ref.className,
+    itemElement = _ref.itemElement,
+    defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var dropdownBodyRef = React.useRef(null);
+  var _React$useState = React.useState(label),
+    dropdownLabel = _React$useState[0],
+    setDropdownLabel = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    cursor = _React$useState3[0],
+    setCursor = _React$useState3[1];
+  var handleOpen = function handleOpen() {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+  var hoverOpen = function hoverOpen() {
+    if (hoverToOpen) {
+      setIsOpen(true);
+    }
+  };
+  var hoverClose = function hoverClose() {
+    if (hoverToOpen) {
+      setIsOpen(false);
+      setCursor(0);
+    }
+  };
+  var handleClose = function handleClose() {
+    setIsOpen(false);
+    setCursor(0);
+  };
+  var handleClickItem = function handleClickItem(onClick) {
+    return function (e) {
+      var itemElement = e.target;
+      if (itemElement.dataset.value) {
+        setDropdownLabel(itemElement.innerHTML);
+        if (onChange && typeof onChange === 'function') {
+          onChange(itemElement.dataset.value);
+        }
+      }
+      if (onClick && typeof onClick === 'function') {
+        onClick(e);
+      }
+      setIsOpen(false);
+    };
+  };
+  var handleMouseEnter = setCursor;
+  var handleKeyDown = function handleKeyDown(e) {
+    e.preventDefault();
+
+    // Up Arrow
+    if (e.keyCode === 38 && cursor > 0) {
+      setCursor(cursor - 1);
+    } else if (e.keyCode === 40 &&
+    // Down Arrow
+    cursor < React.Children.count(children) - 1) {
+      setCursor(cursor + 1);
+    } else if (e.keyCode === 13) {
+      // Enter
+      setDropdownLabel(dropdownBodyRef.current.querySelector('.active').innerHTML);
+      setIsOpen(false);
+    }
+  };
+  React.useEffect(function () {
+    var handleEscKeydown = (0, _DomUtils.escEvent)(handleClose);
+    document.addEventListener('keydown', handleEscKeydown, false);
+    return function () {
+      document.removeEventListener('keydown', handleEscKeydown, false);
+    };
+  }, []);
+  var LeftIcon = leftIcon;
+  return /*#__PURE__*/React.createElement(_DropdownStyle.DropdownContainer, (0, _extends2["default"])({
+    className: (0, _classnames["default"])('aries-dropdown', className),
+    tabIndex: 0,
+    onClick: handleOpen,
+    onMouseEnter: hoverOpen,
+    onMouseLeave: hoverClose,
+    onBlur: handleClose,
+    onKeyDown: handleKeyDown,
+    role: "menuitem",
+    "aria-label": dropdownLabel,
+    "aria-haspopup": "true"
+  }, defaultProps), /*#__PURE__*/React.createElement(_DropdownStyle.DropdownWrapper, {
+    className: "dropdown-contentwrapper",
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_DropdownStyle.DropdownHeader, {
+    className: "dropdown-content",
+    isOpen: isOpen,
+    disabled: disabled,
+    showHoverLine: showHoverLine,
+    showFullWidth: showFullWidth,
+    iconDefaultColor: iconDefaultColor
+  }, LeftIcon, /*#__PURE__*/React.createElement("span", null, itemElement ? itemElement : dropdownLabel), /*#__PURE__*/React.createElement(_DropdownStyle.IconWrapper, {
+    isOpen: isOpen
+  }, /*#__PURE__*/React.createElement(_components.ArrowDownIcon, {
+    color: !disabled ? iconDefaultColor : '#777777'
+  }))), /*#__PURE__*/React.createElement(_DropdownStyle.DropdownBody, {
+    className: "dropdown-listbox",
+    role: "listbox",
+    "aria-hidden": !isOpen && true,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    open: isOpen,
+    dropDownPlacement: dropDownPlacement,
+    noLineBreak: noLineBreak,
+    showFullWidth: showFullWidth,
+    showHoverLine: showHoverLine,
+    ref: dropdownBodyRef
+  }, React.Children.toArray(children).filter(Boolean).map(function (item, index) {
+    var dropDownItemClassName = item.props.className || '';
+    return /*#__PURE__*/React.createElement(_DropdownStyle.DropdownItemWrapper, {
+      className: (0, _classnames["default"])({
+        active: cursor === index
+      }, "" + dropDownItemClassName),
+      role: "option",
+      "data-value": item.props.value,
+      key: item.key,
+      onMouseDown: handleClickItem(item.props.onClick),
+      onMouseEnter: function onMouseEnter() {
+        return handleMouseEnter(index);
+      },
+      tabIndex: 0,
+      showFullWidth: showFullWidth
+    }, item.props.children);
+  }))));
+};
+exports.Dropdown = Dropdown;
+Dropdown.Item = _DropdownItem["default"];
+var _default = Dropdown;
+exports["default"] = _default;

package/lib/Navigation/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: any;
+export declare const HoverToOpen: any;
+export declare const DropdownWithIconAndDefaultIconColour: any;
+export declare const DropdownWithHoverLineEffect: any;
+export declare const DropdownWithRightPlacement: any;
+export declare const DropdownWithFullWidth: any;
+export declare const DisabledDropdown: any;

package/lib/Navigation/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Navigation/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DropdownItemWrapper } from './DropdownStyle';
+declare const DropdownItem: React.FunctionComponent<Props>;
+export declare type Props = React.ComponentPropsWithoutRef<typeof DropdownItemWrapper> & {
+    value?: any;
+    onClick?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    children: React.ReactNode;
+};
+export default DropdownItem;

package/lib/Navigation/Dropdown/DropdownItem.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _DropdownStyle = require("./DropdownStyle");
+var _excluded = ["children", "className"];
+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 DropdownItem = function DropdownItem(props) {
+  var children = props.children,
+    className = props.className,
+    defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+  return /*#__PURE__*/React.createElement(_DropdownStyle.DropdownItemWrapper, (0, _extends2["default"])({
+    className: className
+  }, defaultProps), children);
+};
+var _default = DropdownItem;
+exports["default"] = _default;

package/lib/Navigation/Dropdown/DropdownItem.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/lib/Navigation/Dropdown/DropdownStyle.d.ts

@@ -0,0 +1,27 @@
+export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, DropdownHeaderProps, never>;
+interface DropdownHeaderProps {
+    disabled?: boolean;
+    isOpen?: boolean;
+    showFullWidth?: boolean;
+    showHoverLine?: boolean;
+    iconDefaultColor?: string;
+}
+export declare const DropdownBody: import("styled-components").StyledComponent<"ul", any, DropdownBodyProps, never>;
+interface DropdownBodyProps {
+    open?: boolean;
+    noLineBreak?: boolean;
+    dropDownPlacement?: 'left' | 'right';
+    showFullWidth?: boolean;
+    showHoverLine?: boolean;
+}
+export declare const DropdownItemWrapper: import("styled-components").StyledComponent<"li", any, DropdownItemWrapperProps, never>;
+interface DropdownItemWrapperProps {
+    showFullWidth?: boolean;
+}
+export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, IconWrapperProps, never>;
+interface IconWrapperProps {
+    isOpen: boolean;
+}
+export {};

package/lib/Navigation/Dropdown/DropdownStyle.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.IconWrapper = exports.DropdownWrapper = exports.DropdownItemWrapper = exports.DropdownHeader = exports.DropdownContainer = exports.DropdownBody = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Colors = require("../../Utils/Colors");
+var _Shadow = require("../../Utils/Shadow");
+var underLine = "\n  position: relative;\n  \n  &:hover {\n    color: black;\n    background-color: rgba(255, 255, 255, 1);\n    &:after {\n      transform: scaleX(1);\n    }\n  }\n    \n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: black;\n    bottom: -5px;\n    left: 0px;\n    transition: all .2s ease-in-out;\n    transform: scaleX(0);\n  }\n";
+var underLineAlwaysShow = "\n  position: relative;\n  \n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 2px;\n    background: black;\n    bottom: -5px;\n    left: 0px;\n    transition: all .2s ease-in-out;\n    transform: scaleX(1);\n  }\n";
+var DropdownWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "DropdownStyle__DropdownWrapper",
+  componentId: "sc-1sc3c6h-0"
+})(["display:inline;outline:none;"]);
+exports.DropdownWrapper = DropdownWrapper;
+var DropdownContainer = _styledComponents["default"].div.withConfig({
+  displayName: "DropdownStyle__DropdownContainer",
+  componentId: "sc-1sc3c6h-1"
+})(["display:inline;position:relative;&:focus{outline:none;}&:focus > ", "{outline:5px auto -webkit-focus-ring-color;}"], DropdownWrapper);
+exports.DropdownContainer = DropdownContainer;
+var DropdownHeader = _styledComponents["default"].div.withConfig({
+  displayName: "DropdownStyle__DropdownHeader",
+  componentId: "sc-1sc3c6h-2"
+})(["position:relative;display:inline-flex;align-items:center;cursor:", ";color:", ";transition:all 0.4s;", ";svg{fill:", ";}svg:first-child{margin-right:0.6em;}svg:last-child{margin-left:0.6em;}"], function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled && "" + _Colors.Greyscale.grey;
+}, function (_ref3) {
+  var showHoverLine = _ref3.showHoverLine,
+    isOpen = _ref3.isOpen,
+    disabled = _ref3.disabled,
+    showFullWidth = _ref3.showFullWidth;
+  if (showHoverLine) {
+    if (isOpen) {
+      return "\n          " + underLineAlwaysShow + "\n        ";
+    }
+    return "\n        " + underLine + "\n      ";
+  }
+  if (showFullWidth) {
+    return "\n        width: 100%;\n        padding: 10px 0 10px 20px;\n      ";
+  }
+  return "\n      padding: 1em 1.4em;\n      background: " + (isOpen || disabled ? "" + _Colors.Greyscale.softgrey : null) + ";\n      &:hover {\n        background: " + _Colors.Greyscale.softgrey + ";\n        transition: all .4s;\n      }";
+}, function (_ref4) {
+  var disabled = _ref4.disabled,
+    iconDefaultColor = _ref4.iconDefaultColor;
+  return disabled ? _Colors.Greyscale.grey : iconDefaultColor;
+});
+exports.DropdownHeader = DropdownHeader;
+var DropdownBody = _styledComponents["default"].ul.withConfig({
+  displayName: "DropdownStyle__DropdownBody",
+  componentId: "sc-1sc3c6h-3"
+})(["position:absolute;visibility:", ";opacity:", ";transform:", ";transform-origin:center top;transition:", ";background:", ";box-shadow:", ";z-index:1000;padding:0;margin:0;white-space:", ";", ";", ";li{list-style-type:none;}"], function (_ref5) {
+  var open = _ref5.open;
+  return open ? 'visible' : 'hidden';
+}, function (_ref6) {
+  var open = _ref6.open;
+  return open ? '1' : '0';
+}, function (_ref7) {
+  var open = _ref7.open;
+  return open ? 'scaleY(1)' : 'scaleY(0.9)';
+}, function (_ref8) {
+  var open = _ref8.open;
+  return open ? 'all .2s ease' : 'all .1s ease';
+}, _Colors.Greyscale.white, _Shadow.Shadow.down3, function (_ref9) {
+  var noLineBreak = _ref9.noLineBreak;
+  return noLineBreak ? 'normal' : 'nowrap';
+}, function (_ref10) {
+  var dropDownPlacement = _ref10.dropDownPlacement,
+    showFullWidth = _ref10.showFullWidth;
+  if (dropDownPlacement === 'right') {
+    return "\n        right: 0;\n        width: auto;\n      ";
+  }
+  if (showFullWidth) {
+    return "\n        width: calc(100% - 20px);\n        left: 10px;\n      ";
+  }
+  return "\n      left: 0;\n      width: auto;\n    ";
+}, function (_ref11) {
+  var showHoverLine = _ref11.showHoverLine;
+  if (showHoverLine) {
+    return "\n        margin-top: 13px;\n      ";
+  }
+  return null;
+});
+exports.DropdownBody = DropdownBody;
+var DropdownItemWrapper = _styledComponents["default"].li.withConfig({
+  displayName: "DropdownStyle__DropdownItemWrapper",
+  componentId: "sc-1sc3c6h-4"
+})(["position:relative;padding:1em 1.4em;cursor:pointer;", " &.active{background:", ";}&:hover > ", "{", "}"], function (_ref12) {
+  var showFullWidth = _ref12.showFullWidth;
+  if (showFullWidth) {
+    return "\n        width: 100%;\n      ";
+  }
+  return null;
+}, _Colors.Greyscale.softgrey, DropdownHeader, underLine);
+exports.DropdownItemWrapper = DropdownItemWrapper;
+var IconWrapper = _styledComponents["default"].span.withConfig({
+  displayName: "DropdownStyle__IconWrapper",
+  componentId: "sc-1sc3c6h-5"
+})(["display:flex;svg{transform:", ";transition:", ";}"], function (_ref13) {
+  var isOpen = _ref13.isOpen;
+  return isOpen ? 'rotate(180deg)' : 'rotate(0)';
+}, function (_ref14) {
+  var isOpen = _ref14.isOpen;
+  return isOpen ? 'transform .5s;' : 'transform .5s';
+});
+exports.IconWrapper = IconWrapper;

package/lib/Navigation/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+import Dropdown from './Dropdown';
+export default Dropdown;

package/lib/Navigation/Dropdown/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _default = _Dropdown["default"];
+exports["default"] = _default;

package/lib/Utils/Colors.d.ts

@@ -0,0 +1,22 @@
+export declare const PrimaryColor: {
+    glintsyellow: string;
+    glintsred: string;
+    glintsblue: string;
+};
+export declare const SecondaryColor: {
+    actionblue: string;
+    darkblue: string;
+    green: string;
+    darkgreen: string;
+    magenta: string;
+    violet: string;
+    orange: string;
+};
+export declare const Greyscale: {
+    black: string;
+    grey: string;
+    devilsgrey: string;
+    lightgrey: string;
+    softgrey: string;
+    white: string;
+};

package/lib/Utils/Colors.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SecondaryColor = exports.PrimaryColor = exports.Greyscale = void 0;
+var PrimaryColor = {
+  glintsyellow: '#FFF240',
+  glintsred: '#EC272B',
+  glintsblue: '#0BAEEC'
+};
+exports.PrimaryColor = PrimaryColor;
+var SecondaryColor = {
+  actionblue: '#017EB7',
+  darkblue: '#132647',
+  green: '#93BD49',
+  darkgreen: '#008464',
+  magenta: '#FF00E5',
+  violet: '#9013FE',
+  orange: '#F5A623'
+};
+exports.SecondaryColor = SecondaryColor;
+var Greyscale = {
+  black: '#000000',
+  grey: '#777777',
+  devilsgrey: '#666666',
+  lightgrey: '#C6C6C6',
+  softgrey: '#F3F3F3',
+  white: '#FFFFFF'
+};
+exports.Greyscale = Greyscale;

package/lib/Utils/Colors.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/Utils/ColorsStoriesHelpers.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const ColorSampler: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface ColorBoxProps {
+    bgColor: string;
+    fontColor: string;
+}
+export interface ColorSampleProps extends ColorBoxProps {
+    name: string;
+}
+export declare const ColorSample: React.FunctionComponent<ColorSampleProps>;

package/lib/Utils/ColorsStoriesHelpers.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ColorSampler = exports.ColorSample = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Shadow = require("./Shadow");
+var ColorSampler = _styledComponents["default"].div.withConfig({
+  displayName: "ColorsStoriesHelpers__ColorSampler",
+  componentId: "sc-1euu88z-0"
+})(["display:flex;flex-wrap:wrap;justify-content:space-evenly;"]);
+exports.ColorSampler = ColorSampler;
+var StyledColorSample = _styledComponents["default"].div.withConfig({
+  displayName: "ColorsStoriesHelpers__StyledColorSample",
+  componentId: "sc-1euu88z-1"
+})(["margin:1em;flex:'1 20%';"]);
+var ColorBox = _styledComponents["default"].div.withConfig({
+  displayName: "ColorsStoriesHelpers__ColorBox",
+  componentId: "sc-1euu88z-2"
+})(["display:flex;justify-content:center;align-items:center;width:120px;height:80px;margin:1em auto;background-color:", ";font-size:14px;font-weight:bold;color:", ";box-shadow:", ";"], function (_ref) {
+  var bgColor = _ref.bgColor;
+  return bgColor;
+}, function (_ref2) {
+  var fontColor = _ref2.fontColor;
+  return fontColor;
+}, _Shadow.Shadow.down1);
+var ColorLabel = _styledComponents["default"].code.withConfig({
+  displayName: "ColorsStoriesHelpers__ColorLabel",
+  componentId: "sc-1euu88z-3"
+})(["display:flex;justify-content:center;font-size:16px;"]);
+var ColorSample = function ColorSample(_ref3) {
+  var bgColor = _ref3.bgColor,
+    fontColor = _ref3.fontColor,
+    name = _ref3.name;
+  return /*#__PURE__*/_react["default"].createElement(StyledColorSample, null, /*#__PURE__*/_react["default"].createElement(ColorBox, {
+    bgColor: bgColor,
+    fontColor: fontColor
+  }, /*#__PURE__*/_react["default"].createElement("code", null, bgColor)), /*#__PURE__*/_react["default"].createElement(ColorLabel, null, name));
+};
+exports.ColorSample = ColorSample;

package/lib/Utils/DelayedUnmount.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    mount: boolean;
+    delay?: number;
+}
+export declare const DelayedUnmount: React.FC<Props>;
+export {};

package/lib/Utils/DelayedUnmount.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.DelayedUnmount = void 0;
+var _react = _interopRequireWildcard(require("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 DelayedUnmount = function DelayedUnmount(_ref) {
+  var children = _ref.children,
+    mount = _ref.mount,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 300 : _ref$delay;
+  var _useState = (0, _react.useState)(false),
+    shouldRender = _useState[0],
+    setShouldRender = _useState[1];
+  (0, _react.useLayoutEffect)(function setToRender() {
+    if (mount) setShouldRender(true);
+  }, [mount]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!mount) {
+      var timeout = setTimeout(function () {
+        return setShouldRender(false);
+      }, delay);
+      return function () {
+        return clearTimeout(timeout);
+      };
+    }
+  }, [mount, delay]);
+  return shouldRender && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+};
+exports.DelayedUnmount = DelayedUnmount;

package/lib/Utils/DomUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Returns a value when ESC button is triggered.
+ *
+ * @param  {Function} value
+ * @return {Function}
+ */
+export declare function escEvent(value: () => any): (e: KeyboardEvent) => any;
+/**
+ * Returns a value when Tab button is triggered.
+ *
+ * @param  {Function} value
+ * @return {Function}
+ */
+export declare function tabEvent(value: () => any): (e: KeyboardEvent) => any;

package/lib/Utils/DomUtils.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.escEvent = escEvent;
+exports.tabEvent = tabEvent;
+// DOM utilities
+
+/**
+ * Returns a value when ESC button is triggered.
+ *
+ * @param  {Function} value
+ * @return {Function}
+ */
+function escEvent(value) {
+  var listener = function listener(e) {
+    if (e.keyCode === 27) {
+      return value();
+    }
+    return 0;
+  };
+  return listener;
+}
+
+/**
+ * Returns a value when Tab button is triggered.
+ *
+ * @param  {Function} value
+ * @return {Function}
+ */
+function tabEvent(value) {
+  var listener = function listener(e) {
+    if (e.keyCode === 9) {
+      return value();
+    }
+    return 0;
+  };
+  return listener;
+}