@primer/styled-react 0.0.0-20251007221437 → 0.0.0-20251007222317

package/dist/index.js

@@ -1,24 +1,357 @@
-import { LinkButton as LinkButton$1, sx, Box, Header as Header$1, Flash as Flash$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1, RadioGroup as RadioGroup$1, SegmentedControl as SegmentedControl$1, SubNav as SubNav$1, Timeline as Timeline$1, Checkbox as Checkbox$1, CounterLabel as CounterLabel$1, RelativeTime as RelativeTime$1, Spinner as Spinner$1, StateLabel as StateLabel$1, ToggleSwitch as ToggleSwitch$1 } from '@primer/react';
-export { ActionList, ActionMenu, Autocomplete, Avatar, Box, Breadcrumbs, Button, CheckboxGroup, CircleBadge, Details, Dialog, FormControl, Heading, IconButton, Label, Link, NavList, Overlay, PageLayout, Select, Text, TextInput, Textarea, ThemeProvider, Token, Tooltip, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
-import { forwardRef } from 'react';
+import { ActionList as ActionList$1, sx, ActionMenu as ActionMenu$1, Autocomplete as Autocomplete$1, Box, Avatar as Avatar$1, Breadcrumbs as Breadcrumbs$1, Button, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CircleBadge as CircleBadge$1, CounterLabel as CounterLabel$1, Flash as Flash$1, Header as Header$1, Heading as Heading$1, IconButton as IconButton$1, Label as Label$1, Link as Link$1, LinkButton as LinkButton$1, NavList as NavList$1, Overlay as Overlay$1, PageLayout as PageLayout$1, RadioGroup as RadioGroup$1, RelativeTime as RelativeTime$1, SegmentedControl as SegmentedControl$1, Spinner as Spinner$1, StateLabel as StateLabel$1, SubNav as SubNav$1, Text as Text$1, TextInput as TextInput$1, Timeline as Timeline$1, ToggleSwitch as ToggleSwitch$1, useTheme, theme, Token as Token$1, Truncate as Truncate$1, UnderlineNav as UnderlineNav$1 } from '@primer/react';
+export { Box, Details, FormControl, ProgressBar, Select, Textarea, ThemeProvider, merge, sx, theme, themeGet, useColorSchemeVar, useTheme } from '@primer/react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
-export { P as PageHeader } from './PageHeader-BYlYLcfB.js';
+export { D as Dialog, P as PageHeader, T as Tooltip } from './Tooltip-DIHgr01r.js';
+import css from '@styled-system/css';
 
-const LinkButton = styled(LinkButton$1).withConfig({
+const StyledActionList = styled(ActionList$1).withConfig({
   shouldForwardProp: prop => prop !== 'sx'
 }).withConfig({
-  displayName: "LinkButton",
-  componentId: "sc-1v6zkmg-0"
+  displayName: "ActionList__StyledActionList",
+  componentId: "sc-hw2362-0"
+})(["", ""], sx);
+const ActionListImpl = /*#__PURE__*/React.forwardRef(function ActionListImpl({
+  as,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/jsx(StyledActionList, {
+    ref: ref,
+    ...rest,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+});
+const ActionListLinkItem = styled(ActionList$1.LinkItem).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListLinkItem",
+  componentId: "sc-hw2362-1"
+})(["", ""], sx);
+const StyledActionListTrailingAction = styled(ActionList$1.TrailingAction).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListTrailingAction",
+  componentId: "sc-hw2362-2"
+})(["", ""], sx);
+const ActionListTrailingAction = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    as,
+    ...rest
+  } = props;
+  return /*#__PURE__*/jsx(StyledActionListTrailingAction, {
+    ...rest,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+const StyledActionListItem = styled(ActionList$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListItem",
+  componentId: "sc-hw2362-3"
+})(["", ""], sx);
+const ActionListItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledActionListItem, {
+  ref: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+}));
+const ActionListGroup = styled(ActionList$1.Group).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListGroup",
+  componentId: "sc-hw2362-4"
+})(["", ""], sx);
+const ActionListDivider = styled(ActionList$1.Divider).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListDivider",
+  componentId: "sc-hw2362-5"
+})(["", ""], sx);
+const ActionListLeadingVisual = styled(ActionList$1.LeadingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListLeadingVisual",
+  componentId: "sc-hw2362-6"
+})(["", ""], sx);
+const ActionListTrailingVisual = styled(ActionList$1.TrailingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListTrailingVisual",
+  componentId: "sc-hw2362-7"
+})(["", ""], sx);
+const ActionList = Object.assign(ActionListImpl, {
+  Item: ActionListItem,
+  LinkItem: ActionListLinkItem,
+  Group: ActionListGroup,
+  GroupHeading: ActionList$1.GroupHeading,
+  Divider: ActionListDivider,
+  Description: ActionList$1.Description,
+  LeadingVisual: ActionListLeadingVisual,
+  TrailingVisual: ActionListTrailingVisual,
+  Heading: ActionList$1.Heading,
+  TrailingAction: ActionListTrailingAction
+});
+
+const ActionMenuOverlay = styled(ActionMenu$1.Overlay).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionMenu__ActionMenuOverlay",
+  componentId: "sc-w5s60e-0"
+})(["", ""], sx);
+const ActionMenu = Object.assign(ActionMenu$1, {
+  Button: ActionMenu$1.Button,
+  Anchor: ActionMenu$1.Anchor,
+  Overlay: ActionMenuOverlay,
+  Divider: ActionMenu$1.Divider
+});
+
+const AutocompleteOverlay = styled(Autocomplete$1.Overlay).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Autocomplete__AutocompleteOverlay",
+  componentId: "sc-j8ax2e-0"
+})(["", ""], sx);
+const Autocomplete = Object.assign(Autocomplete$1, {
+  Context: Autocomplete$1.Context,
+  Input: Autocomplete$1.Input,
+  Menu: Autocomplete$1.Menu,
+  Overlay: AutocompleteOverlay
+});
+
+const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Avatar$1,
+    ref: ref,
+    ...props
+  });
+});
+
+const BreadcrumbsImpl = styled(Breadcrumbs$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsImpl",
+  componentId: "sc-1qj8pw-0"
+})(["", ""], sx);
+const StyledBreadcrumbsItem = styled(Breadcrumbs$1.Item).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Breadcrumbs__StyledBreadcrumbsItem",
+  componentId: "sc-1qj8pw-1"
+})(["", ""], sx);
+function BreadcrumbsItem({
+  as,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(StyledBreadcrumbsItem, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+}
+const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
+  Item: BreadcrumbsItem
+});
+
+/**
+ * @deprecated Use the `Breadcrumbs` component instead (i.e. `<Breadcrumb>` → `<Breadcrumbs>`)
+ */
+const Breadcrumb = Breadcrumbs;
+
+const StyledButtonComponent = /*#__PURE__*/forwardRef(({
+  sx,
+  ...rest
+}, ref) => {
+  const {
+    block,
+    size = 'medium',
+    leadingVisual,
+    trailingVisual,
+    trailingAction
+  } = rest;
+  let sxStyles = {};
+  const style = {};
+  if (sx !== null && Object.keys(sx || {}).length > 0) {
+    sxStyles = generateCustomSxProp({
+      block,
+      size,
+      leadingVisual,
+      trailingVisual,
+      trailingAction
+    }, sx);
+    const {
+      color
+    } = sx;
+    if (color) style['--button-color'] = color;
+  }
+  return /*#__PURE__*/jsx(Box, {
+    as: Button,
+    style: style,
+    sx: sxStyles,
+    ref: ref,
+    ...rest
+  });
+});
+const ButtonComponent = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledButtonComponent, {
+  ref: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {})
+}));
+
+// This function is used to generate a custom cssSelector for the sxProp
+
+// The usual sx prop can like this:
+// sx={{
+//   [`@media (max-width: 768px)`]: {
+//     '& > ul': {
+//       backgroundColor: 'deeppink',
+//     },
+//     '&:hover': {
+//       backgroundColor: 'yellow',
+//     },
+//   },
+//  '&:hover': {
+//     backgroundColor: 'yellow',
+//   },
+//  '&': {
+//  width : 320px
+// }
+// }}
+//*
+/* What we want for Button styles is this:
+sx={{
+//   [`@media (max-width: 768px)`]: {
+//     '&[data-attribute="something"] > ul': {
+//       backgroundColor: 'deeppink',
+//     },
+//     '&[data-attribute="something"]:hover': {
+//       backgroundColor: 'yellow',
+//     },
+//   },
+//  '&[data-attribute="something"]:hover': {
+//     backgroundColor: 'yellow',
+//   },
+//  '&[data-attribute="something"]': {
+//     width : 320px
+//  }
+// }}
+
+// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
+*/
+function generateCustomSxProp(props, providedSx) {
+  // Possible data attributes: data-size, data-block, data-no-visuals
+  const size = `[data-size="${props.size}"]`;
+  const block = props.block ? `[data-block="block"]` : '';
+  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';
+
+  // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
+  const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]
+
+  const customSxProp = {};
+  if (!providedSx) return customSxProp;else {
+    customSxProp[cssSelector] = providedSx;
+    return customSxProp;
+  }
+}
+ButtonComponent.displayName = 'Button';
+
+const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Checkbox$1,
+    ref: ref,
+    ...props
+  });
+});
+
+const CheckboxGroupImpl = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1,
+    ...props
+  });
+};
+
+// Define local types based on the internal component props
+
+const CheckboxOrRadioGroupLabel$1 = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1.Label,
+    ...props
+  });
+};
+const CheckboxOrRadioGroupCaption$1 = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1.Caption,
+    ...props
+  });
+};
+const CheckboxOrRadioGroupValidation$1 = props => {
+  return /*#__PURE__*/jsx(Box, {
+    as: CheckboxGroup$1.Validation,
+    ...props
+  });
+};
+const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
+  Label: CheckboxOrRadioGroupLabel$1,
+  Caption: CheckboxOrRadioGroupCaption$1,
+  Validation: CheckboxOrRadioGroupValidation$1
+});
+
+const CircleBadge = styled(CircleBadge$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "CircleBadge",
+  componentId: "sc-1u7lp3v-0"
 })(["", ""], sx);
 
-const HeaderImpl = /*#__PURE__*/forwardRef(function Header(props, ref) {
+const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: CounterLabel$1,
+    ref: ref,
+    ...props
+  });
+});
+
+const Flash = styled(Flash$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Flash",
+  componentId: "sc-413izo-0"
+})(["", ""], sx);
+
+const StyledHeader = /*#__PURE__*/forwardRef(function Header(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: Header$1,
     ref: ref,
     ...props
   });
 });
+const HeaderImpl = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledHeader, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
 const HeaderItem = /*#__PURE__*/forwardRef(function HeaderItem(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: Header$1.Item,
@@ -26,38 +359,204 @@ const HeaderItem = /*#__PURE__*/forwardRef(function HeaderItem(props, ref) {
     ...props
   });
 });
-const HeaderLink = /*#__PURE__*/forwardRef(function HeaderLink(props, ref) {
+const StyledHeaderLink = /*#__PURE__*/forwardRef(function HeaderLink(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: Header$1.Link,
     ref: ref,
     ...props
   });
 });
+const HeaderLink = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledHeaderLink, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
 const Header = Object.assign(HeaderImpl, {
   Item: HeaderItem,
   Link: HeaderLink
 });
 
-const Flash = styled(Flash$1).withConfig({
+const Heading = styled(Heading$1).withConfig({
   shouldForwardProp: prop => prop !== 'sx'
 }).withConfig({
-  displayName: "Flash",
-  componentId: "sc-413izo-0"
+  displayName: "Heading",
+  componentId: "sc-1vc165i-0"
 })(["", ""], sx);
 
-function Spinner(props) {
+const StyledIconButton = /*#__PURE__*/forwardRef(({
+  sx,
+  ...rest
+}, ref) => {
+  let sxStyles = sx;
+  // grap the button props that have associated data attributes in the styles
+  const {
+    size = 'medium'
+  } = rest;
+  if (sx !== null && sx !== undefined && Object.keys(sx).length > 0) {
+    sxStyles = generateCustomSxProp({
+      size
+    }, sx);
+  }
   return /*#__PURE__*/jsx(Box, {
-    as: Spinner$1,
+    sx: sxStyles,
+    as: IconButton$1,
+    ref: ref,
+    ...rest
+  });
+});
+const IconButton = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledIconButton, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  ref: ref
+}));
+
+const StyledLabel = /*#__PURE__*/forwardRef(function Label(props, ref) {
+  return /*#__PURE__*/jsx(Box, {
+    as: Label$1,
+    ref: ref,
     ...props
   });
-}
-function RelativeTime(props) {
-  // @ts-expect-error the types for Box are not correctly inferred here
+});
+const Label = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledLabel, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+
+const StyledLink = styled(Link$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Link__StyledLink",
+  componentId: "sc-1syctfj-0"
+})(["", ""], sx);
+const Link = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledLink, {
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+
+const LinkButton = styled(LinkButton$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "LinkButton",
+  componentId: "sc-1v6zkmg-0"
+})(["", ""], sx);
+
+const NavListImpl = /*#__PURE__*/forwardRef(function NavList(props, ref) {
   return /*#__PURE__*/jsx(Box, {
-    as: RelativeTime$1,
+    as: NavList$1,
+    ref: ref,
     ...props
   });
-}
+});
+const NavListItem = /*#__PURE__*/forwardRef(function NavListItem(props, ref) {
+  // @ts-expect-error - PrimerNavList.Item is not recognized as a valid component type
+  return /*#__PURE__*/jsx(Box, {
+    as: NavList$1.Item,
+    ref: ref,
+    ...props
+  });
+});
+const NavListGroup = /*#__PURE__*/forwardRef(function NavListGroup(props, ref) {
+  // @ts-expect-error - PrimerNavList.Group is not recognized as a valid component type
+  return /*#__PURE__*/jsx(Box, {
+    as: NavList$1.Group,
+    ref: ref,
+    ...props
+  });
+});
+const NavListGroupHeading = /*#__PURE__*/forwardRef(function NavListGroupHeading(props, ref) {
+  // @ts-expect-error - PrimerNavList.GroupHeading is not recognized as a valid component type
+  return /*#__PURE__*/jsx(Box, {
+    as: NavList$1.GroupHeading,
+    ref: ref,
+    ...props
+  });
+});
+const NavListLeadingVisual = /*#__PURE__*/forwardRef(function NavListLeadingVisual(props, ref) {
+  // @ts-expect-error - PrimerNavList.LeadingVisual is not recognized as a valid component type
+  return /*#__PURE__*/jsx(Box, {
+    as: NavList$1.LeadingVisual,
+    ref: ref,
+    ...props
+  });
+});
+const NavList = Object.assign(NavListImpl, {
+  Item: NavListItem,
+  Group: NavListGroup,
+  GroupHeading: NavListGroupHeading,
+  LeadingVisual: NavListLeadingVisual,
+  SubNav: NavList$1.SubNav,
+  Divider: NavList$1.Divider,
+  TrailingVisual: NavList$1.TrailingVisual,
+  TrailingAction: NavList$1.TrailingAction,
+  GroupExpand: NavList$1.GroupExpand
+});
+
+const Overlay = styled(Overlay$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Overlay",
+  componentId: "sc-tjbd74-0"
+})(["", ""], sx);
+
+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
+});
+
 const RadioGroupImpl = props => {
   return /*#__PURE__*/jsx(Box, {
     as: RadioGroup$1,
@@ -90,6 +589,15 @@ const RadioGroup = Object.assign(RadioGroupImpl, {
   Caption: CheckboxOrRadioGroupCaption,
   Validation: CheckboxOrRadioGroupValidation
 });
+
+function RelativeTime(props) {
+  // @ts-expect-error the types for Box are not correctly inferred here
+  return /*#__PURE__*/jsx(Box, {
+    as: RelativeTime$1,
+    ...props
+  });
+}
+
 const SegmentedControlButton = props => {
   return /*#__PURE__*/jsx(Box, {
     as: SegmentedControl$1.Button,
@@ -112,20 +620,14 @@ const SegmentedControl = Object.assign(SegmentedControlImpl, {
   Button: SegmentedControlButton,
   IconButton: SegmentedControlIconButton
 });
-const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, ref) {
-  return /*#__PURE__*/jsx(Box, {
-    as: Checkbox$1,
-    ref: ref,
-    ...props
-  });
-});
-const CounterLabel = /*#__PURE__*/forwardRef(function CounterLabel(props, ref) {
+
+function Spinner(props) {
   return /*#__PURE__*/jsx(Box, {
-    as: CounterLabel$1,
-    ref: ref,
+    as: Spinner$1,
     ...props
   });
-});
+}
+
 const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: StateLabel$1,
@@ -133,6 +635,7 @@ const StateLabel = /*#__PURE__*/forwardRef(function StateLabel(props, ref) {
     ...props
   });
 });
+
 const SubNavImpl = /*#__PURE__*/forwardRef(function SubNav(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: SubNav$1,
@@ -150,6 +653,59 @@ const SubNavLink = /*#__PURE__*/forwardRef(function SubNavLink(props, ref) {
 const SubNav = Object.assign(SubNavImpl, {
   Link: SubNavLink
 });
+
+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
+});
+
+const StyledTextInput = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(Box, {
+    as: TextInput$1,
+    ref: ref,
+    ...props
+  });
+});
+const TextInputImpl = /*#__PURE__*/forwardRef(({
+  as,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsx(StyledTextInput, {
+    ref: ref,
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {})
+  });
+});
+const TextInputAction = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(Box, {
+    as: TextInput$1.Action,
+    ref: ref,
+    ...props
+  });
+});
+const TextInput = Object.assign(TextInputImpl, {
+  Action: TextInputAction
+});
+TextInputAction.displayName = 'TextInputAction';
+TextInputImpl.displayName = 'TextInput';
+
 const TimelineImpl = /*#__PURE__*/forwardRef(function Timeline(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: Timeline$1,
@@ -190,6 +746,7 @@ const Timeline = Object.assign(TimelineImpl, {
   Body: TimelineBody,
   Break: TimelineBreak
 });
+
 const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: ToggleSwitch$1,
@@ -197,27 +754,79 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(function ToggleSwitch(props, ref) {
     ...props
   });
 });
+
+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
+  });
+});
+
 const Truncate = styled(Truncate$1).withConfig({
   shouldForwardProp: prop => prop !== 'sx'
 }).withConfig({
-  displayName: "src__Truncate",
-  componentId: "sc-1hfjsa7-0"
+  displayName: "Truncate",
+  componentId: "sc-x3i4it-0"
 })(["", ""], sx);
-const UnderlineNavImpl = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
+
+const StyledUnderlineNav = /*#__PURE__*/forwardRef(function UnderlineNav(props, ref) {
   return /*#__PURE__*/jsx(Box, {
     as: UnderlineNav$1,
     ref: ref,
     ...props
   });
 });
-const UnderlineNavItem = styled(UnderlineNav$1.Item).withConfig({
+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: "src__UnderlineNavItem",
-  componentId: "sc-1hfjsa7-1"
+  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 { Checkbox, CounterLabel, Flash, Header, LinkButton, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Timeline, ToggleSwitch, Truncate, UnderlineNav };
+export { ActionList, ActionMenu, Autocomplete, Avatar, Breadcrumb, Breadcrumbs, ButtonComponent as Button, Checkbox, CheckboxGroup, CircleBadge, CounterLabel, Flash, Header, Heading, IconButton, Label, Link, LinkButton, NavList, Overlay, PageLayout, RadioGroup, RelativeTime, SegmentedControl, Spinner, StateLabel, SubNav, Text, TextInput, Timeline, ToggleSwitch, Token, Truncate, UnderlineNav };