@newskit-render/standalone-components 0.22.0 → 0.23.0

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 (57) hide show
  1. package/dist/cjs/help-hub/components/SearchBar/SearchBar.d.ts +3 -2
  2. package/dist/cjs/help-hub/components/SearchBar/SearchBar.js +8 -6
  3. package/dist/cjs/help-hub/components/SearchBar/SearchBar.js.map +1 -1
  4. package/dist/cjs/help-hub/components/SearchBar/components/AlgoliaTheme.d.ts +1 -0
  5. package/dist/cjs/help-hub/components/SearchBar/components/AlgoliaTheme.js +11 -0
  6. package/dist/cjs/help-hub/components/SearchBar/components/AlgoliaTheme.js.map +1 -0
  7. package/dist/cjs/help-hub/components/SearchBar/components/Autocomplete.d.ts +6 -0
  8. package/dist/cjs/help-hub/components/SearchBar/components/Autocomplete.js +161 -0
  9. package/dist/cjs/help-hub/components/SearchBar/components/Autocomplete.js.map +1 -0
  10. package/dist/cjs/help-hub/components/SearchBar/components/Highlight.d.ts +20 -0
  11. package/dist/cjs/help-hub/components/SearchBar/components/Highlight.js +18 -0
  12. package/dist/cjs/help-hub/components/SearchBar/components/Highlight.js.map +1 -0
  13. package/dist/cjs/help-hub/components/SearchBar/types.d.ts +5 -3
  14. package/dist/cjs/help-hub/context/baseContext.js +2 -2
  15. package/dist/cjs/help-hub/index.d.ts +1 -0
  16. package/dist/cjs/help-hub/index.js +1 -0
  17. package/dist/cjs/help-hub/index.js.map +1 -1
  18. package/dist/cjs/help-hub/pages/ArticlePage.js +1 -1
  19. package/dist/cjs/help-hub/pages/ArticlePage.js.map +1 -1
  20. package/dist/cjs/help-hub/pages/LandingPage.js +8 -6
  21. package/dist/cjs/help-hub/pages/LandingPage.js.map +1 -1
  22. package/dist/cjs/help-hub/pages/ResultsPage.js +1 -1
  23. package/dist/cjs/help-hub/pages/ResultsPage.js.map +1 -1
  24. package/dist/cjs/help-hub/pages/types.d.ts +2 -0
  25. package/dist/cjs/help-hub/types/index.d.ts +12 -0
  26. package/dist/cjs/help-hub/types/index.js +3 -0
  27. package/dist/cjs/help-hub/types/index.js.map +1 -0
  28. package/dist/cjs/index.js.map +1 -1
  29. package/dist/help-hub/components/SearchBar/SearchBar.d.ts +3 -2
  30. package/dist/help-hub/components/SearchBar/SearchBar.js +8 -6
  31. package/dist/help-hub/components/SearchBar/SearchBar.js.map +1 -1
  32. package/dist/help-hub/components/SearchBar/components/AlgoliaTheme.d.ts +1 -0
  33. package/dist/help-hub/components/SearchBar/components/AlgoliaTheme.js +11 -0
  34. package/dist/help-hub/components/SearchBar/components/AlgoliaTheme.js.map +1 -0
  35. package/dist/help-hub/components/SearchBar/components/Autocomplete.d.ts +6 -0
  36. package/dist/help-hub/components/SearchBar/components/Autocomplete.js +161 -0
  37. package/dist/help-hub/components/SearchBar/components/Autocomplete.js.map +1 -0
  38. package/dist/help-hub/components/SearchBar/components/Highlight.d.ts +20 -0
  39. package/dist/help-hub/components/SearchBar/components/Highlight.js +18 -0
  40. package/dist/help-hub/components/SearchBar/components/Highlight.js.map +1 -0
  41. package/dist/help-hub/components/SearchBar/types.d.ts +5 -3
  42. package/dist/help-hub/context/baseContext.js +2 -2
  43. package/dist/help-hub/index.d.ts +1 -0
  44. package/dist/help-hub/index.js +1 -0
  45. package/dist/help-hub/index.js.map +1 -1
  46. package/dist/help-hub/pages/ArticlePage.js +1 -1
  47. package/dist/help-hub/pages/ArticlePage.js.map +1 -1
  48. package/dist/help-hub/pages/LandingPage.js +8 -6
  49. package/dist/help-hub/pages/LandingPage.js.map +1 -1
  50. package/dist/help-hub/pages/ResultsPage.js +1 -1
  51. package/dist/help-hub/pages/ResultsPage.js.map +1 -1
  52. package/dist/help-hub/pages/types.d.ts +2 -0
  53. package/dist/help-hub/types/index.d.ts +12 -0
  54. package/dist/help-hub/types/index.js +3 -0
  55. package/dist/help-hub/types/index.js.map +1 -0
  56. package/dist/index.js.map +1 -1
  57. package/package.json +6 -3
package/dist/cjs/help-hub/components/SearchBar/SearchBar.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import React from 'react';
2
- import { SearcBarProps } from './types';
3
- export declare const SearchBar: React.FC<SearcBarProps>;
2
+ import { SearchBarProps } from './types';
3
+ export declare const SearchBar: React.FC<SearchBarProps>;
4
+ export default SearchBar;
package/dist/cjs/help-hub/components/SearchBar/SearchBar.js CHANGED
@@ -10,14 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.SearchBar = void 0;
11
11
  var react_1 = __importDefault(require("react"));
12
12
  var newskit_1 = require("newskit");
13
- var StyledInputPlaceholder = newskit_1.styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 48px;\n border: 1px solid #cccccc;\n border-radius: 8px;\n padding: 12px;\n"], ["\n width: 100%;\n height: 48px;\n border: 1px solid #cccccc;\n border-radius: 8px;\n padding: 12px;\n"])));
13
+ var Autocomplete_1 = require("./components/Autocomplete");
14
+ var AlgoliaTheme_1 = require("./components/AlgoliaTheme");
15
+ var StyledBlock = (0, newskit_1.styled)(newskit_1.Block)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0 auto;\n max-width: 440px;\n width: 100%;\n & .aa-Panel {\n z-index: 2;\n width: 100%;\n max-width: 440px;\n }\n & .aa-Form {\n z-index: 2;\n }\n"], ["\n margin: 0 auto;\n max-width: 440px;\n width: 100%;\n & .aa-Panel {\n z-index: 2;\n width: 100%;\n max-width: 440px;\n }\n & .aa-Form {\n z-index: 2;\n }\n"])));
14
16
  var SearchBar = function (_a) {
15
- var _b = _a.placeholder, placeholder = _b === void 0 ? 'Pesho' : _b;
16
- return (
17
- //TODO: Replace with Algolia input
18
- react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } },
19
- react_1.default.createElement(StyledInputPlaceholder, { type: "text", placeholder: placeholder })));
17
+ var credentials = _a.credentials, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search' : _b;
18
+ return (react_1.default.createElement(StyledBlock, null,
19
+ react_1.default.createElement(newskit_1.Global, { styles: AlgoliaTheme_1.AlgoliaStyling }),
20
+ react_1.default.createElement(Autocomplete_1.Autocomplete, { placeholder: placeholder, openOnFocus: true, debug: false, credentials: credentials })));
20
21
  };
21
22
  exports.SearchBar = SearchBar;
23
+ exports.default = exports.SearchBar;
22
24
  var templateObject_1;
23
25
  //# sourceMappingURL=SearchBar.js.map
package/dist/cjs/help-hub/components/SearchBar/SearchBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../../src/help-hub/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,gDAAyB;AACzB,mCAAuC;AAGvC,IAAM,sBAAsB,GAAG,gBAAM,CAAC,KAAK,+KAAA,4GAM1C,IAAA,CAAA;AAEM,IAAM,SAAS,GAA4B,UAAC,EAElD;QADC,mBAAqB,EAArB,WAAW,mBAAG,OAAO,KAAA;IACjB,OAAA;IACJ,kCAAkC;IAClC,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE;QACnC,8BAAC,sBAAsB,IAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,GAAI,CAC1D,CACT;AALK,CAKL,CAAA;AAPY,QAAA,SAAS,aAOrB"}
1
+ {"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../../src/help-hub/components/SearchBar/SearchBar.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,gDAAyB;AACzB,mCAA+C;AAC/C,0DAAwD;AACxD,0DAA0D;AAG1D,IAAM,WAAW,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,qPAAA,kLAYhC,IAAA,CAAA;AAEM,IAAM,SAAS,GAA6B,UAAC,EAGnD;QAFC,WAAW,iBAAA,EACX,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA;IAEtB,OAAO,CACL,8BAAC,WAAW;QACV,8BAAC,gBAAM,IAAC,MAAM,EAAE,6BAAc,GAAI;QAClC,8BAAC,2BAAY,IACX,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,GACxB,CACU,CACf,CAAA;AACH,CAAC,CAAA;AAfY,QAAA,SAAS,aAerB;AAED,kBAAe,iBAAS,CAAA"}
package/dist/cjs/help-hub/components/SearchBar/components/AlgoliaTheme.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const AlgoliaStyling: import("newskit").SerializedStyles;
package/dist/cjs/help-hub/components/SearchBar/components/AlgoliaTheme.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.AlgoliaStyling = void 0;
8
+ var newskit_1 = require("newskit");
9
+ exports.AlgoliaStyling = (0, newskit_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /*! @algolia/autocomplete-theme-classic 1.6.3 | MIT License | \u00A9 Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */\n /* ---------------- */\n /* 1. CSS Variables */\n /* 2. Dark Mode */\n /* 3. Autocomplete */\n /* 4. Panel */\n /* 5. Sources */\n /* 6. Hit Layout */\n /* 7. Panel Header */\n /* 8. Panel Footer */\n /* 9. Detached Mode */\n /* 10. Gradients */\n /* 11. Utilities */\n /* ---------------- */\n /* Note: */\n /* This theme reflects the markup structure of autocomplete with SCSS indentation. */\n /* We use the SASS function to keep specificity low. */\n /* ---------------- */\n /* 1. CSS Variables */\n /* ---------------- */\n :root {\n /* Input */\n --aa-search-input-height: 44px;\n --aa-input-icon-size: 20px;\n /* Size and spacing */\n --aa-base-unit: 16;\n --aa-spacing-factor: 1;\n --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px);\n --aa-spacing-half: calc(var(--aa-spacing) / 2);\n --aa-panel-max-height: 650px;\n /* Z-index */\n --aa-base-z-index: 9999;\n /* Font */\n --aa-font-size: calc(var(--aa-base-unit) * 1px);\n --aa-font-family: inherit;\n --aa-font-weight-medium: 500;\n --aa-font-weight-semibold: 600;\n --aa-font-weight-bold: 700;\n /* Icons */\n --aa-icon-size: 20px;\n --aa-icon-stroke-width: 1.6;\n --aa-icon-color-rgb: 119, 119, 163;\n --aa-icon-color-alpha: 1;\n --aa-action-icon-size: 20px;\n /* Text colors */\n --aa-text-color-rgb: 38, 38, 39;\n --aa-text-color-alpha: 1;\n --aa-primary-color-rgb: 62, 52, 211;\n --aa-primary-color-alpha: 0.2;\n --aa-muted-color-rgb: 128, 126, 163;\n --aa-muted-color-alpha: 0.6;\n /* Border colors */\n --aa-panel-border-color-rgb: 128, 126, 163;\n --aa-panel-border-color-alpha: 0.3;\n --aa-input-border-color-rgb: 128, 126, 163;\n --aa-input-border-color-alpha: 0.8;\n /* Background colors */\n --aa-background-color-rgb: 255, 255, 255;\n --aa-background-color-alpha: 1;\n --aa-input-background-color-rgb: 255, 255, 255;\n --aa-input-background-color-alpha: 1;\n --aa-selected-color-rgb: 179, 173, 214;\n --aa-selected-color-alpha: 0.205;\n --aa-description-highlight-background-color-rgb: 245, 223, 77;\n --aa-description-highlight-background-color-alpha: 0.5;\n /* Detached mode */\n --aa-detached-media-query: (max-width: 680px);\n --aa-detached-modal-media-query: (min-width: 680px);\n --aa-detached-modal-max-width: 680px;\n --aa-detached-modal-max-height: 500px;\n --aa-overlay-color-rgb: 115, 114, 129;\n --aa-overlay-color-alpha: 0.4;\n /* Shadows */\n --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),\n 0 6px 16px -4px rgba(35, 38, 59, 0.15);\n /* Scrollbar */\n --aa-scrollbar-width: 13px;\n --aa-scrollbar-track-background-color-rgb: 234, 234, 234;\n --aa-scrollbar-track-background-color-alpha: 1;\n --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);\n --aa-scrollbar-thumb-background-color-alpha: 1;\n /* Touch screens */\n }\n @media (hover: none) and (pointer: coarse) {\n :root {\n --aa-spacing-factor: 1.2;\n --aa-action-icon-size: 22px;\n }\n }\n\n /* ---------------- */\n /* 2. Dark Mode */\n /* ---------------- */\n body {\n /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */\n /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */\n }\n body[data-theme='dark'],\n body.dark {\n /* Text colors */\n --aa-text-color-rgb: 183, 192, 199;\n --aa-primary-color-rgb: 146, 138, 255;\n --aa-muted-color-rgb: 146, 138, 255;\n /* Background colors */\n --aa-input-background-color-rgb: 0, 3, 9;\n --aa-background-color-rgb: 21, 24, 42;\n --aa-selected-color-rgb: 146, 138, 255;\n --aa-selected-color-alpha: 0.25;\n --aa-description-highlight-background-color-rgb: 0 255 255;\n --aa-description-highlight-background-color-alpha: 0.25;\n /* Icons */\n --aa-icon-color-rgb: 119, 119, 163;\n /* Shadows */\n --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),\n 0 3px 8px 0 rgb(0, 3, 9);\n /* Scrollbar */\n --aa-scrollbar-track-background-color-rgb: 44, 46, 64;\n --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);\n }\n\n /* Reset for */\n .aa-Panel *,\n .aa-Autocomplete *,\n .aa-DetachedFormContainer * {\n box-sizing: border-box;\n }\n\n /* Init for */\n .aa-Panel,\n .aa-Autocomplete,\n .aa-DetachedFormContainer {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-family: inherit;\n font-family: var(--aa-font-family);\n font-size: 16px;\n font-size: var(--aa-font-size);\n font-weight: normal;\n line-height: 1em;\n margin: 0;\n padding: 0;\n text-align: left;\n }\n\n /* ---------------- */\n /* 3. Autocomplete */\n /* ---------------- */\n .aa-Autocomplete,\n .aa-DetachedFormContainer {\n /* Search box */\n }\n .aa-Form {\n align-items: center;\n background-color: white;\n background-color: rgba(\n var(--aa-input-background-color-rgb),\n var(--aa-input-background-color-alpha)\n );\n border: 1px solid rgba(128, 126, 163, 0.8);\n border: 1px solid\n rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));\n border-radius: 3px;\n display: flex;\n line-height: 1em;\n margin: 0;\n position: relative;\n width: 100%;\n }\n .aa-Form[focus-within] {\n border-color: #3e34d3;\n border-color: rgba(var(--aa-primary-color-rgb), 1);\n box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 2px,\n inset rgba(62, 52, 211, 0.2) 0 0 0 2px;\n box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha))\n 0 0 0 2px,\n inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0\n 0 2px;\n outline: currentColor none medium;\n }\n .aa-Form:focus-within {\n border-color: #3e34d3;\n border-color: rgba(var(--aa-primary-color-rgb), 1);\n box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 2px,\n inset rgba(62, 52, 211, 0.2) 0 0 0 2px;\n box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha))\n 0 0 0 2px,\n inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0\n 0 2px;\n outline: currentColor none medium;\n }\n .aa-InputWrapperPrefix {\n align-items: center;\n display: flex;\n flex-shrink: 0;\n height: 44px;\n height: var(--aa-search-input-height);\n order: 1;\n /* Container for search and loading icons */\n }\n .aa-Label,\n .aa-LoadingIndicator {\n cursor: auto;\n cursor: initial;\n flex-shrink: 0;\n height: 100%;\n padding: 0;\n text-align: left;\n }\n .aa-Label svg,\n .aa-LoadingIndicator svg {\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n height: auto;\n max-height: 20px;\n max-height: var(--aa-input-icon-size);\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n width: 20px;\n width: var(--aa-input-icon-size);\n }\n\n .aa-SubmitButton,\n .aa-LoadingIndicator {\n height: 100%;\n padding-left: 11px;\n padding-left: calc(var(--aa-spacing) * 0.75 - 1px);\n padding-right: 8px;\n padding-right: var(--aa-spacing-half);\n width: 47px;\n width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);\n }\n @media (hover: none) and (pointer: coarse) {\n .aa-SubmitButton,\n .aa-LoadingIndicator {\n padding-left: 3px;\n padding-left: calc(var(--aa-spacing-half) / 2 - 1px);\n width: 39px;\n width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px);\n }\n }\n\n .aa-SubmitButton {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: 0;\n margin: 0;\n }\n\n .aa-LoadingIndicator {\n align-items: center;\n display: flex;\n justify-content: center;\n }\n .aa-LoadingIndicator[hidden] {\n display: none;\n }\n\n .aa-InputWrapper {\n order: 3;\n position: relative;\n width: 100%;\n /* Search box input (with placeholder and query) */\n }\n .aa-Input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: 0;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font: inherit;\n height: 44px;\n height: var(--aa-search-input-height);\n padding: 0;\n width: 100%;\n /* Focus is set and styled on the parent, it isn't necessary here */\n /* Remove native appearence */\n }\n .aa-Input::-moz-placeholder {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n opacity: 1;\n }\n .aa-Input:-ms-input-placeholder {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n opacity: 1;\n }\n .aa-Input::placeholder {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n opacity: 1;\n }\n .aa-Input:focus {\n border-color: none;\n box-shadow: none;\n outline: none;\n }\n .aa-Input::-webkit-search-decoration,\n .aa-Input::-webkit-search-cancel-button,\n .aa-Input::-webkit-search-results-button,\n .aa-Input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n }\n\n .aa-InputWrapperSuffix {\n align-items: center;\n display: flex;\n height: 44px;\n height: var(--aa-search-input-height);\n order: 4;\n /* Accelerator to clear the query */\n }\n .aa-ClearButton {\n align-items: center;\n background: none;\n border: 0;\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n cursor: pointer;\n display: flex;\n height: 100%;\n margin: 0;\n padding: 0 12.8333333333px;\n padding: 0 calc(var(--aa-spacing) * 0.8333333333 - 0.5px);\n }\n @media (hover: none) and (pointer: coarse) {\n .aa-ClearButton {\n padding: 0 10.1666666667px;\n padding: 0 calc(var(--aa-spacing) * 0.6666666667 - 0.5px);\n }\n }\n .aa-ClearButton:hover,\n .aa-ClearButton:focus {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n }\n .aa-ClearButton[hidden] {\n display: none;\n }\n .aa-ClearButton svg {\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n width: 20px;\n width: var(--aa-icon-size);\n }\n\n /* ---------------- */\n /* 4. Panel */\n /* ---------------- */\n .aa-Panel {\n background-color: white;\n background-color: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n border-radius: 4px;\n border-radius: calc(var(--aa-spacing) / 4);\n box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),\n 0 6px 16px -4px rgba(35, 38, 59, 0.15);\n box-shadow: var(--aa-panel-shadow);\n margin: 8px 0 0;\n overflow: hidden;\n position: absolute;\n transition: opacity 200ms ease-in, filter 200ms ease-in;\n /* When a request isn't resolved yet */\n }\n @media screen and (prefers-reduced-motion) {\n .aa-Panel {\n transition: none;\n }\n }\n .aa-Panel button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: 0;\n margin: 0;\n padding: 0;\n }\n .aa-PanelLayout {\n height: 100%;\n margin: 0;\n max-height: 650px;\n max-height: var(--aa-panel-max-height);\n overflow-y: auto;\n padding: 0;\n position: relative;\n text-align: left;\n }\n .aa-PanelLayoutColumns--twoGolden {\n display: grid;\n grid-template-columns: 39.2% auto;\n overflow: hidden;\n padding: 0;\n }\n\n .aa-PanelLayoutColumns--two {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n overflow: hidden;\n padding: 0;\n }\n\n .aa-PanelLayoutColumns--three {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n overflow: hidden;\n padding: 0;\n }\n\n .aa-Panel--stalled .aa-Source {\n filter: grayscale(1);\n opacity: 0.8;\n }\n\n .aa-Panel--scrollable {\n margin: 0;\n max-height: 650px;\n max-height: var(--aa-panel-max-height);\n overflow-x: hidden;\n overflow-y: auto;\n padding: 8px;\n padding: var(--aa-spacing-half);\n scrollbar-color: white #eaeaea;\n scrollbar-color: rgba(\n var(--aa-scrollbar-thumb-background-color-rgb),\n var(--aa-scrollbar-thumb-background-color-alpha)\n )\n rgba(\n var(--aa-scrollbar-track-background-color-rgb),\n var(--aa-scrollbar-track-background-color-alpha)\n );\n scrollbar-width: thin;\n }\n .aa-Panel--scrollable::-webkit-scrollbar {\n width: 13px;\n width: var(--aa-scrollbar-width);\n }\n .aa-Panel--scrollable::-webkit-scrollbar-track {\n background-color: #eaeaea;\n background-color: rgba(\n var(--aa-scrollbar-track-background-color-rgb),\n var(--aa-scrollbar-track-background-color-alpha)\n );\n }\n .aa-Panel--scrollable::-webkit-scrollbar-thumb {\n background-color: white;\n background-color: rgba(\n var(--aa-scrollbar-thumb-background-color-rgb),\n var(--aa-scrollbar-thumb-background-color-alpha)\n );\n border-color: #eaeaea;\n border-color: rgba(\n var(--aa-scrollbar-track-background-color-rgb),\n var(--aa-scrollbar-track-background-color-alpha)\n );\n border-radius: 9999px;\n border-style: solid;\n border-width: 3px 2px 3px 3px;\n }\n\n /* ---------------- */\n /* 5. Sources */\n /* Each source can be styled independently */\n /* ---------------- */\n .aa-Source {\n margin: 0;\n padding: 0;\n position: relative;\n width: 100%;\n /* List of results inside the source */\n /* Source title */\n /* See all button */\n }\n .aa-Source:empty {\n /* Hide empty section */\n display: none;\n }\n .aa-SourceNoResults {\n font-size: 1em;\n margin: 0;\n padding: 16px;\n padding: var(--aa-spacing);\n }\n\n .aa-List {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n\n .aa-SourceHeader {\n margin: 8px 0.5em 8px 0;\n margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0;\n padding: 0;\n position: relative;\n /* Hide empty header */\n /* Title typography */\n /* Line separator */\n }\n .aa-SourceHeader:empty {\n display: none;\n }\n .aa-SourceHeaderTitle {\n background: white;\n background: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n display: inline-block;\n font-size: 0.8em;\n font-weight: 600;\n font-weight: var(--aa-font-weight-semibold);\n margin: 0;\n padding: 0 8px 0 0;\n padding: 0 var(--aa-spacing-half) 0 0;\n position: relative;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n\n .aa-SourceHeaderLine {\n border-bottom: solid 1px #3e34d3;\n border-bottom: solid 1px rgba(var(--aa-primary-color-rgb), 1);\n display: block;\n height: 2px;\n left: 0;\n margin: 0;\n opacity: 0.3;\n padding: 0;\n position: absolute;\n right: 0;\n top: 8px;\n top: var(--aa-spacing-half);\n z-index: 9998;\n z-index: calc(var(--aa-base-z-index) - 1);\n }\n\n .aa-SourceFooterSeeAll {\n background: linear-gradient(180deg, white, rgba(128, 126, 163, 0.14));\n background: linear-gradient(\n 180deg,\n rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)),\n rgba(128, 126, 163, 0.14)\n );\n border: 1px solid rgba(128, 126, 163, 0.6);\n border: 1px solid\n rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n border-radius: 5px;\n box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px rgba(76, 69, 88, 0.15);\n color: inherit;\n font-size: 0.95em;\n font-weight: 500;\n font-weight: var(--aa-font-weight-medium);\n padding: 0.475em 1em 0.6em;\n text-decoration: none;\n }\n .aa-SourceFooterSeeAll:focus,\n .aa-SourceFooterSeeAll:hover {\n border: 1px solid #3e34d3;\n border: 1px solid rgba(var(--aa-primary-color-rgb), 1);\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n }\n\n /* ---------------- */\n /* 6. Hit Layout */\n /* ---------------- */\n .aa-Item {\n align-items: center;\n border-radius: 3px;\n cursor: pointer;\n display: grid;\n min-height: 40px;\n min-height: calc(var(--aa-spacing) * 2.5);\n padding: 4px;\n padding: calc(var(--aa-spacing-half) / 2);\n /* When the result is active */\n /* The result type icon inlined SVG or image */\n /* wrap hit with url but we don't need to see it */\n /* Secondary click actions */\n }\n .aa-Item[aria-selected='true'] {\n background-color: rgba(179, 173, 214, 0.205);\n background-color: rgba(\n var(--aa-selected-color-rgb),\n var(--aa-selected-color-alpha)\n );\n }\n .aa-Item[aria-selected='true'] .aa-ItemActionButton,\n .aa-Item[aria-selected='true'] .aa-ActiveOnly {\n visibility: visible;\n }\n .aa-ItemIcon {\n align-items: center;\n background: white;\n background: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);\n box-shadow: inset 0 0 0 1px\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n color: #7777a3;\n color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha));\n display: flex;\n flex-shrink: 0;\n font-size: 0.7em;\n height: 28px;\n height: calc(var(--aa-icon-size) + var(--aa-spacing-half));\n justify-content: center;\n overflow: hidden;\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n text-align: center;\n width: 28px;\n width: calc(var(--aa-icon-size) + var(--aa-spacing-half));\n }\n .aa-ItemIcon img {\n height: auto;\n max-height: 20px;\n max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);\n max-width: 20px;\n max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);\n width: auto;\n }\n .aa-ItemIcon svg {\n height: 20px;\n height: var(--aa-icon-size);\n width: 20px;\n width: var(--aa-icon-size);\n }\n .aa-ItemIcon--alignTop {\n align-self: flex-start;\n }\n\n .aa-ItemIcon--noBorder {\n background: none;\n box-shadow: none;\n }\n\n .aa-ItemIcon--picture {\n height: 96px;\n width: 96px;\n }\n .aa-ItemIcon--picture img {\n max-height: 100%;\n max-width: 100%;\n padding: 8px;\n padding: var(--aa-spacing-half);\n }\n\n .aa-ItemContent {\n align-items: center;\n cursor: pointer;\n display: grid;\n grid-gap: 8px;\n gap: 8px;\n grid-gap: var(--aa-spacing-half);\n gap: var(--aa-spacing-half);\n grid-auto-flow: column;\n line-height: 1.25em;\n overflow: hidden;\n }\n .aa-ItemContent:empty {\n display: none;\n }\n .aa-ItemContent mark {\n background: none;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-style: normal;\n font-weight: 700;\n font-weight: var(--aa-font-weight-bold);\n }\n .aa-ItemContent--dual {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: left;\n }\n .aa-ItemContent--dual .aa-ItemContentTitle,\n .aa-ItemContent--dual .aa-ItemContentSubtitle {\n display: block;\n }\n\n .aa-ItemContent--indented {\n padding-left: 36px;\n padding-left: calc(var(--aa-icon-size) + var(--aa-spacing));\n }\n\n .aa-ItemContentBody {\n display: grid;\n grid-gap: 4px;\n gap: 4px;\n grid-gap: calc(var(--aa-spacing-half) / 2);\n gap: calc(var(--aa-spacing-half) / 2);\n }\n\n .aa-ItemContentTitle {\n display: inline-block;\n margin: 0 0.5em 0 0;\n max-width: 100%;\n overflow: hidden;\n padding: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .aa-ItemContentSubtitle {\n font-size: 0.92em;\n }\n .aa-ItemContentSubtitleIcon::before {\n border-color: rgba(128, 126, 163, 0.64);\n border-color: rgba(var(--aa-muted-color-rgb), 0.64);\n border-style: solid;\n content: '';\n display: inline-block;\n left: 1px;\n position: relative;\n top: -3px;\n }\n\n .aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon::before {\n border-width: 0 0 1.5px;\n margin-left: 8px;\n margin-left: var(--aa-spacing-half);\n margin-right: 4px;\n margin-right: calc(var(--aa-spacing-half) / 2);\n width: 10px;\n width: calc(var(--aa-spacing-half) + 2px);\n }\n\n .aa-ItemContentSubtitle--standalone {\n align-items: center;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n display: grid;\n grid-gap: 8px;\n gap: 8px;\n grid-gap: var(--aa-spacing-half);\n gap: var(--aa-spacing-half);\n grid-auto-flow: column;\n justify-content: start;\n }\n .aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon::before {\n border-radius: 0 0 0 3px;\n border-width: 0 0 1.5px 1.5px;\n height: 8px;\n height: var(--aa-spacing-half);\n width: 8px;\n width: var(--aa-spacing-half);\n }\n\n .aa-ItemContentSubtitleCategory {\n color: #807ea3;\n color: rgba(var(--aa-muted-color-rgb), 1);\n font-weight: 500;\n }\n\n .aa-ItemContentDescription {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-size: 0.85em;\n max-width: 100%;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n .aa-ItemContentDescription:empty {\n display: none;\n }\n .aa-ItemContentDescription mark {\n background: rgba(245, 223, 77, 0.5);\n background: rgba(\n var(--aa-description-highlight-background-color-rgb),\n var(--aa-description-highlight-background-color-alpha)\n );\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-style: normal;\n font-weight: 500;\n font-weight: var(--aa-font-weight-medium);\n }\n\n .aa-ItemContentDash {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n display: none;\n opacity: 0.4;\n }\n\n .aa-ItemContentTag {\n background-color: rgba(62, 52, 211, 0.2);\n background-color: rgba(\n var(--aa-primary-color-rgb),\n var(--aa-primary-color-alpha)\n );\n border-radius: 3px;\n margin: 0 0.4em 0 0;\n padding: 0.08em 0.3em;\n }\n\n .aa-ItemWrapper,\n .aa-ItemLink {\n align-items: center;\n color: inherit;\n display: grid;\n grid-gap: 4px;\n gap: 4px;\n grid-gap: calc(var(--aa-spacing-half) / 2);\n gap: calc(var(--aa-spacing-half) / 2);\n grid-auto-flow: column;\n justify-content: space-between;\n width: 100%;\n }\n\n .aa-ItemLink {\n color: inherit;\n text-decoration: none;\n }\n\n .aa-ItemActions {\n display: grid;\n grid-auto-flow: column;\n height: 100%;\n justify-self: end;\n margin: 0 -5.3333333333px;\n margin: 0 calc(var(--aa-spacing) / -3);\n padding: 0 2px 0 0;\n }\n\n .aa-ItemActionButton {\n align-items: center;\n background: none;\n border: 0;\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n padding: 0;\n }\n .aa-ItemActionButton:hover svg,\n .aa-ItemActionButton:focus svg {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n }\n @media (hover: none) and (pointer: coarse) {\n .aa-ItemActionButton:hover svg,\n .aa-ItemActionButton:focus svg {\n color: inherit;\n }\n }\n .aa-ItemActionButton svg {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n margin: 0;\n margin: 5.3333333333px;\n margin: calc(var(--aa-spacing) / 3);\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n width: 20px;\n width: var(--aa-action-icon-size);\n }\n\n .aa-ActiveOnly {\n visibility: hidden;\n }\n\n /*---------------- */\n /* 7. Panel Header */\n /*---------------- */\n .aa-PanelHeader {\n align-items: center;\n background: #3e34d3;\n background: rgba(var(--aa-primary-color-rgb), 1);\n color: #fff;\n display: grid;\n height: var(--aa-modal-header-height);\n margin: 0;\n padding: 8px 16px;\n padding: var(--aa-spacing-half) var(--aa-spacing);\n position: relative;\n }\n .aa-PanelHeader::after {\n background-image: linear-gradient(white, rgba(255, 255, 255, 0));\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 1),\n rgba(var(--aa-background-color-rgb), 0)\n );\n bottom: -8px;\n bottom: calc(var(--aa-spacing-half) * -1);\n content: '';\n height: 8px;\n height: var(--aa-spacing-half);\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n\n /*---------------- */\n /* 8. Panel Footer */\n /*---------------- */\n .aa-PanelFooter {\n background-color: white;\n background-color: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3);\n box-shadow: inset 0 1px 0\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n display: flex;\n justify-content: space-between;\n margin: 0;\n padding: 16px;\n padding: var(--aa-spacing);\n position: relative;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n .aa-PanelFooter::after {\n background-image: linear-gradient(\n rgba(255, 255, 255, 0),\n rgba(128, 126, 163, 0.6)\n );\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 0),\n rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha))\n );\n content: '';\n height: 16px;\n height: var(--aa-spacing);\n left: 0;\n opacity: 0.12;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: -16px;\n top: calc(var(--aa-spacing) * -1);\n z-index: 9998;\n z-index: calc(var(--aa-base-z-index) - 1);\n }\n\n /*---------------- */\n /* 9. Detached Mode */\n /*---------------- */\n .aa-DetachedContainer {\n background: white;\n background: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n bottom: 0;\n box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),\n 0 6px 16px -4px rgba(35, 38, 59, 0.15);\n box-shadow: var(--aa-panel-shadow);\n display: flex;\n flex-direction: column;\n left: 0;\n margin: 0;\n overflow: hidden;\n padding: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n .aa-DetachedContainer::after {\n height: 32px;\n }\n .aa-DetachedContainer .aa-SourceHeader {\n margin: 8px 0 8px 2px;\n margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;\n }\n .aa-DetachedContainer .aa-Panel {\n background-color: white;\n background-color: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n border-radius: 0;\n box-shadow: none;\n flex-grow: 1;\n margin: 0;\n padding: 0;\n position: relative;\n }\n .aa-DetachedContainer .aa-PanelLayout {\n bottom: 0;\n box-shadow: none;\n left: 0;\n margin: 0;\n max-height: none;\n overflow-y: auto;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n .aa-DetachedFormContainer {\n border-bottom: solid 1px rgba(128, 126, 163, 0.3);\n border-bottom: solid 1px\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin: 0;\n padding: 8px;\n padding: var(--aa-spacing-half);\n }\n .aa-DetachedCancelButton {\n background: none;\n border: 0;\n border-radius: 3px;\n color: inherit;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n cursor: pointer;\n font: inherit;\n margin: 0 0 0 8px;\n margin: 0 0 0 var(--aa-spacing-half);\n padding: 0 8px;\n padding: 0 var(--aa-spacing-half);\n }\n .aa-DetachedCancelButton:hover,\n .aa-DetachedCancelButton:focus {\n box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);\n box-shadow: inset 0 0 0 1px\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n }\n\n .aa-DetachedContainer--modal {\n border-radius: 6px;\n bottom: inherit;\n height: auto;\n margin: 0 auto;\n max-width: 680px;\n max-width: var(--aa-detached-modal-max-width);\n position: absolute;\n top: 3%;\n }\n .aa-DetachedContainer--modal .aa-PanelLayout {\n max-height: 500px;\n max-height: var(--aa-detached-modal-max-height);\n padding-bottom: 8px;\n padding-bottom: var(--aa-spacing-half);\n position: static;\n }\n\n /* Search Button */\n .aa-DetachedSearchButton {\n align-items: center;\n background-color: white;\n background-color: rgba(\n var(--aa-input-background-color-rgb),\n var(--aa-input-background-color-alpha)\n );\n border: 1px solid rgba(128, 126, 163, 0.8);\n border: 1px solid\n rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));\n border-radius: 3px;\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n cursor: pointer;\n display: flex;\n font: inherit;\n font-family: inherit;\n font-family: var(--aa-font-family);\n font-size: 16px;\n font-size: var(--aa-font-size);\n height: 44px;\n height: var(--aa-search-input-height);\n margin: 0;\n padding: 0 5.5px;\n padding: 0 calc(var(--aa-search-input-height) / 8);\n position: relative;\n text-align: left;\n width: 100%;\n }\n .aa-DetachedSearchButton:focus {\n border-color: #3e34d3;\n border-color: rgba(var(--aa-primary-color-rgb), 1);\n box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 3px,\n inset rgba(62, 52, 211, 0.2) 0 0 0 2px;\n box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha))\n 0 0 0 3px,\n inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0\n 0 2px;\n outline: currentColor none medium;\n }\n .aa-DetachedSearchButtonIcon {\n align-items: center;\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n cursor: auto;\n cursor: initial;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 36px;\n width: calc(var(--aa-icon-size) + var(--aa-spacing));\n }\n\n .aa-Detached {\n height: 100vh;\n overflow: hidden;\n }\n\n .aa-DetachedOverlay {\n background-color: rgba(115, 114, 129, 0.4);\n background-color: rgba(\n var(--aa-overlay-color-rgb),\n var(--aa-overlay-color-alpha)\n );\n height: 100vh;\n left: 0;\n margin: 0;\n padding: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9998;\n z-index: calc(var(--aa-base-z-index) - 1);\n }\n\n /*---------------- */\n /* 10. Gradients */\n /*---------------- */\n .aa-GradientTop,\n .aa-GradientBottom {\n height: 8px;\n height: var(--aa-spacing-half);\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n\n .aa-GradientTop {\n background-image: linear-gradient(white, rgba(255, 255, 255, 0));\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 1),\n rgba(var(--aa-background-color-rgb), 0)\n );\n top: 0;\n }\n\n .aa-GradientBottom {\n background-image: linear-gradient(rgba(255, 255, 255, 0), white);\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 0),\n rgba(var(--aa-background-color-rgb), 1)\n );\n border-bottom-left-radius: 4px;\n border-bottom-left-radius: calc(var(--aa-spacing) / 4);\n border-bottom-right-radius: 4px;\n border-bottom-right-radius: calc(var(--aa-spacing) / 4);\n bottom: 0;\n }\n\n /*---------------- */\n /* 11. Utilities */\n /*---------------- */\n @media (hover: none) and (pointer: coarse) {\n .aa-DesktopOnly {\n display: none;\n }\n }\n\n @media (hover: hover) {\n .aa-TouchOnly {\n display: none;\n }\n }\n"], ["\n /*! @algolia/autocomplete-theme-classic 1.6.3 | MIT License | \u00A9 Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */\n /* ---------------- */\n /* 1. CSS Variables */\n /* 2. Dark Mode */\n /* 3. Autocomplete */\n /* 4. Panel */\n /* 5. Sources */\n /* 6. Hit Layout */\n /* 7. Panel Header */\n /* 8. Panel Footer */\n /* 9. Detached Mode */\n /* 10. Gradients */\n /* 11. Utilities */\n /* ---------------- */\n /* Note: */\n /* This theme reflects the markup structure of autocomplete with SCSS indentation. */\n /* We use the SASS function to keep specificity low. */\n /* ---------------- */\n /* 1. CSS Variables */\n /* ---------------- */\n :root {\n /* Input */\n --aa-search-input-height: 44px;\n --aa-input-icon-size: 20px;\n /* Size and spacing */\n --aa-base-unit: 16;\n --aa-spacing-factor: 1;\n --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px);\n --aa-spacing-half: calc(var(--aa-spacing) / 2);\n --aa-panel-max-height: 650px;\n /* Z-index */\n --aa-base-z-index: 9999;\n /* Font */\n --aa-font-size: calc(var(--aa-base-unit) * 1px);\n --aa-font-family: inherit;\n --aa-font-weight-medium: 500;\n --aa-font-weight-semibold: 600;\n --aa-font-weight-bold: 700;\n /* Icons */\n --aa-icon-size: 20px;\n --aa-icon-stroke-width: 1.6;\n --aa-icon-color-rgb: 119, 119, 163;\n --aa-icon-color-alpha: 1;\n --aa-action-icon-size: 20px;\n /* Text colors */\n --aa-text-color-rgb: 38, 38, 39;\n --aa-text-color-alpha: 1;\n --aa-primary-color-rgb: 62, 52, 211;\n --aa-primary-color-alpha: 0.2;\n --aa-muted-color-rgb: 128, 126, 163;\n --aa-muted-color-alpha: 0.6;\n /* Border colors */\n --aa-panel-border-color-rgb: 128, 126, 163;\n --aa-panel-border-color-alpha: 0.3;\n --aa-input-border-color-rgb: 128, 126, 163;\n --aa-input-border-color-alpha: 0.8;\n /* Background colors */\n --aa-background-color-rgb: 255, 255, 255;\n --aa-background-color-alpha: 1;\n --aa-input-background-color-rgb: 255, 255, 255;\n --aa-input-background-color-alpha: 1;\n --aa-selected-color-rgb: 179, 173, 214;\n --aa-selected-color-alpha: 0.205;\n --aa-description-highlight-background-color-rgb: 245, 223, 77;\n --aa-description-highlight-background-color-alpha: 0.5;\n /* Detached mode */\n --aa-detached-media-query: (max-width: 680px);\n --aa-detached-modal-media-query: (min-width: 680px);\n --aa-detached-modal-max-width: 680px;\n --aa-detached-modal-max-height: 500px;\n --aa-overlay-color-rgb: 115, 114, 129;\n --aa-overlay-color-alpha: 0.4;\n /* Shadows */\n --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),\n 0 6px 16px -4px rgba(35, 38, 59, 0.15);\n /* Scrollbar */\n --aa-scrollbar-width: 13px;\n --aa-scrollbar-track-background-color-rgb: 234, 234, 234;\n --aa-scrollbar-track-background-color-alpha: 1;\n --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);\n --aa-scrollbar-thumb-background-color-alpha: 1;\n /* Touch screens */\n }\n @media (hover: none) and (pointer: coarse) {\n :root {\n --aa-spacing-factor: 1.2;\n --aa-action-icon-size: 22px;\n }\n }\n\n /* ---------------- */\n /* 2. Dark Mode */\n /* ---------------- */\n body {\n /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */\n /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */\n }\n body[data-theme='dark'],\n body.dark {\n /* Text colors */\n --aa-text-color-rgb: 183, 192, 199;\n --aa-primary-color-rgb: 146, 138, 255;\n --aa-muted-color-rgb: 146, 138, 255;\n /* Background colors */\n --aa-input-background-color-rgb: 0, 3, 9;\n --aa-background-color-rgb: 21, 24, 42;\n --aa-selected-color-rgb: 146, 138, 255;\n --aa-selected-color-alpha: 0.25;\n --aa-description-highlight-background-color-rgb: 0 255 255;\n --aa-description-highlight-background-color-alpha: 0.25;\n /* Icons */\n --aa-icon-color-rgb: 119, 119, 163;\n /* Shadows */\n --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),\n 0 3px 8px 0 rgb(0, 3, 9);\n /* Scrollbar */\n --aa-scrollbar-track-background-color-rgb: 44, 46, 64;\n --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);\n }\n\n /* Reset for */\n .aa-Panel *,\n .aa-Autocomplete *,\n .aa-DetachedFormContainer * {\n box-sizing: border-box;\n }\n\n /* Init for */\n .aa-Panel,\n .aa-Autocomplete,\n .aa-DetachedFormContainer {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-family: inherit;\n font-family: var(--aa-font-family);\n font-size: 16px;\n font-size: var(--aa-font-size);\n font-weight: normal;\n line-height: 1em;\n margin: 0;\n padding: 0;\n text-align: left;\n }\n\n /* ---------------- */\n /* 3. Autocomplete */\n /* ---------------- */\n .aa-Autocomplete,\n .aa-DetachedFormContainer {\n /* Search box */\n }\n .aa-Form {\n align-items: center;\n background-color: white;\n background-color: rgba(\n var(--aa-input-background-color-rgb),\n var(--aa-input-background-color-alpha)\n );\n border: 1px solid rgba(128, 126, 163, 0.8);\n border: 1px solid\n rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));\n border-radius: 3px;\n display: flex;\n line-height: 1em;\n margin: 0;\n position: relative;\n width: 100%;\n }\n .aa-Form[focus-within] {\n border-color: #3e34d3;\n border-color: rgba(var(--aa-primary-color-rgb), 1);\n box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 2px,\n inset rgba(62, 52, 211, 0.2) 0 0 0 2px;\n box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha))\n 0 0 0 2px,\n inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0\n 0 2px;\n outline: currentColor none medium;\n }\n .aa-Form:focus-within {\n border-color: #3e34d3;\n border-color: rgba(var(--aa-primary-color-rgb), 1);\n box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 2px,\n inset rgba(62, 52, 211, 0.2) 0 0 0 2px;\n box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha))\n 0 0 0 2px,\n inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0\n 0 2px;\n outline: currentColor none medium;\n }\n .aa-InputWrapperPrefix {\n align-items: center;\n display: flex;\n flex-shrink: 0;\n height: 44px;\n height: var(--aa-search-input-height);\n order: 1;\n /* Container for search and loading icons */\n }\n .aa-Label,\n .aa-LoadingIndicator {\n cursor: auto;\n cursor: initial;\n flex-shrink: 0;\n height: 100%;\n padding: 0;\n text-align: left;\n }\n .aa-Label svg,\n .aa-LoadingIndicator svg {\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n height: auto;\n max-height: 20px;\n max-height: var(--aa-input-icon-size);\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n width: 20px;\n width: var(--aa-input-icon-size);\n }\n\n .aa-SubmitButton,\n .aa-LoadingIndicator {\n height: 100%;\n padding-left: 11px;\n padding-left: calc(var(--aa-spacing) * 0.75 - 1px);\n padding-right: 8px;\n padding-right: var(--aa-spacing-half);\n width: 47px;\n width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);\n }\n @media (hover: none) and (pointer: coarse) {\n .aa-SubmitButton,\n .aa-LoadingIndicator {\n padding-left: 3px;\n padding-left: calc(var(--aa-spacing-half) / 2 - 1px);\n width: 39px;\n width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px);\n }\n }\n\n .aa-SubmitButton {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: 0;\n margin: 0;\n }\n\n .aa-LoadingIndicator {\n align-items: center;\n display: flex;\n justify-content: center;\n }\n .aa-LoadingIndicator[hidden] {\n display: none;\n }\n\n .aa-InputWrapper {\n order: 3;\n position: relative;\n width: 100%;\n /* Search box input (with placeholder and query) */\n }\n .aa-Input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: 0;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font: inherit;\n height: 44px;\n height: var(--aa-search-input-height);\n padding: 0;\n width: 100%;\n /* Focus is set and styled on the parent, it isn't necessary here */\n /* Remove native appearence */\n }\n .aa-Input::-moz-placeholder {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n opacity: 1;\n }\n .aa-Input:-ms-input-placeholder {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n opacity: 1;\n }\n .aa-Input::placeholder {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n opacity: 1;\n }\n .aa-Input:focus {\n border-color: none;\n box-shadow: none;\n outline: none;\n }\n .aa-Input::-webkit-search-decoration,\n .aa-Input::-webkit-search-cancel-button,\n .aa-Input::-webkit-search-results-button,\n .aa-Input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n appearance: none;\n }\n\n .aa-InputWrapperSuffix {\n align-items: center;\n display: flex;\n height: 44px;\n height: var(--aa-search-input-height);\n order: 4;\n /* Accelerator to clear the query */\n }\n .aa-ClearButton {\n align-items: center;\n background: none;\n border: 0;\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n cursor: pointer;\n display: flex;\n height: 100%;\n margin: 0;\n padding: 0 12.8333333333px;\n padding: 0 calc(var(--aa-spacing) * 0.8333333333 - 0.5px);\n }\n @media (hover: none) and (pointer: coarse) {\n .aa-ClearButton {\n padding: 0 10.1666666667px;\n padding: 0 calc(var(--aa-spacing) * 0.6666666667 - 0.5px);\n }\n }\n .aa-ClearButton:hover,\n .aa-ClearButton:focus {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n }\n .aa-ClearButton[hidden] {\n display: none;\n }\n .aa-ClearButton svg {\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n width: 20px;\n width: var(--aa-icon-size);\n }\n\n /* ---------------- */\n /* 4. Panel */\n /* ---------------- */\n .aa-Panel {\n background-color: white;\n background-color: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n border-radius: 4px;\n border-radius: calc(var(--aa-spacing) / 4);\n box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),\n 0 6px 16px -4px rgba(35, 38, 59, 0.15);\n box-shadow: var(--aa-panel-shadow);\n margin: 8px 0 0;\n overflow: hidden;\n position: absolute;\n transition: opacity 200ms ease-in, filter 200ms ease-in;\n /* When a request isn't resolved yet */\n }\n @media screen and (prefers-reduced-motion) {\n .aa-Panel {\n transition: none;\n }\n }\n .aa-Panel button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n border: 0;\n margin: 0;\n padding: 0;\n }\n .aa-PanelLayout {\n height: 100%;\n margin: 0;\n max-height: 650px;\n max-height: var(--aa-panel-max-height);\n overflow-y: auto;\n padding: 0;\n position: relative;\n text-align: left;\n }\n .aa-PanelLayoutColumns--twoGolden {\n display: grid;\n grid-template-columns: 39.2% auto;\n overflow: hidden;\n padding: 0;\n }\n\n .aa-PanelLayoutColumns--two {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n overflow: hidden;\n padding: 0;\n }\n\n .aa-PanelLayoutColumns--three {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n overflow: hidden;\n padding: 0;\n }\n\n .aa-Panel--stalled .aa-Source {\n filter: grayscale(1);\n opacity: 0.8;\n }\n\n .aa-Panel--scrollable {\n margin: 0;\n max-height: 650px;\n max-height: var(--aa-panel-max-height);\n overflow-x: hidden;\n overflow-y: auto;\n padding: 8px;\n padding: var(--aa-spacing-half);\n scrollbar-color: white #eaeaea;\n scrollbar-color: rgba(\n var(--aa-scrollbar-thumb-background-color-rgb),\n var(--aa-scrollbar-thumb-background-color-alpha)\n )\n rgba(\n var(--aa-scrollbar-track-background-color-rgb),\n var(--aa-scrollbar-track-background-color-alpha)\n );\n scrollbar-width: thin;\n }\n .aa-Panel--scrollable::-webkit-scrollbar {\n width: 13px;\n width: var(--aa-scrollbar-width);\n }\n .aa-Panel--scrollable::-webkit-scrollbar-track {\n background-color: #eaeaea;\n background-color: rgba(\n var(--aa-scrollbar-track-background-color-rgb),\n var(--aa-scrollbar-track-background-color-alpha)\n );\n }\n .aa-Panel--scrollable::-webkit-scrollbar-thumb {\n background-color: white;\n background-color: rgba(\n var(--aa-scrollbar-thumb-background-color-rgb),\n var(--aa-scrollbar-thumb-background-color-alpha)\n );\n border-color: #eaeaea;\n border-color: rgba(\n var(--aa-scrollbar-track-background-color-rgb),\n var(--aa-scrollbar-track-background-color-alpha)\n );\n border-radius: 9999px;\n border-style: solid;\n border-width: 3px 2px 3px 3px;\n }\n\n /* ---------------- */\n /* 5. Sources */\n /* Each source can be styled independently */\n /* ---------------- */\n .aa-Source {\n margin: 0;\n padding: 0;\n position: relative;\n width: 100%;\n /* List of results inside the source */\n /* Source title */\n /* See all button */\n }\n .aa-Source:empty {\n /* Hide empty section */\n display: none;\n }\n .aa-SourceNoResults {\n font-size: 1em;\n margin: 0;\n padding: 16px;\n padding: var(--aa-spacing);\n }\n\n .aa-List {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n\n .aa-SourceHeader {\n margin: 8px 0.5em 8px 0;\n margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0;\n padding: 0;\n position: relative;\n /* Hide empty header */\n /* Title typography */\n /* Line separator */\n }\n .aa-SourceHeader:empty {\n display: none;\n }\n .aa-SourceHeaderTitle {\n background: white;\n background: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n display: inline-block;\n font-size: 0.8em;\n font-weight: 600;\n font-weight: var(--aa-font-weight-semibold);\n margin: 0;\n padding: 0 8px 0 0;\n padding: 0 var(--aa-spacing-half) 0 0;\n position: relative;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n\n .aa-SourceHeaderLine {\n border-bottom: solid 1px #3e34d3;\n border-bottom: solid 1px rgba(var(--aa-primary-color-rgb), 1);\n display: block;\n height: 2px;\n left: 0;\n margin: 0;\n opacity: 0.3;\n padding: 0;\n position: absolute;\n right: 0;\n top: 8px;\n top: var(--aa-spacing-half);\n z-index: 9998;\n z-index: calc(var(--aa-base-z-index) - 1);\n }\n\n .aa-SourceFooterSeeAll {\n background: linear-gradient(180deg, white, rgba(128, 126, 163, 0.14));\n background: linear-gradient(\n 180deg,\n rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)),\n rgba(128, 126, 163, 0.14)\n );\n border: 1px solid rgba(128, 126, 163, 0.6);\n border: 1px solid\n rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n border-radius: 5px;\n box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px rgba(76, 69, 88, 0.15);\n color: inherit;\n font-size: 0.95em;\n font-weight: 500;\n font-weight: var(--aa-font-weight-medium);\n padding: 0.475em 1em 0.6em;\n text-decoration: none;\n }\n .aa-SourceFooterSeeAll:focus,\n .aa-SourceFooterSeeAll:hover {\n border: 1px solid #3e34d3;\n border: 1px solid rgba(var(--aa-primary-color-rgb), 1);\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n }\n\n /* ---------------- */\n /* 6. Hit Layout */\n /* ---------------- */\n .aa-Item {\n align-items: center;\n border-radius: 3px;\n cursor: pointer;\n display: grid;\n min-height: 40px;\n min-height: calc(var(--aa-spacing) * 2.5);\n padding: 4px;\n padding: calc(var(--aa-spacing-half) / 2);\n /* When the result is active */\n /* The result type icon inlined SVG or image */\n /* wrap hit with url but we don't need to see it */\n /* Secondary click actions */\n }\n .aa-Item[aria-selected='true'] {\n background-color: rgba(179, 173, 214, 0.205);\n background-color: rgba(\n var(--aa-selected-color-rgb),\n var(--aa-selected-color-alpha)\n );\n }\n .aa-Item[aria-selected='true'] .aa-ItemActionButton,\n .aa-Item[aria-selected='true'] .aa-ActiveOnly {\n visibility: visible;\n }\n .aa-ItemIcon {\n align-items: center;\n background: white;\n background: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);\n box-shadow: inset 0 0 0 1px\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n color: #7777a3;\n color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha));\n display: flex;\n flex-shrink: 0;\n font-size: 0.7em;\n height: 28px;\n height: calc(var(--aa-icon-size) + var(--aa-spacing-half));\n justify-content: center;\n overflow: hidden;\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n text-align: center;\n width: 28px;\n width: calc(var(--aa-icon-size) + var(--aa-spacing-half));\n }\n .aa-ItemIcon img {\n height: auto;\n max-height: 20px;\n max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);\n max-width: 20px;\n max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);\n width: auto;\n }\n .aa-ItemIcon svg {\n height: 20px;\n height: var(--aa-icon-size);\n width: 20px;\n width: var(--aa-icon-size);\n }\n .aa-ItemIcon--alignTop {\n align-self: flex-start;\n }\n\n .aa-ItemIcon--noBorder {\n background: none;\n box-shadow: none;\n }\n\n .aa-ItemIcon--picture {\n height: 96px;\n width: 96px;\n }\n .aa-ItemIcon--picture img {\n max-height: 100%;\n max-width: 100%;\n padding: 8px;\n padding: var(--aa-spacing-half);\n }\n\n .aa-ItemContent {\n align-items: center;\n cursor: pointer;\n display: grid;\n grid-gap: 8px;\n gap: 8px;\n grid-gap: var(--aa-spacing-half);\n gap: var(--aa-spacing-half);\n grid-auto-flow: column;\n line-height: 1.25em;\n overflow: hidden;\n }\n .aa-ItemContent:empty {\n display: none;\n }\n .aa-ItemContent mark {\n background: none;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-style: normal;\n font-weight: 700;\n font-weight: var(--aa-font-weight-bold);\n }\n .aa-ItemContent--dual {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n text-align: left;\n }\n .aa-ItemContent--dual .aa-ItemContentTitle,\n .aa-ItemContent--dual .aa-ItemContentSubtitle {\n display: block;\n }\n\n .aa-ItemContent--indented {\n padding-left: 36px;\n padding-left: calc(var(--aa-icon-size) + var(--aa-spacing));\n }\n\n .aa-ItemContentBody {\n display: grid;\n grid-gap: 4px;\n gap: 4px;\n grid-gap: calc(var(--aa-spacing-half) / 2);\n gap: calc(var(--aa-spacing-half) / 2);\n }\n\n .aa-ItemContentTitle {\n display: inline-block;\n margin: 0 0.5em 0 0;\n max-width: 100%;\n overflow: hidden;\n padding: 0;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .aa-ItemContentSubtitle {\n font-size: 0.92em;\n }\n .aa-ItemContentSubtitleIcon::before {\n border-color: rgba(128, 126, 163, 0.64);\n border-color: rgba(var(--aa-muted-color-rgb), 0.64);\n border-style: solid;\n content: '';\n display: inline-block;\n left: 1px;\n position: relative;\n top: -3px;\n }\n\n .aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon::before {\n border-width: 0 0 1.5px;\n margin-left: 8px;\n margin-left: var(--aa-spacing-half);\n margin-right: 4px;\n margin-right: calc(var(--aa-spacing-half) / 2);\n width: 10px;\n width: calc(var(--aa-spacing-half) + 2px);\n }\n\n .aa-ItemContentSubtitle--standalone {\n align-items: center;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n display: grid;\n grid-gap: 8px;\n gap: 8px;\n grid-gap: var(--aa-spacing-half);\n gap: var(--aa-spacing-half);\n grid-auto-flow: column;\n justify-content: start;\n }\n .aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon::before {\n border-radius: 0 0 0 3px;\n border-width: 0 0 1.5px 1.5px;\n height: 8px;\n height: var(--aa-spacing-half);\n width: 8px;\n width: var(--aa-spacing-half);\n }\n\n .aa-ItemContentSubtitleCategory {\n color: #807ea3;\n color: rgba(var(--aa-muted-color-rgb), 1);\n font-weight: 500;\n }\n\n .aa-ItemContentDescription {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-size: 0.85em;\n max-width: 100%;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n .aa-ItemContentDescription:empty {\n display: none;\n }\n .aa-ItemContentDescription mark {\n background: rgba(245, 223, 77, 0.5);\n background: rgba(\n var(--aa-description-highlight-background-color-rgb),\n var(--aa-description-highlight-background-color-alpha)\n );\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n font-style: normal;\n font-weight: 500;\n font-weight: var(--aa-font-weight-medium);\n }\n\n .aa-ItemContentDash {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n display: none;\n opacity: 0.4;\n }\n\n .aa-ItemContentTag {\n background-color: rgba(62, 52, 211, 0.2);\n background-color: rgba(\n var(--aa-primary-color-rgb),\n var(--aa-primary-color-alpha)\n );\n border-radius: 3px;\n margin: 0 0.4em 0 0;\n padding: 0.08em 0.3em;\n }\n\n .aa-ItemWrapper,\n .aa-ItemLink {\n align-items: center;\n color: inherit;\n display: grid;\n grid-gap: 4px;\n gap: 4px;\n grid-gap: calc(var(--aa-spacing-half) / 2);\n gap: calc(var(--aa-spacing-half) / 2);\n grid-auto-flow: column;\n justify-content: space-between;\n width: 100%;\n }\n\n .aa-ItemLink {\n color: inherit;\n text-decoration: none;\n }\n\n .aa-ItemActions {\n display: grid;\n grid-auto-flow: column;\n height: 100%;\n justify-self: end;\n margin: 0 -5.3333333333px;\n margin: 0 calc(var(--aa-spacing) / -3);\n padding: 0 2px 0 0;\n }\n\n .aa-ItemActionButton {\n align-items: center;\n background: none;\n border: 0;\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n padding: 0;\n }\n .aa-ItemActionButton:hover svg,\n .aa-ItemActionButton:focus svg {\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n }\n @media (hover: none) and (pointer: coarse) {\n .aa-ItemActionButton:hover svg,\n .aa-ItemActionButton:focus svg {\n color: inherit;\n }\n }\n .aa-ItemActionButton svg {\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n margin: 0;\n margin: 5.3333333333px;\n margin: calc(var(--aa-spacing) / 3);\n stroke-width: 1.6;\n stroke-width: var(--aa-icon-stroke-width);\n width: 20px;\n width: var(--aa-action-icon-size);\n }\n\n .aa-ActiveOnly {\n visibility: hidden;\n }\n\n /*---------------- */\n /* 7. Panel Header */\n /*---------------- */\n .aa-PanelHeader {\n align-items: center;\n background: #3e34d3;\n background: rgba(var(--aa-primary-color-rgb), 1);\n color: #fff;\n display: grid;\n height: var(--aa-modal-header-height);\n margin: 0;\n padding: 8px 16px;\n padding: var(--aa-spacing-half) var(--aa-spacing);\n position: relative;\n }\n .aa-PanelHeader::after {\n background-image: linear-gradient(white, rgba(255, 255, 255, 0));\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 1),\n rgba(var(--aa-background-color-rgb), 0)\n );\n bottom: -8px;\n bottom: calc(var(--aa-spacing-half) * -1);\n content: '';\n height: 8px;\n height: var(--aa-spacing-half);\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n\n /*---------------- */\n /* 8. Panel Footer */\n /*---------------- */\n .aa-PanelFooter {\n background-color: white;\n background-color: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3);\n box-shadow: inset 0 1px 0\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n display: flex;\n justify-content: space-between;\n margin: 0;\n padding: 16px;\n padding: var(--aa-spacing);\n position: relative;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n .aa-PanelFooter::after {\n background-image: linear-gradient(\n rgba(255, 255, 255, 0),\n rgba(128, 126, 163, 0.6)\n );\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 0),\n rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha))\n );\n content: '';\n height: 16px;\n height: var(--aa-spacing);\n left: 0;\n opacity: 0.12;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: -16px;\n top: calc(var(--aa-spacing) * -1);\n z-index: 9998;\n z-index: calc(var(--aa-base-z-index) - 1);\n }\n\n /*---------------- */\n /* 9. Detached Mode */\n /*---------------- */\n .aa-DetachedContainer {\n background: white;\n background: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n bottom: 0;\n box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),\n 0 6px 16px -4px rgba(35, 38, 59, 0.15);\n box-shadow: var(--aa-panel-shadow);\n display: flex;\n flex-direction: column;\n left: 0;\n margin: 0;\n overflow: hidden;\n padding: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n .aa-DetachedContainer::after {\n height: 32px;\n }\n .aa-DetachedContainer .aa-SourceHeader {\n margin: 8px 0 8px 2px;\n margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;\n }\n .aa-DetachedContainer .aa-Panel {\n background-color: white;\n background-color: rgba(\n var(--aa-background-color-rgb),\n var(--aa-background-color-alpha)\n );\n border-radius: 0;\n box-shadow: none;\n flex-grow: 1;\n margin: 0;\n padding: 0;\n position: relative;\n }\n .aa-DetachedContainer .aa-PanelLayout {\n bottom: 0;\n box-shadow: none;\n left: 0;\n margin: 0;\n max-height: none;\n overflow-y: auto;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n .aa-DetachedFormContainer {\n border-bottom: solid 1px rgba(128, 126, 163, 0.3);\n border-bottom: solid 1px\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n margin: 0;\n padding: 8px;\n padding: var(--aa-spacing-half);\n }\n .aa-DetachedCancelButton {\n background: none;\n border: 0;\n border-radius: 3px;\n color: inherit;\n color: #262627;\n color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));\n cursor: pointer;\n font: inherit;\n margin: 0 0 0 8px;\n margin: 0 0 0 var(--aa-spacing-half);\n padding: 0 8px;\n padding: 0 var(--aa-spacing-half);\n }\n .aa-DetachedCancelButton:hover,\n .aa-DetachedCancelButton:focus {\n box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);\n box-shadow: inset 0 0 0 1px\n rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));\n }\n\n .aa-DetachedContainer--modal {\n border-radius: 6px;\n bottom: inherit;\n height: auto;\n margin: 0 auto;\n max-width: 680px;\n max-width: var(--aa-detached-modal-max-width);\n position: absolute;\n top: 3%;\n }\n .aa-DetachedContainer--modal .aa-PanelLayout {\n max-height: 500px;\n max-height: var(--aa-detached-modal-max-height);\n padding-bottom: 8px;\n padding-bottom: var(--aa-spacing-half);\n position: static;\n }\n\n /* Search Button */\n .aa-DetachedSearchButton {\n align-items: center;\n background-color: white;\n background-color: rgba(\n var(--aa-input-background-color-rgb),\n var(--aa-input-background-color-alpha)\n );\n border: 1px solid rgba(128, 126, 163, 0.8);\n border: 1px solid\n rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));\n border-radius: 3px;\n color: rgba(128, 126, 163, 0.6);\n color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));\n cursor: pointer;\n display: flex;\n font: inherit;\n font-family: inherit;\n font-family: var(--aa-font-family);\n font-size: 16px;\n font-size: var(--aa-font-size);\n height: 44px;\n height: var(--aa-search-input-height);\n margin: 0;\n padding: 0 5.5px;\n padding: 0 calc(var(--aa-search-input-height) / 8);\n position: relative;\n text-align: left;\n width: 100%;\n }\n .aa-DetachedSearchButton:focus {\n border-color: #3e34d3;\n border-color: rgba(var(--aa-primary-color-rgb), 1);\n box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 3px,\n inset rgba(62, 52, 211, 0.2) 0 0 0 2px;\n box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha))\n 0 0 0 3px,\n inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0\n 0 2px;\n outline: currentColor none medium;\n }\n .aa-DetachedSearchButtonIcon {\n align-items: center;\n color: #3e34d3;\n color: rgba(var(--aa-primary-color-rgb), 1);\n cursor: auto;\n cursor: initial;\n display: flex;\n height: 100%;\n justify-content: center;\n width: 36px;\n width: calc(var(--aa-icon-size) + var(--aa-spacing));\n }\n\n .aa-Detached {\n height: 100vh;\n overflow: hidden;\n }\n\n .aa-DetachedOverlay {\n background-color: rgba(115, 114, 129, 0.4);\n background-color: rgba(\n var(--aa-overlay-color-rgb),\n var(--aa-overlay-color-alpha)\n );\n height: 100vh;\n left: 0;\n margin: 0;\n padding: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9998;\n z-index: calc(var(--aa-base-z-index) - 1);\n }\n\n /*---------------- */\n /* 10. Gradients */\n /*---------------- */\n .aa-GradientTop,\n .aa-GradientBottom {\n height: 8px;\n height: var(--aa-spacing-half);\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n z-index: 9999;\n z-index: var(--aa-base-z-index);\n }\n\n .aa-GradientTop {\n background-image: linear-gradient(white, rgba(255, 255, 255, 0));\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 1),\n rgba(var(--aa-background-color-rgb), 0)\n );\n top: 0;\n }\n\n .aa-GradientBottom {\n background-image: linear-gradient(rgba(255, 255, 255, 0), white);\n background-image: linear-gradient(\n rgba(var(--aa-background-color-rgb), 0),\n rgba(var(--aa-background-color-rgb), 1)\n );\n border-bottom-left-radius: 4px;\n border-bottom-left-radius: calc(var(--aa-spacing) / 4);\n border-bottom-right-radius: 4px;\n border-bottom-right-radius: calc(var(--aa-spacing) / 4);\n bottom: 0;\n }\n\n /*---------------- */\n /* 11. Utilities */\n /*---------------- */\n @media (hover: none) and (pointer: coarse) {\n .aa-DesktopOnly {\n display: none;\n }\n }\n\n @media (hover: hover) {\n .aa-TouchOnly {\n display: none;\n }\n }\n"])));
10
+ var templateObject_1;
11
+ //# sourceMappingURL=AlgoliaTheme.js.map
package/dist/cjs/help-hub/components/SearchBar/components/AlgoliaTheme.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AlgoliaTheme.js","sourceRoot":"","sources":["../../../../../../src/help-hub/components/SearchBar/components/AlgoliaTheme.tsx"],"names":[],"mappings":";;;;;;;AAAA,mCAA6B;AAEhB,QAAA,cAAc,OAAG,aAAG,o5gCAAA,g1gCAwqChC,KAAA"}
package/dist/cjs/help-hub/components/SearchBar/components/Autocomplete.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { AutocompleteOptions } from '@algolia/autocomplete-core';
2
+ import { AlgoliaCredentials, AutocompleteItem } from 'help-hub/types';
3
+ import React from 'react';
4
+ export declare const Autocomplete: React.FC<Partial<AutocompleteOptions<AutocompleteItem>> & {
5
+ credentials: AlgoliaCredentials;
6
+ }>;
package/dist/cjs/help-hub/components/SearchBar/components/Autocomplete.js ADDED
@@ -0,0 +1,161 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
+ if (k2 === undefined) k2 = k;
19
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
39
+ Object.defineProperty(exports, "__esModule", { value: true });
40
+ exports.Autocomplete = void 0;
41
+ /* istanbul ignore file */
42
+ var autocomplete_core_1 = require("@algolia/autocomplete-core");
43
+ var autocomplete_preset_algolia_1 = require("@algolia/autocomplete-preset-algolia");
44
+ var lite_1 = __importDefault(require("algoliasearch/lite"));
45
+ var newskit_1 = require("newskit");
46
+ var react_1 = __importStar(require("react"));
47
+ var Highlight_1 = require("./Highlight");
48
+ var FadedBlock = (0, newskit_1.styled)(newskit_1.Block)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n inset: 0px;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n inset: 0px;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])));
49
+ var Autocomplete = function (props) {
50
+ var _a = props.credentials, appId = _a.appId, apiKey = _a.apiKey, indexName = _a.indexName;
51
+ var searchClient = (0, lite_1.default)(appId, apiKey);
52
+ var _b = react_1.default.useState({
53
+ collections: [],
54
+ completion: null,
55
+ context: {},
56
+ isOpen: false,
57
+ query: '',
58
+ activeItemId: null,
59
+ status: 'idle',
60
+ }), autocompleteState = _b[0], setAutocompleteState = _b[1];
61
+ var autocomplete = react_1.default.useMemo(function () {
62
+ return (0, autocomplete_core_1.createAutocomplete)(__assign({ onStateChange: function (_a) {
63
+ var state = _a.state;
64
+ setAutocompleteState(state);
65
+ }, getSources: function () {
66
+ return [
67
+ {
68
+ sourceId: '',
69
+ getItems: function (_a) {
70
+ var query = _a.query;
71
+ return (0, autocomplete_preset_algolia_1.getAlgoliaResults)({
72
+ searchClient: searchClient,
73
+ queries: [
74
+ {
75
+ indexName: indexName,
76
+ query: query,
77
+ params: {
78
+ hitsPerPage: 5,
79
+ },
80
+ },
81
+ ],
82
+ });
83
+ },
84
+ getItemUrl: function (_a) {
85
+ var item = _a.item;
86
+ return item.url;
87
+ },
88
+ },
89
+ ];
90
+ } }, props));
91
+ }, [props]);
92
+ var inputRef = react_1.default.useRef(null);
93
+ var formRef = react_1.default.useRef(null);
94
+ var panelRef = react_1.default.useRef(null);
95
+ var getEnvironmentProps = autocomplete.getEnvironmentProps;
96
+ react_1.default.useEffect(function () {
97
+ if (!formRef.current || !panelRef.current || !inputRef.current) {
98
+ return undefined;
99
+ }
100
+ var _a = getEnvironmentProps({
101
+ formElement: formRef.current,
102
+ inputElement: inputRef.current,
103
+ panelElement: panelRef.current,
104
+ }), onTouchStart = _a.onTouchStart, onTouchMove = _a.onTouchMove;
105
+ window.addEventListener('touchstart', onTouchStart);
106
+ window.addEventListener('touchmove', onTouchMove);
107
+ return function () {
108
+ window.removeEventListener('touchstart', onTouchStart);
109
+ window.removeEventListener('touchmove', onTouchMove);
110
+ };
111
+ }, [getEnvironmentProps, formRef, inputRef, panelRef]);
112
+ var _c = (0, react_1.useState)(false), toggleBackground = _c[0], setToggleBackground = _c[1];
113
+ var handleInputClick = function () {
114
+ setToggleBackground(!toggleBackground);
115
+ };
116
+ var handleBackgorundClick = function () {
117
+ var _a;
118
+ (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.reset();
119
+ setAutocompleteState(__assign(__assign({}, autocompleteState), { isOpen: false }));
120
+ setToggleBackground(!toggleBackground);
121
+ };
122
+ return (react_1.default.createElement("div", __assign({ className: "aa-Autocomplete" }, autocomplete.getRootProps({})),
123
+ toggleBackground && react_1.default.createElement(FadedBlock, { onClick: handleBackgorundClick }),
124
+ react_1.default.createElement("form", __assign({ ref: formRef, className: "aa-Form" }, autocomplete.getFormProps({ inputElement: inputRef.current })),
125
+ react_1.default.createElement("div", { className: "aa-InputWrapperPrefix" },
126
+ react_1.default.createElement("label", __assign({ className: "aa-Label" }, autocomplete.getLabelProps({})),
127
+ react_1.default.createElement("button", { className: "aa-SubmitButton", type: "submit", title: "Submit" },
128
+ react_1.default.createElement(newskit_1.IconFilledSearch, null)))),
129
+ react_1.default.createElement("div", { className: "aa-InputWrapper" },
130
+ react_1.default.createElement("input", __assign({ "data-testid": "autocomplete-input", className: "aa-Input", ref: inputRef }, autocomplete.getInputProps({
131
+ inputElement: inputRef.current,
132
+ }), { onClick: handleInputClick }))),
133
+ react_1.default.createElement("div", { className: "aa-InputWrapperSuffix" },
134
+ react_1.default.createElement("button", { className: "aa-ClearButton", title: "Clear", type: "reset" },
135
+ react_1.default.createElement(newskit_1.IconFilledClear, null)))),
136
+ autocompleteState.isOpen && (react_1.default.createElement("div", __assign({ ref: panelRef, "data-testid": "autocomplete-panel", className: [
137
+ 'aa-Panel',
138
+ 'aa-Panel--desktop',
139
+ autocompleteState.status === 'stalled' && 'aa-Panel--stalled',
140
+ ]
141
+ .filter(Boolean)
142
+ .join(' ') }, autocomplete.getPanelProps({})),
143
+ react_1.default.createElement("div", { className: "aa-PanelLayout aa-Panel--scrollable" }, autocompleteState.collections.map(function (collection, index) {
144
+ var source = collection.source, items = collection.items;
145
+ return (react_1.default.createElement("section", { key: "source-" + index, className: "aa-Source" }, items.length > 0 && (react_1.default.createElement("ul", __assign({ className: "aa-List" }, autocomplete.getListProps()), items.map(function (item) {
146
+ return (react_1.default.createElement("li", __assign({ key: item.objectID, className: "aa-Item" }, autocomplete.getItemProps({ item: item, source: source })),
147
+ react_1.default.createElement("div", { className: "aa-ItemWrapper" },
148
+ react_1.default.createElement("div", { className: "aa-ItemContent" },
149
+ react_1.default.createElement("div", { className: "aa-ItemContentBody" },
150
+ react_1.default.createElement("div", { className: "aa-ItemContentTitle" },
151
+ react_1.default.createElement(Highlight_1.Highlight, { hit: item, attribute: "title" })))),
152
+ react_1.default.createElement("div", { className: "aa-ItemActions" },
153
+ react_1.default.createElement("button", { className: "aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly", type: "button", title: "Select", style: { pointerEvents: 'none' } },
154
+ react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 24 24" },
155
+ react_1.default.createElement("path", { d: "M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" })))))));
156
+ })))));
157
+ }))))));
158
+ };
159
+ exports.Autocomplete = Autocomplete;
160
+ var templateObject_1;
161
+ //# sourceMappingURL=Autocomplete.js.map
package/dist/cjs/help-hub/components/SearchBar/components/Autocomplete.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Autocomplete.js","sourceRoot":"","sources":["../../../../../../src/help-hub/components/SearchBar/components/Autocomplete.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/help-hub/components/SearchBar/components/Highlight.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ declare type HighlightHitParams<THit> = {
2
+ /**
3
+ * The Algolia hit whose attribute to retrieve the highlighted parts from.
4
+ */
5
+ hit: THit;
6
+ /**
7
+ * The attribute to retrieve the highlighted parts from.
8
+ *
9
+ * You can use the array syntax to reference nested attributes.
10
+ */
11
+ attribute: keyof THit | string[];
12
+ /**
13
+ * The tag name to use for highlighted parts.
14
+ *
15
+ * @default "mark"
16
+ */
17
+ tagName?: string;
18
+ };
19
+ export declare function Highlight<THit>({ hit, attribute, tagName, }: HighlightHitParams<THit>): JSX.Element;
20
+ export {};
package/dist/cjs/help-hub/components/SearchBar/components/Highlight.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Highlight = void 0;
4
+ /* istanbul ignore file */
5
+ var autocomplete_preset_algolia_1 = require("@algolia/autocomplete-preset-algolia");
6
+ var react_1 = require("react");
7
+ function Highlight(_a) {
8
+ var hit = _a.hit, attribute = _a.attribute, _b = _a.tagName, tagName = _b === void 0 ? 'mark' : _b;
9
+ return (0, react_1.createElement)(react_1.Fragment, {}, (0, autocomplete_preset_algolia_1.parseAlgoliaHitHighlight)({ hit: hit, attribute: attribute }).map(function (_a, index) {
10
+ var value = _a.value, isHighlighted = _a.isHighlighted;
11
+ if (isHighlighted) {
12
+ return (0, react_1.createElement)(tagName, { key: index }, value);
13
+ }
14
+ return value;
15
+ }));
16
+ }
17
+ exports.Highlight = Highlight;
18
+ //# sourceMappingURL=Highlight.js.map
package/dist/cjs/help-hub/components/SearchBar/components/Highlight.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Highlight.js","sourceRoot":"","sources":["../../../../../../src/help-hub/components/SearchBar/components/Highlight.tsx"],"names":[],"mappings":";;;AAAA,0BAA0B;AAC1B,oFAA+E;AAC/E,+BAA+C;AAqB/C,SAAgB,SAAS,CAAO,EAIL;QAHzB,GAAG,SAAA,EACH,SAAS,eAAA,EACT,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA;IAEhB,OAAO,IAAA,qBAAa,EAClB,gBAAQ,EACR,EAAE,EACF,IAAA,sDAAwB,EAAO,EAAE,GAAG,KAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC,GAAG,CACpD,UAAC,EAAwB,EAAE,KAAK;YAA7B,KAAK,WAAA,EAAE,aAAa,mBAAA;QACrB,IAAI,aAAa,EAAE;YACjB,OAAO,IAAA,qBAAa,EAAC,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,CAAA;SACrD;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CACF,CACF,CAAA;AACH,CAAC;AAlBD,8BAkBC"}
package/dist/cjs/help-hub/components/SearchBar/types.d.ts CHANGED
@@ -1,3 +1,5 @@
1
- export interface SearcBarProps {
2
- placeholder: string;
3
- }
1
+ import { AlgoliaCredentials } from 'help-hub/types';
2
+ export declare type SearchBarProps = {
3
+ credentials: AlgoliaCredentials;
4
+ placeholder?: string;
5
+ };
package/dist/cjs/help-hub/context/baseContext.js CHANGED
@@ -48,7 +48,7 @@ exports.baseContext = {
48
48
  stylePreset: 'inkContrast',
49
49
  spaceStack: {
50
50
  xs: 'space040',
51
- sm: 'space050',
51
+ sm: 'space030',
52
52
  },
53
53
  as: 'h1',
54
54
  },
@@ -67,7 +67,7 @@ exports.baseContext = {
67
67
  typographyPreset: 'utilityButton010',
68
68
  iconSize: 'iconSize010',
69
69
  },
70
- spaceStack: { xs: 'space050', sm: 'space060', md: 'space080' },
70
+ spaceStack: { xs: 'space050', sm: 'space060', md: 'space040' },
71
71
  showDivider: false,
72
72
  },
73
73
  inputPlaceholder: 'Describe your issue',
package/dist/cjs/help-hub/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './pages/LandingPage';
2
2
  export * from './pages/ResultsPage';
3
3
  export * from './pages/ArticlePage';
4
+ export * from './types';
package/dist/cjs/help-hub/index.js CHANGED
@@ -13,4 +13,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
13
13
  __exportStar(require("./pages/LandingPage"), exports);
14
14
  __exportStar(require("./pages/ResultsPage"), exports);
15
15
  __exportStar(require("./pages/ArticlePage"), exports);
16
+ __exportStar(require("./types"), exports);
16
17
  //# sourceMappingURL=index.js.map
package/dist/cjs/help-hub/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/help-hub/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sDAAmC;AACnC,sDAAmC;AACnC,sDAAmC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/help-hub/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sDAAmC;AACnC,sDAAmC;AACnC,sDAAmC;AACnC,0CAAuB"}
package/dist/cjs/help-hub/pages/ArticlePage.js CHANGED
@@ -34,7 +34,7 @@ var PageContent = function () {
34
34
  // NOTE: Add ArticlePage custom data logic here
35
35
  return (react_1.default.createElement(react_1.default.Fragment, null,
36
36
  react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } }),
37
- react_1.default.createElement(SearchBar_1.SearchBar, { placeholder: inputPlaceholder }),
37
+ react_1.default.createElement(SearchBar_1.SearchBar, { placeholder: inputPlaceholder, credentials: { apiKey: '', appId: '', indexName: '' } }),
38
38
  react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
39
39
  react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } })));
40
40
  };
package/dist/cjs/help-hub/pages/ArticlePage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ArticlePage.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/ArticlePage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,gEAAkC;AAClC,mCAA+B;AAC/B,uEAA0D;AAC1D,sEAA4C;AAC5C,qDAAmD;AAEnD,0CAAyE;AACzE,sCAA8C;AAEjC,QAAA,sBAAsB,GAAuC;IACxE,MAAM,EAAE;QACN,KAAK,EAAE,mDAAmD;QAC1D,WAAW,EACT,4IAA4I;KAC/I;CACF,CAAA;AAED,IAAM,WAAW,GAAG;IACZ,IAAA,KAA+B,IAAA,2BAAiB,EACpD,mBAAW,CAAC,WAAW,CACK,EAFtB,MAAM,YAAA,EAAE,gBAAgB,sBAEF,CAAA;IAE9B,+CAA+C;IAC/C,OAAO,CACL;QACE,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI;QACzC,8BAAC,qBAAS,IAAC,WAAW,EAAE,gBAAgB,GAAI;QAC5C,8BAAC,0BAAM,eAAK,MAAM,EAAI;QACtB,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI,CACxC,CACJ,CAAA;AACH,CAAC,CAAA;AAEM,IAAM,WAAW,GAA4B,UAAC,EAKpD;QAJC,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,mBAAmB,yBAAA;IAEnB,IAAM,eAAe,gBAChB,IAAA,uBAAM,EAAC,EAAE,EAAE,8BAAsB,EAAE,OAAO,CAAC,CAC/C,CAAA;IAED,OAAO,CACL,8BAAC,mBAAM,IACL,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB;QAExC,8BAAC,WAAW,OAAG,CACR,CACV,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,WAAW,eAoBvB;AAED,kBAAe,mBAAW,CAAA"}
1
+ {"version":3,"file":"ArticlePage.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/ArticlePage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,gEAAkC;AAClC,mCAA+B;AAC/B,uEAA0D;AAC1D,sEAA4C;AAC5C,qDAAmD;AAEnD,0CAAyE;AACzE,sCAA8C;AAEjC,QAAA,sBAAsB,GAAuC;IACxE,MAAM,EAAE;QACN,KAAK,EAAE,mDAAmD;QAC1D,WAAW,EACT,4IAA4I;KAC/I;CACF,CAAA;AAED,IAAM,WAAW,GAAG;IACZ,IAAA,KAA+B,IAAA,2BAAiB,EACpD,mBAAW,CAAC,WAAW,CACK,EAFtB,MAAM,YAAA,EAAE,gBAAgB,sBAEF,CAAA;IAE9B,+CAA+C;IAC/C,OAAO,CACL;QACE,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI;QACzC,8BAAC,qBAAS,IACR,WAAW,EAAE,gBAAgB,EAC7B,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,GACrD;QACF,8BAAC,0BAAM,eAAK,MAAM,EAAI;QACtB,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI,CACxC,CACJ,CAAA;AACH,CAAC,CAAA;AAEM,IAAM,WAAW,GAA4B,UAAC,EAKpD;QAJC,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,mBAAmB,yBAAA;IAEnB,IAAM,eAAe,gBAChB,IAAA,uBAAM,EAAC,EAAE,EAAE,8BAAsB,EAAE,OAAO,CAAC,CAC/C,CAAA;IAED,OAAO,CACL,8BAAC,mBAAM,IACL,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB;QAExC,8BAAC,WAAW,OAAG,CACR,CACV,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,WAAW,eAoBvB;AAED,kBAAe,mBAAW,CAAA"}
package/dist/cjs/help-hub/pages/LandingPage.js CHANGED
@@ -53,7 +53,6 @@ var replaceDataWithMostReadedArticles = [
53
53
  exports.LandingPageContext = {
54
54
  header: {
55
55
  title: 'How can we help?',
56
- description: 'A short line or two to describe what this content is about',
57
56
  },
58
57
  contentViewList: {
59
58
  introduction: {
@@ -62,22 +61,25 @@ exports.LandingPageContext = {
62
61
  },
63
62
  mostReadArticles: replaceDataWithMostReadedArticles, // Update in context tests as well
64
63
  };
65
- var PageContent = function () {
66
- var _a = (0, context_1.useHelpHubContext)(types_1.ContextName.landingPage), header = _a.header, inputPlaceholder = _a.inputPlaceholder, contentViewList = _a.contentViewList, mostReadArticles = _a.mostReadArticles;
64
+ var PageContent = function (_a) {
65
+ var credentials = _a.credentials;
66
+ var _b = (0, context_1.useHelpHubContext)(types_1.ContextName.landingPage), header = _b.header, inputPlaceholder = _b.inputPlaceholder, contentViewList = _b.contentViewList, mostReadArticles = _b.mostReadArticles;
67
67
  // NOTE: Add LandingPage custom data logic here
68
68
  return (react_1.default.createElement(react_1.default.Fragment, null,
69
69
  react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } }),
70
70
  react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
71
- react_1.default.createElement(SearchBar_1.SearchBar, { placeholder: inputPlaceholder }),
71
+ react_1.default.createElement(SearchBar_1.SearchBar, { placeholder: inputPlaceholder, credentials: credentials }),
72
+ react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space100' } }),
72
73
  react_1.default.createElement(shared_components_1.Introduction, { title: contentViewList.introduction.title }),
73
74
  react_1.default.createElement(ContentListView_1.ContentListView, { data: mostReadArticles }),
74
75
  react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } })));
75
76
  };
77
+ // TODO: Create credentials provider
76
78
  var LandingPage = function (_a) {
77
- var context = _a.context, contextName = _a.contextName, customTheme = _a.customTheme, themeDropdownObject = _a.themeDropdownObject;
79
+ var context = _a.context, contextName = _a.contextName, customTheme = _a.customTheme, themeDropdownObject = _a.themeDropdownObject, credentials = _a.credentials;
78
80
  var enhancedContext = __assign({}, (0, lodash_assign_1.default)({}, exports.LandingPageContext, context));
79
81
  return (react_1.default.createElement(Templates_1.default, { context: enhancedContext, contextName: contextName, customTheme: customTheme, themeDropdownObject: themeDropdownObject },
80
- react_1.default.createElement(PageContent, null)));
82
+ react_1.default.createElement(PageContent, { credentials: credentials })));
81
83
  };
82
84
  exports.LandingPage = LandingPage;
83
85
  exports.default = exports.LandingPage;
package/dist/cjs/help-hub/pages/LandingPage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LandingPage.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/LandingPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,gEAAkC;AAClC,mCAA+B;AAC/B,uEAAwE;AACxE,sEAA4C;AAC5C,iEAA+D;AAC/D,qDAAmD;AAEnD,0CAAyE;AACzE,sCAA8C;AAE9C,IAAM,iCAAiC,GAAG;IACxC;QACE,KAAK,EAAE,mDAAmD;QAC1D,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,yCAAyC;QAChD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,yCAAyC;QAChD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,mCAAmC;QAC1C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,gDAAgD;QACvD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,uCAAuC;QAC9C,GAAG,EAAE,GAAG;KACT;CACF,CAAA;AAEY,QAAA,kBAAkB,GAAuC;IACpE,MAAM,EAAE;QACN,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,4DAA4D;KAC1E;IACD,eAAe,EAAE;QACf,YAAY,EAAE;YACZ,KAAK,EAAE,wBAAwB;SAChC;KACF;IACD,gBAAgB,EAAE,iCAAiC,EAAE,kCAAkC;CACxF,CAAA;AAED,IAAM,WAAW,GAAG;IACZ,IAAA,KAKF,IAAA,2BAAiB,EAAC,mBAAW,CAAC,WAAW,CAA8B,EAJzE,MAAM,YAAA,EACN,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,gBAAgB,sBACyD,CAAA;IAE3E,+CAA+C;IAC/C,OAAO,CACL;QACE,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI;QACzC,8BAAC,0BAAM,eAAK,MAAM,EAAI;QACtB,8BAAC,qBAAS,IAAC,WAAW,EAAE,gBAAgB,GAAI;QAC5C,8BAAC,gCAAY,IAAC,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,KAAK,GAAI;QAC3D,8BAAC,iCAAe,IAAC,IAAI,EAAE,gBAAgB,GAAoB;QAC3D,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI,CACxC,CACJ,CAAA;AACH,CAAC,CAAA;AAEM,IAAM,WAAW,GAA4B,UAAC,EAKpD;QAJC,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,mBAAmB,yBAAA;IAEnB,IAAM,eAAe,gBAChB,IAAA,uBAAM,EAAC,EAAE,EAAE,0BAAkB,EAAE,OAAO,CAAC,CAC3C,CAAA;IAED,OAAO,CACL,8BAAC,mBAAM,IACL,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB;QAExC,8BAAC,WAAW,OAAG,CACR,CACV,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,WAAW,eAoBvB;AAED,kBAAe,mBAAW,CAAA"}
1
+ {"version":3,"file":"LandingPage.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/LandingPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,gEAAkC;AAClC,mCAA+B;AAC/B,uEAAwE;AACxE,sEAA4C;AAC5C,iEAA+D;AAC/D,qDAAmD;AAEnD,0CAAyE;AACzE,sCAA8C;AAG9C,IAAM,iCAAiC,GAAG;IACxC;QACE,KAAK,EAAE,mDAAmD;QAC1D,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,yCAAyC;QAChD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,yCAAyC;QAChD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,mCAAmC;QAC1C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,gDAAgD;QACvD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,uCAAuC;QAC9C,GAAG,EAAE,GAAG;KACT;CACF,CAAA;AAEY,QAAA,kBAAkB,GAAuC;IACpE,MAAM,EAAE;QACN,KAAK,EAAE,kBAAkB;KAC1B;IACD,eAAe,EAAE;QACf,YAAY,EAAE;YACZ,KAAK,EAAE,wBAAwB;SAChC;KACF;IACD,gBAAgB,EAAE,iCAAiC,EAAE,kCAAkC;CACxF,CAAA;AAED,IAAM,WAAW,GAAkD,UAAC,EAEnE;QADC,WAAW,iBAAA;IAEL,IAAA,KAKF,IAAA,2BAAiB,EAAC,mBAAW,CAAC,WAAW,CAA8B,EAJzE,MAAM,YAAA,EACN,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,gBAAgB,sBACyD,CAAA;IAE3E,+CAA+C;IAC/C,OAAO,CACL;QACE,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI;QACzC,8BAAC,0BAAM,eAAK,MAAM,EAAI;QACtB,8BAAC,qBAAS,IAAC,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,GAAI;QACtE,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI;QACzC,8BAAC,gCAAY,IAAC,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,KAAK,GAAI;QAC3D,8BAAC,iCAAe,IAAC,IAAI,EAAE,gBAAgB,GAAoB;QAC3D,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI,CACxC,CACJ,CAAA;AACH,CAAC,CAAA;AAED,oCAAoC;AAE7B,IAAM,WAAW,GAA4B,UAAC,EAMpD;QALC,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,mBAAmB,yBAAA,EACnB,WAAW,iBAAA;IAEX,IAAM,eAAe,gBAChB,IAAA,uBAAM,EAAC,EAAE,EAAE,0BAAkB,EAAE,OAAO,CAAC,CAC3C,CAAA;IAED,OAAO,CACL,8BAAC,mBAAM,IACL,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB;QAExC,8BAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,CAClC,CACV,CAAA;AACH,CAAC,CAAA;AArBY,QAAA,WAAW,eAqBvB;AAED,kBAAe,mBAAW,CAAA"}
package/dist/cjs/help-hub/pages/ResultsPage.js CHANGED
@@ -114,7 +114,7 @@ var PageContent = function () {
114
114
  // NOTE: Add ResultsPage custom data logic here
115
115
  return (react_1.default.createElement(react_1.default.Fragment, null,
116
116
  react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } }),
117
- react_1.default.createElement(SearchBar_1.SearchBar, { placeholder: inputPlaceholder }),
117
+ react_1.default.createElement(SearchBar_1.SearchBar, { placeholder: inputPlaceholder, credentials: { apiKey: '', appId: '', indexName: '' } }),
118
118
  react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
119
119
  react_1.default.createElement(ContentListView_1.ContentListView, { data: searchResultArticles }),
120
120
  react_1.default.createElement(newskit_1.Block, { spaceStack: { xs: 'space070' } })));
package/dist/cjs/help-hub/pages/ResultsPage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResultsPage.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/ResultsPage.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ResultsPage.js","sourceRoot":"","sources":["../../../../src/help-hub/pages/ResultsPage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,gEAAkC;AAClC,mCAA+B;AAC/B,uEAA0D;AAC1D,sEAA4C;AAC5C,iEAA+D;AAC/D,qDAAmD;AAEnD,0CAAyE;AACzE,sCAA8C;AAE9C,IAAM,4BAA4B,GAAG;IACnC;QACE,KAAK,EACH,+EAA+E;QACjF,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,qCAAqC;QAC5C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,4CAA4C;QACnD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,qCAAqC;QAC5C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,gCAAgC;QACvC,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,qCAAqC;QAC5C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,uDAAuD;QAC9D,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,2DAA2D;QAClE,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,+CAA+C;QACtD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EACH,+EAA+E;QACjF,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,qCAAqC;QAC5C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,4CAA4C;QACnD,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,gCAAgC;QACvC,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,qCAAqC;QAC5C,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,uDAAuD;QAC9D,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,8BAA8B;QACrC,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,2DAA2D;QAClE,GAAG,EAAE,GAAG;KACT;IACD;QACE,KAAK,EAAE,+CAA+C;QACtD,GAAG,EAAE,GAAG;KACT;CACF,CAAA;AAEY,QAAA,kBAAkB,GAAuC;IACpE,MAAM,EAAE;QACN,KAAK,EAAE,gBAAgB;QACvB,WAAW,EAAE,+CAA+C;KAC7D;IACD,oBAAoB,EAAE,4BAA4B,EAAE,kCAAkC;CACvF,CAAA;AAED,IAAM,WAAW,GAAG;IACZ,IAAA,KAAqD,IAAA,2BAAiB,EAC1E,mBAAW,CAAC,WAAW,CACK,EAFtB,MAAM,YAAA,EAAE,gBAAgB,sBAAA,EAAE,oBAAoB,0BAExB,CAAA;IAE9B,+CAA+C;IAC/C,OAAO,CACL;QACE,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI;QACzC,8BAAC,qBAAS,IACR,WAAW,EAAE,gBAAgB,EAC7B,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,GACrD;QACF,8BAAC,0BAAM,eAAK,MAAM,EAAI;QACtB,8BAAC,iCAAe,IAAC,IAAI,EAAE,oBAAoB,GAAoB;QAE/D,8BAAC,eAAK,IAAC,UAAU,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAAI,CACxC,CACJ,CAAA;AACH,CAAC,CAAA;AAEM,IAAM,WAAW,GAA4B,UAAC,EAKpD;QAJC,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,mBAAmB,yBAAA;IAEnB,IAAM,eAAe,gBAChB,IAAA,uBAAM,EAAC,EAAE,EAAE,0BAAkB,EAAE,OAAO,CAAC,CAC3C,CAAA;IAED,OAAO,CACL,8BAAC,mBAAM,IACL,OAAO,EAAE,eAAe,EACxB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB;QAExC,8BAAC,WAAW,OAAG,CACR,CACV,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,WAAW,eAoBvB;AAED,kBAAe,mBAAW,CAAA"}
package/dist/cjs/help-hub/pages/types.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { UncompiledTheme } from 'newskit';
2
2
  import { ContextName, ContextOptions } from '../context';
3
3
  import { ThemeDropdownObject } from '@newskit-render/shared-components';
4
+ import { AlgoliaCredentials } from 'help-hub/types';
4
5
  export interface BasePageProps {
5
6
  customTheme?: UncompiledTheme;
6
7
  themeDropdownObject?: ThemeDropdownObject;
7
8
  context?: ContextOptions;
8
9
  contextName: ContextName;
10
+ credentials: AlgoliaCredentials;
9
11
  }