no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.11

package/lib-esm/components/Accordion/Accordion.d.ts

@@ -1,17 +1,12 @@
-import PropTypes from 'prop-types';
-declare function Accordion(props: AccordionProps & {
-    children: any;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Accordion {
-    var propTypes: {
-        /** Currently opened step */
-        active: PropTypes.Requireable<number>;
-        /** Handler for click event on a step */
-        onStepClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    var defaultProps: {
-        active: number;
-    };
-}
-type AccordionProps = PropTypes.InferProps<typeof Accordion.propTypes>;
+import { PropsWithChildren } from 'react';
+declare function Accordion(props: PropsWithChildren<AccordionProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+type AccordionProps = {
+    /**
+     * Currently opened step
+     * @default -1
+     */
+    active?: number;
+    /** Handler for click event on a step */
+    onStepClick?: (index: number) => void;
+};
 export default Accordion;

package/lib-esm/components/Accordion/Accordion.js

@@ -1,35 +1,31 @@
-import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useState, Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { useState, Children, isValidElement, cloneElement } from 'react';
+
 function Accordion(props) {
     const [active, setActive] = useState(props.active);
-    const onStepClick = (index, disabled) => () => {
-        if (disabled) {
-            return;
-        }
-        const newIndex = index !== active ? index : -1;
-        if (props.onStepClick) {
-            props.onStepClick(newIndex);
-        }
-        else {
-            setActive(newIndex);
-        }
-    };
-    return (_jsx(_Fragment, { children: Children.map(props.children, (child, index) => {
-            return cloneElement(child, {
+    const onStepClick = (index, disabled)=>()=>{
+            if (disabled) {
+                return;
+            }
+            const newIndex = index !== active ? index : -1;
+            if (props.onStepClick) {
+                props.onStepClick(newIndex);
+            } else {
+                setActive(newIndex);
+            }
+        };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: Children.map(props.children, (child, index)=>{
+            if (!/*#__PURE__*/ isValidElement(child)) {
+                return child;
+            }
+            return /*#__PURE__*/ cloneElement(child, {
                 open: active === index,
                 onStepClick: onStepClick(index, child.props.disabled)
             });
-        }) }));
+        })
+    });
 }
-Accordion.propTypes = {
-    /** Currently opened step */
-    active: PropTypes.number,
-    /** Handler for click event on a step */
-    onStepClick: PropTypes.func
-};
-Accordion.defaultProps = {
-    active: -1,
-};
-export default Accordion;
-//# sourceMappingURL=Accordion.js.map
+
+export { Accordion as default };
+//# sourceMappingURL=Accordion.js.map

package/lib-esm/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,SAAS,SAAS,CAAC,KAAyC;IACxD,MAAM,CAAE,MAAM,EAAE,SAAS,CAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAErD,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,QAAiB,EAAE,EAAE,CAAC,GAAG,EAAE;QAC3D,IAAI,QAAQ,EAAE,CAAC;YACX,OAAO;QACX,CAAC;QAED,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC9C,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACpB,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACJ,SAAS,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;IACL,CAAC,CAAA;IAED,OAAO,CACH,4BACC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3C,OAAO,YAAY,CAAC,KAAK,EAAE;gBACvB,IAAI,EAAE,MAAM,KAAK,KAAK;gBACtB,WAAW,EAAE,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACxD,CAAC,CAAC;QACP,CAAC,CAAC,GACC,CACN,CAAA;AACL,CAAC;AAID,SAAS,CAAC,SAAS,GAAG;IAClB,4BAA4B;IAC5B,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,wCAAwC;IACxC,WAAW,EAAE,SAAS,CAAC,IAAI;CAC9B,CAAA;AAED,SAAS,CAAC,YAAY,GAAG;IACrB,MAAM,EAAE,CAAC,CAAC;CACb,CAAA;AAGD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useState, Children, cloneElement, PropsWithChildren, isValidElement } from 'react';\n\nfunction Accordion(props: PropsWithChildren<AccordionProps>) {\n    const [active, setActive] = useState(props.active);\n\n    const onStepClick = (index: number, disabled: boolean) => () => {\n        if (disabled) {\n            return;\n        }\n\n        const newIndex = index !== active ? index : -1;\n        if (props.onStepClick) {\n            props.onStepClick(newIndex);\n        } else {\n            setActive(newIndex);\n        }\n    };\n\n    return (\n        <>\n            {Children.map(props.children, (child, index) => {\n                if (!isValidElement(child)) {\n                    return child;\n                }\n                return cloneElement(child, {\n                    open: active === index,\n                    onStepClick: onStepClick(index, child.props.disabled),\n                } as Partial<typeof child.props>);\n            })}\n        </>\n    );\n}\n\ntype AccordionProps = {\n    /**\n     * Currently opened step\n     * @default -1\n     */\n    active?: number;\n    /** Handler for click event on a step */\n    onStepClick?: (index: number) => void;\n};\n\nexport default Accordion;\n"],"names":["Accordion","props","active","setActive","useState","onStepClick","index","disabled","newIndex","_jsx","_Fragment","Children","map","children","child","isValidElement","cloneElement","open"],"mappings":";;;AAEA,SAASA,UAAUC,KAAwC,EAAA;AACvD,IAAA,MAAM,CAACC,MAAAA,EAAQC,SAAAA,CAAU,GAAGC,QAAAA,CAASH,MAAMC,MAAM,CAAA;IAEjD,MAAMG,WAAAA,GAAc,CAACC,KAAAA,EAAeC,QAAAA,GAAsB,IAAA;AACtD,YAAA,IAAIA,QAAAA,EAAU;AACV,gBAAA;AACJ,YAAA;AAEA,YAAA,MAAMC,QAAAA,GAAWF,KAAAA,KAAUJ,MAAAA,GAASI,KAAAA,GAAQ,EAAC;YAC7C,IAAIL,KAAAA,CAAMI,WAAW,EAAE;AACnBJ,gBAAAA,KAAAA,CAAMI,WAAW,CAACG,QAAAA,CAAAA;YACtB,CAAA,MAAO;gBACHL,SAAAA,CAAUK,QAAAA,CAAAA;AACd,YAAA;AACJ,QAAA,CAAA;IAEA,qBACIC,GAAA,CAAAC,QAAA,EAAA;AACKC,QAAAA,QAAAA,EAAAA,QAAAA,CAASC,GAAG,CAACX,KAAAA,CAAMY,QAAQ,EAAE,CAACC,KAAAA,EAAOR,KAAAA,GAAAA;YAClC,IAAI,eAACS,eAAeD,KAAAA,CAAAA,EAAQ;gBACxB,OAAOA,KAAAA;AACX,YAAA;AACA,YAAA,qBAAOE,aAAaF,KAAAA,EAAO;AACvBG,gBAAAA,IAAAA,EAAMf,MAAAA,KAAWI,KAAAA;AACjBD,gBAAAA,WAAAA,EAAaA,WAAAA,CAAYC,KAAAA,EAAOQ,KAAAA,CAAMb,KAAK,CAACM,QAAQ;AACxD,aAAA,CAAA;AACJ,QAAA,CAAA;;AAGZ;;;;"}

package/lib-esm/components/Accordion/AccordionStep.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare const AccordionStepBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -8,26 +7,27 @@ export declare const AccordionStepFooter: import("@emotion/styled").StyledCompon
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare function AccordionStep(props: React.PropsWithChildren<AccordionStepProps>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace AccordionStep {
-    var propTypes: {
-        /** Header text for the step */
-        header: PropTypes.Validator<string>;
-        /** Error text for the step */
-        errorText: PropTypes.Requireable<string>;
-        /** If steps has been marked as completed */
-        completed: PropTypes.Requireable<boolean>;
-        /** If the step is disabled */
-        disabled: PropTypes.Requireable<boolean>;
-    };
-    var defaultProps: {
-        completed: boolean;
-        disabled: boolean;
-    };
+/** Props for `AccordionStep` component */
+interface AccordionStepProps {
+    /**
+     * If the step has been marked as completed
+     * @default false
+     */
+    completed?: boolean;
+    /** If the step is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /** Header content for the step */
+    header: React.ReactNode;
+    /** Error text to display as a badge in the header */
+    errorText?: React.ReactNode;
+    /** If the step is expanded */
+    open?: boolean;
+    /** Click handler for the step header */
+    onStepClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
+declare const AccordionStep: React.ForwardRefExoticComponent<AccordionStepProps & {
+    children?: React.ReactNode | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default AccordionStep;
-type AccordionStepProps = PropTypes.InferProps<typeof AccordionStep.propTypes> & {
-    open: boolean;
-    completed: boolean;
-    onStepClick: () => void;
-};

package/lib-esm/components/Accordion/AccordionStep.js

@@ -1,113 +1,115 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState } from 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useState, useId, useRef, useEffect } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import PropTypes from 'prop-types';
-import { Card } from '../Card';
-import { Ellipsis } from '../../shared/styles';
-import { FiberManualRecord, ExpandMore } from '../../icons';
-import constants from '../../shared/constants';
-import { Badge, BADGE_TYPE } from '../Badge';
-const Step = styled(Card) `
-    transition: all .6s ease;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import { Ellipsis } from '../../shared/styles.js';
+import FiberManualRecord from '../../icons/FiberManualRecord.js';
+import Badge, { BADGE_TYPE } from '../Badge/Badge.js';
+import ExpandMore from '../../icons/ExpandMore.js';
+import Card from '../Card/Card.js';
 
-    ${props => props.open && `
-        margin: 20px 5px;
-    `}
-
-    ${props => props.focused && `box-shadow: 0 0 0 4px var(--primary-light, ${constants.PRIMARY_LIGHT});`}
-`;
-const StepHeader = styled.div `
-    padding: 20px 15px;
-    display: flex;
-    justify-content: space-between;
-    
-    & input {
-        appearance: none;
-        margin: 0;
-    }
-
-    ${props => props.open ? `
-        border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-    ` : ''}
-
-    ${props => props.disabled ? `
-        color: ${constants.LIGHT_GREY};
-    ` : `
-        cursor: pointer;
-    `}
-`;
-const HeaderContainer = styled.div `
-    display: flex;
-    align-items: center;
-    min-width: 40px;
-
-    & svg {
-        vertical-align: top;
-        margin-right: 10px;
-        fill: ${props => props.open
-    ? `var(--primary, ${constants.PRIMARY})`
-    : props.completed
-        ? `var(--success, ${constants.SUCCESS})`
-        : constants.LIGHT_GREY};
-        transform: ${props => props.open ? 'scale(0.8)' : 'scale(0.6)'};
-        transition: all .3s ease;
-        min-width: 24px;
-    }
-`;
-const ExpandContainer = styled.div `
-    display: flex;
-    align-items: center;
-
-    & svg {
-        vertical-align: top;
-        margin-right: 10px;
-        transition: all .6s ease;
-        fill: currentColor;
-    }
-
-    ${props => props.open ? `
-        & svg {
-            transform: rotate(180deg);
-        }
-    ` : ''}
-`;
-const StepBody = styled.div `
-    transition: all .6s ease;
-    overflow: hidden;
-    height: ${props => props.height || 0}px;
-`;
-export const AccordionStepBody = styled.div `
-    padding: 20px 15px;
-`;
-export const AccordionStepFooter = styled.div `
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px 15px;
-    border-top: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
-`;
-export default function AccordionStep(props) {
+const Step$1 = /*#__PURE__*/ styled(Card, {
+    target: "e9r63nq0",
+    label: "Step"
+})("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
+const StepHeader = /*#__PURE__*/ styled("button", {
+    target: "e9r63nq1",
+    label: "StepHeader"
+})("padding:20px 15px;display:flex;justify-content:space-between;background:none;border:none;border-radius:10px;width:100%;font-size:inherit;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:focus-visible{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}& input{appearance:none;margin:0;}", (props)=>props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`, " ", (props)=>props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`);
+const HeaderContainer = /*#__PURE__*/ styled("div", {
+    target: "e9r63nq2",
+    label: "HeaderContainer"
+})("display:flex;align-items:center;min-width:40px;& svg{vertical-align:top;margin-right:10px;fill:", (props)=>props.open ? getThemeValue(THEME_NAME.PRIMARY) : props.completed ? getThemeValue(THEME_NAME.SUCCESS) : getThemeValue(THEME_NAME.LIGHT_GREY), ";transform:", (props)=>props.open ? 'scale(0.8)' : 'scale(0.6)', ";transition:all 0.3s ease;min-width:24px;}");
+const ExpandContainer = /*#__PURE__*/ styled("div", {
+    target: "e9r63nq3",
+    label: "ExpandContainer"
+})("display:flex;align-items:center;& svg{vertical-align:top;margin-right:10px;transition:all 0.6s ease;fill:currentColor;}", (props)=>props.open ? `& svg { transform: rotate(180deg); }` : '');
+const StepBody = /*#__PURE__*/ styled("div", {
+    target: "e9r63nq4",
+    label: "StepBody"
+})("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
+const AccordionBadge = /*#__PURE__*/ styled(Badge, {
+    target: "e9r63nq5",
+    label: "AccordionBadge"
+})("margin-right:15px;");
+const AccordionStepBody = /*#__PURE__*/ styled("div", {
+    target: "e9r63nq6",
+    label: "AccordionStepBody"
+})("padding:20px 15px;");
+const AccordionStepFooter = /*#__PURE__*/ styled("div", {
+    target: "e9r63nq7",
+    label: "AccordionStepFooter"
+})("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
+function AccordionStepComponent(props, ref) {
     const [height, setHeight] = useState(0);
-    const [focused, setFocused] = useState(false);
-    const { open, disabled, header, errorText, completed, onStepClick } = props;
-    const ref = (el) => setHeight((el === null || el === void 0 ? void 0 : el.scrollHeight) || 0);
-    const toggleFocus = () => {
-        setFocused(!focused);
-    };
-    return (_jsxs(Step, Object.assign({}, props, { focused: focused, elevated: props.open, children: [_jsxs(StepHeader, { open: open, disabled: disabled, onClick: onStepClick, children: [_jsxs(HeaderContainer, { open: open, completed: completed, children: [_jsx("input", { type: 'checkbox', checked: open, disabled: disabled, onFocus: toggleFocus, onBlur: toggleFocus }), _jsx(FiberManualRecord, {}), _jsx(Ellipsis, { children: header })] }), _jsxs(ExpandContainer, { open: open, children: [errorText && _jsx(Badge, { css: css `margin-right: 15px;`, inline: true, type: BADGE_TYPE.DANGER, children: errorText }), _jsx(ExpandMore, {})] })] }), _jsx(StepBody, { ref: ref, height: open ? height : 0, children: open && props.children })] })));
+    const { open, disabled = false, header, errorText, completed = false, onStepClick, children, ...restProps } = props;
+    // Generate unique IDs for ARIA relationships
+    const headerId = useId();
+    const regionId = useId();
+    const contentRef = useRef(null);
+    // Measure content height when `open` or children change.
+    useEffect(()=>{
+        const el = contentRef.current;
+        setHeight(el?.scrollHeight || 0);
+    }, [
+        open,
+        children
+    ]);
+    return /*#__PURE__*/ jsxs(Step$1, {
+        ...restProps,
+        ref: ref,
+        open: open,
+        elevated: open,
+        completed: completed,
+        children: [
+            /*#__PURE__*/ jsxs(StepHeader, {
+                open: open,
+                disabled: disabled,
+                onClick: onStepClick,
+                "aria-expanded": open ? 'true' : 'false',
+                "aria-controls": regionId,
+                id: headerId,
+                children: [
+                    /*#__PURE__*/ jsxs(HeaderContainer, {
+                        open: open,
+                        completed: completed,
+                        children: [
+                            /*#__PURE__*/ jsx(FiberManualRecord, {
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ jsx(Ellipsis, {
+                                children: header
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(ExpandContainer, {
+                        open: open,
+                        children: [
+                            errorText && /*#__PURE__*/ jsx(AccordionBadge, {
+                                inline: true,
+                                type: BADGE_TYPE.DANGER,
+                                children: errorText
+                            }),
+                            /*#__PURE__*/ jsx(ExpandMore, {
+                                "aria-hidden": "true"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(StepBody, {
+                ref: contentRef,
+                height: open ? height : 0,
+                role: "region",
+                id: regionId,
+                "aria-labelledby": headerId,
+                "aria-hidden": open ? 'false' : 'true',
+                children: open && children
+            })
+        ]
+    });
 }
-AccordionStep.propTypes = {
-    /** Header text for the step */
-    header: PropTypes.string.isRequired,
-    /** Error text for the step */
-    errorText: PropTypes.string,
-    /** If steps has been marked as completed */
-    completed: PropTypes.bool,
-    /** If the step is disabled */
-    disabled: PropTypes.bool,
-};
-AccordionStep.defaultProps = {
-    completed: false,
-    disabled: false
-};
-//# sourceMappingURL=AccordionStep.js.map
+const AccordionStep = /*#__PURE__*/ React.forwardRef(AccordionStepComponent);
+
+export { AccordionStepBody, AccordionStepFooter, AccordionStep as default };
+//# sourceMappingURL=AccordionStep.js.map

package/lib-esm/components/Accordion/AccordionStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionStep.js","sourceRoot":"","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccordionStep.js","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"sourcesContent":["import React, { useState, useId, useRef, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { FiberManualRecord, ExpandMore } from '../../icons';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\nimport { Card } from '../Card';\n\nconst Step = styled(Card)<{ open?: boolean; completed?: boolean }>`\n    transition: all 0.6s ease;\n    overflow: visible;\n\n    ${(props) => props.open && `margin: 20px 5px;`}\n`;\n\nconst StepHeader = styled.button<{ open?: boolean; disabled?: boolean }>`\n    padding: 20px 15px;\n    display: flex;\n    justify-content: space-between;\n    background: none;\n    border: none;\n    border-radius: 10px;\n    width: 100%;\n    font-size: inherit;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:focus-visible {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    & input {\n        appearance: none;\n        margin: 0;\n    }\n\n    ${(props) =>\n        props.open && `border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};`}\n\n    ${(props) => props.disabled && `color: ${getThemeValue(THEME_NAME.DISABLED)};`}\n`;\n\nconst HeaderContainer = styled.div<{ open?: boolean; completed?: boolean }>`\n    display: flex;\n    align-items: center;\n    min-width: 40px;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        fill: ${(props) =>\n            props.open\n                ? getThemeValue(THEME_NAME.PRIMARY)\n                : props.completed\n                  ? getThemeValue(THEME_NAME.SUCCESS)\n                  : getThemeValue(THEME_NAME.LIGHT_GREY)};\n        transform: ${(props) => (props.open ? 'scale(0.8)' : 'scale(0.6)')};\n        transition: all 0.3s ease;\n        min-width: 24px;\n    }\n`;\n\nconst ExpandContainer = styled.div<{ open?: boolean }>`\n    display: flex;\n    align-items: center;\n\n    & svg {\n        vertical-align: top;\n        margin-right: 10px;\n        transition: all 0.6s ease;\n        fill: currentColor;\n    }\n\n    ${(props) => (props.open ? `& svg { transform: rotate(180deg); }` : '')}\n`;\n\nconst StepBody = styled.div<{ height: number }>`\n    transition: all 0.6s ease;\n    overflow: hidden;\n    height: ${(props) => props.height || 0}px;\n`;\n\nconst AccordionBadge = styled(Badge)`\n    margin-right: 15px;\n`;\n\nexport const AccordionStepBody = styled.div`\n    padding: 20px 15px;\n`;\n\nexport const AccordionStepFooter = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    padding: 10px 15px;\n    border-top: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n`;\n\n/** Props for `AccordionStep` component */\ninterface AccordionStepProps {\n    /**\n     * If the step has been marked as completed\n     * @default false\n     */\n    completed?: boolean;\n    /** If the step is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /** Header content for the step */\n    header: React.ReactNode;\n    /** Error text to display as a badge in the header */\n    errorText?: React.ReactNode;\n    /** If the step is expanded */\n    open?: boolean;\n    /** Click handler for the step header */\n    onStepClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nfunction AccordionStepComponent(\n    props: React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>,\n    ref: React.Ref<HTMLDivElement>,\n) {\n    const [height, setHeight] = useState(0);\n    const {\n        open,\n        disabled = false,\n        header,\n        errorText,\n        completed = false,\n        onStepClick,\n        children,\n        ...restProps\n    } = props;\n\n    // Generate unique IDs for ARIA relationships\n    const headerId = useId();\n    const regionId = useId();\n\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    // Measure content height when `open` or children change.\n    useEffect(() => {\n        const el = contentRef.current;\n        setHeight(el?.scrollHeight || 0);\n    }, [open, children]);\n\n    return (\n        <Step {...restProps} ref={ref} open={open} elevated={open} completed={completed}>\n            <StepHeader\n                open={open}\n                disabled={disabled}\n                onClick={onStepClick}\n                aria-expanded={open ? 'true' : 'false'}\n                aria-controls={regionId}\n                id={headerId}\n            >\n                <HeaderContainer open={open} completed={completed}>\n                    <FiberManualRecord aria-hidden=\"true\" />\n                    <Ellipsis>{header}</Ellipsis>\n                </HeaderContainer>\n                <ExpandContainer open={open}>\n                    {errorText && (\n                        <AccordionBadge inline type={BADGE_TYPE.DANGER}>\n                            {errorText}\n                        </AccordionBadge>\n                    )}\n                    <ExpandMore aria-hidden=\"true\" />\n                </ExpandContainer>\n            </StepHeader>\n            <StepBody\n                ref={contentRef}\n                height={open ? height : 0}\n                role=\"region\"\n                id={regionId}\n                aria-labelledby={headerId}\n                aria-hidden={open ? 'false' : 'true'}\n            >\n                {open && children}\n            </StepBody>\n        </Step>\n    );\n}\n\nconst AccordionStep = React.forwardRef<\n    HTMLDivElement,\n    React.PropsWithChildren<AccordionStepProps> & React.HTMLAttributes<HTMLDivElement>\n>(AccordionStepComponent);\n\nexport default AccordionStep;\n"],"names":["Step","styled","Card","props","open","StepHeader","getThemeValue","THEME_NAME","TEXT_COLOR_DARK","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","disabled","DISABLED","HeaderContainer","PRIMARY","completed","SUCCESS","LIGHT_GREY","ExpandContainer","StepBody","height","AccordionBadge","Badge","AccordionStepBody","AccordionStepFooter","AccordionStepComponent","ref","setHeight","useState","header","errorText","onStepClick","children","restProps","headerId","useId","regionId","contentRef","useRef","useEffect","el","current","scrollHeight","_jsxs","elevated","onClick","aria-expanded","aria-controls","id","_jsx","FiberManualRecord","aria-hidden","Ellipsis","inline","type","BADGE_TYPE","DANGER","ExpandMore","role","aria-labelledby","AccordionStep","React","forwardRef"],"mappings":"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"}

package/lib-esm/components/Badge/Badge.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare enum BADGE_TYPE {
     PRIMARY = "primary",
     SUCCESS = "success",
@@ -7,19 +6,17 @@ export declare enum BADGE_TYPE {
     DANGER = "danger",
     DISABLED = "disabled"
 }
-type BadgeProps = React.PropsWithChildren<PropTypes.InferProps<typeof Badge.propTypes>>;
-declare function Badge(props: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Badge {
-    var propTypes: {
-        /** Display badge inline or overlay on parent component */
-        inline: PropTypes.Requireable<boolean>;
-        /** Type of badge */
-        type: PropTypes.Requireable<BADGE_TYPE>;
-        css: PropTypes.Requireable<any>;
-    };
-    var defaultProps: {
-        inline: boolean;
-        type: BADGE_TYPE;
-    };
-}
+declare const Badge: React.ForwardRefExoticComponent<{
+    /**
+     * Display badge inline or overlay on parent component
+     * @default false
+     */
+    inline?: boolean;
+    /** Type of badge
+     * @default BADGE_TYPE.PRIMARY
+     */
+    type?: BADGE_TYPE;
+} & React.HTMLAttributes<HTMLSpanElement> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/lib-esm/components/Badge/Badge.js

@@ -1,60 +1,40 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import constants from '../../shared/constants';
-export var BADGE_TYPE;
-(function (BADGE_TYPE) {
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+
+var BADGE_TYPE = /*#__PURE__*/ function(BADGE_TYPE) {
     BADGE_TYPE["PRIMARY"] = "primary";
     BADGE_TYPE["SUCCESS"] = "success";
     BADGE_TYPE["WARNING"] = "warning";
     BADGE_TYPE["DANGER"] = "danger";
     BADGE_TYPE["DISABLED"] = "disabled";
-})(BADGE_TYPE || (BADGE_TYPE = {}));
-const BadgeSpan = styled.span `
-    background-color: ${props => {
-    switch (props.type) {
-        case BADGE_TYPE.SUCCESS:
-            return `var(--success, ${constants.SUCCESS})`;
-        case BADGE_TYPE.WARNING:
-            return `var(--info, ${constants.WARNING})`;
-        case BADGE_TYPE.DANGER:
-            return `var(--error, ${constants.ERROR})`;
-        case BADGE_TYPE.DISABLED:
-            return `var(--disabled, ${constants.DISABLED})`;
+    return BADGE_TYPE;
+}({});
+const BadgeSpan = /*#__PURE__*/ styled("span", {
+    target: "e1px9hio0",
+    label: "BadgeSpan"
+})("background-color:", (props)=>{
+    switch(props.type){
+        case "success":
+            return getThemeValue(THEME_NAME.SUCCESS);
+        case "warning":
+            return getThemeValue(THEME_NAME.WARNING);
+        case "danger":
+            return getThemeValue(THEME_NAME.ERROR);
+        case "disabled":
+            return getThemeValue(THEME_NAME.DISABLED);
         default:
-            return `var(--primary, ${constants.PRIMARY})`;
+            return getThemeValue(THEME_NAME.PRIMARY);
     }
-}};
-    color: #fff;
-    border-radius: 10px;
-    padding: ${props => props.children ? '3px 10px' : '4px'};
-    display: inline-block;
-    min-height: 4px;
-    min-width: 4px;
-    font-size: 12px;
-    margin: ${props => props.inline ? '0 5px' : '0'};
-
-    ${props => !props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);'};
-`;
-export default function Badge(props) {
-    return _jsx(BadgeSpan, Object.assign({}, props));
+}, ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:10px;padding:", (props)=>props.children ? '3px 10px' : '4px', ";display:inline-block;min-height:4px;min-width:4px;font-size:12px;margin:", (props)=>props.inline ? '0 5px' : '0', ";", (props)=>!props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);', ";");
+function BadgeComponent(props, ref) {
+    return /*#__PURE__*/ jsx(BadgeSpan, {
+        ...props,
+        ref: ref
+    });
 }
-;
-Badge.propTypes = {
-    /** Display badge inline or overlay on parent component */
-    inline: PropTypes.bool,
-    /** Type of badge */
-    type: PropTypes.oneOf([
-        BADGE_TYPE.PRIMARY,
-        BADGE_TYPE.SUCCESS,
-        BADGE_TYPE.WARNING,
-        BADGE_TYPE.DANGER,
-        BADGE_TYPE.DISABLED,
-    ]),
-    css: PropTypes.any,
-};
-Badge.defaultProps = {
-    inline: false,
-    type: BADGE_TYPE.PRIMARY,
-};
-//# sourceMappingURL=Badge.js.map
+const Badge = /*#__PURE__*/ React.forwardRef(BadgeComponent);
+
+export { BADGE_TYPE, Badge as default };
+//# sourceMappingURL=Badge.js.map

package/lib-esm/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,CAAN,IAAY,UAMX;AAND,WAAY,UAAU;IAClB,iCAAiB,CAAA;IACjB,iCAAiB,CAAA;IACjB,iCAAiB,CAAA;IACjB,+BAAe,CAAA;IACf,mCAAmB,CAAA;AACvB,CAAC,EANW,UAAU,KAAV,UAAU,QAMrB;AAID,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAY;wBACjB,KAAK,CAAC,EAAE;IACxB,QAAO,KAAK,CAAC,IAAI,EAAE,CAAC;QAChB,KAAK,UAAU,CAAC,OAAO;YACnB,OAAO,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC;QAElD,KAAK,UAAU,CAAC,OAAO;YACnB,OAAO,eAAe,SAAS,CAAC,OAAO,GAAG,CAAC;QAE/C,KAAK,UAAU,CAAC,MAAM;YAClB,OAAO,gBAAgB,SAAS,CAAC,KAAK,GAAG,CAAC;QAE9C,KAAK,UAAU,CAAC,QAAQ;YACpB,OAAO,mBAAmB,SAAS,CAAC,QAAQ,GAAG,CAAC;QAEpD;YACI,OAAO,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC;IACtD,CAAC;AACL,CAAC;;;eAGU,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK;;;;;cAK7C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;;MAE7C,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,IAAI,wEAAwE;CACvG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAiB;IAC3C,OAAO,KAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;AACpC,CAAC;AAAA,CAAC;AAEF,KAAK,CAAC,SAAS,GAAG;IACd,0DAA0D;IAC1D,MAAM,EAAE,SAAS,CAAC,IAAI;IACtB,oBAAoB;IACpB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;QAClB,UAAU,CAAC,OAAO;QAClB,UAAU,CAAC,OAAO;QAClB,UAAU,CAAC,OAAO;QAClB,UAAU,CAAC,MAAM;QACjB,UAAU,CAAC,QAAQ;KACtB,CAAC;IACF,GAAG,EAAE,SAAS,CAAC,GAAG;CACrB,CAAA;AAED,KAAK,CAAC,YAAY,GAAG;IACjB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,UAAU,CAAC,OAAO;CAC3B,CAAA"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\nexport enum BADGE_TYPE {\n    PRIMARY = 'primary',\n    SUCCESS = 'success',\n    WARNING = 'warning',\n    DANGER = 'danger',\n    DISABLED = 'disabled',\n}\n\nconst BadgeSpan = styled.span<BadgeProps>`\n    background-color: ${(props) => {\n        switch (props.type) {\n            case BADGE_TYPE.SUCCESS:\n                return getThemeValue(THEME_NAME.SUCCESS);\n\n            case BADGE_TYPE.WARNING:\n                return getThemeValue(THEME_NAME.WARNING);\n\n            case BADGE_TYPE.DANGER:\n                return getThemeValue(THEME_NAME.ERROR);\n\n            case BADGE_TYPE.DISABLED:\n                return getThemeValue(THEME_NAME.DISABLED);\n\n            default:\n                return getThemeValue(THEME_NAME.PRIMARY);\n        }\n    }};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 10px;\n    padding: ${(props) => (props.children ? '3px 10px' : '4px')};\n    display: inline-block;\n    min-height: 4px;\n    min-width: 4px;\n    font-size: 12px;\n    margin: ${(props) => (props.inline ? '0 5px' : '0')};\n\n    ${(props) =>\n        !props.inline && 'position: absolute; top: 0; right: 0; transform: translate(50%, -50%);'};\n`;\n\ntype BadgeProps = {\n    /**\n     * Display badge inline or overlay on parent component\n     * @default false\n     */\n    inline?: boolean;\n    /** Type of badge\n     * @default BADGE_TYPE.PRIMARY\n     */\n    type?: BADGE_TYPE;\n} & React.HTMLAttributes<HTMLSpanElement>;\n\nfunction BadgeComponent(props: BadgeProps, ref: React.Ref<HTMLSpanElement>) {\n    return <BadgeSpan {...props} ref={ref} />;\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, React.PropsWithChildren<BadgeProps>>(\n    BadgeComponent,\n);\n\nexport default Badge;\n"],"names":["BADGE_TYPE","BadgeSpan","styled","props","type","getThemeValue","THEME_NAME","SUCCESS","WARNING","ERROR","DISABLED","PRIMARY","TEXT_COLOR_LIGHT","children","inline","BadgeComponent","ref","_jsx","Badge","React","forwardRef"],"mappings":";;;;;AAIO,IAAA,UAAKA,iBAAAA,SAAAA,UAAAA,EAAAA;;;;;;AAAAA,IAAAA,OAAAA,UAAAA;AAMX,CAAA,CAAA,EAAA;AAED,MAAMC,SAAAA,iBAAYC,MAAAA,CAAAA,MAAAA,EAAAA;;;wBACM,CAACC,KAAAA,GAAAA;AACjB,IAAA,OAAQA,MAAMC,IAAI;AACd,QAAA,KAAA,SAAA;YACI,OAAOC,aAAAA,CAAcC,WAAWC,OAAO,CAAA;AAE3C,QAAA,KAAA,SAAA;YACI,OAAOF,aAAAA,CAAcC,WAAWE,OAAO,CAAA;AAE3C,QAAA,KAAA,QAAA;YACI,OAAOH,aAAAA,CAAcC,WAAWG,KAAK,CAAA;AAEzC,QAAA,KAAA,UAAA;YACI,OAAOJ,aAAAA,CAAcC,WAAWI,QAAQ,CAAA;AAE5C,QAAA;YACI,OAAOL,aAAAA,CAAcC,WAAWK,OAAO,CAAA;AAC/C;AACJ,CAAA,EAAA,SAAA,EACSN,aAAAA,CAAcC,WAAWM,gBAAgB,CAAA,EAAA,8BAAA,EAEvC,CAACT,KAAAA,GAAWA,KAAAA,CAAMU,QAAQ,GAAG,UAAA,GAAa,KAAA,EAAA,2EAAA,EAK3C,CAACV,KAAAA,GAAWA,KAAAA,CAAMW,MAAM,GAAG,OAAA,GAAU,GAAA,EAAA,GAAA,EAE7C,CAACX,KAAAA,GACC,CAACA,KAAAA,CAAMW,MAAM,IAAI,wEAAA,EAAA,GAAA,CAAA;AAezB,SAASC,cAAAA,CAAeZ,KAAiB,EAAEa,GAA+B,EAAA;AACtE,IAAA,qBAAOC,GAAA,CAAChB,SAAAA,EAAAA;AAAW,QAAA,GAAGE,KAAK;QAAEa,GAAAA,EAAKA;;AACtC;AAEA,MAAME,KAAAA,iBAAQC,KAAAA,CAAMC,UAAU,CAC1BL,cAAAA;;;;"}

package/lib-esm/components/Button/ActionButton.d.ts

@@ -1,5 +1,9 @@
-declare const _default: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export default _default;
+import React from 'react';
+declare const ActionButton: React.ForwardRefExoticComponent<{
+    /**
+     * Type of Action Button
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default ActionButton;