@dnanpm/styleguide 3.7.0 → 3.7.2

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

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ElevationLevel } from '../../types/elevation';
+interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Box component
+     */
+    children?: ReactNode;
+    /**
+     * Allows to change the elevation effect of component
+     *
+     * @param {ElevationLevel} none No elevation
+     * @param {ElevationLevel} low Low elevation effect
+     * @param {ElevationLevel} high High elevation effect
+     * @param {ElevationLevel} extraHigh Extra high elevation effect
+     *
+     * @default 'none'
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Allows to change the shadow map. Order of map is top, right, bottom, and left (clockwise) with space as separator.
+     * Shadows are applied to sides with value `1` (`true`) and omitted from sides with value `0` (`false`)
+     *
+     * @default '1 1 1 1'
+     */
+    shadow?: string;
+    /**
+     * Allows to pass a custom width of component
+     *
+     * @default auto
+     */
+    width?: string;
+    /**
+     * Allows to pass a custom height of component
+     *
+     * @default auto
+     */
+    height?: string;
+    /**
+     * Allows to pass a custom margin
+     *
+     * @default '0'
+     */
+    margin?: string;
+    /**
+     * Allows to pass a custom padding
+     *
+     * @default '1.25rem'
+     */
+    padding?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Box: ({ elevation, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Box;

package/build/cjs/components/Box/Box.js

@@ -23,10 +23,10 @@ const BoxWrapper = styled__default["default"].div `
     background-color: ${theme["default"].color.default.white};
     border-radius: ${theme["default"].radius.default};
     ${({ $elevation, shadow }) => $elevation !== 'none' && common["default"]({ elevation: $elevation, shadow })}
-`;
-const Box = (_a) => {
-    var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
-    return (React__default["default"].createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+`;
+const Box = (_a) => {
+    var { elevation = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["elevation", 'data-testid']);
+    return (React__default["default"].createElement(BoxWrapper, { id: props.id, "$elevation": elevation, shadow: props.shadow, width: props.width, height: props.height, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 exports["default"] = Box;

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

@@ -0,0 +1,101 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+type ButtonType = 'submit' | 'button' | 'reset';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     *  Name of the button element
+     */
+    name?: string;
+    /**
+     * Allows to change the HTML type of button element. Ignored when `href` is defined
+     *
+     * @param {ButtonType} submit Button submits the form data
+     * @param {ButtonType} button No functionality when pressed
+     * @param {ButtonType} reset Button resets all the controls to their initial values
+     *
+     * @default 'submit'
+     */
+    type?: ButtonType;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     */
+    href?: string;
+    /**
+     * Content of Button component
+     */
+    children?: ReactNode;
+    /**
+     * On Button click callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * On Button mouse down callback
+     */
+    onMouseDown?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to change version of Button component to small
+     */
+    small?: boolean;
+    /**
+     * Allows to change styling of Button component to for dark backgrounds
+     */
+    darkBg?: boolean;
+    /**
+     * Allows to change width of Button component to size of its wrapper
+     */
+    fullWidth?: boolean;
+    /**
+     * Allows to disable the component functionality. Ignored when `href` is defined
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Displays loading indicator (PixelLoader) instead of children
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Adds data attribute `data-no-close` to button and children wrapper
+     *
+     * @deprecated Nominated for removal due to proposed changes in functionality (https://jira.dna.fi/browse/STYLE-233)
+     */
+    'data-no-close'?: string;
+    /**
+     * Adds data attribute `data-track-value` to button
+     */
+    'data-track-value'?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+export declare const shade: {
+    pink: {
+        darker: string;
+        lighter: string;
+    };
+    plum: {
+        darker: string;
+        lighter: string;
+    };
+    sand: {
+        E02: {
+            darker: string;
+            lighter: string;
+        };
+    };
+};
+/** @visibleName Button */
+declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Button;

package/build/cjs/components/Button/Button.js

@@ -14,23 +14,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-// Only Button component specific shades to be used on user interaction styles
-const shade = {
-    pink: {
-        darker: '#AE005A',
-        lighter: '#F7007F',
-    },
-    plum: {
-        darker: '#441632',
-        lighter: '#732654',
-    },
-    sand: {
-        E02: {
-            darker: '#CABCA7',
-            lighter: '#EFEAE4',
-        },
-    },
-};
+// Only Button component specific shades to be used on user interaction styles
+const shade = {
+    pink: {
+        darker: '#AE005A',
+        lighter: '#F7007F',
+    },
+    plum: {
+        darker: '#441632',
+        lighter: '#732654',
+    },
+    sand: {
+        E02: {
+            darker: '#CABCA7',
+            lighter: '#EFEAE4',
+        },
+    },
+};
 const Element = styled__default["default"].button `
     display: inline-block;
     font-family: ${theme["default"].fontFamily.default};
@@ -78,8 +78,8 @@ const Element = styled__default["default"].button `
         color: ${({ darkBg }) => (darkBg ? theme["default"].color.text.plum : theme["default"].color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme["default"].color.default.white + theme["default"].color.transparency.T90 : shade.plum.lighter};
         border: 2px solid
-            ${({ darkBg }) => darkBg
-    ? theme["default"].color.default.white + theme["default"].color.transparency.T90
+            ${({ darkBg }) => darkBg
+    ? theme["default"].color.default.white + theme["default"].color.transparency.T90
     : shade.plum.lighter};
         outline: none;
     }
@@ -88,13 +88,13 @@ const Element = styled__default["default"].button `
     &[disabled] {
         color: ${({ darkBg }) => darkBg ? theme["default"].color.text.white + theme["default"].color.transparency.T70 : theme["default"].color.text.gray};
         border: 2px solid
-            ${({ darkBg }) => darkBg
-    ? theme["default"].color.default.white + theme["default"].color.transparency.T30
+            ${({ darkBg }) => darkBg
+    ? theme["default"].color.default.white + theme["default"].color.transparency.T30
     : theme["default"].color.default.plum + theme["default"].color.transparency.T30};
         pointer-events: none;
     }
 
-    ${({ href }) => href &&
+    ${({ href }) => href &&
     `
         text-align: center;
 
@@ -104,7 +104,7 @@ const Element = styled__default["default"].button `
 
     `}
 
-    ${({ $loading }) => $loading &&
+    ${({ $loading }) => $loading &&
     `
         pointer-events: none;
 
@@ -119,14 +119,14 @@ const Element = styled__default["default"].button `
             display: inline-flex;
         }
     `}
-`;
-/** @visibleName Button */
-const Button = (_a) => {
-    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default["default"].createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
-        name: props.name,
-        disabled: props.disabled,
-    })), props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.plum })) : (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+`;
+/** @visibleName Button */
+const Button = (_a) => {
+    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
+    return (React__default["default"].createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, (!props.href && {
+        name: props.name,
+        disabled: props.disabled,
+    })), props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.plum })) : (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 exports["default"] = Button;

package/build/cjs/components/Button/ButtonArrow.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { Props as ButtonProps } from './Button';
+type ButtonArrowDirection = 'up' | 'right' | 'down' | 'left';
+type ButtonArrowVariant = 'primary' | 'secondary';
+type Props = ({
+    /**
+     * Allows to change the direction of chevron icon.
+     * Either `direction` or `icon` has to be defined
+     *
+     * @param {ButtonArrowDirection} up Uses `ChevronUp` icon as content of component
+     * @param {ButtonArrowDirection} right Uses `ChevronRight` icon as content of component
+     * @param {ButtonArrowDirection} down Uses `ChevronDown` icon as content of component
+     * @param {ButtonArrowDirection} left Uses `ChevronLeft` icon as content of component
+     */
+    direction: ButtonArrowDirection;
+    icon?: never;
+} | {
+    /**
+     * Allows to change the content of component.
+     * Either `icon` or `direction` has to be defined
+     *
+     * @type Icon | undefined
+     */
+    icon: ReactNode;
+    direction?: never;
+}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close'> & {
+    /**
+     * Allows to change the styling of component
+     *
+     * @param {ButtonArrowVariant} primary Using extended `ButtonPrimary` styles with circle shape
+     * @param {ButtonArrowVariant} secondary Using extended `ButtonSecondary` styles
+     *
+     * @default 'primary'
+     */
+    variant?: ButtonArrowVariant;
+};
+/** @visibleName Button Arrow */
+declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonArrow;

package/build/cjs/components/Button/ButtonArrow.js

@@ -17,12 +17,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const iconsMap = {
-    up: icons.ChevronUp,
-    right: icons.ChevronRight,
-    down: icons.ChevronDown,
-    left: icons.ChevronLeft,
-};
+const iconsMap = {
+    up: icons.ChevronUp,
+    right: icons.ChevronRight,
+    down: icons.ChevronDown,
+    left: icons.ChevronLeft,
+};
 const overrideStyles = `
     display: flex;
     min-width: initial;
@@ -33,8 +33,8 @@ const overrideStyles = `
     vertical-align: middle;
     justify-content: center;
     align-items: center;
-`;
-const buttonsMap = {
+`;
+const buttonsMap = {
     primary: styled__default["default"](ButtonPrimary["default"]) `
         ${overrideStyles};
         border-radius: ${theme["default"].radius.circle};
@@ -43,7 +43,7 @@ const buttonsMap = {
         &[disabled] {
             color: ${theme["default"].color.text.black};
         }
-    `,
+    `,
     secondary: styled__default["default"](ButtonSecondary["default"]) `
         ${overrideStyles};
         color: ${theme["default"].color.text.black};
@@ -67,13 +67,13 @@ const buttonsMap = {
         &[disabled] {
             border: 1px solid ${theme["default"].color.line.L02 + theme["default"].color.transparency.T30};
         }
-    `,
-};
-/** @visibleName Button Arrow */
-const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
-    const Element = buttonsMap[variant];
-    return (React__default["default"].createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon["default"] && props.icon)));
+    `,
+};
+/** @visibleName Button Arrow */
+const ButtonArrow = (_a) => {
+    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["variant", 'data-testid', 'data-track-value']);
+    const Element = buttonsMap[variant];
+    return (React__default["default"].createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue }, props.direction ? (React__default["default"].createElement(Icon["default"], { icon: iconsMap[props.direction], size: "1rem" })) : (React.isValidElement(props.icon) && props.icon.type === Icon["default"] && props.icon)));
 };
 
 exports["default"] = ButtonArrow;

package/build/cjs/components/Button/ButtonClose.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Props as ButtonProps } from './Button';
+interface Props extends Pick<ButtonProps, 'id' | 'name' | 'children' | 'onClick' | 'onMouseDown' | 'className' | 'data-testid'> {
+    /**
+     * Allows to pass aria label for screen readers
+     */
+    'aria-label'?: string;
+}
+/** @visibleName Button Close */
+declare const ButtonClose: ({ "data-testid": dataTestId, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonClose;

package/build/cjs/components/Button/ButtonClose.js

@@ -22,11 +22,11 @@ const ButtonElement = styled["default"].button `
     background: none;
     border: none;
     padding: 0;
-`;
-/** @visibleName Button Close */
-const ButtonClose = (_a) => {
-    var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ['data-testid', 'aria-label']);
-    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
+`;
+/** @visibleName Button Close */
+const ButtonClose = (_a) => {
+    var { 'data-testid': dataTestId, 'aria-label': ariaLabel } = _a, props = tslib.__rest(_a, ['data-testid', 'aria-label']);
+    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, onClick: props.onClick, onMouseDown: props.onMouseDown, className: props.className, "data-testid": dataTestId, "aria-label": ariaLabel }, props.children));
 };
 
 exports["default"] = ButtonClose;

package/build/cjs/components/Button/ButtonIcon.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Props as IconProps } from '../Icon/Icon';
+import type { Props as ButtonProps } from './Button';
+interface Props extends Omit<ButtonProps, 'fullWidth'> {
+    /**
+     * Icon shown in icon button component
+     *
+     * @default `EditUnderline`
+     */
+    icon?: IconProps['icon'];
+    /**
+     * Allows to hide passed children on mobile screen size view (<576px)
+     *
+     * @default false
+     */
+    hideChildrenMobile?: boolean;
+    /**
+     * Allows to reverse order of elements
+     *
+     * @default false
+     */
+    isReversed?: boolean;
+}
+/** @visibleName Button Icon */
+declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonIcon;

package/build/cjs/components/Button/ButtonIcon.js

@@ -50,8 +50,8 @@ const ButtonElement = styled__default["default"].button `
     }
 
     &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme["default"].color.text.white + theme["default"].color.transparency.T90
+        color: ${({ darkBg }) => darkBg
+    ? theme["default"].color.text.white + theme["default"].color.transparency.T90
     : theme["default"].color.text.black + theme["default"].color.transparency.T80};
     }
 
@@ -61,7 +61,7 @@ const ButtonElement = styled__default["default"].button `
         pointer-events: none;
     }
 
-    ${({ $loading }) => $loading &&
+    ${({ $loading }) => $loading &&
     `
         pointer-events: none;
 
@@ -75,7 +75,7 @@ const ButtonElement = styled__default["default"].button `
         }
     `}
 
-    ${({ hideChildrenMobile }) => hideChildrenMobile &&
+    ${({ hideChildrenMobile }) => hideChildrenMobile &&
     styled.css `
             span.dnasg-icon + span {
                 display: none;
@@ -87,14 +87,14 @@ const ButtonElement = styled__default["default"].button `
             }
         `}
         `}
-`;
-/** @visibleName Button Icon */
-const ButtonIcon = (_a) => {
-    var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
-    const position = props.isReversed ? 'right' : 'left';
-    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Icon["default"], { icon: icon, color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
-        props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
+`;
+/** @visibleName Button Icon */
+const ButtonIcon = (_a) => {
+    var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
+    const position = props.isReversed ? 'right' : 'left';
+    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.loading ? (React__default["default"].createElement(PixelLoader["default"], { color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.black })) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Icon["default"], { icon: icon, color: props.darkBg ? theme["default"].color.default.white : theme["default"].color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
+        props.children && (React__default["default"].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 };
 
 exports["default"] = ButtonIcon;

package/build/cjs/components/Button/ButtonPrimary.d.ts

@@ -0,0 +1,5 @@
+import Button from './Button';
+/** @visibleName Button Primary */
+declare const ButtonPrimary: typeof Button;
+/** @component */
+export default ButtonPrimary;

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/** @visibleName Button Primary */
+/** @visibleName Button Primary */
 const ButtonPrimary = styled__default["default"](Button["default"]) `
     color: ${theme["default"].color.text.white};
     background-color: ${theme["default"].color.default.pink};
@@ -40,7 +40,7 @@ const ButtonPrimary = styled__default["default"](Button["default"]) `
         background-clip: padding-box;
     }
 
-    ${({ loading }) => loading &&
+    ${({ loading }) => loading &&
     `
         &:focus {
             border-color: ${theme["default"].color.default.pink};

package/build/cjs/components/Button/ButtonRound.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Props as ButtonProps } from './Button';
+type Props = Omit<ButtonProps, 'small' | 'fullWidth' | 'loading'>;
+/**
+ * @visibleName Button Round
+ * @deprecated Use `ButtonArrow` component
+ */
+declare const ButtonRound: ({ "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ButtonRound;

package/build/cjs/components/Button/ButtonRound.js

@@ -25,14 +25,14 @@ const ButtonElement = styled__default["default"](ButtonPrimary["default"]) `
     vertical-align: middle;
     justify-content: center;
     align-items: center;
-`;
-/**
- * @visibleName Button Round
- * @deprecated Use `ButtonArrow` component
- */
-const ButtonRound = (_a) => {
-    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
+`;
+/**
+ * @visibleName Button Round
+ * @deprecated Use `ButtonArrow` component
+ */
+const ButtonRound = (_a) => {
+    var { 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ['data-testid', 'data-no-close', 'data-track-value']);
+    return (React__default["default"].createElement(ButtonElement, { id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.children));
 };
 
 exports["default"] = ButtonRound;

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

@@ -0,0 +1,5 @@
+import Button from './Button';
+/** @visibleName Button Secondary */
+declare const ButtonSecondary: typeof Button;
+/** @component */
+export default ButtonSecondary;

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/** @visibleName Button Secondary */
+/** @visibleName Button Secondary */
 const ButtonSecondary = styled__default["default"](Button["default"]) `
     color: ${theme["default"].color.text.plum};
     background-color: ${theme["default"].color.background.sand.E02};
@@ -40,7 +40,7 @@ const ButtonSecondary = styled__default["default"](Button["default"]) `
         background-clip: padding-box;
     }
 
-    ${({ loading }) => loading &&
+    ${({ loading }) => loading &&
     `
         &:focus {
             border-color: ${theme["default"].color.line.L02};

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

@@ -0,0 +1,44 @@
+import type { MouseEvent, ReactNode } from 'react';
+import React from 'react';
+export interface Props {
+    /**
+     * Unique ID for the component
+     */
+    id?: string;
+    /**
+     * Content of Carousel
+     */
+    children: ReactNode;
+    /**
+     * Allows to set the number of visible items at the same time.
+     * Use decimals to enable "peek" functionality on the edge of Carousel
+     *
+     * @default 1 In Desktop view
+     * @default 1.2 In Mobile view
+     */
+    visibleItems?: number;
+    /**
+     * Allows to define carousel title
+     */
+    title?: string;
+    /**
+     * Allows to define text for carousel footer button
+     */
+    footerButton?: string;
+    /**
+     * On Footer Button click callback
+     */
+    onFooterButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+/** @visibleName Carousel */
+declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Carousel;