pixel-react-excel-sheet 1.2.0

package/src/StyleGuide/ColorPalette/types.ts

@@ -0,0 +1,19 @@
+export interface ColorBoxProps {
+  name: string;
+  colorCode: string;
+  opacity?: number;
+  dropShadow?: string;
+  border?: string;
+  variable?: string;
+}
+
+export interface Color {
+  name: string;
+  colorCode: string;
+  opacity?: number;
+  dropShadow?: string;
+  border?: string;
+  variable?: string;
+}
+
+export type ColorPaletteType = Color[];

package/src/StyleGuide/Typography/Typography.scss

@@ -0,0 +1,99 @@
+@use '../../assets/styles/fonts';
+
+.typography-container {
+  .typography-header {
+    & div {
+      @extend .font2Xl;
+      font-weight: 600;
+    }
+    & span {
+      @extend .fontSm;
+      font-weight: 400;
+      color: var(--tooltip-bg-color); // need to change color #7A7A7A
+    }
+  }
+}
+.font-display {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.font-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+}
+
+.font-left {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-color);
+  padding: 10px;
+  gap: 10px;
+
+  .font-name {
+    @extend .fontLg;
+    font-weight: 600;
+  }
+
+  .font-sample {
+    @extend .font-size-80;
+    font-weight: 700;
+  }
+
+  .font-characters {
+    @extend .font2Xl;
+    font-weight: 400;
+    line-height: 36px;
+    letter-spacing: 0.16em;
+    white-space: pre;
+  }
+}
+
+.font-right {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px;
+  gap: 20px;
+
+  .font-right-section {
+    display: flex;
+    align-items: center;
+
+    .font-sample-large {
+      font-size: 40px;
+      margin-right: 10px;
+    }
+
+    // Apply specific font weight different sections
+    &.bold {
+      @extend .font2Xl;
+      font-weight: 700;
+    }
+    &.semi-bold {
+      @extend .font2Xl;
+      font-weight: 600;
+    }
+    &.regular {
+      @extend .font2Xl;
+      font-weight: 400;
+    }
+
+    .font-info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      // Specific styling for the font-size part
+      .font-size {
+        @extend .fontLg;
+        font-weight: 400;
+        color: var(--tooltip-bg-color);
+      }
+    }
+  }
+}

package/src/StyleGuide/Typography/Typography.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from './Typography';
+
+const meta: Meta<typeof Typography> = {
+  title: 'StyleGuide/Typography',
+  component: Typography,
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Typography>;
+
+export const AllFonts: Story = {
+  args: {},
+};
+
+export default meta;

package/src/StyleGuide/Typography/Typography.tsx

@@ -0,0 +1,60 @@
+import './Typography.scss';
+
+const Typography = () => {
+  return (
+    <div className="typography-container">
+      <div className="typography-header">
+        <div>_Typography</div>
+        <span>
+          Our design system leverages a purposeful set of typography styles.
+          We'he stress-tested this typographic scale across dozens of projects
+          to make sure it's robust enough to use across (almost) any project,
+          while remaining as accessible as possible for everyone.
+        </span>
+      </div>
+      <div className="font-display">
+        <div className="font-row">
+          <div className="font-left">
+            <div className="font-name">Poppins</div>
+            <div className="font-sample">Aa</div>
+            <div className="font-characters">
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ
+              <br />
+              abcdefghijklmnopqrstuvwxyz
+              <br />
+              0123456789
+              <br />
+              !@#$%^&*()
+            </div>
+          </div>
+
+          <div className="font-right">
+            <div className="font-right-section bold">
+              <div className="font-sample-large">Aa</div>
+              <div className="font-info">
+                <span>Bold</span>
+                <div className="font-size">font size: 12px = 0.75rem</div>
+              </div>
+            </div>
+            <div className="font-right-section semi-bold">
+              <div className="font-sample-large">Aa</div>
+              <div className="font-info">
+                <span>SemiBold</span>
+                <div className="font-size">font size: 12px = 0.75rem</div>
+              </div>
+            </div>
+            <div className="font-right-section regular">
+              <div className="font-sample-large">Aa</div>
+              <div className="font-info">
+                <span>Regular</span>
+                <div className="font-size">font size: 12px = 0.75rem</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Typography;

package/src/StyleGuide/Typography/TypographyList.ts

@@ -0,0 +1,3 @@
+export const fontData = [
+  { name: 'Poppins', fontSizePx: '12px', fontSizeRem: '0.75rem' },
+];

package/src/StyleGuide/Typography/types.ts

@@ -0,0 +1,9 @@
+export interface FontData {
+  name: string;
+  fontSizePx: string;
+  fontSizeRem: string;
+}
+
+export interface TypographyProps {
+  fonts: FontData[];
+}

package/src/assets/Themes/BaseTheme.scss

@@ -0,0 +1,207 @@
+$base-theme: (
+  button-bg-color: #f6ebff,
+  brand-color: #71347b,
+  text-color: #1e161f,
+  description-text: #7a7a7a,
+  click-able-text-color: #71347b,
+  icons-default-color: #71347b,
+  border-color: #f0e7f4,
+  disable-color: #71347b80,
+  hover-color: #f7ebff,
+  pop-up-background-blur: #14041c1a,
+  slider-table-color: #d4b0e426,
+  drawer-footer-bg: #ffffff,
+  drawer-footer-border: #f0e7f4,
+  text-bg-highlight: #f5fb00,
+  tooltip-bg-color: #1e161f,
+  tooltip-text-color: #ffffff,
+  toggle-strip-color: #cfd1e2,
+  toggle-strip-active: #71347b,
+  toggle-strip-shadow: #00000040,
+  toggle-button-bg-color: #ffffff,
+  toggle-disable-icon-color: #767994,
+  text-area-default-color: #747474,
+  add-icon-hover-color: #431b4a,
+  arrow-button-bg-color: #ffffff,
+  arrows-button-border-color: #ded1e5,
+  overlay-bg: #1e161f1a,
+  chip-fill-color: #f9d5ff,
+  chip-text-color: #1e161f,
+  file-drop-zone-default-fill-color: #71347b1a,
+  file-drop-zone-default-text-color: #1e161f,
+  file-drop-zone-selected-fill-color: #71347b33,
+  file-drop-zone-selected-text-color: #1e161f,
+  icon-color: #71347b,
+  default-icon-color: #a3a3a3,
+  tree-connecting-lines-color: #d7b5e3,
+  primary-button-color:
+    linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%),
+  primary-button-hover:
+    linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%),
+  primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%),
+  primary-button-text-color: #ffffff,
+  primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%),
+  secondary-button-color-text:
+    linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%),
+  secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%),
+  secondary-button-text-color: #46164d,
+  secondary-button-hover:
+    linear-gradient(179.06deg, #71347b0d 3.49%, #46164d0d 99.22%),
+  tertiary-button-color:
+    linear-gradient(179.06deg, #71347b0d 3.49%, #46164d0d 99.22%),
+  tertiary-button-hover:
+    linear-gradient(179.06deg, #71347b1a 3.49%, #46164d1a 99.22%),
+  delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%),
+  delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%),
+  delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%),
+  delete-button-disable:
+    linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%),
+  warning-button-color:
+    linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%),
+  warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%),
+  error: #e42525,
+  drawer-title-color: #252c37,
+  toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%),
+  error_light: #e42525,
+  ff-success: #079455,
+  ff-warning: #f79009,
+  ff-header-text-color: #fdfaff,
+  ff-header-submenu-text-color: #666468,
+  ff-header-submenu-highlight-text-color: #170328,
+
+  expandable-menu-default-bg: #fdfaff,
+  expandable-menu-option-bg: #610b861a,
+  file-dropzone-default-color: #71347b1a,
+  file-dropzone-selected-color: #71347b33,
+  file-details-container-shadow: #1e161f29,
+  file-details-bg: #ffffff,
+  ff-mini-modal-border: #ffffff,
+  ff-mini-modal-box-shadow: #3713553d,
+  ff-mini-modal-arrow-shadow: #00000040,
+
+  ff-error-light: #e42525,
+  ff-chips-fill-color: #f9d5ff,
+  ff-chips-blur-color: #575757,
+  ff-chip-bg: #ffffff,
+  ff-chip-text-color: #1e161f,
+  ff-mini-modal-footer-background: #aeb0c0,
+  input-default-border-color: #a3a3a3,
+  input-hover-border-color: #1e161f,
+  input-default-label-color: #747474,
+  input-label-bg-color: #ffffff,
+  input-active-text-color: #71347b,
+  input-error-text-color: #e42525,
+  tabs-label-default-color: #7a7a7a,
+  tabs-label-active-color: #71347b,
+  tabs-border-color: #f1ebf2,
+  tabs-bg-color: #ede6f2,
+  tab-bg-color: #ffffff,
+  toast-close-icon-wrapper-bg: #fafafa,
+  toaster-boxshadow: #1e161f3d,
+  toaster-success-border: linear-gradient(#07945566, #00693a66),
+  toaster-warning-border: linear-gradient(#f7900966, #d67a0066),
+  toaster-info-border: linear-gradient(#2591e466, #1769b066),
+  toaster-danger_confirm-border: linear-gradient(#e4252566, #c9000066),
+  option-card-border-color: #ded1e5,
+  option-card-bg-color: #ffffff,
+  checkbox-bg-color: #fbfdff,
+  checkbox-border-color: #b5b5b5,
+  checkbox-partial-color: #ffffff,
+  checkbox-hover-color: #f7edff,
+  multi-select-border: #a3a3a380,
+  multi-select-label-bg: #ffffff,
+  text-color-light: #1e161f80,
+  radio-button-border: #b5b5b5,
+  radio-button-hover: #d3d3d3,
+  menu-variant-dark-icon-color: #ffffff,
+  menu-option-icon-color: #ffffff,
+  menu-option-icon-clicked: #71347b,
+  delete-text-color: #c50303,
+
+  status-success-bg-color: #c6efcd,
+  status-success-text-color: #016102,
+  status-warning-bg-color: #ffe380,
+  status-warning-text-color: #ff8b00,
+  status-rejected-bg-color: #f7d9d9,
+  status-rejected-text-color: #c60202,
+  status-skipped-bg-color: #c4c3c3,
+  status-warning-hover-bg-color: #fcd8ac,
+  status-percentage-growth-bg-color: #ecedf8,
+
+  status-button-bg-passed: #c6efcd,
+  status-button-bg-failed: #f7d9d9,
+  status-button-bg-running: #ecedf8,
+  status-button-bg-skipped: #c4c3c3,
+  status-button-bg-warning: #ffb803,
+  status-button-bg-terminated: #f7d9d9,
+  status-button-bg-partiallyExecuted: #dee7f1,
+  status-button-bg-aborted: #f7d9d9,
+  status-button-bg-notExecuted: #f7d9d9,
+  status-button-text-passed: #016102,
+  status-button-text-failed: #c50303,
+  status-button-text-running: #434db8,
+  status-button-text-skipped: #3c3838,
+  status-button-text-warning: #ffffff,
+  status-button-text-terminated: #c50303,
+  status-button-text-partiallyExecuted: #0d69d4,
+  status-button-text-aborted: #c50303,
+  status-button-text-notExecuted: #c50303,
+
+  // TODO:: Need to change the color code values of below 7 color (N/A in DS)
+  ff-select-option-border-color: #ded1e5,
+  ff-select-option-wrapper-box-shadow: #592f7c33,
+  ff-select-background-color: #ffffff,
+  ff-select-scroll-thumb-color: #d9d9d9,
+  ff-select-scroll-track-bg: #f1f1f1,
+  ff-select-scroll-thumb-hover: #b8b8b8,
+  ff-select-text-color: #14041c,
+  ff-select-option-hover-color: #f7ebff,
+  ff-select-default-color: #747474,
+  ff-select-border-color: #a3a3a3,
+  ff-select-brand-color: #71347b,
+  ff-select-text-hover-color: #1e161f,
+  ff-search-filed-clear-text: #71347b,
+  ff-search-filed-placeholder-text: #a3a3a3,
+  ff-search-filed-close-Icon: #14041c,
+  ff-paper-background-color: #f5f5f5,
+  ff-paper-dark-background-color: #d1c4e9,
+
+  primary-icon-color: #ffffff,
+  secondary-icon-color: #71347b,
+  disabled-primary-color: #f9f9f9,
+  background-modal-color: #1111,
+  license_expireSoon_color: #ba7422,
+  license_active_color: #268735,
+  license_expired_color: #e34242,
+  license_header_text_color: #592f7c,
+  license_active_status_color: #518e18,
+  license_expired_status_color: #ab3425,
+  pie-chart-border-color: #b6b6b6,
+  modal-header-text-color: #ffc600,
+  switch-license-text-color: #61296a,
+  switch-license-header-text-color: #610b86,
+  dotted-border-color: #000000,
+  select-license-header-text-color: #5f2868,
+  in-active-button-color: #808080,
+  button-background-gradient-color: #9c1ebb,
+  details-page-value-color: #808080,
+  // TODO:: Need to change the color code values of below 7 color (N/A in DS)
+  ff-machine-input-field-border-color: #f1ebf2,
+  ff-machine-input-field-text-color: #1e161f,
+  ff-connecting-branch-color: #71347b,
+  ff-connecting-branch-modal-header: #71347b,
+  ff-connecting-branch-modal-border: #e0e0e0,
+  ff-connecting-branch-scope-color: #079455,
+  ff-connecting-branch-delete-color: #e42525,
+  ff-app-header-menu-border-bottom-color: #ffffff,
+  ff-app-header-submenu-border-bottom-color:
+    linear-gradient(90deg, #592f7c 0%, #741ebb 100%),
+  ff-delete-button-attachment: #a91224,
+  email-table-border-color: #959595,
+  ff-icon-hover-fill-color: #f7ebff,
+);
+:root {
+  @each $key, $value in $base-theme {
+    --#{$key}: #{$value};
+  }
+}

package/src/assets/Themes/DarkTheme.scss

@@ -0,0 +1,207 @@
+$dark-theme: (
+  brand-color: #71347b,
+  text-color: #e8e0e9,
+  description-text: #d9d9d9,
+  click-able-text-color: #e8e0e9,
+  icons-default-color: #e8e0e9,
+  border-color: #333234,
+  disable-color: #71347b80,
+  hover-color: #f7ebff,
+  pop-up-background-blur: #12121299,
+  slider-table-color: #272428,
+  drawer-footer-bg: #1b181c99,
+  drawer-footer-border: #333234,
+  text-bg-highlight: #f5fb00,
+  tooltip-bg-color: #2a2a2a,
+  tooltip-text-color: #ffffff,
+  toggle-strip-color: #cfd1e2,
+  toggle-strip-active-color: #71347b,
+  toggle-strip-shadow: #00000040,
+  toggle-button-bg-color: #ffffff,
+  toggle-disable-icon-color: #767994,
+  text-area-default-color: #747474,
+  add-icon-hover-color: #431b4a,
+  arrow-button-bg-color: #ffffff,
+  arrows-button-border-color: #ded1e5,
+  overlay-bg: #12121299,
+  chip-fill-color: #f9d5ff,
+  chip-text-color: #1e161f,
+  file-drop-zone-default-fill-color: #71347b1a,
+  file-drop-zone-default-text-color: #1e161f,
+  file-drop-zone-selected-fill-color: #71347b33,
+  file-drop-zone-selected-text-color: #1e161f,
+  icon-color: #71347b,
+  tree-connecting-lines-color: #d7b5e3,
+  primary-button-color:
+    linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%),
+  primary-button-hover:
+    linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%),
+  primary-button-disable:
+    linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%),
+  primary-button-text-color: #ffffff,
+  primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%),
+  secondary-button-color-text:
+    linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%),
+  secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%),
+  secondary-button-text-color: #71347b,
+  secondary-button-hover:
+    linear-gradient(179.06deg, #71347b0d 3.49%, #46164d0d 99.22%),
+  tertiary-button-color:
+    linear-gradient(
+      180deg,
+      rgba(70, 22, 77, 0.05) 0%,
+      rgba(113, 52, 123, 0.05) 100%
+    ),
+  tertiary-button-hover:
+    linear-gradient(
+      180deg,
+      rgba(70, 22, 77, 0.1) 0%,
+      rgba(113, 52, 123, 0.1) 100%
+    ),
+  delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%),
+  delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%),
+  delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%),
+  delete-button-disable:
+    linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%),
+  warning-button-color:
+    linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%),
+  warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%),
+  drawer-title-color: #252c37,
+  toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%),
+  error_light: #e42525,
+  ff-success: #079455,
+  ff-warning: #f79009,
+  ff-header-text-color: #fdfaff,
+  ff-header-submenu-text-color: #666468,
+  ff-header-submenu-highlight-text-color: #170328,
+
+  // TODO:: Need to change the color code values of below 7 color (N/A in DS)
+  default-icon-color: #a3a3a3,
+  expandable-menu-default-bg: #fdfaff,
+  expandable-menu-option-bg: #610b861a,
+  file-dropzone-default-color: #71347b1a,
+  file-dropzone-selected-color: #71347b33,
+  file-details-container-shadow: #1e161f29,
+  file-details-bg: #ffffff,
+  ff-mini-modal-border: #ffffff,
+  ff-mini-modal-box-shadow: #3713553d,
+  ff-mini-modal-arrow-shadow: #00000040,
+
+  ff-error-light: #e42525,
+  ff-chips-fill-color: #f9d5ff,
+  ff-chips-blur-color: #575757,
+  ff-chip-bg: #ffffff,
+  ff-chip-text-color: #1e161f,
+  ff-mini-modal-footer-background: #aeb0c0,
+  input-default-border-color: #a3a3a3,
+  input-hover-border-color: #1e161f,
+  input-default-label-color: #747474,
+  input-label-bg-color: #ffffff,
+  input-active-text-color: #71347b,
+  input-error-text-color: #e42525,
+  tabs-label-default-color: #7a7a7a,
+  tabs-label-active-color: #71347b,
+  tabs-border-color: #f1ebf2,
+  tabs-bg-color: #ede6f2,
+  tab-bg-color: #ffffff,
+  toast-close-icon-wrapper-bg: #fafafa,
+  toaster-boxshadow: #1e161f3d,
+  toaster-success-border: linear-gradient(#07945566, #00693a66),
+  toaster-warning-border: linear-gradient(#f7900966, #d67a0066),
+  toaster-info-border: linear-gradient(#2591e466, #1769b066),
+  toaster-danger_confirm-border: linear-gradient(#e4252566, #c9000066),
+  option-card-border-color: #ded1e5,
+  option-card-bg-color: #ffffff,
+  checkbox-bg-color: #fbfdff,
+  checkbox-border-color: #b5b5b5,
+  checkbox-partial-color: #ffffff,
+  checkbox-hover-color: #f7edff,
+  multi-select-border: #a3a3a380,
+  multi-select-label-bg: #ffffff,
+  text-color-light: #1e161f80,
+  radio-button-border: #b5b5b5,
+  radio-button-hover: #d3d3d3,
+  menu-variant-dark-icon-color: #ffffff,
+  menu-option-icon-color: #ffffff,
+  menu-option-icon-clicked: #71347b,
+  delete-text-color: #c50303,
+
+  status-success-bg-color: #c6efcd,
+  status-success-text-color: #016102,
+  status-warning-bg-color: #ffe380,
+  status-warning-text-color: #ff8b00,
+  status-rejected-bg-color: #f7d9d9,
+  status-rejected-text-color: #c60202,
+  status-skipped-bg-color: #c4c3c3,
+  status-warning-hover-bg-color: #fcd8ac,
+  status-percentage-growth-bg-color: #ecedf8,
+
+  status-button-bg-passed: #c6efcd,
+  status-button-bg-failed: #f7d9d9,
+  status-button-bg-running: #ecedf8,
+  status-button-bg-skipped: #c4c3c3,
+  status-button-bg-warning: #ffb803,
+  status-button-bg-terminated: #f7d9d9,
+  status-button-bg-partiallyExecuted: #dee7f1,
+  status-button-bg-aborted: #f7d9d9,
+  status-button-bg-notExecuted: #f7d9d9,
+  status-button-text-passed: #016102,
+  status-button-text-failed: #c50303,
+  status-button-text-running: #434db8,
+  status-button-text-skipped: #3c3838,
+  status-button-text-warning: #ffffff,
+  status-button-text-terminated: #c50303,
+  status-button-text-partiallyExecuted: #0d69d4,
+  status-button-text-aborted: #c50303,
+  status-button-text-notExecuted: #c50303,
+
+  // TODO:: Need to change the color code values of below 10 color (N/A in DS)
+  ff-select-option-border-color: #ded1e5,
+  ff-select-option-wrapper-box-shadow: #592f7c33,
+  ff-select-background-color: #ffffff,
+  ff-select-scroll-thumb-color: #d9d9d9,
+  ff-select-scroll-track-bg: #f1f1f1,
+  ff-select-scroll-thumb-hover: #b8b8b8,
+  ff-select-text-color: #14041c,
+  ff-select-option-hover-color: #f7ebff,
+  ff-select-default-color: #747474,
+  ff-select-border-color: #a3a3a3,
+  ff-select-brand-color: #71347b,
+  ff-select-text-hover-color: #1e161f,
+  ff-search-filed-clear-text: #71347b,
+  ff-search-filed-placeholder-text: #a3a3a3,
+  ff-search-filed-close-Icon: #14041c,
+  ff-paper-background-color: #f5f5f5,
+  ff-paper-dark-background-color: #d1c4e9,
+
+  primary-icon-color: #ffffff,
+  secondary-icon-color: #71347b,
+  disabled-primary-color: #f9f9f9,
+  license_expireSoon_color: #ba7422,
+  license_active_color: #268735,
+  license_expired_color: #e34242,
+  license_header_text_color: #592f7c,
+  license_active_status_color: #518e18,
+  license_expired_status_color: #ab3425,
+  background-modal-color: #1111,
+  pie-chart-border-color: #b6b6b6,
+  button-bg-color: #f6ebff,
+  modal-header-text-color: #ffc600,
+  switch-license-text-color: #61296a,
+  switch-license-header-text-color: #610b86,
+  dotted-border-color:#000000,
+  select-license-header-text-color:#5F2868,
+  in-active-button-color:#808080,
+  button-background-gradient-color:#9C1EBB,
+  ff-app-header-menu-border-bottom-color:#FFFFFF,
+  ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592F7C 0%, #741EBB 100%),
+  details-page-value-color: #808080,
+  ff-delete-button-attachment: #a91224,
+  email-table-border-color: #959595,
+  ff-icon-hover-fill-color:#F7ECF8,
+);
+:root {
+  @each $key, $value in $dark-theme {
+    --#{$key}: #{$value};
+  }
+}

package/src/assets/Themes/Theme.scss

@@ -0,0 +1,16 @@
+@use './BaseTheme' as base;
+@use './DarkTheme' as dark;
+
+@mixin set-theme-variables($theme-map) {
+  @each $key, $value in $theme-map {
+    --#{$key}: #{$value};
+  }
+}
+
+.ff-light-theme {
+  @include set-theme-variables(base.$base-theme);
+}
+
+.ff-dark-theme {
+  @include set-theme-variables(dark.$dark-theme);
+}

package/src/assets/icons/Arrow.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.8082 1.38365L11.4151 0.987847C11.2914 0.864236 11.1268 0.796138 10.9509 0.796138C10.7751 0.796138 10.6103 0.864236 10.4866 0.987847C8.01023 3.46435 3.99002 3.45932 1.51357 0.982871C1.39006 0.85926 1.22528 0.79126 1.04947 0.79126C0.873666 0.79126 0.708786 0.85926 0.585176 0.982871L0.192002 1.37624C-0.0640005 1.63205 -0.0640005 2.04873 0.192002 2.30454L5.53683 7.66858C5.66034 7.7921 5.82493 7.87912 6.00229 7.87912H6.00434C6.18025 7.87912 6.34483 7.792 6.46835 7.66858L11.8082 2.31908C11.9319 2.19556 11.9998 2.026 12 1.8502C12 1.67429 11.9319 1.50707 11.8082 1.38365Z"
+    fill="currentColor" />
+</svg>

package/src/assets/icons/accordion_header_icon.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_471_2)">
+<path d="M11.6667 1.278C10.916 1.28968 10.1816 1.49924 9.53783 1.88551C8.89404 2.27179 8.36357 2.82111 7.99999 3.478C7.63642 2.82111 7.10595 2.27179 6.46215 1.88551C5.81835 1.49924 5.08403 1.28968 4.33333 1.278C3.13662 1.32999 2.00913 1.8535 1.19718 2.73415C0.385232 3.61481 -0.0451745 4.78102 -7.46106e-06 5.978C-7.46106e-06 9.00933 3.19066 12.32 5.86666 14.5647C6.46414 15.0668 7.21956 15.342 7.99999 15.342C8.78042 15.342 9.53585 15.0668 10.1333 14.5647C12.8093 12.32 16 9.00933 16 5.978C16.0452 4.78102 15.6148 3.61481 14.8028 2.73415C13.9909 1.8535 12.8634 1.32999 11.6667 1.278ZM9.27666 13.5447C8.91931 13.8456 8.46716 14.0106 7.99999 14.0106C7.53282 14.0106 7.08067 13.8456 6.72333 13.5447C3.29799 10.6707 1.33333 7.91333 1.33333 5.978C1.28775 5.13448 1.57757 4.30715 2.13957 3.67647C2.70157 3.04578 3.49015 2.6629 4.33333 2.61133C5.1765 2.6629 5.96509 3.04578 6.52708 3.67647C7.08908 4.30715 7.3789 5.13448 7.33333 5.978C7.33333 6.15481 7.40356 6.32438 7.52859 6.4494C7.65361 6.57443 7.82318 6.64467 7.99999 6.64467C8.1768 6.64467 8.34637 6.57443 8.4714 6.4494C8.59642 6.32438 8.66666 6.15481 8.66666 5.978C8.62109 5.13448 8.9109 4.30715 9.4729 3.67647C10.0349 3.04578 10.8235 2.6629 11.6667 2.61133C12.5098 2.6629 13.2984 3.04578 13.8604 3.67647C14.4224 4.30715 14.7122 5.13448 14.6667 5.978C14.6667 7.91333 12.702 10.6707 9.27666 13.542V13.5447Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_471_2">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/active_license_icon.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.867 6.20329C15.873 6.44806 15.6805 6.65267 15.4358 6.65874C15.191 6.6648 14.9864 6.47232 14.9803 6.22754C14.9614 5.5887 14.7704 4.99913 14.4362 4.50352C14.1035 4.01018 13.6268 3.6093 13.0373 3.34938L9.25273 1.6784C8.81623 1.48592 8.37519 1.38891 7.93489 1.38891C7.49459 1.38891 7.05355 1.48516 6.61705 1.6784L2.8325 3.34938C2.22626 3.61688 1.73974 4.03216 1.4063 4.54368C1.07285 5.0552 0.890218 5.66903 0.890218 6.33212V10.8867C0.890218 12.5144 1.66622 13.9633 2.70367 15.1729C3.76613 16.4127 5.10752 17.4047 6.18965 18.0912C6.73527 18.4368 7.33242 18.6111 7.92579 18.6126C8.52294 18.6141 9.12087 18.4436 9.66801 18.1018C9.87489 17.9722 10.1485 18.0351 10.2788 18.2428C10.4084 18.4497 10.3455 18.7232 10.1378 18.8536C9.44672 19.2863 8.68663 19.5023 7.92663 19.5C7.16276 19.4977 6.40191 19.2787 5.71387 18.843C4.57715 18.1223 3.16452 17.075 2.02943 15.751C0.868459 14.3975 0 12.7591 0 10.8874V6.33289C0 5.49627 0.234914 4.71724 0.663091 4.06096C1.09049 3.4047 1.70887 2.87423 2.47579 2.53624L6.26033 0.865263C6.81203 0.62125 7.37356 0.5 7.93661 0.5C8.49965 0.5 9.06045 0.622008 9.61288 0.865263L13.3974 2.53624C14.1439 2.86588 14.7494 3.37589 15.1753 4.0079C15.6004 4.63916 15.8452 5.39166 15.8687 6.20553L15.867 6.20329ZM10.8191 12.7675C10.6448 12.5932 10.6448 12.312 10.8191 12.1377C10.9934 11.9634 11.2745 11.9634 11.4488 12.1377L12.5408 13.229L14.8242 10.9456C14.9985 10.7713 15.2797 10.7713 15.454 10.9456C15.6282 11.1199 15.6282 11.401 15.454 11.5753L12.8561 14.1732C12.6818 14.3475 12.4006 14.3475 12.2264 14.1732L10.8199 12.7667L10.8191 12.7675ZM13.1356 7.7159C14.4732 7.7159 15.6842 8.25775 16.5609 9.13453C17.4377 10.0113 17.9795 11.2224 17.9795 12.5598C17.9795 13.8972 17.4369 15.1084 16.5609 15.985C15.6841 16.8618 14.4731 17.4037 13.1356 17.4037C11.7981 17.4037 10.5871 16.8618 9.71038 15.985C8.83359 15.1083 8.29175 13.8972 8.29175 12.5598C8.29175 11.2224 8.83435 10.0112 9.71038 9.13453C10.5872 8.25775 11.7982 7.7159 13.1356 7.7159ZM15.9312 9.76435C15.2158 9.04897 14.2276 8.6064 13.1356 8.6064C12.0436 8.6064 11.0554 9.04895 10.3401 9.76435C9.62482 10.4797 9.18215 11.4679 9.18215 12.5599C9.18215 13.6519 9.62471 14.6401 10.3401 15.3554C11.0555 16.0707 12.0436 16.5134 13.1356 16.5134C14.2276 16.5134 15.2159 16.0708 15.9312 15.3554C16.6464 14.64 17.0891 13.6519 17.0891 12.5599C17.0891 11.4679 16.6466 10.4796 15.9312 9.76435Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/add_file.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_911_11481)">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M19.1307 13.4822C19.6597 13.4822 20.0885 13.0534 20.0885 12.5243C20.0885 11.9953 19.6597 11.5665 19.1307 11.5665L12.9579 11.5665L12.9579 5.39368C12.9579 4.86467 12.529 4.43582 12 4.43582C11.471 4.43582 11.0421 4.86467 11.0421 5.39368L11.0421 11.5665L4.86934 11.5665C4.34033 11.5665 3.91148 11.9953 3.91148 12.5243C3.91148 13.0534 4.34032 13.4822 4.86934 13.4822L11.0421 13.4822V19.655C11.0421 20.184 11.471 20.6129 12 20.6129C12.529 20.6129 12.9579 20.184 12.9579 19.655V13.4822L19.1307 13.4822Z"
+            fill="currentColor" />
+    </g>
+    <defs>
+        <clipPath id="clip0_911_11481">
+            <path
+                d="M0 4.52441C0 2.31528 1.79086 0.524414 4 0.524414H20C22.2091 0.524414 24 2.31528 24 4.52441V20.5244C24 22.7336 22.2091 24.5244 20 24.5244H4C1.79086 24.5244 0 22.7336 0 20.5244V4.52441Z"
+                fill="currentColor" />
+        </clipPath>
+    </defs>
+</svg>