@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/es/components/ButtonCard/ButtonCard.js

@@ -6,127 +6,112 @@ import theme from '../../themes/theme.js';
 import Box from '../Box/Box.js';
 import Icon from '../Icon/Icon.js';
 
-const ButtonCardWrapper = styled.button `
-    display: block;
-    padding: 0;
-    border: 0;
-    width: 100%;
-    background-color: transparent;
-    cursor: pointer;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    color: ${theme.color.text.black};
-    text-decoration: none;
-
-    &:focus-visible {
-        border: 1px solid ${theme.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
-        border-radius: ${theme.radius.default};
-        outline: none;
-
-        & > div {
-            border: 0;
-        }
-    }
-
-    &:hover {
-        color: ${theme.color.text.black};
-    }
-`;
-const StyledBox = styled(Box) `
-    display: flex;
-    text-align: left;
-    gap: ${({ size }) => (size === 'small' ? '0.313rem' : '1rem')};
-    border: 1px solid ${theme.color.line.L03};
-    padding: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
-    ${({ size }) => size === 'small' && 'flex-direction: column'};
-    ${({ size }) => size !== 'small' && 'align-items: center'};
-`;
-const VisualContent = styled.div `
-    display: flex;
-    align-items: center;
-    width: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
-    height: ${({ size }) => (size === 'small' ? '2.5rem' : '3.75rem')};
-`;
-const TextContentWrapper = styled.div `
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    justify-content: space-between;
-    gap: ${({ size }) => (size === 'small' ? '0.625rem' : '1rem')};
-    min-width: 0;
-`;
-const TextContent = styled.div `
-    flex: 1 1 auto;
-`;
-const Title = styled.div `
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.bold};
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    word-break: break-word;
-    max-width: 100%;
-
-    ${({ size }) => size === 'small' &&
-    `
+const ButtonCardWrapper = styled.button.withConfig({
+  displayName: "ButtonCard__ButtonCardWrapper",
+  componentId: "sc-oqmhtr-0"
+})(["display:block;padding:0;border:0;width:100%;background-color:transparent;cursor:pointer;font-family:", ";font-size:", ";line-height:", ";color:", ";text-decoration:none;&:focus-visible{border:1px solid ", ";box-shadow:0px 0px 0px 2px ", ";border-radius:", ";outline:none;& > div{border:0;}}&:hover{color:", ";}"], theme.fontFamily.default, theme.fontSize.default, theme.lineHeight.default, theme.color.text.black, theme.color.focus.light, theme.color.focus.dark, theme.radius.default, theme.color.text.black);
+const StyledBox = styled(Box).withConfig({
+  displayName: "ButtonCard__StyledBox",
+  componentId: "sc-oqmhtr-1"
+})(["display:flex;text-align:left;gap:", ";border:1px solid ", ";padding:", ";", ";", ";"], ({
+  size
+}) => size === 'small' ? '0.313rem' : '1rem', theme.color.line.L03, ({
+  size
+}) => size === 'small' ? '0.625rem' : '1rem', ({
+  size
+}) => size === 'small' && 'flex-direction: column', ({
+  size
+}) => size !== 'small' && 'align-items: center');
+const VisualContent = styled.div.withConfig({
+  displayName: "ButtonCard__VisualContent",
+  componentId: "sc-oqmhtr-2"
+})(["display:flex;align-items:center;width:", ";height:", ";"], ({
+  size
+}) => size === 'small' ? '2.5rem' : '3.75rem', ({
+  size
+}) => size === 'small' ? '2.5rem' : '3.75rem');
+const TextContentWrapper = styled.div.withConfig({
+  displayName: "ButtonCard__TextContentWrapper",
+  componentId: "sc-oqmhtr-3"
+})(["display:flex;flex-grow:1;align-items:center;justify-content:space-between;gap:", ";min-width:0;"], ({
+  size
+}) => size === 'small' ? '0.625rem' : '1rem');
+const TextContent = styled.div.withConfig({
+  displayName: "ButtonCard__TextContent",
+  componentId: "sc-oqmhtr-4"
+})(["flex:1 1 auto;"]);
+const Title = styled.div.withConfig({
+  displayName: "ButtonCard__Title",
+  componentId: "sc-oqmhtr-5"
+})(["font-size:", ";line-height:", ";font-weight:", ";display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;max-width:100%;", " ", ";"], theme.fontSize.default, theme.lineHeight.default, theme.fontWeight.bold, ({
+  size
+}) => size === 'small' && `
         font-size: ${theme.fontSize.s};
         line-height: ${theme.lineHeight.s};
         font-weight: ${theme.fontWeight.medium};
         -webkit-line-clamp: 1;
-    `}
-
-    ${({ size }) => size === 'large' &&
-    `
+    `, ({
+  size
+}) => size === 'large' && `
         font-size: ${theme.fontSize.xl};
-    `};
-`;
-const Subtitle = styled.div `
-    color: ${theme.color.text.gray};
-    font-size: ${theme.fontSize.s};
-    line-height: ${theme.lineHeight.s};
-    font-weight: ${theme.fontWeight.medium};
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    word-break: break-word;
-    max-width: 100%;
-
-    ${({ size }) => size === 'small' &&
-    `
+    `);
+const Subtitle = styled.div.withConfig({
+  displayName: "ButtonCard__Subtitle",
+  componentId: "sc-oqmhtr-6"
+})(["color:", ";font-size:", ";line-height:", ";font-weight:", ";display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word;max-width:100%;", " ", ";"], theme.color.text.gray, theme.fontSize.s, theme.lineHeight.s, theme.fontWeight.medium, ({
+  size
+}) => size === 'small' && `
         font-size: ${theme.fontSize.xs};
         line-height: ${theme.lineHeight.xxs};
-    `}
-
-    ${({ size }) => size === 'large' &&
-    `
+    `, ({
+  size
+}) => size === 'large' && `
         font-size: ${theme.fontSize.default};
-    `};
-`;
-const CtaIcon = styled(Icon) `
-    color: ${theme.color.text.pink};
-
-    ${ButtonCardWrapper}:hover & {
-        color: ${theme.color.hover.pink};
-    }
-`;
+    `);
+const CtaIcon = styled(Icon).withConfig({
+  displayName: "ButtonCard__CtaIcon",
+  componentId: "sc-oqmhtr-7"
+})(["color:", ";", ":hover &{color:", ";}"], theme.color.text.pink, ButtonCardWrapper, theme.color.hover.pink);
 /** @visibleName Button Card */
-const ButtonCard = (_a) => {
-    var { type = 'button', size = 'medium', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", "size", 'data-testid']);
-    return (React__default.createElement(ButtonCardWrapper, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, className: props.className, "data-testid": dataTestId }, props.dataAttributes, (!props.href && {
-        name: props.name,
-    })),
-        React__default.createElement(StyledBox, { elevation: "low", size: size },
-            React__default.createElement(VisualContent, { size: size, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            React__default.createElement(TextContentWrapper, { size: size },
-                React__default.createElement(TextContent, null,
-                    React__default.createElement(Title, { size: size, "data-testid": dataTestId && `${dataTestId}-title` }, props.title),
-                    props.subtitle && (React__default.createElement(Subtitle, { size: size, "data-testid": dataTestId && `${dataTestId}-subtitle` }, props.subtitle))),
-                React__default.createElement(CtaIcon, { icon: props.isExternal && props.href ? Open : ChevronRight, size: size === 'small' ? '1rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-cta`, "aria-label": props.ariaLabelIcon, "aria-hidden": !props.ariaLabelIcon && true })))));
+const ButtonCard = _a => {
+  var {
+      type = 'button',
+      size = 'medium',
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["type", "size", 'data-testid']);
+  return /*#__PURE__*/React__default.createElement(ButtonCardWrapper, Object.assign({
+    id: props.id,
+    as: props.href ? 'a' : undefined,
+    type: props.href ? undefined : type,
+    onClick: props.onClick,
+    className: props.className,
+    "data-testid": dataTestId
+  }, props.dataAttributes, props.href ? {
+    href: props.href
+  } : {}, !props.href && {
+    name: props.name
+  }), /*#__PURE__*/React__default.createElement(StyledBox, {
+    elevation: "low",
+    size: size
+  }, /*#__PURE__*/React__default.createElement(VisualContent, {
+    size: size,
+    "data-testid": dataTestId && `${dataTestId}-content`
+  }, props.children), /*#__PURE__*/React__default.createElement(TextContentWrapper, {
+    size: size
+  }, /*#__PURE__*/React__default.createElement(TextContent, null, /*#__PURE__*/React__default.createElement(Title, {
+    size: size,
+    "data-testid": dataTestId && `${dataTestId}-title`
+  }, props.title), props.subtitle && (/*#__PURE__*/React__default.createElement(Subtitle, {
+    size: size,
+    "data-testid": dataTestId && `${dataTestId}-subtitle`
+  }, props.subtitle))), /*#__PURE__*/React__default.createElement(CtaIcon, {
+    icon: props.isExternal && props.href ? Open : ChevronRight,
+    size: size === 'small' ? '1rem' : '1.5rem',
+    "data-testid": dataTestId && `${dataTestId}-cta`,
+    "aria-label": props.ariaLabelIcon,
+    "aria-hidden": !props.ariaLabelIcon && true
+  }))));
 };
 
 export { ButtonCard as default };

package/build/es/components/ButtonClose/ButtonClose.js

@@ -4,26 +4,32 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const ButtonElement = styled.button `
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    display: inline-flex;
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-
-    ${({ $darkBg }) => $darkBg &&
-    `
+const ButtonElement = styled.button.withConfig({
+  displayName: "ButtonClose__ButtonElement",
+  componentId: "sc-1wb6vgp-0"
+})(["position:absolute;top:0;right:0;margin:", ";display:inline-flex;cursor:pointer;background:none;border:none;padding:0;", ""], getMultipliedSize(theme.base.baseHeight, 1), ({
+  $darkBg
+}) => $darkBg && `
             color: ${theme.color.text.white};
-        `}
-`;
+        `);
 /** @visibleName Button Close */
-const ButtonClose = (_a) => {
-    var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = __rest(_a, ['data-testid', 'aria-label']);
-    return (React__default.createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, type: props.type || 'button', className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel, "$darkBg": props.darkBg || false }, props.children));
+const ButtonClose = _a => {
+  var {
+      'data-testid': dataTestId,
+      'aria-label': ariaLabel
+    } = _a,
+    props = __rest(_a, ['data-testid', 'aria-label']);
+  return /*#__PURE__*/React__default.createElement(ButtonElement, {
+    id: props.id,
+    name: props.name,
+    onClick: props.onClick,
+    onMouseDown: props.onMouseDown,
+    type: props.type || 'button',
+    className: props.className,
+    "data-testid": dataTestId,
+    "aria-label": ariaLabel,
+    "$darkBg": props.darkBg || false
+  }, props.children);
 };
 
 export { ButtonClose as default };

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -7,10 +7,12 @@ import { getDividedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
 import PixelLoader from '../PixelLoader/PixelLoader.js';
 
-const getStandardStyle = ({ isLinkStyle }) => {
-    const colorValue = isLinkStyle ? theme.color.default.pink : theme.color.text.black;
-    const colorHoverValue = isLinkStyle ? theme.color.hover.pink : theme.color.text.black;
-    return `
+const getStandardStyle = ({
+  isLinkStyle
+}) => {
+  const colorValue = isLinkStyle ? theme.color.default.pink : theme.color.text.black;
+  const colorHoverValue = isLinkStyle ? theme.color.hover.pink : theme.color.text.black;
+  return `
         color: ${colorValue};
         &:focus-visible {
             border: 2px solid ${theme.color.focus.light};
@@ -29,8 +31,8 @@ const getStandardStyle = ({ isLinkStyle }) => {
     `;
 };
 const getDarkBgStyle = () => {
-    const colorValue = theme.color.text.white;
-    return `
+  const colorValue = theme.color.text.white;
+  return `
         color: ${colorValue};
         &:focus-visible {
             border: 2px solid ${theme.color.focus.dark};
@@ -48,51 +50,23 @@ const getDarkBgStyle = () => {
         }
     `;
 };
-const ButtonElement = styled.button `
-    display: inline-flex;
-    align-items: center;
-    font-family: ${theme.fontFamily.default};
-    font-weight: ${theme.fontWeight.bold};
-    font-size: ${({ $small }) => ($small ? theme.fontSize.s : theme.fontSize.default)};
-    line-height: ${({ $small }) => ($small ? theme.lineHeight.xs : theme.lineHeight.default)};
-    cursor: pointer;
-    background-color: transparent;
-    border: 2px solid transparent;
-    padding: ${getDividedSize(theme.base.baseWidth, 5)} 0;
-    text-align: left;
-    transition: all 0.2s ease-in-out;
-    text-decoration: none;
-
-    & svg {
-        pointer-events: none;
-    }
-
-    ${({ $isReversed }) => $isReversed && `flex-direction: row-reverse;`}
-
-    ${({ $darkBg, $isLinkStyle }) => $darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle: $isLinkStyle })}
-
-    &:focus-visible {
-        border-radius: ${theme.radius.s};
-        text-decoration: underline;
-        outline: none;
-    }
-
-    &:hover {
-        text-decoration: underline;
-        text-underline-offset: 0.2em;
-        text-decoration-skip-ink: auto;
-        text-decoration-thickness: from-font;
-    }
-
-    &:disabled,
-    &[disabled],
-    &[aria-disabled='true'] {
-        cursor: not-allowed;
-        text-decoration: none;
-    }
-
-    ${({ $loading }) => $loading &&
-    `
+const ButtonElement = styled.button.withConfig({
+  displayName: "ButtonIcon__ButtonElement",
+  componentId: "sc-y46ygq-0"
+})(["display:inline-flex;align-items:center;font-family:", ";font-weight:", ";font-size:", ";line-height:", ";cursor:pointer;background-color:transparent;border:2px solid transparent;padding:", " 0;text-align:left;transition:all 0.2s ease-in-out;text-decoration:none;& svg{pointer-events:none;}", " ", " &:focus-visible{border-radius:", ";text-decoration:underline;outline:none;}&:hover{text-decoration:underline;text-underline-offset:0.2em;text-decoration-skip-ink:auto;text-decoration-thickness:from-font;}&:disabled,&[disabled],&[aria-disabled='true']{cursor:not-allowed;text-decoration:none;}", " ", ""], theme.fontFamily.default, theme.fontWeight.bold, ({
+  $small
+}) => $small ? theme.fontSize.s : theme.fontSize.default, ({
+  $small
+}) => $small ? theme.lineHeight.xs : theme.lineHeight.default, getDividedSize(theme.base.baseWidth, 5), ({
+  $isReversed
+}) => $isReversed && `flex-direction: row-reverse;`, ({
+  $darkBg,
+  $isLinkStyle
+}) => $darkBg ? getDarkBgStyle() : getStandardStyle({
+  isLinkStyle: $isLinkStyle
+}), theme.radius.s, ({
+  $loading
+}) => $loading && `
         pointer-events: none;
 
         &:focus {
@@ -103,67 +77,90 @@ const ButtonElement = styled.button `
         > * {
             display: inline-flex;
         }
-    `}
-
-    ${({ $hideChildrenMobile }) => $hideChildrenMobile &&
-    css `
-            span.dnasg-icon + span {
-                display: none;
-            }
-
-            ${media.sm `
+    `, ({
+  $hideChildrenMobile
+}) => $hideChildrenMobile && css(["span.dnasg-icon + span{display:none;}", ""], media.sm`
             span.dnasg-icon + span {
                 display: initial;
             }
-        `}
-        `}
-`;
+        `));
 /** @visibleName Button Icon */
-const ButtonIcon = forwardRef((_a, ref) => {
-    var _b;
-    var { icon = EditUnderline, 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-track-value']);
-    const position = props.isReversed ? 'right' : 'left';
-    const propHref = props.href;
-    const propNextLink = props.nextLink;
-    const propTarget = props.target;
-    const isDisabledAnchor = props.disabled && propHref;
-    const handleClick = (event) => {
-        if (isDisabledAnchor) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        if (props.onClick) {
-            props.onClick(event);
-        }
-    };
-    const content = props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black, label: props.loadingLabel })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
-        props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text` }, props.children))));
-    const commonButtonElementProps = {
-        id: props.id,
-        onClick: handleClick,
-        onMouseDown: props.onMouseDown,
-        $small: props.small,
-        $darkBg: props.darkBg,
-        $loading: props.loading,
-        'data-loading': props.loading,
-        className: props.className,
-        'data-testid': dataTestId,
-        'data-track-value': dataTrackValue,
-        'aria-label': props.ariaLabel,
-        $hideChildrenMobile: props.hideChildrenMobile,
-        $isReversed: props.isReversed,
-        'aria-expanded': props.ariaExpanded,
-    };
-    if (propHref) {
-        return (React__default.createElement(ButtonElement, Object.assign({ as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : (propHref ? 'a' : undefined), href: isDisabledAnchor ? undefined : propHref, target: propTarget, rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined, "aria-disabled": isDisabledAnchor ? 'true' : undefined, 
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-            ref: propNextLink ? ref : ref, tabIndex: props.loading || isDisabledAnchor ? -1 : 0, "$isLinkStyle": (_b = props.isLinkStyle) !== null && _b !== void 0 ? _b : true }, commonButtonElementProps, props.dataAttributes), content));
+const ButtonIcon = /*#__PURE__*/forwardRef((_a, ref) => {
+  var _b;
+  var {
+      icon = EditUnderline,
+      'data-testid': dataTestId,
+      'data-track-value': dataTrackValue
+    } = _a,
+    props = __rest(_a, ["icon", 'data-testid', 'data-track-value']);
+  const position = props.isReversed ? 'right' : 'left';
+  const propHref = props.href;
+  const propNextLink = props.nextLink;
+  const propTarget = props.target;
+  const isDisabledAnchor = props.disabled && propHref;
+  const handleClick = event => {
+    if (isDisabledAnchor) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
     }
-    else {
-        return (React__default.createElement(ButtonElement, Object.assign({ as: "button", ref: ref, name: props.name, type: props.type || 'button', tabIndex: props.loading ? -1 : 0, disabled: props.disabled, "$isLinkStyle": props.isLinkStyle }, commonButtonElementProps, props.dataAttributes), content));
+    if (props.onClick) {
+      props.onClick(event);
     }
+  };
+  const content = props.loading ? (/*#__PURE__*/React__default.createElement(PixelLoader, {
+    color: props.darkBg ? theme.color.default.white : theme.color.default.black,
+    label: props.loadingLabel
+  })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: icon,
+    color: props.darkBg ? theme.color.default.white : theme.color.default.pink,
+    size: props.small ? '1.25rem' : '1.5rem',
+    position: props.children ? position : undefined,
+    "aria-hidden": true
+  }), props.children && (/*#__PURE__*/React__default.createElement("span", {
+    "data-testid": dataTestId && `${dataTestId}-text`
+  }, props.children))));
+  const commonButtonElementProps = {
+    id: props.id,
+    onClick: handleClick,
+    onMouseDown: props.onMouseDown,
+    $small: props.small,
+    $darkBg: props.darkBg,
+    $loading: props.loading,
+    'data-loading': props.loading,
+    className: props.className,
+    'data-testid': dataTestId,
+    'data-track-value': dataTrackValue,
+    'aria-label': props.ariaLabel,
+    $hideChildrenMobile: props.hideChildrenMobile,
+    $isReversed: props.isReversed,
+    'aria-expanded': props.ariaExpanded
+  };
+  if (propHref) {
+    const anchorProps = {
+      href: isDisabledAnchor ? undefined : propHref,
+      target: propTarget,
+      rel: propHref && propTarget === '_blank' ? 'noopener noreferrer' : undefined
+    };
+    return /*#__PURE__*/React__default.createElement(ButtonElement, Object.assign({
+      as: propNextLink !== null && propNextLink !== void 0 ? propNextLink : propHref ? 'a' : undefined,
+      "aria-disabled": isDisabledAnchor ? 'true' : undefined,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
+      ref: propNextLink ? ref : ref,
+      tabIndex: props.loading || isDisabledAnchor ? -1 : 0,
+      "$isLinkStyle": (_b = props.isLinkStyle) !== null && _b !== void 0 ? _b : true
+    }, commonButtonElementProps, anchorProps, props.dataAttributes), content);
+  } else {
+    return /*#__PURE__*/React__default.createElement(ButtonElement, Object.assign({
+      as: "button",
+      ref: ref,
+      name: props.name,
+      type: props.type || 'button',
+      tabIndex: props.loading ? -1 : 0,
+      disabled: props.disabled,
+      "$isLinkStyle": props.isLinkStyle
+    }, commonButtonElementProps, props.dataAttributes), content);
+  }
 });
 
 export { ButtonIcon as default };

package/build/es/components/ButtonPrimary/ButtonPrimary.d.ts

@@ -1,5 +1,46 @@
-import Button from '../Button/Button';
+import type { Props } from '../Button/Button';
 /** @visibleName Button Primary */
-declare const ButtonPrimary: typeof Button;
+declare const ButtonPrimary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<(Omit<import("../Button/Button").CommonProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "target" | "href" | keyof import("../Button/Button").CommonProps | "nextLink"> & {
+    name?: string;
+    type?: import("../Button/Button").ButtonType;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}) | (Omit<import("../Button/Button").CommonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "name" | "type" | "disabled" | keyof import("../Button/Button").CommonProps> & {
+    href?: string;
+    nextLink?: import("react").ComponentType<{
+        href: string;
+        children: import("react").ReactNode;
+    }>;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}), "loading"> & Pick<Props, "loading">, never> & Partial<Pick<import("styled-components").FastOmit<(Omit<import("../Button/Button").CommonProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "target" | "href" | keyof import("../Button/Button").CommonProps | "nextLink"> & {
+    name?: string;
+    type?: import("../Button/Button").ButtonType;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}) | (Omit<import("../Button/Button").CommonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "name" | "type" | "disabled" | keyof import("../Button/Button").CommonProps> & {
+    href?: string;
+    nextLink?: import("react").ComponentType<{
+        href: string;
+        children: import("react").ReactNode;
+    }>;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}), "loading"> & Pick<Props, "loading">, never>>> & string & Omit<import("react").ForwardRefExoticComponent<((import("../Button/Button").CommonProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "target" | "href" | keyof import("../Button/Button").CommonProps | "nextLink"> & {
+    name?: string;
+    type?: import("../Button/Button").ButtonType;
+    disabled?: boolean;
+}) | (import("../Button/Button").CommonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "name" | "type" | "disabled" | keyof import("../Button/Button").CommonProps> & {
+    href?: string;
+    nextLink?: import("react").ComponentType<{
+        href: string;
+        children: import("react").ReactNode;
+    }>;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+})) & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
 /** @component */
 export default ButtonPrimary;

package/build/es/components/ButtonPrimary/ButtonPrimary.js

@@ -4,39 +4,12 @@ import Button, { shade } from '../Button/Button.js';
 
 /* eslint-disable transient-props/transient-props */
 /** @visibleName Button Primary */
-const ButtonPrimary = styled(Button) `
-    color: ${theme.color.text.white};
-    background-color: ${theme.color.default.pink};
-    border: 2px solid ${theme.color.default.pink};
-
-    &:focus:not(:disabled):not([disabled]):not([aria-disabled='true']),
-    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.color.text.white};
-        background-color: ${theme.color.default.pink};
-    }
-
-    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.color.text.white};
-        background-color: ${shade.pink.darker};
-        border: 2px solid ${shade.pink.darker};
-    }
-
-    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.color.text.white};
-        background-color: ${shade.pink.lighter};
-        border: 2px solid ${shade.pink.lighter};
-    }
-
-    &:disabled,
-    &[disabled],
-    &[aria-disabled='true'] {
-        background-color: ${theme.color.default.pink + theme.color.transparency.T30};
-        border: 2px solid ${theme.color.default.pink + theme.color.transparency.T30};
-        background-clip: padding-box;
-    }
-
-    ${({ loading }) => loading &&
-    `
+const ButtonPrimary = styled(Button).withConfig({
+  displayName: "ButtonPrimary",
+  componentId: "sc-1a7zkbp-0"
+})(["color:", ";background-color:", ";border:2px solid ", ";&:focus:not(:disabled):not([disabled]):not([aria-disabled='true']),&:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";}&:hover:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";border:2px solid ", ";}&:active:not(:disabled):not([disabled]):not([aria-disabled='true']){color:", ";background-color:", ";border:2px solid ", ";}&:disabled,&[disabled],&[aria-disabled='true']{background-color:", ";border:2px solid ", ";background-clip:padding-box;}", ""], theme.color.text.white, theme.color.default.pink, theme.color.default.pink, theme.color.text.white, theme.color.default.pink, theme.color.text.white, shade.pink.darker, shade.pink.darker, theme.color.text.white, shade.pink.lighter, shade.pink.lighter, theme.color.default.pink + theme.color.transparency.T30, theme.color.default.pink + theme.color.transparency.T30, ({
+  loading
+}) => loading && `
         &:focus {
             border-color: ${theme.color.default.pink};
             outline: none;
@@ -45,7 +18,6 @@ const ButtonPrimary = styled(Button) `
         > * > * {
             background-color: ${theme.color.default.white};
         }
-    `}
-`;
+    `);
 
 export { ButtonPrimary as default };