@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/cjs/components/ButtonPrimary/ButtonPrimary.js

@@ -8,39 +8,12 @@ var Button = require('../Button/Button.js');
 
 /* eslint-disable transient-props/transient-props */
 /** @visibleName Button Primary */
-const ButtonPrimary = styledComponents.styled(Button.default) `
-    color: ${theme.default.color.text.white};
-    background-color: ${theme.default.color.default.pink};
-    border: 2px solid ${theme.default.color.default.pink};
-
-    &:focus:not(:disabled):not([disabled]):not([aria-disabled='true']),
-    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.default.color.text.white};
-        background-color: ${theme.default.color.default.pink};
-    }
-
-    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.default.color.text.white};
-        background-color: ${Button.shade.pink.darker};
-        border: 2px solid ${Button.shade.pink.darker};
-    }
-
-    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.default.color.text.white};
-        background-color: ${Button.shade.pink.lighter};
-        border: 2px solid ${Button.shade.pink.lighter};
-    }
-
-    &:disabled,
-    &[disabled],
-    &[aria-disabled='true'] {
-        background-color: ${theme.default.color.default.pink + theme.default.color.transparency.T30};
-        border: 2px solid ${theme.default.color.default.pink + theme.default.color.transparency.T30};
-        background-clip: padding-box;
-    }
-
-    ${({ loading }) => loading &&
-    `
+const ButtonPrimary = styledComponents.styled(Button.default).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.default.color.text.white, theme.default.color.default.pink, theme.default.color.default.pink, theme.default.color.text.white, theme.default.color.default.pink, theme.default.color.text.white, Button.shade.pink.darker, Button.shade.pink.darker, theme.default.color.text.white, Button.shade.pink.lighter, Button.shade.pink.lighter, theme.default.color.default.pink + theme.default.color.transparency.T30, theme.default.color.default.pink + theme.default.color.transparency.T30, ({
+  loading
+}) => loading && `
         &:focus {
             border-color: ${theme.default.color.default.pink};
             outline: none;
@@ -49,7 +22,6 @@ const ButtonPrimary = styledComponents.styled(Button.default) `
         > * > * {
             background-color: ${theme.default.color.default.white};
         }
-    `}
-`;
+    `);
 
 exports.default = ButtonPrimary;

package/build/cjs/components/ButtonSecondary/ButtonSecondary.d.ts

@@ -1,5 +1,46 @@
-import Button from '../Button/Button';
+import type { Props } from '../Button/Button';
 /** @visibleName Button Secondary */
-declare const ButtonSecondary: typeof Button;
+declare const ButtonSecondary: 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 ButtonSecondary;

package/build/cjs/components/ButtonSecondary/ButtonSecondary.js

@@ -8,39 +8,12 @@ var Button = require('../Button/Button.js');
 
 /* eslint-disable transient-props/transient-props */
 /** @visibleName Button Secondary */
-const ButtonSecondary = styledComponents.styled(Button.default) `
-    color: ${theme.default.color.text.plum};
-    background-color: ${theme.default.color.background.sand.E02};
-    border: 2px solid ${theme.default.color.line.L02};
-
-    &:focus:not(:disabled):not([disabled]):not([aria-disabled='true']),
-    &:focus-visible:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.default.color.text.plum};
-        background-color: ${theme.default.color.background.sand.E02};
-    }
-
-    &:hover:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.default.color.text.plum};
-        background-color: ${Button.shade.sand.E02.darker};
-        border: 2px solid ${Button.shade.sand.E02.darker};
-    }
-
-    &:active:not(:disabled):not([disabled]):not([aria-disabled='true']) {
-        color: ${theme.default.color.text.plum};
-        background-color: ${Button.shade.sand.E02.lighter};
-        border: 2px solid ${Button.shade.sand.E02.lighter};
-    }
-
-    &:disabled,
-    &[disabled],
-    &[aria-disabled='true'] {
-        background-color: ${theme.default.color.background.sand.E02 + theme.default.color.transparency.T30};
-        border: 2px solid ${theme.default.color.line.L02 + theme.default.color.transparency.T30};
-        background-clip: padding-box;
-    }
-
-    ${({ loading }) => loading &&
-    `
+const ButtonSecondary = styledComponents.styled(Button.default).withConfig({
+  displayName: "ButtonSecondary",
+  componentId: "sc-1xjn5wh-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.default.color.text.plum, theme.default.color.background.sand.E02, theme.default.color.line.L02, theme.default.color.text.plum, theme.default.color.background.sand.E02, theme.default.color.text.plum, Button.shade.sand.E02.darker, Button.shade.sand.E02.darker, theme.default.color.text.plum, Button.shade.sand.E02.lighter, Button.shade.sand.E02.lighter, theme.default.color.background.sand.E02 + theme.default.color.transparency.T30, theme.default.color.line.L02 + theme.default.color.transparency.T30, ({
+  loading
+}) => loading && `
         &:focus {
             border-color: ${theme.default.color.line.L02};
             outline: none;
@@ -49,7 +22,6 @@ const ButtonSecondary = styledComponents.styled(Button.default) `
         > * > * {
             background-color: ${theme.default.color.default.plum};
         }
-    `}
-`;
+    `);
 
 exports.default = ButtonSecondary;

package/build/cjs/components/Carousel/Carousel.d.ts

@@ -69,13 +69,19 @@ interface Props {
      */
     swipeStep?: number;
 }
-declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+declare const SlideItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$visibleItems" | "$isSwiping" | "$responsive" | "$gap"> & {
     $isSwiping: boolean;
     $responsive: boolean;
     $gap: number;
 } & Partial<Required<{
     $visibleItems: Props["visibleItems"];
-}>>>> & string;
+}>>, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$visibleItems" | "$isSwiping" | "$responsive" | "$gap"> & {
+    $isSwiping: boolean;
+    $responsive: boolean;
+    $gap: number;
+} & Partial<Required<{
+    $visibleItems: Props["visibleItems"];
+}>>, never>>> & string;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */