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

package/dist/components/ActionList.d.ts

@@ -1,25 +1,33 @@
 import React from 'react';
-import { ActionList as PrimerActionList, type ActionListProps as PrimerActionListProps, type ActionListItemProps as PrimerActionListItemProps, type ActionListLinkItemProps as PrimerActionListLinkItemProps, type ActionListGroupProps as PrimerActionListGroupProps, type ActionListDividerProps as PrimerActionListDividerProps, type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps, type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps } from '@primer/react';
+import { ActionList as PrimerActionList, type ActionListProps as PrimerActionListProps, type ActionListItemProps as PrimerActionListItemProps, type ActionListLinkItemProps as PrimerActionListLinkItemProps, type ActionListGroupProps as PrimerActionListGroupProps, type ActionListDividerProps as PrimerActionListDividerProps, type ActionListLeadingVisualProps as PrimerActionListLeadingVisualProps, type ActionListTrailingVisualProps as PrimerActionListTrailingVisualProps, type SlotMarker } from '@primer/react';
 import { type SxProp } from '../sx';
 import type { ForwardRefComponent } from '../polymorphic';
 type PrimerActionListTrailingActionProps = React.ComponentProps<typeof PrimerActionList.TrailingAction>;
 export type ActionListProps<As extends React.ElementType = 'ul'> = PrimerActionListProps<As> & SxProp;
 export type ActionListItemProps = React.PropsWithChildren<PrimerActionListItemProps & SxProp>;
-export type ActionListLinkItemProps = React.PropsWithChildren<PrimerActionListLinkItemProps & SxProp>;
-export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp>;
+export type ActionListLinkItemProps = React.PropsWithChildren<PrimerActionListLinkItemProps & SxProp> & {
+    as?: React.ElementType;
+};
+export type ActionListGroupProps = React.PropsWithChildren<PrimerActionListGroupProps & SxProp> & {
+    as?: React.ElementType;
+};
 export type ActionListDividerProps = React.PropsWithChildren<PrimerActionListDividerProps & SxProp>;
-export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp>;
-export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp>;
+export type ActionListLeadingVisualProps = React.PropsWithChildren<PrimerActionListLeadingVisualProps & SxProp> & {
+    as?: React.ElementType;
+};
+export type ActionListTrailingVisualProps = React.PropsWithChildren<PrimerActionListTrailingVisualProps & SxProp> & {
+    as?: React.ElementType;
+};
 export type ActionListTrailingActionProps = React.PropsWithChildren<PrimerActionListTrailingActionProps & SxProp>;
 declare const ActionListImpl: React.ForwardRefExoticComponent<Omit<ActionListProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
-declare const ActionListLinkItem: ForwardRefComponent<'a', ActionListLinkItemProps>;
+declare const ActionListLinkItem: ForwardRefComponent<"a", ActionListLinkItemProps> & SlotMarker;
 type TrailingActionElements = 'button' | 'a';
-declare const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps>;
-declare const ActionListItem: ForwardRefComponent<"li", ActionListItemProps>;
-declare const ActionListGroup: React.ComponentType<ActionListGroupProps>;
-declare const ActionListDivider: React.ComponentType<ActionListDividerProps>;
-declare const ActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps>;
-declare const ActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps>;
+declare const ActionListTrailingAction: ForwardRefComponent<TrailingActionElements, ActionListTrailingActionProps> & SlotMarker;
+declare const ActionListItem: ForwardRefComponent<"li", ActionListItemProps> & SlotMarker;
+declare const ActionListGroup: React.ComponentType<ActionListGroupProps> & SlotMarker;
+declare const ActionListDivider: React.ComponentType<ActionListDividerProps> & SlotMarker;
+declare const ActionListLeadingVisual: React.ComponentType<ActionListLeadingVisualProps> & SlotMarker;
+declare const ActionListTrailingVisual: React.ComponentType<ActionListTrailingVisualProps> & SlotMarker;
 export declare const ActionList: typeof ActionListImpl & {
     Item: typeof ActionListItem;
     LinkItem: typeof ActionListLinkItem;
@@ -31,6 +39,6 @@ export declare const ActionList: typeof ActionListImpl & {
     TrailingVisual: typeof ActionListTrailingVisual;
     Heading: typeof PrimerActionList.Heading;
     TrailingAction: typeof ActionListTrailingAction;
-};
+} & SlotMarker;
 export {};
 //# sourceMappingURL=ActionList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionList.d.ts","sourceRoot":"","sources":["../../src/components/ActionList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionList.d.ts","sourceRoot":"","sources":["../../src/components/ActionList.tsx"],"names":[],"mappings":"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"}

package/dist/components/ActionList.js

@@ -0,0 +1,162 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ActionList as ActionList$1, sx } from '@primer/react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledActionList = styled(ActionList$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  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 StyledActionListLinkItem = styled(ActionList$1.LinkItem).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListLinkItem",
+  componentId: "sc-hw2362-1"
+})(["", ""], sx);
+const ActionListLinkItem = /*#__PURE__*/React.forwardRef(({
+  children,
+  as,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledActionListLinkItem, {
+  ref: ref,
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+}));
+ActionListLinkItem.displayName = 'ActionList.LinkItem';
+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 StyledActionListGroup = styled(ActionList$1.Group).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListGroup",
+  componentId: "sc-hw2362-4"
+})(["", ""], sx);
+const ActionListGroup = ({
+  children,
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledActionListGroup, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+});
+ActionListGroup.displayName = 'ActionList.Group';
+const ActionListDivider = styled(ActionList$1.Divider).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__ActionListDivider",
+  componentId: "sc-hw2362-5"
+})(["", ""], sx);
+const StyledActionListLeadingVisual = styled(ActionList$1.LeadingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListLeadingVisual",
+  componentId: "sc-hw2362-6"
+})(["", ""], sx);
+const ActionListLeadingVisual = ({
+  children,
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledActionListLeadingVisual, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+});
+ActionListLeadingVisual.displayName = 'ActionList.LeadingVisual';
+const StyledActionListTrailingVisual = styled(ActionList$1.TrailingVisual).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "ActionList__StyledActionListTrailingVisual",
+  componentId: "sc-hw2362-7"
+})(["", ""], sx);
+const ActionListTrailingVisual = ({
+  children,
+  as,
+  ...props
+}) => /*#__PURE__*/jsx(StyledActionListTrailingVisual, {
+  ...props,
+  ...(as ? {
+    forwardedAs: as
+  } : {}),
+  children: children
+});
+ActionListTrailingVisual.displayName = 'ActionList.TrailingVisual';
+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
+});
+
+// Assign slot markers after component definitions
+ActionListItem.__SLOT__ = ActionList$1.Item.__SLOT__;
+ActionListLinkItem.__SLOT__ = ActionList$1.LinkItem.__SLOT__;
+ActionListGroup.__SLOT__ = ActionList$1.Group.__SLOT__;
+ActionListDivider.__SLOT__ = ActionList$1.Divider.__SLOT__;
+ActionListLeadingVisual.__SLOT__ = ActionList$1.LeadingVisual.__SLOT__;
+ActionListTrailingVisual.__SLOT__ = ActionList$1.TrailingVisual.__SLOT__;
+ActionListTrailingAction.__SLOT__ = ActionList$1.TrailingAction.__SLOT__;
+
+export { ActionList };

package/dist/components/ActionMenu.d.ts

@@ -1,7 +1,7 @@
-import { ActionMenu as PrimerActionMenu, type SxProp } from '@primer/react';
+import { ActionMenu as PrimerActionMenu, type SxProp, type SlotMarker } from '@primer/react';
 import type { ComponentProps } from 'react';
 type ActionMenuOverlayProps = ComponentProps<typeof PrimerActionMenu.Overlay> & SxProp;
-declare const ActionMenuOverlay: React.ComponentType<ActionMenuOverlayProps>;
+declare const ActionMenuOverlay: React.ComponentType<ActionMenuOverlayProps> & SlotMarker;
 export declare const ActionMenu: typeof PrimerActionMenu & {
     Button: typeof PrimerActionMenu.Button;
     Anchor: typeof PrimerActionMenu.Anchor;

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

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/components/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,IAAI,gBAAgB,EAAE,KAAK,MAAM,EAAC,MAAM,eAAe,CAAA;AAGzE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AAEzC,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,MAAM,CAAA;AAEtF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAIlE,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,gBAAgB,GAAG;IACjD,MAAM,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAA;IACtC,MAAM,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAA;IACtC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAA;CAMxC,CAAA"}
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/components/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,IAAI,gBAAgB,EAAE,KAAK,MAAM,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAA;AAG1F,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AAEzC,KAAK,sBAAsB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG,MAAM,CAAA;AAEtF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,GAAG,UAMtE,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,gBAAgB,GAAG;IACjD,MAAM,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAA;IACtC,MAAM,EAAE,OAAO,gBAAgB,CAAC,MAAM,CAAA;IACtC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAA;CAMxC,CAAA"}

package/dist/components/ActionMenu.js

@@ -0,0 +1,18 @@
+import { ActionMenu as ActionMenu$1, sx } from '@primer/react';
+import styled from 'styled-components';
+
+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
+});
+ActionMenuOverlay.__SLOT__ = ActionMenu$1.Overlay.__SLOT__;
+
+export { ActionMenu };

package/dist/components/Autocomplete.d.ts

@@ -1,12 +1,14 @@
-import { Autocomplete as PrimerAutocomplete, type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps } from '@primer/react';
+import { Autocomplete as PrimerAutocomplete, type AutocompleteOverlayProps as PrimerAutocompleteOverlayProps, type AutocompleteInputProps as PrimerAutocompleteInputProps, type SlotMarker } from '@primer/react';
 import { type SxProp } from '../sx';
 import type { ComponentProps } from 'react';
 export type AutocompleteOverlayProps = PrimerAutocompleteOverlayProps & SxProp;
-declare const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps>;
+declare const AutocompleteOverlay: React.ComponentType<AutocompleteOverlayProps> & SlotMarker;
+export type AutocompleteInputProps = PrimerAutocompleteInputProps & SxProp;
+declare const AutocompleteInput: React.ComponentType<AutocompleteInputProps>;
 interface AutocompleteExport {
     (props: ComponentProps<typeof PrimerAutocomplete>): React.ReactNode;
     Context: typeof PrimerAutocomplete.Context;
-    Input: typeof PrimerAutocomplete.Input;
+    Input: typeof AutocompleteInput;
     Menu: typeof PrimerAutocomplete.Menu;
     Overlay: typeof AutocompleteOverlay;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,kBAAkB,EAClC,KAAK,wBAAwB,IAAI,8BAA8B,EAChE,MAAM,eAAe,CAAA;AACtB,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AAEzC,MAAM,MAAM,wBAAwB,GAAG,8BAA8B,GAAG,MAAM,CAAA;AAE9E,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAMtE,CAAA;AAED,UAAU,kBAAkB;IAC1B,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IACnE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAA;IAC1C,KAAK,EAAE,OAAO,kBAAkB,CAAC,KAAK,CAAA;IACtC,IAAI,EAAE,OAAO,kBAAkB,CAAC,IAAI,CAAA;IACpC,OAAO,EAAE,OAAO,mBAAmB,CAAA;CACpC;AAED,QAAA,MAAM,YAAY,EAAE,kBAKlB,CAAA;AAEF,OAAO,EAAC,YAAY,EAAC,CAAA"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,kBAAkB,EAClC,KAAK,wBAAwB,IAAI,8BAA8B,EAC/D,KAAK,sBAAsB,IAAI,4BAA4B,EAC3D,KAAK,UAAU,EAChB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AAEzC,MAAM,MAAM,wBAAwB,GAAG,8BAA8B,GAAG,MAAM,CAAA;AAE9E,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAAC,GAAG,UAM1E,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,4BAA4B,GAAG,MAAM,CAAA;AAE1E,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAIlE,CAAA;AAED,UAAU,kBAAkB;IAC1B,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IACnE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAA;IAC1C,KAAK,EAAE,OAAO,iBAAiB,CAAA;IAC/B,IAAI,EAAE,OAAO,kBAAkB,CAAC,IAAI,CAAA;IACpC,OAAO,EAAE,OAAO,mBAAmB,CAAA;CACpC;AAED,QAAA,MAAM,YAAY,EAAE,kBAKlB,CAAA;AAIF,OAAO,EAAC,YAAY,EAAC,CAAA"}

package/dist/components/Autocomplete.js

@@ -0,0 +1,24 @@
+import { Autocomplete as Autocomplete$1, sx } from '@primer/react';
+import styled from 'styled-components';
+
+const AutocompleteOverlay = styled(Autocomplete$1.Overlay).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Autocomplete__AutocompleteOverlay",
+  componentId: "sc-j8ax2e-0"
+})(["", ""], sx);
+const AutocompleteInput = styled(Autocomplete$1.Input).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Autocomplete__AutocompleteInput",
+  componentId: "sc-j8ax2e-1"
+})(["", ""], sx);
+const Autocomplete = Object.assign(Autocomplete$1, {
+  Context: Autocomplete$1.Context,
+  Input: AutocompleteInput,
+  Menu: Autocomplete$1.Menu,
+  Overlay: AutocompleteOverlay
+});
+AutocompleteOverlay.__SLOT__ = Autocomplete$1.Overlay.__SLOT__;
+
+export { Autocomplete };

package/dist/components/Avatar.js

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

package/dist/components/BaseStyles.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import { type CSSProperties, type PropsWithChildren } from 'react';
+import type * as styledSystem from 'styled-system';
+import 'focus-visible';
+export interface SystemCommonProps extends styledSystem.ColorProps, styledSystem.SpaceProps, styledSystem.DisplayProps {
+}
+export interface SystemTypographyProps extends styledSystem.TypographyProps {
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
+}
+export type BaseStylesProps = PropsWithChildren & {
+    as?: React.ComponentType<any> | keyof JSX.IntrinsicElements;
+    className?: string;
+    style?: CSSProperties;
+    color?: string;
+} & SystemTypographyProps & SystemCommonProps;
+export declare function BaseStyles({ children, color, fontFamily, lineHeight, className, as: Component, style, ...rest }: BaseStylesProps): React.JSX.Element;
+//# sourceMappingURL=BaseStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseStyles.d.ts","sourceRoot":"","sources":["../../src/components/BaseStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAGhE,OAAO,KAAK,KAAK,YAAY,MAAM,eAAe,CAAA;AAGlD,OAAO,eAAe,CAAA;AAGtB,MAAM,WAAW,iBACf,SAAQ,YAAY,CAAC,UAAU,EAC7B,YAAY,CAAC,UAAU,EACvB,YAAY,CAAC,YAAY;CAAG;AAEhC,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,eAAe;IACzE,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAA;CACnE;AAqFD,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAEhD,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,CAAC,iBAAiB,CAAA;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,qBAAqB,GACvB,iBAAiB,CAAA;AAEnB,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,EAAE,EAAE,SAAiB,EACrB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,eAAe,qBA+BjB"}

package/dist/components/BaseStyles.js

@@ -0,0 +1,51 @@
+import { clsx } from 'clsx';
+import { useTheme } from './ThemeProvider.js';
+import 'focus-visible';
+import { createGlobalStyle } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const GlobalStyle = createGlobalStyle(["*{box-sizing:border-box;}body{margin:0;}table{border-collapse:collapse;}[data-color-mode='light'] input{color-scheme:light;}[data-color-mode='dark'] input{color-scheme:dark;}@media (prefers-color-scheme:light){[data-color-mode='auto'][data-light-theme*='light']{color-scheme:light;}}@media (prefers-color-scheme:dark){[data-color-mode='auto'][data-dark-theme*='dark']{color-scheme:dark;}}[role='button']:focus:not(:focus-visible):not(:global(.focus-visible)),[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),button:focus:not(:focus-visible):not(:global(.focus-visible)),summary:focus:not(:focus-visible):not(:global(.focus-visible)),a:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;box-shadow:none;}[tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),details-dialog:focus:not(:focus-visible):not(:global(.focus-visible)){outline:none;}.BaseStyles{font-family:var(--BaseStyles-fontFamily,var(--fontStack-system));line-height:var(--BaseStyles-lineHeight,1.5);color:var(--BaseStyles-fgColor,var(--fgColor-default));&:has([data-color-mode='light']){input &{color-scheme:light;}}&:has([data-color-mode='dark']){input &{color-scheme:dark;}}:where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])){color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none;&:hover{text-decoration:underline;}}}"]);
+function BaseStyles({
+  children,
+  color,
+  fontFamily,
+  lineHeight,
+  className,
+  as: Component = 'div',
+  style,
+  ...rest
+}) {
+  const {
+    colorMode,
+    colorScheme,
+    dayScheme,
+    nightScheme
+  } = useTheme();
+  const baseStyles = {
+    ['--BaseStyles-fgColor']: color,
+    ['--BaseStyles-fontFamily']: fontFamily,
+    ['--BaseStyles-lineHeight']: lineHeight
+  };
+  return /*#__PURE__*/jsxs(Component, {
+    className: clsx('BaseStyles', className),
+    "data-portal-root": true
+    /**
+     * We need to map valid primer/react color modes onto valid color modes for primer/primitives
+     * valid color modes for primer/primitives: auto | light | dark
+     * valid color modes for primer/primer: auto | day | night | light | dark
+     */,
+    "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light',
+    "data-light-theme": dayScheme,
+    "data-dark-theme": nightScheme,
+    style: {
+      ...baseStyles,
+      ...style
+    },
+    ...rest,
+    children: [/*#__PURE__*/jsx(GlobalStyle, {
+      colorScheme: colorScheme?.includes('dark') ? 'dark' : 'light'
+    }), children]
+  });
+}
+
+export { BaseStyles };

package/dist/components/Box.d.ts

@@ -1,2 +1,19 @@
-export { Box, type BoxProps } from '@primer/react';
+import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
+import type { SxProp } from '../sx';
+type ComponentProps<T> = T extends React.ComponentType<React.PropsWithChildren<infer Props>> ? (Props extends object ? Props : never) : never;
+type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+/**
+ * @deprecated The Box component is deprecated. Replace with a `div` or
+ * appropriate HTML element instead, with CSS modules for styling.
+ * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+ */
+declare const Box: import("styled-components").StyledComponent<"div", any, StyledBoxProps, never>;
+/**
+ * @deprecated The Box component is deprecated. Replace with a `div` or
+ * appropriate HTML element instead, with CSS modules for styling.
+ * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+ */
+export type BoxProps = ComponentProps<typeof Box>;
+export default Box;
+export { Box };
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/components/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,KAAK,QAAQ,EAAC,MAAM,eAAe,CAAA"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/components/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EAChB,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,KAAK,cAAc,CAAC,CAAC,IACnB,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,MAAM,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,SAAS,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAA;AAEtH,KAAK,cAAc,GAAG,MAAM,GAC1B,UAAU,GACV,UAAU,GACV,eAAe,GACf,WAAW,GACX,YAAY,GACZ,SAAS,GACT,eAAe,GACf,WAAW,GACX,aAAa,GACb,WAAW,CAAA;AAEb;;;;GAIG;AACH,QAAA,MAAM,GAAG,gFAYR,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,OAAO,GAAG,CAAC,CAAA;AACjD,eAAe,GAAG,CAAA;AAClB,OAAO,EAAC,GAAG,EAAC,CAAA"}

package/dist/components/Box.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
+import { sx } from '@primer/react';
+
+/**
+ * @deprecated The Box component is deprecated. Replace with a `div` or
+ * appropriate HTML element instead, with CSS modules for styling.
+ * @see https://github.com/primer/react/blob/main/contributor-docs/migration-from-box.md
+ */
+const Box = styled.div.withConfig({
+  displayName: "Box",
+  componentId: "sc-62in7e-0"
+})(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+
+export { Box, Box as default };

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,37 @@
+import { Breadcrumbs as Breadcrumbs$1, sx } from '@primer/react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+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;
+
+export { Breadcrumb, Breadcrumbs };

package/dist/components/Button.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonProps as PrimerButtonProps, type SlotMarker } from '@primer/react';
+import type { SxProp } from '../sx';
+import type { BetterSystemStyleObject } from '../styled-props';
+import type { ForwardRefComponent } from '../polymorphic';
+type ButtonComponentProps = PrimerButtonProps & SxProp & {
+    as?: React.ElementType;
+};
+declare const ButtonComponent: ForwardRefComponent<"button", ButtonComponentProps> & SlotMarker;
+export declare function generateCustomSxProp(props: Partial<Pick<PrimerButtonProps, 'size' | 'block' | 'leadingVisual' | 'trailingVisual' | 'trailingAction'>>, providedSx: BetterSystemStyleObject): {
+    [key: string]: BetterSystemStyleObject;
+};
+export { ButtonComponent, type ButtonComponentProps };
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,WAAW,IAAI,iBAAiB,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAA;AAC5G,OAAO,KAAK,EAAC,MAAM,EAAsB,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,iBAAiB,CAAA;AAE5D,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAIvD,KAAK,oBAAoB,GAAG,iBAAiB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAQjF,QAAA,MAAM,eAAe,EAgBf,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,GAAG,UAAU,CAAA;AA0CtE,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,EACjH,UAAU,EAAE,uBAAuB;;EAmBpC;AAKD,OAAO,EAAC,eAAe,EAAE,KAAK,oBAAoB,EAAC,CAAA"}

package/dist/components/Button.js

@@ -0,0 +1,111 @@
+import { Button, sx } from '@primer/react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledButtonComponent = styled(Button).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Button__StyledButtonComponent",
+  componentId: "sc-vqy3e4-0"
+})(["", ""], sx);
+const ButtonComponent = /*#__PURE__*/forwardRef(({
+  as,
+  sx,
+  style: propStyle,
+  ...props
+}, ref) => {
+  const {
+    block,
+    size = 'medium',
+    leadingVisual,
+    trailingVisual,
+    trailingAction
+  } = props;
+  let sxStyles = {};
+  const style = {
+    ...(propStyle || {})
+  };
+  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(StyledButtonComponent, {
+    style: style,
+    sx: sxStyles,
+    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';
+ButtonComponent.__SLOT__ = Button.__SLOT__;
+
+export { ButtonComponent, generateCustomSxProp };

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,aAAa,IAAI,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAGnG,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,MAAM,CAAA;AAExD,eAAO,MAAM,QAAQ,yHAEnB,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,aAAa,IAAI,mBAAmB,EAAkB,MAAM,eAAe,CAAA;AAGpH,OAAO,EAAC,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,MAAM,CAAA;AAExD,eAAO,MAAM,QAAQ,yHAEnB,CACD"}

package/dist/components/Checkbox.js

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