@elastic/eui 72.2.0 → 74.0.0

package/optimize/lib/components/modal/confirm_modal.js

@@ -39,7 +39,7 @@ var _text = require("../text");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "title", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
+var _excluded = ["children", "title", "titleProps", "onCancel", "onConfirm", "cancelButtonText", "confirmButtonText", "confirmButtonDisabled", "className", "buttonColor", "defaultFocusedButton", "isLoading"];
 
 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); }
 
@@ -53,6 +53,7 @@ exports.CANCEL_BUTTON = CANCEL_BUTTON;
 var EuiConfirmModal = function EuiConfirmModal(_ref) {
   var children = _ref.children,
       title = _ref.title,
+      titleProps = _ref.titleProps,
       onCancel = _ref.onCancel,
       onConfirm = _ref.onConfirm,
       cancelButtonText = _ref.cancelButtonText,
@@ -104,9 +105,9 @@ var EuiConfirmModal = function EuiConfirmModal(_ref) {
   var modalTitle;
 
   if (title) {
-    modalTitle = (0, _react2.jsx)(_modal_header.EuiModalHeader, null, (0, _react2.jsx)(_modal_header_title.EuiModalHeaderTitle, {
+    modalTitle = (0, _react2.jsx)(_modal_header.EuiModalHeader, null, (0, _react2.jsx)(_modal_header_title.EuiModalHeaderTitle, (0, _extends2.default)({
       "data-test-subj": "confirmModalTitleText"
-    }, title));
+    }, titleProps), title));
   }
 
   var message;

package/optimize/lib/components/modal/modal.a11y.js

@@ -47,7 +47,7 @@ var Modal = function Modal() {
   };
   return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButton, {
     onClick: showModal
-  }, "Show confirm modal"), isModalVisible && (0, _react2.jsx)(_index.EuiModal, modalProps, (0, _react2.jsx)(_index.EuiModalHeader, null, (0, _react2.jsx)(_index.EuiModalHeaderTitle, null, (0, _react2.jsx)("h1", null, "Title of modal"))), (0, _react2.jsx)(_index.EuiModalBody, null, (0, _react2.jsx)("p", null, "This is a simple modal body")), (0, _react2.jsx)(_index.EuiModalFooter, null, (0, _react2.jsx)(_button.EuiButton, {
+  }, "Show confirm modal"), isModalVisible && (0, _react2.jsx)(_index.EuiModal, modalProps, (0, _react2.jsx)(_index.EuiModalHeader, null, (0, _react2.jsx)(_index.EuiModalHeaderTitle, null, "Title of modal")), (0, _react2.jsx)(_index.EuiModalBody, null, (0, _react2.jsx)("p", null, "This is a simple modal body")), (0, _react2.jsx)(_index.EuiModalFooter, null, (0, _react2.jsx)(_button.EuiButton, {
     onClick: closeModal,
     fill: true
   }, "Close"))));

package/optimize/lib/components/modal/modal_header_title.js

@@ -19,17 +19,19 @@ var _title = require("../title");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children"];
+var _excluded = ["className", "children", "component"];
 
 var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
   var className = _ref.className,
       children = _ref.children,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'h1' : _ref$component,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiModalHeader__title', className);
   return (0, _react2.jsx)(_title.EuiTitle, (0, _extends2.default)({
     size: "m",
     className: classes
-  }, rest), /*#__PURE__*/_react.default.isValidElement(children) ? children : (0, _react2.jsx)("h1", null, children));
+  }, rest), (0, _react2.jsx)(Component, null, children));
 };
 
 exports.EuiModalHeaderTitle = EuiModalHeaderTitle;

package/optimize/lib/components/notification/notification_event.a11y.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _context_menu = require("../context_menu");
+
+var _notification_event = require("./notification_event");
+
+var _panel = require("../panel");
+
+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; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+var NotificationEvent = function NotificationEvent() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isRead = _useState2[0],
+      setIsRead = _useState2[1];
+
+  var onRead = function onRead(id, isRead) {
+    setIsRead(!isRead);
+  };
+
+  var onOpenContextMenu = function onOpenContextMenu(id) {
+    return [(0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
+      key: "contextMenuItemA",
+      onClick: function onClick() {
+        return onRead(id, isRead);
+      }
+    }, isRead ? 'Mark as unread' : 'Mark as read'), (0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
+      key: "contextMenuItemB",
+      onClick: function onClick() {}
+    }, "View messages like this"), (0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
+      key: "contextMenuItemC",
+      onClick: function onClick() {}
+    }, "Don\u2019t notify me about this")];
+  };
+
+  return (0, _react2.jsx)(_panel.EuiPanel, {
+    paddingSize: "none",
+    hasShadow: true,
+    style: {
+      maxWidth: '540px'
+    }
+  }, (0, _react2.jsx)(_notification_event.EuiNotificationEvent, {
+    id: "cy-eui-notification-1",
+    type: "Report",
+    iconType: "logoKibana",
+    iconAriaLabel: "Kibana",
+    time: "1 min ago",
+    title: "[Error Monitoring Report] is generated",
+    primaryAction: "Download",
+    primaryActionProps: {
+      iconType: 'download'
+    },
+    messages: ['The reported was generated at 17:12:16 GMT+4'],
+    isRead: isRead,
+    onRead: onRead,
+    onOpenContextMenu: onOpenContextMenu,
+    onClickPrimaryAction: function onClickPrimaryAction() {},
+    onClickTitle: function onClickTitle() {}
+  }));
+};
+
+describe('EuiNotificationEvent', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(NotificationEvent, null));
+    cy.get('article.euiNotificationEvent').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is open', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations after the Mark as read button is clicked', function () {
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').realClick();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('div.euiPopover__panel button').first().realClick();
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility', function () {
+    it('has zero violations when the popover is opened by keyboard', function () {
+      cy.repeatRealPress('Tab');
+      cy.get('button[data-test-subj="cy-eui-notification-1-notificationEventMetaButton"]').should('have.focus');
+      cy.realPress('Enter');
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+      cy.realPress('Escape');
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/lib/components/page/page_header/page_header.a11y.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = require("../../button");
+
+var _page_header = require("./page_header");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../../cypress/support"/>
+describe('EuiPageHeader', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(_page_header.EuiPageHeader, {
+      pageTitle: "Page title",
+      iconType: "logoKibana",
+      description: "This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.",
+      rightSideItems: [(0, _react2.jsx)(_button.EuiButton, {
+        fill: true
+      }, "Add something"), (0, _react2.jsx)(_button.EuiButton, null, "Do something")]
+    }));
+    cy.get('h1.euiTitle').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/lib/components/portal/portal.a11y.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _button = require("../button");
+
+var _portal = require("./portal");
+
+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; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+var Portal = function Portal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isPortalVisible = _useState2[0],
+      setIsPortalVisible = _useState2[1];
+
+  var togglePortal = function togglePortal() {
+    setIsPortalVisible(!isPortalVisible);
+  };
+
+  var closePortal = function closePortal() {
+    setIsPortalVisible(false);
+  };
+
+  var customPortal;
+
+  if (isPortalVisible) {
+    customPortal = (0, _react2.jsx)(_portal.EuiPortal, null, (0, _react2.jsx)("div", null, "This is the portal. Click anywhere to close."), (0, _react2.jsx)(_button.EuiButton, {
+      onClick: closePortal
+    }, "Close portal"));
+  }
+
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButton, {
+    onClick: togglePortal
+  }, "View guide"), customPortal);
+};
+
+describe('EuiPortal', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(Portal, null));
+    cy.get('div[data-relative-to-header="above"]').should('not.exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after the portal is activated', function () {
+      cy.get('button[type="button"]').contains('View guide').realClick();
+      cy.get('div[data-euiportal="true"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/lib/components/tool_tip/tool_tip.js

@@ -33,19 +33,21 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _common = require("../common");
 
-var _portal = require("../portal");
+var _services = require("../../services");
 
-var _tool_tip_anchor = require("./tool_tip_anchor");
+var _react2 = require("../../services/react");
 
-var _tool_tip_arrow = require("./tool_tip_arrow");
+var _resize_observer = require("../observer/resize_observer");
+
+var _portal = require("../portal");
 
 var _tool_tip_popover = require("./tool_tip_popover");
 
-var _react2 = require("../../services/react");
+var _tool_tip_anchor = require("./tool_tip_anchor");
 
-var _services = require("../../services");
+var _tool_tip_arrow = require("./tool_tip_arrow");
 
-var _resize_observer = require("../observer/resize_observer");
+var _tool_tip_manager = require("./tool_tip_manager");
 
 var _react3 = require("@emotion/react");
 
@@ -144,9 +146,11 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       if (!_this.timeoutId) {
         _this.timeoutId = setTimeout(function () {
           (0, _react2.enqueueStateChange)(function () {
-            return _this.setState({
+            _this.setState({
               visible: true
             });
+
+            _tool_tip_manager.toolTipManager.registerTooltip(_this.hideToolTip);
           });
         }, delayToMsMap[_this.props.delay]);
       }
@@ -205,6 +209,8 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
             toolTipStyles: DEFAULT_TOOLTIP_STYLES,
             arrowStyles: undefined
           });
+
+          _tool_tip_manager.toolTipManager.deregisterToolTip(_this.hideToolTip);
         }
       });
     });

package/optimize/lib/components/tool_tip/tool_tip_manager.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolTipManager = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Manager utility that ensures only one tooltip is visible at a time
+ *
+ * UX rationale (primarily for mouse-only users):
+ * @see https://github.com/elastic/kibana/issues/144482
+ * @see https://github.com/elastic/eui/issues/5883
+ */
+var ToolTipManager = function ToolTipManager() {
+  var _this = this;
+
+  (0, _classCallCheck2.default)(this, ToolTipManager);
+  (0, _defineProperty2.default)(this, "toolTipsToHide", new Set());
+  (0, _defineProperty2.default)(this, "registerTooltip", function (hideCallback) {
+    _this.toolTipsToHide.forEach(function (hide) {
+      return hide();
+    });
+
+    _this.toolTipsToHide.clear();
+
+    _this.toolTipsToHide.add(hideCallback);
+  });
+  (0, _defineProperty2.default)(this, "deregisterToolTip", function (hideCallback) {
+    _this.toolTipsToHide.delete(hideCallback);
+  });
+};
+
+var toolTipManager = new ToolTipManager();
+exports.toolTipManager = toolTipManager;

package/optimize/lib/services/security/get_secure_rel_for_target.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSecureRelForTarget = void 0;
 
-var _url = require("../url");
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,18 +18,13 @@ var _url = require("../url");
  * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
  */
 var getSecureRelForTarget = function getSecureRelForTarget(_ref) {
-  var href = _ref.href,
-      _ref$target = _ref.target,
+  var _ref$target = _ref.target,
       target = _ref$target === void 0 ? '' : _ref$target,
       rel = _ref.rel;
-  var isElasticHref = !!href && (0, _url.isDomainSecure)(href);
   var relParts = !!rel ? rel.split(' ').filter(function (part) {
     return !!part.length && part !== 'noreferrer';
   }) : [];
-
-  if (!isElasticHref) {
-    relParts.push('noreferrer');
-  }
+  relParts.push('noreferrer');
 
   if (target.includes('_blank') && relParts.indexOf('noopener') === -1) {
     relParts.push('noopener');

package/optimize/lib/services/theme/hooks.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withEuiTheme = exports.useEuiTheme = void 0;
+exports.withEuiTheme = exports.useEuiTheme = exports.RenderWithEuiTheme = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -31,6 +31,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+/**
+ * Hook for function components
+ */
 
 var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
@@ -66,6 +69,10 @@ var useEuiTheme = function useEuiTheme() {
   }, [theme, colorMode, modifications]);
   return assembledTheme;
 };
+/**
+ * HOC for class components
+ */
+
 
 exports.useEuiTheme = useEuiTheme;
 
@@ -86,5 +93,18 @@ var withEuiTheme = function withEuiTheme(Component) {
   WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
 };
+/**
+ * Render prop alternative for complex class components
+ * Most useful for scenarios where a HOC may interfere with typing
+ */
+
+
+exports.withEuiTheme = withEuiTheme;
+
+var RenderWithEuiTheme = function RenderWithEuiTheme(_ref) {
+  var children = _ref.children;
+  var theme = useEuiTheme();
+  return children(theme);
+};
 
-exports.withEuiTheme = withEuiTheme;
+exports.RenderWithEuiTheme = RenderWithEuiTheme;

package/optimize/lib/services/theme/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "EuiThemeProvider", {
     return _provider.EuiThemeProvider;
   }
 });
+Object.defineProperty(exports, "RenderWithEuiTheme", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.RenderWithEuiTheme;
+  }
+});
 Object.defineProperty(exports, "buildTheme", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "72.2.0",
+  "version": "74.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/datagrid/controls/_data_grid_column_sorting.scss

@@ -20,23 +20,24 @@
   outline-offset: -$euiFocusRingSize;
 }
 
-.euiDataGridColumnSorting__orderButtons {
+.euiDataGridColumnSorting__name {
   @include euiBreakpoint('xs', 's') {
-    padding-left: $euiSizeXS;
+    padding-right: $euiSizeXS;
   }
-  padding-left: $euiSizeL;
+  padding-right: $euiSizeL;
+}
 
-  .euiDataGridColumnSorting__order {
-    @include euiBreakpoint('xs', 's') {
-      min-width: unset;
-    }
-    min-width: 200px;
+.euiDataGridColumnSorting__order {
+  @include euiBreakpoint('xs', 's') {
+    min-width: unset;
+  }
+  min-width: 200px;
+
+  .euiButtonGroup__buttons {
     border: none;
+  }
 
-    // Hack to overwrite some nested, unreachable component code with button groups
-    button {
-      // stylelint-disable-next-line declaration-no-important
-      font-size: $euiFontSizeXS !important;
-    }
+  .euiButtonGroupButton {
+    font-size: $euiFontSizeXS;
   }
 }

package/src/components/index.scss

@@ -1,7 +1,6 @@
 // Components
 
 @import 'accordion/index';
-@import 'basic_table/index';
 @import 'button/index';
 @import 'collapsible_nav/index';
 @import 'color_picker/index';