@dnanpm/styleguide 3.3.0 → 3.3.1

package/build/cjs/components/Pill/Pill.js

@@ -13,18 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
-const getBackgroundColor = ({ isChecked, isDisabled }) => {
-    const alphaValue = isDisabled ? theme["default"].color.transparency.T30 : theme["default"].color.transparency.T100;
-    const colorValue = isChecked
-        ? theme["default"].color.background.plum.default
-        : theme["default"].color.background.orange.E02;
-    // Only Pill component specific colors to be used on user interaction styles
-    const hoverValue = isChecked ? '#441632' : '#FFB557';
-    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
-    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
-    return backgroundColor + hoverBackgroundColor;
-};
+const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
+const getBackgroundColor = ({ isChecked, isDisabled }) => {
+    const alphaValue = isDisabled ? theme["default"].color.transparency.T30 : theme["default"].color.transparency.T100;
+    const colorValue = isChecked
+        ? theme["default"].color.background.plum.default
+        : theme["default"].color.background.orange.E02;
+    // Only Pill component specific colors to be used on user interaction styles
+    const hoverValue = isChecked ? '#441632' : '#FFB557';
+    const backgroundColor = `background-color: ${colorValue}${alphaValue};`;
+    const hoverBackgroundColor = !isDisabled ? `&:hover { background-color: ${hoverValue}}` : '';
+    return backgroundColor + hoverBackgroundColor;
+};
 const Label = styled__default["default"].label `
     display: inline-block;
     border-radius: ${theme["default"].radius.pill};
@@ -44,17 +44,17 @@ const Label = styled__default["default"].label `
         border: 2px solid ${theme["default"].color.focus.light};
     }
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ position }) => (position === 'right' || position === 'middle') &&
     `
             margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ position }) => (position === 'left' || position === 'middle') &&
     `
             margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
         `}
     
-    ${({ position }) => position === 'auto' &&
+    ${({ position }) => position === 'auto' &&
     `
         margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
 
@@ -66,7 +66,7 @@ const Label = styled__default["default"].label `
             margin-right: 0;
         }
     `}
-`;
+`;
 const Input = styled__default["default"].input `
     appearance: none;
     display: block;
@@ -78,12 +78,12 @@ const Input = styled__default["default"].input `
     &:focus-visible {
         outline: 0 none;
     }
-`;
-const Pill = (_a) => {
-    var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
-    return (React__default["default"].createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
-        props.children,
-        type !== 'none' && (React__default["default"].createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
+`;
+const Pill = (_a) => {
+    var { type = 'none', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["type", 'data-testid']);
+    return (React__default["default"].createElement(Label, { as: type === 'none' ? 'div' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId },
+        props.children,
+        type !== 'none' && (React__default["default"].createElement(Input, { id: props.id, name: props.name, type: type, role: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, "aria-checked": props.isChecked || props.isDefaultChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange }))));
 };
 
 exports["default"] = Pill;

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

@@ -1,21 +1,21 @@
-import React from 'react';
-interface Props {
-    /**
-     * Allows to pass custom color
-     *
-     * @default 'theme.color.default.pink'
-     */
-    color?: string;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/** @visibleName Pixel Loader */
-declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default PixelLoader;
+import React from 'react';
+interface Props {
+    /**
+     * Allows to pass custom color
+     *
+     * @default 'theme.color.default.pink'
+     */
+    color?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Pixel Loader */
+declare const PixelLoader: ({ className, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default PixelLoader;

package/build/cjs/components/PixelLoader/PixelLoader.js

@@ -21,13 +21,13 @@ const loading = styled.keyframes `
     40% {
         transform: scale(1);
     }
-`;
+`;
 const PixelLoaderWrapper = styled["default"].div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
-`;
+`;
 const Pixel = styled["default"].div `
     background-color: ${({ color }) => color || theme["default"].color.default.pink};
     display: inline-block;
@@ -36,15 +36,15 @@ const Pixel = styled["default"].div `
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
     animation-delay: ${({ delay }) => delay}s;
-`;
-/** @visibleName Pixel Loader */
-const PixelLoader = (_a) => {
-    var { className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["className", 'data-testid']);
-    return (React__default["default"].createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
-        React__default["default"].createElement(Pixel, { color: props.color, delay: "-0.27" }),
-        React__default["default"].createElement(Pixel, { color: props.color, delay: "-0.18" }),
-        React__default["default"].createElement(Pixel, { color: props.color, delay: "-0.09" }),
-        React__default["default"].createElement(Pixel, { color: props.color, delay: "0" })));
+`;
+/** @visibleName Pixel Loader */
+const PixelLoader = (_a) => {
+    var { className, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["className", 'data-testid']);
+    return (React__default["default"].createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        React__default["default"].createElement(Pixel, { color: props.color, delay: "-0.27" }),
+        React__default["default"].createElement(Pixel, { color: props.color, delay: "-0.18" }),
+        React__default["default"].createElement(Pixel, { color: props.color, delay: "-0.09" }),
+        React__default["default"].createElement(Pixel, { color: props.color, delay: "0" })));
 };
 
 exports["default"] = PixelLoader;

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

@@ -1,41 +1,41 @@
-import type { MouseEvent } from 'react';
-import React from 'react';
-type ProgressIndicatorStatus = 'error';
-interface Props {
-    /**
-     * Array of strings to be used as labels or number of steps.
-     * If number is passed as a value, no labels will be generated
-     */
-    steps: string[] | number;
-    /**
-     * Allows to set the active step (zero based index) by passing the index of item from `steps` array
-     */
-    activeStep?: number;
-    /**
-     * On Progress Indicator Item label or number click callback
-     * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
-     */
-    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows to change version of component to small
-     */
-    small?: boolean;
-    /**
-     * Depending on the passed status, the styling of component changes
-     *
-     * @param {ProgressIndicatorStatus} error Displays `error` icon with `theme.color.notification.error` color in currently active step
-     */
-    status?: ProgressIndicatorStatus;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/** @visibleName Progress Indicator */
-declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default ProgressIndicator;
+import type { MouseEvent } from 'react';
+import React from 'react';
+type ProgressIndicatorStatus = 'error';
+interface Props {
+    /**
+     * Array of strings to be used as labels or number of steps.
+     * If number is passed as a value, no labels will be generated
+     */
+    steps: string[] | number;
+    /**
+     * Allows to set the active step (zero based index) by passing the index of item from `steps` array
+     */
+    activeStep?: number;
+    /**
+     * On Progress Indicator Item label or number click callback
+     * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
+     */
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Allows to change version of component to small
+     */
+    small?: boolean;
+    /**
+     * Depending on the passed status, the styling of component changes
+     *
+     * @param {ProgressIndicatorStatus} error Displays `error` icon with `theme.color.notification.error` color in currently active step
+     */
+    status?: ProgressIndicatorStatus;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Progress Indicator */
+declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default ProgressIndicator;

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js

@@ -14,26 +14,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getBackgroundColor = ({ isActive, isError, }) => {
-    const defaultColor = theme["default"].color.background.white.default;
-    const currentColor = isError
-        ? theme["default"].color.notification.error
-        : theme["default"].color.background.pink.default;
-    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
-};
-const getBorderColor = ({ isActive, isCompleted, isError }) => {
-    const defaultColor = theme["default"].color.line.L02;
-    const currentColor = isError
-        ? theme["default"].color.notification.error
-        : theme["default"].color.background.pink.default;
-    return isActive || isCompleted ? currentColor : defaultColor;
-};
+const getBackgroundColor = ({ isActive, isError, }) => {
+    const defaultColor = theme["default"].color.background.white.default;
+    const currentColor = isError
+        ? theme["default"].color.notification.error
+        : theme["default"].color.background.pink.default;
+    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
+};
+const getBorderColor = ({ isActive, isCompleted, isError }) => {
+    const defaultColor = theme["default"].color.line.L02;
+    const currentColor = isError
+        ? theme["default"].color.notification.error
+        : theme["default"].color.background.pink.default;
+    return isActive || isCompleted ? currentColor : defaultColor;
+};
 const ProgressIndicatorWrapper = styled["default"].ul `
     display: flex;
     justify-content: space-between;
     margin: 0;
     padding: 0;
-`;
+`;
 const ProgressIndicatorItem = styled["default"].li `
     position: relative;
     display: inline-flex;
@@ -67,7 +67,7 @@ const ProgressIndicatorItem = styled["default"].li `
             }
         }
     `}
-`;
+`;
 const ProgressIndicatorItemConnector = styled["default"].div `
     position: absolute;
     top: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseHeight, small ? 1.5 : 2)};
@@ -76,7 +76,7 @@ const ProgressIndicatorItemConnector = styled["default"].div `
     width: 100%;
     height: ${({ small }) => (small ? '2px' : '4px')};
     background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme["default"].color.default.pink : theme["default"].color.line.L02};
-`;
+`;
 const ProgressIndicatorItemNumber = styled["default"].div `
     display: flex;
     justify-content: center;
@@ -92,7 +92,7 @@ const ProgressIndicatorItemNumber = styled["default"].div `
     z-index: 1;
 
     ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
-`;
+`;
 const ProgressIndicatorItemLabel = styled["default"].div `
     display: none;
     font-size: ${({ small }) => (small ? theme["default"].fontSize.xs : theme["default"].fontSize.s)};
@@ -103,30 +103,30 @@ const ProgressIndicatorItemLabel = styled["default"].div `
     ${styledUtils.media.sm `
         display: initial;
     `}
-`;
-/** @visibleName Progress Indicator */
-const ProgressIndicator = (_a) => {
-    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["activeStep", 'data-testid']);
-    const stepsArray = Array.isArray(props.steps)
-        ? props.steps
-        : Array(props.steps).fill('');
-    const progressIndicatorItems = stepsArray.map((label, index) => {
-        const id = `id-${label}-${index}`;
-        const stepNumber = index + 1;
-        const isActive = index === activeStep;
-        const isCompleted = index < activeStep;
-        const isError = isActive && props.status === 'error';
-        const handleClick = (e) => {
-            if (props.onStepClick) {
-                props.onStepClick(index, e);
-            }
-        };
-        return (React__default["default"].createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
-            index > 0 && (React__default["default"].createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default["default"].createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default["default"].createElement(Icon["default"], { icon: isError ? icons.Warning : icons.Check, color: isError ? theme["default"].color.text.white : theme["default"].color.text.pink, size: "1rem" })) : (stepNumber)),
-            label && (React__default["default"].createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
-    });
-    return (React__default["default"].createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
+`;
+/** @visibleName Progress Indicator */
+const ProgressIndicator = (_a) => {
+    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["activeStep", 'data-testid']);
+    const stepsArray = Array.isArray(props.steps)
+        ? props.steps
+        : Array(props.steps).fill('');
+    const progressIndicatorItems = stepsArray.map((label, index) => {
+        const id = `id-${label}-${index}`;
+        const stepNumber = index + 1;
+        const isActive = index === activeStep;
+        const isCompleted = index < activeStep;
+        const isError = isActive && props.status === 'error';
+        const handleClick = (e) => {
+            if (props.onStepClick) {
+                props.onStepClick(index, e);
+            }
+        };
+        return (React__default["default"].createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+            index > 0 && (React__default["default"].createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
+            React__default["default"].createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default["default"].createElement(Icon["default"], { icon: isError ? icons.Warning : icons.Check, color: isError ? theme["default"].color.text.white : theme["default"].color.text.pink, size: "1rem" })) : (stepNumber)),
+            label && (React__default["default"].createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+    });
+    return (React__default["default"].createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
 };
 
 exports["default"] = ProgressIndicator;

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

@@ -1,50 +1,50 @@
-import type { ChangeEvent } from 'react';
-import React from 'react';
-interface Props {
-    /**
-     * Unique ID for the input element
-     */
-    id: string;
-    /**
-     * Name of the input element
-     */
-    name?: string;
-    /**
-     * Default value of input element
-     *
-     * @default undefined
-     */
-    value?: string | number;
-    /**
-     * Text of the label shown next to radio button
-     */
-    label?: string;
-    /**
-     * On radio button change callback
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Allows to set the radio button as checked
-     *
-     * @default false
-     */
-    checked?: boolean;
-    /**
-     * Allows to disable the radio button
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Allows to pass a custom className
-     */
-    className?: string;
-    /**
-     * Allows to pass testid string for testing purposes
-     */
-    'data-testid'?: string;
-}
-/** @visibleName Radio Button */
-declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
-/** @component */
-export default RadioButton;
+import type { ChangeEvent } from 'react';
+import React from 'react';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * Text of the label shown next to radio button
+     */
+    label?: string;
+    /**
+     * On radio button change callback
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to set the radio button as checked
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Allows to disable the radio button
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+/** @visibleName Radio Button */
+declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default RadioButton;

package/build/cjs/components/RadioButton/RadioButton.js

@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const Container = styled["default"].div `
     display: flex;
     margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
-`;
+`;
 const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
     border-radius: ${theme["default"].radius.circle};
 
@@ -25,13 +25,13 @@ const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
         width: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
         height: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
     }
-`;
-/** @visibleName Radio Button */
-const RadioButton = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
-        props.label && (React__default["default"].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
+`;
+/** @visibleName Radio Button */
+const RadioButton = (_a) => {
+    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
+    return (React__default["default"].createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React__default["default"].createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
+        props.label && (React__default["default"].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 
 exports["default"] = RadioButton;

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

@@ -1,18 +1,18 @@
-import type { FunctionComponent, MouseEvent, ReactNode } from 'react';
-interface ReadMoreProps {
-    /** The label for show more link */
-    showMoreText?: string;
-    /** The label for show less link */
-    showLessText?: string;
-    /** Text content for component */
-    children: ReactNode;
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Allows to pass custom onClick */
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /** Init in expanded state and immediately close on client for better SEO */
-    seoInitExpanded?: boolean;
-}
-/** @visibleName Read More */
-declare const ReadMore: FunctionComponent<ReadMoreProps>;
-export default ReadMore;
+import type { FunctionComponent, MouseEvent, ReactNode } from 'react';
+interface ReadMoreProps {
+    /** The label for show more link */
+    showMoreText?: string;
+    /** The label for show less link */
+    showLessText?: string;
+    /** Text content for component */
+    children: ReactNode;
+    /** Allows to pass a custom className */
+    className?: string;
+    /** Allows to pass custom onClick */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Init in expanded state and immediately close on client for better SEO */
+    seoInitExpanded?: boolean;
+}
+/** @visibleName Read More */
+declare const ReadMore: FunctionComponent<ReadMoreProps>;
+export default ReadMore;

package/build/cjs/components/ReadMore/ReadMore.js

@@ -18,7 +18,7 @@ const TruncateContainer = styled["default"].div `
     overflow: hidden;
     transition: ${props => (props.expanded ? 1.5 : 0.3)}s;
     max-height: ${props => (props.expanded ? 'auto' : '10rem')};
-`;
+`;
 const Toggle = styled["default"].div `
     position: absolute;
     bottom: 0;
@@ -26,8 +26,8 @@ const Toggle = styled["default"].div `
     right: 0;
     cursor: ${p => (p && p.expanded ? 'auto' : 'pointer')};
     background: linear-gradient(0deg, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
-    padding-top: ${p => p && p.expanded
-    ? styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)
+    padding-top: ${p => p && p.expanded
+    ? styledUtils.getMultipliedSize(p.theme.base.baseHeight, 2)
     : styledUtils.getMultipliedSize(p.theme.base.baseHeight, 10)};
 
     button {
@@ -42,27 +42,27 @@ const Toggle = styled["default"].div `
             text-decoration: underline;
         }
     }
-`;
-/** @visibleName Read More */
-const ReadMore = ({ children, showMoreText, showLessText, className, onClick = () => ({}), seoInitExpanded, }) => {
-    const [expanded, setExpanded] = React.useState(seoInitExpanded === true || false);
-    React.useEffect(() => {
-        if (seoInitExpanded) {
-            setExpanded(false);
-        }
-    }, [seoInitExpanded]);
-    const toggleTruncate = (event) => {
-        setExpanded(!expanded);
-        onClick(event);
-    };
-    const icon = expanded ? icons.ChevronUp : icons.ChevronDown;
-    const buttonText = expanded ? showLessText : showMoreText;
-    return (React__default["default"].createElement(TruncateContainer, { expanded: expanded, className: className },
-        children,
-        React__default["default"].createElement(Toggle, { expanded: expanded },
-            React__default["default"].createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
-                React__default["default"].createElement(Icon["default"], { icon: icon, size: "1rem", position: "left" }),
-                buttonText))));
+`;
+/** @visibleName Read More */
+const ReadMore = ({ children, showMoreText, showLessText, className, onClick = () => ({}), seoInitExpanded, }) => {
+    const [expanded, setExpanded] = React.useState(seoInitExpanded === true || false);
+    React.useEffect(() => {
+        if (seoInitExpanded) {
+            setExpanded(false);
+        }
+    }, [seoInitExpanded]);
+    const toggleTruncate = (event) => {
+        setExpanded(!expanded);
+        onClick(event);
+    };
+    const icon = expanded ? icons.ChevronUp : icons.ChevronDown;
+    const buttonText = expanded ? showLessText : showMoreText;
+    return (React__default["default"].createElement(TruncateContainer, { expanded: expanded, className: className },
+        children,
+        React__default["default"].createElement(Toggle, { expanded: expanded },
+            React__default["default"].createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
+                React__default["default"].createElement(Icon["default"], { icon: icon, size: "1rem", position: "left" }),
+                buttonText))));
 };
 
 exports["default"] = ReadMore;