impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Toast/Toast.styles.scss

@@ -1,66 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-snackbar {
-  .MuiPaper-root {
-    height: 51px;
-    text-align: center;
-    justify-content: center;
-    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-
-    &::after {
-      content: " ";
-      height: 4px;
-      position: absolute;
-      background: tomato;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 0 0 4px 4px;
-    }
-  }
-  .css-1arijsr-MuiSnackbar-root {
-    z-index: 999999;
-  }
-
-  .MuiSnackbarContent-message {
-    font-size: 14px;
-    font-weight: $normalFontWeight;
-  }
-
-  &.ia-snackbar-success {
-    .MuiPaper-root {
-      background: $successIconColor;
-      &::after {
-        background: $successToastStroke;
-      }
-    }
-  }
-  &.ia-snackbar-info {
-    .MuiPaper-root {
-      background: $primaryColor;
-      &::after {
-        background: #687af1;
-      }
-    }
-  }
-  &.ia-snackbar-warning {
-    .MuiPaper-root {
-      background: $warningToastText;
-      &::after {
-        background: $warningToastStroke;
-      }
-    }
-    .MuiSnackbarContent-message {
-      color: $darkColor;
-    }
-  }
-  &.ia-snackbar-error {
-    .MuiPaper-root {
-      background: $redBadge;
-      &::after {
-        background: #ed9998;
-      }
-    }
-  }
-}

package/src/components/Toast/index.js

@@ -1,35 +0,0 @@
-import React from "react";
-import Snackbar from "@mui/material/Snackbar";
-
-import "./Toast.styles.scss";
-
-export const Toast = ({
-  isOpen = true,
-  position = "top-right",
-  message = "This is a toast",
-  variant = "success",
-
-  // autoHideDuration is dependent on onClose because it calls onClose after the duration is over
-  onClose,
-  autoHideDuration = 5000,
-  zIndex = 1400,
-  ...args
-}) => {
-  const [vertical, horizontal] = position.split("-");
-
-  return (
-    <Snackbar
-      {...args}
-      anchorOrigin={{ vertical, horizontal }}
-      className={`ia-styles ia-snackbar ia-snackbar-${variant}`}
-      open={isOpen}
-      onClose={onClose}
-      autoHideDuration={autoHideDuration}
-      message={message}
-      key={vertical + horizontal}
-      sx={{
-        zIndex: zIndex,
-      }}
-    />
-  );
-};

package/src/components/Tooltip/Tooltips.styles.scss

@@ -1,111 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact-tooltip-container {
-  .MuiTooltip-tooltip {
-    font-family: $fontFamily;
-    font-size: 14px;
-    line-height: 21px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 8px;
-    border-radius: 8px;
-    min-height: 30px;
-    // min-width: 50px;
-    box-shadow: 0px 0px 12px 0px #1a277c24;
-    word-break: break-word;
-    white-space: pre-wrap;
-    text-align: left;
-  }
-
-  .MuiTooltip-arrow {
-    margin-bottom: -0.65em !important;
-  }
-}
-
-.primary-tooltip {
-  .MuiTooltip-tooltip {
-    background: $primaryColor;
-    color: $whiteColor;
-  }
-
-  .MuiTooltip-arrow {
-    color: $primaryColor;
-  }
-}
-
-.secondary-tooltip {
-  .MuiTooltip-tooltip {
-    background: $whiteColor;
-    color: $primaryColor;
-  }
-
-  .MuiTooltip-arrow {
-    color: $whiteColor;
-  }
-}
-
-.tertiary-tooltip {
-  .MuiTooltip-tooltip {
-    background: $offDarkColor;
-    color: $offWhiteColor;
-  }
-
-  .MuiTooltip-arrow {
-    color: $offDarkColor;
-  }
-}
-
-// Feature tooltip: gradient border, gradient background, title + description (matches "New feature" design)
-.feature-tooltip {
-  .MuiTooltip-tooltip {
-    padding: 0;
-    min-height: unset;
-    border-radius: 12px;
-    background: linear-gradient(274.01deg, #fdf0ec 0.91%, #fcf8ea 103.39%)
-        padding-box,
-      linear-gradient(270deg, #687af1 0%, #ed7955 100%) border-box;
-    border: 1px solid transparent;
-    box-shadow: 0 0 20px rgba(104, 122, 241, 0.2),
-      0 0 40px rgba(237, 121, 85, 0.12);
-    color: #1e293b;
-    font-size: 14px;
-    line-height: 1.4;
-    max-width: 280px;
-  }
-
-  .impact-tooltip-feature-content {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 12px 16px;
-  }
-
-  .impact-tooltip-feature-title {
-    font-weight: 700;
-    font-size: 15px;
-    color: #0f172a;
-    line-height: 1.3;
-  }
-
-  .impact-tooltip-feature-description {
-    font-weight: 400;
-    font-size: 14px;
-    color: #1e293b;
-    line-height: 1.45;
-  }
-
-  .MuiTooltip-arrow {
-    color: #fdf0ec;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
-  }
-}
-
-// tooltip wrapper
-//MuiTooltip-popper MuiTooltip-popperInteractive MuiTooltip-popperArrow css-1avkpwt-MuiPopper-root-MuiTooltip-popper MuiPopper-root
-
-//inside tooltip class used
-//MuiTooltip-tooltip MuiTooltip-tooltipArrow MuiTooltip-tooltipPlacementTop css-1k51tf5-MuiTooltip-tooltip
-
-//tool-tip arrow
-//MuiTooltip-arrow css-kudwh-MuiTooltip-arrow

package/src/components/Tooltip/index.js

@@ -1,68 +0,0 @@
-import React, { forwardRef } from "react";
-import MuiTooltip from "@mui/material/Tooltip";
-import "./Tooltips.styles.scss";
-
-export const Tooltip = forwardRef((props, ref) => {
-  const {
-    title,
-    description,
-    orientation = "top",
-    variant = "primary-tooltip",
-    children,
-    isHoverEnabled = true,
-    className,
-    ...args
-  } = props;
-
-  const getVariant = (variantName) => {
-    switch (variantName) {
-      case "secondary":
-        return "secondary-tooltip";
-      case "tertiary":
-        return "tertiary-tooltip";
-      case "feature":
-        return "feature-tooltip";
-      default:
-        return "primary-tooltip";
-    }
-  };
-
-  const tooltipTitle =
-    variant === "feature" ? (
-      <span className="impact-tooltip-feature-content">
-        <span className="impact-tooltip-feature-title">{title}</span>
-        {description ? (
-          <span className="impact-tooltip-feature-description">
-            {description}
-          </span>
-        ) : null}
-      </span>
-    ) : (
-      title
-    );
-
-  return (
-    <MuiTooltip
-      ref={ref}
-      title={tooltipTitle}
-      placement={orientation}
-      arrow
-      classes={{
-        popper: `impact-tooltip-container ${getVariant(variant)} ${
-          className ?? ""
-        }`.trim(),
-      }}
-      disableFocusListener={!isHoverEnabled}
-      disableHoverListener={!isHoverEnabled}
-      disableTouchListener={!isHoverEnabled}
-      PopperProps={{
-        sx: {
-          zIndex: 9999,
-        },
-      }}
-      {...args}
-    >
-      {children}
-    </MuiTooltip>
-  );
-});

package/src/components/common/HelperText/HelperText.styles.scss

@@ -1,18 +0,0 @@
-@import "../../../styles/index.scss";
-
-.MuiFormHelperText-root {
-  font-family: $fontFamily !important;
-  color: $inputInfoColor !important;
-  background: url("../../../assets/info-icon.svg") no-repeat;
-  background-position: 0 center;
-  margin-left: 0 !important;
-  padding-left: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  &.Mui-error {
-    color: $destructiveBg !important;
-    background: url("../../../assets/info-red.svg") no-repeat;
-    background-position: 0 center;
-  }
-}

package/src/components/common/HelperText/index.js

@@ -1,44 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import MuiFormHelperText from "@mui/material/FormHelperText";
-import { Tooltip } from "../../Tooltip";
-import "./HelperText.styles.scss";
-
-export const HelperText = ({ helper, error, className = "", minWidth }) => {
-  const textRef = useRef(null);
-  const [isTruncated, setIsTruncated] = useState(false);
-
-  useEffect(() => {
-    if (textRef.current) {
-      const element = textRef.current;
-      setIsTruncated(element.scrollWidth > element.clientWidth);
-    }
-  }, [helper]);
-
-  if (!helper) return null;
-
-  const textElement = (
-    <MuiFormHelperText
-      ref={textRef}
-      error={error}
-      className={`ia-select-helper-text ${className} ${
-        error ? "Mui-error" : ""
-      }`}
-      style={{
-        width: minWidth || "240px",
-      }}
-    >
-      {helper}
-    </MuiFormHelperText>
-  );
-
-  // tooltip visible only when text is truncated
-  return isTruncated ? (
-    <Tooltip title={helper} variant="tertiary" orientation="right">
-      {textElement}
-    </Tooltip>
-  ) : (
-    textElement
-  );
-};
-
-export default HelperText;

package/src/components/common/MentionEditor/MentionEditor.styles.scss

@@ -1,301 +0,0 @@
-@import "../../../styles/index.scss";
-
-.ProseMirror-focused {
-  outline: none;
-}
-
-.tiptap {
-  :first-child {
-    margin-top: 0;
-  }
-
-  p {
-    margin: 0;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    hyphens: auto;
-  }
-
-  /* Heading styles */
-  h1 {
-    font-size: 2em;
-    font-weight: 600;
-    margin: 1em 0 0.5em;
-    color: #1a202c;
-  }
-
-  h2 {
-    font-size: 1.5em;
-    font-weight: 600;
-    margin: 0.83em 0 0.5em;
-    color: #1a202c;
-  }
-
-  h3 {
-    font-size: 1.17em;
-    font-weight: 600;
-    margin: 0.67em 0 0.5em;
-    color: #1a202c;
-  }
-
-  h4 {
-    font-size: 1em;
-    font-weight: 600;
-    margin: 0.5em 0;
-    color: #1a202c;
-  }
-
-  h5 {
-    font-size: 0.83em;
-    font-weight: 600;
-    margin: 0.5em 0;
-    color: #1a202c;
-  }
-
-  h6 {
-    font-size: 0.67em;
-    font-weight: 600;
-    margin: 0.5em 0;
-    color: #1a202c;
-  }
-
-  /* Text formatting styles */
-  strong {
-    font-weight: 600;
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  s {
-    text-decoration: line-through;
-    text-decoration-thickness: 0.1em;
-    color: #666666;
-  }
-
-  .highlight {
-    background-color: #fef3c7 !important;
-    border-radius: 4px;
-    padding: 2px 4px;
-    margin: 0 2px;
-  }
-
-  mark {
-    background-color: #fef3c7;
-    border-radius: 4px;
-    padding: 2px 4px;
-    margin: 0 2px;
-  }
-
-  a {
-    color: #2b6cb0;
-    text-decoration: none;
-    border-bottom: 1px solid #2b6cb0;
-    transition: all 0.2s ease;
-
-    &:hover {
-      color: #1a4971;
-      border-bottom-color: #1a4971;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 4px;
-    margin: 0.5em 0;
-  }
-
-  /* Mention styles */
-  .mention {
-    background-color: #f0f4f8;
-    border-radius: 4px;
-    box-decoration-break: clone;
-    color: #2b6cb0;
-    font-weight: 500;
-    padding: 2px 6px;
-    text-decoration: none;
-    transition: background-color 0.2s ease;
-    white-space: nowrap;
-
-    &:hover {
-      background-color: #e2e8f0;
-      cursor: pointer;
-    }
-  }
-
-  /* Active state styles */
-  .is-active {
-    background-color: #f0f4f8;
-  }
-
-  /* List styles */
-  ul,
-  ol {
-    padding-left: 1.2em;
-    margin: 0.5em 0;
-  }
-
-  ul li,
-  ol li {
-    margin: 0.2em 0;
-    padding-left: 0;
-    line-height: 1.2;
-
-    p {
-      margin: 0; /* Remove paragraph margins inside list items */
-      display: inline-block; /* Better handling of nested content */
-    }
-  }
-
-  ul li {
-    list-style-type: disc;
-  }
-
-  ol li {
-    list-style-type: decimal;
-  }
-
-  /* Nested list styles */
-  ul ul,
-  ol ol,
-  ul ol,
-  ol ul {
-    margin: 0.2em 0 0.2em 0.5em; /* Add indentation for nested lists */
-  }
-
-  ul ul li {
-    list-style-type: circle;
-  }
-
-  ul ul ul li {
-    list-style-type: square;
-  }
-
-  ol ol li {
-    list-style-type: lower-alpha;
-  }
-
-  ol ol ol li {
-    list-style-type: lower-roman;
-  }
-
-  /* Active list styles */
-  ul[data-type="bulletList"],
-  ol[data-type="orderedList"] {
-    li {
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        left: -1em;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  .highlight {
-    background-color: #fef3c7;
-    border-radius: 2px;
-    padding: 0 2px;
-  }
-
-  /* Code block styles */
-  code {
-    background-color: #f7fafc;
-    border-radius: 4px;
-    padding: 0.2em 0.4em;
-    font-family: monospace;
-  }
-
-  /* Blockquote styles */
-  blockquote {
-    border-left: 3px solid #e2e8f0;
-    margin: 0.5em 0;
-    padding-left: 1em;
-    color: #4a5568;
-  }
-}
-
-/* Character count */
-.character-count {
-  align-items: center;
-  color: var(--gray-5);
-  display: flex;
-  font-size: 0.75rem;
-  gap: 0.5rem;
-  margin: 1.5rem;
-
-  svg {
-    color: var(--purple);
-  }
-
-  &--warning,
-  &--warning svg {
-    color: var(--red);
-  }
-}
-
-// main container styles
-
-.tiptap-editor {
-  width: 100%;
-  flex: 1;
-  resize: none;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  padding: 0;
-  background: transparent;
-  line-height: 160%;
-  max-height: 130px;
-  min-height: 20px; // Ensure minimum height for single line
-  font-family: $fontFamily;
-  font-weight: 400;
-  color: $mainFontColor;
-  transition: all 0.2s ease-in-out;
-  overflow-y: auto;
-
-  &::placeholder {
-    color: $lightGrayColor;
-  }
-
-  .ProseMirror {
-    outline: none;
-    padding: 0px !important;
-    min-height: 40px;
-    max-height: 100px;
-    overflow-y: auto;
-    word-wrap: break-word;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 2px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(0, 0, 0, 0.3);
-    }
-  }
-}
-
-.single-line {
-  .tiptap {
-    // min-height: 28px;
-    line-height: 24px;
-  }
-}