@selfdecode/sd-component-library 4.0.13 → 4.0.14-8.1

package/README.md

@@ -4,14 +4,14 @@ The SelfDecode Component Libary (SCL) was built with intention of speeding up th
 
 ## Exploring the library
 
-### `npm run styleguide`
+### `npm run storybook`
 
-Start the styleguidist server.<br />
-Open [http://localhost:7070](http://localhost:7070) to view it in the browser.
+Start the storybook server.<br />
+Open [http://localhost:6006/](http://localhost:6006/) to view it in the browser.
 
-The page will reload if you make edits.
+The page will auto reload if you make edits.
 
-### `npm run styleguide:build`
+### `npm run build-storybook`
 
 Builds an HTML production version of the style guide.
 
@@ -41,23 +41,25 @@ The CLS architechure is built as a reverse pyramid and is built from the ground
 For styling, we use Rebass which is a styling system that is built on top of Emotion Theming.
 
 With Rebass, there are 4 options for styling a component. In SCL, we use 2 of these options:
- - variants: used for non-changable styling properties.
- - sx: used for changable styling properties, with potential defaults for some components.
 
- # variants
+- variants: used for non-changable styling properties.
+- sx: used for changable styling properties, with potential defaults for some components.
 
- For al end components, certain properties are set and are unchangable. For example, for input fields, the font properties and the height of the component are set in the library, and should never be changed by the client.
- To do so, these properties are set as variants in our theme, which could be found in src/core.
- To understand the structure of the theme, reffer to [Rebass documentation](https://rebassjs.org).
+# variants
 
- # sx
+For al end components, certain properties are set and are unchangable. For example, for input fields, the font properties and the height of the component are set in the library, and should never be changed by the client.
+To do so, these properties are set as variants in our theme, which could be found in src/core.
+To understand the structure of the theme, reffer to [Rebass documentation](https://rebassjs.org).
 
- sx (a Rebass proprety) allows us to style components similarly to React.js' inline-styles. We use the sx property to define styles whih could be passed by the client (with some having default fallbacks). For example, for the primary buttons, we use a default width of 236px, but the client could decide that they need this buton to have a different width and pass a different size to out component, which would than be applied instead of our 236px default width.
+# sx
 
- In a lower level example, we can look at the base Button component. All buttons have a disabled mode (each button handles its own logic to when it should be disabled). When the base button receives disabled to equal 'true', we set the buttons opacity to 0.3, otherwise, if 'false', it is set to 1.
+sx (a Rebass proprety) allows us to style components similarly to React.js' inline-styles. We use the sx property to define styles whih could be passed by the client (with some having default fallbacks). For example, for the primary buttons, we use a default width of 236px, but the client could decide that they need this buton to have a different width and pass a different size to out component, which would than be applied instead of our 236px default width.
+
+In a lower level example, we can look at the base Button component. All buttons have a disabled mode (each button handles its own logic to when it should be disabled). When the base button receives disabled to equal 'true', we set the buttons opacity to 0.3, otherwise, if 'false', it is set to 1.
 
 ## Add more components
 
 To add more components, start by looking at the existing components and see:
+
 1. Is there already a group of components where this new component should fit in? If it's a type of input look at inputs. If it's a type of button look at buttons.
-1. If a relevant group was found, explore existing components to understand if your new component could use one of the base components, and build on top of it to save redundent code. SLC was built with intention to save time and code for the client, and in a manner that should save time and code within itself for future components as well.
+1. If a relevant group was found, explore existing components to understand if your new component could use one of the base components, and build on top of it to save redundent code. SLC was built with intention to save time and code for the client, and in a manner that should save time and code within itself for future components as well.

package/lib/components/accordions/base-accordion/accordion.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { AccordionProps } from "./interfaces";
+import { default as React } from 'react';
+import { AccordionProps } from './interfaces';
+
 /**
  * Base Accordion component.
  */

package/lib/components/accordions/base-accordion/assets/index.d.ts

@@ -1 +1 @@
-export { ReactComponent as DropdownArrowIcon } from "./dropdown_arrow_up.svg";
+export { ReactComponent as DropdownArrowIcon } from './dropdown_arrow_up.svg';

package/lib/components/accordions/base-accordion/base-accordian.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from '.';
+
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+declare type Story = StoryObj<typeof Accordion>;
+export declare const Example: Story;
+export declare const GrowHeight: Story;

package/lib/components/accordions/base-accordion/index.d.ts

@@ -1,2 +1,2 @@
-export type { AccordionProps } from "./interfaces";
-export { Accordion } from "./accordion";
+export type { AccordionProps } from './interfaces';
+export { Accordion } from './accordion';

package/lib/components/accordions/base-accordion/interfaces.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { BaseComponentProps } from "../../../components/interfaces";
+import { BaseComponentProps } from '../../../components/interfaces';
+
 export interface AccordionProps extends BaseComponentProps {
     /**
      * The button's width

package/lib/components/accordions/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./base-accordion";
-export * from "./sublist-accordion";
-export * from "./risk-assessment-accordion";
+export * from './base-accordion';
+export * from './sublist-accordion';

package/lib/components/accordions/sublist-accordion/index.d.ts

@@ -1,2 +1,2 @@
-export type { SublistAccordionProps } from "./interfaces";
-export { SublistAccordion } from "./sublist-accordion";
+export type { SublistAccordionProps } from './interfaces';
+export { SublistAccordion } from './sublist-accordion';

package/lib/components/accordions/sublist-accordion/interfaces.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 export interface SublistAccordionProps {
+    isOpen: boolean;
+    /**
+     * Callback function that is called when accordion changes state
+     * (open/closed).
+     */
+    onChange?: (isOpen: boolean) => void;
     /**
      * Text that will be shown when the accordion is closed.
      */
@@ -20,21 +26,8 @@ export interface SublistAccordionProps {
      * Left margin for accordion hidden content.
      */
     ml?: string | string[];
-    /**
-     * Callback function that is called when accordion changes state
-     * (open/closed).
-     */
-    onChange?: (isOpen: boolean) => void;
     /**
      * Optional text to override the default (x entries)
      */
     buttonText?: string;
-    /**
-     * Initial state of the accordion.
-     */
-    initialIsOpen?: boolean;
-    /**
-     * Make the component a controlled component.
-     */
-    isOpen?: boolean;
 }

package/lib/components/accordions/sublist-accordion/sublist-accordian.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SublistAccordion } from '.';
+
+declare const meta: Meta<typeof SublistAccordion>;
+export default meta;
+declare type Story = StoryObj<typeof SublistAccordion>;
+export declare const Example: Story;
+export declare const SublistControlled: Story;

package/lib/components/accordions/sublist-accordion/sublist-accordion.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { SublistAccordionProps } from "./interfaces";
+import { default as React } from 'react';
+import { SublistAccordionProps } from './interfaces';
+
 export declare const SublistAccordion: React.FC<SublistAccordionProps>;

package/lib/components/animations/loading-spinner/index.d.ts

@@ -1 +1 @@
-export { LoadingSpinner } from "./loading-spinner";
+export { LoadingSpinner } from './loading-spinner';

package/lib/components/animations/loading-spinner/interfaces.d.ts

@@ -1,4 +1,5 @@
-import { FC, SVGProps } from "react";
+import { FC, SVGProps } from 'react';
+
 export declare type LoadingSpinnerProps = Pick<SVGProps<SVGSVGElement>, "fill" | "stroke" | "width" | "height"> & {
     icon?: FC<SVGProps<SVGSVGElement>>;
 };

package/lib/components/animations/loading-spinner/loading-spinner.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { LoadingSpinnerProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { LoadingSpinnerProps as Props } from './interfaces';
+
 export declare const LoadingSpinner: React.FC<Props>;

package/lib/components/boxes/bg-image-box/bg-image-box.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BgImageBoxProps as Props } from './interfaces';
+
+export declare const BgImageBox: React.FC<Props>;

package/lib/components/boxes/bg-image-box/index.d.ts

@@ -0,0 +1 @@
+export { BgImageBox } from './bg-image-box';

package/lib/components/boxes/bg-image-box/interfaces.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+import { BoxProps } from 'rebass';
+
+export interface BgImageBoxProps extends Pick<CSSProperties, "backgroundPosition" | "backgroundSize" | "backgroundRepeat">, BoxProps {
+    url: string;
+}

package/lib/components/boxes/index.d.ts

@@ -1,5 +1,3 @@
-export { DesktopHiddenBox } from "./desktop-hidden-box";
-export { MobileHiddenBox } from "./mobile-hidden-box";
-export { NoTranslateBox } from "./no-translate-box";
-export { OutsideClickBox } from "./outside-click-box";
-export { ScrollOnHoverBox } from "./scroll-on-hover-box";
+export { NoTranslateBox } from './no-translate-box';
+export { OutsideClickBox } from './outside-click-box';
+export * from './bg-image-box';

package/lib/components/boxes/no-translate-box/index.d.ts

@@ -1 +1 @@
-export { NoTranslateBox } from "./no-translate-box";
+export { NoTranslateBox } from './no-translate-box';

package/lib/components/boxes/no-translate-box/interfaces.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { BoxProps } from "rebass";
+import { BoxProps } from 'rebass';
+
 export interface NoTranslateBoxProps extends BoxProps {
     children: React.ReactNode;
 }

package/lib/components/boxes/no-translate-box/no-translate-box.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { NoTranslateBoxProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { NoTranslateBoxProps as Props } from './interfaces';
+
 export declare const NoTranslateBox: React.FC<Props>;

package/lib/components/boxes/outside-click-box/index.d.ts

@@ -1 +1 @@
-export { OutsideClickBox } from "./outside-click-box";
+export { OutsideClickBox } from './outside-click-box';

package/lib/components/boxes/outside-click-box/interfaces.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { BoxProps } from "rebass";
+import { default as React } from 'react';
+import { BoxProps } from 'rebass';
+
 export interface OutsideClickBoxProps extends Omit<BoxProps, "ref"> {
     /**
      * Callback to be executed after clicking outside of the box.

package/lib/components/boxes/outside-click-box/outside-click-box.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { OutsideClickBoxProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { OutsideClickBoxProps as Props } from './interfaces';
+
 export declare const OutsideClickBox: React.FC<Props>;

package/lib/components/boxes/outside-click-box/outside-click-box.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { OutsideClickBox } from '.';
+
+declare const meta: Meta<typeof OutsideClickBox>;
+export default meta;
+declare type Story = StoryObj<typeof OutsideClickBox>;
+export declare const Example: Story;
+export declare const Interactive: Story;

package/lib/components/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { BreadCrumbProps } from "./interfaces";
+import { default as React } from 'react';
+import { BreadCrumbProps } from './interfaces';
+
 export declare const Breadcrumb: React.FC<BreadCrumbProps>;

package/lib/components/breadcrumbs/breadcrumb/crumb/crumb.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { CrumbProps } from "./interfaces";
-export declare const Crumb: React.FunctionComponent<CrumbProps>;
+import { default as React } from 'react';
+import { CrumbProps } from './interfaces';
+
+export declare const Crumb: React.FC<CrumbProps>;

package/lib/components/breadcrumbs/breadcrumb/crumb/index.d.ts

@@ -1,2 +1,2 @@
-export { Crumb } from "./crumb";
-export type { CrumbProps, CrumbType } from "./interfaces";
+export { Crumb } from './crumb';
+export type { CrumbProps, CrumbType } from './interfaces';

package/lib/components/breadcrumbs/breadcrumb/crumb/interfaces.d.ts

@@ -1,4 +1,5 @@
-import { CSSProperties } from "react";
+import { CSSProperties } from 'react';
+
 export declare type CrumbType = {
     title: string;
     dontTranslate?: boolean;

package/lib/components/breadcrumbs/breadcrumb/functions.d.ts

@@ -1,4 +1,5 @@
-import { CSSProperties } from "react";
-import { CrumbType } from "./crumb/interfaces";
-export declare const renderUpToFiveCrumbs: (crumbs: CrumbType[], variant: string | undefined, textTransform: CSSProperties["textTransform"]) => JSX.Element[];
+import { CSSProperties } from 'react';
+import { CrumbType } from './crumb';
+
+export declare const renderUpToFiveCrumbs: (crumbs: CrumbType[], variant: string | undefined, textTransform: CSSProperties["textTransform"]) => import("react/jsx-runtime").JSX.Element[];
 export declare const renderMoreThanFiveCrumbs: (crumbs: CrumbType[], variant: string | undefined, textTransform: CSSProperties["textTransform"]) => JSX.Element[];

package/lib/components/breadcrumbs/breadcrumb/index.d.ts

@@ -1,3 +1,3 @@
-export { Breadcrumb } from "./breadcrumb";
-export type { BreadCrumbProps } from "./interfaces";
-export * from "./crumb";
+export { Breadcrumb } from './breadcrumb';
+export type { BreadCrumbProps } from './interfaces';
+export * from './crumb';

package/lib/components/breadcrumbs/breadcrumb/interfaces.d.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from "react";
-import { BaseComponentProps } from "../../interfaces";
-import { CrumbType } from "./crumb/interfaces";
+import { CSSProperties } from 'react';
+import { BaseComponentProps } from '../../interfaces';
+import { CrumbType } from './crumb';
+
 /**
  * Defines the breadcrumbs component's properties.
  */

package/lib/components/breadcrumbs/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./breadcrumb";
-export { PrimaryBreadcrumb } from "./primary-breadcrumb";
-export { SecondaryBreadcrumb } from "./secondary-breadcrumb";
+export * from './breadcrumb';
+export { PrimaryBreadcrumb } from './primary-breadcrumb';
+export { SecondaryBreadcrumb } from './secondary-breadcrumb';

package/lib/components/breadcrumbs/primary-breadcrumb/index.d.ts

@@ -1,3 +1,4 @@
-import { PrimaryBreadCrumbProps as Props } from "./interfaces";
-export { PrimaryBreadcrumb } from "./primary-breadcrumb";
+import { PrimaryBreadCrumbProps as Props } from './interfaces';
+
+export { PrimaryBreadcrumb } from './primary-breadcrumb';
 export declare type PrimaryBreadCrumbProps = Props;

package/lib/components/breadcrumbs/primary-breadcrumb/interfaces.d.ts

@@ -1,2 +1,3 @@
-import { BreadCrumbProps } from "../breadcrumb";
+import { BreadCrumbProps } from '../breadcrumb';
+
 export declare type PrimaryBreadCrumbProps = Pick<BreadCrumbProps, "crumbs" | "m" | "mt" | "mr" | "mb" | "ml" | "textTransform">;

package/lib/components/breadcrumbs/primary-breadcrumb/primary-breadcrumb.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { PrimaryBreadCrumbProps } from "./interfaces";
-export declare const PrimaryBreadcrumb: React.FunctionComponent<PrimaryBreadCrumbProps>;
+import { default as React } from 'react';
+import { PrimaryBreadCrumbProps } from './interfaces';
+
+export declare const PrimaryBreadcrumb: React.FC<PrimaryBreadCrumbProps>;

package/lib/components/breadcrumbs/primary-breadcrumb/primary-breadcrumb.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PrimaryBreadcrumb } from '.';
+
+declare const meta: Meta<typeof PrimaryBreadcrumb>;
+export default meta;
+declare type Story = StoryObj<typeof PrimaryBreadcrumb>;
+export declare const Example: Story;

package/lib/components/breadcrumbs/secondary-breadcrumb/index.d.ts

@@ -1 +1 @@
-export { SecondaryBreadcrumb } from "./secondary-breadcrumb";
+export { SecondaryBreadcrumb } from './secondary-breadcrumb';

package/lib/components/breadcrumbs/secondary-breadcrumb/interfaces.d.ts

@@ -1,2 +1,3 @@
-import { BreadCrumbProps } from "../breadcrumb";
+import { BreadCrumbProps } from '../breadcrumb';
+
 export declare type SecondaryBreadcrumbProps = Omit<BreadCrumbProps, "variant">;

package/lib/components/breadcrumbs/secondary-breadcrumb/secondary-breadcrumb.d.ts

@@ -1,3 +1,4 @@
-import React from "react";
-import { SecondaryBreadcrumbProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { SecondaryBreadcrumbProps as Props } from './interfaces';
+
 export declare const SecondaryBreadcrumb: React.FC<Props>;

package/lib/components/breadcrumbs/secondary-breadcrumb/secondary-breadcrumb.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SecondaryBreadcrumb } from '.';
+
+declare const meta: Meta<typeof SecondaryBreadcrumb>;
+export default meta;
+declare type Story = StoryObj<typeof SecondaryBreadcrumb>;
+export declare const Example: Story;

package/lib/components/buttons/button/button.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { ButtonProps } from "./interfaces";
+import { default as React } from 'react';
+import { ButtonProps } from './interfaces';
+
 /**
  * Base button component. Other button components should be built from this.
  */

package/lib/components/buttons/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from "./button";
-export type { ButtonProps } from "./interfaces";
+export { Button } from './button';
+export type { ButtonProps } from './interfaces';

package/lib/components/buttons/button/interfaces.d.ts

@@ -1,19 +1,22 @@
-import { CSSProperties, ReactNode } from "react";
-import { History } from "history";
-import { SxProps } from "rebass";
-import { LoadingSpinnerProps as LoadingIconProps } from "../../animations/loading-spinner/interfaces";
-import { BaseComponentProps } from "../../interfaces";
+import { CSSProperties, ReactNode } from 'react';
+import { History } from 'history';
+import { LinkProps, SxProps } from 'rebass';
+import { LoadingSpinnerProps as LoadingIconProps } from '../../animations/loading-spinner/interfaces';
+import { BaseComponentProps } from '../../interfaces';
+
 /**
  * Defines the button component's properties. You cannot pass
  * both onClick and link props at the same time
  */
-export interface ButtonProps extends BaseComponentProps {
+export interface ButtonProps extends BaseComponentProps, Pick<LinkProps, "target" | "rel"> {
     /**
      * The location the button should point to if it is a link.
      * You should only pass external links, not links that should
      * be handled by React-Router
      */
     link?: string;
+    onLinkClick?: LinkProps["onClick"];
+    linkStyle?: LinkProps["style"];
     /**
      * Indicates whether the url provided in the link prop can be
      * handled by React-Router or not.
@@ -183,4 +186,6 @@ export interface ButtonProps extends BaseComponentProps {
      * Default value: "pointer"
      */
     cursor?: CSSProperties["cursor"];
+    tooltipText?: string;
+    tooltipPlacement?: "top" | "bottom";
 }

package/lib/components/buttons/cta/cta-button/cta-button.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { CtaButtonProps } from "./interfaces";
+import { default as React } from 'react';
+import { CtaButtonProps } from './interfaces';
+
 /**
  * The cta button.
  */

package/lib/components/buttons/cta/cta-button/index.d.ts

@@ -1,2 +1,2 @@
-export { CtaButton } from "./cta-button";
-export type { CtaButtonProps } from "./interfaces";
+export { CtaButton } from './cta-button';
+export type { CtaButtonProps } from './interfaces';

package/lib/components/buttons/cta/cta-button/interfaces.d.ts

@@ -1,5 +1,9 @@
-import { ButtonProps } from "../../button";
+import { ButtonProps } from '../../button';
+
 /**
  * Additional props we want to add
  */
-export declare type CtaButtonProps = Omit<ButtonProps, "variant" | "borderStyle" | "hoverBorderStyle">;
+export declare type CtaButtonProps = Omit<ButtonProps, "variant" | "borderStyle" | "hoverBorderStyle"> & {
+    disabledBg?: string;
+    disabledColor?: string;
+};

package/lib/components/buttons/cta/primary-blue-button/index.d.ts

@@ -1,3 +1,4 @@
-import { PrimaryBlueButtonProps as Props } from "./interfaces";
+import { PrimaryBlueButtonProps as Props } from './interfaces';
+
 export declare type PrimaryBlueButtonProps = Props;
-export { PrimaryBlueButton } from "./primary-blue-button";
+export { PrimaryBlueButton } from './primary-blue-button';

package/lib/components/buttons/cta/primary-blue-button/interfaces.d.ts

@@ -1,2 +1,3 @@
-import { CtaButtonProps } from "../cta-button";
+import { CtaButtonProps } from '../cta-button';
+
 export declare type PrimaryBlueButtonProps = Omit<CtaButtonProps, "borderColor" | "color" | "bg" | "hoverBorderColor" | "hoverColor" | "hoverBg">;

package/lib/components/buttons/cta/primary-blue-button/primary-blue-button.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { PrimaryBlueButtonProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { PrimaryBlueButtonProps as Props } from './interfaces';
+
 /**
  * The primary button.
  */

package/lib/components/buttons/cta/primary-blue-button/primary-blue-button.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PrimaryBlueButton } from '.';
+
+declare const meta: Meta<typeof PrimaryBlueButton>;
+export default meta;
+declare type Story = StoryObj<typeof PrimaryBlueButton>;
+export declare const Example: Story;

package/lib/components/buttons/cta/primary-orange-button/index.d.ts

@@ -1,3 +1,4 @@
-import { PrimaryOrangeButtonProps as Props } from "./interfaces";
+import { PrimaryOrangeButtonProps as Props } from './interfaces';
+
 export declare type PrimaryOrangeButtonProps = Props;
-export { PrimaryOrangeButton } from "./primary-orange-button";
+export { PrimaryOrangeButton } from './primary-orange-button';

package/lib/components/buttons/cta/primary-orange-button/interfaces.d.ts

@@ -1,2 +1,3 @@
-import { CtaButtonProps } from "../cta-button";
+import { CtaButtonProps } from '../cta-button';
+
 export declare type PrimaryOrangeButtonProps = Omit<CtaButtonProps, "borderColor" | "color" | "bg" | "hoverBorderColor" | "hoverColor" | "hoverBg">;

package/lib/components/buttons/cta/primary-orange-button/primary-orange-button.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { PrimaryOrangeButtonProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { PrimaryOrangeButtonProps as Props } from './interfaces';
+
 /**
  * The primary orange button.
  */

package/lib/components/buttons/cta/primary-orange-button/primary-orange-button.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PrimaryOrangeButton } from '.';
+
+declare const meta: Meta<typeof PrimaryOrangeButton>;
+export default meta;
+declare type Story = StoryObj<typeof PrimaryOrangeButton>;
+export declare const Example: Story;
+export declare const Loading: Story;

package/lib/components/buttons/cta/primary-text-button/index.d.ts

@@ -1,3 +1,4 @@
-import { PrimaryTextButtonProps as Props } from "./interfaces";
+import { PrimaryTextButtonProps as Props } from './interfaces';
+
 export declare type PrimaryTextButtonProps = Props;
-export { PrimaryTextButton } from "./primary-text-button";
+export { PrimaryTextButton } from './primary-text-button';

package/lib/components/buttons/cta/primary-text-button/interfaces.d.ts

@@ -1,2 +1,3 @@
-import { CtaButtonProps } from "../cta-button";
+import { CtaButtonProps } from '../cta-button';
+
 export declare type PrimaryTextButtonProps = Omit<CtaButtonProps, "borderWidth" | "bg" | "hoverBg">;

package/lib/components/buttons/cta/primary-text-button/primary-text-button.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { PrimaryTextButtonProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { PrimaryTextButtonProps as Props } from './interfaces';
+
 /**
  * The primary button.
  */

package/lib/components/buttons/cta/secondary-blue-button/index.d.ts

@@ -1,3 +1,4 @@
-import { SecondaryBlueButtonProps as Props } from "./interfaces";
+import { SecondaryBlueButtonProps as Props } from './interfaces';
+
 export declare type SecondaryBlueButtonProps = Props;
-export { SecondaryBlueButton } from "./secondary-blue-button";
+export { SecondaryBlueButton } from './secondary-blue-button';

package/lib/components/buttons/cta/secondary-blue-button/interfaces.d.ts

@@ -1,2 +1,3 @@
-import { CtaButtonProps } from "../cta-button";
+import { CtaButtonProps } from '../cta-button';
+
 export declare type SecondaryBlueButtonProps = Omit<CtaButtonProps, "borderColor" | "color" | "bg" | "hoverBorderColor" | "hoverBg">;

package/lib/components/buttons/cta/secondary-blue-button/secondary-blue-button.d.ts

@@ -1,5 +1,6 @@
-import React from "react";
-import { SecondaryBlueButtonProps as Props } from "./interfaces";
+import { default as React } from 'react';
+import { SecondaryBlueButtonProps as Props } from './interfaces';
+
 /**
  * The secondary button.
  */