@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib/FilteredActionList/types.d.ts

@@ -0,0 +1,159 @@
+import type { Key } from 'react';
+import type { SxProp } from '../sx';
+import type { Merge } from '../utils/polymorphic';
+import type { Group } from '../ActionList/Group';
+import type { ActionListGroupProps } from '../deprecated';
+import type { AriaRole } from '../utils/types';
+export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement;
+export type ItemInput = Merge<React.ComponentPropsWithoutRef<'div'>, FilteredActionListItemProps> | ((Partial<FilteredActionListItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
+});
+export interface FilteredActionListItemProps extends SxProp {
+    /**
+     * Primary text which names an `Item`.
+     */
+    text?: string;
+    /**
+     * Secondary text which provides additional information about an `Item`.
+     */
+    description?: string;
+    /**
+     * Secondary text style variations. Usage is discretionary.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    descriptionVariant?: 'inline' | 'block';
+    /**
+     * Icon (or similar) positioned before `Item` text.
+     */
+    leadingVisual?: React.ElementType;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Icon (or similar) positioned after `Item` text.
+     */
+    trailingIcon?: React.ElementType;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Text positioned after `Item` text and optional trailing icon.
+     */
+    trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ElementType | React.ReactNode;
+    /**
+     * Style variations associated with various `Item` types.
+     *
+     * - `"default"` - An action `Item`.
+     * - `"danger"` - A destructive action `Item`.
+     */
+    variant?: 'default' | 'danger';
+    /**
+     * For `Item`s which can be selected, whether the `Item` is currently selected.
+     */
+    selected?: boolean;
+    /**
+     * Designates the group that an item belongs to.
+     */
+    groupId?: string;
+    /**
+     * Items that are disabled can not be clicked, selected, or navigated through.
+     */
+    disabled?: boolean;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onAction?: (item: FilteredActionListItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * An id associated with this item.  Should be unique between items
+     */
+    id?: number | string;
+    /**
+     * Node to be included inside the item before the text.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ARIA role describing the function of `List` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * An item to pass back in the `onAction` callback, meant as
+     */
+    item?: ItemInput;
+}
+/**
+ * Contract for props passed to the `List` component, when its `Item`s are collected in `Group`s.
+ */
+export interface GroupedListProps extends ListPropsBase {
+    /**
+     * A collection of `Group` props (except `items`), plus a unique group identifier
+     * and `Group`-level custom `Item` or `Group` renderers.
+     */
+    groupMetadata: ((Omit<ActionListGroupProps, 'items'> | Omit<Partial<ActionListGroupProps> & {
+        renderItem?: RenderItemFn;
+        renderGroup?: typeof Group;
+    }, 'items'>) & {
+        groupId: string;
+    })[];
+    /**
+     * A collection of `Item` props, plus associated group identifiers
+     * and `Item`-level custom `Item` renderers.
+     */
+    items: ((FilteredActionListItemProps | (Partial<FilteredActionListItemProps> & {
+        renderItem: RenderItemFn;
+    })) & {
+        groupId: string;
+    })[];
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+export interface ListPropsBase {
+    /**
+     * A collection of `Item` props and `Item`-level custom `Item` renderers.
+     */
+    items: ItemInput[];
+    /**
+     * The ARIA role describing the function of `List` component. `listbox` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * id to attach to the base DOM node of the list
+     */
+    id?: string;
+    /**
+     * aria-label to attach to the base DOM node of the list
+     */
+    'aria-label'?: string;
+    /**
+     * A `List`-level custom `Item` renderer. Every `Item` within this `List`
+     * without a `Group`-level or `Item`-level custom `Item` renderer will be
+     * rendered using this function component.
+     */
+    renderItem?: RenderItemFn;
+    /**
+     * A `List`-level custom `Group` renderer. Every `Group` within this `List`
+     * without a `Group`-level custom `Item` renderer will be rendered using
+     * this function component.
+     */
+    renderGroup?: typeof Group;
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
+     * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
+     */
+    variant?: 'inset' | 'horizontal-inset' | 'full';
+    /**
+     *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
+     */
+    selectionVariant?: 'single' | 'multiple' | 'radio';
+    /**
+     * Whether to display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/FilteredActionList/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/types.ts"],"names":[],"mappings":"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"}

package/lib/FilteredActionList/useAnnouncements.d.ts

@@ -1,3 +1,6 @@
-import type { FilteredActionListProps } from './FilteredActionListEntry';
-export declare const useAnnouncements: (items: FilteredActionListProps["items"], listContainerRef: React.RefObject<HTMLUListElement>, inputRef: React.RefObject<HTMLInputElement>, enabled?: boolean, loading?: boolean) => void;
+import type { FilteredActionListProps } from './index';
+export declare const useAnnouncements: (items: FilteredActionListProps["items"], listContainerRef: React.RefObject<HTMLUListElement>, inputRef: React.RefObject<HTMLInputElement>, enabled?: boolean, loading?: boolean, message?: {
+    title: string;
+    description: string;
+}) => void;
 //# sourceMappingURL=useAnnouncements.d.ts.map

package/lib/FilteredActionList/useAnnouncements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnnouncements.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/useAnnouncements.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,2BAA2B,CAAA;AAkCtE,eAAO,MAAM,gBAAgB,GAC3B,OAAO,uBAAuB,CAAC,OAAO,CAAC,EACvC,kBAAkB,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACnD,UAAU,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC3C,UAAS,OAAc,EACvB,UAAS,OAAe,SA2EzB,CAAA"}
+{"version":3,"file":"useAnnouncements.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/useAnnouncements.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,SAAS,CAAA;AAqCpD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,uBAAuB,CAAC,OAAO,CAAC,EACvC,kBAAkB,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EACnD,UAAU,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAC3C,UAAS,OAAc,EACvB,UAAS,OAAe,EACxB,UAAU;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAC,SA2G/C,CAAA"}

package/lib/FilteredActionList/useAnnouncements.js

@@ -3,6 +3,7 @@
 var reactCompilerRuntime = require('react-compiler-runtime');
 var liveRegionElement = require('@primer/live-region-element');
 var React = require('react');
+var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const delayMs = 500;
@@ -13,6 +14,8 @@ const useFirstRender = () => {
   }, []);
   return firstRender.current;
 };
+
+//TODO remove this when we remove usingRemoveActiveDescendant
 const getItemWithActiveDescendant = (listRef, items) => {
   const listElement = listRef.current;
   const activeItemElement = listElement === null || listElement === void 0 ? void 0 : listElement.querySelector('[data-is-active-descendant]');
@@ -28,10 +31,13 @@ const getItemWithActiveDescendant = (listRef, items) => {
     selected
   };
 };
-const useAnnouncements = (items, listContainerRef, inputRef, t0, t1) => {
-  const $ = reactCompilerRuntime.c(20);
+//TODO remove this when we remove usingRemoveActiveDescendant
+
+const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) => {
+  const $ = reactCompilerRuntime.c(33);
   const enabled = t0 === undefined ? true : t0;
   const loading = t1 === undefined ? false : t1;
+  const usingRemoveActiveDescendant = useFeatureFlag.useFeatureFlag("primer_react_select_panel_remove_active_descendant");
   let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = document.querySelector("live-region");
@@ -41,109 +47,150 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1) => {
   }
   const liveRegion = t2;
   let t3;
-  if ($[1] !== enabled) {
-    t3 = (...t4) => {
-      const args = t4;
+  if ($[1] !== items) {
+    t3 = items.filter(_temp);
+    $[1] = items;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const selectedItems = t3.length;
+  let t4;
+  if ($[3] !== enabled) {
+    t4 = (...t5) => {
+      const args = t5;
       if (enabled) {
         return liveRegionElement.announce(...args);
       }
     };
-    $[1] = enabled;
-    $[2] = t3;
+    $[3] = enabled;
+    $[4] = t4;
   } else {
-    t3 = $[2];
+    t4 = $[4];
   }
-  const announce = t3;
-  let t4;
-  if ($[3] !== announce || $[4] !== inputRef.current || $[5] !== items || $[6] !== listContainerRef) {
-    t4 = function announceInitialFocus() {
+  const announce = t4;
+  let t5;
+  let t6;
+  if ($[5] !== announce || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
+    t5 = function announceInitialFocus() {
       const focusHandler = () => {
-        window.requestAnimationFrame(() => {
-          const activeItem = getItemWithActiveDescendant(listContainerRef, items);
-          if (!activeItem) {
-            return;
-          }
-          const {
-            index,
-            text,
-            selected
-          } = activeItem;
-          const announcementText = ["Focus on filter text box and list of items", `Focused item: ${text}`, `${selected ? "selected" : "not selected"}`, `${index + 1} of ${items.length}`].join(", ");
+        if (usingRemoveActiveDescendant) {
+          const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
           announce(announcementText, {
             delayMs,
             from: liveRegion ? liveRegion : undefined
           });
-        });
+        } else {
+          window.requestAnimationFrame(() => {
+            const activeItem = getItemWithActiveDescendant(listContainerRef, items);
+            if (!activeItem) {
+              return;
+            }
+            const {
+              index,
+              text,
+              selected
+            } = activeItem;
+            const announcementText_0 = ["Focus on filter text box and list of items", `Focused item: ${text}`, `${selected ? "selected" : "not selected"}`, `${index + 1} of ${items.length}`].join(", ");
+            announce(announcementText_0, {
+              delayMs,
+              from: liveRegion ? liveRegion : undefined
+            });
+          });
+        }
       };
       const inputElement = inputRef.current;
       inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener("focus", focusHandler);
       return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
     };
-    $[3] = announce;
-    $[4] = inputRef.current;
-    $[5] = items;
-    $[6] = listContainerRef;
-    $[7] = t4;
+    t6 = [listContainerRef, inputRef, items, liveRegion, announce, usingRemoveActiveDescendant, selectedItems];
+    $[5] = announce;
+    $[6] = inputRef;
+    $[7] = items;
+    $[8] = listContainerRef;
+    $[9] = selectedItems;
+    $[10] = usingRemoveActiveDescendant;
+    $[11] = t5;
+    $[12] = t6;
   } else {
-    t4 = $[7];
+    t5 = $[11];
+    t6 = $[12];
   }
-  let t5;
-  if ($[8] !== announce || $[9] !== inputRef || $[10] !== items || $[11] !== listContainerRef) {
-    t5 = [listContainerRef, inputRef, items, liveRegion, announce];
-    $[8] = announce;
-    $[9] = inputRef;
-    $[10] = items;
-    $[11] = listContainerRef;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  React.useEffect(t4, t5);
+  React.useEffect(t5, t6);
   const isFirstRender = useFirstRender();
-  let t6;
   let t7;
-  if ($[13] !== announce || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading) {
-    t6 = function announceListUpdates() {
+  if ($[13] !== announce || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading || $[18] !== (message === null || message === void 0 ? void 0 : message.description) || $[19] !== (message === null || message === void 0 ? void 0 : message.title) || $[20] !== selectedItems || $[21] !== usingRemoveActiveDescendant) {
+    t7 = function announceListUpdates() {
       if (isFirstRender) {
         return;
       }
       liveRegion === null || liveRegion === void 0 ? void 0 : liveRegion.clear();
       if (items.length === 0 && !loading) {
-        announce("No matching items.", {
+        announce(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, {
           delayMs
         });
         return;
       }
-      window.requestAnimationFrame(() => {
-        const activeItem_0 = getItemWithActiveDescendant(listContainerRef, items);
-        if (!activeItem_0) {
-          return;
-        }
-        const {
-          index: index_0,
-          text: text_0,
-          selected: selected_0
-        } = activeItem_0;
-        const announcementText_0 = ["List updated", `Focused item: ${text_0}`, `${selected_0 ? "selected" : "not selected"}`, `${index_0 + 1} of ${items.length}`].join(", ");
-        announce(announcementText_0, {
+      if (usingRemoveActiveDescendant) {
+        const announcementText_1 = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+        announce(announcementText_1, {
           delayMs,
           from: liveRegion ? liveRegion : undefined
         });
-      });
+      } else {
+        window.requestAnimationFrame(() => {
+          const activeItem_0 = getItemWithActiveDescendant(listContainerRef, items);
+          if (!activeItem_0) {
+            return;
+          }
+          const {
+            index: index_0,
+            text: text_0,
+            selected: selected_0
+          } = activeItem_0;
+          const announcementText_2 = ["List updated", `Focused item: ${text_0}`, `${selected_0 ? "selected" : "not selected"}`, `${index_0 + 1} of ${items.length}`].join(", ");
+          announce(announcementText_2, {
+            delayMs,
+            from: liveRegion ? liveRegion : undefined
+          });
+        });
+      }
     };
-    t7 = [announce, isFirstRender, items, listContainerRef, liveRegion, loading];
     $[13] = announce;
     $[14] = isFirstRender;
     $[15] = items;
     $[16] = listContainerRef;
     $[17] = loading;
-    $[18] = t6;
-    $[19] = t7;
+    $[18] = message === null || message === void 0 ? void 0 : message.description;
+    $[19] = message === null || message === void 0 ? void 0 : message.title;
+    $[20] = selectedItems;
+    $[21] = usingRemoveActiveDescendant;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  const t8 = message === null || message === void 0 ? void 0 : message.title;
+  const t9 = message === null || message === void 0 ? void 0 : message.description;
+  let t10;
+  if ($[23] !== announce || $[24] !== isFirstRender || $[25] !== items || $[26] !== listContainerRef || $[27] !== loading || $[28] !== selectedItems || $[29] !== t8 || $[30] !== t9 || $[31] !== usingRemoveActiveDescendant) {
+    t10 = [announce, isFirstRender, items, listContainerRef, liveRegion, usingRemoveActiveDescendant, t8, t9, loading, selectedItems];
+    $[23] = announce;
+    $[24] = isFirstRender;
+    $[25] = items;
+    $[26] = listContainerRef;
+    $[27] = loading;
+    $[28] = selectedItems;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = usingRemoveActiveDescendant;
+    $[32] = t10;
   } else {
-    t6 = $[18];
-    t7 = $[19];
+    t10 = $[32];
   }
-  React.useEffect(t6, t7);
+  React.useEffect(t7, t10);
 };
+function _temp(item) {
+  return item.selected;
+}
 
 exports.useAnnouncements = useAnnouncements;

package/lib/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAavC,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAA;AASvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;;eAnBG,KAAK,CAAC,SAAS;IAC1B;;OAEG;eACQ,OAAO;IAClB;;OAEG;SACE,MAAM;IACX;;OAEG;eACQ,OAAO;IAClB;;;OAGG;aACM,YAAY,GAAG,UAAU;gBACtB,MAAM;;;;;;;;;;;;;;;;;AA0LpB,wBAKE"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../src/FormControl/FormControl.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAA;AASvD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;;eAnBG,KAAK,CAAC,SAAS;IAC1B;;OAEG;eACQ,OAAO;IAClB;;OAEG;SACE,MAAM;IACX;;OAEG;eACQ,OAAO;IAClB;;;OAGG;aACM,YAAY,GAAG,UAAU;gBACtB,MAAM;;;;;;;;;;;;;;;;;AA6KpB,wBAKE"}

package/lib/FormControl/FormControl.js

@@ -14,7 +14,7 @@ var _FormControlValidation = require('./_FormControlValidation.js');
 var _FormControlContext = require('./_FormControlContext.js');
 var warning = require('../utils/warning.js');
 var FormControl_module = require('./FormControl.module.css.js');
-var defaultSxProp = require('../utils/defaultSxProp.js');
+var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 var CheckboxOrRadioGroupContext = require('../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js');
 var Autocomplete = require('../Autocomplete/Autocomplete.js');
@@ -24,7 +24,6 @@ var TextInput = require('../TextInput/TextInput.js');
 var TextInputWithTokens = require('../TextInputWithTokens/TextInputWithTokens.js');
 var Textarea = require('../Textarea/Textarea.js');
 var SelectPanel = require('../SelectPanel/SelectPanel.js');
-var Box = require('../Box/Box.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -168,23 +167,15 @@ const FormControl = /*#__PURE__*/React__default.default.forwardRef((t0, ref) =>
   } else {
     t10 = $[23];
   }
-  const t11 = isChoiceInput || layout === "horizontal" ? sx !== defaultSxProp.defaultSxProp ? /*#__PURE__*/jsxRuntime.jsx(Box, {
+  const t11 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
     ref: ref,
     "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
     sx: sx,
     className: clsx.clsx(className, FormControl_module.ControlHorizontalLayout),
     children: InputChildren
-  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-    ref: ref,
-    "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
-    className: clsx.clsx(className, FormControl_module.ControlHorizontalLayout),
-    children: InputChildren
-  }) : /*#__PURE__*/jsxRuntime.jsxs(Box, {
+  }) : /*#__PURE__*/jsxRuntime.jsxs(BoxWithFallback.BoxWithFallback, {
     ref: ref,
     "data-has-label": !isLabelHidden ? "" : undefined,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
     sx: sx,
     className: clsx.clsx(className, FormControl_module.ControlVerticalLayout),
     children: [slots.label, /*#__PURE__*/React__default.default.isValidElement(InputComponent) && /*#__PURE__*/React__default.default.cloneElement(InputComponent, Object.assign({

package/lib/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAC5F,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAC,CAAA;AACrF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;;;;;AAqErH,wBAA0E"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAG/F,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAC5F,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAC,CAAA;AACrF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;;;;;AAyCrH,wBAA0E"}