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

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

@@ -19,9 +19,10 @@ 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)
             });
         })
     });

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';\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;;;;"}
+{"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.js

@@ -9,38 +9,42 @@ import ExpandMore from '../../icons/ExpandMore.js';
 import Card from '../Card/Card.js';
 
 const Step$1 = /*#__PURE__*/ styled(Card, {
-    target: "e9r63nq0",
+    target: "e14f46gi0",
     label: "Step"
 })("transition:all 0.6s ease;overflow:visible;", (props)=>props.open && `margin: 20px 5px;`);
 const StepHeader = /*#__PURE__*/ styled("button", {
-    target: "e9r63nq1",
+    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: "e9r63nq2",
+    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: "e9r63nq3",
+    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: "e9r63nq4",
+    target: "e14f46gi4",
     label: "StepBody"
 })("transition:all 0.6s ease;overflow:hidden;height:", (props)=>props.height || 0, "px;");
 const AccordionBadge = /*#__PURE__*/ styled(Badge, {
-    target: "e9r63nq5",
+    target: "e14f46gi5",
     label: "AccordionBadge"
 })("margin-right:15px;");
 const AccordionStepBody = /*#__PURE__*/ styled("div", {
-    target: "e9r63nq6",
+    target: "e14f46gi6",
     label: "AccordionStepBody"
 })("padding:20px 15px;");
 const AccordionStepFooter = /*#__PURE__*/ styled("div", {
-    target: "e9r63nq7",
+    target: "e14f46gi7",
     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) {
+/**
+ * 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 = false, header, errorText, completed = false, onStepClick, children, ...restProps } = props;
     // Generate unique IDs for ARIA relationships

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, 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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"}
+{"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.js

@@ -12,7 +12,7 @@ var BADGE_TYPE = /*#__PURE__*/ function(BADGE_TYPE) {
     return BADGE_TYPE;
 }({});
 const BadgeSpan = /*#__PURE__*/ styled("span", {
-    target: "e1px9hio0",
+    target: "e1aaenck0",
     label: "BadgeSpan"
 })("background-color:", (props)=>{
     switch(props.type){
@@ -28,7 +28,11 @@ 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 BadgeComponent(props, ref) {
+/**
+ * Badge Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function BadgeComponent(props, ref) {
     return /*#__PURE__*/ jsx(BadgeSpan, {
         ...props,
         ref: ref

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 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;;;;"}
+{"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.js

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledActionButton = /*#__PURE__*/ styled("button", {
-    target: "ezu3m6y0",
+    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), ";}");
-function ActionButtonComponent(props, ref) {
+/**
+ * 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,

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

@@ -1 +1 @@
-{"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\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,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;;;;"}
+{"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.js

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledButton = /*#__PURE__*/ styled("button", {
-    target: "e15a5nlf0",
+    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), ";}");
-function ButtonComponent(props, ref) {
+/**
+ * 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,

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

@@ -1 +1 @@
-{"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\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,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;;;;"}
+{"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.js

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledIconButton = /*#__PURE__*/ styled("button", {
-    target: "e1mks0xv0",
+    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), ";}");
-function IconButtonComponent(props, ref) {
+/**
+ * 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,

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

@@ -1 +1 @@
-{"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\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,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;;;;"}
+{"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;;;;"}

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

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledLinkButton = /*#__PURE__*/ styled("button", {
-    target: "e1vgmm1k0",
+    target: "e1d039580",
     label: "StyledLinkButton"
 })("min-width:100px;font-size:14px;text-align:center;height:32px;cursor:pointer;background-color:transparent;border:none;color:", getThemeValue(THEME_NAME.PRIMARY), ";padding:0 12px;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,&:focus{text-decoration:underline;}&:disabled{border-color:", getThemeValue(THEME_NAME.BORDER_COLOR), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}");
-const LinkButtonComponent = (props, ref)=>{
+/**
+ * LinkButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const LinkButtonComponent = (props, ref)=>{
     const { type = 'button', ...rest } = props;
     return /*#__PURE__*/ jsx(StyledLinkButton, {
         ref: ref,

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

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sources":["../../../src/components/Button/LinkButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledLinkButton = styled.button`\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    height: 32px;\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    padding: 0 12px;\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    &:focus {\n        text-decoration: underline;\n    }\n\n    &:disabled {\n        border-color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype LinkButtonProps = {\n    /**\n     * Type of Link Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst LinkButtonComponent = (props: LinkButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledLinkButton ref={ref} type={type} {...rest} />;\n};\n\nconst LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(LinkButtonComponent);\nexport default LinkButton;\n"],"names":["StyledLinkButton","styled","getThemeValue","THEME_NAME","PRIMARY","BORDER_COLOR","DISABLED","LinkButtonComponent","props","ref","type","rest","_jsx","LinkButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,iBAAmBC,MAAAA,CAAAA,QAAAA,EAAAA;;;kIAQZC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,+QAAA,EAsBrBF,aAAAA,CAAcC,WAAWE,YAAY,CAAA,EAAA,SAAA,EAC5CH,aAAAA,CAAcC,UAAAA,CAAWG,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD,MAAMC,mBAAAA,GAAsB,CAACC,KAAAA,EAAwBC,GAAAA,GAAAA;AACjD,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACZ,gBAAAA,EAAAA;QAAiBS,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACvD,CAAA;AAEA,MAAME,UAAAA,iBAAaC,KAAAA,CAAMC,UAAU,CAAqCR,mBAAAA;;;;"}
+{"version":3,"file":"LinkButton.js","sources":["../../../src/components/Button/LinkButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledLinkButton = styled.button`\n    min-width: 100px;\n    font-size: 14px;\n    text-align: center;\n    height: 32px;\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    padding: 0 12px;\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    &:focus {\n        text-decoration: underline;\n    }\n\n    &:disabled {\n        border-color: ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n`;\n\ntype LinkButtonProps = {\n    /**\n     * Type of Link Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * LinkButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLButtonElement\n */\nconst LinkButtonComponent = (props: LinkButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledLinkButton ref={ref} type={type} {...rest} />;\n};\n\nconst LinkButton = React.forwardRef<HTMLButtonElement, LinkButtonProps>(LinkButtonComponent);\nexport default LinkButton;\n"],"names":["StyledLinkButton","styled","getThemeValue","THEME_NAME","PRIMARY","BORDER_COLOR","DISABLED","LinkButtonComponent","props","ref","type","rest","_jsx","LinkButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,gBAAAA,iBAAmBC,MAAAA,CAAAA,QAAAA,EAAAA;;;kIAQZC,aAAAA,CAAcC,UAAAA,CAAWC,OAAO,CAAA,EAAA,+QAAA,EAsBrBF,aAAAA,CAAcC,WAAWE,YAAY,CAAA,EAAA,SAAA,EAC5CH,aAAAA,CAAcC,UAAAA,CAAWG,QAAQ,CAAA,EAAA,IAAA,CAAA;AAYlD;;;;IAKA,MAAMC,mBAAAA,GAAsB,CAACC,KAAAA,EAAwBC,GAAAA,GAAAA;AACjD,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAACZ,gBAAAA,EAAAA;QAAiBS,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACvD,CAAA;AAEA,MAAME,UAAAA,iBAAaC,KAAAA,CAAMC,UAAU,CAAqCR,mBAAAA;;;;"}

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

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledRaisedButton = /*#__PURE__*/ styled("button", {
-    target: "e1vw7xh30",
+    target: "e1p6mbrx0",
     label: "StyledRaisedButton"
 })("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:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";color:inherit;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";transform:translateY(-2px);box-shadow:", getThemeValue(THEME_NAME.HOVER_SHADOW), ";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), ";}&:disabled{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";border-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";color:", getThemeValue(THEME_NAME.DISABLED), ";}&:active{transform:translateY(0);box-shadow:", getThemeValue(THEME_NAME.SHADOW), ";}");
-const RaisedButtonComponent = (props, ref)=>{
+/**
+ * RaisedButton Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLButtonElement
+ */ const RaisedButtonComponent = (props, ref)=>{
     const { type = 'button', ...rest } = props;
     return /*#__PURE__*/ jsx(StyledRaisedButton, {
         ref: ref,

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

@@ -1 +1 @@
-{"version":3,"file":"RaisedButton.js","sources":["../../../src/components/Button/RaisedButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledRaisedButton = 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: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    color: inherit;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transform: translateY(-2px);\n    box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\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    }\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    &:active {\n        transform: translateY(0);\n        box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};\n    }\n`;\n\ntype RaisedButtonProps = {\n    /**\n     * Type of Raised Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst RaisedButtonComponent = (props: RaisedButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledRaisedButton ref={ref} type={type} {...rest} />;\n};\n\nconst RaisedButton = React.forwardRef<HTMLButtonElement, RaisedButtonProps>(RaisedButtonComponent);\nexport default RaisedButton;\n"],"names":["StyledRaisedButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","HOVER_SHADOW","PRIMARY","DISABLED_BACKGROUND","LIGHT_GREY","DISABLED","SHADOW","RaisedButtonComponent","props","ref","type","rest","_jsx","RaisedButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,kBAAAA,iBAAqBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACHC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,wGAAA,EAO/CF,cAAcC,UAAAA,CAAWE,eAAe,uCAE9BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,yCAAA,EAEzCJ,cAAcC,UAAAA,CAAWI,YAAY,uNAgB/BL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,SAAA,EACvCN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,8BAIzBN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gCAAA,EAI5BN,aAAAA,CAAcC,WAAWM,mBAAmB,CAAA,EAAA,gBAAA,EAChDP,cAAcC,UAAAA,CAAWO,UAAU,cAC1CR,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,gDAAA,EAK5BT,aAAAA,CAAcC,WAAWS,MAAM,CAAA,EAAA,IAAA,CAAA;AAYrD,MAAMC,qBAAAA,GAAwB,CAACC,KAAAA,EAA0BC,GAAAA,GAAAA;AACrD,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAAClB,kBAAAA,EAAAA;QAAmBe,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACzD,CAAA;AAEA,MAAME,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CAAuCR,qBAAAA;;;;"}
+{"version":3,"file":"RaisedButton.js","sources":["../../../src/components/Button/RaisedButton.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst StyledRaisedButton = 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: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    color: inherit;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    transform: translateY(-2px);\n    box-shadow: ${getThemeValue(THEME_NAME.HOVER_SHADOW)};\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    }\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    &:active {\n        transform: translateY(0);\n        box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};\n    }\n`;\n\ntype RaisedButtonProps = {\n    /**\n     * Type of Raised Button\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * RaisedButton Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLButtonElement\n */\nconst RaisedButtonComponent = (props: RaisedButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n    const { type = 'button', ...rest } = props;\n\n    return <StyledRaisedButton ref={ref} type={type} {...rest} />;\n};\n\nconst RaisedButton = React.forwardRef<HTMLButtonElement, RaisedButtonProps>(RaisedButtonComponent);\nexport default RaisedButton;\n"],"names":["StyledRaisedButton","styled","getThemeValue","THEME_NAME","BORDER_COLOR","TEXT_COLOR_DARK","BACKGROUND","HOVER_SHADOW","PRIMARY","DISABLED_BACKGROUND","LIGHT_GREY","DISABLED","SHADOW","RaisedButtonComponent","props","ref","type","rest","_jsx","RaisedButton","React","forwardRef"],"mappings":";;;;;AAIA,MAAMA,kBAAAA,iBAAqBC,MAAAA,CAAAA,QAAAA,EAAAA;;;AACHC,CAAAA,CAAAA,CAAAA,mBAAAA,EAAAA,aAAAA,CAAcC,WAAWC,YAAY,CAAA,EAAA,wGAAA,EAO/CF,cAAcC,UAAAA,CAAWE,eAAe,uCAE9BH,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,yCAAA,EAEzCJ,cAAcC,UAAAA,CAAWI,YAAY,uNAgB/BL,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,SAAA,EACvCN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,8BAIzBN,aAAAA,CAAcC,UAAAA,CAAWK,OAAO,CAAA,EAAA,gCAAA,EAI5BN,aAAAA,CAAcC,WAAWM,mBAAmB,CAAA,EAAA,gBAAA,EAChDP,cAAcC,UAAAA,CAAWO,UAAU,cAC1CR,aAAAA,CAAcC,UAAAA,CAAWQ,QAAQ,CAAA,EAAA,gDAAA,EAK5BT,aAAAA,CAAcC,WAAWS,MAAM,CAAA,EAAA,IAAA,CAAA;AAYrD;;;;IAKA,MAAMC,qBAAAA,GAAwB,CAACC,KAAAA,EAA0BC,GAAAA,GAAAA;AACrD,IAAA,MAAM,EAAEC,IAAAA,GAAO,QAAQ,EAAE,GAAGC,MAAM,GAAGH,KAAAA;AAErC,IAAA,qBAAOI,GAAA,CAAClB,kBAAAA,EAAAA;QAAmBe,GAAAA,EAAKA,GAAAA;QAAKC,IAAAA,EAAMA,IAAAA;AAAO,QAAA,GAAGC;;AACzD,CAAA;AAEA,MAAME,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CAAuCR,qBAAAA;;;;"}

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

@@ -4,10 +4,14 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const StyledCard = /*#__PURE__*/ styled("div", {
-    target: "e1ex140c0",
+    target: "ebufzie0",
     label: "StyledCard"
 })("border-radius:10px;background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";", (props)=>props.elevated ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};` : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`, "    margin:5px;overflow:auto;position:relative;");
-function CardComponent(props, ref) {
+/**
+ * Card Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function CardComponent(props, ref) {
     return /*#__PURE__*/ jsx(StyledCard, {
         ...props,
         ref: ref

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\ntype CardProps = {\n    /** Shows a shadow around the card to show elevation */\n    elevated?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst StyledCard = styled.div<CardProps>`\n    border-radius: 10px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    ${(props) =>\n        props.elevated\n            ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};`\n            : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`}\n    margin: 5px;\n    overflow: auto;\n    position: relative;\n`;\n\nfunction CardComponent(props: CardProps, ref: React.Ref<HTMLDivElement>) {\n    return <StyledCard {...props} ref={ref} />;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(CardComponent);\nexport default Card;\n"],"names":["StyledCard","styled","getThemeValue","THEME_NAME","BACKGROUND","props","elevated","MODAL_SHADOW","SHADOW","CardComponent","ref","_jsx","Card","React","forwardRef"],"mappings":";;;;;AASA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;2CAEKC,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,GAAA,EACrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,GACR,CAAC,YAAY,EAAEJ,aAAAA,CAAcC,UAAAA,CAAWI,YAAY,CAAA,CAAE,CAAC,CAAC,GACxD,CAAC,YAAY,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,MAAM,CAAA,CAAE,CAAC,CAAC,EAAA,iDAAA,CAAA;AAMhE,SAASC,aAAAA,CAAcJ,KAAgB,EAAEK,GAA8B,EAAA;AACnE,IAAA,qBAAOC,GAAA,CAACX,UAAAA,EAAAA;AAAY,QAAA,GAAGK,KAAK;QAAEK,GAAAA,EAAKA;;AACvC;AAEA,MAAME,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAA4BL,aAAAA;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { THEME_NAME, getThemeValue } from '../../shared/constants';\n\ntype CardProps = {\n    /** Shows a shadow around the card to show elevation */\n    elevated?: boolean;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst StyledCard = styled.div<CardProps>`\n    border-radius: 10px;\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    ${(props) =>\n        props.elevated\n            ? `box-shadow: ${getThemeValue(THEME_NAME.MODAL_SHADOW)};`\n            : `box-shadow: ${getThemeValue(THEME_NAME.SHADOW)};`}\n    margin: 5px;\n    overflow: auto;\n    position: relative;\n`;\n\n/**\n * Card Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction CardComponent(props: CardProps, ref: React.Ref<HTMLDivElement>) {\n    return <StyledCard {...props} ref={ref} />;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(CardComponent);\nexport default Card;\n"],"names":["StyledCard","styled","getThemeValue","THEME_NAME","BACKGROUND","props","elevated","MODAL_SHADOW","SHADOW","CardComponent","ref","_jsx","Card","React","forwardRef"],"mappings":";;;;;AASA,MAAMA,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;2CAEKC,aAAAA,CAAcC,UAAAA,CAAWC,UAAU,CAAA,EAAA,GAAA,EACrD,CAACC,KAAAA,GACCA,KAAAA,CAAMC,QAAQ,GACR,CAAC,YAAY,EAAEJ,aAAAA,CAAcC,UAAAA,CAAWI,YAAY,CAAA,CAAE,CAAC,CAAC,GACxD,CAAC,YAAY,EAAEL,aAAAA,CAAcC,UAAAA,CAAWK,MAAM,CAAA,CAAE,CAAC,CAAC,EAAA,iDAAA,CAAA;AAMhE;;;;AAIC,IACD,SAASC,aAAAA,CAAcJ,KAAgB,EAAEK,GAA8B,EAAA;AACnE,IAAA,qBAAOC,GAAA,CAACX,UAAAA,EAAAA;AAAY,QAAA,GAAGK,KAAK;QAAEK,GAAAA,EAAKA;;AACvC;AAEA,MAAME,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAA4BL,aAAAA;;;;"}

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

@@ -5,14 +5,18 @@ import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 import Close from '../../icons/Close.js';
 
 const Container$8 = /*#__PURE__*/ styled("span", {
-    target: "ehb6hld0",
+    target: "eg8hsap0",
     label: "Container"
 })("padding:5px;padding-left:15px;border-radius:16px;background-color:", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";display:inline-flex;margin:5px;line-height:20px;align-items:center;");
 const Button$1 = /*#__PURE__*/ styled("button", {
-    target: "ehb6hld1",
+    target: "eg8hsap1",
     label: "Button"
 })("color:", getThemeValue(THEME_NAME.BACKGROUND), ";background-color:", getThemeValue(THEME_NAME.DISABLED), ";border-radius:50%;border:none;padding:4px;display:inline-flex;margin-left:5px;&:focus-within{outline:4px solid ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}");
-function ChipComponent(props, ref) {
+/**
+ * Chip Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLSpanElement
+ */ function ChipComponent(props, ref) {
     const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;
     const keyUpHandler = (e)=>{
         if (e.key === 'Backspace' || e.key === 'Delete') {

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n`;\n\nconst Button = styled.button`\n    color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n\n    &:focus-within {\n        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n`;\n\nfunction ChipComponent(\n    props: ChipProps & React.HTMLAttributes<HTMLSpanElement>,\n    ref: React.Ref<HTMLSpanElement>,\n) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} ref={ref} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n\nconst Chip = React.forwardRef(ChipComponent);\nexport default Chip;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Button","BACKGROUND","DISABLED","ERROR_LIGHT","ChipComponent","props","ref","label","onCloseClick","closeButtonAriaLabel","rest","keyUpHandler","e","key","buttonKeyDownHandler","stopPropagation","_jsxs","onKeyUp","_jsx","onClick","onKeyDown","aria-label","Close","height","width","Chip","React","forwardRef"],"mappings":";;;;;;AAcA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAIMC,CAAAA,CAAAA,CAAAA,oEAAAA,EAAAA,aAAAA,CAAcC,WAAWC,kBAAkB,CAAA,EAAA,sEAAA,CAAA;AAOnE,MAAMC,QAAAA,iBAASJ,MAAAA,CAAAA,QAAAA,EAAAA;;;aACFC,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,oBAAA,EACxBJ,aAAAA,CAAcC,WAAWI,QAAQ,CAAA,EAAA,kHAAA,EAQ5BL,aAAAA,CAAcC,UAAAA,CAAWK,WAAW,CAAA,EAAA,IAAA,CAAA;AAIjE,SAASC,aAAAA,CACLC,KAAwD,EACxDC,GAA+B,EAAA;IAE/B,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAE/D,IAAA,MAAMM,eAA4D,CAACC,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,EAAEC,GAAG,KAAK,eAAeD,CAAAA,CAAEC,GAAG,KAAK,QAAA,EAAU;YAC7CL,YAAAA,GAAeI,CAAAA,CAAAA;AACnB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,MAAME,uBAAsE,CAACF,CAAAA,GAAAA;;QAEzE,IAAIA,CAAAA,CAAEC,GAAG,KAAK,GAAA,IAAOD,CAAAA,CAAEC,GAAG,KAAK,UAAA,IAAcD,CAAAA,CAAEC,GAAG,KAAK,OAAA,EAAS;AAC5DD,YAAAA,CAAAA,CAAEG,eAAe,EAAA;AACrB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,qBACIC,IAAA,CAACrB,WAAAA,EAAAA;AAAW,QAAA,GAAGe,IAAI;QAAEJ,GAAAA,EAAKA,GAAAA;QAAKW,OAAAA,EAASN,YAAAA;;AACnCJ,YAAAA,KAAAA;0BACDW,GAAA,CAAClB,QAAAA,EAAAA;gBACGmB,OAAAA,EAASX,YAAAA;gBACTY,SAAAA,EAAWN,oBAAAA;AACXO,gBAAAA,YAAAA,EAAYZ,oBAAAA,IAAwB,CAAC,OAAO,EAAEF,KAAAA,CAAAA,CAAO;AAErD,gBAAA,QAAA,gBAAAW,GAAA,CAACI,KAAAA,EAAAA;oBAAMC,MAAAA,EAAQ,EAAA;oBAAIC,KAAAA,EAAO;;;;;AAI1C;AAEA,MAAMC,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACvB,aAAAA;;;;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { Close } from '../../icons';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\ninterface ChipProps {\n    /** Label for the chip */\n    label: string;\n    /** Callback when the close button is clicked */\n    onCloseClick?: (e: React.KeyboardEvent | React.MouseEvent) => void;\n    /** Aria label for the close button. Defaults to \"Remove {label}\" */\n    closeButtonAriaLabel?: string;\n}\n\nconst Container = styled.span`\n    padding: 5px;\n    padding-left: 15px;\n    border-radius: 16px;\n    background-color: ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n    display: inline-flex;\n    margin: 5px;\n    line-height: 20px;\n    align-items: center;\n`;\n\nconst Button = styled.button`\n    color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n    background-color: ${getThemeValue(THEME_NAME.DISABLED)};\n    border-radius: 50%;\n    border: none;\n    padding: 4px;\n    display: inline-flex;\n    margin-left: 5px;\n\n    &:focus-within {\n        outline: 4px solid ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n`;\n\n/**\n * Chip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLSpanElement\n */\nfunction ChipComponent(\n    props: ChipProps & React.HTMLAttributes<HTMLSpanElement>,\n    ref: React.Ref<HTMLSpanElement>,\n) {\n    const { label, onCloseClick, closeButtonAriaLabel, ...rest } = props;\n\n    const keyUpHandler: React.KeyboardEventHandler<HTMLSpanElement> = (e) => {\n        if (e.key === 'Backspace' || e.key === 'Delete') {\n            onCloseClick?.(e);\n        }\n    };\n\n    const buttonKeyDownHandler: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {\n        // Stop propagation to prevent DragAndDrop from capturing Space/Enter\n        if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {\n            e.stopPropagation();\n        }\n    };\n\n    return (\n        <Container {...rest} ref={ref} onKeyUp={keyUpHandler}>\n            {label}\n            <Button\n                onClick={onCloseClick}\n                onKeyDown={buttonKeyDownHandler}\n                aria-label={closeButtonAriaLabel ?? `Remove ${label}`}\n            >\n                <Close height={16} width={16} />\n            </Button>\n        </Container>\n    );\n}\n\nconst Chip = React.forwardRef(ChipComponent);\nexport default Chip;\n"],"names":["Container","styled","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","Button","BACKGROUND","DISABLED","ERROR_LIGHT","ChipComponent","props","ref","label","onCloseClick","closeButtonAriaLabel","rest","keyUpHandler","e","key","buttonKeyDownHandler","stopPropagation","_jsxs","onKeyUp","_jsx","onClick","onKeyDown","aria-label","Close","height","width","Chip","React","forwardRef"],"mappings":";;;;;;AAcA,MAAMA,WAAAA,iBAAYC,MAAAA,CAAAA,MAAAA,EAAAA;;;AAIMC,CAAAA,CAAAA,CAAAA,oEAAAA,EAAAA,aAAAA,CAAcC,WAAWC,kBAAkB,CAAA,EAAA,sEAAA,CAAA;AAOnE,MAAMC,QAAAA,iBAASJ,MAAAA,CAAAA,QAAAA,EAAAA;;;aACFC,aAAAA,CAAcC,UAAAA,CAAWG,UAAU,CAAA,EAAA,oBAAA,EACxBJ,aAAAA,CAAcC,WAAWI,QAAQ,CAAA,EAAA,kHAAA,EAQ5BL,aAAAA,CAAcC,UAAAA,CAAWK,WAAW,CAAA,EAAA,IAAA,CAAA;AAIjE;;;;AAIC,IACD,SAASC,aAAAA,CACLC,KAAwD,EACxDC,GAA+B,EAAA;IAE/B,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGC,IAAAA,EAAM,GAAGL,KAAAA;AAE/D,IAAA,MAAMM,eAA4D,CAACC,CAAAA,GAAAA;AAC/D,QAAA,IAAIA,EAAEC,GAAG,KAAK,eAAeD,CAAAA,CAAEC,GAAG,KAAK,QAAA,EAAU;YAC7CL,YAAAA,GAAeI,CAAAA,CAAAA;AACnB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,MAAME,uBAAsE,CAACF,CAAAA,GAAAA;;QAEzE,IAAIA,CAAAA,CAAEC,GAAG,KAAK,GAAA,IAAOD,CAAAA,CAAEC,GAAG,KAAK,UAAA,IAAcD,CAAAA,CAAEC,GAAG,KAAK,OAAA,EAAS;AAC5DD,YAAAA,CAAAA,CAAEG,eAAe,EAAA;AACrB,QAAA;AACJ,IAAA,CAAA;AAEA,IAAA,qBACIC,IAAA,CAACrB,WAAAA,EAAAA;AAAW,QAAA,GAAGe,IAAI;QAAEJ,GAAAA,EAAKA,GAAAA;QAAKW,OAAAA,EAASN,YAAAA;;AACnCJ,YAAAA,KAAAA;0BACDW,GAAA,CAAClB,QAAAA,EAAAA;gBACGmB,OAAAA,EAASX,YAAAA;gBACTY,SAAAA,EAAWN,oBAAAA;AACXO,gBAAAA,YAAAA,EAAYZ,oBAAAA,IAAwB,CAAC,OAAO,EAAEF,KAAAA,CAAAA,CAAO;AAErD,gBAAA,QAAA,gBAAAW,GAAA,CAACI,KAAAA,EAAAA;oBAAMC,MAAAA,EAAQ,EAAA;oBAAIC,KAAAA,EAAO;;;;;AAI1C;AAEA,MAAMC,IAAAA,iBAAOC,KAAAA,CAAMC,UAAU,CAACvB,aAAAA;;;;"}

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

@@ -8,7 +8,7 @@ import { ORIENTATION } from '../DragAndDrop/types.js';
 
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "e17bg7n50",
+    target: "e12jan4z0",
     label: "Label"
 })("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
@@ -38,12 +38,12 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     ` : '');
 // Error message container
 const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
-    target: "e17bg7n51",
+    target: "e12jan4z1",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 // Visually hidden but accessible to screen readers
 const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
-    target: "e17bg7n52",
+    target: "e12jan4z2",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;& li{list-style:none;}");
 /**
@@ -74,10 +74,16 @@ const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
         if (!template) return undefined;
         return template.replace(/\{:label\}/g, label);
     };
+    const prevPropValueRef = React.useRef(undefined);
     // Sync internal value with props.value
     useEffect(()=>{
         if (Array.isArray(propValue)) {
-            setValue(propValue);
+            const prevValue = prevPropValueRef.current;
+            const isEqual = prevValue && propValue.length === prevValue.length && propValue.every((val, index)=>val === prevValue[index]);
+            if (!isEqual) {
+                setValue(propValue);
+                prevPropValueRef.current = propValue;
+            }
         }
     }, [
         propValue

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

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useEffect, useId, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ninterface ChipInputProps {\n    /** Label for the field */\n    label: string;\n    /** Error message for the field */\n    errorText?: string;\n    /**\n     * Values to display as chips\n     * @default []\n     */\n    value?: string[];\n    /** Callback when chips change */\n    onChange?: (newValue: string[]) => void;\n    /**\n     * Aria label for the close button on chip. Defaults to \"Remove {:label}\"\n     * @default \"Remove {:label}\"\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Announcement text when a chip is added. Defaults to \"{:label} was added\"\n     * @default \"{:label} was added\"\n     */\n    addedAnnouncementTemplate?: string;\n    /**\n     * Announcement text when a chip is removed. Defaults to \"{:label} was removed\"\n     * @default \"{:label} was removed\"\n     */\n    removedAnnouncementTemplate?: string;\n}\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n    required?: boolean;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    ${(props) =>\n        props.required\n            ? `& > span:after {\n                content: '*';\n                margin-left: 2px;\n                color: ${getThemeValue(THEME_NAME.ERROR)};\n            }`\n            : ''}\n    \n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nfunction ChipInputComponent(\n    props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>,\n    ref: React.Ref<HTMLInputElement | null>,\n) {\n    const {\n        value: propValue = [],\n        closeButtonAriaLabel = `Remove {:label}`,\n        addedAnnouncementTemplate = '{:label} was added',\n        removedAnnouncementTemplate = '{:label} was removed',\n    } = props;\n\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(propValue || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    // Forward the underlying input element.\n    useImperativeHandle(ref, () => InputRef.current);\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(propValue)) {\n            setValue(propValue);\n        }\n    }, [propValue]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label\n                text={text}\n                touched={touched}\n                errorText={props.errorText}\n                required={props.required}\n            >\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst ChipInput = React.forwardRef<\n    HTMLInputElement,\n    ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","touched","errorText","required","text","ErrorContainer","VisuallyHidden","ChipInputComponent","ref","value","propValue","closeButtonAriaLabel","addedAnnouncementTemplate","removedAnnouncementTemplate","setText","useState","setTouched","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","useImperativeHandle","current","replacePlaceholder","template","label","undefined","replace","useEffect","Array","isArray","updateValue","newValue","deduped","from","Set","onChange","handleFocus","e","onFocus","handleChange","target","handleKeyUp","key","trim","validity","valid","removeChip","chipToRemove","filter","chip","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","onKeyUp","length","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","span","id","aria-live","aria-atomic","ChipInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"ChipInput.js","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"sourcesContent":["import React, { useImperativeHandle, useEffect, useId, useState } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport Chip from '../Chip/Chip';\nimport { DragAndDrop, ORIENTATION } from '../DragAndDrop';\n\n// Prop types definition\ninterface ChipInputProps {\n    /** Label for the field */\n    label: string;\n    /** Error message for the field */\n    errorText?: string;\n    /**\n     * Values to display as chips\n     * @default []\n     */\n    value?: string[];\n    /** Callback when chips change */\n    onChange?: (newValue: string[]) => void;\n    /**\n     * Aria label for the close button on chip. Defaults to \"Remove {:label}\"\n     * @default \"Remove {:label}\"\n     */\n    closeButtonAriaLabel?: string;\n    /**\n     * Announcement text when a chip is added. Defaults to \"{:label} was added\"\n     * @default \"{:label} was added\"\n     */\n    addedAnnouncementTemplate?: string;\n    /**\n     * Announcement text when a chip is removed. Defaults to \"{:label} was removed\"\n     * @default \"{:label} was removed\"\n     */\n    removedAnnouncementTemplate?: string;\n}\n\n// Label component for the ChipInput\nconst Label = styled.label<{\n    text: string;\n    touched?: boolean;\n    errorText?: string;\n    required?: boolean;\n}>`\n    display: inline-flex;\n    flex-direction: column;\n    flex: 1;\n    position: relative;\n    margin: 10px 5px;\n    color: inherit;\n    padding: 0 8px;\n    width: 250px;\n    border-radius: 3px;\n    border: 1px solid ${getThemeValue(THEME_NAME.BORDER_COLOR)};\n    background-color: ${getThemeValue(THEME_NAME.BACKGROUND)};\n\n    /** Focused */\n    &:has(:focus),\n    &:has(:active) {\n        border-color: ${getThemeValue(THEME_NAME.PRIMARY)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    }\n\n    &:has(:focus) > span,\n    &:has(:active) > span {\n        color: ${getThemeValue(THEME_NAME.PRIMARY)};\n    }\n\n    /** Disabled */\n    &:has(:disabled) {\n        border-color: ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:has(:disabled) > span {\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n    }\n\n    /** Invalid */\n    &:has(:focus:invalid) {\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        box-shadow: 0 0 0 4px ${getThemeValue(THEME_NAME.ERROR_LIGHT)};\n    }\n\n    ${(props) =>\n        props.touched\n            ? `\n        &:has(:invalid) {\n            border-color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n    \n        &:has(:invalid) > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Error */\n    ${(props) =>\n        props.errorText\n            ? `\n        border-color: ${getThemeValue(THEME_NAME.ERROR)};\n\n        & > span {\n            color: ${getThemeValue(THEME_NAME.ERROR)};\n        }\n        `\n            : ''}\n\n    /** Required */\n    ${(props) =>\n        props.required\n            ? `& > span:after {\n                content: '*';\n                margin-left: 2px;\n                color: ${getThemeValue(THEME_NAME.ERROR)};\n            }`\n            : ''}\n    \n\n    & > input {\n        border: none;\n        outline: none;\n        line-height: 30px;\n        min-height: 30px;\n        max-width: 95%;\n    }\n\n    /** Label Animation */\n    & > span {\n        position: absolute;\n        padding: 0 5px;\n        top: 0px;\n        left: 4px;\n        font-size: 14px;\n        line-height: 32px;\n        transition: all 300ms ease;\n    }\n\n    &:has(:focus) > span,\n    &:has(:placeholder-shown) > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n\n    ${(props) =>\n        props.text !== ''\n            ? `\n    & > span {\n        top: -8px;\n        background: ${getThemeValue(THEME_NAME.BACKGROUND)};\n        font-size: 12px;\n        line-height: 14px;\n    }\n    `\n            : ''}\n`;\n\n// Error message container\nconst ErrorContainer = styled.div`\n    color: ${getThemeValue(THEME_NAME.ERROR)};\n    padding-top: 3px;\n    font-size: 12px;\n    line-height: 14px;\n    margin-left: 3px;\n`;\n\n// Visually hidden but accessible to screen readers\nconst VisuallyHidden = styled.ul`\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n\n    & li {\n        list-style: none;\n    }\n`;\n\n/**\n * A chip input component that allows users to add and remove chips (tags) by typing and pressing Enter.\n * @component\n * @example\n * ```tsx\n * <ChipInput\n *   value={['tag1', 'tag2']}\n *   onChange={(newTags) => console.log(newTags)}\n *   label=\"Add tags\"\n *   errorText=\"At least one tag is required\"\n * />\n * ```\n */\nfunction ChipInputComponent(\n    props: ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>,\n    ref: React.Ref<HTMLInputElement | null>,\n) {\n    const {\n        value: propValue = [],\n        closeButtonAriaLabel = `Remove {:label}`,\n        addedAnnouncementTemplate = '{:label} was added',\n        removedAnnouncementTemplate = '{:label} was removed',\n    } = props;\n\n    const [text, setText] = useState('');\n    const [touched, setTouched] = useState(false);\n    const [value, setValue] = useState<string[]>(propValue || []);\n    const InputRef = React.useRef<HTMLInputElement>(null);\n    const [announcement, setAnnouncement] = useState('');\n    const errorId = useId();\n\n    // Forward the underlying input element.\n    useImperativeHandle(ref, () => InputRef.current as HTMLInputElement);\n\n    /**\n     * Replace {:label} placeholder in template string\n     */\n    const replacePlaceholder = (\n        template: string | undefined,\n        label: string,\n    ): string | undefined => {\n        if (!template) return undefined;\n        return template.replace(/\\{:label\\}/g, label);\n    };\n\n    const prevPropValueRef = React.useRef<string[]>(undefined);\n\n    // Sync internal value with props.value\n    useEffect(() => {\n        if (Array.isArray(propValue)) {\n            const prevValue = prevPropValueRef.current;\n            const isEqual =\n                prevValue &&\n                propValue.length === prevValue.length &&\n                propValue.every((val, index) => val === prevValue[index]);\n            if (!isEqual) {\n                setValue(propValue);\n                prevPropValueRef.current = propValue;\n            }\n        }\n    }, [propValue]);\n\n    /**\n     * Update the chip values and notify changes.\n     * @param newValue The new array of chip values\n     */\n    const updateValue = (newValue: string[]) => {\n        const deduped = Array.from(new Set(newValue));\n        setValue(deduped);\n        props.onChange?.(deduped);\n    };\n\n    /**\n     * Marks the input as touched on focus.\n     * @param e React focus event\n     */\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n        setTouched(true);\n        if (props.onFocus) {\n            props.onFocus(e);\n        }\n    };\n\n    /**\n     * Change handler for the input field.\n     * @param e React change event\n     */\n    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n        setText(e.target.value);\n    };\n\n    /**\n     * Adds a new chip on Enter key press.\n     * @param e React keyboard event\n     */\n    const handleKeyUp: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n        if (e.key === 'Enter' && text.trim() !== '' && InputRef.current?.validity.valid) {\n            const newValue = [...value, text.trim()];\n            updateValue(newValue);\n            setText('');\n            setAnnouncement(replacePlaceholder(addedAnnouncementTemplate, text.trim())!);\n        }\n    };\n\n    /**\n     * Removes a chip from the list.\n     * @param chipToRemove The chip value to remove\n     */\n    const removeChip = (chipToRemove: string) => {\n        const newValue = value.filter((chip) => chip !== chipToRemove);\n        updateValue(newValue);\n        setAnnouncement(replacePlaceholder(removedAnnouncementTemplate, chipToRemove)!);\n    };\n\n    /**\n     * Moves a chip from one position to another.\n     * @param start The starting index of the item to move\n     * @param end The ending index where the item should be placed\n     */\n    const onDrop = (start: number, end: number) => {\n        // Clone existing elements\n        const newItems = [...value];\n        // Remove the element to be moved\n        const item = newItems.splice(start, 1);\n        // Add it back at the required position\n        newItems.splice(end, 0, item[0]);\n        // Update\n        updateValue(newItems);\n    };\n\n    // Render the component\n    return (\n        <>\n            <Label\n                text={text}\n                touched={touched}\n                errorText={props.errorText}\n                required={props.required}\n            >\n                <input\n                    {...props}\n                    ref={InputRef}\n                    value={text}\n                    onChange={handleChange}\n                    onFocus={handleFocus}\n                    onKeyUp={handleKeyUp}\n                    required={props.required && value.length === 0}\n                    aria-required={props.required}\n                    aria-invalid={!!props.errorText}\n                    aria-describedby={props.errorText ? errorId : undefined}\n                />\n                <div>\n                    {value?.length > 0 && (\n                        <DragAndDrop orientation={ORIENTATION.HORIZONTAL} onDrop={onDrop}>\n                            {value.map((chip) => (\n                                <Chip\n                                    key={chip}\n                                    label={chip}\n                                    onCloseClick={() => removeChip(chip)}\n                                    closeButtonAriaLabel={replacePlaceholder(\n                                        closeButtonAriaLabel,\n                                        chip,\n                                    )}\n                                />\n                            ))}\n                        </DragAndDrop>\n                    )}\n                </div>\n                <span>{props.label}</span>\n                {props.errorText && <ErrorContainer id={errorId}>{props.errorText}</ErrorContainer>}\n            </Label>\n            <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement}\n            </VisuallyHidden>\n        </>\n    );\n}\n\nconst ChipInput = React.forwardRef<\n    HTMLInputElement,\n    ChipInputProps & React.AllHTMLAttributes<HTMLInputElement>\n>(ChipInputComponent);\n\nexport default ChipInput;\n"],"names":["Label","styled","getThemeValue","THEME_NAME","BORDER_COLOR","BACKGROUND","PRIMARY","PRIMARY_LIGHT","DISABLED_BORDER","DISABLED_BACKGROUND","DISABLED","ERROR","ERROR_LIGHT","props","touched","errorText","required","text","ErrorContainer","VisuallyHidden","ChipInputComponent","ref","value","propValue","closeButtonAriaLabel","addedAnnouncementTemplate","removedAnnouncementTemplate","setText","useState","setTouched","setValue","InputRef","React","useRef","announcement","setAnnouncement","errorId","useId","useImperativeHandle","current","replacePlaceholder","template","label","undefined","replace","prevPropValueRef","useEffect","Array","isArray","prevValue","isEqual","length","every","val","index","updateValue","newValue","deduped","from","Set","onChange","handleFocus","e","onFocus","handleChange","target","handleKeyUp","key","trim","validity","valid","removeChip","chipToRemove","filter","chip","onDrop","start","end","newItems","item","splice","_jsxs","_Fragment","_jsx","input","onKeyUp","aria-required","aria-invalid","aria-describedby","div","DragAndDrop","orientation","ORIENTATION","HORIZONTAL","map","Chip","onCloseClick","span","id","aria-live","aria-atomic","ChipInput","forwardRef"],"mappings":"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"}