pdap-design-system 1.1.0 → 2.0.0

package/dist/styles.css

@@ -0,0 +1 @@
+.pdap-button{margin-left:.25rem;margin-right:.25rem;display:inline-block;width:100%;cursor:pointer;border-radius:0;border-width:0px;padding:.75rem 1.5rem;text-align:center;font-size:1.125rem;font-weight:600;text-decoration-thickness:0px}.pdap-button:disabled{opacity:.5}.pdap-button:hover{--tw-brightness: brightness(.85);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 640px){.pdap-button{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}}@media (min-width: 1024px){.pdap-button{font-size:1.25rem}}.pdap-button-primary{margin-left:.25rem;margin-right:.25rem;display:inline-block;width:100%;cursor:pointer;border-radius:0;border-width:0px;padding:.75rem 1.5rem;text-align:center;font-size:1.125rem;font-weight:600;text-decoration-thickness:0px}.pdap-button-primary:disabled{opacity:.5}.pdap-button-primary:hover{--tw-brightness: brightness(.85);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 640px){.pdap-button-primary{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}}@media (min-width: 1024px){.pdap-button-primary{font-size:1.25rem}}.pdap-button-primary{--tw-bg-opacity: 1;background-color:rgba(var(--color-brand-gold)/var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgba(var(--color-neutral-950)/var(--tw-text-opacity))}.pdap-button-secondary{margin-left:.25rem;margin-right:.25rem;display:inline-block;width:100%;cursor:pointer;border-radius:0;border-width:0px;padding:.75rem 1.5rem;text-align:center;font-size:1.125rem;font-weight:600;text-decoration-thickness:0px}.pdap-button-secondary:disabled{opacity:.5}.pdap-button-secondary:hover{--tw-brightness: brightness(.85);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 640px){.pdap-button-secondary{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}}@media (min-width: 1024px){.pdap-button-secondary{font-size:1.25rem}}.pdap-button-secondary{border-width:2px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--color-brand-gold)/var(--tw-border-opacity));background-color:transparent;--tw-text-opacity: 1;color:rgba(var(--color-brand-gold)/var(--tw-text-opacity))}.pdap-flex-container{margin-left:auto;margin-right:auto;display:flex;height:100%;width:100%;max-width:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem;padding:2rem}@media (min-width: 500px){.pdap-flex-container{max-width:48rem}}@media (min-width: 1024px){.pdap-flex-container{max-width:59rem}}.pdap-flex-container-center{margin-left:auto;margin-right:auto;display:flex;height:100%;width:100%;max-width:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem;padding:2rem}@media (min-width: 500px){.pdap-flex-container-center{max-width:48rem}}@media (min-width: 1024px){.pdap-flex-container-center{max-width:59rem}}.pdap-flex-container-center>*{width:100%}.pdap-flex-container-center.pdap-grid-item{padding:0}.pdap-flex-container-center{align-items:center;justify-content:center}.pdap-flex-container-start{margin-left:auto;margin-right:auto;display:flex;height:100%;width:100%;max-width:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.5rem;padding:2rem}@media (min-width: 500px){.pdap-flex-container-start{max-width:48rem}}@media (min-width: 1024px){.pdap-flex-container-start{max-width:59rem}}.pdap-flex-container-start>*{width:100%}.pdap-flex-container-start.pdap-grid-item{padding:0}.pdap-flex-container>*{width:100%}.pdap-flex-container.pdap-grid-item{padding:0}.pdap-footer{position:relative;margin-left:auto;margin-right:auto;margin-top:auto;--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-300)/var(--tw-bg-opacity));padding-left:.5rem;padding-right:.5rem;padding-top:.5rem;padding-bottom:0;text-align:center;font-size:1.125rem;--tw-text-opacity: 1;color:rgba(255,251,250,var(--tw-text-opacity))}@media (min-width: 768px){.pdap-footer{padding:2rem .5rem}}.pdap-footer-social-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}@media (min-width: 768px){.pdap-footer-social-links{flex-wrap:nowrap}}.pdap-footer-social-links>*{margin-bottom:.5rem}.pdap-footer .pdap-flex-container>*{margin-bottom:.5rem;color:inherit}.pdap-footer-widget-links{margin-top:1.5rem;display:flex;justify-content:center}.pdap-footer-logo{margin-left:1.75rem;width:10rem;--tw-invert: invert(100%);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.pdap-footer-logo img{width:100%}@media (min-width: 1024px){.pdap-nav-link-container{margin-left:.5rem;margin-right:.5rem;margin-bottom:.5rem;flex-shrink:0}}.pdap-footer-social-link{margin-left:.25rem;margin-right:.25rem;display:inline-block;width:100%;cursor:pointer;border-radius:0;border-width:0px;--tw-bg-opacity: 1;background-color:rgba(var(--color-brand-gold)/var(--tw-bg-opacity));padding:.75rem 1.5rem;text-align:center;font-size:1.125rem;font-weight:600;--tw-text-opacity: 1;color:rgba(var(--color-neutral-100)/var(--tw-text-opacity));text-decoration-thickness:0px}.pdap-footer-social-link:disabled{opacity:.5}.pdap-footer-social-link:hover{--tw-brightness: brightness(.85);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 640px){.pdap-footer-social-link{max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}}@media (min-width: 1024px){.pdap-footer-social-link{font-size:1.25rem}}.pdap-footer-social-link-current{--tw-text-opacity: 1;color:rgba(var(--color-neutral-700)/var(--tw-text-opacity))}@media (min-width: 1024px){.pdap-footer-social-link-current{border-width:2px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-400)/var(--tw-border-opacity))}}.pdap-footer-social-link-current-exact{--tw-text-opacity: 1;color:rgba(var(--color-neutral-700)/var(--tw-text-opacity))}@media (min-width: 1024px){.pdap-footer-social-link-current-exact{border-width:2px;border-style:solid;border-color:rgba(var(--color-neutral-400)/var(--tw-border-opacity));--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-700)/var(--tw-border-opacity))}}.pdap-input{margin-bottom:.5rem;display:flex;height:-webkit-max-content;height:-moz-max-content;height:max-content;width:100%;gap:1rem;vertical-align:middle;line-height:1.5}.pdap-input input{border-width:2px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-300)/var(--tw-border-opacity));border-color:transparent;padding:.5rem .75rem;--tw-text-opacity: 1;color:rgba(0,0,0,var(--tw-text-opacity))}@media (prefers-color-scheme: dark){.pdap-input input{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-950)/var(--tw-bg-opacity))}}.pdap-input input::-webkit-input-placeholder{--tw-text-opacity: 1;color:rgba(var(--color-neutral-500)/var(--tw-text-opacity))}.pdap-input input::-moz-placeholder{--tw-text-opacity: 1;color:rgba(var(--color-neutral-500)/var(--tw-text-opacity))}.pdap-input input::-ms-input-placeholder{--tw-text-opacity: 1;color:rgba(var(--color-neutral-500)/var(--tw-text-opacity))}.pdap-input input::placeholder{--tw-text-opacity: 1;color:rgba(var(--color-neutral-500)/var(--tw-text-opacity))}.pdap-input input:focus,.pdap-input input:focus-within,.pdap-input input:focus-visible{border-width:2px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--color-brand-blue-light)/var(--tw-border-opacity));outline:2px solid transparent;outline-offset:2px}.pdap-input label{display:flex;flex-basis:max-content;align-items:center;justify-content:flex-end;padding:.75rem}.pdap-input-error{flex-wrap:wrap;row-gap:0}.pdap-input-error label{justify-content:flex-start}.pdap-input-error input{--tw-border-opacity: 1;border-color:rgb(153 27 27 / var(--tw-border-opacity))}@media (prefers-color-scheme: dark){.pdap-input-error input{--tw-border-opacity: 1;border-color:rgb(252 165 165 / var(--tw-border-opacity))}}.pdap-input-error-message{display:flex;flex-shrink:1;flex-basis:100%;align-items:center;justify-content:flex-start;--tw-bg-opacity: 1;background-color:rgb(252 165 165 / var(--tw-bg-opacity));padding:.5rem;font-size:.875rem;--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}.pdap-input input[type=text]{height:3rem;font-size:1.125rem}.pdap-input input[type=checkbox]{width:1.5rem;accent-color:rgba(var(--color-brand-gold)/1)}.pdap-form{margin-bottom:1rem;width:100%}.pdap-form-error-message{display:flex;flex-shrink:1;flex-basis:100%;align-items:center;justify-content:flex-start;--tw-bg-opacity: 1;background-color:rgb(252 165 165 / var(--tw-bg-opacity));padding:.5rem;font-size:.875rem;--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}.pdap-grid-container{margin-left:auto;margin-right:auto;display:grid;height:100%;width:100%;grid-template-columns:auto;grid-template-rows:auto;gap:1rem;padding:2rem}@media (min-width: 500px){.pdap-grid-container{max-width:48rem}}@media (min-width: 768px){.pdap-grid-container{gap:2rem}}@media (min-width: 1024px){.pdap-grid-container{max-width:59rem}}.pdap-grid-container-column-1{grid-template-columns:repeat(1,minmax(0,1fr))}.pdap-grid-container-column-2{grid-template-columns:repeat(1,minmax(0,1fr));align-items:flex-start}@media (min-width: 768px){.pdap-grid-container-column-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.pdap-grid-container-column-3{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width: 768px){.pdap-grid-container-column-3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.pdap-grid-container-column-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.pdap-grid-item{grid-column:span 1 / span 1;grid-row:span 1 / span 1}@media (min-width: 768px){.pdap-grid-item-span-column-2{grid-column:span 2 / span 2}}.pdap-grid-item-span-column-3{grid-column:span 1 / span 1}@media (min-width: 768px){.pdap-grid-item-span-column-3{grid-column:span 2 / span 2}}@media (min-width: 1024px){.pdap-grid-item-span-column-3{grid-column:span 3 / span 3}}.pdap-nav{position:relative;z-index:40;display:flex;align-items:center;--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-400)/var(--tw-bg-opacity))}@media not all and (min-width: 1024px){.pdap-nav{position:absolute;left:0;top:104px;height:calc(100vh - 104px);width:100%;flex-direction:column;padding:1.5rem}}@media (min-width: 1024px){.pdap-nav{justify-content:center;background-color:transparent}}@media not all and (min-width: 1024px){.pdap-nav[aria-expanded=false],.pdap-nav-open-button{display:none}}.pdap-nav-link-container{position:relative;display:inline-block;flex-basis:max-content;list-style-type:none;vertical-align:top}@media (min-width: 1024px){.pdap-nav-link-container{margin-left:.5rem;margin-right:.5rem;margin-bottom:.5rem;flex-shrink:0;flex-grow:1}}.pdap-nav-link{padding:.5rem;text-align:left;font-size:1.125rem;font-weight:500;--tw-text-opacity: 1;color:rgba(var(--color-neutral-800)/var(--tw-text-opacity));text-decoration-thickness:0px}.pdap-nav-link-current{--tw-text-opacity: 1;color:rgba(var(--color-neutral-700)/var(--tw-text-opacity))}@media (min-width: 1024px){.pdap-nav-link-current{border-width:2px;border-style:solid;--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-400)/var(--tw-border-opacity))}}.pdap-nav-link-current-exact{--tw-text-opacity: 1;color:rgba(var(--color-neutral-700)/var(--tw-text-opacity))}@media (min-width: 1024px){.pdap-nav-link-current-exact{border-width:2px;border-style:solid;border-color:rgba(var(--color-neutral-400)/var(--tw-border-opacity));--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-700)/var(--tw-border-opacity))}}.pdap-nav-open-button{display:flex;cursor:pointer;align-items:center;font-size:1.25rem}@media (min-width: 1024px){.pdap-nav-open-button{display:none}}.pdap-nav-open-button svg{height:1.25rem;fill:rgba(var(--color-neutral-950)/1)}.pdap-header{position:fixed;left:0;top:0;z-index:50;display:flex;width:100%;justify-content:space-between;--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-50)/var(--tw-bg-opacity));padding:2rem}@media (prefers-color-scheme: dark){.pdap-header{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-300)/var(--tw-bg-opacity))}}.logo{position:relative;max-width:80%;text-decoration-thickness:0px}@media (prefers-color-scheme: dark){.logo{--tw-invert: invert(100%);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}}@media (min-width: 500px){.logo{max-width:none}}.pdap-tile-icon{height:auto;max-width:7.5rem}@tailwind base;@tailwind utilities;*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Libre Franklin,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Source Code Pro,monospace,ui-monospace,SFMono-Regular;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;-webkit-font-feature-settings:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1;color:#9ca3af}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--color-neutral-50: 255 255 255;--color-neutral-100: 255 253 253;--color-neutral-200: 255 251 250;--color-neutral-300: 204 204 204;--color-neutral-400: 191 192 192;--color-neutral-500: 153 153 153;--color-neutral-600: 97 97 97;--color-neutral-700: 51 51 51;--color-neutral-800: 34 34 34;--color-neutral-800: 26 26 26;--color-neutral-950: 0 0 0;--color-brand-blue-light: 56 152 236;--color-brand-blue-medium: 0 130 243;--color-brand-gold: 213 162 60;--color-brand-wine: 81 42 79}@media (prefers-color-scheme: dark){:root{--color-neutral-50: 0 0 0;--color-neutral-100: 26 26 26;--color-neutral-200: 34 34 34;--color-neutral-300: 51 51 51;--color-neutral-400: 97 97 97;--color-neutral-500: 153 153 153;--color-neutral-600: 191 192 192;--color-neutral-700: 204 204 204;--color-neutral-800: 255 251 250;--color-neutral-800: 255 253 253;--color-neutral-950: 255 255 255}}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;min-height:100%;--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-50)/var(--tw-bg-opacity));font-family:Libre Franklin,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1.25rem;font-weight:300;line-height:1.5;--tw-text-opacity: 1;color:rgba(var(--color-neutral-950)/var(--tw-text-opacity))}@media (min-width: 1024px){body{font-size:1.75rem}}img{display:inline-block;max-width:100%;vertical-align:middle}h1,h2,h3,h4,h5,h6{font-family:Libre Franklin,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.25}h3,h4{--tw-text-opacity: 1;color:rgba(var(--color-brand-wine)/var(--tw-text-opacity))}@media (prefers-color-scheme: dark){h3,h4{--tw-text-opacity: 1;color:rgba(var(--color-neutral-500)/var(--tw-text-opacity))}}h4,h5,h6{margin-bottom:.625rem;margin-top:.625rem}h1{margin-top:3rem;margin-bottom:1rem;font-size:2.625rem;font-weight:500}h2{margin-bottom:1rem;margin-top:2rem;font-size:1.5rem;font-weight:700}@media (min-width: 768px){h2{font-size:2rem}}h3{margin-bottom:.5rem;margin-top:2rem;font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}@media (min-width: 768px){h3{font-size:1.125rem}}h4{font-size:1.125rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}h5{font-size:1.75rem;font-weight:300;font-style:italic}h6{font-size:1.125rem;font-weight:300;text-transform:uppercase;letter-spacing:.8125rem}a{--tw-text-opacity: 1;color:rgba(var(--color-brand-gold)/var(--tw-text-opacity));-webkit-text-decoration-style:solid;text-decoration-style:solid;text-decoration-thickness:6%;text-underline-offset:5%}a:hover{--tw-brightness: brightness(.85);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}p{margin-bottom:.5rem;margin-top:0}p,li{max-width:43ch}.small p,p.small,.small li{font-size:1.125rem}strong{font-weight:600}code{max-width:100%;font-family:Source Code Pro,monospace,ui-monospace,SFMono-Regular;font-weight:400;--tw-text-opacity: 1;color:rgba(var(--color-neutral-950)/var(--tw-text-opacity))}p>code,li>code,pre code{background-color:rgba(var(--color-brand-wine)/var(--tw-bg-opacity));--tw-bg-opacity: .05}p>code,li>code{border-radius:.125rem;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.25rem .5rem;word-wrap:break-word}pre code{display:block;max-width:100%;overflow:scroll;white-space:pre;border-width:1px;border-style:solid;border-color:rgba(var(--color-brand-wine)/var(--tw-border-opacity));--tw-border-opacity: .2;padding:1.25rem;text-align:left;font-size:1.25rem}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-ms-backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.relative{position:relative}.left-0{left:0}.z-50{z-index:50}.col-span-1{grid-column:span 1 / span 1}.m-0{margin:0}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-\[\.625rem\]{margin-bottom:.625rem}.ml-7{margin-left:1.75rem}.mt-0{margin-top:0}.mt-12{margin-top:3rem}.mt-8{margin-top:2rem}.mt-\[\.625rem\]{margin-top:.625rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.h-12{height:3rem}.h-\[max-content\]{height:-webkit-max-content;height:-moz-max-content;height:max-content}.h-auto{height:auto}.h-full{height:100%}.w-6{width:1.5rem}.w-\[10rem\]{width:10rem}.w-full{width:100%}.max-w-\[30ch\]{max-width:30ch}.max-w-\[43ch\]{max-width:43ch}.max-w-\[7\.5rem\]{max-width:7.5rem}.max-w-\[80\%\]{max-width:80%}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-shrink{flex-shrink:1}.basis-\[max-content\]{flex-basis:max-content}.basis-full{flex-basis:100%}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-\[auto\]{grid-template-columns:auto}.grid-rows-\[auto\]{grid-template-rows:auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.overflow-scroll{overflow:scroll}.rounded-none{border-radius:0}.border-0{border-width:0px}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-solid{border-style:solid}.border-brand-blue-light{--tw-border-opacity: 1;border-color:rgba(var(--color-brand-blue-light)/var(--tw-border-opacity))}.border-brand-gold{--tw-border-opacity: 1;border-color:rgba(var(--color-brand-gold)/var(--tw-border-opacity))}.border-brand-wine{--tw-border-opacity: 1;border-color:rgba(var(--color-brand-wine)/var(--tw-border-opacity))}.border-neutral-300{--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-300)/var(--tw-border-opacity))}.border-red-800{--tw-border-opacity: 1;border-color:rgb(153 27 27 / var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-opacity-20{--tw-border-opacity: .2}.bg-brand-gold{--tw-bg-opacity: 1;background-color:rgba(var(--color-brand-gold)/var(--tw-bg-opacity))}.bg-brand-wine{--tw-bg-opacity: 1;background-color:rgba(var(--color-brand-wine)/var(--tw-bg-opacity))}.bg-neutral-300{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-300)/var(--tw-bg-opacity))}.bg-neutral-400{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-400)/var(--tw-bg-opacity))}.bg-neutral-50{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-50)/var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity: 1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.box-decoration-clone{-webkit-box-decoration-break:clone;box-decoration-break:clone}.fill-neutral-950{fill:rgba(var(--color-neutral-950)/1)}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:Source Code Pro,monospace,ui-monospace,SFMono-Regular}.font-sans{font-family:Libre Franklin,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.text-\[2\.625rem\]{font-size:2.625rem}.text-lg{font-size:1.125rem}.text-med{font-size:1rem}.text-xl{font-size:1.25rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.tracking-\[\.07em\]{letter-spacing:.07em}.tracking-\[\.1em\]{letter-spacing:.1em}.tracking-\[\.8125rem\]{letter-spacing:.8125rem}.text-\[rgba\(0\,0\,0\)\]{--tw-text-opacity: 1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-\[rgba\(255\,251\,250\)\]{--tw-text-opacity: 1;color:rgba(255,251,250,var(--tw-text-opacity))}.text-brand-gold{--tw-text-opacity: 1;color:rgba(var(--color-brand-gold)/var(--tw-text-opacity))}.text-brand-wine{--tw-text-opacity: 1;color:rgba(var(--color-brand-wine)/var(--tw-text-opacity))}.text-neutral-100{--tw-text-opacity: 1;color:rgba(var(--color-neutral-100)/var(--tw-text-opacity))}.text-neutral-950{--tw-text-opacity: 1;color:rgba(var(--color-neutral-950)/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}.decoration-solid{-webkit-text-decoration-style:solid;text-decoration-style:solid}.decoration-0{text-decoration-thickness:0px}.decoration-\[6\%\]{text-decoration-thickness:6%}.underline-offset-\[5\%\]{text-underline-offset:5%}.blur{--tw-blur: blur(8px);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.lock-scroll{overflow:hidden}.citation{margin-bottom:0;font-style:italic}.shout{margin-top:0;max-width:30ch;font-size:2rem;font-weight:500;line-height:1.25}@media (min-width: 768px){.shout{font-size:3rem}}.boxed{margin-top:1rem;margin-bottom:1rem;margin-left:0;margin-right:0;border-width:2px;border-style:solid;border-color:rgba(var(--color-brand-wine)/var(--tw-border-opacity));--tw-border-opacity: .2;padding:1rem}.hover\:brightness-85:hover{--tw-brightness: brightness(.85);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-color-scheme: dark){.dark\:bg-neutral-300{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-300)/var(--tw-bg-opacity))}.dark\:bg-neutral-950{--tw-bg-opacity: 1;background-color:rgba(var(--color-neutral-950)/var(--tw-bg-opacity))}.dark\:invert{--tw-invert: invert(100%);-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}}@media not all and (min-width: 1024px){.max-lg\:absolute{position:absolute}.max-lg\:left-0{left:0}.max-lg\:top-\[104px\]{top:104px}.max-lg\:hidden{display:none}.max-lg\:h-\[calc\(100vh-104px\)\]{height:calc(100vh - 104px)}.max-lg\:flex-col{flex-direction:column}.max-lg\:p-6{padding:1.5rem}}@media (min-width: 500px){.xs\:max-w-3xl{max-width:48rem}}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2 / span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:gap-8{gap:2rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}}@media (min-width: 1024px){.lg\:mx-2{margin-left:.5rem;margin-right:.5rem}.lg\:hidden{display:none}.lg\:flex-shrink-0{flex-shrink:0}.lg\:flex-grow{flex-grow:1}.lg\:justify-center{justify-content:center}.lg\:border-2{border-width:2px}.lg\:border-solid{border-style:solid}.lg\:border-neutral-400{--tw-border-opacity: 1;border-color:rgba(var(--color-neutral-400)/var(--tw-border-opacity))}.lg\:bg-transparent{background-color:transparent}.lg\:text-xl{font-size:1.25rem}}

package/dist/tools/testing/serializer.d.ts

@@ -0,0 +1,7 @@
+declare function test(received: any): boolean;
+declare function print(received: any): any;
+declare const _default: {
+    print: typeof print;
+    test: typeof test;
+};
+export default _default;

package/dist/tools/testing/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/vuelidate.d.ts

@@ -0,0 +1,36 @@
+import { PdapFormValidator, PdapFormValidators, PdapLengthRules } from 'src/components/Form/types.ts';
+/**
+ * Type predicate to ensure the passed validator is a valid one.
+ * @param s string to check against keys of the vuelidate validators object
+ */
+export declare function isPdapVuelidateValidator(s: string): s is keyof PdapFormValidators;
+export declare function isLengthRule(s: string): s is PdapLengthRules;
+export declare function makeLengthRule(rule: PdapLengthRules, value: number): {
+    [x: string]: import("@vuelidate/core").ValidationRuleWithParams<{
+        max: number;
+    }, any> | import("@vuelidate/core").ValidationRuleWithParams<{
+        min: number;
+    }, any>;
+};
+export declare function makeLengthRuleWithCustomMessage(rule: PdapLengthRules, value: number, message: string): {
+    [x: string]: import("@vuelidate/core").ValidationRuleWithParams<object, any>;
+};
+export declare function makeRequiredRule(): {
+    required: import("@vuelidate/core").ValidationRuleWithoutParams<any>;
+};
+export declare function makeRequiredRuleWithCustomMessage(message: string): {
+    required: import("@vuelidate/core").ValidationRuleWithParams<object, any>;
+};
+export declare function createRule<T extends PdapFormValidator<number | boolean>>(rule: string, validator: T): {
+    [x: string]: import("@vuelidate/core").ValidationRuleWithParams<object, any>;
+} | {
+    [x: string]: import("@vuelidate/core").ValidationRuleWithParams<{
+        max: number;
+    }, any> | import("@vuelidate/core").ValidationRuleWithParams<{
+        min: number;
+    }, any>;
+} | {
+    required: import("@vuelidate/core").ValidationRuleWithParams<object, any>;
+} | {
+    required: import("@vuelidate/core").ValidationRuleWithoutParams<any>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pdap-design-system",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "Global styles for PDAP apps",
 	"author": "Police Data Accessibility Project, Inc.",
 	"license": "ISC",
@@ -8,15 +8,17 @@
 	"bugs": {
 		"url": "https://github.com/Police-Data-Accessibility-Project/design-system/issues"
 	},
+	"type": "module",
 	"exports": {
-		"import": {
-			"default": "./dist/css/global-styles.css"
+		".": {
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs",
+			"types": "./dist/index.d.ts"
 		},
-		"require": {
-			"default": "./dist/css/global-styles.css"
-		}
+		"./images/*": "./dist/images/*",
+		"./styles": "./dist/styles.css"
 	},
-	"main": "./dist/css/global-styles.css",
+	"main": "./dist/index.js",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Police-Data-Accessibility-Project/design-system.git"
@@ -25,8 +27,8 @@
 		"doc": "docs"
 	},
 	"engines": {
-		"npm": ">=9.0.0",
-		"node": ">=18.0.0"
+		"npm": ">=8.19.3",
+		"node": ">=18.13.0"
 	},
 	"browserslist": {
 		"production": [
@@ -42,31 +44,59 @@
 		]
 	},
 	"devDependencies": {
+		"@types/node": "^20.8.9",
+		"@typescript-eslint/eslint-plugin": "^6.9.1",
+		"@typescript-eslint/parser": "^6.9.1",
+		"@vitejs/plugin-vue": "^4.4.0",
+		"@vitest/coverage-v8": "^0.34.6",
+		"@vue/eslint-config-prettier": "^8.0.0",
+		"@vue/eslint-config-typescript": "^12.0.0",
+		"@vue/test-utils": "^2.4.1",
+		"autoprefixer": "^10.4.16",
 		"cross-env": "^7.0.3",
+		"eslint": "^8.53.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-vue": "^9.18.1",
+		"jest-serializer-vue-tjw": "^3.20.0",
 		"npm-run-all": "^4.1.5",
+		"prettier": "^3.0.3",
 		"rimraf": "^5.0.5",
-		"tailwindcss": "^3.3.3"
+		"stylelint": "^15.11.0",
+		"stylelint-config-standard": "^34.0.0",
+		"tailwindcss": "^3.3.3",
+		"typescript": "^5.2.2",
+		"vite": "^4.5.0",
+		"vitest": "^0.34.6",
+		"vue-eslint-parser": "^9.3.2",
+		"vue-tsc": "^1.8.22"
 	},
 	"dependencies": {
+		"@vuelidate/core": "^2.0.3",
+		"@vuelidate/validators": "^2.0.4",
 		"fs-extra": "^11.1.1",
-		"minimist": "^1.2.8"
+		"happy-dom": "^6.0.4",
+		"minimist": "^1.2.8",
+		"vue": "^3.3.7",
+		"vue-router": "^4.2.5"
 	},
 	"scripts": {
-		"build": "run-p build:*",
-		"build:assets": "mkdir -p ./dist/images && cp -a ./src/images ./dist",
-		"build:styles": "npm run styles",
-		"clean": "rimraf dist",
-		"prebuild": "npm run clean",
+		"build": "vite build && vue-tsc",
+		"build:watch": "npm run build -- --watch",
+		"clean": "rimraf coverage test/report",
+		"lint": "run-p lint:*",
+		"lint:es": "eslint src --ext .ts .",
+		"lint:css": "stylelint 'src/**/*.css'",
+		"postbuild": "npm run clean",
 		"prepare": "npm run build",
 		"prepublishOnly": "npm run build",
-		"styles": "npx tailwindcss -i ./src/css/global-styles.css -o ./dist/css/global-styles.css",
-		"styles:watch": "npm run styles -- --watch",
-		"test": "echo \\\"No tests for CSS-only package.\\\" && exit 0"
+		"test": "vitest --dom --run --coverage",
+		"test:changed": "npm run test --changed",
+		"types": "vue-tsc"
 	},
 	"files": [
 		"bin",
+		"CONTRIBUTING.md",
 		"dist",
-		"system",
 		"README.md"
 	],
 	"bin": {