@primer/react-brand 0.68.0-rc.5bd56cbb → 0.68.0-rc.982c487b

package/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle', 'accent'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\ntype ButtonVariant = (typeof ButtonVariants)[number]\n\nexport type ButtonBaseProps = {\n  /**\n   * The leading visual appears before the button content\n   */\n  leadingVisual?: ReactElement | Icon\n  /**\n   * The trailing visual appears after the button content\n   */\n  trailingVisual?: ReactElement | Icon\n  /**\n   * The styling variations available in Button\n   */\n  variant?: ButtonVariant\n  /**\n   * The size variations available in Button\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * A flag to show/hide the arrow icon\n   */\n  hasArrow?: boolean\n  /**\n   * The Button spans the full width\n   */\n  block?: boolean\n}\n\nconst variantsWithArrow = ['subtle']\n\nexport type ButtonProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n} & ButtonBaseProps &\n  React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n  root: 'Button',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n  get trailingVisual() {\n    return `${this.root}-trailing-visual`\n  },\n  get expandableArrow() {\n    return `${this.root}-expandable-arrow`\n  },\n}\n\nexport const _Button = forwardRef(\n  <C extends React.ElementType>(\n    {\n      animate,\n      as,\n      variant = defaultButtonVariant,\n      size = defaultButtonSize,\n      hasArrow,\n      block = false,\n      className,\n      children,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      leadingVisual: LeadingVisual,\n      trailingVisual: TrailingVisual,\n      style,\n      ...props\n    }: ButtonProps<C>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n    const Component = as || 'button'\n    const isDisabled =\n      disabled || ariaDisabled === 'true' || (typeof ariaDisabled === 'boolean' && ariaDisabled === true)\n\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const showArrow = variantsWithArrow.includes(variant) ? hasArrow !== false : Boolean(hasArrow)\n\n    const returnValidComponent = useCallback((component?: ReactElement | Icon) => {\n      if (React.isValidElement(component)) {\n        return component\n      }\n\n      if (typeof component === 'function') {\n        return React.createElement(component)\n      }\n    }, [])\n\n    const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n    const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n    const handleOnMouseEnter = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(true)\n          onMouseEnter?.(event)\n        }\n      },\n      [isDisabled, onMouseEnter],\n    )\n\n    const handleOnMouseLeave = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(false)\n          onMouseLeave?.(event)\n        }\n      },\n      [isDisabled, onMouseLeave],\n    )\n\n    const handleOnFocus = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(true)\n          onFocus?.(event)\n        }\n      },\n      [isDisabled, onFocus],\n    )\n\n    const handleOnBlur = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(false)\n          onBlur?.(event)\n        }\n      },\n      [isDisabled, onBlur],\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Button,\n          styles[`Button--${variant}`],\n          styles[`Button--size-${size}`],\n          block && styles['Button--block'],\n          isDisabled && styles[`Button--disabled`],\n          animationClasses,\n          className,\n        )}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        disabled={(isDisabled && Component === 'button') || undefined}\n        aria-disabled={(isDisabled && Component !== 'button') || undefined}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          LeadingVisualComponent,\n        ) && (\n          <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n            {React.cloneElement(LeadingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n\n        <span className={styles['Button__text']}>\n          <Text\n            as=\"span\"\n            size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n            weight=\"medium\"\n            className={clsx(\n              styles['Button--label'],\n              styles[`Button--label-${size}`],\n              styles[`Button--label-${variant}`],\n              isDisabled && styles[`Button-label--disabled`],\n            )}\n          >\n            {children}\n          </Text>\n        </span>\n\n        {!TrailingVisual && showArrow && (\n          <span className={clsx(styles['Button__trailing-visual'])}>\n            <ExpandableArrow\n              hidden\n              className={clsx(styles['Button-arrow'], isDisabled && styles[`Button-arrow--disabled`])}\n              expanded={!isDisabled && (isHovered || isFocused)}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        )}\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          TrailingVisualComponent,\n        ) && (\n          <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n            {React.cloneElement(TrailingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n      </Component>\n    )\n  },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":";;;;;;;;;AAaA,IAAa,IAAiB;CAAC;CAAW;CAAa;CAAU;CAAS,EAC7D,IAAc;CAAC;CAAS;CAAU;CAAQ,EAE1C,IAAuB,EAAe,IACtC,IAAoB,EAAY,IA+BvC,IAAoB,CAAC,SAAS,EAO9B,IAAU;CACd,MAAM;CACN,IAAI,gBAAgB;AAClB,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEtB,IAAI,kBAAkB;AACpB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EAEY,IAAU,GAEnB,EACE,YACA,OACA,aAAU,GACV,UAAO,GACP,aACA,WAAQ,IACR,cACA,aACA,aACA,iBAAiB,GACjB,iBACA,iBACA,YACA,WACA,eAAe,GACf,gBAAgB,GAChB,UACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EACjD,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM,EACjD,IAAY,KAAM,UAClB,IACJ,KAAY,MAAiB,UAAW,OAAO,KAAiB,aAAa,MAAiB,IAE1F,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAY,EAAkB,SAAS,EAAQ,GAAG,MAAa,KAAQ,EAAQ,GAE/E,IAAuB,GAAa,MAAoC;AAC5E,MAAI,EAAM,eAAe,EAAU,CACjC,QAAO;AAGT,MAAI,OAAO,KAAc,WACvB,QAAO,EAAM,cAAc,EAAU;IAEtC,EAAE,CAAC,EAEA,IAAyB,EAAqB,EAAc,EAC5D,IAA0B,EAAqB,EAAe,EAE9D,IAAqB,GACzB,MAAS;AACP,EAAK,MACH,EAAa,GAAK,EAClB,IAAe,EAAM;IAGzB,CAAC,GAAY,EAAa,CAC3B,EAEK,IAAqB,GACzB,MAAS;AACP,EAAK,MACH,EAAa,GAAM,EACnB,IAAe,EAAM;IAGzB,CAAC,GAAY,EAAa,CAC3B,EAEK,IAAgB,GACpB,MAAS;AACP,EAAK,MACH,EAAa,GAAK,EAClB,IAAU,EAAM;IAGpB,CAAC,GAAY,EAAQ,CACtB,EAEK,IAAe,GACnB,MAAS;AACP,EAAK,MACH,EAAa,GAAM,EACnB,IAAS,EAAM;IAGnB,CAAC,GAAY,EAAO,CACrB;AAED,QACE,kBAAC,GAAD;EACO;EACL,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,EAAO,gBAAgB,MACvB,KAAS,EAAO,kBAChB,KAAc,EAAO,qBACrB,GACA,EACD;EACD,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,UAAW,KAAc,MAAc,YAAa,KAAA;EACpD,iBAAgB,KAAc,MAAc,YAAa,KAAA;EACzD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAlBN;GAoBG,EAAM,eACL,EACD,IACC,kBAAC,QAAD;IAAM,WAAW,EAAO;IAA2B,eAAa,EAAQ;cACrE,EAAM,aAAa,GAAwB;KAC1C,WAAW,EAAK,EAAO,wBAAwB,KAAc,EAAO,iCAAiC;KACpG,eAAgB;KACjB,WAAW;KACZ,CAAC;IACG,CAAA;GAGT,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KACE,IAAG;KACH,MAAM,MAAS,UAAU,QAAQ,MAAS,WAAW,QAAQ;KAC7D,QAAO;KACP,WAAW,EACT,EAAO,kBACP,EAAO,iBAAiB,MACxB,EAAO,iBAAiB,MACxB,KAAc,EAAO,0BACtB;KAEA;KACI,CAAA;IACF,CAAA;GAEN,CAAC,KAAkB,KAClB,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,2BAA2B;cACtD,kBAAC,GAAD;KACE,QAAA;KACA,WAAW,EAAK,EAAO,iBAAiB,KAAc,EAAO,0BAA0B;KACvF,UAAU,CAAC,MAAe,KAAa;KACvC,eAAa,EAAQ;KACrB,CAAA;IACG,CAAA;GAER,EAAM,eACL,EACD,IACC,kBAAC,QAAD;IAAM,WAAW,EAAK,EAAO,2BAA2B;IAAE,eAAa,EAAQ;cAC5E,EAAM,aAAa,GAAyB;KAC3C,WAAW,EAAK,EAAO,wBAAwB,KAAc,EAAO,iCAAiC;KACpG,eAAgB;KACjB,WAAW;KACZ,CAAC;IACG,CAAA;GAEC;;EAGjB,EAEY,IAAS,OAAO,OAAO,GAAS,EAAC,YAAQ,CAAC"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {forwardRef, useCallback, type Ref, ReactElement} from 'react'\nimport type {Icon} from '@primer/octicons-react'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {Text} from '../Text'\nimport type {BaseProps} from '../component-helpers'\n\nimport {useAnimation} from '../'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css'\nimport styles from './Button.module.css'\n\nexport const ButtonVariants = ['primary', 'secondary', 'subtle'] as const\nexport const ButtonSizes = ['small', 'medium', 'large'] as const\n\nexport const defaultButtonVariant = ButtonVariants[1]\nexport const defaultButtonSize = ButtonSizes[1]\n\nexport type ButtonVariant = (typeof ButtonVariants)[number]\n\nexport type ButtonBaseProps = {\n  /**\n   * The leading visual appears before the button content\n   */\n  leadingVisual?: ReactElement | Icon\n  /**\n   * The trailing visual appears after the button content\n   */\n  trailingVisual?: ReactElement | Icon\n  /**\n   * The styling variations available in Button\n   */\n  variant?: ButtonVariant\n  /**\n   * The size variations available in Button\n   */\n  size?: (typeof ButtonSizes)[number]\n  /**\n   * A flag to show/hide the arrow icon\n   * @deprecated The hasArrow prop is deprecated and will be removed in a future release.\n   */\n  hasArrow?: boolean\n  /**\n   * The Button spans the full width\n   */\n  block?: boolean\n}\n\nexport type ButtonProps<C extends React.ElementType> = BaseProps<C> & {\n  as?: C\n} & ButtonBaseProps &\n  React.ComponentPropsWithoutRef<C>\n\nconst testIds = {\n  root: 'Button',\n  get leadingVisual() {\n    return `${this.root}-leading-visual`\n  },\n  get trailingVisual() {\n    return `${this.root}-trailing-visual`\n  },\n  get expandableArrow() {\n    return `${this.root}-expandable-arrow`\n  },\n}\n\nexport const _Button = forwardRef(\n  <C extends React.ElementType>(\n    {\n      animate,\n      as,\n      variant = defaultButtonVariant,\n      size = defaultButtonSize,\n      hasArrow,\n      block = false,\n      className,\n      children,\n      disabled,\n      'aria-disabled': ariaDisabled,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      leadingVisual: LeadingVisual,\n      trailingVisual: TrailingVisual,\n      style,\n      ...props\n    }: ButtonProps<C>,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isFocused, setIsFocused] = React.useState(false)\n    const Component = as || 'button'\n    const isDisabled =\n      disabled || ariaDisabled === 'true' || (typeof ariaDisabled === 'boolean' && ariaDisabled === true)\n\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const showArrow = Boolean(hasArrow)\n\n    const returnValidComponent = useCallback((component?: ReactElement | Icon) => {\n      if (React.isValidElement(component)) {\n        return component\n      }\n\n      if (typeof component === 'function') {\n        return React.createElement(component)\n      }\n    }, [])\n\n    const LeadingVisualComponent = returnValidComponent(LeadingVisual)\n    const TrailingVisualComponent = returnValidComponent(TrailingVisual)\n\n    const handleOnMouseEnter = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(true)\n          onMouseEnter?.(event)\n        }\n      },\n      [isDisabled, onMouseEnter],\n    )\n\n    const handleOnMouseLeave = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsHovered(false)\n          onMouseLeave?.(event)\n        }\n      },\n      [isDisabled, onMouseLeave],\n    )\n\n    const handleOnFocus = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(true)\n          onFocus?.(event)\n        }\n      },\n      [isDisabled, onFocus],\n    )\n\n    const handleOnBlur = useCallback(\n      event => {\n        if (!isDisabled) {\n          setIsFocused(false)\n          onBlur?.(event)\n        }\n      },\n      [isDisabled, onBlur],\n    )\n\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          styles.Button,\n          styles[`Button--${variant}`],\n          styles[`Button--size-${size}`],\n          block && styles['Button--block'],\n          isDisabled && styles[`Button--disabled`],\n          animationClasses,\n          className,\n        )}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        disabled={(isDisabled && Component === 'button') || undefined}\n        aria-disabled={(isDisabled && Component !== 'button') || undefined}\n        style={{...animationInlineStyles, ...style}}\n        {...props}\n      >\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          LeadingVisualComponent,\n        ) && (\n          <span className={styles['Button__leading-visual']} data-testid={testIds.leadingVisual}>\n            {React.cloneElement(LeadingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n\n        <span className={styles['Button__text']}>\n          <Text\n            as=\"span\"\n            size={size === 'small' ? '100' : size === 'medium' ? '200' : '400'}\n            weight=\"medium\"\n            className={clsx(\n              styles['Button--label'],\n              styles[`Button--label-${size}`],\n              styles[`Button--label-${variant}`],\n              isDisabled && styles[`Button-label--disabled`],\n            )}\n          >\n            {children}\n          </Text>\n        </span>\n\n        {!TrailingVisual && showArrow && (\n          <span className={clsx(styles['Button__trailing-visual'])}>\n            <ExpandableArrow\n              hidden\n              className={clsx(styles['Button-arrow'], isDisabled && styles[`Button-arrow--disabled`])}\n              expanded={!isDisabled && (isHovered || isFocused)}\n              data-testid={testIds.expandableArrow}\n            />\n          </span>\n        )}\n        {React.isValidElement<{className?: string; ['aria-hidden']?: string; focusable?: string}>(\n          TrailingVisualComponent,\n        ) && (\n          <span className={clsx(styles['Button__trailing-visual'])} data-testid={testIds.trailingVisual}>\n            {React.cloneElement(TrailingVisualComponent, {\n              className: clsx(styles['Button__icon-visual'], isDisabled && styles['Button__icon-visual--disabled']),\n              ['aria-hidden']: 'true',\n              focusable: 'false',\n            })}\n          </span>\n        )}\n      </Component>\n    )\n  },\n)\n\nexport const Button = Object.assign(_Button, {testIds})\n"],"mappings":"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"}

package/esm/Button/Button.module-CDHmNf-Y.css

@@ -0,0 +1 @@
+.Primer_Brand__Button-module__Button___scH9Z{appearance:none;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:box-shadow var(--brand-animation-duration-faster);border-radius:var(--brand-borderRadius-medium);cursor:pointer;border:solid var(--brand-borderWidth-thick) transparent;justify-content:center;align-items:center;gap:var(--brand-control-medium-gap);background:0 0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex}.Primer_Brand__Button-module__Button___scH9Z:hover{-webkit-text-decoration:none;text-decoration:none}.Primer_Brand__Button-module__Button___scH9Z:focus-visible{outline:4px solid var(--brand-color-focus);outline-offset:2px;transition:none}.Primer_Brand__Button-module__Button--disabled___IHZ7f,.Primer_Brand__Button-module__Button--disabled___IHZ7f:hover,.Primer_Brand__Button-module__Button--disabled___IHZ7f:focus{cursor:not-allowed}.Primer_Brand__Button-module__Button__text___ED0bX{position:relative}.Primer_Brand__Button-module__Button--label___qrkyz{font-family:var(--brand-body-fontFamily);font-style:normal;font-weight:var(--base-text-weight-medium);text-align:center}.Primer_Brand__Button-module__Button__icon-visual____qybb{height:var(--base-size-16);fill:currentColor;align-self:center;width:auto;display:flex}.Primer_Brand__Button-module__Button__trailing-visual___5i3xR,.Primer_Brand__Button-module__Button__leading-visual___jjtTe{display:flex}.Primer_Brand__Button-module__Button-arrow___F4HtG{margin-inline-start:calc(var(--base-size-8) * -1);margin-inline-end:calc(var(--base-size-4) * -1)}.Primer_Brand__Button-module__Button--primary___MSbnU{color:var(--brand-button-primary-fgColor-rest);background-color:var(--brand-button-primary-bgColor-rest)}.Primer_Brand__Button-module__Button--size-small___zQrEw.Primer_Brand__Button-module__Button--primary___MSbnU{border-width:var(--brand-borderWidth-thin)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background:var(--brand-button-primary-bgColor-hover)}.Primer_Brand__Button-module__Button--primary___MSbnU:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-expanded=true]{background:var(--brand-button-primary-bgColor-active);border-color:var(--brand-button-primary-borderColor-active)}.Primer_Brand__Button-module__Button--label-primary___QX1u5{color:var(--brand-button-primary-fgColor-rest)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true],.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f{background-color:var(--brand-button-primary-bgColor-disabled)}.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--primary___MSbnU:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--primary___MSbnU.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-primary___QX1u5.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-primary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_{transition:background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);background:var(--brand-button-secondary-bgColor-rest);border-color:var(--brand-button-secondary-borderColor-rest);color:var(--brand-button-secondary-fgColor-rest);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background:var(--brand-button-secondary-bgColor-hover);border-color:var(--brand-button-secondary-borderColor-hover)}.Primer_Brand__Button-module__Button--secondary___gHnw_:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-expanded=true]{background:var(--brand-button-secondary-bgColor-active);border-color:var(--brand-button-secondary-borderColor-active)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled{border-color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--secondary___gHnw_:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--secondary___gHnw_.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-secondary___eJ0_a.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-secondary-fgColor-disabled)}.Primer_Brand__Button-module__Button--subtle___F7pEE{transition:background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);background:var(--brand-button-subtle-bgColor-rest);border-width:var(--brand-borderWidth-thin);border-color:var(--brand-button-subtle-borderColor-rest);color:var(--brand-color-text-default);-webkit-backdrop-filter:blur(var(--base-size-20));backdrop-filter:blur(var(--base-size-20))}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):not([aria-expanded=true]):hover{background:var(--brand-button-subtle-bgColor-hover);border-color:var(--brand-button-subtle-borderColor-hover)}.Primer_Brand__Button-module__Button--subtle___F7pEE:not(.Primer_Brand__Button-module__Button___scH9Z[disabled]):not(.Primer_Brand__Button-module__Button___scH9Z[aria-disabled=true]):active,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-expanded=true]{background:var(--brand-button-subtle-bgColor-active);border-color:var(--brand-button-subtle-borderColor-active)}.Primer_Brand__Button-module__Button--label-subtle___8ndWH{color:var(--brand-button-subtle-fgColor-rest)}.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button-arrow--disabled___kZpao,.Primer_Brand__Button-module__Button--subtle___F7pEE:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE[aria-disabled=true] .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--subtle___F7pEE.Primer_Brand__Button-module__Button--disabled___IHZ7f .Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg,.Primer_Brand__Button-module__Button--label-subtle___8ndWH.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:var(--brand-button-subtle-fgColor-disabled)}.Primer_Brand__Button-module__Button--size-small___zQrEw{min-height:var(--brand-control-small-size);padding-inline:var(--brand-control-small-paddingInline-normal)}.Primer_Brand__Button-module__Button--size-medium___KFmzx{min-height:var(--brand-control-medium-size);padding:var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI{min-height:var(--brand-control-large-size);padding:var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious)}.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button__icon-visual____qybb,.Primer_Brand__Button-module__Button--size-large___J6UCI .Primer_Brand__Button-module__Button-arrow___F4HtG{height:var(--base-size-20);width:var(--base-size-20)}.Primer_Brand__Button-module__Button--label-medium___ClmeR{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:.01rem}.Primer_Brand__Button-module__Button--label-large___UDxqS{font-size:var(--brand-text-subhead-size-large);line-height:var(--brand-text-subhead-lineHeight-large)}.Primer_Brand__Button-module__Button--block___kCYDx{width:100%}@media (forced-colors:active){.Primer_Brand__Button-module__Button--disabled___IHZ7f{outline-color:graytext}.Primer_Brand__Button-module__Button--label___qrkyz.Primer_Brand__Button-module__Button-label--disabled___yMoDr{color:graytext}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Button-module__Button___scH9Z,.Primer_Brand__Button-module__Button___scH9Z:before,.Primer_Brand__Button-module__Button___scH9Z:after,.Primer_Brand__Button-module__Button___scH9Z *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/Button/Button.module.js

@@ -1,19 +1,18 @@
-import './Button.module-ryfDlr26.css';var e = {
+import './Button.module-CDHmNf-Y.css';var e = {
 	Button: "Primer_Brand__Button-module__Button___scH9Z",
 	"Button--disabled": "Primer_Brand__Button-module__Button--disabled___IHZ7f",
 	Button__text: "Primer_Brand__Button-module__Button__text___ED0bX",
+	"Button--label": "Primer_Brand__Button-module__Button--label___qrkyz",
 	"Button__icon-visual": "Primer_Brand__Button-module__Button__icon-visual____qybb",
 	"Button__trailing-visual": "Primer_Brand__Button-module__Button__trailing-visual___5i3xR",
 	"Button__leading-visual": "Primer_Brand__Button-module__Button__leading-visual___jjtTe",
 	"Button-arrow": "Primer_Brand__Button-module__Button-arrow___F4HtG",
 	"Button--primary": "Primer_Brand__Button-module__Button--primary___MSbnU",
+	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
 	"Button--label-primary": "Primer_Brand__Button-module__Button--label-primary___QX1u5",
 	"Button-arrow--disabled": "Primer_Brand__Button-module__Button-arrow--disabled___kZpao",
 	"Button__icon-visual--disabled": "Primer_Brand__Button-module__Button__icon-visual--disabled___tZSrg",
 	"Button-label--disabled": "Primer_Brand__Button-module__Button-label--disabled___yMoDr",
-	"Button--accent": "Primer_Brand__Button-module__Button--accent___tkmZY",
-	"Button--size-small": "Primer_Brand__Button-module__Button--size-small___zQrEw",
-	"Button--label-accent": "Primer_Brand__Button-module__Button--label-accent___Fjgzf",
 	"Button--secondary": "Primer_Brand__Button-module__Button--secondary___gHnw_",
 	"Button--label-secondary": "Primer_Brand__Button-module__Button--label-secondary___eJ0_a",
 	"Button--subtle": "Primer_Brand__Button-module__Button--subtle___F7pEE",
@@ -22,8 +21,7 @@ import './Button.module-ryfDlr26.css';var e = {
 	"Button--size-large": "Primer_Brand__Button-module__Button--size-large___J6UCI",
 	"Button--label-medium": "Primer_Brand__Button-module__Button--label-medium___ClmeR",
 	"Button--label-large": "Primer_Brand__Button-module__Button--label-large___UDxqS",
-	"Button--block": "Primer_Brand__Button-module__Button--block___kCYDx",
-	"Button--label": "Primer_Brand__Button-module__Button--label___qrkyz"
+	"Button--block": "Primer_Brand__Button-module__Button--block___kCYDx"
 };
 //#endregion
 export { e as default };

package/esm/Button/Button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n  appearance: none;\n  user-select: none;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow var(--brand-animation-duration-faster);\n  text-decoration: none;\n  border-radius: var(--brand-borderRadius-medium);\n  cursor: pointer;\n  border: solid var(--brand-borderWidth-thick) transparent;\n  background: none;\n  display: inline-flex;\n  gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n  text-decoration: none;\n}\n\n.Button:focus-visible {\n  transition: none;\n  outline: 4px solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n  cursor: not-allowed;\n}\n\n.Button__text {\n  position: relative;\n}\n\n.Button__icon-visual {\n  display: flex;\n  align-self: center;\n  height: var(--base-size-16);\n  width: auto;\n  fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n  display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n  margin-inline-end: calc(var(--base-size-4) * -1);\n  margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n  color: var(--brand-button-primary-fgColor-rest);\n  background-color: var(--brand-button-primary-bgColor-rest);\n  border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-primary-bgColor-hover);\n  border-color: var(--brand-button-primary-borderColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n  background-color: var(--brand-button-primary-bgColor-active);\n  border-color: var(--brand-button-primary-borderColor-active);\n  box-shadow: var(--brand-button-primary-shadow-active);\n}\n\n.Button--label-primary {\n  color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n  background-color: var(--brand-button-primary-bgColor-disabled);\n  border-color: var(--brand-button-primary-borderColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n  color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* accent */\n\n.Button--accent {\n  color: var(--brand-button-accent-fgColor-rest);\n  background-color: var(--brand-button-accent-bgColor-rest);\n}\n\n.Button--size-small.Button--accent {\n  border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--accent:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background: var(--brand-button-accent-bgColor-hover);\n}\n\n.Button--accent:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--accent[aria-expanded='true'] {\n  background-color: var(--brand-button-accent-bgColor-active);\n  border-color: var(--brand-button-accent-borderColor-active);\n}\n\n.Button--label-accent {\n  color: var(--brand-button-accent-fgColor-rest);\n}\n\n.Button--accent:disabled,\n.Button--accent[aria-disabled='true'],\n.Button--accent.Button--disabled {\n  background-color: var(--brand-button-accent-bgColor-disabled);\n}\n\n.Button--accent:disabled .Button-arrow--disabled,\n.Button--accent[aria-disabled='true'] .Button-arrow--disabled,\n.Button--accent.Button--disabled .Button-arrow--disabled,\n.Button--accent:disabled .Button__icon-visual--disabled,\n.Button--accent[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--accent.Button--disabled .Button__icon-visual--disabled,\n.Button--label-accent.Button-label--disabled {\n  color: var(--brand-button-accent-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n  transition: background-color, border-color 200ms;\n  border-color: var(--brand-button-secondary-borderColor-rest);\n  color: var(--brand-button-secondary-fgColor-rest);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n  border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n  border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n  color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n  background-color: var(--brand-button-subtle-bgColor-rest);\n  color: var(--brand-color-text-default);\n  transition: background-color, border-color var(--brand-animation-duration-faster);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background-color: var(--brand-button-subtle-bgColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n  background-color: var(--brand-button-subtle-bgColor-active);\n  border-color: transparent;\n}\n\n.Button--label-subtle {\n  color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n  color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n  min-height: var(--brand-control-small-size);\n  padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n  min-height: var(--brand-control-medium-size);\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);\n}\n\n.Button--size-large {\n  min-height: var(--brand-control-large-size);\n  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n  height: var(--base-size-20);\n  width: var(--base-size-20);\n}\n\n.Button--label-medium {\n  font-size: var(--brand-text-subhead-size-medium);\n  line-height: var(--brand-text-subhead-lineHeight-medium);\n}\n\n.Button--label-large {\n  font-size: var(--brand-text-subhead-size-large);\n  line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .Button--disabled {\n    outline-color: GrayText;\n  }\n\n  /* Indicates disabled state in WHCM */\n  .Button--label.Button-label--disabled {\n    color: GrayText;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Button,\n  .Button::before,\n  .Button::after,\n  .Button * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/Button/Button.module.css"],"sourcesContent":[".Button {\n  appearance: none;\n  user-select: none;\n  vertical-align: middle;\n  align-items: center;\n  justify-content: center;\n  transition: box-shadow var(--brand-animation-duration-faster);\n  text-decoration: none;\n  border-radius: var(--brand-borderRadius-medium);\n  cursor: pointer;\n  border: solid var(--brand-borderWidth-thick) transparent;\n  background: none;\n  display: inline-flex;\n  gap: var(--brand-control-medium-gap);\n}\n\n.Button:hover {\n  text-decoration: none;\n}\n\n.Button:focus-visible {\n  transition: none;\n  outline: 4px solid var(--brand-color-focus);\n  outline-offset: 2px;\n}\n\n.Button--disabled,\n.Button--disabled:hover,\n.Button--disabled:focus {\n  cursor: not-allowed;\n}\n\n.Button__text {\n  position: relative;\n}\n\n.Button--label {\n  font-family: var(--brand-body-fontFamily);\n  font-style: normal;\n  font-weight: var(--base-text-weight-medium);\n  text-align: center;\n}\n\n.Button__icon-visual {\n  display: flex;\n  align-self: center;\n  height: var(--base-size-16);\n  width: auto;\n  fill: currentcolor;\n}\n\n.Button__trailing-visual,\n.Button__leading-visual {\n  display: flex;\n}\n\n/* optically adjust arrow to align with the end (right) padding */\n/* reduce gap between label and arrow */\n.Button-arrow {\n  margin-inline-end: calc(var(--base-size-4) * -1);\n  margin-inline-start: calc(var(--base-size-8) * -1);\n}\n\n/* primary */\n\n.Button--primary {\n  color: var(--brand-button-primary-fgColor-rest);\n  background-color: var(--brand-button-primary-bgColor-rest);\n}\n\n.Button--size-small.Button--primary {\n  border-width: var(--brand-borderWidth-thin);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background: var(--brand-button-primary-bgColor-hover);\n}\n\n.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--primary[aria-expanded='true'] {\n  background: var(--brand-button-primary-bgColor-active);\n  border-color: var(--brand-button-primary-borderColor-active);\n}\n\n.Button--label-primary {\n  color: var(--brand-button-primary-fgColor-rest);\n}\n\n.Button--primary:disabled,\n.Button--primary[aria-disabled='true'],\n.Button--primary.Button--disabled {\n  background-color: var(--brand-button-primary-bgColor-disabled);\n}\n\n.Button--primary:disabled .Button-arrow--disabled,\n.Button--primary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--primary.Button--disabled .Button-arrow--disabled,\n.Button--primary:disabled .Button__icon-visual--disabled,\n.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--primary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-primary.Button-label--disabled {\n  color: var(--brand-button-primary-fgColor-disabled);\n}\n\n/* secondary */\n\n.Button--secondary {\n  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);\n  background: var(--brand-button-secondary-bgColor-rest);\n  border-color: var(--brand-button-secondary-borderColor-rest);\n  color: var(--brand-button-secondary-fgColor-rest);\n  backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background: var(--brand-button-secondary-bgColor-hover);\n  border-color: var(--brand-button-secondary-borderColor-hover);\n}\n\n.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--secondary[aria-expanded='true'] {\n  background: var(--brand-button-secondary-bgColor-active);\n  border-color: var(--brand-button-secondary-borderColor-active);\n}\n\n.Button--secondary:disabled {\n  border-color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n.Button--secondary:disabled .Button-arrow--disabled,\n.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,\n.Button--secondary.Button--disabled .Button-arrow--disabled,\n.Button--secondary:disabled .Button__icon-visual--disabled,\n.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--secondary.Button--disabled .Button__icon-visual--disabled,\n.Button--label-secondary.Button-label--disabled {\n  color: var(--brand-button-secondary-fgColor-disabled);\n}\n\n/* subtle */\n\n.Button--subtle {\n  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);\n  background: var(--brand-button-subtle-bgColor-rest);\n  border-width: var(--brand-borderWidth-thin);\n  border-color: var(--brand-button-subtle-borderColor-rest);\n  color: var(--brand-color-text-default);\n  backdrop-filter: blur(var(--base-size-20));\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {\n  background: var(--brand-button-subtle-bgColor-hover);\n  border-color: var(--brand-button-subtle-borderColor-hover);\n}\n\n.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,\n.Button--subtle[aria-expanded='true'] {\n  background: var(--brand-button-subtle-bgColor-active);\n  border-color: var(--brand-button-subtle-borderColor-active);\n}\n\n.Button--label-subtle {\n  color: var(--brand-button-subtle-fgColor-rest);\n}\n\n.Button--subtle:disabled .Button-arrow--disabled,\n.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,\n.Button--subtle.Button--disabled .Button-arrow--disabled,\n.Button--subtle:disabled .Button__icon-visual--disabled,\n.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,\n.Button--subtle.Button--disabled .Button__icon-visual--disabled,\n.Button--label-subtle.Button-label--disabled {\n  color: var(--brand-button-subtle-fgColor-disabled);\n}\n\n/* size */\n\n.Button--size-small {\n  min-height: var(--brand-control-small-size);\n  padding-inline: var(--brand-control-small-paddingInline-normal);\n}\n\n.Button--size-medium {\n  min-height: var(--brand-control-medium-size);\n  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);\n}\n\n.Button--size-large {\n  min-height: var(--brand-control-large-size);\n  padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);\n}\n\n.Button--size-large .Button__icon-visual,\n.Button--size-large .Button-arrow {\n  height: var(--base-size-20);\n  width: var(--base-size-20);\n}\n\n.Button--label-medium {\n  font-size: var(--brand-text-size-200);\n  line-height: var(--brand-text-lineHeight-200);\n  letter-spacing: 0.01rem;\n}\n\n.Button--label-large {\n  font-size: var(--brand-text-subhead-size-large);\n  line-height: var(--brand-text-subhead-lineHeight-large);\n}\n\n.Button--block {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .Button--disabled {\n    outline-color: GrayText;\n  }\n\n  /* Indicates disabled state in WHCM */\n  .Button--label.Button-label--disabled {\n    color: GrayText;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Button,\n  .Button::before,\n  .Button::after,\n  .Button * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAG7C,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAEtG,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,qBAAqB,EAAE,GAAG,qBAAqB,CAAA;IACzD,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGAwBvB,CAAA"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAS,WAAW,EAAC,MAAM,WAAW,CAAA;AAG7C,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;AAEtG,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG;IACzD,QAAQ,EAAE,qBAAqB,EAAE,GAAG,qBAAqB,CAAA;IACzD,UAAU,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,WAAW,sGAuBvB,CAAA"}

package/esm/ButtonGroup/ButtonGroup.js

@@ -7,8 +7,7 @@ var a = r(({ buttonSize: r = "medium", buttonsAs: a, className: o, children: s,
 	let u = n.Children.toArray(s).map((t, i) => n.isValidElement(t) && t.type === e ? n.cloneElement(t, {
 		size: r,
 		as: a,
-		variant: i === 0 ? "accent" : "subtle",
-		hasArrow: !1,
+		variant: i === 0 ? "primary" : "subtle",
 		...t.props
 	}) : null).filter(Boolean).slice(0, 2);
 	return /* @__PURE__ */ i("section", {

package/esm/ButtonGroup/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n  children: PrimerBrandButtonType[] | PrimerBrandButtonType\n  buttonSize?: ButtonProps<'button' | 'a'>['size']\n  buttonsAs?: 'button' | 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n  ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const buttonsToRender = React.Children.toArray(children)\n      .map((child, index) => {\n        if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {\n          return React.cloneElement(child, {\n            size: buttonSize,\n            as: buttonsAs,\n            variant: index === 0 ? 'accent' : 'subtle',\n            hasArrow: false,\n            ...child.props,\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n      .slice(0, 2)\n\n    return (\n      <section ref={ref} className={styles.ButtonGroup} {...props}>\n        {buttonsToRender as React.ReactElement[]}\n      </section>\n    )\n  },\n)\n"],"mappings":";;;;;AAaA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,KAAK,GAAO,MACP,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,IACtE,EAAM,aAAa,GAAO;EAC/B,MAAM;EACN,IAAI;EACJ,SAAS,MAAU,IAAI,WAAW;EAClC,UAAU;EACV,GAAG,EAAM;EACV,CAAC,GAEG,KACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AAEd,QACE,kBAAC,WAAD;EAAc;EAAK,WAAW,EAAO;EAAa,GAAI;YACnD;EACO,CAAA;EAGf"}
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, {forwardRef, type Ref} from 'react'\nimport type {BaseProps} from '../component-helpers'\nimport {Button, ButtonProps} from '../Button'\nimport styles from './ButtonGroup.module.css'\n\nexport type PrimerBrandButtonType = React.ReactElement<ButtonProps<React.ElementType<'button' | 'a'>>>\n\nexport type ButtonGroupProps = BaseProps<HTMLDivElement> & {\n  children: PrimerBrandButtonType[] | PrimerBrandButtonType\n  buttonSize?: ButtonProps<'button' | 'a'>['size']\n  buttonsAs?: 'button' | 'a'\n}\n\nexport const ButtonGroup = forwardRef(\n  ({buttonSize = 'medium', buttonsAs, className, children, ...props}: ButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const buttonsToRender = React.Children.toArray(children)\n      .map((child, index) => {\n        if (React.isValidElement<ButtonProps<'button' | 'a'>>(child) && child.type === Button) {\n          return React.cloneElement(child, {\n            size: buttonSize,\n            as: buttonsAs,\n            variant: index === 0 ? 'primary' : 'subtle',\n            ...child.props,\n          })\n        }\n        return null\n      })\n      .filter(Boolean)\n      .slice(0, 2)\n\n    return (\n      <section ref={ref} className={styles.ButtonGroup} {...props}>\n        {buttonsToRender as React.ReactElement[]}\n      </section>\n    )\n  },\n)\n"],"mappings":";;;;;AAaA,IAAa,IAAc,GACxB,EAAC,gBAAa,UAAU,cAAW,cAAW,aAAU,GAAG,KAA0B,MAA6B;CACjH,IAAM,IAAkB,EAAM,SAAS,QAAQ,EAAS,CACrD,KAAK,GAAO,MACP,EAAM,eAA4C,EAAM,IAAI,EAAM,SAAS,IACtE,EAAM,aAAa,GAAO;EAC/B,MAAM;EACN,IAAI;EACJ,SAAS,MAAU,IAAI,YAAY;EACnC,GAAG,EAAM;EACV,CAAC,GAEG,KACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AAEd,QACE,kBAAC,WAAD;EAAc;EAAK,WAAW,EAAO;EAAa,GAAI;YACnD;EACO,CAAA;EAGf"}

package/esm/Hero/sub-components/HeroPrimaryAction.js

@@ -15,7 +15,7 @@ var o = i(({ href: i, as: o = "a", children: s, ...c }, l) => {
 		children: /* @__PURE__ */ a(n, {
 			ref: l,
 			as: o,
-			variant: "accent",
+			variant: "primary",
 			size: "medium",
 			href: i,
 			...c,

package/esm/Hero/sub-components/HeroPrimaryAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroPrimaryAction.js","names":[],"sources":["../../../src/Hero/sub-components/HeroPrimaryAction.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {Button, ButtonBaseProps} from '../../Button'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext} from '../HeroContext'\nimport {Box} from '../../Box'\n\ntype RestrictedPolymorphism =\n  | (BaseProps<HTMLAnchorElement> & {as?: 'a'})\n  | (BaseProps<HTMLButtonElement> & {as?: 'button'})\n\nexport type HeroPrimaryActionProps = {\n  as?: 'a' | 'button'\n  href: string\n} & ButtonBaseProps &\n  RestrictedPolymorphism\n\nexport const HeroPrimaryAction = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  PropsWithChildren<HeroPrimaryActionProps>\n>(({href, as = 'a', children, ...rest}, ref) => {\n  const {variant: heroVariant, enableAnimation} = useHeroContext()\n  const isGridline = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n  const Tag = isGridline ? Box : React.Fragment\n  const tagProps = isGridline\n    ? {\n        animate: enableAnimation\n          ? {\n              variant: 'slide-in-up' as const,\n              delay: 750,\n              duration: 1000,\n            }\n          : undefined,\n      }\n    : {}\n\n  return (\n    <Tag {...tagProps}>\n      <Button ref={ref as React.Ref<HTMLButtonElement>} as={as} variant=\"accent\" size=\"medium\" href={href} {...rest}>\n        {children}\n      </Button>\n    </Tag>\n  )\n})\n"],"mappings":";;;;;;AAgBA,IAAa,IAAoB,GAG9B,EAAC,SAAM,QAAK,KAAK,aAAU,GAAG,KAAO,MAAQ;CAC9C,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAa,MAAgB,cAAc,MAAgB;AAcjE,QACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAIF,kBAAC,GAAD;GAAa;GAAyC;GAAI,SAAQ;GAAS,MAAK;GAAe;GAAM,GAAI;GACtG;GACM,CAAA;EACL,CAAA;EAER"}
+{"version":3,"file":"HeroPrimaryAction.js","names":[],"sources":["../../../src/Hero/sub-components/HeroPrimaryAction.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren} from 'react'\nimport {Button, ButtonBaseProps} from '../../Button'\nimport type {BaseProps} from '../../component-helpers'\nimport {useHeroContext} from '../HeroContext'\nimport {Box} from '../../Box'\n\ntype RestrictedPolymorphism =\n  | (BaseProps<HTMLAnchorElement> & {as?: 'a'})\n  | (BaseProps<HTMLButtonElement> & {as?: 'button'})\n\nexport type HeroPrimaryActionProps = {\n  as?: 'a' | 'button'\n  href: string\n} & ButtonBaseProps &\n  RestrictedPolymorphism\n\nexport const HeroPrimaryAction = forwardRef<\n  HTMLAnchorElement | HTMLButtonElement,\n  PropsWithChildren<HeroPrimaryActionProps>\n>(({href, as = 'a', children, ...rest}, ref) => {\n  const {variant: heroVariant, enableAnimation} = useHeroContext()\n  const isGridline = heroVariant === 'gridline' || heroVariant === 'gridline-expressive'\n  const Tag = isGridline ? Box : React.Fragment\n  const tagProps = isGridline\n    ? {\n        animate: enableAnimation\n          ? {\n              variant: 'slide-in-up' as const,\n              delay: 750,\n              duration: 1000,\n            }\n          : undefined,\n      }\n    : {}\n\n  return (\n    <Tag {...tagProps}>\n      <Button ref={ref as React.Ref<HTMLButtonElement>} as={as} variant=\"primary\" size=\"medium\" href={href} {...rest}>\n        {children}\n      </Button>\n    </Tag>\n  )\n})\n"],"mappings":";;;;;;AAgBA,IAAa,IAAoB,GAG9B,EAAC,SAAM,QAAK,KAAK,aAAU,GAAG,KAAO,MAAQ;CAC9C,IAAM,EAAC,SAAS,GAAa,uBAAmB,GAAgB,EAC1D,IAAa,MAAgB,cAAc,MAAgB;AAcjE,QACE,kBAdU,IAAa,IAAM,EAAM,UAcnC;EAAK,GAbU,IACb,EACE,SAAS,IACL;GACE,SAAS;GACT,OAAO;GACP,UAAU;GACX,GACD,KAAA,GACL,GACD,EAAE;YAIF,kBAAC,GAAD;GAAa;GAAyC;GAAI,SAAQ;GAAU,MAAK;GAAe;GAAM,GAAI;GACvG;GACM,CAAA;EACL,CAAA;EAER"}

package/esm/LogoSuite/LogoSuite.js

@@ -90,7 +90,7 @@ var y = {
 			className: l["LogoSuite__logobar-takeoverButtonContainer"],
 			children: /* @__PURE__ */ _(c, {
 				as: "a",
-				variant: "accent",
+				variant: "primary",
 				className: e(l["LogoSuite__logobar-takeoverButton"], t),
 				...i,
 				children: n

package/esm/LogoSuite/LogoSuite.js.map

@@ -1 +1 @@
-{"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon, PlayIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n  root: 'LogoSuite',\n  get marqueeGroup() {\n    return `${this.root}-marqueeGroup`\n  },\n}\n\nexport type LogoSuiteProps = {\n  /**\n   * The horizontal alignment of the LogoSuite.\n   */\n  align?: 'start' | 'center' | 'justify'\n  /**\n   * Whether to render a divider immediately after the LogoSuite.\n   */\n  hasDivider?: boolean\n  /**\n   * Test id for the root LogoSuite element.\n   */\n  'data-testid'?: string\n  /**\n   * Alternative presentation\n   */\n  variant?: 'default' | 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n  align = 'center',\n  children,\n  className,\n  hasDivider = true,\n  variant = 'default',\n  'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Heading\n  })\n\n  const DescriptionChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Description\n  })\n\n  const LogobarChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _LogoBar\n  })\n\n  if (!HeadingChild) {\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      // eslint-disable-next-line no-console\n      console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n    }\n  }\n\n  const isHeadingVisuallyHidden =\n    React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n  const isGridlineExpressive = variant === 'gridline-expressive'\n  const hasVisibleTextContent = isGridlineExpressive && ((HeadingChild && !isHeadingVisuallyHidden) || DescriptionChild)\n\n  return (\n    <div\n      className={clsx(\n        styles.LogoSuite,\n        styles[`LogoSuite--${align}`],\n        hasDivider && styles['LogoSuite--hasDivider'],\n        styles[`LogoSuite--${variant}`],\n        className,\n      )}\n      data-testid={testId}\n    >\n      {isGridlineExpressive ? (\n        <Grid className={styles['LogoSuite__content']}>\n          {hasVisibleTextContent && (\n            <Grid.Column span={{large: 3}} className={styles['LogoSuite__textContainer']}>\n              {HeadingChild}\n              {DescriptionChild}\n            </Grid.Column>\n          )}\n          <Grid.Column span={{large: hasVisibleTextContent ? 9 : 12}} className={styles['LogoSuite__logobarContainer']}>\n            {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n            {LogobarChild}\n          </Grid.Column>\n        </Grid>\n      ) : (\n        <>\n          {HeadingChild}\n          {DescriptionChild}\n          {LogobarChild}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n  HeadingProps & {\n    /**\n     * Whether to visually hide the heading.\n     */\n    visuallyHidden?: boolean\n  }\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = 'subhead-large',\n      className,\n      children,\n      visuallyHidden,\n      ...props\n    }: PropsWithChildren<LogoSuiteHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles['LogoSuite__heading'],\n          visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n          visuallyHidden && 'visually-hidden',\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n  TextProps & {\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  (\n    {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n    ref: Ref<HTMLParagraphElement>,\n  ) => {\n    return (\n      <Text\n        as=\"p\"\n        ref={ref}\n        size={size}\n        variant={variant}\n        className={clsx(styles['LogoSuite__description'], className)}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PlayPauseButtonProps = {\n  isPlaying?: boolean\n  onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n  const onClick = useCallback(() => {\n    onPlayPause?.(!isPlaying)\n  }, [onPlayPause, isPlaying])\n\n  /**\n   * aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n   * eg \"Play animation on\" or \"Pause animation off\"\n   */\n  return (\n    <button\n      className={styles['LogoSuite__logobar-playPauseButton']}\n      type=\"button\"\n      onClick={onClick}\n      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n    >\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </button>\n  )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  /**\n   * The gap between logos\n   */\n  gap?: 'default' | 'condensed'\n  /**\n   * Enables an optional marquee effect\n   */\n  marquee?: boolean\n  /**\n   * The speed of the marquee effect\n   */\n  marqueeSpeed?: 'slow' | 'normal' | 'idle'\n  /**\n   * The stylistic variant of the LogoBar.\n   */\n  variant?: 'muted' | 'emphasis'\n  /**\n   * Displays an optional takeover button (as an anchor) on hover/focus.\n   */\n  takeoverButton?: {\n    label: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n    BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n  (\n    {\n      className,\n      children,\n      gap = 'default',\n      marquee = false,\n      marqueeSpeed = 'normal',\n      variant = 'muted',\n      takeoverButton,\n      ...props\n    }: LogoSuiteLogoBarProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n    useEffect(() => {\n      setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n    }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n    if (marquee && takeoverButton) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n        )\n      }\n    }\n\n    const defaultProps = {\n      ref,\n      className: clsx(\n        styles['LogoSuite__logobar'],\n        styles[`LogoSuite__logobar--variant-${variant}`],\n        styles[`LogoSuite__logobar--gap-${gap}`],\n        className,\n      ),\n      ...props,\n    }\n\n    const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n    const handleFocus = useCallback(() => {\n      setIsFocusWithin(true)\n    }, [])\n\n    const handleBlur = useCallback((event: React.FocusEvent) => {\n      if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n        setIsFocusWithin(false)\n      }\n    }, [])\n\n    const renderTakeoverButton = () => {\n      if (!takeoverButton) return null\n      const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n      return (\n        <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n          <Button\n            as=\"a\"\n            variant=\"accent\"\n            className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n            {...takeoverButtonProps}\n          >\n            {label}\n          </Button>\n        </div>\n      )\n    }\n\n    if (marquee) {\n      const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n      const shouldPause = !isPlaying || prefersReducedMotion\n      return (\n        <div\n          {...restProps}\n          className={clsx(\n            styles['LogoSuite__logobar--has-marquee'],\n            marqueeDefaultClassName,\n            shouldPause && styles['LogoSuite__logobar--paused'],\n          )}\n        >\n          <div\n            className={clsx(\n              styles['LogoSuite__logobar-marquee'],\n              isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          >\n            <div\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n              data-testid={testIds.marqueeGroup}\n            >\n              {children}\n            </div>\n            <div\n              inert\n              aria-hidden=\"true\"\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n        </div>\n      )\n    }\n\n    if (takeoverButton) {\n      const {className: defaultClassName, ...restProps} = defaultProps\n      return (\n        <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n          {children}\n          {renderTakeoverButton()}\n        </div>\n      )\n    }\n\n    return <div {...defaultProps}>{children}</div>\n  },\n)\n\n/**\n * Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n  Heading: _Heading,\n  Description: _Description,\n  Logobar: _LogoBar,\n  testIds,\n})\n"],"mappings":"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"}
+{"version":3,"file":"LogoSuite.js","names":[],"sources":["../../src/LogoSuite/LogoSuite.tsx"],"sourcesContent":["import {clsx} from 'clsx'\nimport React, {type PropsWithChildren, type Ref, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'\nimport {useReducedMotion} from '../hooks/useReducedMotion'\nimport {PauseIcon, PlayIcon} from '@primer/octicons-react'\nimport type {BaseProps} from '../component-helpers'\nimport {Heading, HeadingProps, defaultHeadingTag, Text, TextProps, Grid, Button} from '../'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/colors-with-modes.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/logosuite/base.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './LogoSuite.module.css'\n\nconst testIds = {\n  root: 'LogoSuite',\n  get marqueeGroup() {\n    return `${this.root}-marqueeGroup`\n  },\n}\n\nexport type LogoSuiteProps = {\n  /**\n   * The horizontal alignment of the LogoSuite.\n   */\n  align?: 'start' | 'center' | 'justify'\n  /**\n   * Whether to render a divider immediately after the LogoSuite.\n   */\n  hasDivider?: boolean\n  /**\n   * Test id for the root LogoSuite element.\n   */\n  'data-testid'?: string\n  /**\n   * Alternative presentation\n   */\n  variant?: 'default' | 'gridline-expressive'\n} & BaseProps<HTMLDivElement> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst LogoSuiteBase = ({\n  align = 'center',\n  children,\n  className,\n  hasDivider = true,\n  variant = 'default',\n  'data-testid': testId,\n}: PropsWithChildren<LogoSuiteProps>) => {\n  const childrenArray = useMemo(() => React.Children.toArray(children), [children])\n\n  const HeadingChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Heading\n  })\n\n  const DescriptionChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _Description\n  })\n\n  const LogobarChild = childrenArray.find(child => {\n    return React.isValidElement(child) && child.type === _LogoBar\n  })\n\n  if (!HeadingChild) {\n    if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n      // eslint-disable-next-line no-console\n      console.warn('LogoSuite: Heading child is required. You may use `visuallyHidden` to hide it from view.')\n    }\n  }\n\n  const isHeadingVisuallyHidden =\n    React.isValidElement<LogoSuiteHeadingProps>(HeadingChild) && HeadingChild.props.visuallyHidden\n  const isGridlineExpressive = variant === 'gridline-expressive'\n  const hasVisibleTextContent = isGridlineExpressive && ((HeadingChild && !isHeadingVisuallyHidden) || DescriptionChild)\n\n  return (\n    <div\n      className={clsx(\n        styles.LogoSuite,\n        styles[`LogoSuite--${align}`],\n        hasDivider && styles['LogoSuite--hasDivider'],\n        styles[`LogoSuite--${variant}`],\n        className,\n      )}\n      data-testid={testId}\n    >\n      {isGridlineExpressive ? (\n        <Grid className={styles['LogoSuite__content']}>\n          {hasVisibleTextContent && (\n            <Grid.Column span={{large: 3}} className={styles['LogoSuite__textContainer']}>\n              {HeadingChild}\n              {DescriptionChild}\n            </Grid.Column>\n          )}\n          <Grid.Column span={{large: hasVisibleTextContent ? 9 : 12}} className={styles['LogoSuite__logobarContainer']}>\n            {!hasVisibleTextContent && isHeadingVisuallyHidden && HeadingChild}\n            {LogobarChild}\n          </Grid.Column>\n        </Grid>\n      ) : (\n        <>\n          {HeadingChild}\n          {DescriptionChild}\n          {LogobarChild}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport type LogoSuiteHeadingProps = BaseProps<HTMLHeadingElement> &\n  HeadingProps & {\n    /**\n     * Whether to visually hide the heading.\n     */\n    visuallyHidden?: boolean\n  }\n\nconst _Heading = forwardRef(\n  (\n    {\n      as = defaultHeadingTag,\n      size = 'subhead-large',\n      className,\n      children,\n      visuallyHidden,\n      ...props\n    }: PropsWithChildren<LogoSuiteHeadingProps>,\n    ref: Ref<HTMLHeadingElement>,\n  ) => {\n    return (\n      <Heading\n        ref={ref}\n        className={clsx(\n          styles['LogoSuite__heading'],\n          visuallyHidden && styles['LogoSuite__heading--visually-hidden'],\n          visuallyHidden && 'visually-hidden',\n          className,\n        )}\n        size={size}\n        as={as}\n        {...props}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\nexport type LogoSuiteDescriptionProps = BaseProps<HTMLParagraphElement> &\n  TextProps & {\n    children: React.ReactNode | React.ReactNode[]\n  }\n\nconst _Description = forwardRef(\n  (\n    {className, children, size = '200', variant = 'muted', ...props}: LogoSuiteDescriptionProps,\n    ref: Ref<HTMLParagraphElement>,\n  ) => {\n    return (\n      <Text\n        as=\"p\"\n        ref={ref}\n        size={size}\n        variant={variant}\n        className={clsx(styles['LogoSuite__description'], className)}\n        {...props}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PlayPauseButtonProps = {\n  isPlaying?: boolean\n  onPlayPause?: (isPlaying: boolean) => void\n}\n\nconst PlayPauseButton = ({isPlaying = true, onPlayPause}: PlayPauseButtonProps) => {\n  const onClick = useCallback(() => {\n    onPlayPause?.(!isPlaying)\n  }, [onPlayPause, isPlaying])\n\n  /**\n   * aria-pressed is intentionally not used here to prevent potentially confusing screen reader announcements\n   * eg \"Play animation on\" or \"Pause animation off\"\n   */\n  return (\n    <button\n      className={styles['LogoSuite__logobar-playPauseButton']}\n      type=\"button\"\n      onClick={onClick}\n      aria-label={isPlaying ? 'Pause animation' : 'Play animation'}\n    >\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </button>\n  )\n}\n\nexport type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  /**\n   * The gap between logos\n   */\n  gap?: 'default' | 'condensed'\n  /**\n   * Enables an optional marquee effect\n   */\n  marquee?: boolean\n  /**\n   * The speed of the marquee effect\n   */\n  marqueeSpeed?: 'slow' | 'normal' | 'idle'\n  /**\n   * The stylistic variant of the LogoBar.\n   */\n  variant?: 'muted' | 'emphasis'\n  /**\n   * Displays an optional takeover button (as an anchor) on hover/focus.\n   */\n  takeoverButton?: {\n    label: string\n  } & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> &\n    BaseProps<HTMLAnchorElement>\n}\n\nconst _LogoBar = forwardRef(\n  (\n    {\n      className,\n      children,\n      gap = 'default',\n      marquee = false,\n      marqueeSpeed = 'normal',\n      variant = 'muted',\n      takeoverButton,\n      ...props\n    }: LogoSuiteLogoBarProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const prefersReducedMotion = useReducedMotion()\n    const [isPlaying, setIsPlaying] = useState(() => marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n\n    useEffect(() => {\n      setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')\n    }, [marquee, prefersReducedMotion, marqueeSpeed])\n\n    if (marquee && takeoverButton) {\n      if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          'LogoSuite.Logobar: `takeoverButton` cant be used with `marquee` prop due to accessibility risks. Set `marquee={false}` to use the takeover feature.',\n        )\n      }\n    }\n\n    const defaultProps = {\n      ref,\n      className: clsx(\n        styles['LogoSuite__logobar'],\n        styles[`LogoSuite__logobar--variant-${variant}`],\n        styles[`LogoSuite__logobar--gap-${gap}`],\n        className,\n      ),\n      ...props,\n    }\n\n    const [isFocusWithin, setIsFocusWithin] = useState(false)\n\n    const handleFocus = useCallback(() => {\n      setIsFocusWithin(true)\n    }, [])\n\n    const handleBlur = useCallback((event: React.FocusEvent) => {\n      if (!event.currentTarget.contains(event.relatedTarget as Node)) {\n        setIsFocusWithin(false)\n      }\n    }, [])\n\n    const renderTakeoverButton = () => {\n      if (!takeoverButton) return null\n      const {className: takeoverButtonClassName, label, ref: _ref, ...takeoverButtonProps} = takeoverButton\n      return (\n        <div className={styles['LogoSuite__logobar-takeoverButtonContainer']}>\n          <Button\n            as=\"a\"\n            variant=\"primary\"\n            className={clsx(styles['LogoSuite__logobar-takeoverButton'], takeoverButtonClassName)}\n            {...takeoverButtonProps}\n          >\n            {label}\n          </Button>\n        </div>\n      )\n    }\n\n    if (marquee) {\n      const {className: marqueeDefaultClassName, ...restProps} = defaultProps\n      const shouldPause = !isPlaying || prefersReducedMotion\n      return (\n        <div\n          {...restProps}\n          className={clsx(\n            styles['LogoSuite__logobar--has-marquee'],\n            marqueeDefaultClassName,\n            shouldPause && styles['LogoSuite__logobar--paused'],\n          )}\n        >\n          <div\n            className={clsx(\n              styles['LogoSuite__logobar-marquee'],\n              isFocusWithin && styles['LogoSuite__logobar-marquee--focused'],\n            )}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          >\n            <div\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n              data-testid={testIds.marqueeGroup}\n            >\n              {children}\n            </div>\n            <div\n              inert\n              aria-hidden=\"true\"\n              className={clsx(\n                styles['LogoSuite__logobar-marqueeGroup'],\n                styles[`LogoSuite__logobar-marqueeGroup--speed-${marqueeSpeed}`],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n          <PlayPauseButton onPlayPause={setIsPlaying} isPlaying={isPlaying} />\n        </div>\n      )\n    }\n\n    if (takeoverButton) {\n      const {className: defaultClassName, ...restProps} = defaultProps\n      return (\n        <div {...restProps} className={clsx(defaultClassName, styles['LogoSuite__logobar--has-takeover'])}>\n          {children}\n          {renderTakeoverButton()}\n        </div>\n      )\n    }\n\n    return <div {...defaultProps}>{children}</div>\n  },\n)\n\n/**\n * Use LogoSuite to present a list of logos, such as sponsors or vendors.\n * @see https://primer.style/brand/components/LogoSuite\n */\nexport const LogoSuite = Object.assign(LogoSuiteBase, {\n  Heading: _Heading,\n  Description: _Description,\n  Logobar: _LogoBar,\n  testIds,\n})\n"],"mappings":"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"}

package/esm/Pillar/Pillar.d.ts

@@ -17,6 +17,10 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
      * Enables optional border around the pillar content
      */
     hasBorder?: boolean;
+    /**
+     * Allows the pillar to fill the width of its parent container.
+     */
+    fullWidth?: boolean;
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>);
 type PillarImageProps = ImageProps;
 declare function PillarImage({ className, ...rest }: PillarImageProps): import("react/jsx-runtime").JSX.Element;

package/esm/Pillar/Pillar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pillar.d.ts","sourceRoot":"","sources":["../../src/Pillar/Pillar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAA4B,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9F,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAQ,SAAS,EAAC,MAAM,IAAI,CAAA;AACvF,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAQnD,eAAO,MAAM,sBAAsB,UAAU,CAAA;AAC7C,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IACjG;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,SAAS,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,CAAC,CAAC,SAAS,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;AAuDpH,KAAK,gBAAgB,GAAG,UAAU,CAAA;AAElC,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,gBAAgB,2CAM1D;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAC3E,KAAK,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;AACxG,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAChE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;CAClC,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,aAAoB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CA6B3F;AAED,KAAK,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAkBhB,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAmBhF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GACvC,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAU9B;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAA"}
+{"version":3,"file":"Pillar.d.ts","sourceRoot":"","sources":["../../src/Pillar/Pillar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,iBAAiB,EAA4B,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9F,OAAO,EAAU,YAAY,EAAe,KAAK,UAAU,EAAQ,SAAS,EAAC,MAAM,IAAI,CAAA;AACvF,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAA;AAQnD,eAAO,MAAM,sBAAsB,UAAU,CAAA;AAC7C,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IACjG;;OAEG;IACH,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,SAAS,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,CAAC,CAAC,SAAS,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;AAyDpH,KAAK,gBAAgB,GAAG,UAAU,CAAA;AAElC,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,gBAAgB,2CAM1D;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC,CAAA;AAC3E,KAAK,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;AACxG,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAChE,IAAI,EAAE,WAAW,GAAG,aAAa,CAAA;CAClC,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,IAAI,EAAE,SAAS,EAAE,aAAoB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,eAAe,2CA6B3F;AAED,KAAK,kBAAkB,GAAG,SAAS,CAAC,kBAAkB,CAAC,GAAG;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC7C,EAAE,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAA;CACvC,GAAG,YAAY,CAAA;AAkBhB,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAmBhF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC,GACvC,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAU9B;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;CAMjB,CAAA"}

package/esm/Pillar/Pillar.js

@@ -9,17 +9,17 @@ import s from "./Pillar.module.js";
 import c, { forwardRef as l } from "react";
 import { jsx as u } from "react/jsx-runtime";
 //#region src/Pillar/Pillar.tsx
-var d = "green", f = 32, p = l(({ children: n, className: r, animate: i, as: a = "div", align: o = "start", style: l, hasBorder: d = !1, ...f }, p) => {
-	let { classes: y, styles: b } = t(i), x = c.Children.toArray(n).filter((e) => !!(c.isValidElement(e) && typeof e.type != "string" && (e.type === m || e.type === h || e.type === g || e.type === _ || e.type === v)));
+var d = "green", f = 32, p = l(({ children: n, className: r, animate: i, as: a = "div", align: o = "start", style: l, hasBorder: d = !1, fullWidth: f = !1, ...p }, y) => {
+	let { classes: b, styles: x } = t(i), S = c.Children.toArray(n).filter((e) => !!(c.isValidElement(e) && typeof e.type != "string" && (e.type === m || e.type === h || e.type === g || e.type === _ || e.type === v)));
 	return /* @__PURE__ */ u(["div", "article"].includes(a) ? a : "div", {
-		className: e(s.Pillar, s[`Pillar--align-${o}`], d && s["Pillar--has-border"], y, r),
-		ref: p,
-		...f,
+		className: e(s.Pillar, s[`Pillar--align-${o}`], d && s["Pillar--has-border"], !f && s["Pillar--has-max-width"], b, r),
+		ref: y,
+		...p,
 		style: {
-			...b,
+			...x,
 			...l
 		},
-		children: x
+		children: S
 	});
 });
 function m({ className: e, ...t }) {

package/esm/Pillar/Pillar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n  /**\n   * The HTML element used to render the Pillar.\n   */\n  as?: C | 'div' | 'article'\n  /**\n   * Aligns the pillar content\n   */\n  align?: 'start' | 'center'\n  /**\n   * Enables optional border around the pillar content\n   */\n  hasBorder?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n  (\n    {\n      children,\n      className,\n      animate,\n      as = 'div',\n      align = 'start',\n      style,\n      hasBorder = false,\n      ...rest\n    }: PropsWithChildren<PillarProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const filteredChildren = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child) && typeof child.type !== 'string') {\n        if (\n          child.type === PillarImage ||\n          child.type === PillarIcon ||\n          child.type === PillarHeading ||\n          child.type === PillarDescription ||\n          child.type === PillarLink\n        ) {\n          return true\n        }\n      }\n      return false\n    })\n\n    const validElements = ['div', 'article']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    return (\n      <Component\n        className={clsx(\n          styles.Pillar,\n          styles[`Pillar--align-${align}`],\n          hasBorder && styles['Pillar--has-border'],\n          animationClasses,\n          className,\n        )}\n        ref={ref}\n        {...(rest as HTMLAttributes<HTMLElement>)}\n        style={{...animationInlineStyles, ...style}}\n      >\n        {filteredChildren}\n      </Component>\n    )\n  },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n  return (\n    <div className={styles.Pillar__image}>\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> | React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' | 'color'> & {\n  icon: IconElement | IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n  if (!hasBackground) {\n    const iconWrapperProps = {\n      ...(props as React.HTMLAttributes<HTMLSpanElement>),\n      className: clsx(styles.Pillar__icon, className),\n    }\n\n    let iconWithoutBackground: React.ReactNode\n\n    if (React.isValidElement<IconComponentProps>(icon)) {\n      iconWithoutBackground = icon\n    } else {\n      const IconWithoutBackground = icon\n      iconWithoutBackground = <IconWithoutBackground />\n    }\n\n    return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n  }\n\n  return (\n    <Icon\n      className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n      color={defaultPillarIconColor}\n      hasBackground\n      icon={icon as IconProps['icon']}\n      size={size ?? defaultPillarIconSize}\n      {...props}\n    />\n  )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n  ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n    return (\n      <Heading\n        size={size}\n        className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n        ref={ref}\n        as={as}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text\n        variant=\"muted\"\n        ref={ref}\n        size=\"200\"\n        as=\"p\"\n        className={clsx(styles.Pillar__description, className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PillarLinkProps = {\n  href: string\n} & Omit<LinkProps, 'size' | 'direction'> &\n  BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n  return (\n    <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n      {children}\n    </Link>\n  )\n})\n\n/**\n * Pillar component:\n * {@link https://primer.style/brand/components/Pillar/ See usage examples}.\n */\nexport const Pillar = Object.assign(PillarRoot, {\n  Icon: PillarIcon,\n  Image: PillarImage,\n  Heading: PillarHeading,\n  Description: PillarDescription,\n  Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAgB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}
+{"version":3,"file":"Pillar.js","names":[],"sources":["../../src/Pillar/Pillar.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, HTMLAttributes, type Ref, type JSX} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, HeadingProps, Text, Image, type ImageProps, Link, LinkProps} from '..'\nimport {Icon, type IconProps} from '../Icon'\nimport type {BaseProps} from '../component-helpers'\nimport {useAnimation} from '../animation'\n\n/**\n * Main stylesheet (as a CSS Module)\n */\nimport styles from './Pillar.module.css'\n\nexport const defaultPillarIconColor = 'green'\nexport const defaultPillarIconSize = 32\nexport type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<C> & {\n  /**\n   * The HTML element used to render the Pillar.\n   */\n  as?: C | 'div' | 'article'\n  /**\n   * Aligns the pillar content\n   */\n  align?: 'start' | 'center'\n  /**\n   * Enables optional border around the pillar content\n   */\n  hasBorder?: boolean\n  /**\n   * Allows the pillar to fill the width of its parent container.\n   */\n  fullWidth?: boolean\n} & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)\n\nconst PillarRoot = forwardRef(\n  (\n    {\n      children,\n      className,\n      animate,\n      as = 'div',\n      align = 'start',\n      style,\n      hasBorder = false,\n      fullWidth = false,\n      ...rest\n    }: PropsWithChildren<PillarProps>,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const filteredChildren = React.Children.toArray(children).filter(child => {\n      if (React.isValidElement(child) && typeof child.type !== 'string') {\n        if (\n          child.type === PillarImage ||\n          child.type === PillarIcon ||\n          child.type === PillarHeading ||\n          child.type === PillarDescription ||\n          child.type === PillarLink\n        ) {\n          return true\n        }\n      }\n      return false\n    })\n\n    const validElements = ['div', 'article']\n    const Component = validElements.includes(as) ? as : 'div'\n\n    return (\n      <Component\n        className={clsx(\n          styles.Pillar,\n          styles[`Pillar--align-${align}`],\n          hasBorder && styles['Pillar--has-border'],\n          !fullWidth && styles['Pillar--has-max-width'],\n          animationClasses,\n          className,\n        )}\n        ref={ref}\n        {...(rest as HTMLAttributes<HTMLElement>)}\n        style={{...animationInlineStyles, ...style}}\n      >\n        {filteredChildren}\n      </Component>\n    )\n  },\n)\n\ntype PillarImageProps = ImageProps\n\nfunction PillarImage({className, ...rest}: PillarImageProps) {\n  return (\n    <div className={styles.Pillar__image}>\n      <Image className={className} {...rest} />\n    </div>\n  )\n}\n\ntype IconComponentProps = React.SVGAttributes<SVGElement> & {size?: number}\ntype IconComponent = React.ComponentType<IconComponentProps> | React.ExoticComponent<IconComponentProps>\ntype IconElement = React.ReactElement<IconComponentProps>\n\nexport type PillarIconProps = Omit<IconProps, 'icon' | 'color'> & {\n  icon: IconElement | IconComponent\n}\n\nfunction PillarIcon({icon, className, hasBackground = true, size, ...props}: PillarIconProps) {\n  if (!hasBackground) {\n    const iconWrapperProps = {\n      ...(props as React.HTMLAttributes<HTMLSpanElement>),\n      className: clsx(styles.Pillar__icon, className),\n    }\n\n    let iconWithoutBackground: React.ReactNode\n\n    if (React.isValidElement<IconComponentProps>(icon)) {\n      iconWithoutBackground = icon\n    } else {\n      const IconWithoutBackground = icon\n      iconWithoutBackground = <IconWithoutBackground />\n    }\n\n    return <span {...iconWrapperProps}>{iconWithoutBackground}</span>\n  }\n\n  return (\n    <Icon\n      className={clsx(styles.Pillar__icon, styles['Pillar__icon--with-background'], className)}\n      color={defaultPillarIconColor}\n      hasBackground\n      icon={icon as IconProps['icon']}\n      size={size ?? defaultPillarIconSize}\n      {...props}\n    />\n  )\n}\n\ntype PillarHeadingProps = BaseProps<HTMLHeadingElement> & {\n  children: React.ReactNode | React.ReactNode[]\n  as?: Exclude<HeadingProps['as'], 'h1'>\n} & HeadingProps\n\nconst PillarHeading = forwardRef<HTMLHeadingElement, PillarHeadingProps>(\n  ({children, as = 'h3', size = '6', className, ...rest}, ref) => {\n    return (\n      <Heading\n        size={size}\n        className={clsx(styles.Pillar__heading, styles[`Pillar__heading--size-${size}`], className)}\n        ref={ref}\n        as={as}\n        {...rest}\n      >\n        {children}\n      </Heading>\n    )\n  },\n)\n\ntype PillarDescriptionProps = PropsWithChildren<BaseProps<HTMLParagraphElement>>\n\nconst PillarDescription = forwardRef<HTMLParagraphElement, PillarDescriptionProps>(\n  ({children, className, ...rest}, ref) => {\n    return (\n      <Text\n        variant=\"muted\"\n        ref={ref}\n        size=\"200\"\n        as=\"p\"\n        className={clsx(styles.Pillar__description, className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    )\n  },\n)\n\ntype PillarLinkProps = {\n  href: string\n} & Omit<LinkProps, 'size' | 'direction'> &\n  BaseProps<HTMLAnchorElement>\n\nconst PillarLink = forwardRef(({className, children, href, ...props}: PillarLinkProps, ref: Ref<HTMLAnchorElement>) => {\n  return (\n    <Link variant=\"accent\" href={href} ref={ref} className={clsx(styles.Pillar__link, className)} {...props}>\n      {children}\n    </Link>\n  )\n})\n\n/**\n * Pillar component:\n * {@link https://primer.style/brand/components/Pillar/ See usage examples}.\n */\nexport const Pillar = Object.assign(PillarRoot, {\n  Icon: PillarIcon,\n  Image: PillarImage,\n  Heading: PillarHeading,\n  Description: PillarDescription,\n  Link: PillarLink,\n})\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,IAAyB,SACzB,IAAwB,IAoB/B,IAAa,GAEf,EACE,aACA,cACA,YACA,QAAK,OACL,WAAQ,SACR,UACA,eAAY,IACZ,eAAY,IACZ,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAmB,EAAM,SAAS,QAAQ,EAAS,CAAC,QAAO,MAC/D,GAAI,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aAErD,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,KACf,EAAM,SAAS,IAMnB;AAKF,QACE,kBAHgB,CADK,OAAO,UACZ,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EACT,EAAO,QACP,EAAO,iBAAiB,MACxB,KAAa,EAAO,uBACpB,CAAC,KAAa,EAAO,0BACrB,GACA,EACD;EACI;EACL,GAAK;EACL,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;YAE1C;EACS,CAAA;EAGjB;AAID,SAAS,EAAY,EAAC,cAAW,GAAG,KAAyB;AAC3D,QACE,kBAAC,OAAD;EAAK,WAAW,EAAO;YACrB,kBAAC,GAAD;GAAkB;GAAW,GAAI;GAAQ,CAAA;EACrC,CAAA;;AAYV,SAAS,EAAW,EAAC,SAAM,cAAW,mBAAgB,IAAM,SAAM,GAAG,KAAyB;AAC5F,KAAI,CAAC,GAAe;EAClB,IAAM,IAAmB;GACvB,GAAI;GACJ,WAAW,EAAK,EAAO,cAAc,EAAU;GAChD,EAEG;AASJ,SAPA,AAIE,IAJE,EAAM,eAAmC,EAAK,GACxB,IAGA,kBAAC,GAAD,EAAyB,CAAA,EAG5C,kBAAC,QAAD;GAAM,GAAI;aAAmB;GAA6B,CAAA;;AAGnE,QACE,kBAAC,GAAD;EACE,WAAW,EAAK,EAAO,cAAc,EAAO,kCAAkC,EAAU;EACxF,OAAO;EACP,eAAA;EACM;EACN,MAAM,KAAA;EACN,GAAI;EACJ,CAAA;;AASN,IAAM,IAAgB,GACnB,EAAC,aAAU,QAAK,MAAM,UAAO,KAAK,cAAW,GAAG,KAAO,MAEpD,kBAAC,GAAD;CACQ;CACN,WAAW,EAAK,EAAO,iBAAiB,EAAO,yBAAyB,MAAS,EAAU;CACtF;CACD;CACJ,GAAI;CAEH;CACO,CAAA,CAGf,EAIK,IAAoB,GACvB,EAAC,aAAU,cAAW,GAAG,KAAO,MAE7B,kBAAC,GAAD;CACE,SAAQ;CACH;CACL,MAAK;CACL,IAAG;CACH,WAAW,EAAK,EAAO,qBAAqB,EAAU;CACtD,GAAI;CAEH;CACI,CAAA,CAGZ,EAOK,IAAa,GAAY,EAAC,cAAW,aAAU,SAAM,GAAG,KAAyB,MAEnF,kBAAC,GAAD;CAAM,SAAQ;CAAe;CAAW;CAAK,WAAW,EAAK,EAAO,cAAc,EAAU;CAAE,GAAI;CAC/F;CACI,CAAA,CAET,EAMW,IAAS,OAAO,OAAO,GAAY;CAC9C,MAAM;CACN,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC"}

package/esm/Pillar/Pillar.module-BM_qcCVC.css

@@ -0,0 +1 @@
+.Primer_Brand__Pillar-module__Pillar___xLPAt{color:var(--brand-color-text-default);flex-direction:column;display:flex}.Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE{max-width:50ch}.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv{border:var(--brand-borderWidth-thin) solid var(--brand-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-32)}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-center___1eAmk{text-align:center;align-items:center}.Primer_Brand__Pillar-module__Pillar___xLPAt.Primer_Brand__Pillar-module__Pillar--align-start___kEyp9{text-align:left;align-items:flex-start}.Primer_Brand__Pillar-module__Pillar__image___z4m11{margin-bottom:var(--base-size-28);border-radius:var(--brand-borderRadius-medium);overflow:hidden}.Primer_Brand__Pillar-module__Pillar__image___z4m11 img,.Primer_Brand__Pillar-module__Pillar__image___z4m11 span,.Primer_Brand__Pillar-module__Pillar__image___z4m11 picture{display:block}.Primer_Brand__Pillar-module__Pillar__icon___4V_g6{margin-bottom:var(--base-size-48)}.Primer_Brand__Pillar-module__Pillar__icon--with-background___6pK_P>svg{width:100%;height:100%}.Primer_Brand__Pillar-module__Pillar__heading___9r3aH{margin-bottom:var(--base-size-16)}.Primer_Brand__Pillar-module__Pillar__description___WhErW:not(.Primer_Brand__Pillar-module__Pillar--has-border___h8dLv .Primer_Brand__Pillar-module__Pillar__description___WhErW:last-child){margin-bottom:var(--base-size-24)}.Primer_Brand__Pillar-module__Pillar__link___4V1wl{margin-top:auto}

package/esm/Pillar/Pillar.module.js

@@ -1,5 +1,6 @@
-import './Pillar.module-Cpx4mbRH.css';var e = {
+import './Pillar.module-BM_qcCVC.css';var e = {
 	Pillar: "Primer_Brand__Pillar-module__Pillar___xLPAt",
+	"Pillar--has-max-width": "Primer_Brand__Pillar-module__Pillar--has-max-width___reXfE",
 	"Pillar--has-border": "Primer_Brand__Pillar-module__Pillar--has-border___h8dLv",
 	"Pillar--align-center": "Primer_Brand__Pillar-module__Pillar--align-center___1eAmk",
 	"Pillar--align-start": "Primer_Brand__Pillar-module__Pillar--align-start___kEyp9",

package/esm/Pillar/Pillar.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pillar.module.js","names":[],"sources":["../../src/Pillar/Pillar.module.css"],"sourcesContent":[".Pillar {\n  max-width: 50ch;\n  color: var(--brand-color-text-default);\n  display: flex;\n  flex-direction: column;\n}\n\n.Pillar--has-border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-32);\n}\n\n.Pillar.Pillar--align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.Pillar.Pillar--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Pillar__image {\n  margin-bottom: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n}\n\n.Pillar__image img,\n.Pillar__image span {\n  display: block;\n}\n\n.Pillar__icon {\n  margin-bottom: var(--base-size-48);\n}\n\n.Pillar__icon--with-background > svg {\n  width: 100%;\n  height: 100%;\n}\n\n.Pillar__heading {\n  margin-bottom: var(--base-size-16);\n}\n\n.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {\n  margin-bottom: var(--base-size-24);\n}\n\n.Pillar__link {\n  margin-top: auto;\n}\n"],"mappings":""}
+{"version":3,"file":"Pillar.module.js","names":[],"sources":["../../src/Pillar/Pillar.module.css"],"sourcesContent":[".Pillar {\n  color: var(--brand-color-text-default);\n  display: flex;\n  flex-direction: column;\n}\n\n.Pillar--has-max-width {\n  max-width: 50ch;\n}\n\n.Pillar--has-border {\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-medium);\n  padding: var(--base-size-32);\n}\n\n.Pillar.Pillar--align-center {\n  align-items: center;\n  text-align: center;\n}\n\n.Pillar.Pillar--align-start {\n  align-items: flex-start;\n  text-align: left;\n}\n\n.Pillar__image {\n  margin-bottom: var(--base-size-28);\n  border-radius: var(--brand-borderRadius-medium);\n  overflow: hidden;\n}\n\n.Pillar__image img,\n.Pillar__image span,\n.Pillar__image picture {\n  display: block;\n}\n\n.Pillar__icon {\n  margin-bottom: var(--base-size-48);\n}\n\n.Pillar__icon--with-background > svg {\n  width: 100%;\n  height: 100%;\n}\n\n.Pillar__heading {\n  margin-bottom: var(--base-size-16);\n}\n\n.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {\n  margin-bottom: var(--base-size-24);\n}\n\n.Pillar__link {\n  margin-top: auto;\n}\n"],"mappings":""}

package/esm/PricingOptions/PricingOptions.js

@@ -310,7 +310,7 @@ var v = {
 	"data-testid": i || v.primaryAction,
 	className: e(u["PricingOptions__primary-action"], r),
 	size: "medium",
-	variant: "accent",
+	variant: "primary",
 	block: !0,
 	...a,
 	children: n