@dnanpm/styleguide 3.9.7 → 3.9.9

package/build/es/components/Modal/Modal.js

@@ -1,14 +1,20 @@
 import { __rest } from 'tslib';
-import { Close } from '@dnanpm/icons';
 import React__default from 'react';
 import ReactModal from 'react-modal';
+import { Close } from '@dnanpm/icons';
 import styled, { createGlobalStyle } from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
-import { media, getMultipliedSize } from '../../utils/styledUtils.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Box from '../Box/Box.js';
 import ButtonClose from '../ButtonClose/ButtonClose.js';
-import Icon from '../Icon/Icon.js';
 
+const sizeMap = {
+    mobile: '375px',
+    small: '480px',
+    medium: '768px',
+    large: '960px',
+    wide: '1535px',
+};
 const GlobalStyle = createGlobalStyle `
     body.ReactModal__Body--open {
         overflow: hidden;
@@ -16,16 +22,27 @@ const GlobalStyle = createGlobalStyle `
 `;
 const StyledReactModal = styled(ReactModal) `
     position: relative;
-    width: 100vw;
-    height: 100dvh;
     max-width: 100vw;
-    max-height: 100%;
+    width: 100vw;
+    max-height: 100vh;
+    height: 100vh;
     overflow-y: auto;
 
-    ${({ maxWidth }) => media.sm `
-        width: ${maxWidth};
-        height: auto;
-    `};
+    @media (min-width: ${sizeMap.mobile}) {
+        max-width: ${({ size }) => sizeMap[size]};
+        max-height: 90%;
+        margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
+    }
+
+    @media (min-width: ${sizeMap.small}) {
+        width: 90vw;
+        max-height: 60%;
+    }
+
+    @media (min-width: ${sizeMap.wide}) {
+        max-width: 100%;
+        width: 960px;
+    }
 `;
 const StyledOverlay = styled.div `
     display: flex;
@@ -51,16 +68,72 @@ const StyledOverlay = styled.div `
     }
 `;
 const StyledBox = styled(Box) `
+    display: flex;
+    flex-direction: column;
     height: 100%;
+    padding: 0;
+    border: none;
     overflow-y: auto;
+
+    @media (max-width: ${sizeMap.mobile}) {
+        border-radius: 0;
+    }
 `;
 const StyledContent = styled.div `
     &:focus {
         outline: none;
     }
+
+    @media (min-width: ${sizeMap.small}) {
+        border-radius: ${theme.radius.default};
+    }
+`;
+const ContentWrapper = styled.div `
+    padding-top: ${getMultipliedSize(theme.base.baseWidth, 1)};
+    padding-left: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    padding-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    padding-right: ${getMultipliedSize(theme.base.baseWidth, 2)};
+`;
+const Header = styled.div `
+    padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    background-color: ${({ variant }) => variant === 'dark'
+    ? theme.color.background.plum.E02
+    : theme.color.background.white.default};
+    width: 100%;
+
+    h2,
+    p {
+        margin: 0;
+    }
 `;
 const Title = styled.h2 `
-    margin: 0 auto ${getMultipliedSize(theme.base.baseWidth, 2)};
+    font-size: ${theme.fontSize.h2M};
+    line-height: ${theme.lineHeight.h2M};
+    color: ${({ variant }) => variant === 'light' ? theme.color.default.black : theme.color.default.white};
+
+    @media (max-width: ${sizeMap.small}) {
+        font-size: ${theme.fontSize.h2S};
+        line-height: ${theme.lineHeight.h2S};
+    }
+`;
+const CloseButton = styled(ButtonClose) `
+    margin: 0;
+    padding: 0.5rem;
+    border-radius: 0 ${theme.radius.default} 0 ${theme.radius.default};
+    background-color: ${({ variant }) => variant === 'light'
+    ? theme.color.background.sand.E01
+    : theme.color.background.plum.default};
+    @media (max-width: ${sizeMap.mobile}) {
+        border-radius: 0 0 0 ${theme.radius.default};
+    }
+`;
+const Footer = styled.div `
+    position: sticky;
+    bottom: 0;
+    width: 100%;
+    margin-top: auto;
+    padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    background-color: ${theme.color.background.white.default};
 `;
 const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
 const ModalContent = (_a, children) => {
@@ -68,15 +141,18 @@ const ModalContent = (_a, children) => {
     return (React__default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
 };
 const Modal = (_a) => {
-    var { appElement = '#__next', maxWidth = '37.5rem', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "maxWidth", "closeButton", "isClosable", 'data-testid']);
+    var { appElement = '#__next', size = 'medium', variant = 'light', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = __rest(_a, ["appElement", "size", "variant", "closeButton", "isClosable", 'data-testid']);
     ReactModal.setAppElement(appElement);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(StyledReactModal, { id: props.id, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable, maxWidth: maxWidth },
+        React__default.createElement(StyledReactModal, { id: props.id, size: size, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable },
             React__default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
-                closeButton && isClosable && (React__default.createElement(ButtonClose, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button` },
-                    React__default.createElement(Icon, { icon: Close }))),
-                props.title && React__default.createElement(Title, null, props.title),
-                props.children)),
+                closeButton && isClosable && (React__default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, variant: variant },
+                    React__default.createElement(Close, { color: variant === 'light'
+                            ? theme.color.default.plum
+                            : theme.color.default.white }))),
+                React__default.createElement(Header, { variant: variant, "data-testid": dataTestId && `${dataTestId}-header` }, props.title && (React__default.createElement(Title, { size: size, variant: variant }, props.title))),
+                React__default.createElement(ContentWrapper, null, props.children),
+                props.footer && (React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
         React__default.createElement(GlobalStyle, null)));
 };
 

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

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, KeyboardEvent } from 'react';
 import React from 'react';
 type ProgressIndicatorStatus = 'error';
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
      * 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;
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to change version of component to small
      */

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

@@ -118,14 +118,21 @@ const ProgressIndicator = (_a) => {
                 props.onStepClick(index, e);
             }
         };
-        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+        const handleKeyDown = (e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && props.onStepClick) {
+                e.preventDefault();
+                props.onStepClick(index, e);
+            }
+        };
+        const isClickable = isCompleted && Boolean(props.onStepClick);
+        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small },
             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(React__default.Fragment, null,
-                isCompleted && props.completedStepLabel && (React__default.createElement("span", { className: "visually-hidden" }, props.completedStepLabel)),
-                React__default.createElement(Icon, { icon: isError ? Warning : Check, 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, className: "visually-hidden" }, label))));
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, isClickable: isClickable, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
+                    ? `${label}, ${props.completedStepLabel}`
+                    : label }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem", "aria-hidden": true })) : (stepNumber)),
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
     });
-    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "list" }, progressIndicatorItems));
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "tablist" }, progressIndicatorItems));
 };
 
 export { ProgressIndicator as default };

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

@@ -1,6 +1,5 @@
 import { __rest } from 'tslib';
 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';
@@ -9,13 +8,71 @@ const Container = styled.div `
     display: flex;
     margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
-const Input = styled(CheckboxAndRadioInputCore) `
+const Input = styled.input `
+    display: inline-grid;
+    appearance: none;
+    place-content: center;
+    float: left;
+    margin: 0;
+    cursor: pointer;
+    font-family: ${theme.fontFamily.default};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    min-width: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    width: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    height: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    color: ${theme.color.line.L01};
+    border: 2px solid ${theme.color.line.L01};
+    background-color: ${theme.color.background.white.default};
     border-radius: ${theme.radius.circle};
 
+    & + label {
+        cursor: pointer;
+        color: ${theme.color.text.black};
+        font-weight: ${theme.fontWeight.medium};
+        padding-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
+    }
+
     &::before {
+        content: '';
+        transform: scale(0);
+        background-color: currentColor;
         border-radius: ${theme.radius.circle};
-        width: ${getMultipliedSize(theme.base.baseWidth, 1)};
-        height: ${getMultipliedSize(theme.base.baseWidth, 1)};
+        width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
+        height: ${getMultipliedSize(theme.base.baseHeight, 1.2)};
+    }
+
+    &:checked {
+        color: ${theme.color.default.pink};
+        border-color: ${theme.color.default.pink};
+
+        &::before {
+            transform: scale(1);
+        }
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        color: ${theme.color.text.gray};
+        background-color: ${theme.color.line.L02 + theme.color.transparency.T40};
+        border-color: ${theme.color.line.L01 + theme.color.transparency.T40};
+
+        & + label {
+            cursor: not-allowed;
+            color: ${theme.color.text.gray};
+        }
+    }
+
+    &:disabled:checked {
+        color: ${theme.color.background.pink.E02};
+        border-color: ${theme.color.background.pink.E02};
+        background-color: ${theme.color.background.white.default};
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;
 /** @visibleName Radio Button */

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

@@ -68,6 +68,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass an accessible label for the component, enhancing screen reader support.
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Read More */
 declare const ReadMore: ({ collapsedSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { ChevronUp, ChevronDown } from '@dnanpm/icons';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
@@ -37,6 +37,9 @@ const StyledButtonIcon = styled(ButtonIcon) `
 const ReadMore = (_a) => {
     var { collapsedSize = '10rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["collapsedSize", 'data-testid']);
     const [expanded, setExpanded] = useState(props.seoInitExpanded === true || false);
+    const contentRef = useRef(null);
+    const buttonRef = useRef(null);
+    const userInteractedRef = useRef(false);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
     const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
     const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
@@ -48,16 +51,40 @@ const ReadMore = (_a) => {
         if (!temporaryIsStatelessFlag) {
             setExpanded(!expanded);
         }
+        userInteractedRef.current = true;
     };
     useEffect(() => {
         if (props.seoInitExpanded) {
             setExpanded(false);
         }
     }, [props.seoInitExpanded]);
-    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Content, { isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+    useEffect(() => {
+        var _a, _b;
+        if (userInteractedRef.current) {
+            if (temporaryStateManagement) {
+                (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }, [temporaryStateManagement]);
+    // Function to apply tabIndex to all links elements of children (since we don't control what is passed as children)
+    const forceTabIndexOnTextLinks = (child) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        if (child.type === 'a') {
+            return cloneElement(child, {
+                tabIndex: temporaryStateManagement ? 0 : -1,
+            });
+        }
+        return child;
+    };
+    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
+        React__default.createElement(Content, { ref: contentRef, isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, Children.map(props.children, forceTabIndexOnTextLinks)),
         React__default.createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
-            React__default.createElement(StyledButtonIcon, { icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick }, temporaryButtonLabel || props.buttonLabel))));
+            React__default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick, ariaHidden: true, "aria-expanded": temporaryStateManagement }, temporaryButtonLabel || props.buttonLabel))));
 };
 
 export { ReadMore as default };

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

@@ -53,6 +53,18 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label for the input field
+     */
+    ariaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the clear button
+     */
+    clearButtonAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the search button
+     */
+    searchButtonAriaLabel?: string;
 }
 declare const Search: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/es/components/Search/Search.js

@@ -52,7 +52,7 @@ const Button = styled(ButtonIcon) `
     margin: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
 `;
 const Search = (_a) => {
-    var _b;
+    var _b, _c;
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     const inputRef = useRef(null);
     const handleButtonClick = (e) => {
@@ -63,9 +63,15 @@ const Search = (_a) => {
             props.onButtonClick(e);
         }
     };
+    let buttonAriaLabel = '';
+    if (props.clearButtonAriaLabel && props.searchButtonAriaLabel) {
+        buttonAriaLabel = ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length)
+            ? props.clearButtonAriaLabel
+            : props.searchButtonAriaLabel;
+    }
     return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus }),
-        React__default.createElement(Button, { icon: ((_b = props.value) === null || _b === void 0 ? void 0 : _b.length) ? Close : Search$1, name: `${props.name}-button`, onClick: handleButtonClick })));
+        React__default.createElement(Input, { id: props.id, name: props.name, type: "search", ref: inputRef, value: props.value, onChange: props.onChange, onBlur: props.onBlur, onFocus: props.onFocus, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, placeholder: props.placeholder, autoFocus: props.autoFocus, "aria-label": props.ariaLabel }),
+        React__default.createElement(Button, { icon: ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) ? Close : Search$1, name: `${props.name}-button`, onClick: handleButtonClick, ariaLabel: buttonAriaLabel || undefined })));
 };
 
 export { Search as default };

package/build/es/themes/globalStyles.d.ts

@@ -165,172 +165,6 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         pill: string;
     };
 }>>;
-export declare const CheckboxAndRadioInputCore: import("styled-components").StyledComponent<"input", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        active: {
-            pink: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {}, never>;
 declare const _default: import("styled-components").GlobalStyleComponent<{}, {
     base: {
         baseHeight: {

package/build/es/themes/globalStyles.js

@@ -1,5 +1,5 @@
-import { media, getMultipliedSize } from '../utils/styledUtils.js';
-import styled, { css, createGlobalStyle } from './styled.js';
+import { media } from '../utils/styledUtils.js';
+import { css, createGlobalStyle } from './styled.js';
 import theme from './theme.js';
 
 const globalStyles = css `
@@ -185,66 +185,8 @@ const globalStyles = css `
         opacity: 0;
     }
 `;
-const CheckboxAndRadioInputCore = styled.input `
-    display: inline-grid;
-    appearance: none;
-    place-content: center;
-    float: left;
-    margin: 0;
-    cursor: pointer;
-    font-family: ${theme.fontFamily.default};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    min-width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    width: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    height: ${getMultipliedSize(theme.base.baseWidth, 2)};
-    color: ${theme.color.line.L01};
-    border: 2px solid ${theme.color.line.L01};
-    border-radius: ${theme.radius.s};
-    background-color: ${theme.color.background.white.default};
-
-    & + label {
-        cursor: pointer;
-        color: ${theme.color.text.black};
-        font-weight: ${theme.fontWeight.medium};
-        padding-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
-    }
-
-    &::before {
-        content: '';
-        transform: scale(0);
-        background-color: currentColor;
-    }
-
-    &:checked {
-        color: ${theme.color.default.pink};
-        border-color: ${theme.color.default.pink};
-
-        &::before {
-            transform: scale(1);
-        }
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        color: ${theme.color.text.gray};
-        background-color: ${theme.color.line.L02};
-        border-color: ${theme.color.line.L01};
-
-        & + label {
-            cursor: not-allowed;
-            color: ${theme.color.text.gray};
-        }
-    }
-
-    &:disabled:checked {
-        color: ${theme.color.default.pink}${theme.color.transparency.T30};
-        border-color: ${theme.color.default.pink}${theme.color.transparency.T30};
-        background-color: ${theme.color.background.white.default};
-    }
-`;
 createGlobalStyle `
     ${globalStyles}
 `;
 
-export { CheckboxAndRadioInputCore, globalStyles };
+export { globalStyles };