qlu-20-ui-library 1.0.0

package/dist/assets/index-655b6c8f.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter";#root{min-width:100vw;min-height:100vh;display:flex;align-items:center;justify-content:center;gap:24px}body{margin:0;background-color:#000}.appClass{padding:24px;min-width:100vw;min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;align-items:left;gap:24px}.appClass>span{display:flex;flex-direction:row;gap:12px}.appClass>span>h2{background-color:gray;padding:2px;border-radius:12px}.primary-orange--CircularSvgButton{background-color:#ff8d4e;transition:background-color .3s ease-in-out,color .3s ease-in-out;border:none}.primary-orange--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#190e08;stroke:#190e08}.primary-orange--CircularSvgButton:hover{background-color:#c3713e}.primary-orange--CircularSvgButton:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#fff;stroke:#fff}.primary-orange--CircularSvgButton:active:not(:disabled){outline:2px solid #FFB58C}.primary-gray--CircularSvgButton{background-color:#999;transition:background-color .3s ease-in-out,color .3s ease-in-out;border:none}.primary-gray--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#0f0f0f;stroke:#0f0f0f}.primary-gray--CircularSvgButton:hover{background-color:#868686}.primary-gray--CircularSvgButton:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#0f0f0f;stroke:#0f0f0f}.primary-gray--CircularSvgButton:active:not(:disabled){outline:2px solid #ADADAD}.primary-black--CircularSvgButton{background-color:#232323;transition:background-color .3s ease-in-out,color .3s ease-in-out;border:none}.primary-black--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#fff;stroke:#fff}.primary-black--CircularSvgButton:hover{background-color:#373737}.primary-black--CircularSvgButton:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#fff;stroke:#fff}.primary-black--CircularSvgButton:active:not(:disabled){outline:2px solid #999999}.secondary-orange--CircularSvgButton{background-color:transparent;border:1px solid #FF8D4E;transition:background-color .3s ease-in-out,color .3s ease-in-out}.secondary-orange--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#190e08;stroke:#190e08}.secondary-orange--CircularSvgButton:hover{background-color:#ff8d4e}.secondary-orange--CircularSvgButton:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#fff;stroke:#fff}.secondary-orange--CircularSvgButton:active:not(:disabled){outline:2px solid #FFB58C}.secondary-gray--CircularSvgButton{background-color:transparent;border:1px solid #868686;transition:background-color .3s ease-in-out,color .3s ease-in-out}.secondary-gray--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#0f0f0f;stroke:#0f0f0f}.secondary-gray--CircularSvgButton:hover{background-color:#868686}.secondary-gray--CircularSvgButton:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#fff;stroke:#fff}.secondary-gray--CircularSvgButton:active:not(:disabled){outline:2px solid #ADADAD}.secondary-black--CircularSvgButton{background-color:transparent;border:1px solid #232323;transition:background-color .3s ease-in-out,color .3s ease-in-out}.secondary-black--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#0f0f0f;stroke:#0f0f0f}.secondary-black--CircularSvgButton:hover{background-color:#232323}.secondary-black--CircularSvgButton:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#fff;stroke:#fff}.secondary-black--CircularSvgButton:active:not(:disabled){outline:2px solid #999999}.tertiary-gray--CircularSvgButton{background-color:#373737;border:none;transition:background-color .3s ease-in-out,color .3s ease-in-out}.tertiary-gray--CircularSvgButton>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#d5d5d5;stroke:#d5d5d5}.tertiary-gray--CircularSvgButton:hover{background-color:#4b4b4b}.tertiary-gray--CircularSvgButton:active:not(:disabled){outline:2px solid #727272}.circularSvgButtonGeneric{display:flex;align-items:center;justify-content:center;border-radius:50vh;height:fit-content}.circularSvgButtonGeneric:hover{cursor:pointer}.xxsSize--CircularSvgButton{padding:0}.xsSize--CircularSvgButton{padding:6px}.smSize--CircularSvgButton{padding:8px}.baseSize--CircularSvgButton{padding:10px}.lSize--CircularSvgButton{padding:12px}.xlSize--CircularSvgButton{padding:14px}.clickableTextGeneric{display:flex;flex-direction:row;background:transparent;border-radius:8px;gap:8px;width:fit-content;height:fit-content;outline:none;border:1px solid transparent}.clickableTextGeneric:hover{cursor:pointer}.iconOnLeftClickableText{flex-direction:row-reverse}.orangeClickableText{color:#ff8d4e;transition:color .3s ease-in-out,background-color .3s ease-in-out,border .3s ease-in-out,outline .3s ease-in-out}.orangeClickableText>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#ff8d4e;stroke:#ff8d4e}.orangeClickableText:hover{color:#ff9e69}.orangeClickableText:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#ff9e69;stroke:#ff9e69}.grayClickableText{color:#999;transition:color .3s ease-in-out,background-color .3s ease-in-out,border .3s ease-in-out,outline .3s ease-in-out}.grayClickableText>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#999;stroke:#999}.grayClickableText:hover{color:#c1c1c1}.grayClickableText:hover>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#c1c1c1;stroke:#c1c1c1}.xsSizeClickableText{font-family:Inter;font-size:12px;font-weight:500;line-height:18px;padding:2px 4px}.smSizeClickableText{font-family:Inter;font-size:14px;font-weight:500;line-height:21px;padding:4px 8px}.baseSizeClickableText{font-family:Inter;font-size:16px;font-weight:500;line-height:24px;padding:6px 12px}.companyPillNotClickable{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:8px 16px 8px 8px;border-radius:50vh;gap:8px;height:fit-content;background-color:#232323}.companyPillNotClickable>p{font-family:Inter;color:#d5d5d5;background-color:transparent;margin:0;padding:0;font-weight:400;font-size:14px;line-height:21px}.circularIcon{border-radius:50%}.hiringCompanyConciseCard{display:flex;flex-direction:row;border:1px solid #232323;border-radius:8px;background:linear-gradient(212.26deg,rgba(73,73,73,.2) 0%,rgba(73,73,73,0) 99.04%);padding:16px;box-sizing:border-box;gap:12px;width:350px}.hiringCompanyConciseCardCompanyDetails{display:flex;flex-direction:column}.hiringCompanyConciseCardCompanyDetails>h3{font-family:Inter;color:#d5d5d5;background-color:transparent;margin:0;padding:0;font-weight:600;font-size:16px;line-height:24px}.hiringCompanyConciseCardCompanyDetails>span{font-family:Inter;color:#adadad;background-color:transparent;margin:0;padding:0;font-weight:400;font-size:14px;line-height:21px;display:inline}.idealProfileConciseCard{display:flex;flex-direction:row;border:1px solid #232323;border-radius:8px;background:linear-gradient(212.26deg,rgba(73,73,73,.2) 0%,rgba(73,73,73,0) 99.04%);padding:16px;box-sizing:border-box;gap:12px;width:350px}.idealProfileConciseCardProfileDetails{display:flex;flex-direction:column}.idealProfileConciseCardProfileDetails>h3{font-family:Inter;color:#d5d5d5;background-color:transparent;margin:0;padding:0;font-weight:600;font-size:16px;line-height:24px}.idealProfileConciseCardProfileDetails span{font-family:Inter;color:#adadad;background-color:transparent;margin:0;padding:0;font-weight:400;font-size:14px;line-height:21px;display:inline}:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:.9}.styles-module_tooltip__mnnfp{border-radius:3px;font-size:90%;left:0;opacity:0;padding:8px 16px;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease-out;visibility:hidden;width:max-content;will-change:opacity,visibility}.styles-module_fixed__7ciUi{position:fixed}.styles-module_arrow__K0L3T{background:inherit;height:8px;position:absolute;transform:rotate(45deg);width:8px}.styles-module_noArrow__T8y2L{display:none}.styles-module_clickable__Bv9o7{pointer-events:auto}.styles-module_show__2NboJ{opacity:var(--rt-opacity);visibility:visible}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}.idealProfileSelectionCard{display:flex;flex-direction:row;border-radius:8px;padding:16px;box-sizing:border-box;gap:12px;width:350px}.idealProfileSelectionCardSelected{border:1px solid #FF8D4E;background:linear-gradient(212.26deg,rgba(255,141,78,.2) 0%,rgba(73,73,73,0) 99.04%)}.idealProfileSelectionCardUnelected{border:1px solid #232323;background:linear-gradient(212.26deg,rgba(73,73,73,.2) 0%,rgba(73,73,73,0) 99.04%)}.idealProfileSelectionCardProfileDetails{display:flex;flex-direction:column;gap:4px;width:85%}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardProfileName{display:flex;align-items:center;gap:4px}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardProfileName>h3{font-family:Inter;color:#d5d5d5;background-color:transparent;margin:0;padding:0;font-weight:600;font-size:16px;line-height:24px}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardProfileName>span{width:fit-content;height:fit-content}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardProfileName>span>svg>path{transition:fill .3s ease-in-out,stroke .3s ease-in-out;fill:#727272;stroke:#727272}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardProfileName>span:hover{cursor:pointer}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardProfileRole{font-family:Inter;color:#adadad;background-color:transparent;margin:0;padding:0;font-weight:400;font-size:14px;line-height:21px;display:inline}.idealProfileSelectionCardProfileDetails .idealProfileSelectionCardButton{width:fit-content;align-self:flex-end}.tertiaryButtonGeneric{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:8px;min-width:110px;border:none;outline:0px;height:fit-content;color:#adadad;background-color:#232323;border:1px solid #5E5E5E;transition:color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out}.tertiaryButtonGeneric:hover{color:#fff;background-color:#373737;border-color:#4b4b4b}.tertiaryButtonGeneric:active:not(:disabled){outline:2px solid #5E5E5E}.tertiaryButtonGeneric:hover{cursor:pointer}.tertiaryButtonGeneric:disabled{cursor:not-allowed}.xsSize--TertiaryButton{font-family:Inter;font-size:12px;font-weight:500;line-height:18px;padding:8px 12px}.smSize--TertiaryButton{font-family:Inter;font-size:14px;font-weight:500;line-height:21px;padding:8px 12px}.baseSize--TertiaryButton{font-family:Inter;font-size:16px;font-weight:500;line-height:24px;padding:10px 20px}.inputFieldGeneric{padding:8px 12px;border:1px solid;border-radius:8px;height:fit-content;transition:background-color .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out;background-color:#232323;border-color:#4b4b4b;color:#fff}.inputFieldGeneric::placeholder:not(:disabled){color:#999}.inputFieldGeneric:hover:not(:disabled){border-color:#868686}.inputFieldGeneric:focus:not(:disabled){outline:none;border-color:#ff8d4e}.errorInputField{background-color:#232323;border-color:#f05252;color:#fff}.errorInputField::placeholder:not(:disabled){color:#f05252}.errorInputField:focus:not(:disabled){outline:none;border-color:#ff8d4e}.primaryButtonGeneric{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:8px;min-width:110px;border:none;outline:0px;height:fit-content}.primaryButtonGeneric:hover{cursor:pointer}.primaryButtonGeneric:disabled{cursor:not-allowed}.orange--PrimaryButton{color:#190e08;background-color:#ff8d4e;transition:color .3s ease-in-out,background-color .3s ease-in-out,border .3s ease-in-out}.orange--PrimaryButton:hover{color:#fff;background-color:#c3713e}.orange--PrimaryButton:active:not(:disabled){outline:2px solid #FFB58C}.black--PrimaryButton{color:#fff;background-color:#232323;transition:color .3s ease-in-out,background-color .3s ease-in-out,border .3s ease-in-out}.black--PrimaryButton:hover{color:#fff;background-color:#373737}.black--PrimaryButton:active:not(:disabled){outline:2px solid #999999}.gray--PrimaryButton{color:#232323;background-color:#999;transition:color .3s ease-in-out,background-color .3s ease-in-out,border .3s ease-in-out}.gray--PrimaryButton:hover{color:#232323;background-color:#868686}.gray--PrimaryButton:active:not(:disabled){outline:2px solid #ADADAD}.xsSize--PrimaryButton{font-family:Inter;font-size:12px;font-weight:500;line-height:18px;padding:8px 12px}.smSize--PrimaryButton{font-family:Inter;font-size:14px;font-weight:500;line-height:21px;padding:8px 12px}.baseSize--PrimaryButton{font-family:Inter;font-size:16px;font-weight:500;line-height:24px;padding:10px 20px}.secondaryButtonGeneric{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:8px;min-width:110px;border:none;outline:0px;height:fit-content}.secondaryButtonGeneric:hover{cursor:pointer}.secondaryButtonGeneric:disabled{cursor:not-allowed}.orange--SecondaryButton{color:#ff8d4e;background-color:transparent;border:1px solid #FF8D4E;transition:color .3s ease-in-out,background-color .3s ease-in-out}.orange--SecondaryButton:hover{color:#fff;background-color:#ff8d4e}.orange--SecondaryButton:active:not(:disabled){outline:2px solid #FFB58C}.black--SecondaryButton{color:#232323;background-color:transparent;border:1px solid #232323;transition:color .3s ease-in-out,background-color .3s ease-in-out}.black--SecondaryButton:hover{color:#fff;background-color:#373737}.black--SecondaryButton:active:not(:disabled){outline:2px solid #999999}.gray--SecondaryButton{color:#232323;background-color:transparent;border:1px solid #232323;transition:color .3s ease-in-out,background-color .3s ease-in-out}.gray--SecondaryButton:hover{color:#fff;background-color:#868686}.gray--SecondaryButton:active:not(:disabled){outline:2px solid #ADADAD}.xsSize--SecondaryButton{font-family:Inter;font-size:12px;font-weight:500;line-height:18px;padding:8px 12px}.smSize--SecondaryButton{font-family:Inter;font-size:14px;font-weight:500;line-height:21px;padding:8px 12px}.baseSize--SecondaryButton{font-family:Inter;font-size:16px;font-weight:500;line-height:24px;padding:10px 20px}.textButtonGeneric{display:flex;align-items:center;justify-content:center;text-align:center;height:fit-content;border:none;border-radius:8px;transition:background-color .3s ease-in-out,color .3s ease-in-out}.textButtonGeneric:hover{cursor:pointer}.textButtonGeneric:active:not(:disabled){outline:2px solid black}.textButtonGeneric:disabled{cursor:not-allowed}.primaryOrange{background-color:#c3713e;color:#66381f}.primaryOrange:hover{cursor:pointer;background-color:#c3713e;color:#fff}.primaryOrange:active:not(:disabled){outline:2px solid #FFB58C}.primaryOrangeBorder{background-color:transparent;color:#e57f46;border:1px solid #FF8D4E}.primaryOrangeBorder:hover{cursor:pointer;background-color:#ff8d4e;color:#fff;border:1px solid #FF8D4E}.primaryOrangeBorder:active:not(:disabled){outline:2px solid #FFB58C}.alternativeDarkBorder{background-color:#232323;color:#adadad;border:1px solid #5E5E5E}.alternativeDarkBorder:hover{cursor:pointer;background-color:#373737;color:#fff}.alternativeDarkBorder:active:not(:disabled){outline:2px solid #868686}.xsSize{font-family:Inter;font-size:12px;font-weight:500;line-height:18px;padding:4px}.smSize{font-family:Inter;font-size:14px;font-weight:500;line-height:21px;padding:8px}.baseSize{font-family:Inter;font-size:14px;font-weight:500;line-height:21px;padding:10px}.lSize{font-family:Inter;font-size:16px;font-weight:500;line-height:24px;padding:12px}.xlSize{font-family:Inter;font-size:16px;font-weight:500;line-height:24px;padding:14px}.textPillNotClickableGeneric{display:flex;flex-direction:row;text-align:center;border-radius:50vh;height:fit-content}.textPillNotClickableBorder{border:.5px solid #5E5E5E}.xsSize{font-family:Inter;color:#868686;background-color:#232323;margin:0;font-weight:500;font-size:12px;line-height:18px;padding:6px 12px}.smSize{font-family:Inter;color:#868686;background-color:#232323;margin:0;font-weight:500;font-size:14px;line-height:21px;padding:6px 12px}.baseSize{font-family:Inter;color:#868686;background-color:#232323;margin:0;font-weight:500;font-size:16px;line-height:24px;padding:6px 12px}.addTribeMemberCard{display:flex;flex-direction:row;border:1px solid #232323;border-radius:8px;background:linear-gradient(212.26deg,rgba(73,73,73,.2) 0%,rgba(73,73,73,0) 99.04%);padding:16px;box-sizing:border-box;gap:12px;width:350px}.addTribeMemberCard>span{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:85%}.addTribeMemberCard>span .addTribeMemberCard--Details{display:flex;flex-direction:column}.addTribeMemberCard>span .addTribeMemberCard--Details>span>h3{font-family:Inter;color:#d5d5d5;background-color:transparent;margin:0;padding:0;font-weight:600;font-size:16px;line-height:24px}.addTribeMemberCard>span .addTribeMemberCard--Details>span>p{font-family:Inter;color:#adadad;background-color:transparent;margin:0;padding:0;font-weight:400;font-size:14px;line-height:21px;display:inline}.input-range__slider{appearance:none;background:#3f51b5;border:1px solid #3f51b5;border-radius:100%;cursor:pointer;display:block;height:1rem;margin-left:-.5rem;margin-top:-.65rem;outline:none;position:absolute;top:50%;transition:transform .3s ease-out,box-shadow .3s ease-out;width:1rem}.input-range__slider:active{transform:scale(1.3)}.input-range__slider:focus{box-shadow:0 0 0 5px #3f51b533}.input-range--disabled .input-range__slider{background:#cccccc;border:1px solid #cccccc;box-shadow:none;transform:none}.input-range__slider-container{transition:left .3s ease-out}.input-range__label{color:#aaa;font-family:Helvetica Neue,san-serif;font-size:.8rem;transform:translateZ(0);white-space:nowrap}.input-range__label--min,.input-range__label--max{bottom:-1.4rem;position:absolute}.input-range__label--min{left:0}.input-range__label--max{right:0}.input-range__label--value{position:absolute;top:-1.8rem}.input-range__label-container{left:-50%;position:relative}.input-range__label--max .input-range__label-container{left:50%}.input-range__track{background:#eeeeee;border-radius:.3rem;cursor:pointer;display:block;height:.3rem;position:relative;transition:left .3s ease-out,width .3s ease-out}.input-range--disabled .input-range__track{background:#eeeeee}.input-range__track--background{left:0;margin-top:-.15rem;position:absolute;right:0;top:50%}.input-range__track--active{background:#3f51b5}.input-range{height:1rem;position:relative;width:100%}:export{orange-25:#FFFCFA;orange-50:#FFF0E8;orange-100:#FFE0CF;orange-200:#FFCFB5;orange-300:#FFB58C;orange-400:#FF9E69;orange-500:#FF8D4E;orange-600:#E57F46;orange-700:#C3713E;orange-800:#99552F;orange-900:#66381F;orange-950:#331C10;orange-990:#190E08;gray-10:#FAFAFA;gray-15:#E8E8E8;gray-25:#D5D5D5;gray-50:#C1C1C1;gray-100:#ADADAD;gray-200:#999999;gray-300:#868686;gray-400:#727272;gray-500:#5E5E5E;gray-600:#4B4B4B;gray-700:#373737;gray-800:#232323;gray-900:#0F0F0F;blue-50:#EBF5FF;blue-100:#E1EFFE;blue-200:#C3DDFD;blue-300:#A4CAFE;blue-400:#76A9FA;blue-500:#3F83F8;blue-600:#1C64F2;blue-700:#1A56DB;blue-800:#1E429F;blue-900:#233876;red-50:#FDF2F2;red-100:#FDE8E8;red-200:#FBD5D5;red-300:#F8B4B4;red-400:#F98080;red-500:#F05252;red-600:#E02424;red-700:#C81E1E;red-800:#9B1C1C;red-900:#771D1D;twOrange-50:#FFF8F1;twOrange-100:#FEECDC;twOrange-200:#FCD9BD;twOrange-300:#FDBA8C;twOrange-400:#FF8A4C;twOrange-500:#FF5A1F;twOrange-600:#D03801;twOrange-700:#B43403;twOrange-800:#8A2C0D;twOrange-900:#771D1D;yellow-50:#FDFDEA;yellow-100:#FDF6B2;yellow-200:#FCE96A;yellow-300:#FACA15;yellow-400:#E3A008;yellow-500:#C27803;yellow-600:#9F580A;yellow-700:#8E4B10;yellow-800:#723B13;yellow-900:#633112;green-50:#F3FAF7;green-100:#DEF7EC;green-200:#BCF0DA;green-300:#84E1BC;green-400:#31C48D;green-500:#0E9F6E;green-600:#057A55;green-700:#046C4E;green-800:#03543F;green-900:#014737;teal-50:#EDFAFA;teal-100:#D5F5F6;teal-200:#AFECEF;teal-300:#7EDCE2;teal-400:#16BDCA;teal-500:#0694A2;teal-600:#047481;teal-700:#036672;teal-800:#05505C;teal-900:#014451;indigo-50:#F0F5FF;indigo-100:#E5EDFF;indigo-200:#CDDBFE;indigo-300:#B46CFC;indigo-400:#8DA2FB;indigo-500:#6875F5;indigo-600:#5850EC;indigo-700:#5145CD;indigo-800:#42389D;indigo-900:#362F78;purple-50:#F6F5FF;purple-100:#EDEBFE;purple-200:#DCD7FE;purple-300:#CABFFD;purple-400:#AC94FA;purple-500:#9061F9;purple-600:#7E3AF2;purple-700:#6C2BD9;purple-800:#5521B5;purple-900:#4A1D96;pink-50:#FDF2F8;pink-100:#FCE8F3;pink-200:#FAD1ED;pink-300:#F8B4D9;pink-400:#F17EB8;pink-500:#E74694;pink-600:#D61F69;pink-700:#BF125D;pink-800:#99154B;pink-900:#751A3D}

package/dist/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+    <script type="module" crossorigin src="/assets/index-22ff84d5.js"></script>
+    <link rel="stylesheet" href="/assets/index-655b6c8f.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    
+  </body>
+</html>

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "qlu-20-ui-library",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.21.5",
+    "clsx": "^1.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-input-range": "^1.3.0",
+    "react-tooltip": "^5.11.2",
+    "sass": "^1.62.1",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "prettier": "^2.8.8",
+    "react-hooks": "^1.0.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2"
+  }
+}

package/src/App.scss

@@ -0,0 +1,38 @@
+#root {
+  min-width: 100vw;
+  min-height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  gap: 24px;
+}
+
+body{
+  margin: 0px;
+  background-color: black;
+}
+
+.appClass{
+  padding: 24px;
+  min-width: 100vw;
+  min-height: 100vh;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  gap: 24px;
+
+  >span{
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    >h2{
+      background-color: gray;
+      padding: 2px;
+      border-radius: 12px;
+    }
+  }
+}

package/src/App.tsx

@@ -0,0 +1,216 @@
+import { useState } from 'react'
+import './App.scss'
+import CircularSvgButton from './components/CircularSvgButton/CircularSvgButton'
+import ClickableText from './components/ClickableText/ClickableText'
+import CompanyPillNotClicakble from './components/CompanyPillNotClicakble/CompanyPillNotClicakble'
+import HiringCompanyConciseCard from './components/HiringCompanyConciseCard/HiringCompanyConciseCard'
+import IdealProfileConciseCard from './components/IdealProfileConciseCard/IdealProfileConciseCard'
+import IdealProfileSelectionCard from './components/IdealProfileSelectionCard/IdealProfileSelectionCard'
+import InputField from './components/InputField/InputField'
+import PrimaryButton from './components/PrimaryButton/PrimaryButton'
+import SecondaryButton from './components/SecondaryButton/SecondaryButton'
+import TertiaryButton from './components/TertiaryButton/TertiaryButton'
+// import PlusButton from './components/PlusButton'
+import TextButton from './components/TextButton/TextButton'
+import TextPillNotClickable from './components/TextPillNotClickable/TextPillNotClickable'
+import AddTribeMemberCard from './components/AddAdditionalIdealProfileCard/AddAdditionalIdealProfileCard'
+import RangeComponent from './components/RangeComponent/RangeComponent'
+// import TextSvgPill from './components/TextSvgPill'
+
+
+function App() {
+
+  const anotherOne = 'https://media.licdn.com/dms/image/C5603AQHn7tbH46HwRw/profile-displayphoto-shrink_100_100/0/1651460224714?e=1688601600&v=beta&t=Rp0HL0Q-b3zSydvEhWzj67pxqvi5lIRF-ZlLloVru4o'
+  const [idealProfileSelectionCardSeletedState, setIdealProfileSelectionCardSeletedState] = useState(false)
+  const [min, setMin] = useState(1)
+  const [max, setMax] = useState(500)
+
+  type range = {
+    min: number,
+    max: number
+  }
+
+  return (
+    <div
+      className='appClass'
+    >
+      <span>
+        <TextButton
+          text= 'hellos'
+          onClick={() => console.log("onclick is running here")}
+          sizeVariant='base'
+          colorVariant='primaryOrangeBorder'
+        />
+        <h2>
+          TextButton
+        </h2>
+      </span>
+      <span>
+
+        <CircularSvgButton
+          sizeVariant='xs'
+          iconType='cross'
+          onClick={() => {}}
+          color='orange'
+          variant='primary'
+
+        />
+        <h2>
+          CircularSvgButton
+        </h2>
+      </span>
+
+      <span>
+
+        <InputField
+          placeholder='placeholder'
+          errorState={false}
+        
+        />
+        <h2>
+          InputField
+        </h2>
+      </span>
+
+      <span>
+        <CompanyPillNotClicakble
+          companyIconPath='https://media.licdn.com/dms/image/C4D03AQEAm-g06kcrWA/profile-displayphoto-shrink_100_100/0/1657698739617?e=1688601600&v=beta&t=HFsARevCLVj2r3ELaBQ7jLeoG5yO-bhJiOtUMhwpKBQ'
+          companyName='Whasssup'
+
+        />
+        <h2>
+          CompanyPillNotClicakble
+        </h2>
+      </span>
+
+      <span>
+        <TextPillNotClickable
+          sizeVariant='base'
+          hasBorder = {true}
+          text='naming the first one'
+        />
+        <h2>
+          TextPillNotClickable
+        </h2>
+      </span>
+      <span>
+        <IdealProfileConciseCard
+          iconUrl = {anotherOne}
+          profileName = 'Jane Doe'
+          profileCurrentRole = 'Account Manager'
+          profileCurrentCompany = "McDonald's"
+          truncationLength = {1}
+        />
+        <h2>
+          IdealProfileConciseCard
+        </h2>
+      </span>
+      <span>
+        <HiringCompanyConciseCard
+          iconUrl = 'https://media.licdn.com/dms/image/C4D0BAQGHhAk9oJMhoA/company-logo_100_100/0/1644908739401?e=1691020800&v=beta&t=jTjzQkuvvs11e2kb5rUHZEz1Ood5hrJxAiW3GBDhPI4'
+          companyName = 'Qlu'
+          companyBusiness = 'SASS'
+          numberOfEmployees = {34}
+        />
+        <h2>
+          HiringCompanyConciseCard
+        </h2>
+      </span>
+      <span>
+        <IdealProfileSelectionCard
+          iconUrl = {anotherOne}
+          profileName='Jane Doe'
+          profileCurrentCompany = 'Qlu'
+          selected = {idealProfileSelectionCardSeletedState}
+          profileCurrentRole = 'CEO'
+          onSelectClick={() => setIdealProfileSelectionCardSeletedState(prev => !prev)}
+          onViewMoreClick={() => {}}
+        />
+        <h2>
+          HiringCompanyConciseCard
+        </h2>
+      </span>
+      <span>
+        <AddTribeMemberCard
+          iconUrl = {anotherOne}
+          tribeMemberName='Jane Doe'
+          tribeMemberMail = 'jane.doe@Qlu'
+          onAddClick = {() => {}}
+        />
+        <h2>
+          AddTribeMemberCard
+        </h2>
+      </span>
+      <span>
+        <ClickableText
+          text = 'Add A major'
+          showIcon = {true}
+          iconOnLeft = {true}
+          colorVariant='gray'
+          onClick = {() => {}}
+        />
+        <h2>
+          ClickableText
+        </h2>
+      </span>
+      <span>
+        <PrimaryButton
+          text = 'Button'
+          sizeVariant='base'
+          colorVariant='orange'
+          onClick = {() => {}}
+        />
+        <h2>
+          PrimaryButton
+        </h2>
+      </span>
+      <span>
+        <SecondaryButton
+          text = 'Button'
+          sizeVariant='base'
+          colorVariant='orange'
+          onClick = {() => {}}
+        />
+        <h2>
+          SecondaryButton
+        </h2>
+      </span>
+      <span>
+        <TertiaryButton
+          text = 'Button'
+          sizeVariant='base'
+          // colorVariant='gray'
+          onClick = {() => {}}
+        />
+        <h2>
+          TertiaryButton
+        </h2>
+      </span>
+      <span>
+        <RangeComponent 
+          minValue={1} 
+          maxValue={10001} 
+          value={{
+            min: min,
+            max: max
+          }}
+          step={1} 
+          onChange={
+            ( prop: range | number)=>{
+              console.log(prop)
+              if(typeof(prop) == 'object'){
+                setMin(prop.min)
+                setMax(prop.max)
+              }
+            }
+          }          
+        />
+        <h2>
+          RangeComp
+        </h2>
+      </span>
+    </div>
+  )
+}
+
+export default App

package/src/_colors.scss

@@ -0,0 +1,248 @@
+$orange-25: #FFFCFA;
+$orange-50: #FFF0E8;
+$orange-100: #FFE0CF;
+$orange-200: #FFCFB5;
+$orange-300: #FFB58C;
+$orange-400: #FF9E69;
+$orange-500: #FF8D4E;
+$orange-600: #E57F46;
+$orange-700: #C3713E;
+$orange-800: #99552F;
+$orange-900: #66381F;
+$orange-950: #331C10;
+$orange-990: #190E08;
+
+$gray-10: #FAFAFA;
+$gray-15: #E8E8E8;
+$gray-25: #D5D5D5;
+$gray-50: #C1C1C1;
+$gray-100: #ADADAD;
+$gray-200: #999999;
+$gray-300: #868686;
+$gray-400: #727272;
+$gray-500: #5E5E5E;
+$gray-600: #4B4B4B;
+$gray-700: #373737;
+$gray-800: #232323;
+$gray-900: #0F0F0F;
+
+$blue-50: #EBF5FF;
+$blue-100: #E1EFFE;
+$blue-200: #C3DDFD;
+$blue-300: #A4CAFE;
+$blue-400: #76A9FA;
+$blue-500: #3F83F8;
+$blue-600: #1C64F2;
+$blue-700: #1A56DB;
+$blue-800: #1E429F;
+$blue-900: #233876;
+
+$red-50: #FDF2F2;
+$red-100: #FDE8E8;
+$red-200: #FBD5D5;
+$red-300: #F8B4B4;
+$red-400: #F98080;
+$red-500: #F05252;
+$red-600: #E02424;
+$red-700: #C81E1E;
+$red-800: #9B1C1C;
+$red-900: #771D1D;
+
+$twOrange-50: #FFF8F1;
+$twOrange-100: #FEECDC;
+$twOrange-200: #FCD9BD;
+$twOrange-300: #FDBA8C;
+$twOrange-400: #FF8A4C;
+$twOrange-500: #FF5A1F;
+$twOrange-600: #D03801;
+$twOrange-700: #B43403;
+$twOrange-800: #8A2C0D;
+$twOrange-900: #771D1D;
+
+$yellow-50: #FDFDEA;
+$yellow-100: #FDF6B2;
+$yellow-200: #FCE96A;
+$yellow-300: #FACA15;
+$yellow-400: #E3A008;
+$yellow-500: #C27803;
+$yellow-600: #9F580A;
+$yellow-700: #8E4B10;
+$yellow-800: #723B13;
+$yellow-900: #633112;
+
+$green-50: #F3FAF7;
+$green-100: #DEF7EC;
+$green-200: #BCF0DA;
+$green-300: #84E1BC;
+$green-400: #31C48D;
+$green-500: #0E9F6E;
+$green-600: #057A55;
+$green-700: #046C4E;
+$green-800: #03543F;
+$green-900: #014737;
+
+$teal-50: #EDFAFA;
+$teal-100: #D5F5F6;
+$teal-200: #AFECEF;
+$teal-300: #7EDCE2;
+$teal-400: #16BDCA;
+$teal-500: #0694A2;
+$teal-600: #047481;
+$teal-700: #036672;
+$teal-800: #05505C;
+$teal-900: #014451;
+
+$indigo-50: #F0F5FF;
+$indigo-100: #E5EDFF;
+$indigo-200: #CDDBFE;
+$indigo-300: #B46CFC;
+$indigo-400: #8DA2FB;
+$indigo-500: #6875F5;
+$indigo-600: #5850EC;
+$indigo-700: #5145CD;
+$indigo-800: #42389D;
+$indigo-900: #362F78;
+
+$purple-50: #F6F5FF;
+$purple-100: #EDEBFE;
+$purple-200: #DCD7FE;
+$purple-300: #CABFFD;
+$purple-400: #AC94FA;
+$purple-500: #9061F9;
+$purple-600: #7E3AF2;
+$purple-700: #6C2BD9;
+$purple-800: #5521B5;
+$purple-900: #4A1D96;
+
+$pink-50: #FDF2F8;
+$pink-100: #FCE8F3;
+$pink-200: #FAD1ED;
+$pink-300: #F8B4D9;
+$pink-400: #F17EB8;
+$pink-500: #E74694;
+$pink-600: #D61F69;
+$pink-700: #BF125D;
+$pink-800: #99154B;
+$pink-900: #751A3D;
+
+$white: white;
+$black: black;
+
+:export {
+    orange-25 : $orange-25;
+    orange-50 : $orange-50;
+    orange-100 : $orange-100;
+    orange-200 : $orange-200;
+    orange-300 : $orange-300;
+    orange-400 : $orange-400;
+    orange-500 : $orange-500;
+    orange-600 : $orange-600;
+    orange-700 : $orange-700;
+    orange-800 : $orange-800;
+    orange-900 : $orange-900;
+    orange-950 : $orange-950;
+    orange-990 : $orange-990;
+    gray-10 : $gray-10;
+    gray-15 : $gray-15;
+    gray-25 : $gray-25;
+    gray-50 : $gray-50;
+    gray-100 : $gray-100;
+    gray-200 : $gray-200;
+    gray-300 : $gray-300;
+    gray-400 : $gray-400;
+    gray-500 : $gray-500;
+    gray-600 : $gray-600;
+    gray-700 : $gray-700;
+    gray-800 : $gray-800;
+    gray-900 : $gray-900;
+    blue-50 : $blue-50;
+    blue-100 : $blue-100;
+    blue-200 : $blue-200;
+    blue-300 : $blue-300;
+    blue-400 : $blue-400;
+    blue-500 : $blue-500;
+    blue-600 : $blue-600;
+    blue-700 : $blue-700;
+    blue-800 : $blue-800;
+    blue-900 : $blue-900;
+    red-50 : $red-50;
+    red-100 : $red-100;
+    red-200 : $red-200;
+    red-300 : $red-300;
+    red-400 : $red-400;
+    red-500 : $red-500;
+    red-600 : $red-600;
+    red-700 : $red-700;
+    red-800 : $red-800;
+    red-900 : $red-900;
+    twOrange-50 : $twOrange-50;
+    twOrange-100 : $twOrange-100;
+    twOrange-200 : $twOrange-200;
+    twOrange-300 : $twOrange-300;
+    twOrange-400 : $twOrange-400;
+    twOrange-500 : $twOrange-500;
+    twOrange-600 : $twOrange-600;
+    twOrange-700 : $twOrange-700;
+    twOrange-800 : $twOrange-800;
+    twOrange-900 : $twOrange-900;
+    yellow-50 : $yellow-50;
+    yellow-100 : $yellow-100;
+    yellow-200 : $yellow-200;
+    yellow-300 : $yellow-300;
+    yellow-400 : $yellow-400;
+    yellow-500 : $yellow-500;
+    yellow-600 : $yellow-600;
+    yellow-700 : $yellow-700;
+    yellow-800 : $yellow-800;
+    yellow-900 : $yellow-900;
+    green-50 : $green-50;
+    green-100 : $green-100;
+    green-200 : $green-200;
+    green-300 : $green-300;
+    green-400 : $green-400;
+    green-500 : $green-500;
+    green-600 : $green-600;
+    green-700 : $green-700;
+    green-800 : $green-800;
+    green-900 : $green-900;
+    teal-50 : $teal-50;
+    teal-100 : $teal-100;
+    teal-200 : $teal-200;
+    teal-300 : $teal-300;
+    teal-400 : $teal-400;
+    teal-500 : $teal-500;
+    teal-600 : $teal-600;
+    teal-700 : $teal-700;
+    teal-800 : $teal-800;
+    teal-900 : $teal-900;
+    indigo-50 : $indigo-50;
+    indigo-100 : $indigo-100;
+    indigo-200 : $indigo-200;
+    indigo-300 : $indigo-300;
+    indigo-400 : $indigo-400;
+    indigo-500 : $indigo-500;
+    indigo-600 : $indigo-600;
+    indigo-700 : $indigo-700;
+    indigo-800 : $indigo-800;
+    indigo-900 : $indigo-900;
+    purple-50 : $purple-50;
+    purple-100 : $purple-100;
+    purple-200 : $purple-200;
+    purple-300 : $purple-300;
+    purple-400 : $purple-400;
+    purple-500 : $purple-500;
+    purple-600 : $purple-600;
+    purple-700 : $purple-700;
+    purple-800 : $purple-800;
+    purple-900 : $purple-900;
+    pink-50 : $pink-50;
+    pink-100 : $pink-100;
+    pink-200 : $pink-200;
+    pink-300 : $pink-300;
+    pink-400 : $pink-400;
+    pink-500 : $pink-500;
+    pink-600 : $pink-600;
+    pink-700 : $pink-700;
+    pink-800 : $pink-800;
+    pink-900 : $pink-900;
+}

package/src/_fonts.scss

@@ -0,0 +1,60 @@
+@import url(https://fonts.googleapis.com/css2?family=Inter);
+@import './colors';
+
+@mixin fontAlpha(){
+    font-family: Inter;
+}
+
+@mixin text-xs($color: $orange-990, $bgColor: transparent, $weight: 500, $size: 12px, $padding: 0, $margin: 0 , $lineHeight: 18px) {
+    @include fontAlpha();
+    color: $color;
+    background-color: $bgColor;
+    margin: $margin;
+    padding: $padding;
+    font-weight: $weight;
+    font-size: $size;
+    line-height: $lineHeight;
+}
+
+@mixin text-sm($color: $orange-990, $bgColor: transparent, $weight: 500, $size: 14px, $padding: 0, $margin: 0 , $lineHeight: 21px) {
+    @include fontAlpha();
+    color: $color;
+    background-color: $bgColor;
+    margin: $margin;
+    padding: $padding;
+    font-weight: $weight;
+    font-size: $size;
+    line-height: $lineHeight;
+}
+
+@mixin text-base($color: $orange-990, $bgColor: transparent, $weight: 500, $size: 16px, $padding: 0, $margin: 0 , $lineHeight: 24px) {
+    @include fontAlpha();
+    color: $color;
+    background-color: $bgColor;
+    margin: $margin;
+    padding: $padding;
+    font-weight: $weight;
+    font-size: $size;
+    line-height: $lineHeight;
+}
+
+@mixin text-size-xs() {
+    @include fontAlpha();
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+}
+
+@mixin text-size-sm() {
+    @include fontAlpha();
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+}
+
+@mixin text-size-base() {
+    @include fontAlpha();
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+}