fix: add direct compiled css & change imports

src/components/ActionPanel/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import Button from '../Button';
-import './styles.scss';
+import './styles.css';
 
 const ActionPanel = React.forwardRef((props, ref) => {
   const { title, className, size, onClose, children, actionButton, isModal, closeIcon, cancelText } = props;

src/components/ActionPanel/styles.css

@@ -0,0 +1,140 @@
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.8;
+  }
+}
+.aui--action-panel {
+  min-width: 300px;
+  min-height: 100px;
+  z-index: 1060;
+  border-radius: 2px;
+  background-color: #fff;
+}
+.aui--action-panel.action-modal {
+  top: 30px;
+  background-color: #fff;
+  margin: 30px auto;
+  border: 0;
+}
+.aui--action-panel.action-modal .aui--action-panel-body {
+  max-height: calc(100vh - 60px - 48px);
+  overflow: auto;
+}
+.aui--action-panel.is-small {
+  width: 500px;
+}
+.aui--action-panel.is-medium {
+  width: 700px;
+}
+.aui--action-panel.is-large {
+  width: 1000px;
+}
+.aui--action-panel-header {
+  height: 48px;
+  color: #333;
+  padding: 12px;
+  padding-left: 18px;
+  border-bottom: 1px solid #e8e8e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #e8e8e8;
+}
+.aui--action-panel-header .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 18px;
+  font-weight: 700;
+  color: #5a5a5a;
+}
+.aui--action-panel-header svg {
+  fill: #5a5a5a;
+}
+.aui--action-panel-header .close-button:not(.close-svg-icon).aui--button {
+  background-color: transparent;
+  color: #fff;
+}
+.aui--action-panel-header .close-button:not(.close-svg-icon).aui--button > div {
+  display: inline-flex;
+}
+.aui--action-panel-header .close-icon {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-image: url('../../styles/icons/close.svg');
+}
+.aui--action-panel-header .aui--button {
+  border: 0;
+  outline: 0;
+  margin: 0 0 0 6px;
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #006dcc;
+}
+.aui--action-panel-header.has-actions {
+  background-color: #006dcc;
+  color: #fff;
+  border: 0;
+}
+.aui--action-panel-header.has-actions .title {
+  color: #fff;
+}
+.aui--action-panel-header.has-actions .actions .aui--button.close-button:hover {
+  color: #838383;
+  background-color: #fff;
+}
+.aui--action-panel-header.has-actions .actions .aui--button:not(.close-button) {
+  color: #006dcc;
+  background-color: #fff;
+}
+.aui--action-panel-header.has-actions .actions .aui--button:active,
+.aui--action-panel-header.has-actions .actions .aui--button:active:hover {
+  background-color: #e8e8e8;
+}
+.aui--action-panel-header.has-actions .actions .aui--button svg {
+  fill: #fff;
+}
+.aui--action-panel-header.has-actions .actions .aui--button:hover {
+  background-color: #fff;
+}
+.aui--action-panel-header.has-actions .actions .aui--button:hover svg {
+  fill: #006dcc;
+}
+.aui--action-panel-body {
+  padding: 30px;
+  border: 1px solid #e8e8e8;
+  border-top: 0;
+}
+
+.aui--action-panel-backdrop {
+  position: fixed;
+  display: flex;
+  z-index: 1040;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #838383;
+  width: 100%;
+  opacity: 0.8;
+  animation: fadein 0.2s;
+}
+
+.aui--action-panel-modal-wrapper {
+  position: fixed;
+  width: 100%;
+  z-index: 1040;
+  display: flex;
+  align-content: center;
+  top: 0;
+  left: 0;
+  animation: fadein 0.2s;
+}

src/components/Alert/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { expandDts } from '../../lib/utils';
-import './styles.scss';
+import './styles.css';
 
 const Alert = ({ type, children, dts }) => (
   <div data-testid="alert-wrapper" className={`alert-component alert-component-${type}`} {...expandDts(dts)}>

src/components/Alert/styles.css

@@ -0,0 +1,18 @@
+.alert-component {
+  color: #fff;
+  font-size: 12px;
+  line-height: 20px;
+  padding: 10px;
+}
+.alert-component-success {
+  background-color: #5bb75b;
+}
+.alert-component-info {
+  background-color: #49afcd;
+}
+.alert-component-warning {
+  background-color: #faa732;
+}
+.alert-component-danger {
+  background-color: #da4f49;
+}

src/components/AlertInput/index.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Popover from '../Popover';
 import { popoverPlacements } from '../Popover/constants';
-import './styles.scss';
+import './styles.css';
 
 export const baseClass = 'aui--alert-input';
 

src/components/AlertInput/styles.css

@@ -0,0 +1,64 @@
+.aui--alert-input {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 2px;
+  padding: 4px 5px;
+  position: relative;
+}
+.aui--alert-input.aui--alert-input--focused {
+  border-color: #ababab;
+}
+.aui--alert-input .aui--alert-input__input {
+  flex-grow: 1;
+  background-color: #fff;
+  border: 0;
+  width: 100%;
+  padding: 0;
+}
+.aui--alert-input .aui--alert-input__input:focus {
+  outline: none;
+}
+.aui--alert-input.success {
+  border-color: #5bb75b;
+}
+.aui--alert-input.info {
+  border-color: #49afcd;
+}
+.aui--alert-input.warning {
+  border-color: #faa732;
+}
+.aui--alert-input.error {
+  border-color: #da4f49;
+}
+.aui--alert-input .aui--alert-input__addon {
+  color: #d3d3d3;
+}
+.aui--alert-input .aui--alert-input__addon:first-child {
+  margin-right: 2px;
+}
+.aui--alert-input .aui--alert-input__addon:last-child {
+  margin-left: 2px;
+}
+.aui--alert-input.aui--alert-input--disabled {
+  background-color: #e8e8e8;
+}
+.aui--alert-input.aui--alert-input--disabled .aui--alert-input__input:disabled {
+  background-color: #e8e8e8;
+}
+.aui--alert-input.aui--alert-input--disabled .aui--alert-input__addon {
+  color: #ababab;
+}
+
+.aui--alert-input__popover {
+  border-radius: 4px;
+  box-shadow: none;
+  font-size: 11px;
+}
+.aui--alert-input__popover .popover-content {
+  color: inherit;
+  padding: 5px 10px;
+  width: auto;
+  font-weight: 700;
+}

src/components/Avatar/index.jsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import './styles.scss';
+import './styles.css';
 
 const baseClass = 'avatar-component';
 const Avatar = ({ color, givenName, tooltip, image, surname }) => (

src/components/Avatar/styles.css

@@ -0,0 +1,45 @@
+.avatar-component {
+  background-color: #ababab;
+  border-radius: 50%;
+  color: #fff;
+  cursor: default;
+  display: inline-block;
+  font-size: 15px;
+  font-weight: 700;
+  height: 35px;
+  line-height: 36px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  width: 35px;
+}
+.avatar-component-image-placeholder {
+  background-color: transparent;
+}
+.avatar-component-image {
+  border-radius: 50%;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+.avatar-component-blue {
+  background-color: #006dcc;
+}
+.avatar-component-green {
+  background-color: #5bb75b;
+}
+.avatar-component-red {
+  background-color: #da4f49;
+}
+.avatar-component-orange {
+  background-color: #faa732;
+}
+.avatar-component-cyan {
+  background-color: #49afcd;
+}
+.avatar-component-black {
+  background-color: #5a5a5a;
+}

src/components/BorderedWell/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './styles.scss';
+import './styles.css';
 
 const BorderedWell = ({ children }) => (
   <div data-testid="borderedwell-wrapper" className="borderedwell-component">

src/components/BorderedWell/styles.css

@@ -0,0 +1,4 @@
+.borderedwell-component {
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+}

src/components/Breadcrumb/Node/index.jsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import './styles.scss';
+import './styles.css';
 
 const BreadcrumbNode = ({ isLast, node, onClick }) => {
   const className = classnames('aui--breadcrumb-node', { 'aui--breadcrumb-node-link': !isLast });

src/components/Breadcrumb/Node/styles.css

@@ -0,0 +1,8 @@
+.aui--breadcrumb-node-link {
+  cursor: pointer;
+}
+.aui--breadcrumb-node-link:hover,
+.aui--breadcrumb-node-link:active {
+  color: #0492ba;
+  text-decoration: underline;
+}

src/components/Breadcrumb/index.jsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import BreadcrumbNode from './Node';
-import './styles.scss';
+import './styles.css';
 
 const Breadcrumb = ({ rootNode, divider, nodes, onClick, disabled }) => {
   const baseClass = 'aui--breadcrumb';

src/components/Breadcrumb/styles.css

@@ -0,0 +1,16 @@
+.aui--breadcrumb {
+  color: #49afcd;
+  cursor: default;
+  font-size: 12px;
+  height: 10px;
+  line-height: 10px;
+  display: flex;
+}
+.aui--breadcrumb .aui--breadcrumb-node-divider {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.aui--breadcrumb.aui--breadcrumb--disabled {
+  color: #ababab;
+  pointer-events: none;
+}

src/components/Button/index.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Spinner from '../Spinner';
 import { expandDts, invariant } from '../../lib/utils';
-import './styles.scss';
+import './styles.css';
 
 export const buttonSharedClasses = ({ size, inverse, variant, fullWidth, round, icon, children, disabled, color }) => ({
   [`aui-${size}`]: sizes.includes(size) && variant !== 'link',