@primer/styled-react 1.0.0-rc.7 → 1.0.0-rc.8

package/dist/components/ThemeProvider.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { theme, useId, useSyncedState } from '@primer/react';
+import deepmerge from 'deepmerge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const defaultColorMode = 'day';
+const defaultDayScheme = 'light';
+const defaultNightScheme = 'dark';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const ThemeContext = /*#__PURE__*/React.createContext({
+  setColorMode: () => null,
+  setDayScheme: () => null,
+  setNightScheme: () => null
+});
+
+// inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
+const getServerHandoff = id => {
+  try {
+    const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
+    if (serverData) return JSON.parse(serverData);
+  } catch (_error) {
+    // if document/element does not exist or JSON is invalid, supress error
+  }
+  return {};
+};
+const ThemeProvider = ({
+  children,
+  ...props
+}) => {
+  // Get fallback values from parent ThemeProvider (if exists)
+  const {
+    theme: fallbackTheme,
+    colorMode: fallbackColorMode,
+    dayScheme: fallbackDayScheme,
+    nightScheme: fallbackNightScheme
+  } = useTheme();
+
+  // Initialize state
+  const theme$1 = props.theme ?? fallbackTheme ?? theme;
+  const uniqueDataId = useId();
+  const {
+    resolvedServerColorMode
+  } = getServerHandoff(uniqueDataId);
+  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
+  const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
+  const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
+  const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
+  const systemColorMode = useSystemColorMode();
+  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
+  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
+  const {
+    resolvedTheme,
+    resolvedColorScheme
+  } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
+
+  // this effect will only run on client
+  React.useEffect(function updateColorModeAfterServerPassthrough() {
+    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
+    if (resolvedColorModePassthrough.current) {
+      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
+      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
+        window.setTimeout(() => {
+          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
+          // ref: https://github.com/reactwg/react-18/discussions/21
+          ReactDOM.flushSync(() => {
+            // override colorMode to whatever is resolved on the client to get a re-render
+            setColorMode(resolvedColorModeOnClient);
+          });
+
+          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
+          setColorMode(colorMode);
+        });
+      }
+      resolvedColorModePassthrough.current = null;
+    }
+  }, [colorMode, systemColorMode, setColorMode]);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: {
+      theme: resolvedTheme,
+      colorScheme,
+      colorMode,
+      resolvedColorMode,
+      resolvedColorScheme,
+      dayScheme,
+      nightScheme,
+      setColorMode,
+      setDayScheme,
+      setNightScheme
+    },
+    children: /*#__PURE__*/jsxs(ThemeProvider$1, {
+      theme: resolvedTheme,
+      children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
+        type: "application/json",
+        id: `__PRIMER_DATA_${uniqueDataId}__`,
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            resolvedServerColorMode: resolvedColorMode
+          })
+        }
+      }) : null]
+    })
+  });
+};
+function useTheme() {
+  return React.useContext(ThemeContext);
+}
+function useColorSchemeVar(values, fallback) {
+  const {
+    colorScheme = ''
+  } = useTheme();
+  return values[colorScheme] ?? fallback;
+}
+function useSystemColorMode() {
+  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
+  React.useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
+    function matchesMediaToColorMode(matches) {
+      return matches ? 'night' : 'day';
+    }
+    function handleChange(event) {
+      const isNight = event.matches;
+      setSystemColorMode(matchesMediaToColorMode(isNight));
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (media) {
+      // just in case the preference changed before the event listener was attached
+      const isNight = media.matches;
+      setSystemColorMode(matchesMediaToColorMode(isNight));
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (media.addEventListener !== undefined) {
+        media.addEventListener('change', handleChange);
+        return function cleanup() {
+          media.removeEventListener('change', handleChange);
+        };
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      else if (media.addListener !== undefined) {
+        media.addListener(handleChange);
+        return function cleanup() {
+          media.removeListener(handleChange);
+        };
+      }
+    }
+  }, []);
+  return systemColorMode;
+}
+function getSystemColorMode() {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
+    return 'night';
+  }
+  return 'day';
+}
+function resolveColorMode(colorMode, systemColorMode) {
+  switch (colorMode) {
+    case 'auto':
+      return systemColorMode;
+    default:
+      return colorMode;
+  }
+}
+function chooseColorScheme(colorMode, dayScheme, nightScheme) {
+  switch (colorMode) {
+    case 'day':
+    case 'light':
+      return dayScheme;
+    case 'dark':
+    case 'night':
+      return nightScheme;
+  }
+}
+function applyColorScheme(theme, colorScheme) {
+  if (!theme.colorSchemes) {
+    return {
+      resolvedTheme: theme,
+      resolvedColorScheme: undefined
+    };
+  }
+  if (!theme.colorSchemes[colorScheme]) {
+    // eslint-disable-next-line no-console
+    console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
+
+    // Apply the first defined color scheme
+    const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
+    return {
+      resolvedTheme: deepmerge(theme, theme.colorSchemes[defaultColorScheme]),
+      resolvedColorScheme: defaultColorScheme
+    };
+  }
+  return {
+    resolvedTheme: deepmerge(theme, theme.colorSchemes[colorScheme]),
+    resolvedColorScheme: colorScheme
+  };
+}
+
+export { ThemeProvider, ThemeProvider as default, defaultColorMode, useColorSchemeVar, useTheme };

package/dist/components/Timeline.js

@@ -0,0 +1,46 @@
+import { Box, Timeline as Timeline$1 } from '@primer/react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1,
+    ref: ref,
+    ...props
+  });
+});
+const TimelineItem = /*#__PURE__*/forwardRef(function TimelineItem(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Item,
+    ref: ref,
+    ...props
+  });
+});
+function TimelineBadge(props) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Badge,
+    ...props
+  });
+}
+const TimelineBody = /*#__PURE__*/forwardRef(function TimelineBody(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Body,
+    ref: ref,
+    ...props
+  });
+});
+const TimelineBreak = /*#__PURE__*/forwardRef(function TimelineBreak(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Timeline$1.Break,
+    ref: ref,
+    ...props
+  });
+});
+const Timeline = Object.assign(TimelineImpl, {
+  Item: TimelineItem,
+  Badge: TimelineBadge,
+  Body: TimelineBody,
+  Break: TimelineBreak
+});
+
+export { Timeline };

package/dist/components/ToggleSwitch.js

@@ -0,0 +1,13 @@
+import { Box, ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: ToggleSwitch$1,
+    ref: ref,
+    ...props
+  });
+});
+
+export { ToggleSwitch };

package/dist/components/Token.js

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import { Token as Token$1, sx } from '@primer/react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledToken = styled(Token$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Token__StyledToken",
+  componentId: "sc-ldn0r8-0"
+})(["", ""], sx);
+const Token = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledToken, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+
+export { Token };

package/dist/components/Tooltip.d.ts

@@ -1,10 +1,6 @@
-import { type TooltipProps as PrimerTooltipProps, type SxProp } from '@primer/react';
-import { type TooltipProps as PrimerDeprecatedTooltipProps } from '@primer/react/deprecated';
+import { type TooltipProps as PrimerTooltipProps, type SxProp, type SlotMarker } from '@primer/react';
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
 type TooltipProps = PrimerTooltipProps & SxProp;
-declare const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>>;
+declare const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>> & SlotMarker;
 export { Tooltip, type TooltipProps };
-type DeprecatedTooltipProps = PrimerDeprecatedTooltipProps & SxProp;
-declare function DeprecatedTooltip(props: DeprecatedTooltipProps): import("react").JSX.Element;
-export { DeprecatedTooltip, type DeprecatedTooltipProps };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,IAAI,kBAAkB,EAAE,KAAK,MAAM,EAAC,MAAM,eAAe,CAAA;AAC5G,OAAO,EAEL,KAAK,YAAY,IAAI,4BAA4B,EAClD,MAAM,0BAA0B,CAAA;AAEjC,OAAO,EAAa,KAAK,yBAAyB,EAAE,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAEpF,KAAK,YAAY,GAAG,kBAAkB,GAAG,MAAM,CAAA;AAE/C,QAAA,MAAM,OAAO,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,CAKnF,CAAA;AAEF,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAC,CAAA;AAEnC,KAAK,sBAAsB,GAAG,4BAA4B,GAAG,MAAM,CAAA;AAEnE,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAEvD;AACD,OAAO,EAAC,iBAAiB,EAAE,KAAK,sBAAsB,EAAC,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,YAAY,IAAI,kBAAkB,EACvC,KAAK,MAAM,EACX,KAAK,UAAU,EAChB,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAa,KAAK,yBAAyB,EAAE,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAEpF,KAAK,YAAY,GAAG,kBAAkB,GAAG,MAAM,CAAA;AAE/C,QAAA,MAAM,OAAO,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG,UAKvF,CAAA;AAIF,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAC,CAAA"}

package/dist/components/Tooltip.js

@@ -0,0 +1,14 @@
+import { Tooltip as Tooltip$1, Box } from '@primer/react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Tooltip$1,
+    ref: ref,
+    ...props
+  });
+});
+Tooltip.__SLOT__ = Tooltip$1.__SLOT__;
+
+export { Tooltip };

package/dist/components/Truncate.js

@@ -0,0 +1,11 @@
+import { Truncate as Truncate$1, sx } from '@primer/react';
+import styled from 'styled-components';
+
+const Truncate = styled(Truncate$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Truncate",
+  componentId: "sc-x3i4it-0"
+})(["", ""], sx);
+
+export { Truncate };

package/dist/components/UnderlineNav.js

@@ -0,0 +1,43 @@
+import { UnderlineNav as UnderlineNav$1, sx, Box } from '@primer/react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledUnderlineNav = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: UnderlineNav$1,
+    ref: ref,
+    ...props
+  });
+});
+const UnderlineNavImpl = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledUnderlineNav, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+const StyledUnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "UnderlineNav__StyledUnderlineNavItem",
+  componentId: "sc-dx6br2-0"
+})(["", ""], sx);
+const UnderlineNavItem = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledUnderlineNavItem, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+const UnderlineNav = Object.assign(UnderlineNavImpl, {
+  Item: UnderlineNavItem
+});
+
+export { UnderlineNav, UnderlineNavImpl, UnderlineNavItem };

package/dist/components/UnderlinePanels.d.ts

@@ -1,12 +1,14 @@
-import { type UnderlinePanelsProps as PrimerUnderlinePanelsProps, type UnderlinePanelsPanelProps, type UnderlinePanelsTabProps } from '@primer/react/experimental';
+import { UnderlinePanels as PrimerUnderlinePanels, type UnderlinePanelsProps as PrimerUnderlinePanelsProps, type UnderlinePanelsPanelProps, type UnderlinePanelsTabProps } from '@primer/react/experimental';
 import { type SxProp } from '../sx';
 type UnderlinePanelsProps = PrimerUnderlinePanelsProps & SxProp;
-declare const UnderlinePanels: {
+declare const UnderlinePanelsImpl: {
     ({ as, ...props }: UnderlinePanelsProps): import("react").JSX.Element;
     displayName: string;
-} & {
-    Tab: import("react").FC<UnderlinePanelsTabProps>;
-    Panel: import("react").FC<UnderlinePanelsPanelProps>;
+    __SLOT__: symbol | undefined;
+};
+declare const UnderlinePanels: typeof UnderlinePanelsImpl & {
+    Tab: typeof PrimerUnderlinePanels.Tab;
+    Panel: typeof PrimerUnderlinePanels.Panel;
 };
 export { UnderlinePanels, type UnderlinePanelsProps, type UnderlinePanelsTabProps, type UnderlinePanelsPanelProps };
 //# sourceMappingURL=UnderlinePanels.d.ts.map

package/dist/components/UnderlinePanels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../src/components/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,IAAI,0BAA0B,EACvD,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC7B,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,KAAK,oBAAoB,GAAG,0BAA0B,GAAG,MAAM,CAAA;AAe/D,QAAA,MAAM,eAAe;uBANwB,oBAAoB;;;;;CAS/D,CAAA;AAEF,OAAO,EAAC,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,uBAAuB,EAAE,KAAK,yBAAyB,EAAC,CAAA"}
+{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../src/components/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,qBAAqB,EACxC,KAAK,oBAAoB,IAAI,0BAA0B,EACvD,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC7B,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,KAAK,oBAAoB,GAAG,0BAA0B,GAAG,MAAM,CAAA;AAS/D,QAAA,MAAM,mBAAmB;uBAAoB,oBAAoB;;;CAEhE,CAAA;AAID,QAAA,MAAM,eAAe,EAAE,OAAO,mBAAmB,GAAG;IAClD,GAAG,EAAE,OAAO,qBAAqB,CAAC,GAAG,CAAA;IACrC,KAAK,EAAE,OAAO,qBAAqB,CAAC,KAAK,CAAA;CAIzC,CAAA;AAIF,OAAO,EAAC,eAAe,EAAE,KAAK,oBAAoB,EAAE,KAAK,uBAAuB,EAAE,KAAK,yBAAyB,EAAC,CAAA"}

package/dist/components/UnderlinePanels.js

@@ -0,0 +1,28 @@
+import { UnderlinePanels as UnderlinePanels$1 } from '@primer/react/experimental';
+import styled from 'styled-components';
+import { sx } from '@primer/react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledUnderlinePanels = styled(UnderlinePanels$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "UnderlinePanels__StyledUnderlinePanels",
+  componentId: "sc-1w35i85-0"
+})(["", ""], sx);
+
+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const UnderlinePanelsImpl = ({
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledUnderlinePanels, {
+  forwardedAs: as,
+  ...props
+});
+UnderlinePanelsImpl.displayName = 'UnderlinePanels';
+const UnderlinePanels = Object.assign(UnderlinePanelsImpl, {
+  Tab: UnderlinePanels$1.Tab,
+  Panel: UnderlinePanels$1.Panel
+});
+UnderlinePanelsImpl.__SLOT__ = UnderlinePanels$1.__SLOT__;
+
+export { UnderlinePanels };

package/dist/components/deprecated/ActionList.js

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import { ActionList as ActionList$1 } from '@primer/react/deprecated';
+import { sx, Box } from '@primer/react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const ActionListImpl = /*#__PURE__*/forwardRef(function ActionList(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: ActionList$1,
+    ref: ref,
+    ...props
+  });
+});
+const StyledActionListItem = styled(ActionList$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListItem",
+  componentId: "sc-1ugfmds-0"
+})(["", ""], sx);
+const ActionListItem = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledActionListItem, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+function ActionListGroup(props) {
+  return /*#__PURE__*/jsx(Box, {
+    as: ActionList$1.Group,
+    ...props
+  });
+}
+function ActionListDivider(props) {
+  return /*#__PURE__*/jsx(Box, {
+    as: ActionList$1.Divider,
+    ...props
+  });
+}
+const ActionList = Object.assign(ActionListImpl, {
+  Item: ActionListItem,
+  Group: ActionListGroup,
+  Divider: ActionListDivider
+});
+
+export { ActionList };

package/dist/components/deprecated/DialogV1.js

@@ -0,0 +1,44 @@
+import { Dialog as Dialog$1 } from '@primer/react/deprecated';
+import { Box } from '@primer/react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Dialog$1,
+    ref: ref,
+    ...props
+  });
+});
+const DialogImpl = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledDialog, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+const StyledDialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Dialog$1.Header,
+    ref: ref,
+    ...props
+  });
+});
+const DialogHeader = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledDialogHeader, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+const Dialog = Object.assign(DialogImpl, {
+  Header: DialogHeader
+});
+
+export { Dialog };

package/dist/components/deprecated/Octicon.js

@@ -0,0 +1,39 @@
+import { Octicon as Octicon$1 } from '@primer/react/deprecated';
+import styled from 'styled-components';
+import { sx } from '@primer/react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * @deprecated Use the icon component directly from `@primer/octicons-react` instead
+ */
+const StyledOcticon = styled(Octicon$1).withConfig({
+  shouldForwardProp(prop) {
+    return prop !== 'sx';
+  }
+}).withConfig({
+  displayName: "Octicon__StyledOcticon",
+  componentId: "sc-jtj3m8-0"
+})(["", ""], ({
+  color,
+  sx: sxProp
+}) => sx({
+  sx: {
+    color,
+    ...sxProp
+  }
+}));
+const Octicon = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledOcticon, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+
+export { Octicon, Octicon as default };

package/dist/components/deprecated/TabNav.js

@@ -0,0 +1,44 @@
+import { TabNav as TabNav$1 } from '@primer/react/deprecated';
+import { sx } from '@primer/react';
+import styled from 'styled-components';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledTabNav = styled(TabNav$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "TabNav__StyledTabNav",
+  componentId: "sc-13kad3t-0"
+})(["", ""], sx);
+const TabNavImpl = ({
+  as,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(StyledTabNav, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+};
+const StyledTabNavLink = styled(TabNav$1.Link).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "TabNav__StyledTabNavLink",
+  componentId: "sc-13kad3t-1"
+})(["", ""], sx);
+const TabNavLink = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledTabNavLink, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+const TabNav = Object.assign(TabNavImpl, {
+  Link: TabNavLink
+});
+
+export { TabNav };

package/dist/components/deprecated/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/deprecated/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,IAAI,kBAAkB,EAAC,MAAM,0BAA0B,CAAA;AAE1G,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,UAAU,CAAA;AACxC,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAI5C,KAAK,YAAY,GAAG,iBAAiB,CAAC,kBAAkB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAC,CAAA;AAQ7F,QAAA,MAAM,WAAW,uHAEf,CAAA;AAEF,QAAA,MAAM,OAAO,EAAkB,OAAO,WAAW,GAAG;IAClD,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB,CAAA;AAMD,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAC,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/deprecated/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,YAAY,IAAI,kBAAkB,EAAC,MAAM,0BAA0B,CAAA;AAE1G,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,UAAU,CAAA;AACxC,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK5C,KAAK,YAAY,GAAG,iBAAiB,CAAC,kBAAkB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAC,CAAA;AAQ7F,QAAA,MAAM,WAAW,uHAEf,CAAA;AAEF,QAAA,MAAM,OAAO,EAAkB,OAAO,WAAW,GAAG;IAClD,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB,CAAA;AAOD,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAC,CAAA"}

package/dist/components/deprecated/Tooltip.js

@@ -0,0 +1,32 @@
+import { Tooltip as Tooltip$1 } from '@primer/react/deprecated';
+import { forwardRef } from 'react';
+import { sx } from '@primer/react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledTooltip = styled(Tooltip$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Tooltip__StyledTooltip",
+  componentId: "sc-145jcib-0"
+})(["", ""], sx);
+const TooltipImpl = /*#__PURE__*/forwardRef(function Tooltip({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledTooltip, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+const Tooltip = TooltipImpl;
+
+// Preserve static properties from the original component
+Tooltip.alignments = Tooltip$1.alignments;
+Tooltip.directions = Tooltip$1.directions;
+Tooltip.__SLOT__ = Tooltip$1.__SLOT__;
+
+export { Tooltip };