@omniumretail/component-library 1.1.94 → 1.1.96

package/dist/main.css

@@ -8,14 +8,14 @@
 .YPXf1KvhUKPvYzjuCpbK{display:block;color:var(--color-black);text-transform:capitalize;font-size:var(--font-size-body-base);line-height:125%;font-weight:var(--font-weight-semibold)}.YPXf1KvhUKPvYzjuCpbK:not(:first-child){margin-top:8px}.ExPJyFK95xTcgtx9cRbg{text-transform:uppercase}
 .EBnBgAHgtsQFrDoso9Dw{background-color:var(--color-orange);height:1px;border:none}.FLVlQ5eFtNDkCl4IcIIx{opacity:50%}.L2HU9MLCi6B1ZsJyWfp9{background-color:var(--color-blue)}.MQcBac9Gnb9D2ONENY8Q{margin:8px 0}.tdvYp9O5RnLEsNa3E_wz{margin:16px 0}.hWWGCDnwP_ROWFDlyVxe{margin:24px 0}
 .pwZdBKCECvzAH92fQDTI{display:flex;flex-wrap:wrap;flex-direction:column}.pwZdBKCECvzAH92fQDTI .ant-table-thead>tr>th{background-color:rgba(0,0,0,0);border:0px;color:var(--color-blue)}.pwZdBKCECvzAH92fQDTI .ant-table-thead>tr>th:before{display:none}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr{cursor:pointer}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:last-child>td{border-bottom:1px solid var(--color-grey-light) !important}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:first-child>td{border-top:1px solid var(--color-blue) !important}.pwZdBKCECvzAH92fQDTI .ant-table-tbody>tr:hover td{border-radius:0 !important;border-bottom-color:var(--color-grey-light) !important}.pwZdBKCECvzAH92fQDTI .ant-space{align-self:flex-end}.pwZdBKCECvzAH92fQDTI .ant-select-selection-placeholder{color:var(--color-black)}.pwZdBKCECvzAH92fQDTI .ant-select-selector,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search{border:none !important;box-shadow:none !important}.pwZdBKCECvzAH92fQDTI .ant-select-selector:focus,.pwZdBKCECvzAH92fQDTI .ant-select-selector:hover,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:focus,.pwZdBKCECvzAH92fQDTI .ant-select-focused .ant-select-selection-search:hover{border:none !important;box-shadow:none !important}.pwZdBKCECvzAH92fQDTI .ant-pagination{max-width:calc(100% - 200px);margin-left:auto !important}.pwZdBKCECvzAH92fQDTI button[type=button].ant-pagination-item-link{margin-top:0 !important}.pwZdBKCECvzAH92fQDTI button[type=button]{margin-top:-50px}.ant-spin-dot-item{background-color:var(--color-blue) !important;opacity:1 !important}.ant-spin-dot-item:nth-child(2){background-color:var(--color-orange) !important;opacity:1}.ant-spin-dot-item:nth-child(3){background-color:var(--color-blue) !important;opacity:1}.ant-spin-dot-item:nth-child(4){background-color:var(--color-orange) !important;opacity:1}
-.yhGDUJJiYhqjPCJgNdjI{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .ant-switch.ant-switch-checked .ant-switch-handle{inset-inline-start:calc(100% - 14px)}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI{margin-top:16px}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI.sFDpKKys2XzhCHAvcoE3{pointer-events:none}.LEywos4xlf3LV6eEFLFv{height:50px;display:flex;align-items:center;gap:12px;padding:16px;margin-inline-end:0;width:100%}.LEywos4xlf3LV6eEFLFv .ant-input{height:50px;padding-left:40px}.VhQgSZHBi1swQZeQePfL{height:50px}.Hfh5KLg4Y_g44Ajhx9aV .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-right:24px;min-height:34px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close{color:var(--color-white);font-size:12px;position:absolute;right:4px;top:10px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover{color:var(--color-black)}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H{background-color:var(--color-grey) !important}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H[aria-checked=true]{background:var(--color-orange) !important}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H{min-width:28px;height:16px;line-height:16px}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H .ant-switch-handle{width:12px;height:12px}.yhGDUJJiYhqjPCJgNdjI .Ds9QXq3nvfH3xjzeP87H .ant-switch-inner{padding-inline-start:18px;padding-inline-end:6px}}.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{display:flex;align-items:center;gap:32px;width:calc(100% - 40px)}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{gap:12px;width:calc(100% - 20px)}}.yhGDUJJiYhqjPCJgNdjI .Gj9zvBh4toFNL6uoWOIk{display:flex;gap:12px}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL{display:flex;flex-direction:row;gap:12px;font-family:"SilkaBold";text-decoration:underline}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL div{cursor:pointer}
+.yhGDUJJiYhqjPCJgNdjI{contain:inline-size}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI{margin-top:16px}.yhGDUJJiYhqjPCJgNdjI .G9kG_bHpbSm0APdxALXI.sFDpKKys2XzhCHAvcoE3{pointer-events:none}.LEywos4xlf3LV6eEFLFv{height:50px;display:flex;align-items:center;gap:12px;padding:16px;margin-inline-end:0;width:100%}.LEywos4xlf3LV6eEFLFv .ant-input{height:50px;padding-left:40px}.VhQgSZHBi1swQZeQePfL{height:50px}.Hfh5KLg4Y_g44Ajhx9aV .ant-tag{background-color:var(--color-orange);color:var(--color-white);padding:6px 16px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-right:24px;min-height:34px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close{color:var(--color-white);font-size:12px;position:absolute;right:4px;top:10px}.Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover{color:var(--color-black)}.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{display:flex;align-items:center;gap:32px;width:calc(100% - 40px)}@media(max-width: 768px){.yhGDUJJiYhqjPCJgNdjI .shyWfuOXQO29Vq9I8XGV{gap:12px;width:calc(100% - 20px)}}.yhGDUJJiYhqjPCJgNdjI .Gj9zvBh4toFNL6uoWOIk{display:flex;gap:12px}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL{display:flex;flex-direction:row;gap:12px;font-family:"SilkaBold";text-decoration:underline}.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL div{cursor:pointer}.yhGDUJJiYhqjPCJgNdjI .Qw2jwswWLKYVmJayZ1oJ{display:flex;gap:20px}.yhGDUJJiYhqjPCJgNdjI .rxp2cwAB1kcsYH2aGI5w{margin-top:2px}
+.gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
 .vdTO5pKaLXA2FdyblLq5{border-color:rgba(var(--color-black-rgb), 0.5)}
 .e3BZiSKkbgvekUOREMi6{font-weight:var(--font-weight-medium);font-size:var(--font-size-body-3);margin-right:44px;margin-top:18px}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner{border-color:var(--color-black)}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked .ant-radio-inner:after{background-color:var(--color-black)}.e3BZiSKkbgvekUOREMi6 .ant-radio-checked:hover .ant-radio-inner:after{background-color:var(--color-orange)}.e3BZiSKkbgvekUOREMi6 .ant-radio:hover .ant-radio-inner{border-color:var(--color-orange)}
 .D8zh2JqbXPRwa7HPZoou{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:0 16px;background-color:var(--color-black);position:fixed;bottom:0;width:100%;padding:12px 24px;font-size:var(--font-size-body-1);color:var(--color-grey-light);height:60px;flex-direction:row;text-align:left;box-sizing:border-box}.D8zh2JqbXPRwa7HPZoou .rLcS8I6I0aB1gd6Ro7Ix{color:var(--grey2);width:100%;margin-bottom:4px}.D8zh2JqbXPRwa7HPZoou .I18ixqhkBJrOHeIm9ELH{margin-left:8px}.D8zh2JqbXPRwa7HPZoou .XVFO_EVWpXwEwbcS7OwM,.D8zh2JqbXPRwa7HPZoou .I18ixqhkBJrOHeIm9ELH{display:inline-block}.D8zh2JqbXPRwa7HPZoou .Ch59mk3ENKwL_xUV4kwI{height:25px;align-self:flex-end}
 .yBVWvA0RtFgQb0zg7Zha .ant-modal-close{width:auto;color:var(--button-default-background)}.yBVWvA0RtFgQb0zg7Zha .ant-modal-close:hover{background-color:rgba(0,0,0,0);color:var(--button-default-background-hover-color)}.yBVWvA0RtFgQb0zg7Zha .ant-modal-content{padding:36px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}@media(min-width: 742px){.yBVWvA0RtFgQb0zg7Zha .ant-modal-content{padding:64px}}.yBVWvA0RtFgQb0zg7Zha .bIn9Tnsli5FWDJmVQ47h:hover .hAGMAlh5JyPDAiKMfgws{color:red}.yBVWvA0RtFgQb0zg7Zha .hAGMAlh5JyPDAiKMfgws{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;color:inherit;font-size:var(--font-size-body-3);line-height:100%;font-weight:var(--font-weight-light);text-transform:capitalize;letter-spacing:.6px}.yBVWvA0RtFgQb0zg7Zha .IEpOAjgZyRyE5md9cZvT{color:var(--color-blue);font-weight:var(--font-weight-semibold);font-size:var(--font-size-body-6);line-height:100%}.yBVWvA0RtFgQb0zg7Zha .iHFpZ9nbZF0FARnRj310{color:var(--color-black);font-size:var(--font-size-body-4);margin:12px 0 24px 0;padding:0}
 .bMNL7jiNu8_mW6dwEyoS.luQHokN_GXPiYlWneKVa{pointer-events:none;position:relative}.bMNL7jiNu8_mW6dwEyoS.luQHokN_GXPiYlWneKVa:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--color-white-rgb), 0.6);z-index:9999999}.bMNL7jiNu8_mW6dwEyoS .ant-modal-close{width:auto;color:var(--button-default-background)}.bMNL7jiNu8_mW6dwEyoS .ant-modal-close:hover{background-color:rgba(0,0,0,0);color:var(--button-default-background-hover-color)}.bMNL7jiNu8_mW6dwEyoS .ant-modal-content{padding:36px 24px;display:flex;justify-content:center;flex-direction:column;text-align:center}@media(min-width: 742px){.bMNL7jiNu8_mW6dwEyoS .ant-modal-content{padding:32px}}.bMNL7jiNu8_mW6dwEyoS .ant-modal-body{width:100%;padding-top:24px}.bMNL7jiNu8_mW6dwEyoS .ant-modal-footer button{margin-left:auto}.bMNL7jiNu8_mW6dwEyoS .WCOz4jFqbuSsRmxOc2Dq{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;color:inherit;font-size:var(--font-size-body-3);line-height:100%;font-weight:var(--font-weight-light);text-transform:capitalize;letter-spacing:.6px;justify-self:flex-end}.bMNL7jiNu8_mW6dwEyoS .WCOz4jFqbuSsRmxOc2Dq>p{padding:0;margin:0}.bMNL7jiNu8_mW6dwEyoS .mt484L3ogFPJIZmEQ8q_{max-width:640px;text-align:left}
 .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}}
-.gER2xKwlnobsIz4BLhGJ{background-color:var(--color-grey) !important}.gER2xKwlnobsIz4BLhGJ[aria-checked=true]{background:var(--color-orange) !important}
 .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}

package/dist/types/components/ResponsiveTable/index.d.ts

@@ -44,6 +44,6 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     buttonActionName?: string;
     buttonActionLabel?: (record: any) => string | null;
     buttonActionMethod?: () => void;
-    buttonActionStyle?: string;
+    buttonActionStyle?: string | ((record: any) => any);
 }
 export declare const ResponsiveTable: (props: ResponsiveTableCustomProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Switch/index.d.ts

@@ -1,2 +1,5 @@
 import { SwitchProps } from 'antd';
-export declare const Switch: ({ ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export interface NewSwitchProps extends SwitchProps {
+    customClass?: string;
+}
+export declare const Switch: ({ customClass, ...props }: NewSwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Tag/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TagProps } from 'antd';
 export interface customTagProps extends TagProps {
     customTags?: string[];
@@ -10,5 +11,6 @@ export interface customTagProps extends TagProps {
     addExtraTags?: string;
     disable?: boolean;
     addSwitch?: boolean;
+    setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 export declare const TagField: (props: customTagProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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

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

@@ -50,7 +50,7 @@ const Template: Story<any> = (args) => {
             "IsNumeric": false,
             "IsDate": false,
             "HasGrade": false,
-            "IsEmphasis": false,
+            "IsEmphasis": true,
             "IsMultipleChoise": true,
             "State": "Finished",
             "Grade": 0,

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

@@ -24,10 +24,14 @@ export const SingleQuestion = ({
     const [emphasisCheckbox, setEmphasisCheckbox] = useState<boolean>(false);
     const [multipleChoiseCheckbox, setMultipleChoiseCheckbox] = useState<boolean>(false);
 
-    const filteredIds = responseTypeOptions
+    const filteredResponsesMultiple = responseTypeOptions
         ?.filter((item: { IsMultipleChoise: any; }) => item.IsMultipleChoise)
         ?.map((item: { Id: any; }) => item.Id);
 
+    const filteredResponsesEmphasised = responseTypeOptions
+        ?.filter((item: { IsEmphasis: any; }) => item.IsEmphasis)
+        ?.map((item: { Id: any; }) => item.Id);
+
     const sortedAnswerTypeOptions = responseTypeOptions?.sort((a: any, b: any) => {
         return Number(a.IsMultipleChoise) - Number(b.IsMultipleChoise);
     });
@@ -180,23 +184,25 @@ export const SingleQuestion = ({
                                     <span>{t('components.category.mandatoryAnswer')}</span>
                                 </div>
 
-                                <div className={styles.checkboxContainer}>
-                                    <Form.Item
-                                        {...restField}
-                                        name={[name, 'emphasis']}
-                                        valuePropName='checked'
+                                {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>
+                                        >
+                                            <Checkbox
+                                                onChange={(e) => onCheckboxEmphasisHandler(e.target.checked)}
+                                                checked={emphasisCheckbox}
+                                            />
+                                        </Form.Item>
 
-                                    <span>{t('components.category.emphasisAnswer')}</span>
-                                </div>
+                                        <span>{t('components.category.emphasisAnswer')}</span>
+                                    </div>
+                                }
 
-                                {filteredIds?.includes(form.getFieldsValue().questions?.[name]?.responseType) &&
+                                {filteredResponsesMultiple?.includes(form.getFieldsValue().questions?.[name]?.responseType) &&
                                     < div className={styles.checkboxContainer}>
                                         <Form.Item
                                             {...restField}

package/src/components/ResponsiveTable/index.tsx

@@ -50,7 +50,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     buttonActionName?: string;
     buttonActionLabel?: (record: any) => string | null;
     buttonActionMethod?: () => void;
-    buttonActionStyle?: string;
+    buttonActionStyle?: string | ((record: any) => any);
 }
 
 export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
@@ -206,11 +206,15 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
                 render: (_: any, record: any) => {
                     if (!items?.[0]) return null;  
                     const buttonLabel = buttonActionLabel ? buttonActionLabel(record) : null;
+                    
+                    const buttonClass = typeof buttonActionStyle === 'function' 
+                    ? buttonActionStyle(record) // Se for uma função, chama com o `record`
+                    : buttonActionStyle || ''; // Se for string, usa diretamente
 
                     return (
                         <Space size="middle">
                             {(buttonActionName || buttonLabel) &&
-                                <Button customClass={buttonActionStyle} onClick={() => buttonActionMethod?.()}>{buttonActionName || buttonLabel}</Button>
+                                <Button customClass={buttonClass} onClick={() => buttonActionMethod?.()}>{buttonActionName || buttonLabel}</Button>
                             }
 
                             <Dropdown menu={{ items }}>

package/src/components/Switch/index.tsx

@@ -1,8 +1,18 @@
 import { Switch as AntdSwitch, SwitchProps } from 'antd';
 import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+export interface NewSwitchProps extends SwitchProps {
+    customClass?: string;
+}
+
+export const Switch = ({ customClass, ...props }: NewSwitchProps) => {
+    const selectClasses = {
+        [styles.switch]: true,
+        [`${customClass}`]: customClass,
+    }
 
-export const Switch = ({...props}: SwitchProps) => {
     return (
-        <AntdSwitch { ...props } className={styles.switch}/>
+        <AntdSwitch {...props} className={ classNames(selectClasses) } />
     );
 };

package/src/components/Tag/Tag.stories.tsx

@@ -12,11 +12,22 @@ export default {
 const Template: Story<TagProps> = (args) => {
     const [tagsInfo, setTagsInfo] = useState<any>({});
     const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>({});
-    const advancedsFilters = [{ display: t('components.tag.State'), value: "State"}, { display: t('components.tag.1'), value: "Olaaaaaa"}];
+    const advancedsFilters = [{ display: t('components.tag.State'), value: "State" }, { display: t('components.tag.1'), value: "Olaaaaaa" }];
+    const [switchTest, setSwitchTest] = useState<boolean>(false);
 
-    console.log('page: basic', tagsInfo,'advanced', advancedTagsInfo);
-    
-    return <TagField disable={false} {...args} advancedTags={advancedsFilters} tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo} addExtraTags={"ola"}></TagField>;
+    console.log(switchTest);
+
+    console.log('page: basic', tagsInfo, 'advanced', advancedTagsInfo);
+
+    return <TagField
+        disable={false}
+        {...args}
+        setInactiveUsersSwitch={setSwitchTest}
+        advancedTags={advancedsFilters}
+        tagsInfo={setTagsInfo}
+        advancedTagsInfo={setAdvancedTagsInfo}
+        addExtraTags={"ola"}>
+    </TagField>;
 }
 
 export const Primary = Template.bind({});

package/src/components/Tag/index.tsx

@@ -6,7 +6,7 @@ import { TweenOneGroup } from 'rc-tween-one';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { t } from 'i18next';
-import { Switch } from 'antd';
+import { Switch } from '../Switch';
 
 export interface customTagProps extends TagProps {
     customTags?: string[];
@@ -16,6 +16,7 @@ export interface customTagProps extends TagProps {
     addExtraTags?: string;
     disable?: boolean;
     addSwitch?: boolean;
+    setInactiveUsersSwitch?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const TagField = (props: customTagProps) => {
@@ -191,12 +192,6 @@ export const TagField = (props: customTagProps) => {
                         <SearchOutlined /> {t('components.tag.search')}
                     </Tag>
                 )}
-
-                    {/* <Switch
-                        checked={switchValue}
-                        onChange={() => setSwitchValue(!switchValue)}
-                        className={styles.switch}
-                    /> */}
             </div>
 
             {
@@ -210,6 +205,21 @@ export const TagField = (props: customTagProps) => {
                     </div>
                 </div>
             }
+
+            {props.setInactiveUsersSwitch &&
+                <div className={styles.switchContainer}>
+                    <div className={styles.inactiveLabel}>
+                        {t('components.tag.inactiveSwitch')}:
+                    </div>
+
+                    <Switch
+                        size={"small"}
+                        customClass={styles.inactiveSwitchStyle}
+                        onChange={(checked) => props?.setInactiveUsersSwitch!(checked)}
+                    />
+                </div>
+            }
+
             <div className={`${styles.tagsContainer} ${disable ? styles.disabled : ''}`}>
                 <TweenOneGroup
                     enter={{

package/src/components/Tag/styles.module.scss

@@ -1,12 +1,6 @@
 .tagfield {
     contain: inline-size;
 
-    :global {
-        .ant-switch.ant-switch-checked .ant-switch-handle {
-            inset-inline-start: calc(100% - 14px);
-        }
-    }
-
     .tagsContainer {
         margin-top: 16px;
 
@@ -65,34 +59,6 @@
         }
     }
 
-    .switch {
-        background-color: var(--color-grey) !important;
-
-        &[aria-checked="true"] {
-            background: var(--color-orange) !important;
-        }
-
-        @media (max-width: 768px) {
-            min-width: 28px;
-            height: 16px;
-            line-height: 16px;
-
-            :global {
-                .ant-switch-handle {
-                    width: 12px;
-                    height: 12px;
-                }
-
-
-
-                .ant-switch-inner {
-                    padding-inline-start: 18px;
-                    padding-inline-end: 6px;
-                }
-            }
-        }
-    }
-
     .switchInputContainer {
         display: flex;
         align-items: center;
@@ -121,4 +87,13 @@
             cursor: pointer;
         }
     }
+
+    .switchContainer {
+        display: flex;
+        gap: 20px;
+    }
+
+    .inactiveSwitchStyle {
+        margin-top: 2px;
+    }
 }

package/src/locales/en.json

@@ -53,7 +53,7 @@
             "errorResponseType": "Response type missing",
             "header": "Header",
             "color": "Assigned colour",
-            "flagged": "Flagged",
+            "flagged": "Emphasise",
             "multipleChoise": "Multiple selection",
             "placeholderScore": "Score",
             "answerNameIsMissing": "Missing name",
@@ -102,7 +102,8 @@
         "tag": {
             "search": "Search",
             "advancedFields": "Advanced Filters",
-            "State": "State"
+            "State": "State",
+            "inactiveSwitch": "Include inactives"
         },
         "table": {
             "selectAll": "Select All",

package/src/locales/es.json

@@ -53,7 +53,7 @@
             "errorResponseType": "Tipo de respuesta faltante",
             "header": "Cabecera",
             "color": "Color asignado",
-            "flagged": "Marcado",
+            "flagged": "Destacar",
             "multipleChoise": "Selección múltiple",
             "placeholderScore": "Puntuación",
             "answerNameIsMissing": "Falta el nombre",
@@ -102,7 +102,8 @@
         "tag": {
             "search": "Buscar",
             "advancedFields": "Filtros Avanzados",
-            "State": "Estado"
+            "State": "Estado",
+            "inactiveSwitch": "Incluir inactivos"
         },
         "table": {
             "selectAll": "Seleccionar Todo",

package/src/locales/pt.json

@@ -54,7 +54,7 @@
             "answerNameIsMissing": "Nome em falta",
             "header": "Cabeçalho",
             "color": "Cor atribuída",
-            "flagged": "Sinalizado",
+            "flagged": "Destacar",
             "multipleChoise": "Seleção múltipla",
             "placeholderScore": "Pontuação",
             "typeResponseNameIsMissing": "Nome do tipo de resposta em falta",
@@ -102,7 +102,8 @@
         "tag": {
             "search": "Procurar",
             "advancedFields": "Filtros avançados",
-            "State": "Estado"
+            "State": "Estado",
+            "inactiveSwitch": "Incluir inativos"
         },
         "table": {
             "selectAll": "Selecionar todos",