@primer/styled-react 0.0.0-20251007202211 → 0.0.0-20251007203417

package/dist/{Tooltip-DIHgr01r.js → components/PageHeader.js}

@@ -1,44 +1,7 @@
-import { Dialog as Dialog$1, Box, PageHeader as PageHeader$1, sx, Tooltip as Tooltip$1 } from '@primer/react';
-import React, { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { PageHeader as PageHeader$1, sx, Box } from '@primer/react';
 import styled from 'styled-components';
-
-const DialogImpl = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
-  // @ts-expect-error - PrimerDialog is not recognized as a valid component type
-  return /*#__PURE__*/jsx(Box, {
-    as: Dialog$1,
-    ref: ref,
-    ...props
-  });
-});
-const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Dialog$1.Header,
-    ref: ref,
-    ...props
-  });
-});
-const DialogBody = /*#__PURE__*/forwardRef(function DialogBody(props, ref) {
-  // @ts-expect-error - PrimerDialog.Body is not recognized as a valid component type
-  return /*#__PURE__*/jsx(Box, {
-    as: Dialog$1.Body,
-    ref: ref,
-    ...props
-  });
-});
-const DialogFooter = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Dialog$1.Footer,
-    ref: ref,
-    ...props
-  });
-});
-const Dialog = Object.assign(DialogImpl, {
-  Buttons: Dialog$1.Buttons,
-  Header: DialogHeader,
-  Body: DialogBody,
-  Footer: DialogFooter
-});
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledPageHeader = styled(PageHeader$1).withConfig({
   shouldForwardProp: prop => prop !== 'sx'
@@ -141,12 +104,4 @@ const PageHeader = Object.assign(PageHeaderImpl, {
   TrailingAction: PageHeader$1.TrailingAction
 });
 
-const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Tooltip$1,
-    ref: ref,
-    ...props
-  });
-});
-
-export { Dialog as D, PageHeader as P, Tooltip as T };
+export { PageHeader };

package/dist/components/PageLayout.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import { sx, PageLayout as PageLayout$1 } from '@primer/react';
+import { jsx } from 'react/jsx-runtime';
+
+const Wrapper = styled.div.withConfig({
+  displayName: "PageLayout__Wrapper",
+  componentId: "sc-pjybtc-0"
+})(["", ""], sx);
+const PageLayoutImpl = /*#__PURE__*/React.forwardRef((props, ref) => {
+  // @ts-expect-error - PrimerPageLayout is not recognized as a valid component type
+  return /*#__PURE__*/jsx(Wrapper, {
+    as: PageLayout$1,
+    ref: ref,
+    ...props
+  });
+});
+const PageLayoutContent = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(Wrapper, {
+    as: PageLayout$1.Content,
+    ref: ref,
+    ...props
+  });
+});
+const PageLayoutPane = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(Wrapper, {
+    as: PageLayout$1.Pane,
+    ref: ref,
+    ...props
+  });
+});
+const PageLayout = Object.assign(PageLayoutImpl, {
+  Content: PageLayoutContent,
+  Header: PageLayout$1.Header,
+  Pane: PageLayoutPane,
+  Footer: PageLayout$1.Footer
+});
+
+export { PageLayout };

package/dist/components/RadioGroup.js

@@ -0,0 +1,38 @@
+import { Box, RadioGroup as RadioGroup$1 } from '@primer/react';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const RadioGroupImpl = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: RadioGroup$1,
+    ...props
+  });
+};
+
+// Define local types based on the internal component props
+
+const CheckboxOrRadioGroupLabel = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: RadioGroup$1.Label,
+    ...props
+  });
+};
+const CheckboxOrRadioGroupCaption = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: RadioGroup$1.Caption,
+    ...props
+  });
+};
+const CheckboxOrRadioGroupValidation = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: RadioGroup$1.Validation,
+    ...props
+  });
+};
+const RadioGroup = Object.assign(RadioGroupImpl, {
+  Label: CheckboxOrRadioGroupLabel,
+  Caption: CheckboxOrRadioGroupCaption,
+  Validation: CheckboxOrRadioGroupValidation
+});
+
+export { RadioGroup };

package/dist/components/RelativeTime.js

@@ -0,0 +1,13 @@
+import { Box, RelativeTime as RelativeTime$1 } from '@primer/react';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function RelativeTime(props) {
+  // @ts-expect-error the types for Box are not correctly inferred here
+  return /*#__PURE__*/jsx(Box, {
+    as: RelativeTime$1,
+    ...props
+  });
+}
+
+export { RelativeTime };

package/dist/components/SegmentedControl.js

@@ -0,0 +1,27 @@
+import { Box, SegmentedControl as SegmentedControl$1 } from '@primer/react';
+import { jsx } from 'react/jsx-runtime';
+
+const SegmentedControlButton = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: SegmentedControl$1.Button,
+    ...props
+  });
+};
+const SegmentedControlIconButton = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: SegmentedControl$1.IconButton,
+    ...props
+  });
+};
+const SegmentedControlImpl = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: SegmentedControl$1,
+    ...props
+  });
+};
+const SegmentedControl = Object.assign(SegmentedControlImpl, {
+  Button: SegmentedControlButton,
+  IconButton: SegmentedControlIconButton
+});
+
+export { SegmentedControl };

package/dist/components/Spinner.js

@@ -0,0 +1,12 @@
+import { Box, Spinner as Spinner$1 } from '@primer/react';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function Spinner(props) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Spinner$1,
+    ...props
+  });
+}
+
+export { Spinner };

package/dist/components/StateLabel.js

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

package/dist/components/SubNav.js

@@ -0,0 +1,23 @@
+import { Box, SubNav as SubNav$1 } from '@primer/react';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const SubNavImpl = /*#__PURE__*/forwardRef(function SubNav(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: SubNav$1,
+    ref: ref,
+    ...props
+  });
+});
+const SubNavLink = /*#__PURE__*/forwardRef(function SubNavLink(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: SubNav$1.Link,
+    ref: ref,
+    ...props
+  });
+});
+const SubNav = Object.assign(SubNavImpl, {
+  Link: SubNavLink
+});
+
+export { SubNav };

package/dist/components/Text.js

@@ -0,0 +1,26 @@
+import { Text as Text$1, sx } from '@primer/react';
+import styled from 'styled-components';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledText = styled(Text$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Text__StyledText",
+  componentId: "sc-1klmep6-0"
+})(["", ""], sx);
+const Text = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledText, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+});
+
+export { Text };

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export declare const defaultColorMode = "day";
+export type Theme = {
+    [key: string]: any;
+};
+type ColorMode = 'day' | 'night' | 'light' | 'dark';
+export type ColorModeWithAuto = ColorMode | 'auto';
+export type ThemeProviderProps = {
+    theme?: Theme;
+    colorMode?: ColorModeWithAuto;
+    dayScheme?: string;
+    nightScheme?: string;
+    preventSSRMismatch?: boolean;
+};
+export declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
+export declare function useTheme(): {
+    theme?: Theme;
+    colorScheme?: string;
+    colorMode?: ColorModeWithAuto;
+    resolvedColorMode?: ColorMode;
+    resolvedColorScheme?: string;
+    dayScheme?: string;
+    nightScheme?: string;
+    setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
+    setDayScheme: React.Dispatch<React.SetStateAction<string>>;
+    setNightScheme: React.Dispatch<React.SetStateAction<string>>;
+};
+export declare function useColorSchemeVar(values: Partial<Record<string, string>>, fallback: string): string;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAiF/E,CAAA;AAED,wBAAgB,QAAQ;YA9Gd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EAuG7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}

package/dist/components/ThemeProvider.js

@@ -0,0 +1,196 @@
+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 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, 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,36 @@
+import React from 'react';
+import { useTheme, theme, Token as Token$1 } from '@primer/react';
+import css from '@styled-system/css';
+import { jsx } from 'react/jsx-runtime';
+
+const Token = /*#__PURE__*/React.forwardRef(({
+  sx: sxProp,
+  style,
+  ...rest
+}, ref) => {
+  const contextTheme = useTheme();
+  const theme$1 = contextTheme.theme || theme;
+
+  // If no sx prop is provided, just return PrimerToken directly
+  if (!sxProp) {
+    return /*#__PURE__*/jsx(Token$1, {
+      ...rest,
+      style: style,
+      ref: ref
+    });
+  }
+
+  // Convert sx to CSS styles using the theme context
+  const sxStyles = css(sxProp)(theme$1);
+  const mergedStyle = {
+    ...sxStyles,
+    ...style
+  };
+  return /*#__PURE__*/jsx(Token$1, {
+    ...rest,
+    style: mergedStyle,
+    ref: ref
+  });
+});
+
+export { Token };

package/dist/components/Tooltip.js

@@ -0,0 +1,13 @@
+import { Box, Tooltip as Tooltip$1 } 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
+  });
+});
+
+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 };