@dnanpm/styleguide 2.2.3 → 3.0.0

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

@@ -0,0 +1,77 @@
+import React from 'react';
+declare type PillType = 'none' | 'checkbox' | 'radio';
+declare 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 margings 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 false
+     */
+    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) => JSX.Element;
+/** @component */
+export default Pill;

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

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var theme = require('../../themes/theme.js');
+var styledUtils = require('../../utils/styledUtils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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, as, }) => {
+    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 && as !== 'div' ? `&:hover { background-color: ${hoverValue}}` : '';
+    return backgroundColor + hoverBackgroundColor;
+};
+const Label = styled__default["default"].label `
+    display: inline-block;
+    border-radius: ${theme["default"].radius.pill};
+    font-size: ${theme["default"].fontSize.s};
+    line-height: ${theme["default"].lineHeight.default};
+    font-weight: ${theme["default"].fontWeight.medium};
+    color: ${({ isChecked }) => isChecked ? theme["default"].color.default.white : theme["default"].color.default.black};
+    border: 2px solid transparent;
+    padding: 2px ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2.5)};
+    text-align: center;
+
+    ${({ isDisabled, as }) => getCursor({ isDisabled, as })}
+    ${({ isChecked, isDisabled, as }) => getBackgroundColor({ isChecked, isDisabled, as })}
+
+    &:focus-within {
+        box-shadow: 0px 0px 0px 2px ${theme["default"].color.focus.dark};
+        border: 2px solid ${theme["default"].color.focus.light};
+    }
+
+    ${({ position }) => (position === 'right' || position === 'middle') &&
+    `
+            margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        `}
+
+    ${({ position }) => (position === 'left' || position === 'middle') &&
+    `
+            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
+        `}
+    
+    ${({ position }) => position === 'auto' &&
+    `
+        margin: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 0.5)};
+
+        &:first-of-type {
+            margin-left: 0;
+        }
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    `}
+`;
+const Input = styled__default["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 = 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

@@ -3,7 +3,7 @@ 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) => JSX.Element;
 /** @component */
 export default PixelLoader;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
@@ -21,26 +22,29 @@ const loading = styled.keyframes `
         transform: scale(1);
     }
 `;
-const LoaderWrapper = styled['default'].div `
+const PixelLoaderWrapper = styled["default"].div `
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.125rem;
 `;
-const Pixel = styled['default'].div `
-    background: ${p => p.color || theme['default'].color.hotPink};
+const Pixel = styled["default"].div `
+    background-color: ${({ color }) => color || theme["default"].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__default['default'].createElement(LoaderWrapper, { className: className, "data-testid": dataTestId },
-    React__default['default'].createElement(Pixel, { color: color, delay: "-0.27" }),
-    React__default['default'].createElement(Pixel, { color: color, delay: "-0.18" }),
-    React__default['default'].createElement(Pixel, { color: color, delay: "-0.09" }),
-    React__default['default'].createElement(Pixel, { color: color, delay: "0" })));
+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;
+exports["default"] = PixelLoader;

package/build/cjs/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';
+declare 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 component title and button mouse 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) => JSX.Element;
+/** @component */
 export default ProgressIndicator;

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

@@ -2,189 +2,132 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var Icon = require('../Icon/Icon.js');
-require('tslib');
 var hlCheck = require('../Icons/hlCheck.js');
 var hlExclamationMark = require('../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['default'].span `
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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 ProgressIndicatorWrapper = styled["default"].ul `
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+`;
+const ProgressIndicatorItem = styled["default"].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 }) => styledUtils.getMultipliedSize(theme["default"].base.baseWidth, small ? 0.5 : 1)};
 
-    ${({ theme }) => styledUtils.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%;
 
-        ${() => styledUtils.media.sm `
-            height: ${iconSizeLarge};
-            width: ${iconSizeLarge};
-        `};
+        & > div:first-of-type {
+            width: 150%;
+            left: -75%;
+        }
     }
-`;
-const ProgressLine = styled['default'].span `
-    width: 0;
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: ${progressBallBorderHeight}px;
-    background-color: ${p => p.theme.color.gray15};
 
-    ${() => styledUtils.media.sm `
-        top: ${progressLineTopMarginSmall}px;
-    `};
+    ${styledUtils.media.sm `
+        flex: 2 1 0%;
+
+        &:last-of-type {
+            & > div:first-of-type {
+                width: 200%;
+                left: -100%;
+            }
+        }
+    `}
 `;
-const ProgressText = styled['default'].span `
-    font-size: ${p => p.theme.fontSize.s};
-    font-weight: ${p => p.theme.fontWeight.bold};
-    line-height: 1;
+const ProgressIndicatorItemConnector = styled["default"].div `
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    display: none;
-    ${({ isSmall }) => styledUtils.media.sm `
-        display: ${isSmall ? 'none' : 'block'};
-    `};
+    top: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseHeight, small ? 1.5 : 2)};
+    left: -50%;
+    right: 50%;
+    width: 100%;
+    height: ${({ small }) => (small ? '2px' : '4px')};
+    background-color: ${({ isActive, isCompleted }) => isActive || isCompleted ? theme["default"].color.default.pink : theme["default"].color.line.L02};
 `;
-const Progress = styled['default'].ul `
-    text-align: justify;
-    position: relative;
-    margin: 0;
-    padding: 0;
+const ProgressIndicatorItemNumber = styled["default"].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)};
-        }
-    }
-
-    ${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};
-    }
+    justify-content: center;
+    align-items: center;
+    font-size: ${({ small }) => (small ? theme["default"].fontSize.s : theme["default"].fontSize.l)};
+    font-weight: ${theme["default"].fontWeight.bold};
+    width: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseWidth, small ? 3 : 4)};
+    height: ${({ small }) => styledUtils.getMultipliedSize(theme["default"].base.baseHeight, small ? 3 : 4)};
+    cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
+    color: ${({ isActive }) => (isActive ? theme["default"].color.text.white : theme["default"].color.text.gray)};
+    border-radius: ${theme["default"].radius.circle};
+    border: ${({ small, isActive, isCompleted, isError }) => `${small ? '3px' : '4px'} solid ${getBorderColor({ isActive, isCompleted, isError })}`};
+    z-index: 1;
+
+    ${({ isActive, isError }) => getBackgroundColor({ isActive, isError })}
 `;
-const ProgressItem = styled['default'].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 : styledUtils.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;
-    }
-
-    ${ProgressText} {
-        color: ${({ theme, isActive, isCompleted }) => isActive || isCompleted ? theme.color.text : theme.color.gray40};
-    }
+const ProgressIndicatorItemLabel = styled["default"].div `
+    display: none;
+    font-size: ${({ small }) => (small ? theme["default"].fontSize.xs : theme["default"].fontSize.s)};
+    line-height: ${({ small }) => (small ? theme["default"].lineHeight.xs : theme["default"].lineHeight.s)};
+    font-weight: ${theme["default"].fontWeight.bold};
+    color: ${({ isActive }) => (isActive ? theme["default"].color.text.black : theme["default"].color.text.gray)};
+
+    ${styledUtils.media.sm `
+        display: initial;
+    `}
 `;
 /** @visibleName Progress Indicator */
-const ProgressIndicator = props => {
-    const { steps, small = false, onStepChange, activeSlideIndex = 0, currentStatus, className, } = props;
-    return (React.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 = 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 === activeSlideIndex;
-        const isCompleted = index < activeSlideIndex;
-        const isError = isActive && currentStatus === 'error';
-        const icon = isError ? hlExclamationMark['default'] : hlCheck['default'];
-        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 (React.createElement(ProgressItem, { "aria-current": isActive ? 'step' : undefined, cursorType: cursorType, isActive: isActive, isCompleted: isCompleted, isError: isError, isSmall: small, key: `${stepNumber}-${title}`, onClick: handleClick },
-            React.createElement(ProgressLine, null),
-            React.createElement(ProgressBall, null, isCompleted || isError ? React.createElement(Icon['default'], { icon: icon }) : stepNumber),
-            title && React.createElement(ProgressText, { isSmall: small }, title)));
-    })));
+        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 ? hlExclamationMark["default"] : hlCheck.hlSuccess, 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;
+exports["default"] = ProgressIndicator;

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

@@ -6,31 +6,32 @@ var tslib = require('tslib');
 var React = require('react');
 var globalStyles = require('../../themes/globalStyles.js');
 var styled = require('../../themes/styled.js');
+var theme = require('../../themes/theme.js');
 var styledUtils = require('../../utils/styledUtils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const Container = styled['default'].div `
+const Container = styled["default"].div `
     display: flex;
-    margin-bottom: ${props => styledUtils.getMultipliedSize(props.theme.base.baseHeight, 0.5)};
+    margin-bottom: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.5)};
 `;
-const Input = styled['default'](globalStyles.CheckboxAndRadioInputCore) `
-    border-radius: 50%;
+const Input = styled["default"](globalStyles.CheckboxAndRadioInputCore) `
+    border-radius: ${theme["default"].radius.circle};
 
     &::before {
-        border-radius: 50%;
-        width: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
-        height: ${props => styledUtils.getMultipliedSize(props.theme.base.baseWidth, 1)};
+        border-radius: ${theme["default"].radius.circle};
+        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, 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__default['default'].createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
+    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;
+exports["default"] = RadioButton;