@primer/styled-react 0.0.0-20260506112248 → 0.0.0-20260506175247

package/dist/components/ActionList.d.ts

@@ -0,0 +1,44 @@
+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, 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> & {
+    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> & {
+    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> & SlotMarker;
+type TrailingActionElements = 'button' | 'a';
+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;
+    Group: typeof ActionListGroup;
+    GroupHeading: typeof PrimerActionList.GroupHeading;
+    Divider: typeof ActionListDivider;
+    Description: typeof PrimerActionList.Description;
+    LeadingVisual: typeof ActionListLeadingVisual;
+    TrailingVisual: typeof ActionListTrailingVisual;
+    Heading: typeof PrimerActionList.Heading;
+    TrailingAction: typeof ActionListTrailingAction;
+} & SlotMarker;
+export {};
+//# sourceMappingURL=ActionList.d.ts.map

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

@@ -0,0 +1 @@
+{"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,163 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ActionList as ActionList$1 } from '@primer/react';
+import { sx } from '../sx.js';
+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/Box.d.ts

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1 @@
+{"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 '../sx.js';
+
+/**
+ * @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 };

package/dist/components/Button.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps as PrimerButtonProps, type SlotMarker } from '@primer/react';
+import type { SxProp, BetterSystemStyleObject } from '../sx';
+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,EAAuB,uBAAuB,EAAC,MAAM,OAAO,CAAA;AAE/E,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,112 @@
+import { Button } from '@primer/react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { sx } from '../sx.js';
+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/Button.stories.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    title: string;
+    component: import("../polymorphic").ForwardRefComponent<"button", import("./Button").ButtonComponentProps> & import("@primer/react").SlotMarker;
+};
+export default _default;
+export declare const WithColor: () => import("react").JSX.Element;
+export declare const WithFontSize: () => import("react").JSX.Element;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/components/Button.stories.tsx"],"names":[],"mappings":";;;;AAEA,wBAGC;AAED,eAAO,MAAM,SAAS,mCAAgE,CAAA;AAEtF,eAAO,MAAM,YAAY,mCAA0D,CAAA"}

package/dist/components/Dialog.d.ts

@@ -0,0 +1,30 @@
+import type { DialogProps as PrimerDialogProps } from '@primer/react';
+import type { SxProp } from '../sx';
+import { type PropsWithChildren } from 'react';
+type DialogProps = PropsWithChildren<PrimerDialogProps> & SxProp & {
+    as?: React.ElementType;
+};
+type StyledBodyProps = React.ComponentProps<'div'> & SxProp & {
+    as?: React.ElementType;
+};
+type StyledFooterProps = React.ComponentProps<'div'> & SxProp & {
+    as?: React.ElementType;
+};
+declare const Dialog: import("react").ForwardRefExoticComponent<PrimerDialogProps & {
+    children?: import("react").ReactNode | undefined;
+} & SxProp & {
+    as?: React.ElementType;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    __SLOT__: symbol;
+    Buttons: import("react").FC<PropsWithChildren<{
+        buttons: import("@primer/react").DialogButtonProps[];
+    }>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SxProp & {
+        as?: React.ElementType;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<StyledBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<StyledFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Dialog };
+export type { DialogProps };
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,IAAI,iBAAiB,EAAa,MAAM,eAAe,CAAA;AAC/E,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,OAAO,EAA4C,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAEvF,KAAK,WAAW,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAwB3F,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAYtF,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAgBxF,QAAA,MAAM,MAAM;;;SApD6D,KAAK,CAAC,WAAW;;;;;;;aAYhB,KAAK,CAAC,WAAW;;;;CA8CzF,CAAA;AAEF,OAAO,EAAC,MAAM,EAAC,CAAA;AACf,YAAY,EAAC,WAAW,EAAC,CAAA"}

package/dist/components/Dialog.js

@@ -0,0 +1,90 @@
+import { Dialog as Dialog$1 } from '@primer/react';
+import { sx } from '../sx.js';
+import styled from 'styled-components';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledDialog = styled(Dialog$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialog",
+  componentId: "sc-19zph8h-0"
+})(["", ""], sx);
+const DialogImpl = /*#__PURE__*/forwardRef(function Dialog({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialog, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+const StyledDialogHeader = styled(Dialog$1.Header).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialogHeader",
+  componentId: "sc-19zph8h-1"
+})(["", ""], sx);
+const DialogHeader = /*#__PURE__*/forwardRef(function DialogHeader({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialogHeader, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+const StyledDialogBody = styled(Dialog$1.Body).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialogBody",
+  componentId: "sc-19zph8h-2"
+})(["", ""], sx);
+const DialogBody = /*#__PURE__*/forwardRef(function DialogBody({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialogBody, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+const StyledDialogFooter = styled(Dialog$1.Footer).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "Dialog__StyledDialogFooter",
+  componentId: "sc-19zph8h-3"
+})(["", ""], sx);
+const DialogFooter = /*#__PURE__*/forwardRef(function DialogFooter({
+  as,
+  ...props
+}, ref) {
+  return /*#__PURE__*/jsx(StyledDialogFooter, {
+    ref: ref,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ...props
+  });
+});
+DialogHeader.__SLOT__ = Dialog$1.Header.__SLOT__;
+DialogBody.__SLOT__ = Dialog$1.Body.__SLOT__;
+DialogFooter.__SLOT__ = Dialog$1.Footer.__SLOT__;
+const Dialog = Object.assign(DialogImpl, {
+  __SLOT__: Dialog$1['__SLOT__'],
+  Buttons: Dialog$1.Buttons,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter
+});
+
+export { Dialog };

package/dist/components/Flash.d.ts

@@ -0,0 +1,8 @@
+import { type FlashProps as PrimerFlashProps } from '@primer/react';
+import { type SxProp } from '../sx';
+import type { ForwardRefComponent } from '../polymorphic';
+type FlashProps = PrimerFlashProps & SxProp;
+declare const Flash: ForwardRefComponent<'div', FlashProps>;
+export { Flash };
+export type { FlashProps };
+//# sourceMappingURL=Flash.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flash.d.ts","sourceRoot":"","sources":["../../src/components/Flash.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,UAAU,IAAI,gBAAgB,EAAuB,MAAM,eAAe,CAAA;AAEvF,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAEvD,KAAK,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAA;AAE3C,QAAA,MAAM,KAAK,EAAE,mBAAmB,CAAC,KAAK,EAAE,UAAU,CAIjD,CAAA;AAED,OAAO,EAAC,KAAK,EAAC,CAAA;AACd,YAAY,EAAC,UAAU,EAAC,CAAA"}

package/dist/components/Flash.js

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

package/dist/components/Heading.d.ts

@@ -0,0 +1,8 @@
+import { type HeadingProps as PrimerHeadingProps } from '@primer/react';
+import type { ForwardRefComponent } from '../polymorphic';
+import { type SxProp } from '../sx';
+type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type HeadingProps = PrimerHeadingProps & SxProp;
+declare const Heading: ForwardRefComponent<HeadingLevels, HeadingProps>;
+export { Heading, type HeadingProps };
+//# sourceMappingURL=Heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/components/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,YAAY,IAAI,kBAAkB,EAAC,MAAM,eAAe,CAAA;AACrE,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAGrC,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE5D,KAAK,YAAY,GAAG,kBAAkB,GAAG,MAAM,CAAA;AAE/C,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,aAAa,EAAE,YAAY,CAI7D,CAAA;AAED,OAAO,EAAC,OAAO,EAAE,KAAK,YAAY,EAAC,CAAA"}

package/dist/components/Heading.js

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

package/dist/components/IconButton.d.ts

@@ -0,0 +1,10 @@
+import { type IconButtonProps as PrimerIconButtonProps, type SlotMarker } from '@primer/react';
+import { type ForwardRefComponent } from '../polymorphic';
+import { type SxProp } from '../sx';
+type IconButtonProps = PrimerIconButtonProps & SxProp & {
+    as?: React.ElementType;
+};
+declare const IconButton: ForwardRefComponent<"a" | "button", IconButtonProps> & SlotMarker;
+export { IconButton };
+export type { IconButtonProps };
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/components/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,eAAe,IAAI,qBAAqB,EAC7C,KAAK,UAAU,EAChB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAC,KAAK,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAIvD,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,KAAK,eAAe,GAAG,qBAAqB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAQhF,QAAA,MAAM,UAAU,EAUV,mBAAmB,CAAC,GAAG,GAAG,QAAQ,EAAE,eAAe,CAAC,GAAG,UAAU,CAAA;AAIvE,OAAO,EAAC,UAAU,EAAC,CAAA;AACnB,YAAY,EAAC,eAAe,EAAC,CAAA"}

package/dist/components/IconButton.js

@@ -0,0 +1,40 @@
+import { IconButton as IconButton$1 } from '@primer/react';
+import { generateCustomSxProp } from './Button.js';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { sx } from '../sx.js';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledIconButton = styled(IconButton$1).withConfig({
+  shouldForwardProp: prop => prop !== 'sx'
+}).withConfig({
+  displayName: "IconButton__StyledIconButton",
+  componentId: "sc-i53dt6-0"
+})(["", ""], sx);
+const IconButton = /*#__PURE__*/forwardRef(({
+  as,
+  sx,
+  ...props
+}, ref) => {
+  let sxStyles = sx;
+  // grap the button props that have associated data attributes in the styles
+  const {
+    size = 'medium'
+  } = props;
+  if (sx !== null && sx !== undefined && Object.keys(sx).length > 0) {
+    sxStyles = generateCustomSxProp({
+      size
+    }, sx);
+  }
+  return /*#__PURE__*/jsx(StyledIconButton, {
+    sx: sxStyles,
+    ...props,
+    ...(as ? {
+      forwardedAs: as
+    } : {}),
+    ref: ref
+  });
+});
+IconButton.__SLOT__ = IconButton$1.__SLOT__;
+
+export { IconButton };

package/dist/components/Label.d.ts

@@ -0,0 +1,9 @@
+import { type LabelProps as PrimerLabelProps } from '@primer/react';
+import { type SxProp } from '../sx';
+import type { ForwardRefComponent } from '../polymorphic';
+type LabelProps = PrimerLabelProps & SxProp & {
+    as?: React.ElementType;
+};
+declare const Label: ForwardRefComponent<"span", LabelProps>;
+export { Label, type LabelProps };
+//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/components/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,UAAU,IAAI,gBAAgB,EAAuB,MAAM,eAAe,CAAA;AACvF,OAAO,EAAK,KAAK,MAAM,EAAC,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,gBAAgB,CAAA;AAGvD,KAAK,UAAU,GAAG,gBAAgB,GAAG,MAAM,GAAG;IAAC,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAC,CAAA;AAQtE,QAAA,MAAM,KAAK,EAEL,mBAAmB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAE7C,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,CAAA"}