@servicetitan/anvil2 1.26.0 → 1.27.0

package/dist/Page-DUA2NqcR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page-DUA2NqcR.js","sources":["../../hammer-icon/mdi/round/chevron_left.svg","../../hammer-icon/mdi/round/segment.svg","../../hammer-icon/mdi/round/keyboard_arrow_up.svg","../public/assets/icons/st/local_settings.svg","../../hammer-icon/mdi/round/more_vert.svg","../../../node_modules/.pnpm/@react-hook+merged-ref@1.3.2_react@18.3.1/node_modules/@react-hook/merged-ref/dist/module/index.js","../src/components/Page/Page.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgChevronLeft = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z\" }));\nexport default SvgChevronLeft;\n","import * as React from \"react\";\nconst SvgSegment = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M10 18h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm7 6h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1z\" }));\nexport default SvgSegment;\n","import * as React from \"react\";\nconst SvgKeyboardArrowUp = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M8.12 14.71 12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0z\" }));\nexport default SvgKeyboardArrowUp;\n","import * as React from \"react\";\nconst SvgLocalSettings = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { fillRule: \"evenodd\", d: \"M10.5 21h-.955a.49.49 0 0 1-.484-.399l-.366-2.517a7.5 7.5 0 0 1-1.65-.936l-2.431.954a.49.49 0 0 1-.596-.204l-1.953-3.291a.465.465 0 0 1 .117-.608l2.06-1.573a8 8 0 0 1-.067-.926c0-.313.03-.622.068-.926l-2.06-1.572a.467.467 0 0 1-.117-.609l1.953-3.291c.122-.205.376-.285.595-.205l2.431.955a7.3 7.3 0 0 1 1.65-.936L9.062 2.4a.49.49 0 0 1 .482-.4h3.906c.244 0 .444.176.488.399l.366 2.518a7.5 7.5 0 0 1 1.65.935l2.432-.955a.49.49 0 0 1 .595.205l1.953 3.291a.465.465 0 0 1-.117.608L18.85 10.5h-4.091c-.436-1.348-1.73-2.325-3.26-2.325-1.89 0-3.418 1.486-3.418 3.325 0 1.5 1.018 2.767 2.42 3.182z\", clipRule: \"evenodd\" }), /* @__PURE__ */ React.createElement(\"path\", { fillRule: \"evenodd\", d: \"M12.437 21.563A1.45 1.45 0 0 0 13.5 22h7q.624 0 1.062-.437A1.45 1.45 0 0 0 22 20.5v-7q0-.625-.438-1.062A1.45 1.45 0 0 0 20.5 12h-7q-.625 0-1.063.438A1.45 1.45 0 0 0 12 13.5v7q0 .625.437 1.063m.991-.991v-.777c.43-.505.96-.914 1.556-1.202q.919-.45 2.015-.45 1.098 0 2.016.45t1.556 1.202v.777zM17 17.143a1.5 1.5 0 0 0 1.113-.459 1.5 1.5 0 0 0 .458-1.113q0-.654-.458-1.112A1.5 1.5 0 0 0 17 14a1.5 1.5 0 0 0-1.113.459 1.5 1.5 0 0 0-.459 1.113q0 .654.459 1.113a1.52 1.52 0 0 0 1.113.458\", clipRule: \"evenodd\" }), /* @__PURE__ */ React.createElement(\"path\", { fillRule: \"evenodd\", d: \"M10.5 21h-.955a.49.49 0 0 1-.484-.399l-.366-2.517a7.5 7.5 0 0 1-1.65-.936l-2.431.954a.49.49 0 0 1-.596-.204l-1.953-3.291a.465.465 0 0 1 .117-.608l2.06-1.573a8 8 0 0 1-.067-.926c0-.313.03-.622.068-.926l-2.06-1.572a.467.467 0 0 1-.117-.609l1.953-3.291c.122-.205.376-.285.595-.205l2.431.955a7.3 7.3 0 0 1 1.65-.936L9.062 2.4a.49.49 0 0 1 .482-.4h3.906c.244 0 .444.176.488.399l.366 2.518a7.5 7.5 0 0 1 1.65.935l2.432-.955a.49.49 0 0 1 .595.205l1.953 3.291a.465.465 0 0 1-.117.608L18.85 10.5h-4.091c-.436-1.348-1.73-2.325-3.26-2.325-1.89 0-3.418 1.486-3.418 3.325 0 1.5 1.018 2.767 2.42 3.182z\", clipRule: \"evenodd\" }), /* @__PURE__ */ React.createElement(\"path\", { fillRule: \"evenodd\", d: \"M12.437 21.563A1.45 1.45 0 0 0 13.5 22h7q.624 0 1.062-.437A1.45 1.45 0 0 0 22 20.5v-7q0-.625-.438-1.062A1.45 1.45 0 0 0 20.5 12h-7q-.625 0-1.063.438A1.45 1.45 0 0 0 12 13.5v7q0 .625.437 1.063m.991-.991v-.777c.43-.505.96-.914 1.556-1.202q.919-.45 2.015-.45 1.098 0 2.016.45t1.556 1.202v.777zM17 17.143a1.5 1.5 0 0 0 1.113-.459 1.5 1.5 0 0 0 .458-1.113q0-.654-.458-1.112A1.5 1.5 0 0 0 17 14a1.5 1.5 0 0 0-1.113.459 1.5 1.5 0 0 0-.459 1.113q0 .654.459 1.113a1.52 1.52 0 0 0 1.113.458\", clipRule: \"evenodd\" }));\nexport default SvgLocalSettings;\n","import * as React from \"react\";\nconst SvgMoreVert = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\" }));\nexport default SvgMoreVert;\n","import * as React from 'react';\n\nfunction useMergedRef(...refs) {\n  return React.useCallback(element => {\n    for (let i = 0; i < refs.length; i++) {\n      const ref = refs[i];\n      if (typeof ref === 'function') ref(element);else if (ref && typeof ref === 'object') ref.current = element;\n    }\n  }, // eslint-disable-next-line react-hooks/exhaustive-deps\n  refs);\n}\n\nexport default useMergedRef;","import {\n  ComponentPropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject,\n  UIEvent,\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { core } from \"@servicetitan/hammer-token\";\nimport OpenSVG from \"@servicetitan/hammer-icon/mdi/round/chevron_right.svg\";\nimport CloseSVG from \"@servicetitan/hammer-icon/mdi/round/chevron_left.svg\";\nimport SegmentSVG from \"@servicetitan/hammer-icon/mdi/round/segment.svg\";\nimport RespOpen from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_down.svg\";\nimport RespClose from \"@servicetitan/hammer-icon/mdi/round/keyboard_arrow_up.svg\";\nimport LocalSettings from \"../../../public/assets/icons/st/local_settings.svg\";\nimport MoreVert from \"@servicetitan/hammer-icon/mdi/round/more_vert.svg\";\nimport {\n  AnvilProviderContext,\n  AnvilProviderContextProps,\n} from \"../../providers\";\nimport { useTrackingId } from \"../../hooks\";\nimport Button, { ButtonProps } from \"../Button\";\nimport Popover from \"../Popover\";\nimport Icon from \"../Icon\";\nimport Flex from \"../Flex\";\nimport Tooltip from \"../Tooltip\";\nimport ButtonLink, { ButtonLinkProps } from \"../ButtonLink\";\nimport Breadcrumbs, { BreadcrumbsLinkProps } from \"../Breadcrumbs\";\nimport Chip, { ChipProps } from \"../Chip\";\nimport Menu from \"../Menu\";\nimport Text from \"../Text\";\nimport Dialog from \"../Dialog\";\nimport useMergedRef from \"@react-hook/merged-ref\";\nimport Layout, { LayoutProps } from \"../Layout\";\n\nimport styles from \"./Page.module.scss\";\nimport cx from \"classnames\";\n\n//--- Start Page Sidebar ---//\ntype PageSideBarContextProps = {\n  collapsed: boolean;\n};\n\nconst PageSideBarContext = createContext<PageSideBarContextProps | null>(null);\n\nexport type PageSidebarProps = ComponentPropsWithoutRef<\"div\"> & {\n  localStorageKey?: string;\n  [\"data-tracking-id\"]?: string;\n  currentPageTitle?: string;\n};\n\nexport const PageSidebar = forwardRef(\n  (props: PageSidebarProps, ref: Ref<HTMLDivElement>) => {\n    const {\n      children,\n      className,\n      currentPageTitle,\n      localStorageKey = \"sidebar-collapsed\",\n      ...rest\n    } = props;\n\n    const data = {\n      localStorageKey,\n    };\n\n    const { breakpoint } =\n      useContext<AnvilProviderContextProps>(AnvilProviderContext);\n\n    const trackingId = useTrackingId({\n      name: \"PageSidebarButton\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    const [collapsed, setCollapsed] = useState<boolean>(() => {\n      // getting stored value\n      const sidebarState = localStorage.getItem(localStorageKey);\n      return sidebarState ? JSON.parse(sidebarState) : false;\n    });\n    const classNames = cx([styles[\"sidebar\"]], className, {\n      [styles[\"collapsed\"]]: collapsed,\n    });\n    const onToggleButtonClick = () => {\n      setCollapsed((prev) => {\n        localStorage.setItem(localStorageKey, JSON.stringify(!prev));\n        return !prev;\n      });\n    };\n\n    const breakpointWidth = +(\n      core.primitive?.BreakpointLg?.value.replace(\"px\", \"\") ?? 0\n    );\n    const innerWidth = breakpoint?.innerWidth ?? 0;\n\n    if (innerWidth < breakpointWidth) {\n      return (\n        <Popover fillAvailableHeight matchReferenceWidth noPadding disableCaret>\n          <Popover.Trigger>\n            {(props) => {\n              if (typeof document !== \"undefined\") {\n                props[\"data-state\"] === \"open\"\n                  ? (document.body.style.overflow = \"hidden\")\n                  : (document.body.style.overflow = \"auto\");\n              }\n              return (\n                <div className={styles[\"sidebar-adaptive-trigger-container\"]}>\n                  <Button\n                    className={styles[\"sidebar-adaptive-trigger\"]}\n                    icon={SegmentSVG}\n                    appearance=\"ghost\"\n                    {...props}\n                  >\n                    {!currentPageTitle ? \"Menu\" : currentPageTitle}\n                    <Icon\n                      className={styles[\"sidebar-adaptive-trigger-icon\"]}\n                      justifyContent=\"end\"\n                      svg={\n                        props[\"data-state\"] === \"open\" ? RespClose : RespOpen\n                      }\n                    />\n                  </Button>\n                </div>\n              );\n            }}\n          </Popover.Trigger>\n          <Popover.Content className={styles[\"sidebar-adaptive-container\"]}>\n            <Flex\n              direction=\"column\"\n              className={styles[\"sidebar-adaptive\"]}\n              ref={ref}\n            >\n              {children}\n            </Flex>\n          </Popover.Content>\n        </Popover>\n      );\n    }\n\n    return (\n      <PageSideBarContext.Provider value={{ collapsed }}>\n        <div className={classNames} ref={ref} {...rest}>\n          <div className={styles[\"sidebar-inner\"]} aria-hidden={collapsed}>\n            <div>{children}</div>\n          </div>\n          <div className={styles[\"toggle-button-wrapper\"]}>\n            <Tooltip placement=\"right\">\n              <Tooltip.Trigger className={styles[\"toggle-button-tooltip\"]}>\n                <Button\n                  size=\"small\"\n                  onClick={onToggleButtonClick}\n                  className={styles[\"toggle-button\"]}\n                  aria-label={collapsed ? \"Open Sidebar\" : \"Close Sidebar\"}\n                  data-tracking-id={trackingId}\n                  icon={collapsed ? OpenSVG : CloseSVG}\n                />\n              </Tooltip.Trigger>\n              <Tooltip.Content>\n                {collapsed ? \"Open Sidebar\" : \"Close Sidebar\"}\n              </Tooltip.Content>\n            </Tooltip>\n          </div>\n        </div>\n      </PageSideBarContext.Provider>\n    );\n  },\n);\n\nPageSidebar.displayName = \"Page.Sidebar\";\n//--- End Page Sidebar ---//\n\n//--- Start Page Sidebar Header ---//\nexport type PageSidebarHeaderProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const PageSidebarHeader = forwardRef(\n  (props: PageSidebarHeaderProps, ref: Ref<HTMLDivElement>) => {\n    const { children, className, ...rest } = props;\n    const context = useContext(PageSideBarContext);\n    const classNames = cx([styles[\"sidebar-header\"]], className);\n\n    return (\n      <div className={classNames} ref={ref} {...rest}>\n        <div\n          className={styles[\"header-content\"]}\n          aria-hidden={context?.collapsed}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nPageSidebarHeader.displayName = \"Page.SidebarHeader\";\n//--- End Page SidebarHeader ---//\n\n//--- Start Page Panel ---//\nexport type PagePanelProps = ComponentPropsWithoutRef<\"div\"> & {\n  open?: boolean;\n  size?: \"small\" | \"medium\" | \"large\";\n  noPadding?: boolean;\n};\n\nexport const PagePanel = forwardRef(\n  (props: PagePanelProps, ref: Ref<HTMLDivElement>) => {\n    const {\n      children,\n      open,\n      size = \"medium\",\n      noPadding,\n      style,\n      className,\n      ...rest\n    } = props;\n    const classNames = cx([styles[\"panel\"]], [styles[size]], className, {\n      [styles[\"open\"]]: typeof open === \"undefined\" ? true : open,\n      [styles[\"persistent\"]]: typeof open === \"undefined\",\n      [styles[\"noPadding\"]]: noPadding,\n    });\n\n    const { breakpoint } =\n      useContext<AnvilProviderContextProps>(AnvilProviderContext);\n\n    const breakpointWidth = +(\n      core.primitive?.BreakpointLg?.value.replace(\"px\", \"\") ?? 0\n    );\n    const innerWidth = breakpoint?.innerWidth ?? 0;\n\n    if (typeof open !== \"undefined\" && innerWidth < breakpointWidth) {\n      return (\n        <Dialog open={open}>\n          <Dialog.Content>\n            <div\n              className={classNames}\n              aria-hidden={!open}\n              aria-disabled={!open}\n              ref={ref}\n              {...rest}\n            >\n              {children}\n            </div>\n          </Dialog.Content>\n        </Dialog>\n      );\n    }\n    return (\n      <div\n        className={classNames}\n        aria-hidden={!open}\n        aria-disabled={!open}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={styles[\"panel-inner\"]}\n          /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */\n          tabIndex={typeof open !== \"undefined\" && open ? 0 : -1}\n          style={style}\n        >\n          <div>{children}</div>\n        </div>\n      </div>\n    );\n  },\n);\nPagePanel.displayName = \"PagePanel\";\n//--- End Page Panel ---//\n\n//--- Start Page Header ---//\ntype PageHeaderActionProps = Omit<ButtonProps, \"appearance\"> & {\n  label: string;\n};\n\ntype PageHeaderActionsProps = {\n  primary?: PageHeaderActionProps;\n  secondary?: PageHeaderActionProps[];\n};\n\ntype BasePreferenceProps = {\n  \"aria-label\": string;\n};\n\ntype PreferenceButtonProps = Omit<\n  ButtonProps,\n  \"aria-label\" | \"icon\" | \"appearance\" | \"size\" | \"className\"\n> &\n  BasePreferenceProps;\n\ntype PreferenceLinkProps = Omit<\n  ButtonLinkProps,\n  \"aria-label\" | \"icon\" | \"appearance\" | \"size\" | \"className\"\n> &\n  BasePreferenceProps;\n\nexport type PageHeaderProps = ComponentPropsWithoutRef<\"header\"> & {\n  title: string;\n  breadcrumbs?: BreadcrumbsLinkProps[];\n  chips?: ChipProps[];\n  description?: ReactNode;\n  actions?: PageHeaderActionsProps;\n  preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;\n  layout?: LayoutProps;\n};\n\nexport const PageHeader = forwardRef(\n  (props: PageHeaderProps, ref: Ref<HTMLHeadElement>) => {\n    const {\n      title,\n      breadcrumbs,\n      chips,\n      description,\n      actions,\n      preferenceAction,\n      layout,\n      className,\n      ...rest\n    } = props;\n\n    const { fluid, variant } = layout || {};\n\n    const preferenceItem =\n      preferenceAction &&\n      (\"href\" in preferenceAction ? (\n        <Tooltip>\n          <Tooltip.Trigger>\n            <ButtonLink\n              appearance=\"ghost\"\n              icon={LocalSettings}\n              size=\"small\"\n              className={styles[\"preference-action\"]}\n              {...(preferenceAction as PreferenceLinkProps)}\n            />\n          </Tooltip.Trigger>\n          <Tooltip.Content>{preferenceAction[\"aria-label\"]}</Tooltip.Content>\n        </Tooltip>\n      ) : (\n        <Tooltip>\n          <Tooltip.Trigger>\n            <Button\n              appearance=\"ghost\"\n              icon={LocalSettings}\n              size=\"small\"\n              className={styles[\"preference-action\"]}\n              {...(preferenceAction as PreferenceButtonProps)}\n            />\n          </Tooltip.Trigger>\n          <Tooltip.Content>{preferenceAction[\"aria-label\"]}</Tooltip.Content>\n        </Tooltip>\n      ));\n\n    const actionItems = actions && (\n      <Flex justifyContent=\"flex-end\" className={styles.actions}>\n        {actions.secondary?.length &&\n          actions.secondary.length < 3 &&\n          !actions.primary &&\n          actions.secondary.map((action, index) => (\n            <Button key={index} appearance=\"secondary\" {...action}>\n              {action.label}\n            </Button>\n          ))}\n\n        {actions.primary &&\n          actions.secondary &&\n          actions.secondary?.length < 2 && (\n            <>\n              {actions.secondary?.[0] && (\n                <Button appearance=\"secondary\" {...actions.secondary[0]}>\n                  {actions.secondary[0].label}\n                </Button>\n              )}\n              <Button appearance=\"primary\" {...actions.primary}>\n                {actions.primary.label}\n              </Button>\n            </>\n          )}\n\n        {actions.secondary &&\n          (actions.secondary?.length >= 3 ||\n            (actions.secondary?.length >= 2 && actions.primary)) && (\n            <>\n              <Menu\n                trigger={({ ref, ...rest }) => (\n                  <Tooltip>\n                    <Tooltip.Trigger\n                      ref={ref as unknown as RefObject<HTMLDivElement>}\n                      {...rest}\n                    >\n                      <Button\n                        appearance=\"secondary\"\n                        icon={MoreVert}\n                        aria-label=\"More actions\"\n                      />\n                    </Tooltip.Trigger>\n                    <Tooltip.Content>More actions</Tooltip.Content>\n                  </Tooltip>\n                )}\n              >\n                {actions.secondary?.map((action, index) => (\n                  <Menu.Item\n                    key={index}\n                    label={action.label}\n                    onClick={action.onClick}\n                    disabled={action.disabled}\n                  />\n                ))}\n              </Menu>\n              {actions.primary && (\n                <Button appearance=\"primary\" {...actions.primary}>\n                  {actions.primary.label}\n                </Button>\n              )}\n            </>\n          )}\n      </Flex>\n    );\n\n    const headerClassName = cx(styles.content, styles.header, className);\n\n    const headerContentClassName = cx(\n      styles[\"content-inner\"],\n      styles[\"content-header-inner\"],\n    );\n\n    return (\n      <header ref={ref} className={headerClassName} {...rest}>\n        <div className={headerContentClassName}>\n          <Layout fluid={fluid} variant={variant} className={styles[\"layout\"]}>\n            <Layout.Item>\n              {breadcrumbs && (\n                <Breadcrumbs>\n                  {breadcrumbs.map((breadcrumb, index) => (\n                    <Breadcrumbs.Link key={index} {...breadcrumb} />\n                  ))}\n                </Breadcrumbs>\n              )}\n            </Layout.Item>\n\n            <Layout.Item md={actionItems ? 6 : 12}>\n              <div className={styles[\"title-wrapper\"]}>\n                <Text\n                  variant=\"headline\"\n                  size=\"large\"\n                  el=\"h1\"\n                  className={styles.title}\n                >\n                  {title}\n                </Text>\n\n                {preferenceItem}\n              </div>\n\n              {chips && (\n                <Flex className={styles.chips}>\n                  {chips.map((chip, index) => (\n                    <Chip key={index} {...chip} />\n                  ))}\n                </Flex>\n              )}\n            </Layout.Item>\n\n            <Layout.Item md={6}>{actionItems}</Layout.Item>\n\n            {description && (\n              <Layout.Item md={12} className={styles.description}>\n                {description}\n              </Layout.Item>\n            )}\n          </Layout>\n        </div>\n      </header>\n    );\n  },\n);\n\nPageHeader.displayName = \"Page.Header\";\n//--- End Page Header ---//\n\n//--- Start Page Content ---//\nexport type PageContentProps = ComponentPropsWithoutRef<\"main\">;\n\nexport const PageContent = forwardRef(\n  (props: PageContentProps, ref: Ref<HTMLAreaElement>) => {\n    const { children, className, ...rest } = props;\n    const classNames = cx([styles[\"content\"]], className);\n    const mainRef = useRef<HTMLAreaElement>(null);\n    const virtualScrollRef = useRef<HTMLDivElement>(null);\n    const blocker = useRef(true);\n    const [leftOffset, setLeftOffset] = useState(\n      (mainRef.current?.offsetLeft ?? 0) +\n        (mainRef.current?.offsetWidth ?? 0) -\n        9,\n    );\n    const [contentHeight, setContentHeight] = useState(\n      mainRef.current?.offsetHeight,\n    );\n\n    // Updates scroll position\n    useEffect(() => {\n      if (typeof window === \"undefined\") return;\n      if (!blocker.current) return;\n      function updatePosition() {\n        const newValue = window.scrollY;\n\n        virtualScrollRef.current?.scrollTo(0, newValue ?? 0);\n      }\n      window.addEventListener(\"scroll\", updatePosition, { passive: true });\n\n      return () => {\n        window.removeEventListener(\"scroll\", updatePosition);\n      };\n    }, []);\n\n    // Updates virtual scroll properties when main resizes\n    useEffect(() => {\n      if (mainRef.current) {\n        const observer = new ResizeObserver(() => {\n          if (!mainRef.current) return;\n          setLeftOffset(\n            mainRef.current.offsetLeft + mainRef.current.offsetWidth - 9,\n          );\n          setContentHeight(mainRef.current.offsetHeight);\n        });\n\n        observer.observe(mainRef.current);\n\n        // Cleanup function\n        return () => {\n          observer.disconnect();\n        };\n      }\n    }, []);\n\n    function scrollBody(e: UIEvent<HTMLElement>) {\n      if (typeof window === \"undefined\") return;\n      if (blocker.current) return;\n      window.scrollTo(0, (e.target as HTMLDivElement).scrollTop);\n    }\n\n    return (\n      <main className={classNames} ref={useMergedRef(mainRef, ref)} {...rest}>\n        <div className={styles[\"content-inner\"]}>{children}</div>\n        <div\n          className={styles[\"virtual-scroll-container\"]}\n          ref={virtualScrollRef}\n          style={{\n            left: leftOffset,\n          }}\n          onScrollCapture={scrollBody}\n          onMouseEnter={() => {\n            blocker.current = false;\n          }}\n          onMouseLeave={() => {\n            blocker.current = true;\n          }}\n        >\n          <div style={{ width: 1, height: contentHeight }} />\n        </div>\n      </main>\n    );\n  },\n);\n\nPageContent.displayName = \"PageContent\";\n//--- End Page Content ---//\n\n//--- Start Page Element ---//\nexport type PageProps = ComponentPropsWithoutRef<\"div\">;\n\nconst PageElement = forwardRef((props: PageProps, ref: Ref<HTMLDivElement>) => {\n  const { children, className, ...rest } = props;\n  const classNames = cx(styles[\"page\"], className);\n\n  return (\n    <div className={classNames} data-anv=\"Page\" ref={ref} {...rest}>\n      <div className={styles[\"container\"]}>{children}</div>\n    </div>\n  );\n});\n\nPageElement.displayName = \"Page\";\n\nexport const Page = Object.assign(PageElement, {\n  Sidebar: PageSidebar,\n  SidebarHeader: PageSidebarHeader,\n  Header: PageHeader,\n  Content: PageContent,\n  Panel: PagePanel,\n});\n"],"names":["core.primitive?.BreakpointLg","props","SegmentSVG","RespClose","RespOpen","OpenSVG","CloseSVG","LocalSettings","ref","rest","MoreVert"],"mappings":"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","x_google_ignoreList":[5]}

package/dist/Page.css

@@ -1,10 +1,11 @@
-html:has(._page_17zvi_1)::-webkit-scrollbar {
+@layer starter, reset, base, state, application;
+
+html:has(._page_1yc3p_1)::-webkit-scrollbar {
   display: none;
 }
 
-@layer starter, reset, base, state, application;
 @layer base {
-  ._page_17zvi_1 {
+  ._page_1yc3p_1 {
     margin: 0;
     padding: 0;
     border-style: none;
@@ -12,19 +13,17 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     border-color: transparent;
     box-sizing: border-box;
     container: page/inline-size;
-    display: flex;
-    flex-direction: column;
     min-height: calc(100dvh - var(--offset, 0px));
+    isolation: isolate;
   }
-  ._page_17zvi_1 ._container_17zvi_19 {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    -moz-column-gap: 0px;
-         column-gap: 0px;
-    row-gap: 0px;
+  ._page_1yc3p_1 ._container_1yc3p_17 {
+    display: grid;
+    grid-template-areas: "sidebar" "header" "content" "panel";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr auto;
     margin: 0;
     padding: 0;
+    min-height: inherit;
     border-style: none;
     border-width: 0;
     border-color: transparent;
@@ -34,17 +33,22 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     overflow-x: clip;
     transition: 300ms cubic-bezier(0.4, 0, 0.6, 1);
   }
-  ._content_17zvi_36 {
-    flex-grow: 1;
+  ._content_1yc3p_34 {
+    grid-area: content;
     container: content/inline-size;
     display: flex;
   }
-  ._content_17zvi_36 ._content-inner_17zvi_41 {
+  ._content_1yc3p_34 ._content-inner_1yc3p_39 {
     padding-block: 1.5rem;
     padding-inline: 1rem;
     flex-basis: 100%;
   }
-  ._sidebar_17zvi_46 {
+  ._content_1yc3p_34 ._content-header-inner_1yc3p_44 {
+    padding-block-start: 2rem;
+    padding-block-end: 0.5rem;
+  }
+  ._sidebar_1yc3p_48 {
+    grid-area: sidebar;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -54,7 +58,7 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     position: relative;
     background-color: var(--background-color, #ffffff);
   }
-  ._sidebar_17zvi_46 ._sidebar-inner_17zvi_56 {
+  ._sidebar_1yc3p_48 ._sidebar-inner_1yc3p_59 {
     position: sticky;
     top: var(--offset, 0px);
     width: 100%;
@@ -67,7 +71,7 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     transition-behavior: allow-discrete;
     overflow-x: clip;
   }
-  ._sidebar_17zvi_46 ._sidebar-inner_17zvi_56 > div {
+  ._sidebar_1yc3p_48 ._sidebar-inner_1yc3p_59 > div {
     background-color: inherit;
     flex-direction: column;
     display: flex;
@@ -81,7 +85,7 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     bottom: 0;
     right: 0;
   }
-  ._sidebar_17zvi_46 ._toggle-button-wrapper_17zvi_83 {
+  ._sidebar_1yc3p_48 ._toggle-button-wrapper_1yc3p_86 {
     position: absolute;
     width: 0px;
     overflow: visible;
@@ -89,7 +93,7 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     right: 0;
     height: 100%;
   }
-  ._sidebar_17zvi_46 ._toggle-button-wrapper_17zvi_83 ._toggle-button-tooltip_17zvi_91 {
+  ._sidebar_1yc3p_48 ._toggle-button-wrapper_1yc3p_86 ._toggle-button-tooltip_1yc3p_94 {
     position: sticky;
     top: calc(1.5rem + var(--offset, 0px));
     margin-left: -1rem;
@@ -97,7 +101,7 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     width: -moz-fit-content;
     width: fit-content;
   }
-  ._sidebar_17zvi_46 ._toggle-button-wrapper_17zvi_83 ._toggle-button_17zvi_83 {
+  ._sidebar_1yc3p_48 ._toggle-button-wrapper_1yc3p_86 ._toggle-button_1yc3p_86 {
     padding: 0.5rem;
     min-width: 2rem;
     width: 2rem;
@@ -105,16 +109,16 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     border-radius: 100%;
     border-color: var(--border-color-subdued, #dfe0e1);
   }
-  ._sidebar_17zvi_46 ._toggle-button-wrapper_17zvi_83 ._toggle-button_17zvi_83::before {
+  ._sidebar_1yc3p_48 ._toggle-button-wrapper_1yc3p_86 ._toggle-button_1yc3p_86::before {
     border-radius: inherit;
   }
-  ._sidebar-header_17zvi_109 {
+  ._sidebar-header_1yc3p_112 {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem;
   }
-  ._sidebar-adaptive-trigger-container_17zvi_115 {
+  ._sidebar-adaptive-trigger-container_1yc3p_118 {
     padding: 0.5rem;
     background-color: var(--background-color, #ffffff);
     width: auto;
@@ -123,20 +127,23 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     z-index: 1;
     box-shadow: var(--shadow-color, rgba(20, 20, 20, 0.0784313725)) 0rem 0.125rem 0.5rem;
   }
-  ._sidebar-adaptive-container_17zvi_124 {
+  ._sidebar-adaptive-container_1yc3p_127 {
     overflow: auto;
   }
-  ._sidebar-adaptive-container_17zvi_124 ._sidebar-adaptive_17zvi_115 {
+  ._sidebar-adaptive-container_1yc3p_127 ._sidebar-adaptive_1yc3p_118 {
     padding: 0.5rem;
   }
-  ._panel_17zvi_130 {
-    grid-area: 1/3/2/4;
+  ._panel_1yc3p_133 {
+    grid-area: panel;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     background-color: var(--background-color, #ffffff);
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
   }
-  ._panel_17zvi_130 ._panel-inner_17zvi_137 {
+  ._panel_1yc3p_133 ._panel-inner_1yc3p_141 {
     padding: 1rem;
     outline: none;
     width: 100%;
@@ -147,7 +154,7 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
     transition-behavior: allow-discrete;
   }
-  ._virtual-scroll-container_17zvi_148 {
+  ._virtual-scroll-container_1yc3p_152 {
     display: none;
     position: fixed;
     top: var(--offset, 0px);
@@ -156,48 +163,85 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
     height: calc(100dvh - var(--offset, 0px));
     z-index: 1;
   }
+  ._header_1yc3p_161 {
+    grid-area: header;
+    flex: 0 0 auto;
+  }
+  ._header_1yc3p_161 ._title-wrapper_1yc3p_165,
+  ._header_1yc3p_161 ._title_1yc3p_165 {
+    display: inline;
+  }
+  ._header_1yc3p_161 ._title_1yc3p_165 {
+    margin-block-end: 0;
+  }
+  ._header_1yc3p_161 ._preference-action_1yc3p_172 {
+    margin-inline-start: 0.5rem;
+  }
+  ._header_1yc3p_161 ._chips_1yc3p_175 {
+    gap: 0.5rem;
+    margin-block-start: 0.75rem;
+  }
+  ._header_1yc3p_161 ._actions_1yc3p_179 {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+  @container content (max-width: 768px) {
+    ._header_1yc3p_161 ._actions_1yc3p_179 > * {
+      flex: 1 1 calc(50% - 0.75rem);
+      min-width: min(100%, 200px);
+    }
+    ._header_1yc3p_161 ._actions_1yc3p_179:has(button[class*=primary]) button[class*=primary] {
+      order: -1;
+    }
+  }
+  ._header_1yc3p_161 ._description_1yc3p_192 {
+    max-width: 80ch;
+  }
 }
 @layer state {
-  @container page (min-width: 768px) {
-    ._page_17zvi_1 ._container_17zvi_19 {
-      display: grid;
+  @container page (min-width: 1024px) {
+    ._page_1yc3p_1 ._container_1yc3p_17 {
+      grid-template-areas: "sidebar header panel" "sidebar content panel";
+      grid-template-rows: auto 1fr;
+      grid-template-columns: var(--first-col) var(--second-col) var(--third-col);
       --first-col: 16rem;
       --second-col: 1fr;
       --third-col: 0px;
-      grid-template-columns: var(--first-col) var(--second-col) var(--third-col);
     }
-    ._page_17zvi_1 ._container_17zvi_19:has(._panel_17zvi_130._open_17zvi_167._small_17zvi_167) {
+    ._page_1yc3p_1 ._container_1yc3p_17:has(._panel_1yc3p_133._open_1yc3p_206._small_1yc3p_206) {
       --third-col: 16rem;
     }
-    ._page_17zvi_1 ._container_17zvi_19:has(._panel_17zvi_130._open_17zvi_167._medium_17zvi_170) {
+    ._page_1yc3p_1 ._container_1yc3p_17:has(._panel_1yc3p_133._open_1yc3p_206._medium_1yc3p_209) {
       --third-col: 24rem;
     }
-    ._page_17zvi_1 ._container_17zvi_19:has(._panel_17zvi_130._open_17zvi_167._large_17zvi_173) {
+    ._page_1yc3p_1 ._container_1yc3p_17:has(._panel_1yc3p_133._open_1yc3p_206._large_1yc3p_212) {
       --third-col: 30rem;
     }
-    ._page_17zvi_1 ._container_17zvi_19:has(._panel_17zvi_130._open_17zvi_167._large_17zvi_173) ._panel_17zvi_130 ._panel-inner_17zvi_137 {
-      min-width: var(--third-col);
-    }
-    ._page_17zvi_1 ._container_17zvi_19:has(._sidebar_17zvi_46._collapsed_17zvi_179) {
+    ._page_1yc3p_1 ._container_1yc3p_17:has(._sidebar_1yc3p_48._collapsed_1yc3p_215) {
       --first-col: 1.5rem;
     }
-    ._page_17zvi_1 ._container_17zvi_19:not(:has(._sidebar_17zvi_46)) {
+    ._page_1yc3p_1 ._container_1yc3p_17:not(:has(._sidebar_1yc3p_48)) {
+      grid-template-areas: "header panel" "content panel";
+      grid-template-columns: 1fr var(--third-col);
       --first-col: 0px;
     }
-    ._page_17zvi_1 ._content_17zvi_36 {
-      grid-area: 1/2/2/3;
+    ._page_1yc3p_1 ._container_1yc3p_17:not(:has(._sidebar_1yc3p_48)) > ._content_1yc3p_34, ._page_1yc3p_1 ._container_1yc3p_17:not(:has(._sidebar_1yc3p_48)) > div:not(._panel_1yc3p_133) {
+      grid-column: 1;
+      width: 100%;
     }
-    ._page_17zvi_1 ._content_17zvi_36 ._virtual-scroll-container_17zvi_148 {
+    ._page_1yc3p_1 ._container_1yc3p_17:not(:has(._sidebar_1yc3p_48)) > ._panel_1yc3p_133 {
+      grid-column: 2;
+    }
+    ._page_1yc3p_1 ._content_1yc3p_34 ._virtual-scroll-container_1yc3p_152 {
       display: block;
     }
-    ._page_17zvi_1 ._sidebar_17zvi_46 {
-      grid-area: 1/1/2/2;
+    ._page_1yc3p_1 ._sidebar_1yc3p_48 {
       padding: 0;
       background-color: var(--background-color, #ffffff);
       border-inline-end: 0.0625rem solid var(--border-color-subdued, #dfe0e1);
       box-shadow: var(--shadow-color, rgba(20, 20, 20, 0.0784313725)) 0rem 0.125rem 0.5rem;
     }
-    ._page_17zvi_1 ._sidebar_17zvi_46 ._sidebar-header_17zvi_109 {
+    ._page_1yc3p_1 ._sidebar_1yc3p_48 ._sidebar-header_1yc3p_112 {
       background-color: var(--background-color, #ffffff);
       position: sticky;
       padding-block-start: 1.5rem;
@@ -209,35 +253,46 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
       margin-block-end: 0.25rem;
       z-index: 1;
     }
-    ._page_17zvi_1 ._sidebar_17zvi_46 ._sidebar-inner_17zvi_56 > div {
+    ._page_1yc3p_1 ._sidebar_1yc3p_48 ._sidebar-inner_1yc3p_59 > div {
       scrollbar-gutter: stable;
+      left: 0;
     }
   }
-  ._sidebar_17zvi_46._collapsed_17zvi_179 ._sidebar-inner_17zvi_56 {
+  ._sidebar_1yc3p_48._collapsed_1yc3p_215 ._sidebar-inner_1yc3p_59 {
     opacity: 0;
     display: none;
   }
   @container content (min-width: 768px) {
-    ._content_17zvi_36 ._content-inner_17zvi_41 {
+    ._content_1yc3p_34 ._content-inner_1yc3p_39 {
       padding-inline: 2rem;
     }
   }
   @container content (min-width: 1024px) {
-    ._content_17zvi_36 ._content-inner_17zvi_41 {
+    ._content_1yc3p_34 ._content-inner_1yc3p_39 {
       padding-inline: 2.5rem;
     }
   }
   @container content (min-width: 1280px) {
-    ._content_17zvi_36 ._content-inner_17zvi_41 {
+    ._content_1yc3p_34 ._content-inner_1yc3p_39 {
       padding-inline: 3rem;
     }
   }
+  @container content (min-width: 768px) {
+    ._content_1yc3p_34 ~ ._panel_1yc3p_133 ._panel-inner_1yc3p_141 {
+      padding-inline: 2rem;
+    }
+  }
   @container page (min-width: 768px) {
-    ._panel_17zvi_130 {
+    ._panel_1yc3p_133 ._panel-inner_1yc3p_141 {
+      padding-inline: 2rem;
+    }
+  }
+  @container page (min-width: 1024px) {
+    ._panel_1yc3p_133 {
       flex-direction: row;
       border-inline-start: 0.0625rem solid var(--border-color-subdued, #dfe0e1);
     }
-    ._panel_17zvi_130 ._panel-inner_17zvi_137 {
+    ._panel_1yc3p_133 ._panel-inner_1yc3p_141 {
       position: sticky;
       top: 0;
       height: calc(100dvh - var(--offset, 0px));
@@ -246,56 +301,72 @@ html:has(._page_17zvi_1)::-webkit-scrollbar {
       scrollbar-gutter: stable;
       padding-right: 1.5rem;
     }
-    ._panel_17zvi_130._small_17zvi_167 ._panel-inner_17zvi_137 {
+    ._panel_1yc3p_133._small_1yc3p_206 ._panel-inner_1yc3p_141 {
       min-width: 16rem;
     }
-    ._panel_17zvi_130._medium_17zvi_170 ._panel-inner_17zvi_137 {
+    ._panel_1yc3p_133._medium_1yc3p_209 ._panel-inner_1yc3p_141 {
       min-width: 24rem;
     }
-    ._panel_17zvi_130._large_17zvi_173 ._panel-inner_17zvi_137 {
+    ._panel_1yc3p_133._large_1yc3p_212 ._panel-inner_1yc3p_141 {
       min-width: 30rem;
     }
   }
-  ._panel_17zvi_130._noPadding_17zvi_257 ._panel-inner_17zvi_137 {
+  ._panel_1yc3p_133._noPadding_1yc3p_309 ._panel-inner_1yc3p_141 {
     padding: 0;
   }
-  ._panel_17zvi_130:not(._open_17zvi_167) ._panel-inner_17zvi_137 {
+  ._panel_1yc3p_133:not(._open_1yc3p_206) ._panel-inner_1yc3p_141 {
     overflow: clip;
     display: none;
     opacity: 0;
   }
   @starting-style {
-    ._sidebar_17zvi_46._collapsed_17zvi_179 ._sidebar-inner_17zvi_56 {
+    ._sidebar_1yc3p_48._collapsed_1yc3p_215 ._sidebar-inner_1yc3p_59 {
       opacity: 0;
       display: none;
     }
-    ._panel_17zvi_130:not(._open_17zvi_167) ._panel-inner_17zvi_137 {
+    ._panel_1yc3p_133:not(._open_1yc3p_206) ._panel-inner_1yc3p_141 {
       opacity: 0;
       display: none;
     }
   }
 }
 @layer application {
-  ._sidebar-adaptive-trigger_17zvi_115 {
+  ._sidebar-adaptive-trigger_1yc3p_118 {
     color: var(--foreground-color, #141414);
     background-color: var(--background-color-stronger, #eeeeee);
     justify-content: start;
     width: 100%;
   }
-  ._sidebar-adaptive-trigger_17zvi_115 ._sidebar-adaptive-trigger-icon_17zvi_283 {
+  ._sidebar-adaptive-trigger_1yc3p_118 ._sidebar-adaptive-trigger-icon_1yc3p_335 {
     flex-grow: 1;
   }
-  ._sidebar-adaptive-container_17zvi_124 > div {
+  ._sidebar-adaptive-container_1yc3p_127 > div {
     height: -webkit-fill-available;
     height: -moz-available;
     height: stretch;
   }
-  ._toggle-button-wrapper_17zvi_83 ._toggle-button_17zvi_83 {
+  ._toggle-button-wrapper_1yc3p_86 ._toggle-button_1yc3p_86 {
     padding: 0.5rem;
     min-width: 2rem;
     width: 2rem;
     height: 2rem;
     border-radius: 100%;
     border-color: var(--border-color-subdued, #dfe0e1);
+    --button-background-color: var(--background-color, #ffffff);
+  }
+  ._toggle-button-wrapper_1yc3p_86 ._toggle-button_1yc3p_86::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  ._toggle-button-wrapper_1yc3p_86 ._toggle-button_1yc3p_86:hover::before {
+    background-color: var(--overlay-color-hover, rgba(20, 20, 20, 0.0784313725));
+  }
+  ._toggle-button-wrapper_1yc3p_86 ._toggle-button_1yc3p_86:active::before {
+    background-color: var(--overlay-color-active, rgba(20, 20, 20, 0.1607843137));
+  }
+  ._header_1yc3p_161 ._layout_1yc3p_362 {
+    gap: 1rem;
   }
 }

package/dist/Page.js

@@ -1,2 +1,2 @@
-export { P as Page, c as PageContent, d as PagePanel, a as PageSidebar, b as PageSidebarHeader, P as default } from './Page-JFqqtmUf.js';
+export { P as Page, e as PageContent, d as PageHeader, c as PagePanel, a as PageSidebar, b as PageSidebarHeader, P as default } from './Page-DUA2NqcR.js';
 //# sourceMappingURL=Page.js.map