@1e99/components 0.1.2 → 0.1.4

package/dist/index.js

@@ -17,10 +17,10 @@ function GoogleSignInButton({ label, ...buttonProps }) {
 }
 
 // src/components/selector/selector.tsx
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { LuChevronDown } from "react-icons/lu";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var standardTriggerClassName = "flex w-full cursor-pointer list-none select-none items-center justify-between rounded-control border border-border-subtle py-control-y text-label font-semibold text-content-primary shadow-card transition-colors duration-200 ease-brand hover:bg-brand-cloud focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden";
+var standardTriggerClassName = "flex w-full cursor-pointer select-none items-center justify-between rounded-control border border-border-subtle py-control-y text-label font-semibold text-content-primary shadow-card transition-colors duration-200 ease-brand hover:bg-brand-cloud focus-visible:outline-none focus-visible:shadow-focus";
 var optionClassName = "flex min-h-12 w-full select-none items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:bg-brand-cloud hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus";
 function getNavigationLayout(density) {
   if (density === "compact") {
@@ -36,22 +36,36 @@ function getNavigationLayout(density) {
 }
 function SelectorTrigger({
   densityClassName,
+  isOpen,
+  onClick,
+  optionListId,
   renderTrigger,
   selectedOption,
   triggerAriaLabel,
   value
 }) {
   const triggerContent = renderTrigger?.({ selectedOption, value }) ?? selectedOption?.label ?? value;
-  return /* @__PURE__ */ jsxs2("summary", { "aria-label": triggerAriaLabel, className: `${standardTriggerClassName} ${densityClassName}`, children: [
-    /* @__PURE__ */ jsx2("span", { children: triggerContent }),
-    /* @__PURE__ */ jsx2(
-      LuChevronDown,
-      {
-        "aria-hidden": "true",
-        className: "selector-disclosure-arrow size-5 shrink-0 text-content-secondary transition-transform duration-200 ease-brand motion-reduce:transition-none group-open:rotate-180"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      "aria-controls": optionListId,
+      "aria-expanded": isOpen,
+      "aria-label": triggerAriaLabel,
+      className: `${standardTriggerClassName} ${densityClassName}`,
+      onClick,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx2("span", { children: triggerContent }),
+        /* @__PURE__ */ jsx2(
+          LuChevronDown,
+          {
+            "aria-hidden": "true",
+            className: `selector-disclosure-arrow size-5 shrink-0 text-content-secondary transition-transform duration-200 ease-brand motion-reduce:transition-none ${isOpen ? "rotate-180" : ""}`
+          }
+        )
+      ]
+    }
+  );
 }
 function Selector({
   density = "standard",
@@ -64,74 +78,87 @@ function Selector({
   value,
   whiteSurface = false
 }) {
-  const [selectorElement, setSelectorElement] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectionRequest, setSelectionRequest] = useState(null);
+  const optionListId = useId();
+  const notifiedSelectionReference = useRef(null);
+  const onValueChangeReference = useRef(onValueChange);
+  const selectorReference = useRef(null);
   const selectedOption = options.find((option) => option.value === value);
   const layout = getNavigationLayout(density);
   const surfaceClassName = whiteSurface ? "bg-white" : "bg-surface-raised";
   useEffect(() => {
-    if (!selectorElement) {
+    if (!isOpen) {
       return;
     }
     const closeWhenPointerStartsOutside = (event) => {
-      if (!selectorElement.open || !(event.target instanceof Node) || selectorElement.contains(event.target)) {
+      const selectorElement = selectorReference.current;
+      if (!selectorElement || !(event.target instanceof Node) || selectorElement.contains(event.target)) {
         return;
       }
-      selectorElement.removeAttribute("open");
+      setIsOpen(false);
     };
     document.addEventListener("pointerdown", closeWhenPointerStartsOutside, true);
     return () => {
       document.removeEventListener("pointerdown", closeWhenPointerStartsOutside, true);
     };
-  }, [selectorElement]);
-  const selectOption = useCallback((option) => {
-    selectorElement?.removeAttribute("open");
-    onValueChange(option.value);
-  }, [onValueChange, selectorElement]);
-  return /* @__PURE__ */ jsxs2(
-    "details",
-    {
-      ref: setSelectorElement,
-      className: `selector-disclosure group relative ${layout.wrapper}`,
-      children: [
-        /* @__PURE__ */ jsx2(
-          SelectorTrigger,
-          {
-            densityClassName: layout.trigger,
-            renderTrigger,
-            selectedOption,
-            triggerAriaLabel,
-            value
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "ul",
-          {
-            "aria-label": label,
-            className: `mt-2 w-full overflow-hidden rounded-control border border-border-subtle ${surfaceClassName} p-1 shadow-float md:absolute md:top-full md:right-0 md:z-60 md:min-w-44`,
-            children: options.map((option) => {
-              const isSelected = option.value === value;
-              const select = () => selectOption(option);
-              const optionContent = renderOption?.({ isSelected, option, select }) ?? option.label;
-              return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
-                "button",
-                {
-                  "aria-pressed": isSelected,
-                  className: `${optionClassName} text-left ${isSelected ? "bg-brand-cloud text-content-primary" : ""}`,
-                  onClick: select,
-                  type: "button",
-                  children: optionContent
-                }
-              ) }, option.value);
-            })
-          }
-        )
-      ]
+  }, [isOpen]);
+  useEffect(() => {
+    onValueChangeReference.current = onValueChange;
+  }, [onValueChange]);
+  useEffect(() => {
+    if (isOpen || selectionRequest === null || selectionRequest === notifiedSelectionReference.current) {
+      return;
     }
-  );
+    notifiedSelectionReference.current = selectionRequest;
+    onValueChangeReference.current(selectionRequest.value);
+  }, [isOpen, selectionRequest]);
+  const selectOption = (nextValue) => {
+    setIsOpen(false);
+    setSelectionRequest({ value: nextValue });
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref: selectorReference, className: `selector-disclosure relative ${layout.wrapper}`, children: [
+    /* @__PURE__ */ jsx2(
+      SelectorTrigger,
+      {
+        densityClassName: layout.trigger,
+        isOpen,
+        onClick: () => setIsOpen((currentOpen) => !currentOpen),
+        optionListId,
+        renderTrigger,
+        selectedOption,
+        triggerAriaLabel,
+        value
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx2(
+      "ul",
+      {
+        "aria-label": label,
+        className: `mt-2 w-full overflow-hidden rounded-control border border-border-subtle ${surfaceClassName} p-1 shadow-float md:absolute md:top-full md:right-0 md:z-60 md:min-w-44`,
+        id: optionListId,
+        children: options.map((option) => {
+          const isSelected = option.value === value;
+          const select = () => selectOption(option.value);
+          const optionContent = renderOption?.({ isSelected, option, select }) ?? option.label;
+          return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              "aria-pressed": isSelected,
+              className: `${optionClassName} text-left ${isSelected ? "bg-brand-cloud text-content-primary" : ""}`,
+              onClick: select,
+              type: "button",
+              children: optionContent
+            }
+          ) }, option.value);
+        })
+      }
+    ) : null
+  ] });
 }
 
 // src/components/navbar/navbar.tsx
-import { Fragment } from "react";
+import { Fragment, useId as useId2 } from "react";
 import { LuMenu } from "react-icons/lu";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var baseLinkClassName = "text-label text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:rounded-control focus-visible:outline-none focus-visible:shadow-focus";
@@ -149,6 +176,9 @@ function Navbar({
   renderLink,
   width = "content"
 }) {
+  const mobileNavigationReference = useId2();
+  const mobileNavigationId = `navbar-mobile-navigation-${mobileNavigationReference}`;
+  const mobileNavigationAnchorName = `--navbar-mobile-menu-trigger-${mobileNavigationReference.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
   const linkClassName = [
     baseLinkClassName,
     linkWeight === "bold" ? "font-bold" : "font-semibold",
@@ -173,12 +203,17 @@ function Navbar({
             /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: brand }),
             /* @__PURE__ */ jsx3("nav", { "aria-label": navigationLabel, className: "hidden items-center gap-6 lg:flex", children: renderLinks(linkClassName) }),
             actions,
-            mobileNavigation ? /* @__PURE__ */ jsxs3("details", { className: "relative md:hidden", children: [
+            mobileNavigation ? /* @__PURE__ */ jsxs3("div", { className: "relative md:hidden", children: [
               /* @__PURE__ */ jsxs3(
-                "summary",
+                "button",
                 {
+                  "aria-controls": mobileNavigationId,
                   "aria-label": mobileNavigation.menuLabel,
-                  className: "flex size-12 cursor-pointer list-none items-center justify-center rounded-control bg-action-primary text-content-inverse shadow-card transition-[translate,scale,background-color] duration-200 ease-brand active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden",
+                  className: "flex size-12 cursor-pointer items-center justify-center rounded-control bg-action-primary text-content-inverse shadow-card transition-[translate,scale,background-color] duration-200 ease-brand active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus",
+                  popoverTarget: mobileNavigationId,
+                  popoverTargetAction: "toggle",
+                  style: { anchorName: mobileNavigationAnchorName },
+                  type: "button",
                   children: [
                     /* @__PURE__ */ jsx3("span", { className: "sr-only", children: mobileNavigation.menuLabel }),
                     /* @__PURE__ */ jsx3(LuMenu, { "aria-hidden": "true", className: "size-6" })
@@ -189,7 +224,10 @@ function Navbar({
                 "nav",
                 {
                   "aria-label": mobileNavigation.navigationLabel,
-                  className: "absolute top-14 right-0 w-72 rounded-card border border-border-subtle bg-surface-raised p-3 shadow-float",
+                  className: "fixed top-[4.5rem] right-[1.25rem] m-0 w-72 rounded-card border border-border-subtle bg-surface-raised p-3 shadow-float [@supports(position-anchor:--navbar-mobile-menu-trigger)]:absolute [@supports(position-anchor:--navbar-mobile-menu-trigger)]:top-[calc(anchor(bottom)+0.5rem)] [@supports(position-anchor:--navbar-mobile-menu-trigger)]:right-auto [@supports(position-anchor:--navbar-mobile-menu-trigger)]:left-[anchor(right)] [@supports(position-anchor:--navbar-mobile-menu-trigger)]:-translate-x-full",
+                  id: mobileNavigationId,
+                  popover: "auto",
+                  style: { positionAnchor: mobileNavigationAnchorName },
                   children: [
                     renderLinks(mobileLinkClassName),
                     mobileNavigation.actions ? /* @__PURE__ */ jsx3("div", { className: "mt-2 space-y-3 border-t border-border-subtle pt-3", children: mobileNavigation.actions }) : null

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/google-sign-in-button/google-sign-in-button.tsx","../src/components/selector/selector.tsx","../src/components/navbar/navbar.tsx"],"sourcesContent":["import type {ButtonHTMLAttributes, ReactNode} from 'react';\nimport {FcGoogle} from 'react-icons/fc';\n\nexport type GoogleSignInButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'className' | 'type'\n> & {\n  label: ReactNode;\n};\n\nconst buttonClassName =\n  'inline-flex min-h-12 w-full cursor-pointer items-center justify-center gap-3 rounded-control border border-border-subtle bg-surface-raised px-control-x py-control-y text-label font-semibold whitespace-nowrap text-content-primary shadow-card transition-[translate,scale,background-color] duration-200 ease-brand hover:-translate-y-0.5 hover:bg-brand-cloud active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus disabled:cursor-wait disabled:opacity-70 motion-reduce:transform-none';\n\nexport function GoogleSignInButton(\n    {label, ...buttonProps}: GoogleSignInButtonProps,\n) {\n  return (\n    <button {...buttonProps} className={buttonClassName} type=\"button\">\n      <FcGoogle\n        aria-hidden=\"true\"\n        className=\"size-5 shrink-0\"\n        data-testid=\"google-mark\"\n      />\n      {label}\n    </button>\n  );\n}\n","import {type ReactNode, useCallback, useEffect, useState} from 'react';\nimport {LuChevronDown} from 'react-icons/lu';\n\nexport type SelectorOption = {\n  label: ReactNode;\n  value: string;\n};\n\nexport type SelectorDensity = 'compact' | 'compact-mobile' | 'standard';\n\nexport type SelectorRenderOptionContext<TOption extends SelectorOption> = {\n  isSelected: boolean;\n  option: TOption;\n  select: () => void;\n};\n\nexport type SelectorRenderTriggerContext<TOption extends SelectorOption> = {\n  selectedOption: TOption | undefined;\n  value: string;\n};\n\ntype SelectorBaseProps = {\n  label: string;\n  triggerAriaLabel?: string;\n  value: string;\n};\n\nexport type SelectorProps<TOption extends SelectorOption = SelectorOption> =\n  SelectorBaseProps & {\n    density?: SelectorDensity;\n    onValueChange: (value: string) => void;\n    options: readonly TOption[];\n    renderOption?: (context: SelectorRenderOptionContext<TOption>) => ReactNode;\n    renderTrigger?: (\n      context: SelectorRenderTriggerContext<TOption>,\n    ) => ReactNode;\n    whiteSurface?: boolean;\n  };\n\nconst standardTriggerClassName =\n  'flex w-full cursor-pointer list-none select-none items-center justify-between rounded-control border border-border-subtle py-control-y text-label font-semibold text-content-primary shadow-card transition-colors duration-200 ease-brand hover:bg-brand-cloud focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden';\n\nconst optionClassName =\n  'flex min-h-12 w-full select-none items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:bg-brand-cloud hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus';\n\nfunction getNavigationLayout(density: SelectorDensity) {\n  if (density === 'compact') {\n    return {trigger: 'h-12 gap-2', wrapper: 'w-auto'};\n  }\n\n  if (density === 'compact-mobile') {\n    return {\n      trigger: 'h-12 gap-2 px-3 md:gap-4 md:px-4 md:min-w-32',\n      wrapper: 'w-auto',\n    };\n  }\n\n  return {trigger: 'min-h-12 gap-4 px-4 md:min-w-32', wrapper: 'w-full md:w-auto'};\n}\n\nfunction SelectorTrigger<TOption extends SelectorOption>({\n  densityClassName,\n  renderTrigger,\n  selectedOption,\n  triggerAriaLabel,\n  value,\n}: {\n  densityClassName: string;\n  renderTrigger?: (context: SelectorRenderTriggerContext<TOption>) => ReactNode;\n  selectedOption: TOption | undefined;\n  triggerAriaLabel?: string;\n  value: string;\n}) {\n  const triggerContent = renderTrigger?.({selectedOption, value}) ??\n    selectedOption?.label ?? value;\n\n  return (\n    <summary aria-label={triggerAriaLabel} className={`${standardTriggerClassName} ${densityClassName}`}>\n      <span>{triggerContent}</span>\n      <LuChevronDown\n        aria-hidden=\"true\"\n        className=\"selector-disclosure-arrow size-5 shrink-0 text-content-secondary transition-transform duration-200 ease-brand motion-reduce:transition-none group-open:rotate-180\"\n      />\n    </summary>\n  );\n}\n\nexport function Selector<TOption extends SelectorOption = SelectorOption>({\n  density = 'standard',\n  label,\n  onValueChange,\n  options,\n  renderOption,\n  renderTrigger,\n  triggerAriaLabel,\n  value,\n  whiteSurface = false,\n}: SelectorProps<TOption>) {\n  const [selectorElement, setSelectorElement] =\n    useState<HTMLDetailsElement | null>(null);\n  const selectedOption = options.find((option) => option.value === value);\n  const layout = getNavigationLayout(density);\n  const surfaceClassName = whiteSurface ? 'bg-white' : 'bg-surface-raised';\n\n  useEffect(() => {\n    if (!selectorElement) {\n      return;\n    }\n\n    const closeWhenPointerStartsOutside = (event: PointerEvent) => {\n      if (\n        !selectorElement.open ||\n        !(event.target instanceof Node) ||\n        selectorElement.contains(event.target)\n      ) {\n        return;\n      }\n\n      selectorElement.removeAttribute('open');\n    };\n\n    document.addEventListener('pointerdown', closeWhenPointerStartsOutside, true);\n\n    return () => {\n      document.removeEventListener('pointerdown', closeWhenPointerStartsOutside, true);\n    };\n  }, [selectorElement]);\n\n  const selectOption = useCallback((option: TOption) => {\n    selectorElement?.removeAttribute('open');\n    onValueChange(option.value);\n  }, [onValueChange, selectorElement]);\n\n  return (\n    <details\n      ref={setSelectorElement}\n      className={`selector-disclosure group relative ${layout.wrapper}`}\n    >\n      <SelectorTrigger\n        densityClassName={layout.trigger}\n        renderTrigger={renderTrigger}\n        selectedOption={selectedOption}\n        triggerAriaLabel={triggerAriaLabel}\n        value={value}\n      />\n      <ul\n        aria-label={label}\n        className={`mt-2 w-full overflow-hidden rounded-control border border-border-subtle ${surfaceClassName} p-1 shadow-float md:absolute md:top-full md:right-0 md:z-60 md:min-w-44`}\n      >\n        {options.map((option) => {\n          const isSelected = option.value === value;\n          const select = () => selectOption(option);\n          const optionContent = renderOption?.({isSelected, option, select}) ??\n            option.label;\n\n          return (\n            <li key={option.value}>\n              <button\n                aria-pressed={isSelected}\n                className={`${optionClassName} text-left ${isSelected ? 'bg-brand-cloud text-content-primary' : ''}`}\n                onClick={select}\n                type=\"button\"\n              >\n                {optionContent}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </details>\n  );\n}\n","import {Fragment, type ReactNode} from 'react';\nimport {LuMenu} from 'react-icons/lu';\n\nexport type NavbarItem = {\n  href: string;\n  label: ReactNode;\n};\n\nexport type NavbarLinkRenderer = (props: {\n  children: ReactNode;\n  className: string;\n  href: string;\n}) => ReactNode;\n\nexport type NavbarWidth = 'content' | 'wide';\nexport type NavbarLinkTreatment = 'plain' | 'underlined';\nexport type NavbarLinkWeight = 'bold' | 'semibold';\nexport type NavbarLayer = 'above' | 'standard';\nexport type NavbarMobileNavigation = {\n  actions?: ReactNode;\n  menuLabel: string;\n  navigationLabel: string;\n};\n\nexport type NavbarProps = {\n  actions?: ReactNode;\n  brand: ReactNode;\n  items: readonly NavbarItem[];\n  layer?: NavbarLayer;\n  linkTreatment?: NavbarLinkTreatment;\n  linkWeight?: NavbarLinkWeight;\n  mobileNavigation?: NavbarMobileNavigation;\n  navigationLabel: string;\n  renderLink?: NavbarLinkRenderer;\n  width?: NavbarWidth;\n};\n\nconst baseLinkClassName =\n  'text-label text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:rounded-control focus-visible:outline-none focus-visible:shadow-focus';\n\nconst underlinedLinkClassName =\n  'relative after:absolute after:-bottom-1.5 after:left-0 after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-action-primary after:transition-transform after:duration-200 after:ease-brand hover:after:scale-x-100 focus-visible:after:scale-x-100';\n\nconst mobileLinkClassName =\n  'flex min-h-12 items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus';\n\nexport function Navbar({\n  actions,\n  brand,\n  items,\n  layer = 'standard',\n  linkTreatment = 'plain',\n  linkWeight = 'semibold',\n  mobileNavigation,\n  navigationLabel,\n  renderLink,\n  width = 'content',\n}: NavbarProps) {\n  const linkClassName = [\n    baseLinkClassName,\n    linkWeight === 'bold' ? 'font-bold' : 'font-semibold',\n    linkTreatment === 'underlined' ? underlinedLinkClassName : '',\n  ]\n      .filter(Boolean)\n      .join(' ');\n  const containerWidthClassName = width === 'wide' ? 'max-w-7xl' : 'max-w-5xl';\n  const layerClassName = layer === 'above' ? 'z-50' : 'z-40';\n  const renderLinks = (className: string) =>\n    items.map((item) => (\n      <Fragment key={item.href}>\n        {renderLink ? (\n          renderLink({\n            children: item.label,\n            className,\n            href: item.href,\n          })\n        ) : (\n          <a className={className} href={item.href}>\n            {item.label}\n          </a>\n        )}\n      </Fragment>\n    ));\n\n  return (\n    <header\n      className={`sticky top-0 ${layerClassName} border-b border-border-subtle bg-surface-page/90 text-label font-semibold backdrop-blur-lg`}\n    >\n      <div\n        className={`mx-auto flex min-h-20 ${containerWidthClassName} items-center justify-between gap-4 px-shell`}\n      >\n        <div className=\"shrink-0\">{brand}</div>\n        <nav aria-label={navigationLabel} className=\"hidden items-center gap-6 lg:flex\">\n          {renderLinks(linkClassName)}\n        </nav>\n        {actions}\n        {mobileNavigation ? (\n          <details className=\"relative md:hidden\">\n            <summary\n              aria-label={mobileNavigation.menuLabel}\n              className=\"flex size-12 cursor-pointer list-none items-center justify-center rounded-control bg-action-primary text-content-inverse shadow-card transition-[translate,scale,background-color] duration-200 ease-brand active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus [&::-webkit-details-marker]:hidden\"\n            >\n              <span className=\"sr-only\">{mobileNavigation.menuLabel}</span>\n              <LuMenu aria-hidden=\"true\" className=\"size-6\" />\n            </summary>\n            <nav\n              aria-label={mobileNavigation.navigationLabel}\n              className=\"absolute top-14 right-0 w-72 rounded-card border border-border-subtle bg-surface-raised p-3 shadow-float\"\n            >\n              {renderLinks(mobileLinkClassName)}\n              {mobileNavigation.actions ? (\n                <div className=\"mt-2 space-y-3 border-t border-border-subtle pt-3\">\n                  {mobileNavigation.actions}\n                </div>\n              ) : null}\n            </nav>\n          </details>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs"]}
+{"version":3,"sources":["../src/components/google-sign-in-button/google-sign-in-button.tsx","../src/components/selector/selector.tsx","../src/components/navbar/navbar.tsx"],"sourcesContent":["import type {ButtonHTMLAttributes, ReactNode} from 'react';\nimport {FcGoogle} from 'react-icons/fc';\n\nexport type GoogleSignInButtonProps = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'children' | 'className' | 'type'\n> & {\n  label: ReactNode;\n};\n\nconst buttonClassName =\n  'inline-flex min-h-12 w-full cursor-pointer items-center justify-center gap-3 rounded-control border border-border-subtle bg-surface-raised px-control-x py-control-y text-label font-semibold whitespace-nowrap text-content-primary shadow-card transition-[translate,scale,background-color] duration-200 ease-brand hover:-translate-y-0.5 hover:bg-brand-cloud active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus disabled:cursor-wait disabled:opacity-70 motion-reduce:transform-none';\n\nexport function GoogleSignInButton(\n    {label, ...buttonProps}: GoogleSignInButtonProps,\n) {\n  return (\n    <button {...buttonProps} className={buttonClassName} type=\"button\">\n      <FcGoogle\n        aria-hidden=\"true\"\n        className=\"size-5 shrink-0\"\n        data-testid=\"google-mark\"\n      />\n      {label}\n    </button>\n  );\n}\n","import {type ReactNode, useEffect, useId, useRef, useState} from 'react';\nimport {LuChevronDown} from 'react-icons/lu';\n\nexport type SelectorOption = {\n  label: ReactNode;\n  value: string;\n};\n\nexport type SelectorDensity = 'compact' | 'compact-mobile' | 'standard';\n\nexport type SelectorRenderOptionContext<TOption extends SelectorOption> = {\n  isSelected: boolean;\n  option: TOption;\n  select: () => void;\n};\n\nexport type SelectorRenderTriggerContext<TOption extends SelectorOption> = {\n  selectedOption: TOption | undefined;\n  value: string;\n};\n\ntype SelectorBaseProps = {\n  label: string;\n  triggerAriaLabel?: string;\n  value: string;\n};\n\nexport type SelectorProps<TOption extends SelectorOption = SelectorOption> =\n  SelectorBaseProps & {\n    density?: SelectorDensity;\n    onValueChange: (value: string) => void;\n    options: readonly TOption[];\n    renderOption?: (context: SelectorRenderOptionContext<TOption>) => ReactNode;\n    renderTrigger?: (\n      context: SelectorRenderTriggerContext<TOption>,\n    ) => ReactNode;\n    whiteSurface?: boolean;\n  };\n\nconst standardTriggerClassName =\n  'flex w-full cursor-pointer select-none items-center justify-between rounded-control border border-border-subtle py-control-y text-label font-semibold text-content-primary shadow-card transition-colors duration-200 ease-brand hover:bg-brand-cloud focus-visible:outline-none focus-visible:shadow-focus';\n\nconst optionClassName =\n  'flex min-h-12 w-full select-none items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:bg-brand-cloud hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus';\n\nfunction getNavigationLayout(density: SelectorDensity) {\n  if (density === 'compact') {\n    return {trigger: 'h-12 gap-2', wrapper: 'w-auto'};\n  }\n\n  if (density === 'compact-mobile') {\n    return {\n      trigger: 'h-12 gap-2 px-3 md:gap-4 md:px-4 md:min-w-32',\n      wrapper: 'w-auto',\n    };\n  }\n\n  return {trigger: 'min-h-12 gap-4 px-4 md:min-w-32', wrapper: 'w-full md:w-auto'};\n}\n\nfunction SelectorTrigger<TOption extends SelectorOption>({\n  densityClassName,\n  isOpen,\n  onClick,\n  optionListId,\n  renderTrigger,\n  selectedOption,\n  triggerAriaLabel,\n  value,\n}: {\n  densityClassName: string;\n  isOpen: boolean;\n  onClick: () => void;\n  optionListId: string;\n  renderTrigger?: (context: SelectorRenderTriggerContext<TOption>) => ReactNode;\n  selectedOption: TOption | undefined;\n  triggerAriaLabel?: string;\n  value: string;\n}) {\n  const triggerContent = renderTrigger?.({selectedOption, value}) ??\n    selectedOption?.label ?? value;\n\n  return (\n    <button\n      aria-controls={optionListId}\n      aria-expanded={isOpen}\n      aria-label={triggerAriaLabel}\n      className={`${standardTriggerClassName} ${densityClassName}`}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span>{triggerContent}</span>\n      <LuChevronDown\n        aria-hidden=\"true\"\n        className={`selector-disclosure-arrow size-5 shrink-0 text-content-secondary transition-transform duration-200 ease-brand motion-reduce:transition-none ${isOpen ? 'rotate-180' : ''}`}\n      />\n    </button>\n  );\n}\n\nexport function Selector<TOption extends SelectorOption = SelectorOption>({\n  density = 'standard',\n  label,\n  onValueChange,\n  options,\n  renderOption,\n  renderTrigger,\n  triggerAriaLabel,\n  value,\n  whiteSurface = false,\n}: SelectorProps<TOption>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectionRequest, setSelectionRequest] =\n    useState<{value: string} | null>(null);\n  const optionListId = useId();\n  const notifiedSelectionReference = useRef<{value: string} | null>(null);\n  const onValueChangeReference = useRef(onValueChange);\n  const selectorReference = useRef<HTMLDivElement>(null);\n  const selectedOption = options.find((option) => option.value === value);\n  const layout = getNavigationLayout(density);\n  const surfaceClassName = whiteSurface ? 'bg-white' : 'bg-surface-raised';\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const closeWhenPointerStartsOutside = (event: PointerEvent) => {\n      const selectorElement = selectorReference.current;\n\n      if (\n        !selectorElement ||\n        !(event.target instanceof Node) ||\n        selectorElement.contains(event.target)\n      ) {\n        return;\n      }\n\n      setIsOpen(false);\n    };\n\n    document.addEventListener('pointerdown', closeWhenPointerStartsOutside, true);\n\n    return () => {\n      document.removeEventListener('pointerdown', closeWhenPointerStartsOutside, true);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    onValueChangeReference.current = onValueChange;\n  }, [onValueChange]);\n\n  useEffect(() => {\n    if (\n      isOpen ||\n      selectionRequest === null ||\n      selectionRequest === notifiedSelectionReference.current\n    ) {\n      return;\n    }\n\n    notifiedSelectionReference.current = selectionRequest;\n    onValueChangeReference.current(selectionRequest.value);\n  }, [isOpen, selectionRequest]);\n\n  const selectOption = (nextValue: string) => {\n    setIsOpen(false);\n    setSelectionRequest({value: nextValue});\n  };\n\n  return (\n    <div ref={selectorReference} className={`selector-disclosure relative ${layout.wrapper}`}>\n      <SelectorTrigger\n        densityClassName={layout.trigger}\n        isOpen={isOpen}\n        onClick={() => setIsOpen((currentOpen) => !currentOpen)}\n        optionListId={optionListId}\n        renderTrigger={renderTrigger}\n        selectedOption={selectedOption}\n        triggerAriaLabel={triggerAriaLabel}\n        value={value}\n      />\n      {isOpen ? (\n        <ul\n          aria-label={label}\n          className={`mt-2 w-full overflow-hidden rounded-control border border-border-subtle ${surfaceClassName} p-1 shadow-float md:absolute md:top-full md:right-0 md:z-60 md:min-w-44`}\n          id={optionListId}\n        >\n          {options.map((option) => {\n            const isSelected = option.value === value;\n            const select = () => selectOption(option.value);\n            const optionContent =\n              renderOption?.({isSelected, option, select}) ?? option.label;\n\n            return (\n              <li key={option.value}>\n                <button\n                  aria-pressed={isSelected}\n                  className={`${optionClassName} text-left ${isSelected ? 'bg-brand-cloud text-content-primary' : ''}`}\n                  onClick={select}\n                  type=\"button\"\n                >\n                  {optionContent}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n","import {Fragment, type ReactNode, useId} from 'react';\nimport {LuMenu} from 'react-icons/lu';\n\nexport type NavbarItem = {\n  href: string;\n  label: ReactNode;\n};\n\nexport type NavbarLinkRenderer = (props: {\n  children: ReactNode;\n  className: string;\n  href: string;\n}) => ReactNode;\n\nexport type NavbarWidth = 'content' | 'wide';\nexport type NavbarLinkTreatment = 'plain' | 'underlined';\nexport type NavbarLinkWeight = 'bold' | 'semibold';\nexport type NavbarLayer = 'above' | 'standard';\nexport type NavbarMobileNavigation = {\n  actions?: ReactNode;\n  menuLabel: string;\n  navigationLabel: string;\n};\n\nexport type NavbarProps = {\n  actions?: ReactNode;\n  brand: ReactNode;\n  items: readonly NavbarItem[];\n  layer?: NavbarLayer;\n  linkTreatment?: NavbarLinkTreatment;\n  linkWeight?: NavbarLinkWeight;\n  mobileNavigation?: NavbarMobileNavigation;\n  navigationLabel: string;\n  renderLink?: NavbarLinkRenderer;\n  width?: NavbarWidth;\n};\n\nconst baseLinkClassName =\n  'text-label text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:rounded-control focus-visible:outline-none focus-visible:shadow-focus';\n\nconst underlinedLinkClassName =\n  'relative after:absolute after:-bottom-1.5 after:left-0 after:h-0.5 after:w-full after:origin-left after:scale-x-0 after:bg-action-primary after:transition-transform after:duration-200 after:ease-brand hover:after:scale-x-100 focus-visible:after:scale-x-100';\n\nconst mobileLinkClassName =\n  'flex min-h-12 items-center rounded-control px-3 text-label font-semibold text-content-secondary transition-colors duration-200 ease-brand hover:text-content-primary focus-visible:outline-none focus-visible:shadow-focus';\n\nexport function Navbar({\n  actions,\n  brand,\n  items,\n  layer = 'standard',\n  linkTreatment = 'plain',\n  linkWeight = 'semibold',\n  mobileNavigation,\n  navigationLabel,\n  renderLink,\n  width = 'content',\n}: NavbarProps) {\n  const mobileNavigationReference = useId();\n  const mobileNavigationId = `navbar-mobile-navigation-${mobileNavigationReference}`;\n  const mobileNavigationAnchorName = `--navbar-mobile-menu-trigger-${mobileNavigationReference.replace(/[^a-zA-Z0-9_-]/g, '-')}`;\n  const linkClassName = [\n    baseLinkClassName,\n    linkWeight === 'bold' ? 'font-bold' : 'font-semibold',\n    linkTreatment === 'underlined' ? underlinedLinkClassName : '',\n  ]\n      .filter(Boolean)\n      .join(' ');\n  const containerWidthClassName = width === 'wide' ? 'max-w-7xl' : 'max-w-5xl';\n  const layerClassName = layer === 'above' ? 'z-50' : 'z-40';\n  const renderLinks = (className: string) =>\n    items.map((item) => (\n      <Fragment key={item.href}>\n        {renderLink ? (\n          renderLink({\n            children: item.label,\n            className,\n            href: item.href,\n          })\n        ) : (\n          <a className={className} href={item.href}>\n            {item.label}\n          </a>\n        )}\n      </Fragment>\n    ));\n\n  return (\n    <header\n      className={`sticky top-0 ${layerClassName} border-b border-border-subtle bg-surface-page/90 text-label font-semibold backdrop-blur-lg`}\n    >\n      <div\n        className={`mx-auto flex min-h-20 ${containerWidthClassName} items-center justify-between gap-4 px-shell`}\n      >\n        <div className=\"shrink-0\">{brand}</div>\n        <nav aria-label={navigationLabel} className=\"hidden items-center gap-6 lg:flex\">\n          {renderLinks(linkClassName)}\n        </nav>\n        {actions}\n        {mobileNavigation ? (\n          <div className=\"relative md:hidden\">\n            <button\n              aria-controls={mobileNavigationId}\n              aria-label={mobileNavigation.menuLabel}\n              className=\"flex size-12 cursor-pointer items-center justify-center rounded-control bg-action-primary text-content-inverse shadow-card transition-[translate,scale,background-color] duration-200 ease-brand active:scale-[0.97] focus-visible:outline-none focus-visible:shadow-focus\"\n              popoverTarget={mobileNavigationId}\n              popoverTargetAction=\"toggle\"\n              style={{anchorName: mobileNavigationAnchorName}}\n              type=\"button\"\n            >\n              <span className=\"sr-only\">{mobileNavigation.menuLabel}</span>\n              <LuMenu aria-hidden=\"true\" className=\"size-6\" />\n            </button>\n            <nav\n              aria-label={mobileNavigation.navigationLabel}\n              className=\"fixed top-[4.5rem] right-[1.25rem] m-0 w-72 rounded-card border border-border-subtle bg-surface-raised p-3 shadow-float [@supports(position-anchor:--navbar-mobile-menu-trigger)]:absolute [@supports(position-anchor:--navbar-mobile-menu-trigger)]:top-[calc(anchor(bottom)+0.5rem)] [@supports(position-anchor:--navbar-mobile-menu-trigger)]:right-auto [@supports(position-anchor:--navbar-mobile-menu-trigger)]:left-[anchor(right)] [@supports(position-anchor:--navbar-mobile-menu-trigger)]:-translate-x-full\"\n              id={mobileNavigationId}\n              popover=\"auto\"\n              style={{positionAnchor: mobileNavigationAnchorName}}\n            >\n              {renderLinks(mobileLinkClassName)}\n              {mobileNavigation.actions ? (\n                <div className=\"mt-2 space-y-3 border-t border-border-subtle pt-3\">\n                  {mobileNavigation.actions}\n                </div>\n              ) : null}\n            </nav>\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AACA,SAAQ,gBAAe;AAgBnB,SACE,KADF;AAPJ,IAAM,kBACJ;AAEK,SAAS,mBACZ,EAAC,OAAO,GAAG,YAAW,GACxB;AACA,SACE,qBAAC,YAAQ,GAAG,aAAa,WAAW,iBAAiB,MAAK,UACxD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAU;AAAA,QACV,eAAY;AAAA;AAAA,IACd;AAAA,IACC;AAAA,KACH;AAEJ;;;AC1BA,SAAwB,WAAW,OAAO,QAAQ,gBAAe;AACjE,SAAQ,qBAAoB;AAkFxB,SAQE,OAAAA,MARF,QAAAC,aAAA;AA5CJ,IAAM,2BACJ;AAEF,IAAM,kBACJ;AAEF,SAAS,oBAAoB,SAA0B;AACrD,MAAI,YAAY,WAAW;AACzB,WAAO,EAAC,SAAS,cAAc,SAAS,SAAQ;AAAA,EAClD;AAEA,MAAI,YAAY,kBAAkB;AAChC,WAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAEA,SAAO,EAAC,SAAS,mCAAmC,SAAS,mBAAkB;AACjF;AAEA,SAAS,gBAAgD;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,iBAAiB,gBAAgB,EAAC,gBAAgB,MAAK,CAAC,KAC5D,gBAAgB,SAAS;AAE3B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAY;AAAA,MACZ,WAAW,GAAG,wBAAwB,IAAI,gBAAgB;AAAA,MAC1D;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,wBAAAD,KAAC,UAAM,0BAAe;AAAA,QACtB,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW,+IAA+I,SAAS,eAAe,EAAE;AAAA;AAAA,QACtL;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,SAA0D;AAAA,EACxE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAA2B;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAC1C,SAAiC,IAAI;AACvC,QAAM,eAAe,MAAM;AAC3B,QAAM,6BAA6B,OAA+B,IAAI;AACtE,QAAM,yBAAyB,OAAO,aAAa;AACnD,QAAM,oBAAoB,OAAuB,IAAI;AACrD,QAAM,iBAAiB,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK;AACtE,QAAM,SAAS,oBAAoB,OAAO;AAC1C,QAAM,mBAAmB,eAAe,aAAa;AAErD,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,gCAAgC,CAAC,UAAwB;AAC7D,YAAM,kBAAkB,kBAAkB;AAE1C,UACE,CAAC,mBACD,EAAE,MAAM,kBAAkB,SAC1B,gBAAgB,SAAS,MAAM,MAAM,GACrC;AACA;AAAA,MACF;AAEA,gBAAU,KAAK;AAAA,IACjB;AAEA,aAAS,iBAAiB,eAAe,+BAA+B,IAAI;AAE5E,WAAO,MAAM;AACX,eAAS,oBAAoB,eAAe,+BAA+B,IAAI;AAAA,IACjF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,YAAU,MAAM;AACd,2BAAuB,UAAU;AAAA,EACnC,GAAG,CAAC,aAAa,CAAC;AAElB,YAAU,MAAM;AACd,QACE,UACA,qBAAqB,QACrB,qBAAqB,2BAA2B,SAChD;AACA;AAAA,IACF;AAEA,+BAA2B,UAAU;AACrC,2BAAuB,QAAQ,iBAAiB,KAAK;AAAA,EACvD,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAE7B,QAAM,eAAe,CAAC,cAAsB;AAC1C,cAAU,KAAK;AACf,wBAAoB,EAAC,OAAO,UAAS,CAAC;AAAA,EACxC;AAEA,SACE,gBAAAC,MAAC,SAAI,KAAK,mBAAmB,WAAW,gCAAgC,OAAO,OAAO,IACpF;AAAA,oBAAAD;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB,OAAO;AAAA,QACzB;AAAA,QACA,SAAS,MAAM,UAAU,CAAC,gBAAgB,CAAC,WAAW;AAAA,QACtD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACC,SACC,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAW,2EAA2E,gBAAgB;AAAA,QACtG,IAAI;AAAA,QAEH,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,aAAa,OAAO,UAAU;AACpC,gBAAM,SAAS,MAAM,aAAa,OAAO,KAAK;AAC9C,gBAAM,gBACJ,eAAe,EAAC,YAAY,QAAQ,OAAM,CAAC,KAAK,OAAO;AAEzD,iBACE,gBAAAA,KAAC,QACC,0BAAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAc;AAAA,cACd,WAAW,GAAG,eAAe,cAAc,aAAa,wCAAwC,EAAE;AAAA,cAClG,SAAS;AAAA,cACT,MAAK;AAAA,cAEJ;AAAA;AAAA,UACH,KARO,OAAO,KAShB;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH,IACE;AAAA,KACN;AAEJ;;;ACnNA,SAAQ,UAA0B,SAAAE,cAAY;AAC9C,SAAQ,cAAa;AA+EX,gBAAAC,MAqBE,QAAAC,aArBF;AA3CV,IAAM,oBACJ;AAEF,IAAM,0BACJ;AAEF,IAAM,sBACJ;AAEK,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAgB;AACd,QAAM,4BAA4BF,OAAM;AACxC,QAAM,qBAAqB,4BAA4B,yBAAyB;AAChF,QAAM,6BAA6B,gCAAgC,0BAA0B,QAAQ,mBAAmB,GAAG,CAAC;AAC5H,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA,eAAe,SAAS,cAAc;AAAA,IACtC,kBAAkB,eAAe,0BAA0B;AAAA,EAC7D,EACK,OAAO,OAAO,EACd,KAAK,GAAG;AACb,QAAM,0BAA0B,UAAU,SAAS,cAAc;AACjE,QAAM,iBAAiB,UAAU,UAAU,SAAS;AACpD,QAAM,cAAc,CAAC,cACnB,MAAM,IAAI,CAAC,SACT,gBAAAC,KAAC,YACE,uBACC,WAAW;AAAA,IACT,UAAU,KAAK;AAAA,IACf;AAAA,IACA,MAAM,KAAK;AAAA,EACb,CAAC,IAED,gBAAAA,KAAC,OAAE,WAAsB,MAAM,KAAK,MACjC,eAAK,OACR,KAVW,KAAK,IAYpB,CACD;AAEH,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,gBAAgB,cAAc;AAAA,MAEzC,0BAAAC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,yBAAyB,uBAAuB;AAAA,UAE3D;AAAA,4BAAAD,KAAC,SAAI,WAAU,YAAY,iBAAM;AAAA,YACjC,gBAAAA,KAAC,SAAI,cAAY,iBAAiB,WAAU,qCACzC,sBAAY,aAAa,GAC5B;AAAA,YACC;AAAA,YACA,mBACC,gBAAAC,MAAC,SAAI,WAAU,sBACb;AAAA,8BAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,iBAAe;AAAA,kBACf,cAAY,iBAAiB;AAAA,kBAC7B,WAAU;AAAA,kBACV,eAAe;AAAA,kBACf,qBAAoB;AAAA,kBACpB,OAAO,EAAC,YAAY,2BAA0B;AAAA,kBAC9C,MAAK;AAAA,kBAEL;AAAA,oCAAAD,KAAC,UAAK,WAAU,WAAW,2BAAiB,WAAU;AAAA,oBACtD,gBAAAA,KAAC,UAAO,eAAY,QAAO,WAAU,UAAS;AAAA;AAAA;AAAA,cAChD;AAAA,cACA,gBAAAC;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY,iBAAiB;AAAA,kBAC7B,WAAU;AAAA,kBACV,IAAI;AAAA,kBACJ,SAAQ;AAAA,kBACR,OAAO,EAAC,gBAAgB,2BAA0B;AAAA,kBAEjD;AAAA,gCAAY,mBAAmB;AAAA,oBAC/B,iBAAiB,UAChB,gBAAAD,KAAC,SAAI,WAAU,qDACZ,2BAAiB,SACpB,IACE;AAAA;AAAA;AAAA,cACN;AAAA,eACF,IACE;AAAA;AAAA;AAAA,MACN;AAAA;AAAA,EACF;AAEJ;","names":["jsx","jsxs","useId","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1e99/components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Reusable React components built with Tailwind CSS.",
   "repository": {
     "type": "git",