@google-psat/design-system 0.9.0-1

package/dist/components/menuBar/index.jsx

@@ -0,0 +1,141 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const i18n_1 = require("@google-psat/i18n");
+/**
+ * Internal dependencies.
+ */
+const utils_1 = require("./utils");
+const icons_1 = require("../../icons");
+const MenuBar = ({ disableReportDownload = true, downloadReport, menuData, extraClasses, scrollContainerId, }) => {
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(menuData[0].link);
+    const [isListenerDisabled, setIsListenerDisabled] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        let timeout;
+        const element = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.getElementById(selectedItem);
+        if (element) {
+            (_b = element.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(element, { behavior: 'smooth' });
+            timeout = setTimeout(() => {
+                setIsListenerDisabled(false);
+            }, 700);
+        }
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [selectedItem]);
+    (0, react_1.useEffect)(() => {
+        const scrollContainer = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document.getElementById(scrollContainerId);
+        const handleScroll = () => {
+            const firstItemLink = menuData[0].link;
+            const lastItemLink = menuData[menuData.length - 1].link;
+            if (isListenerDisabled || !scrollContainer) {
+                return;
+            }
+            menuData.forEach(({ link: id }) => {
+                const section = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document.getElementById(id);
+                const isAlmostBottom = scrollContainer.scrollHeight -
+                    scrollContainer.scrollTop -
+                    scrollContainer.clientHeight;
+                setSelectedItem((prev) => {
+                    if ((scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) === 0) {
+                        return firstItemLink;
+                    }
+                    else if (isAlmostBottom <= 1 && isAlmostBottom >= 0) {
+                        return lastItemLink;
+                    }
+                    else if (section && (0, utils_1.isElementInView)(section)) {
+                        return id;
+                    }
+                    return prev;
+                });
+            });
+        };
+        scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.addEventListener('scroll', handleScroll);
+        return () => {
+            scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.removeEventListener('scroll', handleScroll);
+        };
+    }, [menuData, isListenerDisabled, scrollContainerId]);
+    return (<nav data-testid="menu-bar" className={(0, classnames_1.default)('fixed right-0 flex flex-col gap-4 justify-center items-center z-10 w-10 p-2 bg-dynamic-grey dark:bg-charleston-green rounded-l-lg border border-bright-gray dark:border-quartz', extraClasses ? extraClasses : 'top-4')}>
+      {downloadReport && (<div className="relative">
+          <button disabled={disableReportDownload} className={(0, classnames_1.default)('flex items-center relative justify-center w-6 h-6 rounded-full cursor-pointer transition-all ease-in-out group', {
+                'bg-baby-blue-eyes': disableReportDownload,
+                'bg-ultramarine-blue': !disableReportDownload,
+            })} onClick={() => {
+                downloadReport();
+            }}>
+            <div className="absolute flex items-center justify-center right-6 w-max px-3 py-1 rounded invisible text-sm text-white bg-ultramarine-blue group-hover:visible transition-all ease-in-out">
+              {disableReportDownload
+                ? i18n_1.I18n.getMessage('waitForLD')
+                : i18n_1.I18n.getMessage('downloadReport')}
+              <div className="absolute w-2 h-2 bg-ultramarine-blue top-1/3 -right-1 transform rotate-45"/>
+            </div>
+            <icons_1.Export className="text-white"/>
+          </button>
+          <div className="absolute top-7 -left-2 border-b border-bright-gray dark:border-quartz w-9"/>
+        </div>)}
+
+      {menuData.map((item, index) => (<div key={index} className={(0, classnames_1.default)('relative w-3 h-3 rounded-full cursor-pointer hover:bg-baby-blue-eyes transition-all ease-in-out group', selectedItem === item.link
+                ? 'bg-ultramarine-blue'
+                : 'bg-bright-gray')} onClick={() => {
+                if (item.link !== selectedItem) {
+                    setIsListenerDisabled(true);
+                    setSelectedItem(item.link);
+                }
+            }}>
+          <div className="absolute -top-1/2 right-6 w-max px-3 py-1 rounded invisible text-sm text-white bg-ultramarine-blue group-hover:visible transition-all ease-in-out">
+            {item.name}
+            <div className="absolute w-2 h-2 bg-ultramarine-blue top-1/3 -right-1 transform rotate-45"/>
+          </div>
+        </div>))}
+    </nav>);
+};
+exports.default = MenuBar;
+//# sourceMappingURL=index.jsx.map

package/dist/components/menuBar/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/menuBar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/menuBar/utils/index.js

@@ -0,0 +1,24 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isElementInView = void 0;
+var isElementInView_1 = require("./isElementInView");
+Object.defineProperty(exports, "isElementInView", { enumerable: true, get: function () { return __importDefault(isElementInView_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/menuBar/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/menuBar/utils/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;;AAEH,qDAA+D;AAAtD,mIAAA,OAAO,OAAmB"}

package/dist/components/menuBar/utils/isElementInView.js

@@ -0,0 +1,39 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Determines if an HTMLElement hasn't been scrolled more than a 3/4th of its height out of viewport's 1/4th quarter.
+ * @param element - The HTMLElement to check for vertical centering.
+ * @returns True if the element is in view, false otherwise.
+ */
+function isElementInView(element) {
+    const quarterViewPortHeight = (window.innerHeight || document.documentElement.offsetHeight) / 4;
+    const quarterElementHeight = element.offsetHeight / 4;
+    const rect = element.getBoundingClientRect();
+    const elementTop = rect.top;
+    const elementBottom = rect.bottom;
+    if (elementTop > quarterViewPortHeight || elementBottom < 0) {
+        return false;
+    }
+    const cutoffLine = elementBottom - quarterElementHeight;
+    if (cutoffLine < 0) {
+        return false;
+    }
+    return true;
+}
+exports.default = isElementInView;
+//# sourceMappingURL=isElementInView.js.map

package/dist/components/menuBar/utils/isElementInView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementInView.js","sourceRoot":"","sources":["../../../../src/components/menuBar/utils/isElementInView.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;AAEH;;;;GAIG;AACH,SAAwB,eAAe,CAAC,OAAoB;IAC1D,MAAM,qBAAqB,GACzB,CAAC,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IACpE,MAAM,oBAAoB,GAAG,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC;IACtD,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAE7C,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;IAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IAElC,IAAI,UAAU,GAAG,qBAAqB,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;QAC5D,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,UAAU,GAAG,aAAa,GAAG,oBAAoB,CAAC;IAExD,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AApBD,kCAoBC"}

package/dist/components/messageBox/index.jsx

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const MessageBox = ({ headerText, bodyText }) => {
+    return (<div className="bg-hsl-light dark:hsl-dark py-4 my-3 px-3 leading-5 max-w-2xl">
+      <p className="text-warning-red dark:text-warning-orange font-bold">
+        {headerText}
+      </p>
+      <p className="text-raisin-black dark:text-bright-gray">{bodyText}</p>
+    </div>);
+};
+exports.default = MessageBox;
+//# sourceMappingURL=index.jsx.map

package/dist/components/messageBox/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/messageBox/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAM1B,MAAM,UAAU,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAmB,EAAE,EAAE;IAC/D,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,+DAA+D,CAC5E;MAAA,CAAC,CAAC,CAAC,SAAS,CAAC,qDAAqD,CAChE;QAAA,CAAC,UAAU,CACb;MAAA,EAAE,CAAC,CACH;MAAA,CAAC,CAAC,CAAC,SAAS,CAAC,yCAAyC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CACtE;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}

package/dist/components/messageBox/stories/messageBox.stories.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+/**
+ * Internal dependencies.
+ */
+const __1 = __importDefault(require(".."));
+const meta = {
+    title: 'DesignSystem/MessageBox',
+    component: __1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        headerText: 'No cookies found on this page',
+        bodyText: 'Please try reloading the page',
+    },
+};
+//# sourceMappingURL=messageBox.stories.jsx.map

package/dist/components/messageBox/stories/messageBox.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageBox.stories.jsx","sourceRoot":"","sources":["../../../../src/components/messageBox/stories/messageBox.stories.tsx"],"names":[],"mappings":";;;;;;AAoBA;;GAEG;AACH,2CAA4B;AAE5B,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,WAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B;IAC5C,IAAI,EAAE;QACJ,UAAU,EAAE,+BAA+B;QAC3C,QAAQ,EAAE,+BAA+B;KAC1C;CACF,CAAC"}

package/dist/components/progressBar/borderProgressbar.jsx

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const BorderProgressBar = ({ additionalStyles = '', }) => {
+    return (<div className={`${additionalStyles} flex justify-center flex-col gap-2 relative overflow-hidden mx-auto`}>
+      <div className="h-px w-full bg-gainsboro dark:bg-neutral-600 overflow-hidden">
+        <div className="h-px w-1/5 bg-royal-blue absolute animate-horizontal-spinner"></div>
+      </div>
+    </div>);
+};
+exports.default = BorderProgressBar;
+//# sourceMappingURL=borderProgressbar.jsx.map

package/dist/components/progressBar/borderProgressbar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"borderProgressbar.jsx","sourceRoot":"","sources":["../../../src/components/progressBar/borderProgressbar.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAK1B,MAAM,iBAAiB,GAAG,CAAC,EACzB,gBAAgB,GAAG,EAAE,GACE,EAAE,EAAE;IAC3B,OAAO,CACL,CAAC,GAAG,CACF,SAAS,CAAC,CAAC,GAAG,gBAAgB,sEAAsE,CAAC,CAErG;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,8DAA8D,CAC3E;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,8DAA8D,CAAC,EAAE,GAAG,CACrF;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}

package/dist/components/progressBar/index.jsx

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const ProgressBar = ({ additionalStyles = '' }) => {
+    return (<div data-testid="progress-bar" className={`${additionalStyles} flex justify-center flex-col gap-2 relative overflow-hidden`}>
+      <div className="mb-6 h-1 w-full bg-gainsboro dark:bg-neutral-600 overflow-hidden">
+        <div className="h-1 w-1/2 bg-royal-blue absolute animate-horizontal-spinner"></div>
+      </div>
+    </div>);
+};
+exports.default = ProgressBar;
+//# sourceMappingURL=index.jsx.map

package/dist/components/progressBar/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/progressBar/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAK1B,MAAM,WAAW,GAAG,CAAC,EAAE,gBAAgB,GAAG,EAAE,EAAoB,EAAE,EAAE;IAClE,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,cAAc,CAC1B,SAAS,CAAC,CAAC,GAAG,gBAAgB,8DAA8D,CAAC,CAE7F;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,kEAAkE,CAC/E;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,6DAA6D,CAAC,EAAE,GAAG,CACpF;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/dist/components/progressBar/stories/progressBar.stories.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+/**
+ * Internal dependencies.
+ */
+const __1 = __importDefault(require(".."));
+const meta = {
+    title: 'DesignSystem/ProgressBar',
+    component: __1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        additionalStyles: 'w-96 min-h-[20rem]',
+    },
+};
+//# sourceMappingURL=progressBar.stories.jsx.map

package/dist/components/progressBar/stories/progressBar.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressBar.stories.jsx","sourceRoot":"","sources":["../../../../src/components/progressBar/stories/progressBar.stories.tsx"],"names":[],"mappings":";;;;;;AAoBA;;GAEG;AACH,2CAA6B;AAE7B,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAEP,QAAA,OAAO,GAA0B;IAC5C,IAAI,EAAE;QACJ,gBAAgB,EAAE,oBAAoB;KACvC;CACF,CAAC"}

package/dist/components/refreshButton/index.jsx

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+const react_1 = __importDefault(require("react"));
+const icons_1 = require("../../icons");
+const RefreshButton = ({ onClick, title = 'Refresh' }) => {
+    return (<button onClick={onClick ? onClick : undefined} title={title} className={'flex items-center justify-center h-full text-center dark:text-mischka text-comet-black hover:text-comet-grey hover:dark:text-bright-gray active:dark:text-mischka active:text-comet-black pt-[1px]'}>
+      <icons_1.Refresh className="h-[13px] w-[13px]"/>
+    </button>);
+};
+exports.default = RefreshButton;
+//# sourceMappingURL=index.jsx.map

package/dist/components/refreshButton/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/refreshButton/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAC1B,uCAAqD;AAMrD,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,GAAG,SAAS,EAAsB,EAAE,EAAE;IAC3E,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,SAAS,CAAC,CACR,oMACF,CAAC,CAED;MAAA,CAAC,eAAW,CAAC,SAAS,CAAC,mBAAmB,EAC5C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,aAAa,CAAC"}

package/dist/components/searchInput/index.jsx

@@ -0,0 +1,86 @@
+"use strict";
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * External dependencies.
+ */
+const react_1 = __importStar(require("react"));
+const i18n_1 = require("@google-psat/i18n");
+/**
+ * Internal dependencies.
+ */
+const icons_1 = require("../../icons");
+const SearchInput = ({ value, onChange, clearInput }) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const inputContainerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const handleClick = (event) => {
+            var _a;
+            if (inputContainerRef.current) {
+                const isClickInside = inputContainerRef.current.contains(event.target);
+                if (!isClickInside) {
+                    setIsFocused(false);
+                }
+                else {
+                    setIsFocused(true);
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            }
+        };
+        (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleClick);
+        return () => {
+            var _a;
+            (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleClick);
+        };
+    }, []);
+    return (<div ref={inputContainerRef} className={`w-3/5 cursor-text bg-white dark:bg-charleston-green text-raisin-black dark:text-bright-gray border rounded flex justify-between items-center gap-1 mx-[3px] my-px px-[3px] pt-0.5 pb-px box-content text-xs ${isFocused
+            ? 'border-sapphire dark:border-baby-blue-eyes'
+            : 'border-chinese-silver dark:border-davys-grey hover:bg-eerie-black dark:hover:bg-outer-space'}`}>
+      <input ref={inputRef} type="text" className="h-[14px] w-full outline-none bg-transparent" placeholder={i18n_1.I18n.getMessage('search')} value={value} onChange={onChange} onFocus={() => setIsFocused(true)}/>
+
+      <button onClick={clearInput} className={`w-fit h-3 px-px scale-[1.6] hover:opacity-70 active:opacity-50 flex justify-center items-center ${value ? 'visible' : 'invisible'}`} title={i18n_1.I18n.getMessage('clearSearch')}>
+        <icons_1.PaddedCross />
+      </button>
+    </div>);
+};
+exports.default = SearchInput;
+//# sourceMappingURL=index.jsx.map

package/dist/components/searchInput/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/searchInput/index.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH;;GAEG;AACH,+CAA2D;AAC3D,4CAAyC;AAEzC;;GAEG;AACH,uCAA0C;AAQ1C,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAoB,EAAE,EAAE;IACxE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;;YACxC,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;gBAC9B,MAAM,aAAa,GAAG,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CACtD,KAAK,CAAC,MAAc,CACrB,CAAC;gBAEF,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnB,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACN,YAAY,CAAC,IAAI,CAAC,CAAC;oBACnB,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE7D,OAAO,GAAG,EAAE;;YACV,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAClE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,iBAAiB,CAAC,CACvB,SAAS,CAAC,CAAC,+MACT,SAAS;YACP,CAAC,CAAC,4CAA4C;YAC9C,CAAC,CAAC,6FACN,EAAE,CAAC,CAEH;MAAA,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,IAAI,CAAC,MAAM,CACX,SAAS,CAAC,6CAA6C,CACvD,WAAW,CAAC,CAAC,WAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAGpC;;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,SAAS,CAAC,CAAC,mGACT,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WACtB,EAAE,CAAC,CACH,KAAK,CAAC,CAAC,WAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAEtC;QAAA,CAAC,mBAAW,CAAC,AAAD,EACd;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}

package/dist/components/sidebar/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+__exportStar(require("./useSidebar"), exports);
+__exportStar(require("./useSidebar/constants"), exports);
+var sidebar_1 = require("./sidebar");
+Object.defineProperty(exports, "Sidebar", { enumerable: true, get: function () { return __importDefault(sidebar_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/sidebar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH,+CAA6B;AAC7B,yDAAuC;AACvC,qCAA+C;AAAtC,mHAAA,OAAO,OAAW"}