@dnanpm/styleguide 2.3.0 → 3.1.0

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

@@ -0,0 +1,77 @@
+import React from 'react';
+type PillType = 'none' | 'checkbox' | 'radio';
+type Position = 'auto' | 'left' | 'right' | 'middle';
+interface Props {
+    /**
+     * Unique ID for the input element
+     */
+    id: string;
+    /**
+     * Name of the input element
+     */
+    name?: string;
+    /**
+     * Allows to change the functionality of component while retaining style
+     *
+     * @param {PillType} none No functionality
+     * @param {PillType} checkbox Acts as a checkbox input type
+     * @param {PillType} radio Acts as a radiobutton input type
+     *
+     * @default 'none'
+     */
+    type?: PillType;
+    /**
+     * Default value of input element
+     *
+     * @default undefined
+     */
+    value?: string | number;
+    /**
+     * On checkbox/radiobutton change callback
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Allows to set position of component relative to other content and adds appropriate margins
+     *
+     * @param {Position} auto Pill component is grouped with other pill components, add margins in between
+     * @param {Position} left Pill component is on the left side of content, add right margin
+     * @param {Position} right Pill component is on the right side of content, add left margin
+     * @param {Position} middle Pill component is in the middle of content, add left and right margins
+     *
+     * @default undefined
+     */
+    position?: Position;
+    /**
+     * Allows to set checkbox/radiobutton as checked
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Allows to set checkbox/radiobutton as checked by default
+     *
+     * @default false
+     */
+    isDefaultChecked?: boolean;
+    /**
+     * Allows to disable checkbox/radiobutton functionality
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Content of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+}
+declare const Pill: ({ type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Pill;

package/build/es/components/Pill/Pill.js

@@ -0,0 +1,80 @@
+import { __rest } from 'tslib';
+import React__default from 'react';
+import styled__default from 'styled-components';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
+
+const getCursor = ({ isDisabled, as }) => as !== 'div' && `cursor: ${isDisabled ? 'not-allowed' : 'pointer'};`;
+const getBackgroundColor = ({ isChecked, isDisabled }) => {
+    const alphaValue = isDisabled ? theme.color.transparency.T30 : theme.color.transparency.T100;
+    const colorValue = isChecked
+        ? theme.color.background.plum.default
+        : theme.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.label `
+    display: inline-block;
+    border-radius: ${theme.radius.pill};
+    font-size: ${theme.fontSize.s};
+    line-height: ${theme.lineHeight.default};
+    font-weight: ${theme.fontWeight.medium};
+    color: ${({ isChecked }) => isChecked ? theme.color.default.white : theme.color.default.black};
+    border: 2px solid transparent;
+    padding: 2px ${getMultipliedSize(theme.base.baseHeight, 2.5)};
+    text-align: center;
+
+    ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
+    ${({ isChecked, isDisabled }) => getBackgroundColor({ isChecked, isDisabled })}
+
+    &:focus-within, *:focus > & {
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.dark};
+        border: 2px solid ${theme.color.focus.light};
+    }
+
+    ${({ position }) => (position === 'right' || position === 'middle') &&
+    `
+            margin-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        `}
+
+    ${({ position }) => (position === 'left' || position === 'middle') &&
+    `
+            margin-right: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        `}
+    
+    ${({ position }) => position === 'auto' &&
+    `
+        margin: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+
+        &:first-of-type {
+            margin-left: 0;
+        }
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    `}
+`;
+const Input = styled__default.input `
+    appearance: none;
+    display: block;
+    border: 0 none;
+    margin: 0;
+    width: 0;
+    height: 0;
+
+    &:focus-visible {
+        outline: 0 none;
+    }
+`;
+const Pill = (_a) => {
+    var { type = 'none', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
+    return (React__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.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 }))));
+};
+
+export { Pill as default };

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

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

package/build/es/components/PixelLoader/PixelLoader.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled, { keyframes } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 
@@ -13,26 +14,29 @@ const loading = keyframes `
         transform: scale(1);
     }
 `;
-const LoaderWrapper = styled.div `
+const PixelLoaderWrapper = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
 `;
 const Pixel = styled.div `
-    background: ${p => p.color || theme.color.hotPink};
+    background-color: ${({ color }) => color || theme.color.default.pink};
     display: inline-block;
     width: 0.625rem;
     height: 0.625rem;
     margin: 0.125rem;
     animation: ${loading} 1s ease-in-out infinite;
-    animation-delay: ${p => p.delay}s;
+    animation-delay: ${({ delay }) => delay}s;
 `;
 /** @visibleName Pixel Loader */
-const PixelLoader = ({ className, color, 'data-testid': dataTestId }) => (React.createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
-    React.createElement(Pixel, { color: color, delay: "-0.27" }),
-    React.createElement(Pixel, { color: color, delay: "-0.18" }),
-    React.createElement(Pixel, { color: color, delay: "-0.09" }),
-    React.createElement(Pixel, { color: color, delay: "0" })));
+const PixelLoader = (_a) => {
+    var { className, 'data-testid': dataTestId } = _a, props = __rest(_a, ["className", 'data-testid']);
+    return (React__default.createElement(PixelLoaderWrapper, { className: className, "data-testid": dataTestId },
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.27" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.18" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "-0.09" }),
+        React__default.createElement(Pixel, { color: props.color, delay: "0" })));
+};
 
-export default PixelLoader;
+export { PixelLoader as default };

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

@@ -1,24 +1,40 @@
-import * as React from 'react';
-export interface Steps {
-    title: string;
-    cursorType?: string;
-}
-export interface StepperProps {
-    /** Allows to pass a custom className */
-    className?: string;
-    /** Dictates the steps in the flow */
-    steps: Steps[];
-    /** Dictates which step is active */
-    activeSlideIndex?: number;
-    onStepChange?: (slideIndex: number) => void;
-    /** Dictates if smaller version should be used */
+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: React.MouseEvent<HTMLElement>) => void;
     /**
-     * @default false
+     * Allows to change version of component to small
      */
     small?: boolean;
-    /** Dictates current status of the flow */
-    currentStatus?: string;
+    /**
+     * 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: React.FunctionComponent<StepperProps>;
+declare const ProgressIndicator: ({ activeStep, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
 export default ProgressIndicator;

package/build/es/components/ProgressIndicator/ProgressIndicator.js

@@ -1,186 +1,125 @@
-import { createElement } from 'react';
+import { __rest } from 'tslib';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
-import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import theme from '../../themes/theme.js';
+import { getMultipliedSize, media } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
-import 'tslib';
-import HlCheck from '../Icons/hlCheck.js';
+import { hlSuccess } from '../Icons/hlCheck.js';
 import hlExclamationMark from '../Icons/hlExclamationMark.js';
 
-const progressBallWidthLarge = '2.5rem'; // 40px
-const progressBallWidthSmall = '1.875rem'; // 30px
-const progressLineTopMarginLarge = '18';
-const progressLineTopMarginSmall = '13';
-const iconSizeLarge = '1.25rem';
-const iconSizeSmall = '1rem';
-const progressBallBorderWidth = 4;
-const progressBallBorderHeight = 4;
-const ProgressBall = styled.span `
+const getBackgroundColor = ({ isActive, isError, }) => {
+    const defaultColor = theme.color.background.white.default;
+    const currentColor = isError
+        ? theme.color.notification.error
+        : theme.color.background.pink.default;
+    return `background-color: ${isError || isActive ? currentColor : defaultColor};`;
+};
+const getBorderColor = ({ isActive, isCompleted, isError }) => {
+    const defaultColor = theme.color.line.L02;
+    const currentColor = isError
+        ? theme.color.notification.error
+        : theme.color.background.pink.default;
+    return isActive || isCompleted ? currentColor : defaultColor;
+};
+const ProgressIndicatorWrapper = styled.ul `
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+`;
+const ProgressIndicatorItem = styled.li `
+    position: relative;
     display: inline-flex;
-    justify-content: center;
     flex-direction: column;
-    text-align: center;
-    border-radius: 50%;
-    border: ${progressBallBorderWidth}px solid ${p => p.theme.color.gray15};
-    font-weight: ${p => p.theme.fontWeight.bold};
-    transition: all 0.3s ease 0.3s;
+    align-items: center;
+    flex: 1.5 1 0%;
+    gap: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 0.5 : 1)};
 
-    ${({ theme }) => media.sm `
-        width: ${progressBallWidthLarge};
-        height: ${progressBallWidthLarge};
-        font-size: ${theme.fontSize.l};
-    `};
+    &:first-of-type {
+        align-items: flex-start;
+        flex: 1 1 0%;
+    }
 
-    span.dnasg-icon,
-    span.dnasg-icon > svg {
-        margin: 0 auto;
-        height: ${iconSizeSmall};
-        width: ${iconSizeSmall};
+    &:last-of-type {
+        align-items: flex-end;
+        flex: 1 1 0%;
 
-        ${() => media.sm `
-            height: ${iconSizeLarge};
-            width: ${iconSizeLarge};
-        `};
+        & > div:first-of-type {
+            width: 150%;
+            left: -75%;
+        }
     }
-`;
-const ProgressLine = styled.span `
-    width: 0;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: ${progressBallBorderHeight}px;
-    background-color: ${p => p.theme.color.gray15};
 
-    ${() => media.sm `
-        top: ${progressLineTopMarginSmall}px;
-    `};
+    ${media.sm `
+        flex: 2 1 0%;
+
+        &:last-of-type {
+            & > div:first-of-type {
+                width: 200%;
+                left: -100%;
+            }
+        }
+    `}
 `;
-const ProgressText = styled.span `
-    font-size: ${p => p.theme.fontSize.s};
-    font-weight: ${p => p.theme.fontWeight.bold};
-    line-height: 1;
+const ProgressIndicatorItemConnector = styled.div `
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -${p => getMultipliedSize(p.theme.base.baseHeight, 1)};
-    display: none;
-    ${({ isSmall }) => media.sm `
-        display: ${isSmall ? 'none' : 'block'};
-    `};
+    top: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 1.5 : 2)};
+    left: -50%;
+    right: 50%;
+    width: 100%;
+    height: ${({ small }) => (small ? '2px' : '4px')};
+    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme.color.default.pink : theme.color.line.L02};
 `;
-const Progress = styled.ul `
-    text-align: justify;
-    position: relative;
-    margin: 0;
-    padding: 0;
+const ProgressIndicatorItemNumber = styled.div `
     display: flex;
-    justify-content: space-around;
-
-    ${ProgressBall} {
-        width: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
-        height: ${p => (p && p.small ? progressBallWidthSmall : progressBallWidthLarge)};
-        font-size: ${p => (p && p.small ? p.theme.fontSize.s : p.theme.fontSize.l)};
-
-        span.dnasg-icon,
-        span.dnasg-icon > svg {
-            height: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
-            width: ${p => (p && p.small ? iconSizeSmall : iconSizeLarge)};
-        }
-    }
+    justify-content: center;
+    align-items: center;
+    font-size: ${({ small }) => (small ? theme.fontSize.s : theme.fontSize.l)};
+    font-weight: ${theme.fontWeight.bold};
+    width: ${({ small }) => getMultipliedSize(theme.base.baseWidth, small ? 3 : 4)};
+    height: ${({ small }) => getMultipliedSize(theme.base.baseHeight, small ? 3 : 4)};
+    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
+    color: ${({ isActive }) => (isActive ? theme.color.text.white : theme.color.text.gray)};
+    border-radius: ${theme.radius.circle};
+    border: ${({ small, isActive, isCompleted, isError }) => `${small ? '3px' : '4px'} solid ${getBorderColor({ isActive, isCompleted, isError })}`};
+    z-index: 1;
 
-    ${ProgressLine} {
-        top: ${p => (p && p.small ? progressLineTopMarginSmall : progressLineTopMarginLarge)}px;
-    }
-    &:after {
-        content: '';
-        left: 0;
-        ${p => `
-        width: ${(p.activeSlideIndex ? p.activeSlideIndex : 0) * (100 / (p.steps.length - 1))}%;
-        `};
-        position: absolute;
-        top: ${p => (p && p.small ? progressLineTopMarginSmall : progressLineTopMarginLarge)}px;
-        height: ${progressBallBorderHeight}px;
-        transition: width 0.4s ease-in;
-        background-color: ${p => p.theme.color.hotPink};
-    }
+    ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
-const ProgressItem = styled.li `
-    &:first-child,
-    &:last-child {
-        width: 12.5%;
-    }
-    &:first-child {
-        text-align: left;
-    }
-
-    &:last-child {
-        text-align: right;
-    }
-
-    position: relative;
-    flex-grow: 1;
-    text-align: center;
-    width: 25%;
-    display: inline;
-    min-width: 28px;
-    padding-bottom: ${({ theme, isSmall }) => isSmall ? 0 : getMultipliedSize(theme.base.baseHeight, 2)};
-
-    ${ProgressBall} {
-        cursor: ${({ cursorType }) => cursorType || 'pointer'};
-        border-color: ${({ theme, isActive, isCompleted, isError }) => {
-    if (isError) {
-        return theme.color.error;
-    }
-    if (isActive || isCompleted) {
-        return theme.color.hotPink;
-    }
-    return theme.color.gray15;
-}};
-
-        background: ${({ theme, isActive, isError }) => {
-    if (isError) {
-        return theme.color.error;
-    }
-    if (isActive) {
-        return theme.color.hotPink;
-    }
-    return theme.color.white;
-}};
-        color: ${({ theme, isActive, isCompleted, isError }) => {
-    if (isError || isActive) {
-        return theme.color.white;
-    }
-    if (isCompleted) {
-        return theme.color.hotPink;
-    }
-    return theme.color.gray40;
-}};
-        z-index: 1;
-        position: relative;
-    }
+const ProgressIndicatorItemLabel = styled.div `
+    display: none;
+    font-size: ${({ small }) => (small ? theme.fontSize.xs : theme.fontSize.s)};
+    line-height: ${({ small }) => (small ? theme.lineHeight.xs : theme.lineHeight.s)};
+    font-weight: ${theme.fontWeight.bold};
+    color: ${({ isActive }) => (isActive ? theme.color.text.black : theme.color.text.gray)};
 
-    ${ProgressText} {
-        color: ${({ theme, isActive, isCompleted }) => isActive || isCompleted ? theme.color.text : theme.color.gray40};
-    }
+    ${media.sm `
+        display: initial;
+    `}
 `;
 /** @visibleName Progress Indicator */
-const ProgressIndicator = props => {
-    const { steps, small = false, onStepChange, activeSlideIndex = 0, currentStatus, className, } = props;
-    return (createElement(Progress, { className: className, activeSlideIndex: activeSlideIndex, currentStatus: currentStatus, small: small, steps: steps }, steps.map(({ title, cursorType }, index) => {
+const ProgressIndicator = (_a) => {
+    var { activeStep = 0, 'data-testid': dataTestId } = _a, props = __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 === activeSlideIndex;
-        const isCompleted = index < activeSlideIndex;
-        const isError = isActive && currentStatus === 'error';
-        const icon = isError ? hlExclamationMark : HlCheck;
-        const handleClick = () => {
-            if (onStepChange) {
-                onStepChange(index);
+        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 (createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: `${stepNumber}-${title}`, onClick: handleClick },
-            createElement(ProgressLine, null),
-            createElement(ProgressBall, null, isCompleted || isError ? createElement(Icon, { icon: icon }) : stepNumber),
-            title && createElement(ProgressText, { isSmall: small }, title)));
-    })));
+        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+            index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? hlExclamationMark : hlSuccess, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" })) : (stepNumber)),
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive }, label))));
+    });
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId }, progressIndicatorItems));
 };
 
-export default ProgressIndicator;
+export { ProgressIndicator as default };

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

@@ -44,6 +44,6 @@ interface Props {
     'data-testid'?: string;
 }
 /** @visibleName Radio Button */
-declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => JSX.Element;
+declare const RadioButton: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default RadioButton;

package/build/es/components/RadioButton/RadioButton.js

@@ -1,28 +1,29 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
 const Container = styled.div `
     display: flex;
-    margin-bottom: ${props => getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
 const Input = styled(CheckboxAndRadioInputCore) `
-    border-radius: 50%;
+    border-radius: ${theme.radius.circle};
 
     &::before {
-        border-radius: 50%;
-        width: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
-        height: ${props => getMultipliedSize(props.theme.base.baseWidth, 1)};
+        border-radius: ${theme.radius.circle};
+        width: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        height: ${getMultipliedSize(theme.base.baseWidth, 1)};
     }
 `;
 /** @visibleName Radio Button */
 const RadioButton = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Input, { id: props.id, type: "radio", name: props.name, checked: props.checked, "aria-checked": props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
-        props.label && (React.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
+    return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
+        React__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.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 
-export default RadioButton;
+export { RadioButton as default };

package/build/es/components/ReadMore/ReadMore.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Icon from '../Icon/Icon.js';
@@ -30,7 +30,7 @@ const Toggle = styled.div `
         cursor: pointer;
         background-color: transparent;
         border: 0;
-        color: ${p => p.theme.color.hotPink};
+        color: ${p => p.theme.color.text.pink};
         :focus {
             outline: none;
             text-decoration: underline;
@@ -51,12 +51,12 @@ const ReadMore = ({ children, showMoreText, showLessText, className, onClick = (
     };
     const icon = expanded ? hlChevronUp : hlChevronDown;
     const buttonText = expanded ? showLessText : showMoreText;
-    return (React.createElement(TruncateContainer, { expanded: expanded, className: className },
+    return (React__default.createElement(TruncateContainer, { expanded: expanded, className: className },
         children,
-        React.createElement(Toggle, { expanded: expanded },
-            React.createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
-                React.createElement(Icon, { icon: icon, size: "1rem", position: "left" }),
+        React__default.createElement(Toggle, { expanded: expanded },
+            React__default.createElement("button", { className: "dnasg-label", onClick: toggleTruncate, type: "button" },
+                React__default.createElement(Icon, { icon: icon, size: "1rem", position: "left" }),
                 buttonText))));
 };
 
-export default ReadMore;
+export { ReadMore as default };