@omniumretail/component-library 1.2.5 → 1.2.6

package/dist/main.css

@@ -18,8 +18,8 @@
 .x_X2axa502qG690LM5DM{width:300px;max-width:300px;height:100%;background-color:var(--color-white);padding:24px;position:relative;transition:var(--transition-fast);overflow:hidden}@media(max-width: 1024px){.x_X2axa502qG690LM5DM{width:250px;max-width:250px;padding:12px}}.iEepDtDljm_PdBbkR3JA{max-width:100px;width:100px;overflow:hidden}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA{max-width:75px;width:75px}}.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5{font-size:0;transition:0;padding-left:42px}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5{padding-left:30px}}.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5:first-letter{font-size:var(--font-size-body-4)}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5:first-letter{font-size:var(--font-size-body-3)}}.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd{font-size:24px;padding-left:35px}@media(max-width: 1024px){.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd{font-size:20px;padding-left:26px}}.dcC_pqHYFgU16huYkWP5{color:var(--color-black);padding:16px;font-weight:var(--font-weight-semibold);text-transform:uppercase;position:relative;white-space:nowrap;cursor:pointer}@media(max-width: 1024px){.dcC_pqHYFgU16huYkWP5{font-size:var(--font-size-body-3)}}.dcC_pqHYFgU16huYkWP5:after{content:"";position:absolute;bottom:0;left:0;height:1px;width:100%;background-color:var(--color-orange);transform:scaleY(0.5)}.MVw3JKiEvATmRxAAyFA8{color:var(--color-orange) !important}.ULIAFOHHnjA6viVps4dE{position:absolute;top:12px;right:24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;cursor:pointer}@media(max-width: 1024px){.ULIAFOHHnjA6viVps4dE{right:4px}}.ULIAFOHHnjA6viVps4dE>*{font-size:var(--font-size-body-5)}@media(max-width: 1024px){.ULIAFOHHnjA6viVps4dE>*{font-size:var(--font-size-body-4)}}.PxCQRuiQJ_ybUIGB2l5f{margin-top:8px;padding-left:16px}.N7GunVO7DCC1e16M_hkm{color:var(--color-black);padding:8px;margin-top:8px;font-weight:var(--font-weight-semibold);cursor:pointer}@media(max-width: 767px){.x_X2axa502qG690LM5DM{width:50px;max-width:50px;padding:12px}.iEepDtDljm_PdBbkR3JA .dcC_pqHYFgU16huYkWP5{padding:12px 12px 12px 16px}.iEepDtDljm_PdBbkR3JA .spPPzIkYjj024FZcGckd{font-size:20px;padding-left:12px}}
 .lOKzfPUFf3ukLT2wGZaY{display:grid;grid-template-columns:300px auto;gap:16px}.OIrZOBn2f036M5MGzc61,.adDQP_uvIYgNFVC4VdHj{background:#fff;padding:20px;overflow:auto}
 .yBjbWkudwA_AOwhHrnlc .ant-tree-title{font-weight:var(--font-weight-semibold)}.yBjbWkudwA_AOwhHrnlc button{margin-top:32px;width:100%}.yBjbWkudwA_AOwhHrnlc button:nth-child(3){margin-top:12px}.je000VEfsPqZupGr8ymu{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase}.tUDGWNXopUejF6zWJloy{margin-top:20px}
-.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.BAso_dbeoowN7VtxWiKx.W120L8cnn6ydwOqHngty{max-width:650px}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}@media(max-width: 768px){.GbZVOtcaUURjn4CweVjF{gap:12px}}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}@media(max-width: 768px){.C3Qrjv76hDipL39fyfzf{width:100%}}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:200px;max-width:450px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:100px;max-width:250px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}:where(.css-dev-only-do-not-override-f7vrd6).ant-cascader-dropdown .ant-cascader-menu-item-disabled{color:unset}
-.vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.k3OGGGQwXB0zmX0T61yt{display:flex;gap:32px}.JHuRhb2cRXyGWESiQ2TQ{width:100%}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:50px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
+.O0Juh2loT1HHb612gOA4 .ant-form-item{margin-bottom:0}.O0Juh2loT1HHb612gOA4 .ant-space{display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--color-blue);padding:16px 10px}.O0Juh2loT1HHb612gOA4 .ant-space-item{width:100%}.hg7oiINfKCZSUt6dEq4A{display:none}.BAso_dbeoowN7VtxWiKx{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-black);font-size:var(--font-size-body-4);line-height:100%;font-weight:var(--font-weight-medium);align-items:center}.BAso_dbeoowN7VtxWiKx.W120L8cnn6ydwOqHngty{max-width:650px}.qg_bZXG9dQdJvLBRGuqw{display:grid;grid-template-columns:minmax(18px, auto) 1fr 90px;gap:20px;color:var(--color-grey-dark);font-size:var(--font-size-body-3);align-items:center}.GbZVOtcaUURjn4CweVjF{display:flex;gap:40px;font-size:var(--font-size-body-3);align-items:center}@media(max-width: 768px){.GbZVOtcaUURjn4CweVjF{gap:12px}}.C3Qrjv76hDipL39fyfzf{display:flex;align-items:center;gap:8px}@media(max-width: 768px){.C3Qrjv76hDipL39fyfzf{width:100%}}.kknDal3CIbUXI7Lu2wPV{display:flex;align-items:center;justify-content:flex-start;gap:20px}.CIMvcFtQWcBY31wttg2C{min-width:200px;max-width:450px}@media(max-width: 768px){.CIMvcFtQWcBY31wttg2C{min-width:100px;max-width:250px}}.upuPapYjj1uGowukEEIi{display:none;align-items:center;justify-content:center}.KfrJPVKxY4b6bmXeJL5U{display:flex;align-items:center;justify-content:center;gap:16px}.zRPlv7rfSSACHPLZLs16,.EHyxN8DmDHOLkQDROSV5,.NLIlnBPfo09cpWYzpZ_J{font-size:var(--font-size-body-5);cursor:pointer}.AHIc83P7PkYUr3no83sO{margin-top:24px}.QcIGOVL3fVF6jLF1kIL3{width:150px;pointer-events:none}.QcIGOVL3fVF6jLF1kIL3 .ant-input-group-addon{pointer-events:auto;padding:0 8px;background:rgba(0,0,0,.01)}.QcIGOVL3fVF6jLF1kIL3 .ant-input{height:35px;text-align:center;padding:unset}.QcIGOVL3fVF6jLF1kIL3 :where(.css-dev-only-do-not-override-f7vrd6).ant-space-align-center{padding:0 2px;border-bottom:unset}:where(.css-dev-only-do-not-override-f7vrd6).ant-cascader-dropdown .ant-cascader-menu-item-disabled{color:unset}
+.vw302ajYc4_7bIROncyM{font-size:var(--font-size-body-4);font-weight:600;line-height:100%;color:var(--color-blue);text-transform:uppercase;margin-bottom:32px}.k3OGGGQwXB0zmX0T61yt{display:flex;gap:32px}.JHuRhb2cRXyGWESiQ2TQ{width:100%}.DrsaZTs1Ny6wZ76RwDR9{font-size:var(--font-size-body-2);color:var(--color-black);font-weight:700;text-transform:uppercase}.HVSssNqaNxLcYT_1lxBL{display:grid;grid-template-columns:minmax(200px, 1fr) auto auto auto auto;gap:46px}.ACPbYsV0wNkissVLHcFh{margin-top:16px}Label{margin-bottom:8px}.mIHYAri6ebHm4Oeb1ogj{min-width:200px}@media(max-width: 768px){.mIHYAri6ebHm4Oeb1ogj{min-width:150px}}.g19LZsD26yzPPjBtV31w .ant-select{width:100%}.g19LZsD26yzPPjBtV31w .ant-select-selector{border-color:rgba(var(--color-black-rgb), 0.5) !important;height:35px !important;display:flex;align-items:center}.g19LZsD26yzPPjBtV31w .ant-select-arrow{color:var(--color-black)}.g19LZsD26yzPPjBtV31w .ant-switch{width:30px}
 .j8_c3JHTX0JOkT36fF6A{contain:inline-size}.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{height:50px;width:300px}@media(min-width: 1024px){.j8_c3JHTX0JOkT36fF6A .HgmGSts5FIH3osmekIYG{width:450px}}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close{color:var(--color-white);font-size:12px}.j8_c3JHTX0JOkT36fF6A .xlaG0XsJDRR9AClqXzzC .anticon-close:hover{color:var(--color-black)}
 .BWmwZ5nFKyctBZyOAXzg{width:100%}.GWTSauaAl_v9W8o4YPxW{background:rgba(44,45,46,.0509803922);height:100%;position:relative}.GWTSauaAl_v9W8o4YPxW .ant-menu-light{background-color:rgba(0,0,0,0) !important;border-inline-end:none !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content{font-size:17px;line-height:20px;font-weight:var(--font-weight-semibold)}.GWTSauaAl_v9W8o4YPxW .ant-menu-title-content:hover{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-title-content{font-size:15px;line-height:18px;font-weight:var(--font-weight-medium)}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item{height:30px;line-height:30px;margin-bottom:16px}.GWTSauaAl_v9W8o4YPxW .ant-menu-sub .ant-menu-item:first-child{margin-top:-10px}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu{border-top:1px solid var(--color-orange);border-radius:0}.GWTSauaAl_v9W8o4YPxW .ant-menu-item:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-item-selected,.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-selected>.ant-menu-submenu-title{color:var(--color-orange);background-color:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline .ant-menu-sub.ant-menu-inline{background:initial}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title{height:50px !important;line-height:50px !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title:hover{background-color:initial !important}.GWTSauaAl_v9W8o4YPxW .ant-menu-submenu-title .anticon{color:var(--color-orange)}.GWTSauaAl_v9W8o4YPxW .ant-menu-inline.ant-menu-root .ant-menu-item>.ant-menu-title-content{overflow-x:auto;text-overflow:unset}.hWGer1IJ7RdkfQWwYfsw{position:absolute;top:24px;left:24px;right:24px;height:144px}.MD1FhirslDDwd2izGwai{font-size:var(--font-size-body-2);line-height:14px;font-weight:var(--font-weight-light);display:inline-block;padding:12px;cursor:pointer;position:absolute;right:0;top:60px}.RxGn4c38kNq8Ai4ypW_x{position:absolute;top:144px;left:24px;right:24px;bottom:0;overflow-y:auto;overflow-x:hidden;padding-bottom:24px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,.1)}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.9)}
 .rdjN4ln3xiUoa6Q0NMMm{display:flex;flex-direction:column;gap:16px;height:100%}@media(min-width: 600px){.rdjN4ln3xiUoa6Q0NMMm{display:grid;grid-template-columns:220px auto}}@media(min-width: 768px){.rdjN4ln3xiUoa6Q0NMMm{grid-template-columns:300px auto}}.Q4flbvKEPN6Jx9Cob22I{background:#ebeced;overflow:auto;padding:20px}@media(max-width: 599px){.Q4flbvKEPN6Jx9Cob22I{padding:20px 20px 0 20px;max-height:80px}}.hK3soC6m563VuiLnNutq{background:var(--color-white);overflow:auto;padding:20px}@media(max-width: 599px){.hK3soC6m563VuiLnNutq{height:100%}}.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-2);color:var(--color-blue);margin-bottom:12px;font-weight:var(--font-weight-semibold);text-transform:uppercase}@media(min-width: 768px){.guqqOMHeZE56Bg2p5Ad8{font-size:var(--font-size-body-4);margin-bottom:36px}}.wRCQxnQc_MZGDeiY1bcL{padding-bottom:15px;font-weight:var(--font-weight-bold);font-size:var(--font-size-body-2)}@media(min-width: 768px){.wRCQxnQc_MZGDeiY1bcL{font-size:var(--font-size-body-4)}}.JRmeFBsSP1f1HJwarMpc{cursor:pointer}.Y6yF3VITdrKdQzDtqTZX{padding-left:16px}.Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-semibold)}.Y6yF3VITdrKdQzDtqTZX .aKZCkmPsc0LiPdj3sEeG .Y6yF3VITdrKdQzDtqTZX .wRCQxnQc_MZGDeiY1bcL{font-weight:var(--font-weight-light)}.aKZCkmPsc0LiPdj3sEeG{display:block}.U_3frSKmaOQyTCb9oBkg{color:var(--color-orange)}.GEZDeWAneRLnZQyf4y9l{margin-bottom:16px}@media(min-width: 768px){.GEZDeWAneRLnZQyf4y9l{margin-bottom:24px}}.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-3);color:var(--color-blue);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.YcOvMLXE7vKR2Y0_BPRr{font-size:var(--font-size-body-4)}}.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-2);font-weight:var(--font-weight-light);color:var(--color-black)}@media(min-width: 768px){.vlMh_CCr45wbKV4fMhJx{font-size:var(--font-size-body-3)}}.NZ_ohAxNxhxZsCBr2PRA{display:flex;flex-direction:row;gap:12px;margin-bottom:24px}@media(min-width: 768px){.NZ_ohAxNxhxZsCBr2PRA{margin-bottom:36px}}.CArVrMs2ac6JvM1VGLSw{flex-direction:column;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2);margin-bottom:24px}.CArVrMs2ac6JvM1VGLSw .OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:none}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV{width:100%;height:auto}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-input{min-height:140px}.CArVrMs2ac6JvM1VGLSw .E9TXHxbgaI6LGMZHG9bV .ant-form-item{margin-bottom:16px}.OpqJ6gab6fPIq3KyckPO{width:100%;border-bottom:1px solid rgba(var(--color-blue-rgb), 0.2)}.E9TXHxbgaI6LGMZHG9bV{width:100px;height:50px;align-self:flex-end}.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-2);font-weight:var(--font-weight-semibold);margin-bottom:8px}@media(min-width: 768px){.xdLvKgnXC4tm2aa6tAap{font-size:var(--font-size-body-3)}}.r5obiTduSUBq1uL7oceW{font-weight:var(--font-weight-light);margin-bottom:4px}.CHFuXtnqohUXV_oCAEKD{font-weight:var(--font-weight-light);margin-top:20px;display:flex;gap:4px}._Bw2YaPxzqqQRpeCMde6{word-wrap:break-word;white-space:pre-wrap;max-height:100px;overflow:auto}.bIiuhNuRh643knAaSeyC{font-weight:var(--font-weight-semibold)}.DdqSfNoeh7KPEQiD0Zpe{margin-bottom:unset;width:100%}.sZh7rUlP4vu0LIE2fcab{font-weight:var(--font-weight-light);margin-bottom:4px;margin-top:16px}.mdSJ5YgFou8MwSkVypYb{margin-left:46px;margin-top:12px}.AvKaftoXc2t7E53rqtq6{display:flex;flex-direction:row;gap:12px;margin-top:12px;margin-bottom:12px;width:100%}.SgT02NKW7ogui8ih5ehj{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}.SgT02NKW7ogui8ih5ehj:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.WPOztO5lxS5PXlAz75dE{color:var(--color-black);background-color:var(--color-white);border:1px var(--color-black) solid;min-width:100px;height:20px;font-size:10px;padding:unset}.WPOztO5lxS5PXlAz75dE:hover{background-color:var(--color-grey-light);color:var(--color-black) !important;border:1px var(--color-black) solid !important}.Yz6q7yIXvsA956q84MoK{min-width:100% !important}.wNWP4ysIqgPu6PZjqhL4{width:25%;height:40px}@media(max-width: 767px){.wNWP4ysIqgPu6PZjqhL4{width:50%}}.WMxJFTbZxL1XrEMouOTq{width:25%;height:40px}@media(max-width: 767px){.WMxJFTbZxL1XrEMouOTq{width:50%}}.ant-upload-wrapper{line-height:12px}.ant-upload-wrapper .ant-upload-list .ant-upload-list-item{max-width:100px !important}@media(max-width: 767px){.ant-upload-wrapper .ant-upload-list .ant-upload-list-item{max-width:90px !important}}:where(.css-dev-only-do-not-override-f7vrd6).ant-input-number .ant-input-number-input{height:35px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.2.05",
+  "version": "1.2.06",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/Category/Category.stories.tsx

@@ -55,6 +55,7 @@ const Template: Story<any> = (args) => {
             "State": "Finished",
             "Grade": 0,
             "Rank": 0,
+            "UseName": true,
             "Options": [
                 {
                     "Value": "Sim",
@@ -67,6 +68,12 @@ const Template: Story<any> = (args) => {
                     "Grade": 10,
                     "Color": "#00000",
                     "NeedsAction": true
+                },
+                {
+                    "Value": "xpto",
+                    "Grade": 10,
+                    "Color": "#00000",
+                    "NeedsAction": true
                 }
             ],
             "CreateDate": "2024-04-12T14:58:32.085Z",
@@ -83,7 +90,7 @@ const Template: Story<any> = (args) => {
             "IsNumerical": false,
             "IsDate": false,
             "HasGrade": false,
-            "IsEmphasis": false,
+            "IsEmphasis": true,
             "IsMultipleChoise": true,
             "State": "Draft",
             "Grade": 0,

package/src/components/Category/CategoryContent/styles.module.scss

@@ -53,7 +53,7 @@ Label {
 
         .ant-select-selector {
             border-color: rgba(var(--color-black-rgb), .5) !important;
-            height: 50px !important;
+            height: 35px !important;
             display: flex;
             align-items: center;
         }

package/src/components/CategoryResponse/index.tsx

@@ -410,7 +410,7 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                         ? <Form.Item
                                             name={["Questions", index, "Answer"]}
                                         >
-                                            <TextArea />
+                                            <TextArea disabled={question.Disabled} />
                                         </Form.Item>
 
                                         : question.IsDate
@@ -446,7 +446,6 @@ export const CategoryResponse = React.forwardRef((props: CategoryResponse, ref)
                                                                 ? question?.Options?.map((option: any) => ({ label: option.Value, value: option.Value }))
                                                                 : evaluationOptions[selectedEvaluationOption]
                                                         }
-                                                        // style={{ minWidth: '100%' }}
                                                         mode={form.getFieldValue(`Questions`)?.[index]?.IsMultipleChoise ? "multiple" : undefined}
                                                         customClass={styles.selectAnswerStyle}
                                                     />

package/src/components/Questions/SingleQuestion/index.tsx

@@ -1,8 +1,8 @@
-import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { Checkbox, ColorPicker, Form, Input, Select, Space } from 'antd';
+import { DeleteOutlined, DownOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Checkbox, ColorPicker, Form, Input, Select, Space, Dropdown } from 'antd';
 import { t } from 'i18next';
 import styles from './styles.module.scss';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import classnames from 'classnames';
 
 export const SingleQuestion = ({
@@ -21,9 +21,15 @@ export const SingleQuestion = ({
     form,
     ...restField
 }: any) => {
+
+    const responseTypeCurrentValue = form.getFieldsValue().questions?.[name]?.responseType;
+    const initialEmphasisValue = form.getFieldsValue().questions?.[name]?.emphasis;
+
     const [mandatoryCheckbox, setMandatoryCheckbox] = useState<boolean>(false);
-    const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
+    const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(initialEmphasisValue ? initialEmphasisValue : true);
     const [multipleChoiseCheckbox, setMultipleChoiseCheckbox] = useState<boolean>(false);
+    const [flaggedOptions, setFlaggedOptions] = useState([]);
+
 
     const filteredResponsesMultiple = responseTypeOptions
         ?.filter((item: { IsMultipleChoise: any; }) => item.IsMultipleChoise)
@@ -61,19 +67,16 @@ export const SingleQuestion = ({
         };
     });
 
-    const handleResponseType = (selectedValue: string) => {
-        const selectedResponseType = sortedAnswerTypeOptions.find(
-            (type: any) => type.Id === selectedValue
-        );
-
-        if (selectedResponseType) {
-            const hasNeedsAction = selectedResponseType.Options.some(
-                (option: any) => option.NeedsAction === true
-            );
-
-            // setEmphasisCheckbox(hasNeedsAction);
-        }
+    const handleResponseType = () => {
         handleChanges();
+        setEmphasisCheckbox(true);
+        form.setFieldsValue({
+          questions: {
+            [name]: {
+              emphasis: true,
+            },
+          },
+        });
     };
 
     const onCheckboxMultipeChoiseHandler = (checked: boolean) => {
@@ -91,6 +94,34 @@ export const SingleQuestion = ({
         handleChanges();
     };
 
+    useEffect(() => {
+        const selectedResponseType = form.getFieldValue(['questions', name, 'responseType']);
+        
+        if (selectedResponseType) {
+            const selectedAnswerType = sortedAnswerTypeOptions.find(
+                (answerType: any) => answerType.Id === selectedResponseType
+            );
+
+            if (selectedAnswerType) {
+                const flagged = selectedAnswerType.Options?.filter((option: any) => option.NeedsAction) || [];
+                setFlaggedOptions(flagged);
+            }
+        } else {
+            setFlaggedOptions([]);
+        }
+    }, [responseTypeCurrentValue]);
+
+    const getFlaggedOptionsMenu = () => {
+        return flaggedOptions.map((option: any, idx) => ({
+            key: idx,
+            label: (
+                <span key={idx} style={{ color: option.Color }}>
+                    {option.Value} ({option.Grade}) 🚩
+                </span>
+            ),
+        }));
+    };
+
     const canDrag = !((restField.fieldKey === 0 || restField.fieldKey === 1) && isTheHeader);
 
     const questionStyle = classnames({
@@ -195,19 +226,30 @@ export const SingleQuestion = ({
 
                                 {filteredResponsesEmphasised?.includes(form.getFieldsValue().questions?.[name]?.responseType) &&
                                     <div className={styles.checkboxContainer}>
-                                        <Form.Item
-                                            {...restField}
-                                            name={[name, 'emphasis']}
-                                            valuePropName='checked'
-                                        // getValueProps={() => ({ checked: emphasisCheckbox })}
-                                        >
-                                            <Checkbox
-                                                onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)}
-                                                checked={emphasisCheckbox}
-                                            />
-                                        </Form.Item>
-
-                                        <span>{t('components.category.emphasisAnswer')}</span>
+                                        <Input
+                                            addonBefore={
+                                                <Form.Item
+                                                    {...restField}
+                                                    name={[name, 'emphasis']}
+                                                    valuePropName='checked'
+                                                    initialValue={initialEmphasisValue ? initialEmphasisValue : true}
+                                                >
+                                                    <Checkbox
+                                                        onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)}
+                                                        checked={emphasisCheckbox}
+                                                    />
+                                                </Form.Item>
+                                            }
+                                            addonAfter={
+                                                <Dropdown menu={{ items: getFlaggedOptionsMenu() }}>
+                                                    <a>
+                                                        <DownOutlined />
+                                                    </a>
+                                                </Dropdown>
+                                            }
+                                            defaultValue={t('components.category.emphasisAnswer')!}
+                                            className={styles.emphasisInputStyle}
+                                        />
                                     </div>
                                 }
 

package/src/components/Questions/SingleQuestion/styles.module.scss

@@ -111,6 +111,30 @@ $questionAndInformationGap: 20px;
     margin-top: 24px;
 }
 
+.emphasisInputStyle {
+    width: 150px;
+    pointer-events: none;
+
+    :global {
+        .ant-input-group-addon {
+            pointer-events: auto;
+            padding: 0 8px;
+            background: rgba(0, 0, 0, 0.01);
+        }
+
+        .ant-input {
+            height: 35px;
+            text-align: center;
+            padding: unset;
+        }
+
+        :where(.css-dev-only-do-not-override-f7vrd6).ant-space-align-center {
+            padding: 0 2px;
+            border-bottom: unset;
+        }
+    }
+}
+
 :global {
     :where(.css-dev-only-do-not-override-f7vrd6).ant-cascader-dropdown .ant-cascader-menu-item-disabled {
         color: unset;