@pup_roko/ui-kit 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,2 +1,2 @@
-import{jsxs as n,jsx as d,Fragment as o}from"react/jsx-runtime";function i(n,d){void 0===d&&(d={});var o=d.insertAt;if(n&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\nbutton {\n  border: none;\n  border-radius: 4px;\n  padding: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\nbutton:hover:not(:disabled) {\n  opacity: 0.8;\n}\nbutton:disabled {\n  background-color: #dddddd;\n  color: #888888;\n  cursor: not-allowed;\n}\nbutton img {\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  filter: brightness(100%) saturate(100%) invert(100%);\n  opacity: 0.8;\n}\nbutton :where(*) {\n  color: inherit;\n}');const r=({vitClass:o="",svgUrl:i="src/assets/images/health-cross.svg",disabled:r=!1,children:e=null})=>n("button",{className:`${o} ${r?"disabled":""}`,disabled:r,children:[d("img",{src:i,alt:"icon"}),e]});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.filter {\n  border: 1px solid #888888;\n  background-color: #dddddd;\n  opacity: 0.8;\n  border-radius: 16px;\n  padding: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n}\n.filter:hover:not(:disabled) {\n  opacity: 1;\n}\n.filter:disabled {\n  cursor: not-allowed;\n}\n.filter img {\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  filter: brightness(100%) saturate(100%) invert(100%);\n  opacity: 0.8;\n}\n.filter input {\n  border: none;\n  border-radius: 2px;\n  background-color: transparent;\n  padding: 4px;\n}\n.filter :where(*) {\n  color: inherit;\n}');const e=({vitClass:o="info",svgUrl:i="src/assets/images/looking-glass.svg",disabled:r,maxLength:e=100})=>n("div",{className:`filter ${o}`,children:[d("img",{src:i,alt:"icon"}),d("input",{type:"text",disabled:r,maxLength:e})]});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.card {\n  border: none;\n  border-radius: 16px;\n  padding: 16px;\n  display: flex;\n}\n.card :where(*) {\n  color: inherit;\n}');const a=({vitClass:n="info",children:i=d("div",{})})=>d(o,{children:d("article",{className:`card ${n}`,children:i})});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.pill {\n  display: flex;\n  width: fit-content;\n  font-size: 14px;\n  padding: 8px 16px;\n  border-radius: 24px;\n}');const t=({children:n,vitClass:o="info"})=>d("div",{className:`pill ${o}`,children:n});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n}\n.header section {\n  display: flex;\n  gap: 16px;\n  justify-content: left;\n  width: 100%;\n}\n.header :where(*) {\n  color: inherit;\n}');const c=({children:n=d("div",{}),vitClass:i="info md"})=>d(o,{children:d("header",{className:`header ${i}`,children:d("section",{className:"body-container",children:n})})});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.grey-screen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 20;\n}');const l=({children:n,vitClass:o,shown:i=!1})=>i&&d("div",{className:`grey-screen ${o}`,children:n});export{r as vitButton,a as vitCard,l as vitGreyScreen,c as vitHeader,e as vitInputFilter,t as vitPill};
+import{jsxs as s,jsx as e,Fragment as i}from"react/jsx-runtime";const l=({vitClass:i="",svgUrl:l="src/assets/images/health-cross.svg",disabled:a=!1,children:c=null})=>s("button",{className:`${i} ${a?"disabled":""}`,disabled:a,children:[e("img",{src:l,alt:"icon"}),c]}),a=({vitClass:i="info",svgUrl:l="src/assets/images/looking-glass.svg",disabled:a,maxLength:c=100})=>s("div",{className:`filter ${i}`,children:[e("img",{src:l,alt:"icon"}),e("input",{type:"text",disabled:a,maxLength:c})]}),c=({vitClass:s="info",children:l=e("div",{})})=>e(i,{children:e("article",{className:`card ${s}`,children:l})}),d=({children:s,vitClass:i="info"})=>e("div",{className:`pill ${i}`,children:s}),r=({children:s=e("div",{}),vitClass:l="info md"})=>e(i,{children:e("header",{className:`header ${l}`,children:e("section",{className:"body-container",children:s})})}),n=({children:s,vitClass:i,shown:l=!1})=>l&&e("div",{className:`grey-screen ${i}`,children:s});export{l as vitButton,c as vitCard,n as vitGreyScreen,r as vitHeader,a as vitInputFilter,d as vitPill};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Buttons/vit-button.tsx","../src/components/Inputs/vitInputFilter.tsx","../src/components/Cards/vit-card.tsx","../src/components/Pills/vit-pill.tsx","../src/components/Header/vitHeader.tsx","../src/components/GreyScreen/greyScreen.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null,null,null,null,null,null],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","vitButton","vitClass","svgUrl","disabled","children","_jsxs","className","_jsx","src","alt","vitInputFilter","maxLength","vitCard","_Fragment","vitPill","vitHeader","vitGreyScreen","shown"],"mappings":"gEAAA,SAASA,EAAYC,EAAKC,YACnBA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBW,CAqBzD,s4EChBA,MAAMe,EAAY,EACdC,WAAW,GACXC,SAAS,qCACTC,YAAW,EACXC,WAAW,QAGPC,EAAA,SAAA,CAAQC,UAAW,GAAGL,KAAYE,EAAW,WAAa,KAAMA,SAAUA,EAAQC,SAAA,CAC9EG,EAAA,MAAA,CAAKC,IAAKN,EAAQO,IAAI,SACpBL,+hFCTd,MAAMM,EAAiB,EACrBT,WAAW,OACXC,SAAS,sCACTC,WACAQ,YAAY,OAGRN,EAAA,MAAA,CAAKC,UAAW,UAAUL,IAAUG,SAAA,CAClCG,EAAA,MAAA,CAAKC,IAAKN,EAAQO,IAAI,SACtBF,EAAA,QAAA,CAAOd,KAAK,OAAOU,SAAUA,EAAUQ,UAAWA,mhECX1D,MAAMC,EAAU,EAAGX,WAAS,OAASG,WAAWG,EAAA,MAAA,CAAA,MAG5CA,EAAAM,EAAA,CAAAT,SACEG,EAAA,UAAA,CAASD,UAAW,QAAQL,IAAUG,SACnCA,ugECLT,MAAMU,EAAU,EAAGV,WAAUH,WAAW,UAEpCM,EAAA,MAAA,CAAKD,UAAW,QAAQL,IAAUG,SAC/BA,itECFP,MAAMW,EAAY,EAAEX,WAASG,EAAA,MAAA,IAAQN,WAAS,aAExCM,EAAAM,EAAA,CAAAT,SACEG,EAAA,SAAA,CAAQD,UAAW,UAAUL,IAAUG,SACrCG,aAASD,UAAU,iBAAgBF,SAChCA,gnECLb,MAAMY,EAAgB,EAAGZ,WAAUH,WAAUgB,SAAQ,KAEjDA,GACAV,EAAA,MAAA,CAAKD,UAAW,eAAeL,IAAUG,SACtCA","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../src/components/Buttons/vit-button.tsx","../src/components/Inputs/vitInputFilter.tsx","../src/components/Cards/vit-card.tsx","../src/components/Pills/vit-pill.tsx","../src/components/Header/vitHeader.tsx","../src/components/GreyScreen/greyScreen.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["vitButton","vitClass","svgUrl","disabled","children","_jsxs","className","_jsx","src","alt","vitInputFilter","maxLength","type","vitCard","_Fragment","vitPill","vitHeader","vitGreyScreen","shown"],"mappings":"gEASA,MAAMA,EAAY,EACdC,WAAW,GACXC,SAAS,qCACTC,YAAW,EACXC,WAAW,QAGPC,EAAA,SAAA,CAAQC,UAAW,GAAGL,KAAYE,EAAW,WAAa,KAAMA,SAAUA,EAAQC,SAAA,CAC9EG,EAAA,MAAA,CAAKC,IAAKN,EAAQO,IAAI,SACpBL,KCTRM,EAAiB,EACrBT,WAAW,OACXC,SAAS,sCACTC,WACAQ,YAAY,OAGRN,EAAA,MAAA,CAAKC,UAAW,UAAUL,IAAUG,SAAA,CAClCG,EAAA,MAAA,CAAKC,IAAKN,EAAQO,IAAI,SACtBF,EAAA,QAAA,CAAOK,KAAK,OAAOT,SAAUA,EAAUQ,UAAWA,OCXpDE,EAAU,EAAGZ,WAAS,OAASG,WAAWG,EAAA,MAAA,CAAA,MAG5CA,EAAAO,EAAA,CAAAV,SACEG,EAAA,UAAA,CAASD,UAAW,QAAQL,IAAUG,SACnCA,MCLHW,EAAU,EAAGX,WAAUH,WAAW,UAEpCM,EAAA,MAAA,CAAKD,UAAW,QAAQL,IAAUG,SAC/BA,ICFDY,EAAY,EAAEZ,WAASG,EAAA,MAAA,IAAQN,WAAS,aAExCM,EAAAO,EAAA,CAAAV,SACEG,EAAA,SAAA,CAAQD,UAAW,UAAUL,IAAUG,SACrCG,aAASD,UAAU,iBAAgBF,SAChCA,QCLPa,EAAgB,EAAGb,WAAUH,WAAUiB,SAAQ,KAEjDA,GACAX,EAAA,MAAA,CAAKD,UAAW,eAAeL,IAAUG,SACtCA"}

package/package.json

@@ -1,16 +1,29 @@
 {
   "name": "@pup_roko/ui-kit",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "style": "src/styles/main.scss",
   "files": [
-    "dist"
+    "dist",
+    "src/styles/main.scss"
   ],
   "types": "dist/index.d.ts",
+  "sideEffects": [
+    "src/styles/main.scss"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles/main.scss": "./src/styles/main.scss"
+  },
   "scripts": {
     "start": "rollup -c --bundleConfigAsCjs",
+    "publish": "npm publish --access public",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

package/src/styles/main.scss

@@ -0,0 +1,244 @@
+// colors
+
+// Light mode colors
+// backgrounds
+$color-background-light: #dddddd;
+$color-background-purple: #770077;
+$color-background-highlight: #f0f0f0;
+
+//text colors
+$color-text-primary: #222222;
+$color-text-secondary: #444444;
+$color-text-bold: #000000;
+$color-text-link: #0099aa;
+
+$color-text-bgdark-primary: #f5f5f5;
+$color-text-bgdark-secondary: #dddddd;
+$color-text-bgdark-primary-bold: #ffffff;
+
+//state-related colors
+$color-state-success: #007700;
+$color-state-warning: #777700;
+$color-state-alert: #bb7700;
+$color-state-error: #770000;
+$color-state-info: #770077;
+$color-state-alternate-info: #000077;
+$color-state-disabled: #777777;
+
+// secondary state-related colors
+$color-state-success-secondary: #ddffdd;
+$color-state-warning-secondary: #ffffdd;
+$color-state-alert-secondary: #ffddaa;
+$color-state-error-secondary: #ffdddd;
+$color-state-info-secondary: #ffddff;
+$color-state-alternate-info-secondary: #ddddff;
+$color-state-disabled-secondary: #dddddd;
+
+// borders and dividers
+$color-line-light: #888888;
+$color-line-dark: #444444;
+
+//  dark mode colors
+$color-background-dark: #222222;
+$color-background-dark-purple: #550055;
+$color-background-dark-highlight: #444444;
+
+// text colors for dark mode
+$color-text-dark-primary: #dddddd;
+$color-text-dark-secondary: #bbbbbb;
+$color-text-dark-bold: #ffffff;
+$color-text-dark-link: #33ddee;
+
+// TODO - color-blind mode colors
+// TODO - high-contrast mode colors
+
+// fonts
+$font-family-text: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-title: 'Georgia', serif;
+
+$font-size-h1: 24px;
+$font-size-h2: 20px;
+$font-size-h3: 18px;
+$font-size-h4: 16px;
+$font-size-text: 14px;
+$font-size-small: 10px;
+
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 600;
+$font-weight-bolder: 800;
+
+$line-height-normal: 1.5;
+$line-height-heading: 1.2;
+
+// border
+$border-light: 1px solid $color-line-light;
+$border-dark: 1px solid $color-line-dark;
+
+// spacing
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+$spacing-xxl: 48px;
+
+// border radius
+$border-radius-sm: 2px;
+$border-radius-md: 4px;
+$border-radius-lg: 8px;
+$border-radius-xl: 16px;
+
+// main container sizes
+$container-width-small: 600px;
+$container-width-medium: 900px;
+$container-width-large: 1200px;
+
+// tag definitions
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: $font-family-text;
+  color: $color-text-primary;
+}
+
+h1, h2, h3, h4 {
+  font-family: $font-family-title;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-heading;
+  margin-bottom: $spacing-sm;
+}
+
+h1 {
+  font-size: $font-size-h1;
+}
+
+h2 {
+  font-size: $font-size-h2;
+}
+
+h3 {
+  font-size: $font-size-h3;
+}
+
+h4 {
+  font-size: $font-size-h4;
+}
+
+p {
+  font-size: $font-size-text;
+  line-height: $line-height-normal;
+  margin-bottom: $spacing-md;
+}
+
+a {
+  color: $color-text-link;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+strong, b {
+  font-weight: $font-weight-bold;
+}
+
+.xs {
+  padding: $spacing-xs;
+}
+
+.sm {
+  padding: $spacing-sm;
+}
+
+.md {
+  padding: $spacing-md;
+}
+
+.lg {
+  padding: $spacing-lg;
+}
+
+.xl {
+  padding: $spacing-xl;
+}
+
+.xxl {
+  padding: $spacing-xxl;
+}
+
+// state classes
+.info {
+  color: $color-state-info-secondary;
+  background-color: $color-state-info;
+}
+
+.success {
+  color: $color-state-success-secondary;
+  background-color: $color-state-success;
+}
+
+.warning {
+  color: $color-state-warning-secondary;
+  background-color: $color-state-warning;
+}
+
+.alert {
+  color: $color-state-alert-secondary;
+  background-color: $color-state-alert;
+}
+
+.error {
+  color: $color-state-error-secondary;
+  background-color: $color-state-error;
+}
+
+//inverted state classes
+.info-inverted {
+  color: $color-state-info;
+  background-color: $color-state-info-secondary;
+}
+
+.success-inverted {
+  color: $color-state-success;
+  background-color: $color-state-success-secondary;
+}
+
+.warning-inverted {
+  color: $color-state-warning;
+  background-color: $color-state-warning-secondary;
+}
+
+.alert-inverted {
+  color: $color-state-alert;
+  background-color: $color-state-alert-secondary;
+}
+
+.error-inverted {
+  color: $color-state-error;
+  background-color: $color-state-error-secondary;
+}
+
+// body-container section styles
+.body-container {
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 $spacing-sm;
+
+  @media screen and (max-width: 648px) {
+    max-width: $container-width-small;
+    padding: 0 $spacing-sm;
+  }
+
+  @media screen and (min-width: 649px) and (max-width: 1024px) {
+    max-width: $container-width-medium;
+    padding: 0 $spacing-sm;
+  }
+
+  @media screen and (min-width: 1025px) {
+    max-width: $container-width-large;
+    padding: 0 $spacing-sm;
+  }
+}