@google-psat/design-system 0.14.1 → 1.2.1

package/dist/components/multiSelectDropDown/index.jsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2025 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
+ */
+import React, { useState, useRef, useEffect, useMemo, useCallback, } from 'react';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+/**
+ * Internal dependencies
+ */
+import { ArrowDown } from '../../icons';
+const MultiSelectDropdown = ({ options, selected, onChange, placeholder = 'Default levels', specialValue = options[0].value, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [startAnimation, setStartAnimation] = useState(false);
+    const dropdownRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const handleClose = useCallback(() => {
+        document.body.style.overflow = isOpen ? 'auto' : 'hidden';
+        setStartAnimation(true);
+        timeoutRef.current = setTimeout(() => {
+            setIsOpen(!isOpen);
+            setStartAnimation(false);
+        }, 100);
+    }, [isOpen]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (wrapperRef.current &&
+                !wrapperRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const toggleOption = (value) => {
+        let newSelected = [];
+        const isSelected = selected.includes(value);
+        if (value === 'ALL') {
+            newSelected = isSelected ? [] : options.map((o) => o.value);
+        }
+        else {
+            if (isSelected) {
+                newSelected = selected.filter((v) => v !== value);
+            }
+            else {
+                newSelected = [...selected, value];
+            }
+            const allOption = options.find((o) => o.value === 'ALL');
+            const individualOptions = options.filter((o) => o.value !== 'ALL');
+            const allSelected = individualOptions.every((opt) => newSelected.includes(opt.value));
+            if (allOption) {
+                if (allSelected) {
+                    newSelected = options.map((o) => o.value);
+                }
+                else {
+                    newSelected = newSelected.filter((v) => v !== 'ALL');
+                }
+            }
+        }
+        onChange(newSelected);
+    };
+    const labelToDisplay = useMemo(() => {
+        if (selected.length === 0) {
+            return placeholder;
+        }
+        else {
+            if (selected.includes(specialValue)) {
+                return 'All levels';
+            }
+            else {
+                if (selected.length > 1) {
+                    return 'Custom levels';
+                }
+                else {
+                    return `${options.find((option) => option.value === selected[0])?.label} only`;
+                }
+            }
+        }
+    }, [options, placeholder, selected, specialValue]);
+    return (<div className="relative inline-block text-left text-sm" ref={dropdownRef}>
+      <button type="button" className="gap-1 inline-flex items-center px-1 rounded-md dark:bg-raisin-black text-raisin-black dark:text-bright-gray" onClick={(event) => {
+            setIsOpen((prev) => !prev);
+            setPosition({ x: event.clientX, y: event.clientY });
+        }}>
+        {labelToDisplay}
+        <ArrowDown />
+      </button>
+
+      {isOpen &&
+            createPortal(<div ref={wrapperRef} className={classNames('transition duration-100', startAnimation ? 'opacity-0' : 'opacity-100')} data-testid="column-menu">
+            <div className="absolute z-[100] text-raisin-black dark:text-bright-gray rounded-md backdrop-blur-2xl w-screen max-w-[13rem] p-1.5 mr-2 divide-y divide-neutral-300 dark:divide-neutral-500 max-h-[78vh] overflow-auto bg-stone-200 dark:bg-neutral-700 shadow-3xl" style={{
+                    left: 'min( calc( 100vw - 15rem),' + position.x + 'px )',
+                    top: position.y + 'px',
+                    border: '0.5px solid rgba(0, 0, 0, 0.20)',
+                }}>
+              <div>
+                <ul>
+                  {options.map((option) => (<li key={option.value} onClick={() => toggleOption(option.value)}>
+                      <button className="w-full text-xs rounded px-1 py-[3px] mb-1.5 flex items-center hover:bg-blueberry hover:text-white cursor-default" onClick={() => {
+                        toggleOption(option.value);
+                        handleClose();
+                    }}>
+                        <span className={classNames('mr-2 font-semibold', selected.includes(option.value)
+                        ? 'opacity-100'
+                        : 'opacity-0')}>
+                          ✓
+                        </span>
+                        <span>{option.label}</span>
+                      </button>
+                    </li>))}
+                </ul>
+              </div>
+            </div>
+
+            <div data-testid="column-menu-overlay" onClick={handleClose} className="absolute w-screen h-screen z-10 top-0 left-0"/>
+          </div>, document.body)}
+    </div>);
+};
+export default MultiSelectDropdown;
+//# sourceMappingURL=index.jsx.map

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

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

package/dist/components/pill/index.jsx

@@ -1,4 +1,3 @@
-"use strict";
 /*
  * Copyright 2024 Google LLC
  *
@@ -14,18 +13,14 @@
  * 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 });
 /**
  * External dependencies.
  */
-const react_1 = __importDefault(require("react"));
+import React from 'react';
 const Pill = ({ title }) => {
     return (<div className="h-fit p-1 dark:text-bright-gray border border-gray-400 dark:border-dark-gray-x11 rounded-full">
       {title}
     </div>);
 };
-exports.default = Pill;
+export default Pill;
 //# sourceMappingURL=index.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/pill/index.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;;;AAEH;;GAEG;AACH,kDAA0B;AAM1B,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAa,EAAE,EAAE;IACpC,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,+FAA+F,CAC5G;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/pill/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAa,EAAE,EAAE;IACpC,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,+FAA+F,CAC5G;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/pillToggle/index.jsx

@@ -1,8 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 /*
  * Copyright 2024 Google LLC
  *
@@ -21,25 +16,66 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * External dependencies.
  */
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const PillToggle = ({ firstOption, secondOption, pillToggle, setPillToggle, eeAnimatedTab, }) => {
-    return (<div className="w-80 h-8 rounded-full border border-gray-300 dark:border-quartz text-sm">
-      <button className={(0, classnames_1.default)('w-1/2 h-full rounded-full text-raisin-black dark:text-bright-gray', {
-            'bg-gray-200 dark:bg-gray-500 ': pillToggle === firstOption,
-            'bg-transparent': pillToggle !== firstOption,
-            'text-xs': eeAnimatedTab,
-        })} onClick={() => setPillToggle(firstOption)}>
-        {firstOption}
-      </button>
-      <button className={(0, classnames_1.default)('w-1/2 h-full rounded-full text-raisin-black dark:text-bright-gray', {
-            'bg-gray-200 dark:bg-gray-500': pillToggle === secondOption,
-            'bg-transparent': pillToggle !== secondOption,
-            'text-xs': eeAnimatedTab,
-        })} onClick={() => setPillToggle(secondOption)}>
-        {secondOption}
-      </button>
+import { getSessionStorage, updateSessionStorage } from '@google-psat/common';
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+const PillToggle = ({ options, pillToggle, setPillToggle, eeAnimatedTab, width = 'w-max', highlightOption, setHighlightOption, persistenceKey, }) => {
+    const defaultPillToggle = useRef(pillToggle);
+    useEffect(() => {
+        setPillToggle(null);
+    }, [setPillToggle]);
+    useEffect(() => {
+        if (pillToggle === highlightOption) {
+            setHighlightOption?.('');
+        }
+    }, [highlightOption, pillToggle, setHighlightOption]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        if (!persistenceKey) {
+            setPillToggle(defaultPillToggle.current);
+            setLoading(false);
+            return;
+        }
+        (async () => {
+            const sessionStorage = await getSessionStorage('pillToggle');
+            if (sessionStorage?.[persistenceKey]?.value) {
+                setPillToggle(sessionStorage[persistenceKey].value);
+            }
+            else {
+                setPillToggle(defaultPillToggle.current);
+            }
+            setLoading(false);
+        })();
+    }, [persistenceKey, setPillToggle]);
+    useEffect(() => {
+        if (!persistenceKey || loading) {
+            return;
+        }
+        (async () => {
+            await updateSessionStorage({
+                [persistenceKey]: {
+                    value: pillToggle,
+                },
+            }, 'pillToggle');
+        })();
+    }, [loading, persistenceKey, pillToggle]);
+    if (loading) {
+        return null;
+    }
+    return (<div className="h-8 border rounded-full w-max border-gray-300 dark:border-quartz text-sm">
+      {options.map((option, index) => {
+            return (<button key={option} style={{ zIndex: options.length - index }} className={classNames(`px-5 h-full border-r border-gray-silver dark:border-quartz text-raisin-black dark:text-bright-gray relative`, width, {
+                    'dark:bg-raisin-black bg-white': pillToggle === option,
+                    'bg-anti-flash-white dark:bg-gray-500 ': pillToggle !== option,
+                    'text-xs': eeAnimatedTab,
+                    'rounded-r-full -ml-[10px]': index > 0,
+                    'rounded-full': index === 0,
+                    underline: highlightOption === option,
+                })} onClick={() => setPillToggle(option)}>
+            {option}
+          </button>);
+        })}
     </div>);
 };
-exports.default = PillToggle;
+export default PillToggle;
 //# sourceMappingURL=index.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/pillToggle/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,4DAAoC;AACpC,kDAA0B;AAU1B,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,YAAY,EACZ,UAAU,EACV,aAAa,EACb,aAAa,GACG,EAAE,EAAE;IACpB,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,yEAAyE,CACtF;MAAA,CAAC,MAAM,CACL,SAAS,CAAC,CAAC,IAAA,oBAAU,EACnB,mEAAmE,EACnE;YACE,+BAA+B,EAAE,UAAU,KAAK,WAAW;YAC3D,gBAAgB,EAAE,UAAU,KAAK,WAAW;YAC5C,SAAS,EAAE,aAAa;SACzB,CACF,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAE1C;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CACL,SAAS,CAAC,CAAC,IAAA,oBAAU,EACnB,mEAAmE,EACnE;YACE,8BAA8B,EAAE,UAAU,KAAK,YAAY;YAC3D,gBAAgB,EAAE,UAAU,KAAK,YAAY;YAC7C,SAAS,EAAE,aAAa;SACzB,CACF,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAE3C;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/pillToggle/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAa3D,MAAM,UAAU,GAAG,CAAC,EAClB,OAAO,EACP,UAAU,EACV,aAAa,EACb,aAAa,EACb,KAAK,GAAG,OAAO,EACf,eAAe,EACf,kBAAkB,EAClB,cAAc,GACE,EAAE,EAAE;IACpB,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,eAAe,EAAE,CAAC;YACnC,kBAAkB,EAAE,CAAC,EAAE,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,aAAa,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzC,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QAED,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC,YAAY,CAAC,CAAC;YAE7D,IAAI,cAAc,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC;gBAC5C,aAAa,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC;YACtD,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC3C,CAAC;YAED,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,IAAI,OAAO,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,oBAAoB,CACxB;gBACE,CAAC,cAAc,CAAC,EAAE;oBAChB,KAAK,EAAE,UAAU;iBAClB;aACF,EACD,YAAY,CACb,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1C,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,0EAA0E,CACvF;MAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,MAAM,CAAC,CACZ,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAC1C,SAAS,CAAC,CAAC,UAAU,CACnB,6GAA6G,EAC7G,KAAK,EACL;oBACE,+BAA+B,EAAE,UAAU,KAAK,MAAM;oBACtD,uCAAuC,EAAE,UAAU,KAAK,MAAM;oBAC9D,SAAS,EAAE,aAAa;oBACxB,2BAA2B,EAAE,KAAK,GAAG,CAAC;oBACtC,cAAc,EAAE,KAAK,KAAK,CAAC;oBAC3B,SAAS,EAAE,eAAe,KAAK,MAAM;iBACtC,CACF,CAAC,CACF,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAErC;YAAA,CAAC,MAAM,CACT;UAAA,EAAE,MAAM,CAAC,CACV,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/progressBar/borderProgressbar.jsx

@@ -1,8 +1,3 @@
-"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
  *
@@ -21,7 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * External dependencies.
  */
-const react_1 = __importDefault(require("react"));
+import React from '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">
@@ -29,5 +24,5 @@ const BorderProgressBar = ({ additionalStyles = '', }) => {
       </div>
     </div>);
 };
-exports.default = BorderProgressBar;
+export default BorderProgressBar;
 //# sourceMappingURL=borderProgressbar.jsx.map

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

@@ -1 +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,6DAA6D,CAAC,EAAE,GAAG,CACpF;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}
+{"version":3,"file":"borderProgressbar.jsx","sourceRoot":"","sources":["../../../src/components/progressBar/borderProgressbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;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,6DAA6D,CAAC,EAAE,GAAG,CACpF;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/progressBar/index.jsx

@@ -1,8 +1,3 @@
-"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
  *
@@ -21,7 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * External dependencies.
  */
-const react_1 = __importDefault(require("react"));
+import React from 'react';
 const ProgressBar = ({ additionalStyles = '', barAdditionalStyles = 'bg-gainsboro dark:bg-neutral-600', }) => {
     return (<div data-testid="progress-bar" className={`${additionalStyles} flex justify-center flex-col gap-2 relative overflow-hidden`}>
       <div className={`${barAdditionalStyles} mb-6 h-1 w-full overflow-hidden`}>
@@ -29,5 +24,5 @@ const ProgressBar = ({ additionalStyles = '', barAdditionalStyles = 'bg-gainsbor
       </div>
     </div>);
 };
-exports.default = ProgressBar;
+export default ProgressBar;
 //# sourceMappingURL=index.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/progressBar/index.tsx"],"names":[],"mappings":";;;;;AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,kDAA0B;AAM1B,MAAM,WAAW,GAAG,CAAC,EACnB,gBAAgB,GAAG,EAAE,EACrB,mBAAmB,GAAG,kCAAkC,GACvC,EAAE,EAAE;IACrB,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,cAAc,CAC1B,SAAS,CAAC,CAAC,GAAG,gBAAgB,8DAA8D,CAAC,CAE7F;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,mBAAmB,kCAAkC,CAAC,CACvE;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,4DAA4D,CAAC,EAAE,GAAG,CACnF;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,WAAW,CAAC"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/progressBar/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,GAAG,CAAC,EACnB,gBAAgB,GAAG,EAAE,EACrB,mBAAmB,GAAG,kCAAkC,GACvC,EAAE,EAAE;IACrB,OAAO,CACL,CAAC,GAAG,CACF,WAAW,CAAC,cAAc,CAC1B,SAAS,CAAC,CAAC,GAAG,gBAAgB,8DAA8D,CAAC,CAE7F;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,mBAAmB,kCAAkC,CAAC,CACvE;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,4DAA4D,CAAC,EAAE,GAAG,CACnF;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/refreshButton/index.jsx

@@ -1,8 +1,3 @@
-"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
  *
@@ -21,12 +16,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * External dependencies.
  */
-const react_1 = __importDefault(require("react"));
-const icons_1 = require("../../icons");
+import React from 'react';
+import { Refresh as RefreshIcon } from '../../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]"/>
+    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 dark:hover:text-bright-gray dark:active:text-mischka active:text-comet-black pt-[1px]'}>
+      <RefreshIcon className="h-[13px] w-[13px]"/>
     </button>);
 };
-exports.default = RefreshButton;
+export default RefreshButton;
 //# sourceMappingURL=index.jsx.map

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

@@ -1 +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"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/refreshButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC;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,WAAW,CAAC,SAAS,CAAC,mBAAmB,EAC5C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/resizableTray/index.jsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024 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.
+ */
+import { Resizable } from 're-resizable';
+import React, { useEffect, useRef, useState } from 'react';
+import { getSessionStorage, updateSessionStorage } from '@google-psat/common';
+const STORAGE_KEY = 'persistent-tray';
+export const usePersistentTray = (trayId, defaultSize) => {
+    const [height, setHeight] = useState(typeof defaultSize?.height === 'number'
+        ? `${defaultSize.height}px`
+        : defaultSize?.height);
+    const storageLoaded = useRef(false);
+    useEffect(() => {
+        const initializeHeight = async () => {
+            if (storageLoaded.current || !trayId || !chrome?.storage) {
+                return;
+            }
+            const data = (await getSessionStorage(STORAGE_KEY)) || {};
+            if (data[trayId]?.height) {
+                setHeight(data[trayId].height);
+            }
+            storageLoaded.current = true;
+        };
+        initializeHeight();
+        return () => {
+            storageLoaded.current = false;
+        };
+    }, [trayId]);
+    useEffect(() => {
+        if (storageLoaded.current && trayId && chrome?.storage) {
+            updateSessionStorage({ [trayId]: { height } }, STORAGE_KEY);
+        }
+    }, [height, trayId]);
+    const onResizeStop = (_, __, divRef) => {
+        setHeight(() => `${divRef.clientHeight}px`);
+    };
+    return { height, setHeight, onResizeStop };
+};
+const ResizableTray = (props) => {
+    const { trayId, ...rest } = props;
+    const { height, onResizeStop, setHeight } = usePersistentTray(trayId, rest.defaultSize);
+    useEffect(() => {
+        if (rest.defaultSize?.height) {
+            setHeight(String(rest.defaultSize?.height));
+        }
+    }, [rest.defaultSize?.height, setHeight]);
+    if (!trayId) {
+        return <Resizable {...rest}/>;
+    }
+    return (<Resizable {...rest} onResizeStop={(_, __, divRef, delta) => {
+            onResizeStop?.(_, __, divRef, delta);
+            rest.onResizeStop?.(_, __, divRef, delta);
+        }} size={{
+            ...rest.size,
+            height: height || rest.defaultSize?.height,
+        }}/>);
+};
+export default ResizableTray;
+//# sourceMappingURL=index.jsx.map

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

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

package/dist/components/searchInput/index.jsx

@@ -1,4 +1,3 @@
-"use strict";
 /*
  * Copyright 2023 Google LLC
  *
@@ -14,47 +13,22 @@
  * 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");
+import React, { useEffect, useRef, useState } from 'react';
+import { I18n } from '@google-psat/i18n';
 /**
  * Internal dependencies.
  */
-const icons_1 = require("../../icons");
-const SearchInput = ({ value, onChange, clearInput, placeholder, }) => {
-    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;
+import { PaddedCross } from '../../icons';
+const SearchInput = ({ value, onChange, clearInput, placeholder, inputExtraClass, icon = <></>, // Default icon if not provided
+ }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const inputContainerRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
         const handleClick = (event) => {
-            var _a;
             if (inputContainerRef.current) {
                 const isClickInside = inputContainerRef.current.contains(event.target);
                 if (!isClickInside) {
@@ -62,25 +36,25 @@ const SearchInput = ({ value, onChange, clearInput, placeholder, }) => {
                 }
                 else {
                     setIsFocused(true);
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    inputRef.current?.focus();
                 }
             }
         };
-        (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.addEventListener('click', handleClick);
+        globalThis?.document?.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);
+            globalThis?.document?.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={placeholder || i18n_1.I18n.getMessage('search')} value={value} onChange={onChange} onFocus={() => setIsFocused(true)}/>
+    return (<div ref={inputContainerRef} className={`w-3/5 cursor-text bg-slate-gray dark:bg-dark-graphite text-raisin-black dark:text-bright-gray rounded flex justify-between items-center gap-1 mx-[3px] my-px px-[3px] pl-2 pt-0.5 pb-px box-content text-xs border border-gray-300 dark:border-quartz ${inputExtraClass} ${isFocused
+            ? 'border border-sapphire dark:border-baby-blue-eyes'
+            : 'hover:bg-eerie-black dark:hover:bg-[#FDFCFB1A]'}`}>
+      {icon}
+      <input role="textbox" ref={inputRef} type="text" className="h-[14px] w-full outline-hidden bg-transparent" placeholder={placeholder || 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 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.getMessage('clearSearch')}>
+        <PaddedCross />
       </button>
     </div>);
 };
-exports.default = SearchInput;
+export default SearchInput;
 //# sourceMappingURL=index.jsx.map

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

@@ -1 +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;AAS1C,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,GACM,EAAE,EAAE;IACrB,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,WAAW,IAAI,WAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CACtD,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"}
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../src/components/searchInput/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;GAEG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAY1C,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,eAAe,EACf,IAAI,GAAG,EAAE,GAAG,EAAE,+BAA+B;EAC5B,EAAE,EAAE;IACrB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,SAAS,CAAC,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,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,UAAU,EAAE,QAAQ,EAAE,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE7D,OAAO,GAAG,EAAE;YACV,UAAU,EAAE,QAAQ,EAAE,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,yPAAyP,eAAe,IACjR,SAAS;YACP,CAAC,CAAC,mDAAmD;YACrD,CAAC,CAAC,gDACN,EAAE,CAAC,CAEH;MAAA,CAAC,IAAI,CACL;MAAA,CAAC,KAAK,CACJ,IAAI,CAAC,SAAS,CACd,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,IAAI,CAAC,MAAM,CACX,SAAS,CAAC,+CAA+C,CACzD,WAAW,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CACtD,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,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAEtC;QAAA,CAAC,WAAW,CAAC,AAAD,EACd;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}