@cn-npm/search-autocomplete 0.2.19 → 0.2.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/bundle.js +8 -8
  2. package/package.json +3 -2
  3. package/src/components/Loader/Loader.module.scss +1 -1
  4. package/src/components/SearchAutocomplete/SearchAutocomplete.module.scss +1 -1
  5. package/src/components/SearchAutocomplete/SearchAutocomplete.tsx +22 -22
  6. package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.module.scss +16 -16
  7. package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.tsx +4 -4
  8. package/src/components/SearchAutocompleteTag/SearchAutocompleteTag.module.scss +2 -2
  9. package/src/index.css +4 -4
  10. package/tailwind.config.js +5 -2
package/dist/bundle.js CHANGED
@@ -122,7 +122,7 @@ var css_248z$4 = ".SearchAutocomplete-module_SearchAutocomplete__7VjKd {\n po
122
122
  var styles$3 = {"SearchAutocomplete":"SearchAutocomplete-module_SearchAutocomplete__7VjKd"};
123
123
  styleInject(css_248z$4);
124
124
 
125
- var css_248z$3 = ".SearchAutocompleteTag-module_SearchAutocompleteTag__edz93 {\n\n margin: 0.25rem;\n\n display: inline-block;\n\n border-radius: 0.5rem;\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(242 243 247 / var(--tw-bg-opacity));\n\n padding-top: 0.5rem;\n\n padding-bottom: 0.5rem;\n\n padding-left: 0.75rem;\n\n padding-right: 0.75rem;\n\n text-align: left;\n\n font-family: sofia-pro, sans-serif;\n\n font-size: 1rem;\n\n font-weight: 400;\n\n line-height: 1.5rem;\n\n letter-spacing: 0em;\n\n --tw-text-opacity: 1;\n\n color: rgb(0 25 54 / var(--tw-text-opacity));\n\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n\n --tw-ring-color: transparent;\n\n --tw-ring-offset-width: 2px;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color, focus-color;\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-duration: 150ms\n}\n\n.SearchAutocompleteTag-module_SearchAutocompleteTag__edz93:hover {\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(230 232 239 / var(--tw-bg-opacity))\n}\n\n.highlighted-text {\n\n font-weight: 600\n}";
125
+ var css_248z$3 = ".SearchAutocompleteTag-module_SearchAutocompleteTag__edz93 {\n\n margin: 0.25rem;\n\n display: inline-block;\n\n border-radius: 0.5rem;\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(242 243 247 / var(--tw-bg-opacity));\n\n padding-top: 0.5rem;\n\n padding-bottom: 0.5rem;\n\n padding-left: 0.75rem;\n\n padding-right: 0.75rem;\n\n text-align: left;\n\n font-family: sofia-pro, sans-serif;\n\n font-size: 1rem;\n\n font-weight: 400;\n\n line-height: 1.5rem;\n\n letter-spacing: 0em;\n\n --tw-text-opacity: 1;\n\n color: rgb(0 25 54 / var(--tw-text-opacity));\n\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n\n --tw-ring-color: transparent;\n\n --tw-ring-offset-width: 2px;\n\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color, focus-color;\n\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n transition-duration: 150ms\n}\n\n.SearchAutocompleteTag-module_SearchAutocompleteTag__edz93:hover {\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(230 232 239 / var(--tw-bg-opacity))\n}\n\n.highlighted-text {\n\n font-weight: 600\n}";
126
126
  var styles$2 = {"SearchAutocompleteTag":"SearchAutocompleteTag-module_SearchAutocompleteTag__edz93"};
127
127
  styleInject(css_248z$3);
128
128
 
@@ -177,7 +177,7 @@ var resultsLimit = function (title) {
177
177
  };
178
178
  var SearchAutocompleteSection = function (props) {
179
179
  var _a;
180
- return (jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"](styles$1.SearchAutocompleteSection, "autocomplete-section"), "data-testid": "searchAutocompleteSection" }, { children: [jsxRuntime.jsx("h2", __assign({ className: "sa-text-night-sky-800 sa-mb-2 sa-text-base", "data-testid": "searchResultTitle" }, { children: props.title })), jsxRuntime.jsx("div", __assign({ className: "sa-flow-root" }, { children: jsxRuntime.jsxs("div", __assign({ className: "sa-m-1 sa-flex sa-flex-wrap autocomplete-section", "data-testid": "searchTag" }, { children: [(props.results == null || props.results.length === 0) && (jsxRuntime.jsx("p", __assign({ className: "sa-pl-3" }, { children: "No results found" }))), props.results &&
180
+ return (jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"](styles$1.SearchAutocompleteSection, "autocomplete-section"), "data-testid": "searchAutocompleteSection" }, { children: [jsxRuntime.jsx("h2", __assign({ className: "text-night-sky-800 mb-2 text-base", "data-testid": "searchResultTitle" }, { children: props.title })), jsxRuntime.jsx("div", __assign({ className: "flow-root" }, { children: jsxRuntime.jsxs("div", __assign({ className: "-m-1 flex flex-wrap autocomplete-section", "data-testid": "searchTag" }, { children: [(props.results == null || props.results.length === 0) && (jsxRuntime.jsx("p", __assign({ className: "pl-3" }, { children: "No results found" }))), props.results &&
181
181
  props.results.length > 0 &&
182
182
  ((_a = props.results) === null || _a === void 0 ? void 0 : _a.slice(0, resultsLimit(props.title || "")).map(function (results) { return (jsxRuntime.jsx(SearchAutocompleteTag, { section: props.title || "", searchTerm: props.searchTerm, ein: results.ein, name: results.title, url: results.url }, results.url)); }))] })) }))] })));
183
183
  };
@@ -268,11 +268,11 @@ var SearchAutocomplete = function (props) {
268
268
  React__default["default"].useEffect(function () {
269
269
  var tags = document.querySelectorAll(".autocomplete-tag, .autocomplete-custom-search");
270
270
  tags.forEach(function (x, i) {
271
- x.classList.remove("autocomplete-selected", "!sa-bg-grey-100", "!sa-ring-blue-600");
271
+ x.classList.remove("autocomplete-selected", "!bg-grey-100", "!ring-blue-600");
272
272
  if (i + 1 === selectedTag) {
273
273
  x.classList.add("autocomplete-selected", tags[i].classList.contains("autocomplete-tag")
274
- ? "!sa-bg-grey-100"
275
- : "sa-none", "!sa-ring-blue-600");
274
+ ? "!bg-grey-100"
275
+ : "none", "!ring-blue-600");
276
276
  x.scrollIntoView({
277
277
  behavior: "smooth",
278
278
  });
@@ -395,12 +395,12 @@ var SearchAutocomplete = function (props) {
395
395
  }
396
396
  }
397
397
  };
398
- return (jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"](styles$3.SearchAutocomplete, "autocomplete"), "data-testid": "SearchAutocomplete" }, { children: [jsxRuntime.jsxs("form", __assign({ action: "/search?q=".concat(searchTerm), className: "sa-flex sa-font-sofia-pro", autoComplete: "off" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "search", className: "sa-hidden" }, { children: label })), jsxRuntime.jsxs("div", __assign({ className: "sa-relative sa-flex sa-flex-grow" }, { children: [jsxRuntime.jsx(reactDebounceInput.DebounceInput, { type: "text", name: "q", id: "search", placeholder: label, className: "sa-flex-auto sa-pr-0 sa-items-stretch sa-flex-grow sa-text-night-sky-800 sa-ring-0 sa-py-0 sa-shadow-none sa-focus:ring-0 sa-bg-white sa-transition-colors sa-border-opacity-100 sa-hover:bg-grey-100 sa-hover:border-grey-500 sa-hover:border-opacity-50 sa-focus:bg-grey-100 sa-focus:border-blue-400 sa-inline-block sm:sa-text-sm sa-border-grey-500 sa-rounded-md sa-rounded-tr-none sa-rounded-br-none sa-placeholder:text-gray-600", debounceTimeout: 300, minLength: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, onClick: function () { return setOpen(true); }, onFocus: function () { return setOpen(true); }, onBlur: function () { return setOpen(false); }, onKeyDown: function (e) { return keyDownHandler(e); } }), searchTerm !== "" && (jsxRuntime.jsx("button", __assign({ type: "button", className: "sa-absolute sa-right-3 sa-top-[50%] -sa-translate-y-[50%] sa-text-night-sky-800 hover:sa-text-blue-500 sa-transition-colors !sa-bg-[transparent] sa-cursor-pointer", onClick: clearSearch }, { children: jsxRuntime.jsx(SvgCircleClose, { className: "sa-fill-night-sky-800 hover:sa-fill-blue-500 sa-h-4 sa-w-4" }) })))] })), jsxRuntime.jsx("button", __assign({ type: "submit", className: "sa-inline-flex sa-transition-colors sa-items-center sa-justify-center sa-px-4 sa-h-[38px] sa-font-medium sa-rounded-md sa-shadow-sm sa-border sa-border-blue-500 sa-text-white sa-bg-blue-500 hover:sa-bg-blue-600 hover:sa-border-blue-600 focus:sa-outline-none focus:sa-ring-2 focus:sa-ring-offset-2 focus:sa-ring-blue-500 sm:sa-text-sm sa-rounded-tl-none sa-rounded-bl-none" }, { children: jsxRuntime.jsx(SvgSearch, { className: "sa-fill-white sa-h-4 sa-w-4" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "sa-relative" }, { children: jsxRuntime.jsx(CSSTransition__default["default"], __assign({ mountOnEnter: true, unmountOnExit: true, in: open, timeout: 300, classNames: "sa-fade-slide", "data-testid": "searchResults" }, { children: jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"]("search-results-container sa-absolute sa-top-0 sa-left-1/2 -sa-translate-x-1/2 sa-mt-2 sa-bg-white sa-py-5 sa-rounded-[1.25rem] sa-z-50 sa-shadow-lg sa-border border-[#a6abbd] sa-border-opacity-60 sa-w-full tablet:sa-w-[70vw] sa-min-h-[8rem] sa-overflow-hidden") }, { children: [jsxRuntime.jsxs(ErrorBoundary, { children: [loading && (jsxRuntime.jsx(Loader, { "data-testid": "Loader", className: "sa-absolute sa-top-5 sa-right-5" })), jsxRuntime.jsxs("div", __assign({ className: "sa-px-6 sa-h-full sa-mb-12 sa-max-h-[70vh] sa-overflow-y-auto", "data-testid": "Sections" }, { children: [hasError && (jsxRuntime.jsx("p", { children: "Sorry, there was a problem. Please try your search again." })), searchData.data &&
398
+ return (jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"](styles$3.SearchAutocomplete, "autocomplete"), "data-testid": "SearchAutocomplete" }, { children: [jsxRuntime.jsxs("form", __assign({ action: "/search?q=".concat(searchTerm), className: "flex font-sofia-pro", autoComplete: "off" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "search", className: "hidden" }, { children: label })), jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-grow" }, { children: [jsxRuntime.jsx(reactDebounceInput.DebounceInput, { type: "text", name: "q", id: "search", placeholder: label, className: "form-input flex-auto pr-0 items-stretch flex-grow text-night-sky-800 ring-0 py-0 shadow-none focus:ring-0 bg-white transition-colors border-opacity-100 hover:bg-grey-100 hover:border-grey-500 hover:border-opacity-50 focus:bg-grey-100 focus:border-blue-400 inline-block sm:text-sm border-grey-500 rounded-md rounded-tr-none rounded-br-none placeholder:text-gray-600", debounceTimeout: 300, minLength: 2, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, onClick: function () { return setOpen(true); }, onFocus: function () { return setOpen(true); }, onBlur: function () { return setOpen(false); }, onKeyDown: function (e) { return keyDownHandler(e); } }), searchTerm !== "" && (jsxRuntime.jsx("button", __assign({ type: "button", className: "absolute right-3 top-[50%] -translate-y-[50%] text-night-sky-800 hover:text-blue-500 transition-colors !bg-[transparent] cursor-pointer", onClick: clearSearch }, { children: jsxRuntime.jsx(SvgCircleClose, { className: "fill-night-sky-800 hover:fill-blue-500 h-4 w-4" }) })))] })), jsxRuntime.jsx("button", __assign({ type: "submit", className: "inline-flex transition-colors items-center justify-center px-4 h-[38px] font-medium rounded-md shadow-sm border border-blue-500 text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm rounded-tl-none rounded-bl-none" }, { children: jsxRuntime.jsx(SvgSearch, { className: "fill-white h-4 w-4" }) }))] })), jsxRuntime.jsx("div", __assign({ className: "relative" }, { children: jsxRuntime.jsx(CSSTransition__default["default"], __assign({ mountOnEnter: true, unmountOnExit: true, in: open, timeout: 300, classNames: "fade-slide", "data-testid": "searchResults" }, { children: jsxRuntime.jsxs("div", __assign({ className: classNames__default["default"]("search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden") }, { children: [jsxRuntime.jsxs(ErrorBoundary, { children: [loading && (jsxRuntime.jsx(Loader, { "data-testid": "Loader", className: "absolute top-5 right-5" })), jsxRuntime.jsxs("div", __assign({ className: "px-6 h-full mb-12 max-h-[70vh] overflow-y-auto", "data-testid": "Sections" }, { children: [hasError && (jsxRuntime.jsx("p", { children: "Sorry, there was a problem. Please try your search again." })), searchData.data &&
399
399
  searchData.data.searchAutocomplete &&
400
- searchData.data.searchAutocomplete.map(function (section) { return (jsxRuntime.jsx(SearchAutocompleteSection, { searchTerm: searchTerm, title: section.title, results: section.results }, section.title)); })] }))] }), jsxRuntime.jsx("div", __assign({ className: "sa-border-t sa-border-[#a6abbd] sa-border-opacity-60 sa-flex sa-items-center sa-absolute sa-bottom-0 sa-left-0 sa-w-full sa-bg-white sa-h-16" }, { children: jsxRuntime.jsxs("a", __assign({ href: "/search?q=".concat(searchTerm), className: "sa-px-3 sa-py-1 sa-ml-6 sa-flex sa-items-center sa-space-x-3 sa-ring-1 sa-ring-offset-2 sa-ring-transparent sa-transition-colors sa-text-blue-500 hover:sa-text-blue-600 sa-rounded-lg autocomplete-custom-search" }, { children: [jsxRuntime.jsx(SvgSearch, { className: "sa-fill-blue-500 hover:sa-fill-blue-600 sa-h-4 sa-w-4" }), jsxRuntime.jsx("span", __assign({ className: "sa-font-semibold sa-text-[1.125rem] " }, { children: searchTerm === "" ? "Custom Search" : "View All Results" }))] })) }))] })) })) }))] })));
400
+ searchData.data.searchAutocomplete.map(function (section) { return (jsxRuntime.jsx(SearchAutocompleteSection, { searchTerm: searchTerm, title: section.title, results: section.results }, section.title)); })] }))] }), jsxRuntime.jsx("div", __assign({ className: "border-t border-[#a6abbd] border-opacity-60 flex items-center absolute bottom-0 left-0 w-full bg-white h-16" }, { children: jsxRuntime.jsxs("a", __assign({ href: "/search?q=".concat(searchTerm), className: "px-3 py-1 ml-6 flex items-center space-x-3 ring ring-1 ring-offset-2 ring-transparent transition-colors text-blue-500 hover:text-blue-600 rounded-lg autocomplete-custom-search" }, { children: [jsxRuntime.jsx(SvgSearch, { className: "fill-blue-500 hover:fill-blue-600 h-4 w-4" }), jsxRuntime.jsx("span", __assign({ className: "font-semibold text-[1.125rem] " }, { children: searchTerm === "" ? "Custom Search" : "View All Results" }))] })) }))] })) })) }))] })));
401
401
  };
402
402
 
403
- var css_248z = "/*\n! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n font-feature-settings: normal; /* 5 */\n font-variation-settings: normal; /* 6 */\n -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-feature-settings: normal; /* 2 */\n font-variation-settings: normal; /* 3 */\n font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-feature-settings: inherit; /* 1 */\n font-variation-settings: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n display: none;\n}\n @import url(\"https://p.typekit.net/p.css?s=1&k=etf0mna&ht=tk&f=24536.24553.24554.24558.24559.24539.24540.24545.24546.24547.24548.24549.24552.24580.24581.24586.24587.24588.24589.24590.24591&a=27633482&app=typekit&e=css\");\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/745ea3/00000000000000007735a146/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/745ea3/00000000000000007735a146/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/745ea3/00000000000000007735a146/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/cdf40b/00000000000000007735a147/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/cdf40b/00000000000000007735a147/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/cdf40b/00000000000000007735a147/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/691282/00000000000000007735a149/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/691282/00000000000000007735a149/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/691282/00000000000000007735a149/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/54ce76/00000000000000007735a154/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/54ce76/00000000000000007735a154/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/54ce76/00000000000000007735a154/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/9f41be/00000000000000007735a157/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/9f41be/00000000000000007735a157/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/9f41be/00000000000000007735a157/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/66e20c/00000000000000007735f993/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/66e20c/00000000000000007735f993/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/66e20c/00000000000000007735f993/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/19ced7/00000000000000007735f992/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/19ced7/00000000000000007735f992/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/19ced7/00000000000000007735f992/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/33e8a4/00000000000000007735f99b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/33e8a4/00000000000000007735f99b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/33e8a4/00000000000000007735f99b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/c09857/00000000000000007735f98c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/c09857/00000000000000007735f98c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/c09857/00000000000000007735f98c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/262452/00000000000000007735f99a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/262452/00000000000000007735f99a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/262452/00000000000000007735f99a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 600;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/36f509/00000000000000007735f994/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/36f509/00000000000000007735f994/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/36f509/00000000000000007735f994/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 600;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/8b3e11/00000000000000007735a150/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/8b3e11/00000000000000007735a150/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/8b3e11/00000000000000007735a150/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/2fe268/00000000000000007735a153/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/2fe268/00000000000000007735a153/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/2fe268/00000000000000007735a153/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/a33c9d/00000000000000007735a15e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/a33c9d/00000000000000007735a15e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/a33c9d/00000000000000007735a15e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/fa5448/00000000000000007735a161/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/fa5448/00000000000000007735a161/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/fa5448/00000000000000007735a161/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/cf0830/00000000000000007735a162/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/cf0830/00000000000000007735a162/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/cf0830/00000000000000007735a162/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/7da024/00000000000000007735a164/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/7da024/00000000000000007735a164/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/7da024/00000000000000007735a164/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/ef0e2d/00000000000000007735a166/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/ef0e2d/00000000000000007735a166/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/ef0e2d/00000000000000007735a166/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 600;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/1ff8be/00000000000000007735a168/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/1ff8be/00000000000000007735a168/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/1ff8be/00000000000000007735a168/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 600;\n font-stretch: normal;\n }\n\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-gradient-from-position: ;\n --tw-gradient-via-position: ;\n --tw-gradient-to-position: ;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n.sa-absolute {\n position: absolute;\n}\n.sa-relative {\n position: relative;\n}\n.sa-bottom-0 {\n bottom: 0px;\n}\n.sa-left-0 {\n left: 0px;\n}\n.sa-left-1\\/2 {\n left: 50%;\n}\n.sa-right-3 {\n right: 0.75rem;\n}\n.sa-right-5 {\n right: 1.25rem;\n}\n.sa-top-0 {\n top: 0px;\n}\n.sa-top-5 {\n top: 1.25rem;\n}\n.sa-top-\\[50\\%\\] {\n top: 50%;\n}\n.sa-z-50 {\n z-index: 50;\n}\n.sa-m-1 {\n margin: 0.25rem;\n}\n.sa-mb-12 {\n margin-bottom: 3rem;\n}\n.sa-mb-2 {\n margin-bottom: 0.5rem;\n}\n.sa-ml-6 {\n margin-left: 1.5rem;\n}\n.sa-mt-2 {\n margin-top: 0.5rem;\n}\n.sa-inline-block {\n display: inline-block;\n}\n.sa-flex {\n display: flex;\n}\n.sa-inline-flex {\n display: inline-flex;\n}\n.sa-flow-root {\n display: flow-root;\n}\n.sa-hidden {\n display: none;\n}\n.sa-h-16 {\n height: 4rem;\n}\n.sa-h-4 {\n height: 1rem;\n}\n.sa-h-\\[38px\\] {\n height: 38px;\n}\n.sa-h-full {\n height: 100%;\n}\n.sa-max-h-\\[70vh\\] {\n max-height: 70vh;\n}\n.sa-min-h-\\[8rem\\] {\n min-height: 8rem;\n}\n.sa-w-4 {\n width: 1rem;\n}\n.sa-w-full {\n width: 100%;\n}\n.sa-flex-auto {\n flex: 1 1 auto;\n}\n.sa-flex-grow {\n flex-grow: 1;\n}\n.-sa-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-sa-translate-y-\\[50\\%\\] {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.sa-cursor-pointer {\n cursor: pointer;\n}\n.sa-flex-wrap {\n flex-wrap: wrap;\n}\n.sa-items-center {\n align-items: center;\n}\n.sa-items-stretch {\n align-items: stretch;\n}\n.sa-justify-center {\n justify-content: center;\n}\n.sa-space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.sa-overflow-hidden {\n overflow: hidden;\n}\n.sa-overflow-y-auto {\n overflow-y: auto;\n}\n.sa-rounded-\\[1\\.25rem\\] {\n border-radius: 1.25rem;\n}\n.sa-rounded-lg {\n border-radius: 0.5rem;\n}\n.sa-rounded-md {\n border-radius: 0.375rem;\n}\n.sa-rounded-bl-none {\n border-bottom-left-radius: 0px;\n}\n.sa-rounded-br-none {\n border-bottom-right-radius: 0px;\n}\n.sa-rounded-tl-none {\n border-top-left-radius: 0px;\n}\n.sa-rounded-tr-none {\n border-top-right-radius: 0px;\n}\n.sa-border {\n border-width: 1px;\n}\n.sa-border-t {\n border-top-width: 1px;\n}\n.sa-border-\\[\\#a6abbd\\] {\n --tw-border-opacity: 1;\n border-color: rgb(166 171 189 / var(--tw-border-opacity));\n}\n.sa-border-blue-500 {\n --tw-border-opacity: 1;\n border-color: rgb(53 95 254 / var(--tw-border-opacity));\n}\n.sa-border-grey-500 {\n --tw-border-opacity: 1;\n border-color: rgb(155 163 192 / var(--tw-border-opacity));\n}\n.sa-border-opacity-100 {\n --tw-border-opacity: 1;\n}\n.sa-border-opacity-60 {\n --tw-border-opacity: 0.6;\n}\n.\\!sa-bg-\\[transparent\\] {\n background-color: transparent !important;\n}\n.\\!sa-bg-grey-100 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(230 232 239 / var(--tw-bg-opacity)) !important;\n}\n.sa-bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(53 95 254 / var(--tw-bg-opacity));\n}\n.sa-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.sa-fill-blue-500 {\n fill: #355FFE;\n}\n.sa-fill-night-sky-800 {\n fill: #001936;\n}\n.sa-fill-white {\n fill: #FFFFFF;\n}\n.sa-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.sa-px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.sa-px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.sa-py-0 {\n padding-top: 0px;\n padding-bottom: 0px;\n}\n.sa-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.sa-py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.sa-pl-3 {\n padding-left: 0.75rem;\n}\n.sa-pr-0 {\n padding-right: 0px;\n}\n.sa-font-sofia-pro {\n font-family: sofia-pro, sans-serif;\n}\n.sa-text-\\[1\\.125rem\\] {\n font-size: 1.125rem;\n}\n.sa-text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.sa-font-medium {\n font-weight: 500;\n}\n.sa-font-semibold {\n font-weight: 600;\n}\n.sa-text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(53 95 254 / var(--tw-text-opacity));\n}\n.sa-text-night-sky-800 {\n --tw-text-opacity: 1;\n color: rgb(0 25 54 / var(--tw-text-opacity));\n}\n.sa-text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.sa-shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sa-shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sa-shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sa-ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.sa-ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.\\!sa-ring-blue-600 {\n --tw-ring-opacity: 1 !important;\n --tw-ring-color: rgb(35 74 224 / var(--tw-ring-opacity)) !important;\n}\n.sa-ring-transparent {\n --tw-ring-color: transparent;\n}\n.sa-ring-offset-2 {\n --tw-ring-offset-width: 2px;\n}\n.sa-transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color, focus-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n/* Search Results Container Styles */\n.fade-slide-enter {\n --tw-translate-y: -0.75rem;\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 0;\n}\n\n.fade-slide-enter-active,\n.fade-slide-enter-done {\n --tw-translate-y: 0px;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 1;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.fade-slide-exit {\n --tw-translate-y: 0px;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 1;\n}\n\n.fade-slide-exit-active,\n.fade-slide-exit-done {\n --tw-translate-y: -0.75rem;\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 0;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.hover\\:sa-border-blue-600:hover {\n --tw-border-opacity: 1;\n border-color: rgb(35 74 224 / var(--tw-border-opacity));\n}\n\n.hover\\:sa-bg-blue-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(35 74 224 / var(--tw-bg-opacity));\n}\n\n.hover\\:sa-fill-blue-500:hover {\n fill: #355FFE;\n}\n\n.hover\\:sa-fill-blue-600:hover {\n fill: #234AE0;\n}\n\n.hover\\:sa-text-blue-500:hover {\n --tw-text-opacity: 1;\n color: rgb(53 95 254 / var(--tw-text-opacity));\n}\n\n.hover\\:sa-text-blue-600:hover {\n --tw-text-opacity: 1;\n color: rgb(35 74 224 / var(--tw-text-opacity));\n}\n\n.focus\\:sa-outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:sa-ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:sa-ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(53 95 254 / var(--tw-ring-opacity));\n}\n\n.focus\\:sa-ring-offset-2:focus {\n --tw-ring-offset-width: 2px;\n}\n\n@media (min-width: 1000px) {\n\n .tablet\\:sa-w-\\[70vw\\] {\n width: 70vw;\n }\n}\n";
403
+ var css_248z = "/*\n! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n box-sizing: border-box; /* 1 */\n border-width: 0; /* 2 */\n border-style: solid; /* 2 */\n border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n line-height: 1.5; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */\n tab-size: 4; /* 3 */\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n margin: 0; /* 1 */\n line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n height: 0; /* 1 */\n color: inherit; /* 2 */\n border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: inherit;\n font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n color: inherit;\n text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n text-indent: 0; /* 1 */\n border-color: inherit; /* 2 */\n border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n font-weight: inherit; /* 1 */\n line-height: inherit; /* 1 */\n color: inherit; /* 1 */\n margin: 0; /* 2 */\n padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n -webkit-appearance: button; /* 1 */\n background-color: transparent; /* 2 */\n background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n margin: 0;\n}\n\nfieldset {\n margin: 0;\n padding: 0;\n}\n\nlegend {\n padding: 0;\n}\n\nol,\nul,\nmenu {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n opacity: 1; /* 1 */\n color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n display: block; /* 1 */\n vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n max-width: 100%;\n height: auto;\n}\n @import url(\"https://p.typekit.net/p.css?s=1&k=etf0mna&ht=tk&f=24536.24553.24554.24558.24559.24539.24540.24545.24546.24547.24548.24549.24552.24580.24581.24586.24587.24588.24589.24590.24591&a=27633482&app=typekit&e=css\");\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/745ea3/00000000000000007735a146/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/745ea3/00000000000000007735a146/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/745ea3/00000000000000007735a146/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/cdf40b/00000000000000007735a147/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/cdf40b/00000000000000007735a147/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/cdf40b/00000000000000007735a147/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/691282/00000000000000007735a149/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/691282/00000000000000007735a149/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/691282/00000000000000007735a149/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/54ce76/00000000000000007735a154/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/54ce76/00000000000000007735a154/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/54ce76/00000000000000007735a154/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-soft\";\n src: url(\"https://use.typekit.net/af/9f41be/00000000000000007735a157/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/9f41be/00000000000000007735a157/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/9f41be/00000000000000007735a157/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/5d97ff/00000000000000007735f999/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/66e20c/00000000000000007735f993/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/66e20c/00000000000000007735f993/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/66e20c/00000000000000007735f993/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/19ced7/00000000000000007735f992/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/19ced7/00000000000000007735f992/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/19ced7/00000000000000007735f992/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/33e8a4/00000000000000007735f99b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/33e8a4/00000000000000007735f99b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/33e8a4/00000000000000007735f99b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/c09857/00000000000000007735f98c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/c09857/00000000000000007735f98c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/c09857/00000000000000007735f98c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/262452/00000000000000007735f99a/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/262452/00000000000000007735f99a/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/262452/00000000000000007735f99a/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 600;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro\";\n src: url(\"https://use.typekit.net/af/36f509/00000000000000007735f994/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/36f509/00000000000000007735f994/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/36f509/00000000000000007735f994/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 600;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/8b3e11/00000000000000007735a150/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/8b3e11/00000000000000007735a150/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/8b3e11/00000000000000007735a150/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/2fe268/00000000000000007735a153/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/2fe268/00000000000000007735a153/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/2fe268/00000000000000007735a153/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 700;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/a33c9d/00000000000000007735a15e/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/a33c9d/00000000000000007735a15e/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/a33c9d/00000000000000007735a15e/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/fa5448/00000000000000007735a161/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/fa5448/00000000000000007735a161/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/fa5448/00000000000000007735a161/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i5&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 500;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/cf0830/00000000000000007735a162/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/cf0830/00000000000000007735a162/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/cf0830/00000000000000007735a162/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/7da024/00000000000000007735a164/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/7da024/00000000000000007735a164/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/7da024/00000000000000007735a164/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 400;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/ef0e2d/00000000000000007735a166/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/ef0e2d/00000000000000007735a166/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/ef0e2d/00000000000000007735a166/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: normal;\n font-weight: 600;\n font-stretch: normal;\n }\n\n @font-face {\n font-family: \"sofia-pro-condensed\";\n src: url(\"https://use.typekit.net/af/1ff8be/00000000000000007735a168/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff2\"),\n url(\"https://use.typekit.net/af/1ff8be/00000000000000007735a168/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"woff\"),\n url(\"https://use.typekit.net/af/1ff8be/00000000000000007735a168/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i6&v=3\")\n format(\"opentype\");\n font-display: auto;\n font-style: italic;\n font-weight: 600;\n font-stretch: normal;\n }\n\n*, ::before, ::after {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n --tw-border-spacing-x: 0;\n --tw-border-spacing-y: 0;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-rotate: 0;\n --tw-skew-x: 0;\n --tw-skew-y: 0;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-pan-x: ;\n --tw-pan-y: ;\n --tw-pinch-zoom: ;\n --tw-scroll-snap-strictness: proximity;\n --tw-ordinal: ;\n --tw-slashed-zero: ;\n --tw-numeric-figure: ;\n --tw-numeric-spacing: ;\n --tw-numeric-fraction: ;\n --tw-ring-inset: ;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: rgb(59 130 246 / 0.5);\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-ring-shadow: 0 0 #0000;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n --tw-blur: ;\n --tw-brightness: ;\n --tw-contrast: ;\n --tw-grayscale: ;\n --tw-hue-rotate: ;\n --tw-invert: ;\n --tw-saturate: ;\n --tw-sepia: ;\n --tw-drop-shadow: ;\n --tw-backdrop-blur: ;\n --tw-backdrop-brightness: ;\n --tw-backdrop-contrast: ;\n --tw-backdrop-grayscale: ;\n --tw-backdrop-hue-rotate: ;\n --tw-backdrop-invert: ;\n --tw-backdrop-opacity: ;\n --tw-backdrop-saturate: ;\n --tw-backdrop-sepia: ;\n}\n.form-input,.form-textarea,.form-select,.form-multiselect {\n appearance: none;\n background-color: #fff;\n border-color: #6b7280;\n border-width: 1px;\n border-radius: 0px;\n padding-top: 0.5rem;\n padding-right: 0.75rem;\n padding-bottom: 0.5rem;\n padding-left: 0.75rem;\n font-size: 1rem;\n line-height: 1.5rem;\n --tw-shadow: 0 0 #0000;\n}\n.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-color: #2563eb;\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n border-color: #2563eb;\n}\n.form-input::placeholder,.form-textarea::placeholder {\n color: #6b7280;\n opacity: 1;\n}\n.form-input::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n}\n.form-input::-webkit-date-and-time-value {\n min-height: 1.5em;\n}\n.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {\n padding-top: 0;\n padding-bottom: 0;\n}\n.static {\n position: static;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.right-3 {\n right: 0.75rem;\n}\n.top-\\[50\\%\\] {\n top: 50%;\n}\n.top-0 {\n top: 0px;\n}\n.left-1\\/2 {\n left: 50%;\n}\n.top-5 {\n top: 1.25rem;\n}\n.right-5 {\n right: 1.25rem;\n}\n.bottom-0 {\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.z-50 {\n z-index: 50;\n}\n.-m-1 {\n margin: -0.25rem;\n}\n.mb-12 {\n margin-bottom: 3rem;\n}\n.mt-2 {\n margin-top: 0.5rem;\n}\n.ml-6 {\n margin-left: 1.5rem;\n}\n.mb-2 {\n margin-bottom: 0.5rem;\n}\n.block {\n display: block;\n}\n.inline-block {\n display: inline-block;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.flow-root {\n display: flow-root;\n}\n.hidden {\n display: none;\n}\n.h-full {\n height: 100%;\n}\n.h-4 {\n height: 1rem;\n}\n.h-\\[38px\\] {\n height: 38px;\n}\n.h-16 {\n height: 4rem;\n}\n.max-h-\\[70vh\\] {\n max-height: 70vh;\n}\n.min-h-\\[8rem\\] {\n min-height: 8rem;\n}\n.w-4 {\n width: 1rem;\n}\n.w-full {\n width: 100%;\n}\n.flex-auto {\n flex: 1 1 auto;\n}\n.flex-grow {\n flex-grow: 1;\n}\n.-translate-y-\\[50\\%\\] {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-center {\n align-items: center;\n}\n.items-stretch {\n align-items: stretch;\n}\n.justify-center {\n justify-content: center;\n}\n.space-x-3 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.rounded-md {\n border-radius: 0.375rem;\n}\n.rounded-\\[1\\.25rem\\] {\n border-radius: 1.25rem;\n}\n.rounded-lg {\n border-radius: 0.5rem;\n}\n.rounded-tr-none {\n border-top-right-radius: 0px;\n}\n.rounded-br-none {\n border-bottom-right-radius: 0px;\n}\n.rounded-tl-none {\n border-top-left-radius: 0px;\n}\n.rounded-bl-none {\n border-bottom-left-radius: 0px;\n}\n.border {\n border-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-grey-500 {\n --tw-border-opacity: 1;\n border-color: rgb(155 163 192 / var(--tw-border-opacity));\n}\n.border-blue-500 {\n --tw-border-opacity: 1;\n border-color: rgb(53 95 254 / var(--tw-border-opacity));\n}\n.border-\\[\\#a6abbd\\] {\n --tw-border-opacity: 1;\n border-color: rgb(166 171 189 / var(--tw-border-opacity));\n}\n.border-opacity-100 {\n --tw-border-opacity: 1;\n}\n.border-opacity-60 {\n --tw-border-opacity: 0.6;\n}\n.\\!bg-grey-100 {\n --tw-bg-opacity: 1 !important;\n background-color: rgb(230 232 239 / var(--tw-bg-opacity)) !important;\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.\\!bg-\\[transparent\\] {\n background-color: transparent !important;\n}\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(53 95 254 / var(--tw-bg-opacity));\n}\n.bg-grey-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(230 232 239 / var(--tw-bg-opacity));\n}\n.fill-night-sky-800 {\n fill: #001936;\n}\n.fill-white {\n fill: #FFFFFF;\n}\n.fill-blue-500 {\n fill: #355FFE;\n}\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n.py-0 {\n padding-top: 0px;\n padding-bottom: 0px;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n.pr-0 {\n padding-right: 0px;\n}\n.pl-3 {\n padding-left: 0.75rem;\n}\n.font-sofia-pro {\n font-family: sofia-pro, sans-serif;\n}\n.text-\\[1\\.125rem\\] {\n font-size: 1.125rem;\n}\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-night-sky-800 {\n --tw-text-opacity: 1;\n color: rgb(0 25 54 / var(--tw-text-opacity));\n}\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.text-blue-500 {\n --tw-text-opacity: 1;\n color: rgb(53 95 254 / var(--tw-text-opacity));\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.ring-0 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-1 {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.\\!ring-blue-600 {\n --tw-ring-opacity: 1 !important;\n --tw-ring-color: rgb(35 74 224 / var(--tw-ring-opacity)) !important;\n}\n.ring-transparent {\n --tw-ring-color: transparent;\n}\n.ring-offset-2 {\n --tw-ring-offset-width: 2px;\n}\n.transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, outline-color, focus-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n\n/* Search Results Container Styles */\n.fade-slide-enter {\n --tw-translate-y: -0.75rem;\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 0;\n}\n\n.fade-slide-enter-active, \n.fade-slide-enter-done {\n --tw-translate-y: 0px;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 1;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.fade-slide-exit {\n --tw-translate-y: 0px;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 1;\n}\n\n.fade-slide-exit-active, \n.fade-slide-exit-done {\n --tw-translate-y: -0.75rem;\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n opacity: 0;\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 300ms;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.hover\\:border-grey-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(155 163 192 / var(--tw-border-opacity));\n}\n\n.hover\\:border-blue-600:hover {\n --tw-border-opacity: 1;\n border-color: rgb(35 74 224 / var(--tw-border-opacity));\n}\n\n.hover\\:border-opacity-50:hover {\n --tw-border-opacity: 0.5;\n}\n\n.hover\\:bg-grey-100:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(230 232 239 / var(--tw-bg-opacity));\n}\n\n.hover\\:bg-blue-600:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(35 74 224 / var(--tw-bg-opacity));\n}\n\n.hover\\:fill-blue-500:hover {\n fill: #355FFE;\n}\n\n.hover\\:fill-blue-600:hover {\n fill: #234AE0;\n}\n\n.hover\\:text-blue-500:hover {\n --tw-text-opacity: 1;\n color: rgb(53 95 254 / var(--tw-text-opacity));\n}\n\n.hover\\:text-blue-600:hover {\n --tw-text-opacity: 1;\n color: rgb(35 74 224 / var(--tw-text-opacity));\n}\n\n.focus\\:border-blue-400:focus {\n --tw-border-opacity: 1;\n border-color: rgb(72 112 254 / var(--tw-border-opacity));\n}\n\n.focus\\:bg-grey-100:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(230 232 239 / var(--tw-bg-opacity));\n}\n\n.focus\\:outline-none:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.focus\\:ring-0:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-2:focus {\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.focus\\:ring-blue-500:focus {\n --tw-ring-opacity: 1;\n --tw-ring-color: rgb(53 95 254 / var(--tw-ring-opacity));\n}\n\n.focus\\:ring-offset-2:focus {\n --tw-ring-offset-width: 2px;\n}\n\n@media (min-width: 1000px) {\n\n .tablet\\:w-\\[70vw\\] {\n width: 70vw;\n }\n}\n";
404
404
  styleInject(css_248z);
405
405
 
406
406
  exports.SearchAutocomplete = SearchAutocomplete;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cn-npm/search-autocomplete",
3
- "version": "0.2.19",
3
+ "version": "0.2.20",
4
4
  "main": "dist/bundle.js",
5
5
  "peerDependencies": {
6
6
  "@headlessui/react": "^1.7.1",
@@ -70,6 +70,7 @@
70
70
  "@storybook/react": "^6.5.10",
71
71
  "@storybook/testing-library": "^0.0.13",
72
72
  "@svgr/rollup": "^6.3.1",
73
+ "@tailwindcss/forms": "^0.5.2",
73
74
  "@testing-library/jest-dom": "^5.16.5",
74
75
  "@testing-library/react": "^13.3.0",
75
76
  "@testing-library/user-event": "^13.5.0",
@@ -100,7 +101,7 @@
100
101
  "rollup-plugin-postcss": "^4.0.2",
101
102
  "rollup-plugin-svg": "^2.0.0",
102
103
  "sass": "^1.54.3",
103
- "tailwindcss": "^3.4.1",
104
+ "tailwindcss": "^3.1.8",
104
105
  "typescript": "^4.7.4",
105
106
  "web-vitals": "^2.1.4",
106
107
  "webpack": "^5.74.0"
package/src/components/Loader/Loader.module.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  border-right: 3px solid transparent;
8
8
  box-sizing: border-box;
9
9
  animation: rotation 1s linear infinite;
10
- @apply sa-border-t-blue-500;
10
+ @apply border-t-blue-500;
11
11
  }
12
12
 
13
13
  // Rotation animation
package/src/components/SearchAutocomplete/SearchAutocomplete.module.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  .SearchAutocomplete {
2
- @apply sa-relative sa-font-sofia-pro;
2
+ @apply relative font-sofia-pro;
3
3
  }
package/src/components/SearchAutocomplete/SearchAutocomplete.tsx CHANGED
@@ -41,16 +41,16 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
41
41
  tags.forEach((x, i) => {
42
42
  x.classList.remove(
43
43
  "autocomplete-selected",
44
- "!sa-bg-grey-100",
45
- "!sa-ring-blue-600"
44
+ "!bg-grey-100",
45
+ "!ring-blue-600"
46
46
  );
47
47
  if (i + 1 === selectedTag) {
48
48
  x.classList.add(
49
49
  "autocomplete-selected",
50
50
  tags[i].classList.contains("autocomplete-tag")
51
- ? "!sa-bg-grey-100"
52
- : "sa-none",
53
- "!sa-ring-blue-600"
51
+ ? "!bg-grey-100"
52
+ : "none",
53
+ "!ring-blue-600"
54
54
  );
55
55
  x.scrollIntoView({
56
56
  behavior: "smooth",
@@ -208,19 +208,19 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
208
208
  >
209
209
  <form
210
210
  action={`/search?q=${searchTerm}`}
211
- className="sa-flex sa-font-sofia-pro"
211
+ className="flex font-sofia-pro"
212
212
  autoComplete="off"
213
213
  >
214
- <label htmlFor="search" className="sa-hidden">
214
+ <label htmlFor="search" className="hidden">
215
215
  {label}
216
216
  </label>
217
- <div className="sa-relative sa-flex sa-flex-grow">
217
+ <div className="relative flex flex-grow">
218
218
  <DebounceInput
219
219
  type="text"
220
220
  name="q"
221
221
  id="search"
222
222
  placeholder={label}
223
- className="sa-flex-auto sa-pr-0 sa-items-stretch sa-flex-grow sa-text-night-sky-800 sa-ring-0 sa-py-0 sa-shadow-none sa-focus:ring-0 sa-bg-white sa-transition-colors sa-border-opacity-100 sa-hover:bg-grey-100 sa-hover:border-grey-500 sa-hover:border-opacity-50 sa-focus:bg-grey-100 sa-focus:border-blue-400 sa-inline-block sm:sa-text-sm sa-border-grey-500 sa-rounded-md sa-rounded-tr-none sa-rounded-br-none sa-placeholder:text-gray-600"
223
+ className="form-input flex-auto pr-0 items-stretch flex-grow text-night-sky-800 ring-0 py-0 shadow-none focus:ring-0 bg-white transition-colors border-opacity-100 hover:bg-grey-100 hover:border-grey-500 hover:border-opacity-50 focus:bg-grey-100 focus:border-blue-400 inline-block sm:text-sm border-grey-500 rounded-md rounded-tr-none rounded-br-none placeholder:text-gray-600"
224
224
  debounceTimeout={300}
225
225
  minLength={2}
226
226
  value={searchTerm}
@@ -233,43 +233,43 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
233
233
  {searchTerm !== "" && (
234
234
  <button
235
235
  type="button"
236
- className="sa-absolute sa-right-3 sa-top-[50%] -sa-translate-y-[50%] sa-text-night-sky-800 hover:sa-text-blue-500 sa-transition-colors !sa-bg-[transparent] sa-cursor-pointer"
236
+ className="absolute right-3 top-[50%] -translate-y-[50%] text-night-sky-800 hover:text-blue-500 transition-colors !bg-[transparent] cursor-pointer"
237
237
  onClick={clearSearch}
238
238
  >
239
- <CircleCloseIcon className="sa-fill-night-sky-800 hover:sa-fill-blue-500 sa-h-4 sa-w-4" />
239
+ <CircleCloseIcon className="fill-night-sky-800 hover:fill-blue-500 h-4 w-4" />
240
240
  </button>
241
241
  )}
242
242
  </div>
243
243
  <button
244
244
  type="submit"
245
- className="sa-inline-flex sa-transition-colors sa-items-center sa-justify-center sa-px-4 sa-h-[38px] sa-font-medium sa-rounded-md sa-shadow-sm sa-border sa-border-blue-500 sa-text-white sa-bg-blue-500 hover:sa-bg-blue-600 hover:sa-border-blue-600 focus:sa-outline-none focus:sa-ring-2 focus:sa-ring-offset-2 focus:sa-ring-blue-500 sm:sa-text-sm sa-rounded-tl-none sa-rounded-bl-none"
245
+ className="inline-flex transition-colors items-center justify-center px-4 h-[38px] font-medium rounded-md shadow-sm border border-blue-500 text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm rounded-tl-none rounded-bl-none"
246
246
  >
247
- <SearchIcon className="sa-fill-white sa-h-4 sa-w-4" />
247
+ <SearchIcon className="fill-white h-4 w-4" />
248
248
  </button>
249
249
  </form>
250
- <div className="sa-relative">
250
+ <div className="relative">
251
251
  <CSSTransition
252
252
  mountOnEnter
253
253
  unmountOnExit
254
254
  in={open}
255
255
  timeout={300}
256
- classNames="sa-fade-slide"
256
+ classNames="fade-slide"
257
257
  data-testid="searchResults"
258
258
  >
259
259
  <div
260
260
  className={classNames(
261
- "search-results-container sa-absolute sa-top-0 sa-left-1/2 -sa-translate-x-1/2 sa-mt-2 sa-bg-white sa-py-5 sa-rounded-[1.25rem] sa-z-50 sa-shadow-lg sa-border border-[#a6abbd] sa-border-opacity-60 sa-w-full tablet:sa-w-[70vw] sa-min-h-[8rem] sa-overflow-hidden"
261
+ "search-results-container absolute top-0 left-1/2 -translate-x-1/2 mt-2 bg-white py-5 rounded-[1.25rem] z-50 shadow-lg border border-[#a6abbd] border-opacity-60 w-full tablet:w-[70vw] min-h-[8rem] overflow-hidden"
262
262
  )}
263
263
  >
264
264
  <ErrorBoundary>
265
265
  {loading && (
266
266
  <Loader
267
267
  data-testid="Loader"
268
- className="sa-absolute sa-top-5 sa-right-5"
268
+ className="absolute top-5 right-5"
269
269
  />
270
270
  )}
271
271
  <div
272
- className="sa-px-6 sa-h-full sa-mb-12 sa-max-h-[70vh] sa-overflow-y-auto"
272
+ className="px-6 h-full mb-12 max-h-[70vh] overflow-y-auto"
273
273
  data-testid="Sections"
274
274
  >
275
275
  {hasError && (
@@ -289,13 +289,13 @@ const SearchAutocomplete: FC<SearchAutocompleteProps> = (props) => {
289
289
  ))}
290
290
  </div>
291
291
  </ErrorBoundary>
292
- <div className="sa-border-t sa-border-[#a6abbd] sa-border-opacity-60 sa-flex sa-items-center sa-absolute sa-bottom-0 sa-left-0 sa-w-full sa-bg-white sa-h-16">
292
+ <div className="border-t border-[#a6abbd] border-opacity-60 flex items-center absolute bottom-0 left-0 w-full bg-white h-16">
293
293
  <a
294
294
  href={`/search?q=${searchTerm}`}
295
- className="sa-px-3 sa-py-1 sa-ml-6 sa-flex sa-items-center sa-space-x-3 sa-ring-1 sa-ring-offset-2 sa-ring-transparent sa-transition-colors sa-text-blue-500 hover:sa-text-blue-600 sa-rounded-lg autocomplete-custom-search"
295
+ className="px-3 py-1 ml-6 flex items-center space-x-3 ring ring-1 ring-offset-2 ring-transparent transition-colors text-blue-500 hover:text-blue-600 rounded-lg autocomplete-custom-search"
296
296
  >
297
- <SearchIcon className="sa-fill-blue-500 hover:sa-fill-blue-600 sa-h-4 sa-w-4" />
298
- <span className="sa-font-semibold sa-text-[1.125rem] ">
297
+ <SearchIcon className="fill-blue-500 hover:fill-blue-600 h-4 w-4" />
298
+ <span className="font-semibold text-[1.125rem] ">
299
299
  {searchTerm === "" ? "Custom Search" : "View All Results"}
300
300
  </span>
301
301
  </a>
package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.module.scss CHANGED
@@ -1,64 +1,64 @@
1
1
  .SearchAutocompleteSection {
2
- @apply sa-font-sofia-pro sa-mb-6;
2
+ @apply font-sofia-pro mb-6;
3
3
  }
4
4
 
5
5
  // Hide results over 5 on mobile
6
6
  :global(.autocomplete-section a:nth-child(6)) {
7
- @apply sa-hidden tablet:sa-inline-block;
7
+ @apply hidden tablet:inline-block;
8
8
  }
9
9
 
10
10
  :global(.autocomplete-section a:nth-child(7)) {
11
- @apply sa-hidden tablet:sa-inline-block;
11
+ @apply hidden tablet:inline-block;
12
12
  }
13
13
 
14
14
  :global(.autocomplete-section a:nth-child(8)) {
15
- @apply sa-hidden tablet:sa-inline-block;
15
+ @apply hidden tablet:inline-block;
16
16
  }
17
17
 
18
18
  :global(.autocomplete-section a:nth-child(9)) {
19
- @apply sa-hidden tablet:sa-inline-block;
19
+ @apply hidden tablet:inline-block;
20
20
  }
21
21
 
22
22
  :global(.autocomplete-section a:nth-child(10)) {
23
- @apply sa-hidden tablet:sa-inline-block;
23
+ @apply hidden tablet:inline-block;
24
24
  }
25
25
 
26
26
  :global(.autocomplete-section a:nth-child(11)) {
27
- @apply sa-hidden tablet:sa-inline-block;
27
+ @apply hidden tablet:inline-block;
28
28
  }
29
29
 
30
30
  :global(.autocomplete-section a:nth-child(12)) {
31
- @apply sa-hidden tablet:sa-inline-block;
31
+ @apply hidden tablet:inline-block;
32
32
  }
33
33
 
34
34
  :global(.autocomplete-section a:nth-child(13)) {
35
- @apply sa-hidden tablet:sa-inline-block;
35
+ @apply hidden tablet:inline-block;
36
36
  }
37
37
 
38
38
  :global(.autocomplete-section a:nth-child(14)) {
39
- @apply sa-hidden tablet:sa-inline-block;
39
+ @apply hidden tablet:inline-block;
40
40
  }
41
41
 
42
42
  :global(.autocomplete-section a:nth-child(15)) {
43
- @apply sa-hidden tablet:sa-inline-block;
43
+ @apply hidden tablet:inline-block;
44
44
  }
45
45
 
46
46
  :global(.autocomplete-section a:nth-child(16)) {
47
- @apply sa-hidden tablet:sa-inline-block;
47
+ @apply hidden tablet:inline-block;
48
48
  }
49
49
 
50
50
  :global(.autocomplete-section a:nth-child(17)) {
51
- @apply sa-hidden tablet:sa-inline-block;
51
+ @apply hidden tablet:inline-block;
52
52
  }
53
53
 
54
54
  :global(.autocomplete-section a:nth-child(18)) {
55
- @apply sa-hidden tablet:sa-inline-block;
55
+ @apply hidden tablet:inline-block;
56
56
  }
57
57
 
58
58
  :global(.autocomplete-section a:nth-child(19)) {
59
- @apply sa-hidden tablet:sa-inline-block;
59
+ @apply hidden tablet:inline-block;
60
60
  }
61
61
 
62
62
  :global(.autocomplete-section a:nth-child(20)) {
63
- @apply sa-hidden tablet:sa-inline-block;
63
+ @apply hidden tablet:inline-block;
64
64
  }
package/src/components/SearchAutocompleteSection/SearchAutocompleteSection.tsx CHANGED
@@ -39,18 +39,18 @@ const SearchAutocompleteSection: FC<SearchAutocompleteSectionProps> = (
39
39
  data-testid="searchAutocompleteSection"
40
40
  >
41
41
  <h2
42
- className="sa-text-night-sky-800 sa-mb-2 sa-text-base"
42
+ className="text-night-sky-800 mb-2 text-base"
43
43
  data-testid="searchResultTitle"
44
44
  >
45
45
  {props.title}
46
46
  </h2>
47
- <div className="sa-flow-root">
47
+ <div className="flow-root">
48
48
  <div
49
- className="sa-m-1 sa-flex sa-flex-wrap autocomplete-section"
49
+ className="-m-1 flex flex-wrap autocomplete-section"
50
50
  data-testid="searchTag"
51
51
  >
52
52
  {(props.results == null || props.results.length === 0) && (
53
- <p className="sa-pl-3">No results found</p>
53
+ <p className="pl-3">No results found</p>
54
54
  )}
55
55
  {props.results &&
56
56
  props.results!.length > 0 &&
package/src/components/SearchAutocompleteTag/SearchAutocompleteTag.module.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .SearchAutocompleteTag {
2
- @apply sa-inline-block sa-font-sofia-pro sa-font-normal sa-text-base sa-leading-6 sa-tracking-normal sa-text-left sa-transition-colors sa-text-night-sky-800 sa-bg-grey-50 hover:sa-bg-grey-100 sa-rounded-lg sa-pt-2 sa-pb-2 sa-pl-3 sa-pr-3 sa-m-1 sa-ring-1 sa-ring-offset-2 sa-ring-transparent;
2
+ @apply inline-block font-sofia-pro font-normal text-base leading-6 tracking-normal text-left transition-colors text-night-sky-800 bg-grey-50 hover:bg-grey-100 rounded-lg pt-2 pb-2 pl-3 pr-3 m-1 ring ring-1 ring-offset-2 ring-transparent;
3
3
  }
4
4
  :global(.highlighted-text) {
5
- @apply sa-font-semibold;
5
+ @apply font-semibold;
6
6
  }
package/src/index.css CHANGED
@@ -302,19 +302,19 @@
302
302
 
303
303
  /* Search Results Container Styles */
304
304
  .fade-slide-enter {
305
- @apply sa-opacity-0 -sa-translate-y-3 sa-scale-95;
305
+ @apply opacity-0 -translate-y-3 scale-95;
306
306
  }
307
307
 
308
308
  .fade-slide-enter-active,
309
309
  .fade-slide-enter-done {
310
- @apply sa-opacity-100 sa-transition-all sa-duration-300 sa-ease-out sa-translate-y-0 sa-scale-100;
310
+ @apply opacity-100 transition-all duration-300 ease-out translate-y-0 scale-100;
311
311
  }
312
312
 
313
313
  .fade-slide-exit {
314
- @apply sa-opacity-100 sa-translate-y-0 sa-scale-100;
314
+ @apply opacity-100 translate-y-0 scale-100;
315
315
  }
316
316
 
317
317
  .fade-slide-exit-active,
318
318
  .fade-slide-exit-done {
319
- @apply sa-opacity-0 sa-transition-all sa-duration-300 sa-ease-out -sa-translate-y-3 sa-scale-95;
319
+ @apply opacity-0 transition-all duration-300 ease-out -translate-y-3 scale-95;
320
320
  }
package/tailwind.config.js CHANGED
@@ -2,7 +2,6 @@ const colors = require("tailwindcss/colors");
2
2
 
3
3
  /** @type {import('tailwindcss').Config} */
4
4
  module.exports = {
5
- prefix: "sa-",
6
5
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
7
6
  theme: {
8
7
  screens: {
@@ -90,5 +89,9 @@ module.exports = {
90
89
  },
91
90
  },
92
91
  },
93
- plugins: [],
92
+ plugins: [
93
+ require("@tailwindcss/forms")({
94
+ strategy: "class", // only generate classes
95
+ }),
96
+ ],
94
97
  };