pixel-react 1.4.0 → 1.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/rollup.config.mjs

@@ -37,16 +37,9 @@ export default [
       commonjs(),
       typescript(),
       url({
-        include: ['**/*.ttf', '**/*.css'], // Handle font files
-        limit: 0, // Always output font files instead of inlining them
-        fileName: 'assets/fonts/[name][extname]', // Output location for fonts
-      }),
-      copy({
-        targets: [
-          { src: 'src/assets/fonts/*', dest: 'lib/assets/fonts' }, // Copy fonts to the output directory
-        ],
-        hook: 'writeBundle', // Trigger the copying during the bundle phase
+        include: ['**/*.css'], // Handle font files
       }),
+
       postcss({
         extensions: ['.scss'],
       }),

package/src/assets/icons/add_label_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1729 1.72611C14.1721 1.05414 13.6272 0.509644 12.9551 0.509644H7.85584C7.53286 0.509644 7.22312 0.637909 6.99472 0.866274L5.9944 1.86639C6.15911 1.98691 6.31427 2.11973 6.45851 2.2635L7.42526 1.29693C7.54028 1.18195 7.69317 1.11862 7.85584 1.11862H12.9552C13.2909 1.11862 13.5641 1.39182 13.5641 1.72759V6.8268H13.5641C13.5641 6.98947 13.5007 7.14244 13.3857 7.25746L6.74778 13.8941C6.63276 14.0091 6.47983 14.0725 6.31716 14.0725C6.15449 14.0725 6.00159 14.0091 5.88654 13.8941L0.787328 8.79474C0.672308 8.67972 0.608974 8.52675 0.608974 8.36412C0.608974 8.20145 0.672346 8.04852 0.787366 7.9335L0.801093 7.91977C0.657354 7.7755 0.52456 7.62032 0.404062 7.45557L0.356821 7.5028C-0.118902 7.97841 -0.11894 8.7496 0.356707 9.22532L5.45599 14.3246C5.6938 14.5625 6.00552 14.6814 6.31723 14.6814C6.51344 14.6814 6.70751 14.6287 6.88529 14.5345C6.95066 14.4806 6.99975 14.4416 7.04251 14.4076C7.06738 14.3878 7.09011 14.3698 7.11266 14.3515C7.35214 14.1572 7.57128 13.9378 10.1177 11.3887L10.1177 11.3886L10.1178 11.3885C11.0221 10.4833 12.2199 9.28423 13.8163 7.68816C14.0447 7.45972 14.1731 7.1499 14.1731 6.82684L14.173 2.09659L14.1729 1.72611ZM15.391 1.72759V7.43574C15.391 7.59841 15.3276 7.75138 15.2126 7.8664L8.01801 15.0597L8.44859 15.4903L15.6432 8.29706C15.8716 8.06861 16 7.7588 16 7.43574V1.72759H15.391ZM9.60576 3.859C9.60576 3.18727 10.1523 2.64105 10.8237 2.64105C11.4951 2.64105 12.0417 3.18727 12.0417 3.859C12.0417 4.53074 11.4951 5.07695 10.8237 5.07695C10.1523 5.07695 9.60576 4.53074 9.60576 3.859ZM10.2147 3.859C10.2147 4.1947 10.4877 4.46798 10.8237 4.46798C11.1597 4.46798 11.4327 4.1947 11.4327 3.859C11.4327 3.52331 11.1597 3.25003 10.8237 3.25003C10.4877 3.25003 10.2147 3.52331 10.2147 3.859ZM0.384796 5.09656C0.384796 3.30456 1.8428 1.84656 3.6348 1.84656C5.4268 1.84656 6.8848 3.30456 6.8848 5.09656C6.8848 6.88856 5.4268 8.34656 3.6348 8.34656C1.8428 8.34656 0.384796 6.88856 0.384796 5.09656ZM4.1348 5.59656H4.8848C5.1608 5.59656 5.3848 5.37256 5.3848 5.09656C5.3848 4.82056 5.1608 4.59656 4.8848 4.59656H4.1348V3.84656C4.1348 3.57056 3.9108 3.34656 3.6348 3.34656C3.3588 3.34656 3.1348 3.57056 3.1348 3.84656V4.59656H2.3848C2.1088 4.59656 1.8848 4.82056 1.8848 5.09656C1.8848 5.37256 2.1088 5.59656 2.3848 5.59656H3.1348V6.34656C3.1348 6.62256 3.3588 6.84656 3.6348 6.84656C3.9108 6.84656 4.1348 6.62256 4.1348 6.34656V5.59656Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/label_icon.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-outside-1_2947_12817" maskUnits="userSpaceOnUse" x="0" y="0.390015" width="18" height="17" fill="black">
+<rect fill="white" y="0.390015" width="18" height="17"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1729 2.60648C15.1721 1.93451 14.6272 1.39001 13.9551 1.39001H8.85584C8.53286 1.39001 8.22312 1.51828 7.99472 1.74665L1.35682 8.38317C0.881098 8.85878 0.88106 9.62997 1.35671 10.1057L6.45599 15.205C6.6938 15.4428 7.00552 15.5618 7.31723 15.5618C7.51344 15.5618 7.70751 15.5091 7.88529 15.4148C7.95066 15.361 7.99975 15.322 8.04251 15.288C8.06738 15.2682 8.09011 15.2501 8.11266 15.2318C8.35215 15.0376 8.57128 14.8182 11.1178 12.2689C12.0221 11.3637 13.2199 10.1646 14.8163 8.56853C15.0447 8.34009 15.1731 8.03027 15.1731 7.70721L15.173 2.97696L15.1729 2.60648ZM14.5641 7.70717C14.5641 7.86984 14.5007 8.02281 14.3857 8.13783L7.74778 14.7745C7.63276 14.8895 7.47983 14.9528 7.31716 14.9528C7.15449 14.9528 7.00159 14.8895 6.88654 14.7745L1.78733 9.67511C1.67231 9.56009 1.60897 9.40712 1.60897 9.24449C1.60897 9.08182 1.67235 8.92889 1.78737 8.81387L8.42526 2.1773C8.54028 2.06232 8.69317 1.99899 8.85584 1.99899H13.9552C14.2909 1.99899 14.5641 2.27219 14.5641 2.60796V7.70717H14.5641ZM16.391 2.60796V8.31611C16.391 8.47878 16.3276 8.63175 16.2126 8.74677L9.01801 15.9401L9.44859 16.3707L16.6432 9.17743C16.8716 8.94899 17 8.63917 17 8.31611V2.60796H16.391ZM10.6058 4.73937C10.6058 4.06764 11.1523 3.52143 11.8237 3.52143C12.4951 3.52143 13.0417 4.06764 13.0417 4.73937C13.0417 5.41111 12.4951 5.95732 11.8237 5.95732C11.1523 5.95732 10.6058 5.41111 10.6058 4.73937ZM11.2147 4.73937C11.2147 5.07507 11.4877 5.34835 11.8237 5.34835C12.1597 5.34835 12.4327 5.07507 12.4327 4.73937C12.4327 4.40368 12.1597 4.1304 11.8237 4.1304C11.4877 4.1304 11.2147 4.40368 11.2147 4.73937Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1729 2.60648C15.1721 1.93451 14.6272 1.39001 13.9551 1.39001H8.85584C8.53286 1.39001 8.22312 1.51828 7.99472 1.74665L1.35682 8.38317C0.881098 8.85878 0.88106 9.62997 1.35671 10.1057L6.45599 15.205C6.6938 15.4428 7.00552 15.5618 7.31723 15.5618C7.51344 15.5618 7.70751 15.5091 7.88529 15.4148C7.95066 15.361 7.99975 15.322 8.04251 15.288C8.06738 15.2682 8.09011 15.2501 8.11266 15.2318C8.35215 15.0376 8.57128 14.8182 11.1178 12.2689C12.0221 11.3637 13.2199 10.1646 14.8163 8.56853C15.0447 8.34009 15.1731 8.03027 15.1731 7.70721L15.173 2.97696L15.1729 2.60648ZM14.5641 7.70717C14.5641 7.86984 14.5007 8.02281 14.3857 8.13783L7.74778 14.7745C7.63276 14.8895 7.47983 14.9528 7.31716 14.9528C7.15449 14.9528 7.00159 14.8895 6.88654 14.7745L1.78733 9.67511C1.67231 9.56009 1.60897 9.40712 1.60897 9.24449C1.60897 9.08182 1.67235 8.92889 1.78737 8.81387L8.42526 2.1773C8.54028 2.06232 8.69317 1.99899 8.85584 1.99899H13.9552C14.2909 1.99899 14.5641 2.27219 14.5641 2.60796V7.70717H14.5641ZM16.391 2.60796V8.31611C16.391 8.47878 16.3276 8.63175 16.2126 8.74677L9.01801 15.9401L9.44859 16.3707L16.6432 9.17743C16.8716 8.94899 17 8.63917 17 8.31611V2.60796H16.391ZM10.6058 4.73937C10.6058 4.06764 11.1523 3.52143 11.8237 3.52143C12.4951 3.52143 13.0417 4.06764 13.0417 4.73937C13.0417 5.41111 12.4951 5.95732 11.8237 5.95732C11.1523 5.95732 10.6058 5.41111 10.6058 4.73937ZM11.2147 4.73937C11.2147 5.07507 11.4877 5.34835 11.8237 5.34835C12.1597 5.34835 12.4327 5.07507 12.4327 4.73937C12.4327 4.40368 12.1597 4.1304 11.8237 4.1304C11.4877 4.1304 11.2147 4.40368 11.2147 4.73937Z" fill="currentColor"/>
+<path d="M15.1729 2.60648L15.6729 2.60635V2.60586L15.1729 2.60648ZM7.99472 1.74665L8.34823 2.10024L8.34824 2.10023L7.99472 1.74665ZM1.35682 8.38317L1.71033 8.73677L1.71034 8.73676L1.35682 8.38317ZM1.35671 10.1057L1.00312 10.4592L1.00315 10.4592L1.35671 10.1057ZM6.45599 15.205L6.10244 15.5586L6.10244 15.5586L6.45599 15.205ZM7.88529 15.4148L8.11947 15.8566L8.16412 15.8329L8.20314 15.8008L7.88529 15.4148ZM8.04251 15.288L8.35367 15.6794L8.35367 15.6794L8.04251 15.288ZM8.11266 15.2318L7.79765 14.8436L7.79764 14.8436L8.11266 15.2318ZM11.1178 12.2689L11.4716 12.6223L11.1178 12.2689ZM14.8163 8.56853L15.1698 8.92212L15.1698 8.92211L14.8163 8.56853ZM15.1731 7.70721H15.6731V7.7072L15.1731 7.70721ZM15.173 2.97696L15.673 2.97696V2.97684L15.173 2.97696ZM14.3857 8.13783L14.7392 8.49142L14.7393 8.49138L14.3857 8.13783ZM14.5641 7.70717V7.20717H14.0641V7.70717H14.5641ZM7.74778 14.7745L7.39426 14.4209L7.39422 14.4209L7.74778 14.7745ZM6.88654 14.7745L6.53298 15.128L6.5331 15.1281L6.88654 14.7745ZM1.78733 9.67511L2.14089 9.32156L2.14088 9.32156L1.78733 9.67511ZM1.78737 8.81387L1.43385 8.46028L1.43381 8.46032L1.78737 8.81387ZM8.42526 2.1773L8.07177 1.82369L8.07174 1.82372L8.42526 2.1773ZM14.5641 7.70717V8.20717H15.0641V7.70717H14.5641ZM16.391 2.60796V2.10796H15.891V2.60796H16.391ZM16.2126 8.74677L16.5661 9.10035L16.5662 9.10032L16.2126 8.74677ZM9.01801 15.9401L8.66448 15.5865L8.31088 15.94L8.66444 16.2936L9.01801 15.9401ZM9.44859 16.3707L9.09502 16.7242L9.44854 17.0778L9.80211 16.7243L9.44859 16.3707ZM16.6432 9.17743L16.9967 9.53101L16.9967 9.53101L16.6432 9.17743ZM17 2.60796H17.5V2.10796H17V2.60796ZM13.9551 1.89001C14.3512 1.89001 14.6724 2.2109 14.6729 2.6071L15.6729 2.60586C15.6717 1.65813 14.9033 0.890015 13.9551 0.890015V1.89001ZM8.85584 1.89001H13.9551V0.890015H8.85584V1.89001ZM8.34824 2.10023C8.48287 1.96563 8.66543 1.89001 8.85584 1.89001V0.890015C8.40029 0.890015 7.96338 1.07093 7.64119 1.39306L8.34824 2.10023ZM1.71034 8.73676L8.34823 2.10024L7.6412 1.39306L1.0033 8.02958L1.71034 8.73676ZM1.71029 9.75217C1.42987 9.4717 1.42993 9.01711 1.71033 8.73677L1.00331 8.02958C0.33227 8.70046 0.332252 9.78824 1.00312 10.4592L1.71029 9.75217ZM6.80955 14.8515L1.71026 9.75214L1.00315 10.4592L6.10244 15.5586L6.80955 14.8515ZM7.31723 15.0618C7.13272 15.0618 6.94983 14.9917 6.80954 14.8515L6.10244 15.5586C6.43776 15.8939 6.87831 16.0618 7.31723 16.0618V15.0618ZM7.65112 14.9731C7.53774 15.0332 7.42348 15.0618 7.31723 15.0618V16.0618C7.6034 16.0618 7.87728 15.985 8.11947 15.8566L7.65112 14.9731ZM7.73134 14.8966C7.68824 14.9309 7.63633 14.9721 7.56744 15.0289L8.20314 15.8008C8.26499 15.7499 8.31125 15.7131 8.35367 15.6794L7.73134 14.8966ZM7.79764 14.8436C7.77734 14.86 7.75657 14.8766 7.73134 14.8966L8.35367 15.6794C8.37818 15.6599 8.40287 15.6403 8.42767 15.6201L7.79764 14.8436ZM10.7641 11.9156C8.19939 14.483 8.01035 14.671 7.79765 14.8436L8.42767 15.6201C8.69394 15.4041 8.94318 15.1534 11.4716 12.6223L10.7641 11.9156ZM14.4627 8.21494C12.8662 9.81113 11.6684 11.0103 10.7641 11.9156L11.4716 12.6223C12.3758 11.717 13.5735 10.5181 15.1698 8.92212L14.4627 8.21494ZM14.6731 7.70721C14.6731 7.89765 14.5974 8.08027 14.4627 8.21495L15.1698 8.92211C15.492 8.5999 15.6731 8.1629 15.6731 7.70721H14.6731ZM14.673 2.97697L14.6731 7.70722L15.6731 7.7072L15.673 2.97696L14.673 2.97697ZM14.6729 2.60661L14.673 2.97709L15.673 2.97684L15.6729 2.60635L14.6729 2.60661ZM14.7393 8.49138C14.948 8.28261 15.0641 8.00247 15.0641 7.70717H14.0641C14.0641 7.73722 14.0534 7.76301 14.0322 7.78428L14.7393 8.49138ZM8.1013 15.1281L14.7392 8.49142L14.0322 7.78424L7.39426 14.4209L8.1013 15.1281ZM7.31716 15.4528C7.61241 15.4528 7.89252 15.3368 8.10133 15.128L7.39422 14.4209C7.37299 14.4421 7.34725 14.4528 7.31716 14.4528V15.4528ZM6.5331 15.1281C6.74181 15.3367 7.02179 15.4528 7.31716 15.4528V14.4528C7.28718 14.4528 7.26137 14.4422 7.23997 14.4208L6.5331 15.1281ZM1.43377 10.0287L6.53298 15.128L7.24009 14.4209L2.14089 9.32156L1.43377 10.0287ZM1.10897 9.24449C1.10897 9.53969 1.22495 9.81984 1.43377 10.0287L2.14088 9.32156C2.11966 9.30034 2.10897 9.27456 2.10897 9.24449H1.10897ZM1.43381 8.46032C1.22506 8.66907 1.10897 8.94916 1.10897 9.24449H2.10897C2.10897 9.21448 2.11963 9.18871 2.14092 9.16742L1.43381 8.46032ZM8.07174 1.82372L1.43385 8.46028L2.14088 9.16746L8.77878 2.53089L8.07174 1.82372ZM8.85584 1.49899C8.56057 1.49899 8.28053 1.615 8.07177 1.82369L8.77876 2.53092C8.80003 2.50965 8.82578 2.49899 8.85584 2.49899V1.49899ZM13.9552 1.49899H8.85584V2.49899H13.9552V1.49899ZM15.0641 2.60796C15.0641 1.99605 14.5671 1.49899 13.9552 1.49899V2.49899C14.0148 2.49899 14.0641 2.54833 14.0641 2.60796H15.0641ZM15.0641 7.70717V2.60796H14.0641V7.70717H15.0641ZM14.5641 8.20717H14.5641V7.20717H14.5641V8.20717ZM16.891 8.31611V2.60796H15.891V8.31611H16.891ZM16.5662 9.10032C16.7749 8.89155 16.891 8.61141 16.891 8.31611H15.891C15.891 8.34615 15.8803 8.37195 15.8591 8.39321L16.5662 9.10032ZM9.37153 16.2937L16.5661 9.10035L15.8591 8.39318L8.66448 15.5865L9.37153 16.2937ZM9.80216 16.0172L9.37158 15.5865L8.66444 16.2936L9.09502 16.7242L9.80216 16.0172ZM16.2896 8.82384L9.09507 16.0171L9.80211 16.7243L16.9967 9.53101L16.2896 8.82384ZM16.5 8.31611C16.5 8.50654 16.4243 8.68917 16.2896 8.82384L16.9967 9.53101C17.319 9.2088 17.5 8.77179 17.5 8.31611H16.5ZM16.5 2.60796V8.31611H17.5V2.60796H16.5ZM16.391 3.10796H17V2.10796H16.391V3.10796ZM11.8237 3.02143C10.8762 3.02143 10.1058 3.79141 10.1058 4.73937H11.1058C11.1058 4.34386 11.4283 4.02143 11.8237 4.02143V3.02143ZM13.5417 4.73937C13.5417 3.7914 12.7712 3.02143 11.8237 3.02143V4.02143C12.2191 4.02143 12.5417 4.34387 12.5417 4.73937H13.5417ZM11.8237 6.45732C12.7712 6.45732 13.5417 5.68733 13.5417 4.73937H12.5417C12.5417 5.13489 12.2191 5.45732 11.8237 5.45732V6.45732ZM10.1058 4.73937C10.1058 5.68733 10.8762 6.45732 11.8237 6.45732V5.45732C11.4283 5.45732 11.1058 5.13489 11.1058 4.73937H10.1058ZM11.8237 4.84835C11.764 4.84835 11.7147 4.79909 11.7147 4.73937H10.7147C10.7147 5.35105 11.2114 5.84835 11.8237 5.84835V4.84835ZM11.9327 4.73937C11.9327 4.79909 11.8834 4.84835 11.8237 4.84835V5.84835C12.436 5.84835 12.9327 5.35105 12.9327 4.73937H11.9327ZM11.8237 4.6304C11.8834 4.6304 11.9327 4.67966 11.9327 4.73937H12.9327C12.9327 4.1277 12.436 3.6304 11.8237 3.6304V4.6304ZM11.7147 4.73937C11.7147 4.67966 11.764 4.6304 11.8237 4.6304V3.6304C11.2114 3.6304 10.7147 4.1277 10.7147 4.73937H11.7147Z" fill="currentColor" mask="url(#path-1-outside-1_2947_12817)"/>
+</svg>

package/src/assets/styles/_fonts.scss

@@ -1,40 +1,10 @@
+@import url('https://fonts.cdnfonts.com/css/poppins');
+
 @mixin fontPoppins($size: 16px) {
   font-family: 'Poppins';
   font-size: $size;
 }
 
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 400;
-  src:
-    local('Poppins-Regular'),
-    url(../../assets/fonts/Poppins-Regular.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 500;
-  src:
-    local('Poppins-Medium'),
-    url(../../assets/fonts/Poppins-Medium.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 600;
-  src:
-    local('Poppins-SemiBold'),
-    url(../../assets/fonts/Poppins-SemiBold.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 700;
-  src:
-    local('Poppins-Bold'),
-    url(../../assets/fonts/Poppins-Bold.ttf) format('truetype');
-}
-
 .fontXs {
   @include fontPoppins(10px);
 }

package/src/components/Icon/iconList.ts

@@ -178,6 +178,8 @@ import dashboardSalesforceIcon from '../../assets/icons/salesforce_icon.svg?reac
 import dashboardMsDynamicIcon from '../../assets/icons/ms_dynamic_icon.svg?react';
 import MinimizeScript from '../../assets/icons/minimize_script.svg?react';
 import MaximizeTree from '../../assets/icons/maximize_tree.svg?react';
+import LabelIcon from '../../assets/icons/label_icon.svg?react';
+import AddLabelIcon from '../../assets/icons/add_label_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -353,5 +355,7 @@ Components['user_warning'] = UserWarning;
 Components['user_with_system'] = UserWithSystem;
 Components['minimize_script'] = MinimizeScript;
 Components['maximize_tree'] = MaximizeTree;
+Components['label_icon'] = LabelIcon;
+Components['add_label_icon'] = AddLabelIcon;
 
 export default Components;

package/src/components/Select/Select.tsx

@@ -29,6 +29,7 @@ const Select: FC<SelectProps> = ({
   height = 32,
   width = '100%',
   onBlur = () => {},
+  disableInput = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -176,6 +177,7 @@ const Select: FC<SelectProps> = ({
           style={{ zIndex: optionZIndex, color: selectedOptionColor }}
           disabled={disabled}
           onChange={handleChange}
+          readOnly={disableInput}
         />
         {optionsRequired && (
           <div

package/src/components/Select/types.ts

@@ -93,6 +93,11 @@ export interface SelectProps {
    *  Provide the onBlur functionality for the select
    */
   onBlur?: () => void;
+
+  /*
+  * Disable the select component input  
+  */
+  disableInput?: boolean;
 }
 
 export interface DrowdownPosition {

package/src/components/StateDropdown/StateDropdown.tsx

@@ -129,7 +129,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     ) : (
       <Select
@@ -139,7 +141,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (
@@ -154,7 +158,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'APPROVED') {
@@ -166,7 +172,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
@@ -178,7 +186,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
@@ -190,7 +200,9 @@ const StateDropdown = ({
         optionsList={options}
         selectedOption={selectedOption}
         showLabel={false}
-        showBorder={true}
+        showBorder={false}
+        disableInput={true}
+        height={24}
       />
     );
   } else {

package/src/components/Typography/Typography.scss

@@ -1,40 +1,10 @@
+@import url('https://fonts.cdnfonts.com/css/poppins');
+
 @mixin fontPoppins($size: 16px) {
   font-family: 'Poppins';
   font-size: $size;
 }
 
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 400;
-  src:
-    local('Poppins-Regular'),
-    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 500;
-  src:
-    local('Poppins-Medium'),
-    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 600;
-  src:
-    local('Poppins-SemiBold'),
-    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-weight: 700;
-  src:
-    local('Poppins-Bold'),
-    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
-}
-
 .ff-text {
   @include fontPoppins();
 

package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StyleGuide from './ColorPalette';
-declare const meta: Meta<typeof StyleGuide>;
-type Story = StoryObj<typeof StyleGuide>;
-export declare const ColorList: Story;
-export default meta;

package/lib/StyleGuide/Typography/Typography.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Typography from './Typography';
-declare const meta: Meta<typeof Typography>;
-type Story = StoryObj<typeof Typography>;
-export declare const AllFonts: Story;
-export default meta;

package/lib/components/Accordion/Accordion.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Accordion from './Accordion';
-declare const meta: Meta<typeof Accordion>;
-type Story = StoryObj<typeof Accordion>;
-export declare const SampleAccordion: Story;
-export default meta;

package/lib/components/AddButton/AddButton.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import './AddButton.scss';
-import { AddButtonProps } from './types';
-declare const AddButton: React.FC<AddButtonProps>;
-export default AddButton;

package/lib/components/AddButton/AddButton.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const PrimaryAddButton: Story;
-export default meta;

package/lib/components/AddButton/index.d.ts

@@ -1 +0,0 @@
-export { default } from './AddButton';

package/lib/components/AddButton/types.d.ts

@@ -1,4 +0,0 @@
-export interface AddButtonProps {
-    name: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}

package/lib/components/AddResourceButton/AddButton.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-declare const meta: Meta<typeof AddButton>;
-type Story = StoryObj<typeof AddButton>;
-export declare const Default: Story;
-export declare const TwoArrowsButtons: Story;
-export declare const ThreeArrowsButton: Story;
-export default meta;

package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AllProjectsDropdown from './AllProjectsDropdown';
-declare const meta: Meta<typeof AllProjectsDropdown>;
-type Story = StoryObj<typeof AllProjectsDropdown>;
-export declare const Default: Story;
-export declare const PrimaryIconButton: Story;
-export default meta;

package/lib/components/AppHeader/AppHeader.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AppHeader from './AppHeader';
-declare const meta: Meta<typeof AppHeader>;
-type Story = StoryObj<typeof AppHeader>;
-export declare const SampleAppHeader: Story;
-export declare const Controlled: Story;
-export default meta;

package/lib/components/AttachImage/AttachImage.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-declare const meta: Meta<typeof AttachImage>;
-export default meta;
-type Story = StoryObj<AttachImageProps>;
-export declare const Default: Story;

package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AttachmentButton from './AttachmentButton';
-declare const meta: Meta<typeof AttachmentButton>;
-type Story = StoryObj<typeof AttachmentButton>;
-export declare const Default: Story;
-export declare const SmallFileLimit: Story;
-export declare const LargeFileLimit: Story;
-export declare const DisabledUploader: Story;
-export default meta;

package/lib/components/Avatar/Avatar.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Avatar from './Avatar';
-declare const meta: Meta<typeof Avatar>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Small: Story;
-export declare const Medium: Story;
-export declare const Large: Story;
-export declare const CustomAvatarSize: Story;
-export declare const CustomIconSize: Story;

package/lib/components/Button/Button.stories.d.ts

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
-declare const meta: Meta<typeof Button>;
-type Story = StoryObj<typeof Button>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Tertiary: Story;
-export declare const Delete: Story;
-export declare const Warning: Story;
-export declare const PrimaryWithIcon: Story;
-export declare const SecondaryWithIcon: Story;
-export declare const TertiaryWithIcon: Story;
-export default meta;

package/lib/components/Charts/BarChart/BarChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import BarChart from './BarChart';
-declare const meta: Meta<typeof BarChart>;
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-export declare const BarChartDashboard: Story;

package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import DashboardDonutChart from './DashboardDonutChart';
-declare const meta: Meta<typeof DashboardDonutChart>;
-export default meta;
-type Story = StoryObj<typeof DashboardDonutChart>;
-export declare const Default: Story;
-export declare const MemoryLegend: Story;

package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import DonutChart from './DonutChart';
-declare const meta: Meta<typeof DonutChart>;
-export default meta;
-type Story = StoryObj<typeof DonutChart>;
-export declare const Default: Story;

package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadialChart from './IconRadialChart';
-declare const meta: Meta<typeof IconRadialChart>;
-export default meta;
-type Story = StoryObj<typeof IconRadialChart>;
-export declare const Default: Story;
-export declare const Mobile: Story;
-export declare const WithoutIcon: Story;

package/lib/components/Charts/LineChart/LineChart.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import LineChart from './LineChart';
-import { LineChartProps } from './types';
-declare const meta: Meta<typeof LineChart>;
-export default meta;
-export declare const DefaultLineChart: StoryObj<LineChartProps>;
-export declare const StatusLineChart: StoryObj<LineChartProps>;

package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import MultiRadialChart from './MultiRadialChart';
-declare const meta: Meta<typeof MultiRadialChart>;
-export default meta;
-type Story = StoryObj<typeof MultiRadialChart>;
-export declare const Default: Story;
-export declare const numberLegend: Story;
-export declare const PillLegend: Story;

package/lib/components/Charts/PieChart/PieChart.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import PieChart from './PieChart';
-declare const meta: Meta<typeof PieChart>;
-export default meta;
-type Story = StoryObj<typeof PieChart>;
-export declare const PieChartDashBoard: Story;
-export declare const PieChartDashBoardWithBorder: Story;

package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import RadialChart from './RadialChart';
-declare const meta: Meta<typeof RadialChart>;
-export default meta;
-type Story = StoryObj<typeof RadialChart>;
-export declare const ChartWithStatus: Story;

package/lib/components/Checkbox/Checkbox.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Checkbox from './Checkbox';
-declare const meta: Meta<typeof Checkbox>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Partial: Story;
-export declare const Controlled: Story;

package/lib/components/Chip/Chip.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Chip from './Chip';
-import '../../assets/styles/_colors.scss';
-import './Chip.scss';
-declare const meta: Meta<typeof Chip>;
-type Story = StoryObj<typeof Chip>;
-export declare const Primary: Story;
-export declare const withoutExpand: Story;
-export declare const Group: Story;
-export declare const CustomChip: Story;
-export declare const Success: Story;
-export declare const Errors: Story;
-export declare const Warning: Story;
-export default meta;

package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ConnectingBranch from './ConnectingBranch';
-declare const meta: Meta<typeof ConnectingBranch>;
-export default meta;
-type Story = StoryObj<typeof ConnectingBranch>;
-export declare const Default: Story;

package/lib/components/DatePicker/DatePicker.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import CustomDatePicker from './DatePicker';
-declare const meta: Meta<typeof CustomDatePicker>;
-export default meta;
-type Story = StoryObj<typeof CustomDatePicker>;
-export declare const Default: Story;
-export declare const StartDateFilter: Story;
-export declare const EndDateInput: Story;
-export declare const ScheduleDateInput: Story;

package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DragAndDropList from './DragAndDropList';
-declare const meta: Meta<typeof DragAndDropList>;
-type Story = StoryObj<typeof DragAndDropList>;
-export declare const Primary: Story;
-export default meta;

package/lib/components/Drawer/Drawer.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Drawer from './Drawer';
-declare const meta: Meta<typeof Drawer>;
-export default meta;
-type Story = StoryObj<typeof Drawer>;
-export declare const Default: Story;
-export declare const WithoutHeader: Story;
-export declare const WithCustomHeader: Story;
-export declare const WithCustomFooter: Story;
-export declare const WithTertiaryButtons: Story;
-export declare const WithCustomZIndex: Story;
-export declare const Controlled: Story;

package/lib/components/EditTextField/EditTextField.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import EditTextField from './EditTextField';
-import '../../assets/styles/_colors.scss';
-import './EditTextField.scss';
-declare const meta: Meta<typeof EditTextField>;
-type Story = StoryObj<typeof EditTextField>;
-export declare const textFieldWithLabel: Story;
-export declare const textFieldWithOutLabel: Story;
-export declare const openTextField: Story;
-export default meta;

package/lib/components/Editor/Editor.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { EditorProps } from './types';
-declare const meta: Meta<EditorProps>;
-export default meta;
-type Story = StoryObj<EditorProps>;
-export declare const Default: Story;

package/lib/components/Excel/ExcelFile.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ExcelFile from './ExcelFile/ExcelFile';
-declare const meta: Meta<typeof ExcelFile>;
-type Story = StoryObj<typeof ExcelFile>;
-export declare const Default: Story;
-export default meta;

package/lib/components/ExcelFile/ChangeExcelStyles.d.ts

@@ -1,14 +0,0 @@
-import { CellBase } from "./ExcelFile/Excel";
-interface ChangeExcelStylesOptions {
-    sheetName: string;
-    styleType: string;
-    value: string;
-    selectedCell: {
-        row: number;
-        column: number;
-    }[];
-}
-export default function ChangeExcelStyles(setWorksheetsData: React.Dispatch<React.SetStateAction<{
-    [key: string]: Matrix<CellBase>;
-}>>, options: ChangeExcelStylesOptions): void;
-export {};

package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import './ColorBarSelector.scss';
-interface ColorBarSelectorProps {
-    getColorValue: (color: string) => void;
-    disabled: boolean;
-}
-declare const ColorBarSelector: React.FC<ColorBarSelectorProps>;
-export default ColorBarSelector;

package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './ContextMenu.scss';
-declare const ContextMenu: React.FC<ContextMenuProps>;
-export default ContextMenu;

package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import * as Types from './types';
-type Props = {
-    DataEditor: Types.DataEditorComponent;
-};
-declare const ActiveCell: React.FC<Props>;
-export default ActiveCell;

package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import * as Types from './types';
-export declare const Cell: React.FC<Types.CellComponentProps>;
-export declare const enhance: (CellComponent: React.ComponentType<Types.CellComponentProps>) => React.FC<Omit<Types.CellComponentProps, "selected" | "active" | "copied" | "dragging" | "mode" | "data" | "select" | "activate" | "setCellDimensions">>;

package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import * as Types from './types';
-declare const ColumnIndicator: Types.ColumnIndicatorComponent;
-export default ColumnIndicator;
-export declare const enhance: (ColumnIndicatorComponent: Types.ColumnIndicatorComponent) => React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">>;

package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-declare const Copied: React.FC;
-export default Copied;

package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import * as Types from './types';
-declare const CornerIndicator: Types.CornerIndicatorComponent;
-export default CornerIndicator;
-export declare const enhance: (CornerIndicatorComponent: Types.CornerIndicatorComponent) => React.FC<Omit<Types.CornerIndicatorProps, "selected" | "onSelect">>;

package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import * as Types from './types';
-/** The default Spreadsheet DataEditor component */
-declare const DataEditor: React.FC<Types.DataEditorProps>;
-export default DataEditor;