no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.0

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

@@ -1,16 +1,12 @@
 import { PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
 declare function Accordion(props: PropsWithChildren<AccordionProps>): 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>;
+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,6 +1,5 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useState, Children, isValidElement, cloneElement } from 'react';
-import PropTypes from 'prop-types';
 
 function Accordion(props) {
     const [active, setActive] = useState(props.active);
@@ -20,20 +19,14 @@ function Accordion(props) {
             if (!/*#__PURE__*/ isValidElement(child)) {
                 return child;
             }
-            return /*#__PURE__*/ cloneElement(child, {
+            const reactElement = child;
+            return /*#__PURE__*/ cloneElement(reactElement, {
                 open: active === index,
-                onStepClick: onStepClick(index, child.props.disabled)
+                onStepClick: onStepClick(index, reactElement.props.disabled || false)
             });
         })
     });
 }
-Accordion.propTypes = {
-    /** Currently opened step */ active: PropTypes.number,
-    /** Handler for click event on a step */ onStepClick: PropTypes.func
-};
-Accordion.defaultProps = {
-    active: -1
-};
 
 export { Accordion as default };
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useState, Children, cloneElement, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\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 = PropTypes.InferProps<typeof Accordion.propTypes>;\n\nAccordion.propTypes = {\n    /** Currently opened step */\n    active: PropTypes.number,\n    /** Handler for click event on a step */\n    onStepClick: PropTypes.func,\n};\n\nAccordion.defaultProps = {\n    active: -1,\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","propTypes","PropTypes","number","func","defaultProps"],"mappings":";;;;AAGA,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;AAIAP,SAAAA,CAAUkB,SAAS,GAAG;iCAElBhB,MAAAA,EAAQiB,SAAAA,CAAUC,MAAM;6CAExBf,WAAAA,EAAac,SAAAA,CAAUE;AAC3B,CAAA;AAEArB,SAAAA,CAAUsB,YAAY,GAAG;AACrBpB,IAAAA,MAAAA,EAAQ;AACZ,CAAA;;;;"}
+{"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                const reactElement = child as React.ReactElement<{\n                    disabled?: boolean;\n                    open?: boolean;\n                    onStepClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n                }>;\n                return cloneElement(reactElement, {\n                    open: active === index,\n                    onStepClick: onStepClick(index, reactElement.props.disabled || false),\n                });\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","reactElement","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,MAAME,YAAAA,GAAeF,KAAAA;AAKrB,YAAA,qBAAOG,aAAaD,YAAAA,EAAc;AAC9BE,gBAAAA,IAAAA,EAAMhB,MAAAA,KAAWI,KAAAA;AACjBD,gBAAAA,WAAAA,EAAaA,YAAYC,KAAAA,EAAOU,YAAAA,CAAaf,KAAK,CAACM,QAAQ,IAAI,KAAA;AACnE,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,7 +1,5 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { useState, useId } from 'react';
-import PropTypes from 'prop-types';
-import { css } from '@emotion/react';
+import React, { useState, useId, useRef, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import { Ellipsis } from '../../shared/styles.js';
@@ -10,43 +8,60 @@ import Badge, { BADGE_TYPE } from '../Badge/Badge.js';
 import ExpandMore from '../../icons/ExpandMore.js';
 import Card from '../Card/Card.js';
 
-const Step = /*#__PURE__*/ styled(Card, {
-    target: "e3zsr580",
+const Step$1 = /*#__PURE__*/ styled(Card, {
+    target: "e14f46gi0",
     label: "Step"
 })("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e3zsr581",
+    target: "e14f46gi1",
     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: "e3zsr582",
+    target: "e14f46gi2",
     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: "e3zsr583",
+    target: "e14f46gi3",
     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: "e3zsr584",
+    target: "e14f46gi4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
+const AccordionBadge = /*#__PURE__*/ styled(Badge, {
+    target: "e14f46gi5",
+    label: "AccordionBadge"
+})("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e3zsr585",
+    target: "e14f46gi6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e3zsr586",
+    target: "e14f46gi7",
     label: "AccordionStepFooter"
 })("display:flex;justify-content:flex-end;padding:10px 15px;border-top:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";");
-function AccordionStep(props) {
+/**
+ * AccordionStep Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function AccordionStepComponent(props, ref) {
     const [height, setHeight] = useState(0);
-    const { open, disabled, header, errorText, completed, onStepClick, children, ...restProps } = props;
+    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 ref = (el)=>setHeight(el?.scrollHeight || 0);
-    return /*#__PURE__*/ jsxs(Step, {
+    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,
@@ -74,8 +89,7 @@ function AccordionStep(props) {
                     /*#__PURE__*/ jsxs(ExpandContainer, {
                         open: open,
                         children: [
-                            errorText && /*#__PURE__*/ jsx(Badge, {
-                                css: /*#__PURE__*/ css("margin-right:15px;", "ref"),
+                            errorText && /*#__PURE__*/ jsx(AccordionBadge, {
                                 inline: true,
                                 type: BADGE_TYPE.DANGER,
                                 children: errorText
@@ -88,7 +102,7 @@ function AccordionStep(props) {
                 ]
             }),
             /*#__PURE__*/ jsx(StepBody, {
-                ref: ref,
+                ref: contentRef,
                 height: open ? height : 0,
                 role: "region",
                 id: regionId,
@@ -99,16 +113,7 @@ function AccordionStep(props) {
         ]
     });
 }
-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
-};
+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","sources":["../../../src/components/Accordion/AccordionStep.tsx"],"sourcesContent":["import React, { useState, useId } from 'react';\nimport PropTypes from 'prop-types';\nimport { css } from '@emotion/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)<AccordionStepProps>`\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\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\nexport default function AccordionStep(props: React.PropsWithChildren<AccordionStepProps>) {\n    const [height, setHeight] = useState(0);\n    const { open, disabled, header, errorText, completed, onStepClick, children, ...restProps } =\n        props;\n\n    // Generate unique IDs for ARIA relationships\n    const headerId = useId();\n    const regionId = useId();\n\n    const ref = (el?: HTMLDivElement) => setHeight(el?.scrollHeight || 0);\n\n    return (\n        <Step {...restProps} 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                        <Badge\n                            css={css`\n                                margin-right: 15px;\n                            `}\n                            inline\n                            type={BADGE_TYPE.DANGER}\n                        >\n                            {errorText}\n                        </Badge>\n                    )}\n                    <ExpandMore aria-hidden=\"true\" />\n                </ExpandContainer>\n            </StepHeader>\n            <StepBody\n                ref={ref}\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\nAccordionStep.propTypes = {\n    /** Header text for the step */\n    header: PropTypes.string.isRequired,\n    /** Error text for the step */\n    errorText: PropTypes.string,\n    /** If steps has been marked as completed */\n    completed: PropTypes.bool,\n    /** If the step is disabled */\n    disabled: PropTypes.bool,\n};\n\nAccordionStep.defaultProps = {\n    completed: false,\n    disabled: false,\n};\n\ntype AccordionStepProps = PropTypes.InferProps<typeof AccordionStep.propTypes> & {\n    open?: boolean;\n    completed: boolean;\n    onStepClick?: () => void;\n};\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","AccordionStepBody","AccordionStepFooter","AccordionStep","setHeight","useState","header","errorText","onStepClick","children","restProps","headerId","useId","regionId","ref","el","scrollHeight","_jsxs","elevated","onClick","aria-expanded","aria-controls","id","_jsx","FiberManualRecord","aria-hidden","Ellipsis","Badge","css","inline","type","BADGE_TYPE","DANGER","ExpandMore","role","aria-labelledby","propTypes","PropTypes","string","isRequired","bool","defaultProps"],"mappings":";;;;;;;;;;;;AAUA,MAAMA,qBAAOC,MAAAA,CAAOC,IAAAA,EAAAA;;;AAId,CAAA,CAAA,CAAA,4CAAA,EAAA,CAACC,QAAUA,KAAAA,CAAMC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAA;AAGlD,MAAMC,UAAAA,iBAAaJ,MAAAA,CAAAA,QAAAA,EAAAA;;;AASNK,CAAAA,CAAAA,CAAAA,iJAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,eAAe,CAAA,EAAA,wCAAA,EAGrBF,aAAAA,CAAcC,WAAWE,aAAa,CAAA,EAAA,sCAAA,EAQhE,CAACN,KAAAA,GACCA,MAAMC,IAAI,IAAI,CAAC,yBAAyB,EAAEE,aAAAA,CAAcC,UAAAA,CAAWG,kBAAkB,CAAA,CAAE,CAAC,CAAC,EAAA,GAAA,EAE3F,CAACP,KAAAA,GAAUA,MAAMQ,QAAQ,IAAI,CAAC,OAAO,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,QAAQ,CAAA,CAAE,CAAC,CAAC,CAAA;AAGlF,MAAMC,eAAAA,iBAAkBZ,MAAAA,CAAAA,KAAAA,EAAAA;;;sGAQR,CAACE,KAAAA,GACLA,KAAAA,CAAMC,IAAI,GACJE,aAAAA,CAAcC,WAAWO,OAAO,CAAA,GAChCX,KAAAA,CAAMY,SAAS,GACbT,aAAAA,CAAcC,WAAWS,OAAO,CAAA,GAChCV,aAAAA,CAAcC,UAAAA,CAAWU,UAAU,CAAA,EAAA,aAAA,EAClC,CAACd,KAAAA,GAAWA,KAAAA,CAAMC,IAAI,GAAG,YAAA,GAAe,YAAA,EAAA,4CAAA,CAAA;AAM7D,MAAMc,eAAAA,iBAAkBjB,MAAAA,CAAAA,KAAAA,EAAAA;;;AAWlB,CAAA,CAAA,CAAA,yHAAA,EAAA,CAACE,QAAWA,KAAAA,CAAMC,IAAI,GAAG,CAAC,oCAAoC,CAAC,GAAG,EAAA,CAAA;AAGxE,MAAMe,QAAAA,iBAAWlB,MAAAA,CAAAA,KAAAA,EAAAA;;;uDAGH,CAACE,KAAAA,GAAUA,KAAAA,CAAMiB,MAAM,IAAI,CAAA,EAAA,KAAA,CAAA;MAG5BC,iBAAAA,iBAAoBpB,MAAAA,CAAAA,KAAAA,EAAAA;;;AAE/B,CAAA,CAAA,CAAA,oBAAA;MAEWqB,mBAAAA,iBAAsBrB,MAAAA,CAAAA,KAAAA,EAAAA;;;oFAIPK,aAAAA,CAAcC,UAAAA,CAAWG,kBAAkB,CAAA,EAAA,GAAA;AAGxD,SAASa,cAAcpB,KAAkD,EAAA;AACpF,IAAA,MAAM,CAACiB,MAAAA,EAAQI,SAAAA,CAAU,GAAGC,QAAAA,CAAS,CAAA,CAAA;AACrC,IAAA,MAAM,EAAErB,IAAI,EAAEO,QAAQ,EAAEe,MAAM,EAAEC,SAAS,EAAEZ,SAAS,EAAEa,WAAW,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GACvF3B,KAAAA;;AAGJ,IAAA,MAAM4B,QAAAA,GAAWC,KAAAA,EAAAA;AACjB,IAAA,MAAMC,QAAAA,GAAWD,KAAAA,EAAAA;AAEjB,IAAA,MAAME,GAAAA,GAAM,CAACC,EAAAA,GAAwBX,SAAAA,CAAUW,IAAIC,YAAAA,IAAgB,CAAA,CAAA;AAEnE,IAAA,qBACIC,IAAA,CAACrC,IAAAA,EAAAA;AAAM,QAAA,GAAG8B,SAAS;QAAE1B,IAAAA,EAAMA,IAAAA;QAAMkC,QAAAA,EAAUlC,IAAAA;QAAMW,SAAAA,EAAWA,SAAAA;;0BACxDsB,IAAA,CAAChC,UAAAA,EAAAA;gBACGD,IAAAA,EAAMA,IAAAA;gBACNO,QAAAA,EAAUA,QAAAA;gBACV4B,OAAAA,EAASX,WAAAA;AACTY,gBAAAA,eAAAA,EAAepC,OAAO,MAAA,GAAS,OAAA;gBAC/BqC,eAAAA,EAAeR,QAAAA;gBACfS,EAAAA,EAAIX,QAAAA;;kCAEJM,IAAA,CAACxB,eAAAA,EAAAA;wBAAgBT,IAAAA,EAAMA,IAAAA;wBAAMW,SAAAA,EAAWA,SAAAA;;0CACpC4B,GAAA,CAACC,iBAAAA,EAAAA;gCAAkBC,aAAAA,EAAY;;0CAC/BF,GAAA,CAACG,QAAAA,EAAAA;AAAUpB,gCAAAA,QAAAA,EAAAA;;;;kCAEfW,IAAA,CAACnB,eAAAA,EAAAA;wBAAgBd,IAAAA,EAAMA,IAAAA;;AAClBuB,4BAAAA,SAAAA,kBACGgB,GAAA,CAACI,KAAAA,EAAAA;AACGC,gCAAAA,GAAG,gBAAEA,GAAAA,CAAAA,oBAAAA,EAAAA,KAAAA,CAAAA;gCAGLC,MAAM,EAAA,IAAA;AACNC,gCAAAA,IAAAA,EAAMC,WAAWC,MAAM;AAEtBzB,gCAAAA,QAAAA,EAAAA;;0CAGTgB,GAAA,CAACU,UAAAA,EAAAA;gCAAWR,aAAAA,EAAY;;;;;;0BAGhCF,GAAA,CAACxB,QAAAA,EAAAA;gBACGe,GAAAA,EAAKA,GAAAA;AACLd,gBAAAA,MAAAA,EAAQhB,OAAOgB,MAAAA,GAAS,CAAA;gBACxBkC,IAAAA,EAAK,QAAA;gBACLZ,EAAAA,EAAIT,QAAAA;gBACJsB,iBAAAA,EAAiBxB,QAAAA;AACjBc,gBAAAA,aAAAA,EAAazC,OAAO,OAAA,GAAU,MAAA;0BAE7BA,IAAAA,IAAQyB;;;;AAIzB;AAEAN,aAAAA,CAAciC,SAAS,GAAG;AACtB,oCACA9B,MAAAA,EAAQ+B,SAAAA,CAAUC,MAAM,CAACC,UAAU;mCAEnChC,SAAAA,EAAW8B,SAAAA,CAAUC,MAAM;iDAE3B3C,SAAAA,EAAW0C,SAAAA,CAAUG,IAAI;mCAEzBjD,QAAAA,EAAU8C,SAAAA,CAAUG;AACxB,CAAA;AAEArC,aAAAA,CAAcsC,YAAY,GAAG;IACzB9C,SAAAA,EAAW,KAAA;IACXJ,QAAAA,EAAU;AACd,CAAA;;;;"}
+{"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\n/**\n * AccordionStep Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\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,6 +1,5 @@
 import { jsx } from '@emotion/react/jsx-runtime';
-import 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
@@ -13,7 +12,7 @@ var BADGE_TYPE = /*#__PURE__*/ function(BADGE_TYPE) {
     return BADGE_TYPE;
 }({});
 const BadgeSpan = /*#__PURE__*/ styled("span", {
-    target: "e5vd1rw0",
+    target: "e1aaenck0",
     label: "BadgeSpan"
 })("background-color:", (props)=>{
     switch(props.type){
@@ -29,26 +28,17 @@ const BadgeSpan = /*#__PURE__*/ styled("span", {
             return getThemeValue(THEME_NAME.PRIMARY);
     }
 }, ";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 Badge(props) {
+/**
+ * Badge Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function BadgeComponent(props, ref) {
     return /*#__PURE__*/ jsx(BadgeSpan, {
-        ...props
+        ...props,
+        ref: ref
     });
 }
-Badge.propTypes = {
-    /** Display badge inline or overlay on parent component */ inline: PropTypes.bool,
-    /** Type of badge */ type: PropTypes.oneOf([
-        "primary",
-        "success",
-        "warning",
-        "danger",
-        "disabled"
-    ]),
-    css: PropTypes.any
-};
-Badge.defaultProps = {
-    inline: false,
-    type: "primary"
-};
+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","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\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\ntype BadgeProps = React.PropsWithChildren<PropTypes.InferProps<typeof Badge.propTypes>>;\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\nexport default function Badge(props: BadgeProps) {\n    return <BadgeSpan {...props} />;\n}\n\nBadge.propTypes = {\n    /** Display badge inline or overlay on parent component */\n    inline: PropTypes.bool,\n    /** Type of badge */\n    type: PropTypes.oneOf([\n        BADGE_TYPE.PRIMARY,\n        BADGE_TYPE.SUCCESS,\n        BADGE_TYPE.WARNING,\n        BADGE_TYPE.DANGER,\n        BADGE_TYPE.DISABLED,\n    ]),\n    css: PropTypes.any,\n};\n\nBadge.defaultProps = {\n    inline: false,\n    type: BADGE_TYPE.PRIMARY,\n};\n"],"names":["BADGE_TYPE","BadgeSpan","styled","props","type","getThemeValue","THEME_NAME","SUCCESS","WARNING","ERROR","DISABLED","PRIMARY","TEXT_COLOR_LIGHT","children","inline","Badge","_jsx","propTypes","PropTypes","bool","oneOf","css","any","defaultProps"],"mappings":";;;;;;AAKO,IAAA,UAAKA,iBAAAA,SAAAA,UAAAA,EAAAA;;;;;;AAAAA,IAAAA,OAAAA,UAAAA;AAMX,CAAA,CAAA,EAAA;AAID,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;AAGV,SAASC,MAAMZ,KAAiB,EAAA;AAC3C,IAAA,qBAAOa,GAAA,CAACf,SAAAA,EAAAA;AAAW,QAAA,GAAGE;;AAC1B;AAEAY,KAAAA,CAAME,SAAS,GAAG;+DAEdH,MAAAA,EAAQI,SAAAA,CAAUC,IAAI;AACtB,yBACAf,IAAAA,EAAMc,SAAAA,CAAUE,KAAK,CAAC;;;;;;AAMrB,KAAA,CAAA;AACDC,IAAAA,GAAAA,EAAKH,UAAUI;AACnB,CAAA;AAEAP,KAAAA,CAAMQ,YAAY,GAAG;IACjBT,MAAAA,EAAQ,KAAA;IACRV,IAAI,EAAA;AACR,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\n/**\n * Badge Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying 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;;;;AAIC,IACD,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;

package/lib-esm/components/Button/ActionButton.js

@@ -1,10 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-var ActionButton = /*#__PURE__*/ styled("button", {
-    target: "e1s126ex0",
-    label: ""
+const StyledActionButton = /*#__PURE__*/ styled("button", {
+    target: "ec49rx60",
+    label: "StyledActionButton"
 })("border:1px solid ", getThemeValue(THEME_NAME.PRIMARY), ";background-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:5px;height:32px;min-width:100px;font-size:14px;text-align:center;padding:0 12px;cursor:pointer;margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;margin-left:-6px;}&:enabled:hover{box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";}&:focus{box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{border:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
+/**
+ * ActionButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function ActionButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledActionButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const ActionButton = /*#__PURE__*/ React.forwardRef(ActionButtonComponent);
 
 export { ActionButton as default };
 //# sourceMappingURL=ActionButton.js.map

package/lib-esm/components/Button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sources":["../../../src/components/Button/ActionButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\nexport default styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: pointer;\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n        margin-left: -6px;\n    }\n\n    &:enabled:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    &:focus {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        border: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n"],"names":["styled","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_LIGHT","HOVER_SHADOW","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","DISABLED_BACKGROUND","DISABLED"],"mappings":";;;AAGA,mBAAA,cAAeA,MAAAA,CAAAA,QAAAA,EAAAA;;;AACSC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,oBAAA,EAChCF,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,SAAA,EAC3CF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6TAAA,EAuBhCH,aAAAA,CAAcC,WAAWG,YAAY,CAAA,EAAA,iCAAA,EAI3BJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,gCAAA,EAI1CL,aAAAA,CAAcC,UAAAA,CAAWK,kBAAkB,CAAA,EAAA,oBAAA,EAC3CN,aAAAA,CAAcC,UAAAA,CAAWM,mBAAmB,CAAA,EAAA,SAAA,EACvDP,aAAAA,CAAcC,UAAAA,CAAWO,QAAQ,CAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"ActionButton.js","sources":["../../../src/components/Button/ActionButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\nconst StyledActionButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.PRIMARY)};\n    background-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: pointer;\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n        margin-left: -6px;\n    }\n\n    &:enabled:hover {\n        box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\n    }\n\n    &:focus {\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        border: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype ActionButtonProps = {\n    /**\n     * Type of Action Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * ActionButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLButtonElement\n */\nfunction ActionButtonComponent(props: ActionButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledActionButton ref={ref} type={type} {...rest} />;\n}\n\nconst ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(ActionButtonComponent);\n\nexport default ActionButton;\n"],"names":["StyledActionButton","styled","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_LIGHT","HOVER_SHADOW","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","DISABLED_BACKGROUND","DISABLED","ActionButtonComponent","props","ref","type","rest","_jsx","ActionButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,kBAAAA,iBAAqBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACHC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,oBAAA,EAChCF,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,SAAA,EAC3CF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6TAAA,EAuBhCH,aAAAA,CAAcC,UAAAA,CAAWG,YAAY,CAAA,EAAA,iCAAA,EAI3BJ,aAAAA,CAAcC,UAAAA,CAAWI,aAAa,CAAA,EAAA,gCAAA,EAI1CL,aAAAA,CAAcC,UAAAA,CAAWK,kBAAkB,CAAA,EAAA,oBAAA,EAC3CN,aAAAA,CAAcC,UAAAA,CAAWM,mBAAmB,CAAA,EAAA,SAAA,EACvDP,aAAAA,CAAcC,WAAWO,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD;;;;AAIC,IACD,SAASC,qBAAAA,CAAsBC,KAAwB,EAAEC,GAAiC,EAAA;AACtF,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAAChB,kBAAAA,EAAAA;QAAmBa,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACzD;AAEA,MAAME,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CAAuCR,qBAAAA;;;;"}

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

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

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

@@ -1,13 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledButton = /*#__PURE__*/ styled("button", {
-    target: "e1p361zw0",
+    target: "e123477w0",
     label: "StyledButton"
 })("border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:5px;height:32px;min-width:100px;font-size:14px;text-align:center;padding:0 12px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;margin-left:-6px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
-StyledButton.defaultProps = {
-    type: 'button'
-};
+/**
+ * Button Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function ButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const Button$2 = /*#__PURE__*/ React.forwardRef(ButtonComponent);
 
-export { StyledButton as default };
+export { Button$2 as default };
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        margin-left: -6px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\nStyledButton.defaultProps = {\n    type: 'button',\n};\n\nexport default StyledButton;\n"],"names":["StyledButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BACKGROUND","LIGHT_GREY","DISABLED","defaultProps","type"],"mappings":";;;AAGA,MAAMA,YAAAA,iBAAeC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACGC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,sHAAA,EAQhDF,aAAAA,CAAcC,UAAAA,CAAWE,eAAe,CAAA,EAAA,oBAAA,EAC7BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,uNAgBnCJ,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,SAAA,EACvCL,cAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,yBAAA,EAIzBL,aAAAA,CAAcC,WAAWI,OAAO,CAAA,EAAA,wBAAA,EACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,gCAAA,EAI1CN,aAAAA,CAAcC,UAAAA,CAAWM,mBAAmB,qBAChDP,aAAAA,CAAcC,UAAAA,CAAWO,UAAU,CAAA,EAAA,SAAA,EAC1CR,aAAAA,CAAcC,WAAWQ,QAAQ,CAAA,EAAA,IAAA;AAIlDX,YAAAA,CAAaY,YAAY,GAAG;IACxBC,IAAAA,EAAM;AACV,CAAA;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 12px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        margin-left: -6px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype ButtonProps = {\n    /**\n     * Type of Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Button Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLButtonElement\n */\nfunction ButtonComponent(props: ButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledButton ref={ref} type={type} {...rest} />;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(ButtonComponent);\n\nexport default Button;\n"],"names":["StyledButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BACKGROUND","LIGHT_GREY","DISABLED","ButtonComponent","props","ref","type","rest","_jsx","Button","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,YAAAA,iBAAeC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACGC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,sHAAA,EAQhDF,aAAAA,CAAcC,UAAAA,CAAWE,eAAe,CAAA,EAAA,oBAAA,EAC7BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,uNAgBnCJ,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,SAAA,EACvCL,cAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,yBAAA,EAIzBL,aAAAA,CAAcC,WAAWI,OAAO,CAAA,EAAA,wBAAA,EACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,gCAAA,EAI1CN,aAAAA,CAAcC,UAAAA,CAAWM,mBAAmB,qBAChDP,aAAAA,CAAcC,UAAAA,CAAWO,UAAU,CAAA,EAAA,SAAA,EAC1CR,aAAAA,CAAcC,WAAWQ,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD;;;;AAIC,IACD,SAASC,eAAAA,CAAgBC,KAAkB,EAAEC,GAAiC,EAAA;AAC1E,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACjB,YAAAA,EAAAA;QAAac,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACnD;AAEA,MAAME,QAAAA,iBAASC,KAAAA,CAAMC,UAAU,CAAiCR,eAAAA;;;;"}

package/lib-esm/components/Button/IconButton.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 IconButton: React.ForwardRefExoticComponent<{
+    /**
+     * Type of Icon Button
+     * @default 'button'
+     */
+    type?: "button" | "submit" | "reset";
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/lib-esm/components/Button/IconButton.js

@@ -1,10 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-var IconButton = /*#__PURE__*/ styled("button", {
-    target: "eny3n5p0",
-    label: ""
+const StyledIconButton = /*#__PURE__*/ styled("button", {
+    target: "efmjh6j0",
+    label: "StyledIconButton"
 })("border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";border-radius:5px;height:32px;font-size:14px;text-align:center;padding:0 3px;cursor:pointer;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";margin:5px;position:relative;display:inline-flex;align-items:center;justify-content:center;& svg{vertical-align:middle;height:24px;width:24px;fill:currentColor;}&:enabled:hover{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:focus{border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}&:disabled > svg{fill:", getThemeValue(THEME_NAME.DISABLED), ";}");
+/**
+ * IconButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ function IconButtonComponent(props, ref) {
+    const { type = 'button', ...rest } = props;
+    return /*#__PURE__*/ jsx(StyledIconButton, {
+        ref: ref,
+        type: type,
+        ...rest
+    });
+}
+const IconButton = /*#__PURE__*/ React.forwardRef(IconButtonComponent);
 
 export { IconButton as default };
 //# sourceMappingURL=IconButton.js.map

package/lib-esm/components/Button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport default styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 3px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    &:disabled > svg {\n        fill: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n"],"names":["styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","PRIMARY","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","LIGHT_GREY","DISABLED"],"mappings":";;;AAGA,iBAAA,cAAeA,MAAAA,CAAAA,QAAAA,EAAAA;;;AACSC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,qGAAA,EAOhDF,cAAcC,UAAAA,CAAWE,eAAe,yBAC7BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,iMAAA,EAenCJ,aAAAA,CAAcC,WAAWI,OAAO,CAAA,EAAA,SAAA,EACvCL,cAAcC,UAAAA,CAAWI,OAAO,8BAIzBL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,wBAAA,EACxBL,cAAcC,UAAAA,CAAWK,aAAa,qCAI1CN,aAAAA,CAAcC,UAAAA,CAAWM,kBAAkB,CAAA,EAAA,gBAAA,EAC/CP,aAAAA,CAAcC,WAAWO,UAAU,CAAA,EAAA,SAAA,EAC1CR,cAAcC,UAAAA,CAAWQ,QAAQ,+BAIlCT,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/Button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledIconButton = styled.button`\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    border-radius: 5px;\n    height: 32px;\n    font-size: 14px;\n    text-align: center;\n    padding: 0 3px;\n    cursor: pointer;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    margin: 5px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    & svg {\n        vertical-align: middle;\n        height: 24px;\n        width: 24px;\n        fill: currentColor;\n    }\n\n    &:enabled:hover {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    &:focus {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:disabled {\n        background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n        border-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    &:disabled > svg {\n        fill: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype IconButtonProps = {\n    /**\n     * Type of Icon Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * IconButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLButtonElement\n */\nfunction IconButtonComponent(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledIconButton ref={ref} type={type} {...rest} />;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(IconButtonComponent);\n\nexport default IconButton;\n"],"names":["StyledIconButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","PRIMARY","PRIMARY_LIGHT","BORDER_LIGHT_COLOR","LIGHT_GREY","DISABLED","IconButtonComponent","props","ref","type","rest","_jsx","IconButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,iBAAmBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACDC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,qGAAA,EAOhDF,cAAcC,UAAAA,CAAWE,eAAe,yBAC7BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,iMAAA,EAenCJ,cAAcC,UAAAA,CAAWI,OAAO,cACvCL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,CAAA,EAAA,yBAAA,EAIzBL,aAAAA,CAAcC,UAAAA,CAAWI,OAAO,6BACxBL,aAAAA,CAAcC,UAAAA,CAAWK,aAAa,CAAA,EAAA,gCAAA,EAI1CN,aAAAA,CAAcC,WAAWM,kBAAkB,CAAA,EAAA,gBAAA,EAC/CP,cAAcC,UAAAA,CAAWO,UAAU,cAC1CR,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,0BAAA,EAIlCT,aAAAA,CAAcC,WAAWQ,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYjD;;;;AAIC,IACD,SAASC,mBAAAA,CAAoBC,KAAsB,EAAEC,GAAiC,EAAA;AAClF,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACjB,gBAAAA,EAAAA;QAAiBc,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACvD;AAEA,MAAME,UAAAA,iBAAaC,KAAAA,CAAMC,UAAU,CAAqCR,mBAAAA;;;;"}