@madie/madie-design-system 1.2.97 → 1.2.98

package/storybook-static/9269.8bb04a59.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"9269.f8d9701b.iframe.bundle.js","mappings":"AAIA","sources":["webpack://@madie/madie-design-system/./components/Accordion/index.jsx","webpack://@madie/madie-design-system/./components/Alert/index.js","webpack://@madie/madie-design-system/./components/AutoComplete/AutoComplete.jsx","webpack://@madie/madie-design-system/./components/Breadcrumb/index.js","webpack://@madie/madie-design-system/./components/CalloutBox/index.js","webpack://@madie/madie-design-system/./components/Card/index.js","webpack://@madie/madie-design-system/./components/DateField/DateField.jsx","webpack://@madie/madie-design-system/./components/DateTimeField/DateTimeField.jsx","webpack://@madie/madie-design-system/./components/Dropdown/index.js","webpack://@madie/madie-design-system/./components/FlashNotification/FlashNotificationUI.jsx","webpack://@madie/madie-design-system/./components/Footer/FooterUI.jsx","webpack://@madie/madie-design-system/./components/Footer/LegacyFooterUI.jsx","webpack://@madie/madie-design-system/./components/FormControlLabel/index.jsx","webpack://@madie/madie-design-system/./components/Infotip/index.js","webpack://@madie/madie-design-system/./components/Instant/index.jsx","webpack://@madie/madie-design-system/./components/Link/index.js","webpack://@madie/madie-design-system/./components/MadieConfirmDialog/index.jsx","webpack://@madie/madie-design-system/./components/MadieDeleteDialog/index.jsx","webpack://@madie/madie-design-system/./components/MadieDiscardDialog/index.jsx","webpack://@madie/madie-design-system/./components/MadieSpinner/index.jsx","webpack://@madie/madie-design-system/./components/MadieTable/index.jsx","webpack://@madie/madie-design-system/./components/MadieTooltip/index.jsx","webpack://@madie/madie-design-system/./components/MadieTooltipIcon/index.jsx","webpack://@madie/madie-design-system/./components/Modal/Modal.jsx","webpack://@madie/madie-design-system/./components/Modal/index.jsx","webpack://@madie/madie-design-system/./components/NumberInput/index.jsx","webpack://@madie/madie-design-system/./components/Pagination/index.jsx","webpack://@madie/madie-design-system/./components/RadioButton/RadioButton.jsx","webpack://@madie/madie-design-system/./components/ReadOnlyTextField/index.jsx","webpack://@madie/madie-design-system/./components/SearchAndFilter/index.jsx","webpack://@madie/madie-design-system/./components/SearchAndFilter/useFilterSearch.jsx","webpack://@madie/madie-design-system/./components/Select/index.jsx","webpack://@madie/madie-design-system/./components/Tabs/Tab.js","webpack://@madie/madie-design-system/./components/Tabs/TabPanel.js","webpack://@madie/madie-design-system/./components/Tabs/index.js","webpack://@madie/madie-design-system/./components/TextArea/index.jsx","webpack://@madie/madie-design-system/./components/TextField/index.jsx","webpack://@madie/madie-design-system/./components/TextInput/index.js","webpack://@madie/madie-design-system/./components/TimeField/TimeField.jsx","webpack://@madie/madie-design-system/./components/Toggle/Toggle.jsx","webpack://@madie/madie-design-system/./components/TruncateText/index.js","webpack://@madie/madie-design-system/./components/UnwrappedSpinner/index.js","webpack://@madie/madie-design-system/./components/index.js","webpack://@madie/madie-design-system/./lib/Chevron.jsx","webpack://@madie/madie-design-system/./themes/actionCenterTheme.js"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Chevron } from \"../../lib/Chevron.jsx\";\n\nconst Accordion = (props) => {\n    const content = useRef(null);\n    const [setActive, setActiveState] = useState(props.isOpen ? \"active\" : \"\");\n    const ariaPressed = setActive ? \"true\" : \"false\";\n    const getHeight = (node) => {\n        if (node) {\n            return `${node.scrollHeight}px`;\n        }\n        return \"auto\";\n    };\n    const height = setActive ? getHeight(content.current) : \"0px\";\n    const rotate = setActive ? \"accordion-icon rotate\" : \"accordion-icon\";\n\n    function toggleAccordion() {\n        setActiveState(setActive === \"\" ? \"active\" : \"\");\n    }\n\n    function openAccordion() {\n        setActiveState(\"active\");\n    }\n\n    function closeAccordion() {\n        setActiveState(\"\");\n    }\n\n    useEffect(() => {\n        if (props.isOpen) {\n            openAccordion();\n        } else {\n            closeAccordion();\n        }\n    }, [props.isOpen]);\n\n    return (\n        <div className=\"accordion-section\" data-testid=\"accordion\">\n            <button\n                className={`accordion ${setActive}`}\n                aria-label={props.title}\n                aria-pressed={ariaPressed}\n                aria-expanded={ariaPressed}\n                tabIndex=\"0\"\n                onClick={toggleAccordion}\n            >\n                <div className=\"accordion-left-title\">\n                    <p className=\"accordion-title\">{props.title}</p>\n                    {props.subTitle && (\n                        <p className=\"accordion-subtitle\">{props.subTitle}</p>\n                    )}\n                </div>\n                {props.centerItem && (\n                    <div className=\"accordion-center\">\n                        <p>{props.centerItem}</p>\n                    </div>\n                )}\n                {props.rightItem && (\n                    <div className=\"accordion-right\">\n                        <p>{props.rightItem}</p>\n                    </div>\n                )}\n                <div className=\"chevron-container\">\n                    <Chevron className={rotate} />\n                </div>\n            </button>\n            <div\n                ref={content}\n                style={{ maxHeight: height }}\n                className=\"accordion-content\"\n            >\n                <div className=\"accordion-text dashed-border\">\n                    {props.children}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nAccordion.propTypes = {\n    title: PropTypes.string.isRequired,\n    subTitle: PropTypes.string,\n    children: PropTypes.any.isRequired,\n    centerItem: PropTypes.string,\n    rightItem: PropTypes.string,\n    isOpen: PropTypes.bool,\n};\n\nAccordion.defaultProps = {\n    title: \"\",\n    isOpen: false,\n};\n\nexport default Accordion;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Alert = ({\n    title,\n    children,\n    description,\n    variant,\n    className,\n    ...rest\n}) => {\n    const HeadingComponent = title?.headingLevel || \"h2\";\n    return (\n        <div\n            className={`qpp-c-alert qpp-c-alert--${variant} ${className}`}\n            role=\"alert\"\n            {...rest}\n        >\n            <div className=\"qpp-c-alert__body\">\n                {title && (\n                    <HeadingComponent className=\"h4 qpp-c-alert__heading\">\n                        {typeof title === \"object\" ? title.text : title}\n                    </HeadingComponent>\n                )}\n                {description && (\n                    <p className=\"qpp-c-alert__text\">{description}</p>\n                )}\n                {children}\n            </div>\n        </div>\n    );\n};\n\nAlert.propTypes = {\n    children: PropTypes.node,\n    className: PropTypes.string,\n    description: PropTypes.string,\n    title: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.shape({\n            text: PropTypes.string,\n            headingLevel: PropTypes.string,\n        }),\n    ]),\n    variant: PropTypes.oneOf([\"info\", \"warning\", \"success\", \"error\"]),\n};\nAlert.defaultProps = {\n    children: null,\n    className: \"\",\n    description: null,\n    title: null,\n    variant: \"info\",\n};\n\nexport default Alert;\n","import React from \"react\";\nimport {\n    FormControl,\n    FormHelperText,\n    Autocomplete as MUIAutoComplete,\n    TextField,\n    Checkbox,\n} from \"@mui/material\";\nimport PropTypes from \"prop-types\";\nimport InputLabel from \"../InputLabel\";\nimport CheckBoxOutlineBlankIcon from \"@mui/icons-material/CheckBoxOutlineBlank\";\nimport CheckBoxIcon from \"@mui/icons-material/CheckBox\";\nimport { ReadOnlyTextField } from \"../index\";\nimport _ from \"lodash\";\n\nconst autoCompleteStyles = {\n    marginTop: \"8px\",\n    borderRadius: \"3px\",\n    height: 40,\n    \"& .MuiOutlinedInput-notchedOutline\": {\n        borderRadius: \"3px\",\n        \"& legend\": {\n            width: 0,\n        },\n    },\n    \"& .MuiAutocomplete-inputFocused\": {\n        border: \"none\",\n        boxShadow: \"none\",\n        outline: \"none\",\n    },\n    \"& .MuiAutocomplete-inputRoot\": {\n        paddingTop: 0,\n        paddingBottom: 0,\n    },\n    \"& .Mui-disabled\": {\n        backgroundColor: \"#EDEDED\",\n        border: \"#EDEDED\",\n    },\n    \"& .MuiChip-deleteIcon\": {\n        color: \"#757575\",\n    },\n};\n\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\n\n// unique props are required when we have duplicate options\nconst renderOptionSingle = (props, option) => {\n    const uniqueProps = {\n        ...props,\n        key: `${props.key}_${props.id}`,\n    };\n    return <li {...uniqueProps}>{option}</li>;\n};\n\nconst renderOptionMultiple = (props, option, selected) => {\n    const uniqueProps = {\n        ...props,\n        key: `${props.key}_${props.id}`,\n    };\n    return (\n        <li {...uniqueProps}>\n            <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                style={{ marginRight: 8 }}\n                checked={selected}\n            />\n            {option}\n        </li>\n    );\n};\n\nconst AutoComplete = ({\n    id,\n    dataTestId,\n    options = [],\n    disabled = false,\n    readOnly = false,\n    label,\n    placeholder,\n    multiple = false,\n    required = false,\n    error = false,\n    helperText,\n    onChange,\n    ...rest\n}) => {\n    if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...rest}\n                value={_.isEmpty(rest.value) ? \"-\" : rest.value}\n            />\n        );\n    }\n\n    return (\n        <FormControl error={error} fullWidth>\n            <div\n                style={{\n                    width: 1,\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    flexGrow: 1,\n                }}\n            />\n            <InputLabel\n                htmlFor={`${id}`}\n                id={`${id}-label`}\n                disabled={disabled}\n                required={required}\n                shrink\n                style={{ marginBottom: 0, height: 16 }} // force a heignt\n                sx={[\n                    {\n                        backgroundColor: \"transparent\",\n                        display: \"flex\",\n                        flexDirection: \"row-reverse\",\n                        alignSelf: \"baseline\",\n                        textTransform: \"none\",\n                        // force it outside the select box\n                        position: \"initial\",\n                        transform: \"translateX(0px) translateY(0px)\",\n                        fontFamily: \"Rubik\",\n                        fontWeight: 500,\n                        fontSize: 14,\n                        color: \"#333\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#AE1C1C !important\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    required && {\n                        transform: \"translateX(-12px) translateY(0px)\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#D92F2\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    disabled && {\n                        color: \"rgba(0,0,0,0.6)\",\n                    },\n                    error && {\n                        color: \"#AE1C1C !important\",\n                    },\n                ]}\n            >\n                {label}\n            </InputLabel>\n            {helperText && (\n                <FormHelperText\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    id={`${id}-helper-text`}\n                    data-testid={`${id}-helper-text`}\n                    error={error}\n                    sx={[\n                        {\n                            margin: \"4px 0px 0px 0px\",\n                            color: \"#515151\",\n                            lineHeight: 1,\n                        },\n                        error && {\n                            color: \"#AE1C1C !important\",\n                        },\n                    ]}\n                >\n                    {helperText}\n                </FormHelperText>\n            )}\n            <MUIAutoComplete\n                disablePortal\n                id={id}\n                data-testid={dataTestId}\n                options={options}\n                disabled={disabled}\n                multiple={multiple}\n                disableCloseOnSelect={multiple}\n                disableClearable={\n                    !rest.value?.length ||\n                    rest.value?.[0] === \"\" ||\n                    rest.value?.[0] === \"-\"\n                }\n                sx={\n                    multiple\n                        ? {\n                              ...autoCompleteStyles,\n                              height: \"auto\",\n                              \"& .MuiAutocomplete-inputRoot\": {\n                                  paddingTop: 1,\n                                  paddingBottom: 1,\n                              },\n                          }\n                        : autoCompleteStyles\n                }\n                renderInput={(params) => {\n                    const { inputProps } = params;\n                    inputProps[\"aria-required\"] = required;\n                    inputProps[\"aria-describedby\"] = `${id}-helper-text`;\n                    inputProps[\"aria-labelledby\"] = `${id}-label`;\n                    return (\n                        <TextField\n                            sx={{\n                                border: \"none\",\n                                \"& .MuiOutlinedInput-notchedOutline\": {\n                                    borderRadius: \"3px\",\n                                    borderColor: \"#8C8C8C\",\n                                    \"& legend\": {\n                                        width: 0,\n                                    },\n                                },\n                                \"& .MuiInputBase-input\": {\n                                    opacity: 1,\n                                    color: \"#333\",\n                                    \"&::placeholder\": {\n                                        opacity: 1,\n                                        color: \"#717171\",\n                                    },\n                                },\n                            }}\n                            {...params}\n                            placeholder={placeholder}\n                            inputProps={inputProps}\n                            label=\"\"\n                            error={error}\n                        />\n                    );\n                }}\n                renderOption={(props, option, { selected }) => {\n                    return multiple\n                        ? renderOptionMultiple(props, option, selected)\n                        : renderOptionSingle(props, option);\n                }}\n                {...rest}\n                onChange={(_event, selectedVal, reason, detail) =>\n                    onChange(id, selectedVal || \"\", reason, detail)\n                }\n            />\n        </FormControl>\n    );\n};\n\nAutoComplete.propTypes = {\n    id: PropTypes.string,\n    dataTestId: PropTypes.string,\n    placeholder: PropTypes.string,\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    multiple: PropTypes.bool,\n    error: PropTypes.bool,\n    label: PropTypes.string,\n    helperText: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.element),\n    onChange: PropTypes.any,\n};\n\nexport default AutoComplete;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Breadcrumb = ({\n    breadcrumbClass,\n    crumbs,\n    dark,\n    RouterLink,\n    routerExcludedLinks,\n}) => {\n    return (\n        <nav\n            className={`qpp-c-breadcrumbs ${\n                !dark ? \"qpp-c-breadcrumbs--light\" : \"\"\n            } ${breadcrumbClass}`}\n            aria-label=\"Breadcrumbs\"\n        >\n            <ol className=\"qpp-c-breadcrumbs__list\">\n                {crumbs.map((crumb, i) => {\n                    if (crumb.url) {\n                        if (\n                            RouterLink &&\n                            !routerExcludedLinks.includes(crumb.url)\n                        ) {\n                            return (\n                                <li\n                                    className=\"qpp-c-breadcrumbs__list-item\"\n                                    key={crumb.title}\n                                >\n                                    <RouterLink\n                                        className=\"qpp-c-breadcrumbs__link\"\n                                        to={crumb.url}\n                                        data-track-category={crumb.category}\n                                        data-track-action=\"Click\"\n                                        data-track-label={crumb.label}\n                                    >\n                                        <span>{crumb.title}</span>\n                                    </RouterLink>\n                                </li>\n                            );\n                        }\n                        return (\n                            <li\n                                className=\"qpp-c-breadcrumbs__list-item\"\n                                key={crumb.title}\n                            >\n                                <a\n                                    className=\"qpp-c-breadcrumbs__link\"\n                                    href={crumb.url}\n                                    data-track-category={crumb.category}\n                                    data-track-action=\"Click\"\n                                    data-track-label={crumb.label}\n                                >\n                                    <span>{crumb.title}</span>\n                                </a>\n                            </li>\n                        );\n                    } else {\n                        return (\n                            <li\n                                key={crumb}\n                                className={`${\n                                    i === crumbs.length - 1 ? \"sr-only\" : \"\"\n                                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}\n                                aria-current=\"page\"\n                            >\n                                <span>{crumb}</span>\n                            </li>\n                        );\n                    }\n                })}\n            </ol>\n        </nav>\n    );\n};\n\nBreadcrumb.propTypes = {\n    breadcrumbClass: PropTypes.string,\n    crumbs: PropTypes.array.isRequired,\n    dark: PropTypes.bool,\n    RouterLink: PropTypes.func,\n    routerExcludedLinks: PropTypes.array,\n};\n\nBreadcrumb.defaultProps = {\n    breadcrumbClass: \"\",\n    dark: false,\n    RouterLink: null,\n    routerExcludedLinks: [],\n};\n\nexport default Breadcrumb;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport FeatherIcon from \"feather-icons-react\";\n\nimport Button from \"../Button\";\n\nconst getCtaButton = (button) => {\n    if (button) {\n        if (React.isValidElement(button)) {\n            return button;\n        }\n        if (button.href) {\n            const { href, text, ...restLink } = button;\n            return (\n                <a\n                    className=\"qpp-c-button qpp-c-button--secondary qpp-c-button--icon-after\"\n                    href={href}\n                    {...restLink}\n                >\n                    {text}\n                    <FeatherIcon icon=\"chevron-right\" />\n                </a>\n            );\n        }\n        const { onClick, text, ...restButton } = button;\n        return (\n            <Button\n                variant=\"secondary\"\n                className=\"qpp-c-button--icon-after\"\n                onClick={onClick}\n                {...restButton}\n            >\n                {text}\n                <FeatherIcon icon=\"chevron-right\" />\n            </Button>\n        );\n    }\n    return null;\n};\n\nconst CalloutBox = ({\n    title,\n    description,\n    button,\n    input,\n    children,\n    headerLevel,\n}) => {\n    const Header = `h${headerLevel}`;\n    return (\n        <aside className=\"qppds qpp-u-sm-padding--32 qpp-u-padding--24 qpp-u-fill--blue-70\">\n            {title && (\n                <Header className=\"qpp-u-font-size--24 qpp-u-color--white qpp-u-margin-bottom--16 qpp-u-margin-top--0 qpp-u-font-weight--regular\">\n                    {title}\n                </Header>\n            )}\n            {description && (\n                <p className=\"qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18\">\n                    {description}\n                </p>\n            )}\n            {children && (\n                <div className=\"qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18\">\n                    {children}\n                </div>\n            )}\n            {(input || button) && (\n                <div className=\"qpp-u-display--flex qpp-u-align-items--center qpp-u-flex-wrap--wrap qpp-u-margin-top--24\">\n                    {input && (\n                        <input\n                            className=\"qpp-c-text-input qpp-u-sm-margin-right--16 qpp-u-margin-bottom--16 qpp-u-sm-margin-bottom--0 qpp-u-sm-width--auto qpp-u-width--100\"\n                            type=\"text\"\n                            {...input}\n                        />\n                    )}\n                    {getCtaButton(button)}\n                </div>\n            )}\n        </aside>\n    );\n};\n\nCalloutBox.propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    button: PropTypes.shape({\n        text: PropTypes.string,\n        onClick: PropTypes.func,\n        href: PropTypes.string,\n    }),\n    input: PropTypes.shape({\n        value: PropTypes.string,\n        name: PropTypes.string,\n        id: PropTypes.string,\n    }),\n    children: PropTypes.node,\n    headerLevel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n};\n\nCalloutBox.defaultProps = {\n    title: null,\n    description: null,\n    button: null,\n    input: null,\n    children: null,\n    headerLevel: 2,\n};\n\nexport default CalloutBox;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport FeatherIcon from \"feather-icons-react\";\n\nconst Card = ({\n    children,\n    className,\n    cta,\n    description,\n    eyebrow,\n    img,\n    parentTag,\n    responsive,\n    routerComponent,\n    size,\n    title,\n    variant,\n}) => {\n    const classes = [\n        \"qppds\",\n        \"qpp-c-card\",\n        size && `qpp-c-card--${size}`,\n        img && \"qpp-c-card--image\",\n        variant === \"flag\" && responsive && \"qpp-c-xs-card--flag\",\n        variant === \"flag\" && !responsive && \"qpp-c-card--flag\",\n        className,\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    const Container = parentTag || \"div\";\n    const HeadingComponent = title?.headingLevel || \"h3\";\n    const LinkComponent = routerComponent || \"a\";\n\n    return (\n        <Container className={classes}>\n            <div className=\"qpp-c-card__content\">\n                <div className=\"qpp-c-card__header\">\n                    {title && (\n                        <HeadingComponent className=\"h3 qpp-c-card__title\">\n                            {typeof title === \"object\" ? title.text : title}\n                        </HeadingComponent>\n                    )}\n                    {eyebrow && (\n                        <span className=\"l2 qpp-c-card__eyebrow\">\n                            {eyebrow}\n                        </span>\n                    )}\n                </div>\n                {description && (\n                    <div className=\"qpp-c-card__body\">\n                        <p className=\"p1\">{description}</p>\n                    </div>\n                )}\n                {children && <div className=\"qpp-c-card__body\">{children}</div>}\n                {cta && (\n                    <div className=\"qpp-c-card__cta\">\n                        {React.isValidElement(cta) ? (\n                            cta\n                        ) : (\n                            <LinkComponent\n                                href={cta.href}\n                                className=\"qpp-c-button qpp-c-button--text qpp-c-button--icon-after\"\n                                {...cta}\n                            >\n                                {cta.text}{\" \"}\n                                <FeatherIcon\n                                    icon={cta.icon || \"chevron-right\"}\n                                />\n                            </LinkComponent>\n                        )}\n                    </div>\n                )}\n            </div>\n            {img &&\n                (() => {\n                    const { useBgImage, url, alt, ...restImg } = img;\n                    return (\n                        <div className=\"qpp-c-card__media\">\n                            {useBgImage ? (\n                                <div\n                                    role=\"img\"\n                                    style={{ backgroundImage: `url(${url})` }}\n                                    aria-label={alt}\n                                    {...restImg}\n                                />\n                            ) : (\n                                <img src={url} alt={alt} {...restImg} />\n                            )}\n                        </div>\n                    );\n                })()}\n        </Container>\n    );\n};\n\nCard.propTypes = {\n    children: PropTypes.node,\n    className: PropTypes.string,\n    cta: PropTypes.oneOfType([\n        PropTypes.node,\n        PropTypes.shape({\n            href: PropTypes.string,\n            text: PropTypes.string,\n            icon: PropTypes.string,\n        }),\n    ]),\n    description: PropTypes.string,\n    eyebrow: PropTypes.string,\n    img: PropTypes.shape({\n        url: PropTypes.string,\n        alt: PropTypes.string,\n        useBgImage: PropTypes.bool,\n    }),\n    parentTag: PropTypes.string,\n    responsive: PropTypes.bool,\n    routerComponent: PropTypes.func,\n    size: PropTypes.oneOf([\"small\", \"medium\", \"large\"]),\n    title: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.shape({\n            text: PropTypes.string,\n            headingLevel: PropTypes.string,\n        }),\n    ]),\n    variant: PropTypes.oneOf([\"default\", \"flag\"]),\n};\n\nCard.defaultProps = {\n    children: null,\n    className: null,\n    cta: null,\n    description: null,\n    eyebrow: null,\n    img: null,\n    parentTag: null,\n    responsive: false,\n    routerComponent: null,\n    size: null,\n    title: null,\n    variant: \"default\",\n};\n\nexport default Card;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextField from \"../TextField\";\nimport { Box } from \"@mui/material\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers/LocalizationProvider\";\nimport { AdapterDayjs } from \"@mui/x-date-pickers/AdapterDayjs\";\nimport dayjs from \"dayjs\";\nimport utc from \"dayjs/plugin/utc\";\nimport { ReadOnlyTextField } from \"../index\";\n\ndayjs.extend(utc);\ndayjs.utc();\nexport const dateTextFieldStyle = {\n    width: \"170px\",\n    height: 40,\n    marginTop: \"8px\",\n    \"& .MuiOutlinedInput-notchedOutline\": {\n        border: \"1px solid #8C8C8C\",\n        borderRadius: \"3px\",\n        \"& legend\": {\n            width: 0,\n        },\n    },\n    \"& .MuiOutlinedInput-root\": {\n        \"&&\": {\n            borderRadius: \"3px\",\n        },\n    },\n    \"& .MuiInputBase-input\": {\n        color: \"#333333\",\n        fontFamily: \"Rubik\",\n        fontSize: 14,\n        borderRadius: \"3px\",\n        padding: \"9px\",\n        Width: \"170px\",\n        \"&::placeholder\": {\n            opacity: 1,\n            color: \"#717171\",\n            fontFamily: \"Rubik\",\n            fontSize: 14,\n        },\n    },\n};\n\nconst DateField = ({\n    id = \"default_id\",\n    label,\n    value,\n    handleDateChange,\n    disabled = false,\n    readOnly = false,\n    error,\n    helperText,\n    required = false,\n    containerSx = {},\n    textFieldSx = {},\n    ...rest\n}) => {\n    if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...rest}\n                value={value ? dayjs.utc(value).format(\"MM/DD/YYYY\") : \"-\"}\n            />\n        );\n    }\n\n    if (containerSx === undefined || containerSx === null) {\n        containerSx = {};\n    }\n    if (textFieldSx === undefined || textFieldSx === null) {\n        textFieldSx = {};\n    }\n\n    return (\n        <LocalizationProvider dateAdapter={AdapterDayjs}>\n            <Box sx={{ ...containerSx }}>\n                <DatePicker\n                    value={value ? dayjs.utc(value) : null}\n                    onChange={handleDateChange}\n                    disabled={disabled}\n                    onClose={() => rest?.onBlur()}\n                    slotProps={{\n                        textField: (params) => {\n                            const { InputProps } = params;\n                            InputProps[\"data-testid\"] = id;\n                            InputProps[\"aria-required\"] = required;\n                            return {\n                                id: id,\n                                label,\n                                sx: { ...dateTextFieldStyle, ...textFieldSx },\n                                value: value ? dayjs.utc(value) : null,\n                                onChange: handleDateChange,\n                                //...rest,\n                                error: error,\n                                helperText: helperText,\n                                onBlur: rest?.onBlur,\n                            };\n                        },\n                        openPickerButton: {\n                            id: `${id}-open-picker-button`,\n                            dataTestId: `${id}-open-picker-button`,\n                        },\n                    }}\n                    slots={{ textField: TextField }}\n                />\n            </Box>\n        </LocalizationProvider>\n    );\n};\nDateField.propTypes = {\n    label: PropTypes.string.isRequired,\n    value: PropTypes.object,\n    handleDateChange: PropTypes.func.isRequired,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    id: PropTypes.string,\n    error: PropTypes.bool,\n    helperText: PropTypes.string,\n    required: PropTypes.bool,\n    containerSx: PropTypes.object,\n    textFieldSx: PropTypes.object,\n};\n\nexport default DateField;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextField from \"../TextField\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers/LocalizationProvider\";\nimport { AdapterDayjs } from \"@mui/x-date-pickers/AdapterDayjs\";\nimport dayjs from \"dayjs\";\nimport utc from \"dayjs/plugin/utc\";\n\nimport { FormControl } from \"@mui/material\";\nimport { ReadOnlyTextField } from \"../index\";\n\ndayjs.extend(utc);\ndayjs.utc();\nexport const dateTimeTextFieldStyle = {\n    width: \"240px\",\n    height: \"40px\",\n    marginTop: \"8px\",\n    \"& .MuiOutlinedInput-notchedOutline\": {\n        border: \"1px solid #8C8C8C\",\n        borderRadius: \"3px\",\n        \"& legend\": {\n            width: 0,\n        },\n    },\n    \"& .MuiOutlinedInput-root\": {\n        \"&&\": {\n            borderRadius: \"3px\",\n        },\n    },\n    \"& .MuiInputBase-input\": {\n        color: \"#333333\",\n        fontFamily: \"Rubik\",\n        fontSize: 14,\n        borderRadius: \"3px\",\n        padding: \"9px\",\n        Width: \"240px\",\n        \"&::placeholder\": {\n            opacity: 1,\n            color: \"#717171\",\n            fontFamily: \"Rubik\",\n            fontSize: 14,\n        },\n    },\n    \"& .MuiInputBase-root\": {\n        height: \"40px\",\n    },\n};\n\nconst DateTimeField = ({\n    label,\n    dateTimeValue,\n    handleDateTimeChange,\n    disabled = false,\n    readOnly = false,\n    id = \"default_dateTime-input\",\n}) => {\n    if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                label={label}\n                value={\n                    dateTimeValue\n                        ? dayjs.utc(dateTimeValue).format(\"MM/DD/YYYY hh:mm A\")\n                        : \"-\"\n                }\n                id={id}\n                size=\"small\"\n            />\n        );\n    }\n    return (\n        <FormControl>\n            <LocalizationProvider dateAdapter={AdapterDayjs}>\n                <DateTimePicker\n                    value={dateTimeValue ? dayjs.utc(dateTimeValue) : null}\n                    onChange={handleDateTimeChange}\n                    views={[\"year\", \"day\", \"hours\", \"minutes\"]}\n                    disabled={disabled}\n                    slotProps={{\n                        textField: {\n                            id: id, // textfield will delegate an input data-testid based off id\n                            sx: dateTimeTextFieldStyle,\n                            label,\n                        },\n                        openPickerButton: {\n                            id: `${id}-open-picker-button`,\n                            dataTestId: `${id}-open-picker-button`,\n                        },\n                    }}\n                    slots={{ textField: TextField }}\n                />\n            </LocalizationProvider>\n        </FormControl>\n    );\n};\nDateTimeField.propTypes = {\n    id: PropTypes.string,\n    dateTimeValue: PropTypes.object,\n    handleDateTimeChange: PropTypes.func.isRequired,\n    label: PropTypes.string.isRequired,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n};\n\nexport default DateTimeField;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Dropdown = ({\n    className,\n    id,\n    ariaLabelledBy,\n    ariaLabel,\n    onChange,\n    dataTestId,\n    name,\n    dataType,\n    disabled,\n    size,\n    options,\n    children,\n    parentElement,\n    ...rest\n}) => {\n    const dropdownClass = [\n        \"qpp-c-dropdown\",\n        size === \"big\" && \"qpp-c-dropdown--big\",\n        className,\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    return (\n        <select\n            id={id}\n            aria-labelledby={ariaLabelledBy}\n            aria-label={ariaLabel}\n            className={dropdownClass || \"\"}\n            onChange={onChange}\n            data-testid={dataTestId}\n            name={name}\n            disabled={disabled}\n            data-type={dataType}\n            {...rest}\n        >\n            {children}\n            {options.map(({ disabled, name, value }) => (\n                <option disabled={disabled} key={value} value={value}>\n                    {name}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nDropdown.propTypes = {\n    children: PropTypes.node,\n    className: PropTypes.string,\n    id: PropTypes.string,\n    ariaLabelledBy: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    onChange: PropTypes.func,\n    value: PropTypes.string,\n    defaultValue: PropTypes.string,\n    dataTestId: PropTypes.string,\n    name: PropTypes.string,\n    dataType: PropTypes.string,\n    disabled: PropTypes.bool,\n    size: PropTypes.oneOf([\"big\"]),\n    options: PropTypes.array,\n    parentElement: PropTypes.string,\n};\n\nDropdown.defaultProps = {\n    children: false,\n    className: \"qpp-u-width--100\",\n    id: null,\n    ariaLabelledBy: null,\n    ariaLabel: null,\n    onChange: () => null,\n    dataTestId: null,\n    name: null,\n    dataType: null,\n    disabled: false,\n    size: null,\n    options: [],\n    parentElement: \"span\",\n};\n\nexport default Dropdown;\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport reactDOM from \"react-dom\";\nimport { CloseXIcon } from \"../../lib/SvgComponents.jsx\";\n\nclass FlashNotification extends Component {\n    constructor(props) {\n        super(props);\n        this.state = { isClosed: true };\n        this._closeFlashNotification = this.closeFlashNotification.bind(this);\n        this._fadeOutNotification = this.fadeOutNotification.bind(this);\n    }\n\n    render() {\n        return (\n            <div\n                className={\n                    this.state.isClosed\n                        ? \"flash-notification notification-closed\"\n                        : \"flash-notification\"\n                }\n                ref={(elem) => {\n                    this.element = elem;\n                }}\n            >\n                <div className={this.props.success ? \"success\" : \"error\"}>\n                    <div className=\"icon\"></div>\n                    <div className=\"text-content\">\n                        <p className=\"title-text\">{this.props.titleText}</p>\n                        <p className=\"body-text\">{this.props.bodyText}</p>\n                    </div>\n                    <div className=\"close-notification-container\">\n                        <button\n                            className=\"closeNotification\"\n                            aria-label=\"Close notification\"\n                            onClick={this._closeFlashNotification}\n                        >\n                            <svg className=\"close-icon\" aria-hidden=\"true\">\n                                {/* <use xlinkHref=\"#closex\" /> */}\n                                <CloseXIcon />\n                            </svg>\n                        </button>\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    componentDidMount() {\n        setTimeout(\n            function () {\n                this.setState({ isClosed: false });\n            }.bind(this),\n            250\n        );\n\n        this.timer = setTimeout(\n            function () {\n                this._fadeOutNotification();\n            }.bind(this),\n            10000\n        );\n    }\n\n    fadeOutNotification() {\n        this.setState({ isClosed: true });\n        setTimeout(\n            function () {\n                reactDOM.unmountComponentAtNode(this.element.parentElement);\n                if (typeof this.props.onClose === \"function\") {\n                    this.props.onClose();\n                }\n            }.bind(this),\n            500\n        );\n    }\n\n    closeFlashNotification() {\n        clearTimeout(this.timer);\n        this._fadeOutNotification();\n    }\n}\n\nFlashNotification.propTypes = {\n    bodyText: PropTypes.string,\n    success: PropTypes.bool.isRequired,\n    titleText: PropTypes.string,\n    onClose: PropTypes.func,\n};\n\nexport default FlashNotification;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport LegacyFooterUI from \"./LegacyFooterUI\";\n\nconst FooterUI = (props) => {\n    const isNewFooter = props.isNewFooter;\n    const isIESupportPage = props.isIESupportPage;\n    const signUpNowLink = props.showHcdResearch\n        ? \"/about/hcd-research\"\n        : \"mailto:madie@cms.hhs.gov?subject=Sign up for feedback sessions\";\n\n    // Default footer assets\n    const assets = {\n        ...{\n            hhsLogo: (\n                <img\n                    className=\"hhs-logo\"\n                    alt=\"Department of Health &amp; Human Services USA\"\n                    src=\"/images/hhs-logo-black.svg\"\n                />\n            ),\n            madieLogo: (\n                <img\n                    className=\"qpp-logo\"\n                    src=\"/images/qpp_logo_rgb_color.png\"\n                    alt=\"MADiE Measure Authoring Development Integrated Environment logo\"\n                />\n            ),\n        },\n        ...props.assets,\n    };\n\n    const setLink = (link) => {\n        return isIESupportPage ? \"/\" : link;\n    };\n\n    if (isNewFooter) {\n        return (\n            <>\n                {!isIESupportPage && (\n                    <div className=\"feedback-session-sign-up\" />\n                )}\n                <footer aria-label=\"Site footer\" className=\"global-footer\">\n                    <div className=\"build-version\" id=\"build-version\">\n                        {props.buildVersion}\n                    </div>\n\n                    <div className=\"responsive-container\">\n                        <div className=\"other-links\">\n                            <hr className=\"divider-top\" />\n                            <ul className=\"small\">\n                                <li>\n                                    <a\n                                        href={setLink(\n                                            \"https://harp.cms.gov/login/terms-of-use\"\n                                        )}\n                                        aria-label=\"Terms of Use\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenTermsOfService\"\n                                        data-track-label=\"Terms of Use\"\n                                    >\n                                        Terms of Use\n                                    </a>\n                                </li>\n                                <li className=\"divider\"></li>{\" \"}\n                                <li>\n                                    <a\n                                        href={setLink(\n                                            \"https://www.cms.gov/privacy\"\n                                        )}\n                                        aria-label=\"Privacy Policy\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenPrivacyPolicy\"\n                                        data-track-label=\"Privacy Policy\"\n                                    >\n                                        Privacy Policy\n                                    </a>\n                                </li>\n                                <li className=\"divider\"></li>{\" \"}\n                                <li>\n                                    <a\n                                        href={setLink(\n                                            \"https://www.hhs.gov/web/governance/digital-strategy/it-policy-archive/hhs-rules-of-behavior-for-the-use-of-hhs-information-and-it-resources-policy.html\"\n                                        )}\n                                        aria-label=\"Rules of Behavior\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenRulesofBehavior\"\n                                        data-track-label=\"Rules of Behavior\"\n                                    >\n                                        Rules of Behavior\n                                    </a>\n                                </li>\n                            </ul>\n                            <hr className=\"divider-bottom\" />\n                        </div>\n                        <div className=\"qpp-hhs-logo-container\">\n                            <div className=\"qpp-logo-container\">\n                                {assets.qppLogo}\n                            </div>\n                            <div className=\"hhs-logo-container\">\n                                {assets.hhsLogo}\n                                <p>\n                                    A federal government website managed and\n                                    paid for by the U.S Centers for Medicare\n                                    &amp; Medicaid Services. 7500 Security\n                                    Boulevard, Baltimore MD 21244\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                </footer>\n            </>\n        );\n    }\n    return (\n        <LegacyFooterUI\n            buildVersion={props.buildVersion}\n            isFullWidth={props.isFullWidth}\n            signUpNowLink={signUpNowLink}\n        />\n    );\n};\n\nFooterUI.propTypes = {\n    buildVersion: PropTypes.string,\n    isFullWidth: PropTypes.bool,\n    isNewFooter: PropTypes.bool,\n    isIESupportPage: PropTypes.bool,\n    showHcdResearch: PropTypes.bool,\n    assets: PropTypes.shape({\n        cmsLogo: PropTypes.element,\n        madieLogo: PropTypes.element,\n    }),\n};\n\nexport default FooterUI;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport InfoTip from \"../Infotip/Infotip\";\n\nconst infoTipLabel =\n    \"When dialing 711, you will automatically be connected to a TRS Communications Assistant who will relay your conversation to the help desk agent with strict confidentiality.\";\n\nconst LegacyFooterUI = ({ buildVersion, isFullWidth, signUpNowLink }) => {\n    return (\n        <footer className=\"legacy-footer\">\n            <div className=\"build-version\" id=\"build-version\">\n                {buildVersion}\n            </div>\n            <div className=\"banner\">\n                <div\n                    className={\n                        isFullWidth\n                            ? \"container-full-width\"\n                            : \"responsive-container\"\n                    }\n                >\n                    <div className=\"row\">\n                        <div className=\"col-sm-12 col-md-12 col-lg-12\">\n                            <span>Help shape the future of MADiE</span> by\n                            participating in user feedback sessions.{\" \"}\n                            <a className=\"email-note-link\" href={signUpNowLink}>\n                                Send us an email to sign up\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div\n                className={\n                    isFullWidth\n                        ? \"container-full-width\"\n                        : \"responsive-container\"\n                }\n            >\n                <div className=\"row\">\n                    <div\n                        className={\n                            isFullWidth\n                                ? \"col-sm-12 col-md-8 col-lg-8\"\n                                : \"col-sm-8 col-md-9 col-lg-9\"\n                        }\n                    >\n                        <div className=\"logo-container\">\n                            <img\n                                src=\"/images/qpp_logo_reversed.png\"\n                                alt=\"Quality Payment Program\"\n                                className=\"qpp-logo\"\n                            />\n                            <div className=\"social-container\">\n                                <a\n                                    rel=\"noopener noreferrer\"\n                                    target=\"_blank\"\n                                    className=\"social-link\"\n                                    href=\"https://twitter.com/CMSGov\"\n                                    aria-label=\"Follow us on Twitter. This link opens in a new window.\"\n                                >\n                                    <span className=\"glyphicon glyphicon-twitter\"></span>\n                                </a>\n                                <a\n                                    rel=\"noopener noreferrer\"\n                                    target=\"_blank\"\n                                    className=\"social-link\"\n                                    href=\"https://www.youtube.com/playlist?list=PLaV7m2-zFKpj_6fBsqav6GvFzzq9oOpkk\"\n                                    aria-label=\"Follow us on YouTube. This link opens in a new window.\"\n                                >\n                                    <span className=\"glyphicon glyphicon-youtube\"></span>\n                                </a>\n                            </div>\n                        </div>\n                        <div className=\"links\">\n                            <ul>\n                                <li>\n                                    <a\n                                        href=\"/developers\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenDeveloperTools\"\n                                        data-track-label=\"Quality Payment Program\"\n                                    >\n                                        Developer Tools\n                                    </a>\n                                </li>\n                                <li>\n                                    <a\n                                        href=\"/about/resource-library\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenEducationAndTools\"\n                                        data-track-label=\"Education and Tools\"\n                                    >\n                                        Resource Library\n                                    </a>\n                                </li>\n                                <li>\n                                    <a\n                                        href=\"/glossary\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenGlossary\"\n                                        data-track-label=\"Glossary\"\n                                    >\n                                        Glossary\n                                    </a>\n                                </li>\n                                <li>\n                                    <a\n                                        href=\"/resources/help-and-support\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenHelpAndSupport\"\n                                        data-track-label=\"Help and Support\"\n                                    >\n                                        Help and Support\n                                    </a>\n                                </li>\n                            </ul>\n                            <ul className=\"small\">\n                                <li>\n                                    <a\n                                        href=\"https://www.cms.gov/privacy\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenPrivacyDisclaimer\"\n                                        data-track-label=\"Notice of Privacy and Disclaimer\"\n                                    >\n                                        CMS Privacy Notice\n                                    </a>\n                                </li>\n                                <span className=\"divider\"></span>\n                                <li>\n                                    <a\n                                        href=\"https://www.cms.gov/About-CMS/Agency-Information/Aboutwebsite/Policiesforaccessibility\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"OpenAccessibility\"\n                                        data-track-label=\"Accessibility\"\n                                    >\n                                        Accessibility\n                                    </a>\n                                </li>\n                                <span className=\"divider\"></span>\n                                <li>\n                                    <a\n                                        className=\"adobe-link\"\n                                        rel=\"noopener noreferrer\"\n                                        target=\"_blank\"\n                                        href=\"https://get.adobe.com/reader\"\n                                        data-track-category=\"FooterNav\"\n                                        data-track-action=\"DownloadAdobeReader\"\n                                        data-track-label=\"AdobeReader\"\n                                    >\n                                        <svg className=\"icon\">\n                                            <use xlinkHref=\"#icon-download\" />\n                                        </svg>\n                                        Download Adobe Reader\n                                    </a>\n                                </li>\n                                <span className=\"divider\"></span>\n                                <li>\n                                    <a\n                                        href=\"mailto:sb-mat-help@semanticbits.com\"\n                                        className=\"email-link\"\n                                    >\n                                        sb-mat-help@semanticbits.com\n                                    </a>\n                                </li>\n                                <li>\n                                    1-866-288-8292 (TRS: 711)\n                                    <div className=\"footer-trs-infotip\">\n                                        <InfoTip\n                                            lightIcon\n                                            label={infoTipLabel}\n                                        />\n                                    </div>\n                                </li>\n                            </ul>\n                        </div>\n                    </div>\n                    <div\n                        className={\n                            isFullWidth\n                                ? \"col-sm-12 col-md-4 col-lg-4\"\n                                : \"col-sm-4 col-md-3 col-lg-3\"\n                        }\n                    >\n                        <div className=\"hhs-logo-container\">\n                            <img\n                                alt=\"Department of Health &amp; Human Services USA\"\n                                src=\"/images/hhs-logo-white.svg\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </footer>\n    );\n};\n\nLegacyFooterUI.propTypes = {\n    buildVersion: PropTypes.string,\n    isFullWidth: PropTypes.bool,\n    signUpNowLink: PropTypes.string,\n};\n\nexport default LegacyFooterUI;\n","import React from \"react\";\nimport { FormControlLabel as MUIFormControlLabel } from \"@mui/material\";\n\nconst Label = (props) => {\n    return (\n        <MUIFormControlLabel\n            sx={{\n                flexGrow: 1,\n                textTransform: \"none\",\n                margin: 0,\n                \"& .MuiTypography-root\": {\n                    color: \"#333\",\n                    fontSize: 14,\n                    fontFamily: \"Rubik\",\n                    fontWeight: 500,\n                },\n            }}\n            {...props}\n        />\n    );\n};\n\nexport default Label;\n","import Infotip from \"./Infotip\";\n\nexport default Infotip;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextField from \"../TextField\";\nimport { DatePicker } from \"@mui/x-date-pickers/DatePicker\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers/LocalizationProvider\";\nimport { AdapterDayjs } from \"@mui/x-date-pickers/AdapterDayjs\";\nimport dayjs from \"dayjs\";\nimport utc from \"dayjs/plugin/utc\";\nimport timezone from \"dayjs/plugin/timezone\";\nimport { FormControl, Box } from \"@mui/material\";\n\ndayjs.extend(utc);\ndayjs.utc();\ndayjs.extend(timezone);\nconst formatDateTime = (dateTime) =>\n    dayjs.utc(dateTime).format(\"YYYY-MM-DDTHH:mm:ss.SSSZ\");\nexport const defaultDateFieldStyles = {\n    width: \"170px\",\n    height: 40,\n    marginTop: \"8px\",\n    \"& .MuiOutlinedInput-notchedOutline\": {\n        border: \"1px solid #8C8C8C\",\n        borderRadius: \"3px\",\n        \"& legend\": {\n            width: 0,\n        },\n    },\n    \"& .MuiOutlinedInput-root\": {\n        \"&&\": {\n            borderRadius: \"3px\",\n        },\n    },\n    \"& .MuiInputBase-input\": {\n        color: \"#333333\",\n        fontFamily: \"Rubik\",\n        fontSize: 14,\n        borderRadius: \"3px\",\n        padding: \"9px\",\n        Width: \"170px\",\n        \"&::placeholder\": {\n            opacity: 1,\n            color: \"#717171\",\n            fontFamily: \"Rubik\",\n            fontSize: 14,\n        },\n    },\n};\nconst Instant = ({\n    dateTimeValue,\n    handleDateTimeChange,\n    required = false,\n    disabled,\n    id = \"default_dateTime-input\",\n    textFieldSx = {},\n    dateFieldSx = {},\n    error = false,\n    helperText,\n    datePickerProps = {},\n    onBlur,\n    ...rest\n}) => {\n    const textFieldStyles = {\n        width: \"55px\",\n        height: \"40px\",\n        \"& .MuiInputBase-input\": {\n            color: \"#333\",\n            fontFamily: \"Rubik\",\n            fontSize: 14,\n            borderRadius: \"3px\",\n            padding: \"9px 5px 9px 5px\",\n            \"&::placeholder\": {\n                opacity: 1,\n                color: \"#717171\",\n            },\n        },\n    };\n    const handleHoursChange = (e) => {\n        const newHours = parseInt(e.target.value, 10);\n        if (dateTimeValue) {\n            const updatedDateTime = dayjs\n                .utc(dateTimeValue)\n                .set(\"hour\", newHours);\n            handleDateTimeChange(formatDateTime(updatedDateTime));\n        }\n    };\n    const handleMinutesChange = (e) => {\n        const newMinutes = parseInt(e.target.value, 10);\n        if (dateTimeValue) {\n            const updatedDateTime = dayjs\n                .utc(dateTimeValue)\n                .set(\"minute\", newMinutes);\n            handleDateTimeChange(formatDateTime(updatedDateTime));\n        }\n    };\n    const handleSecondsChange = (e) => {\n        const newSeconds = parseInt(e.target.value, 10);\n        if (dateTimeValue) {\n            const updatedDateTime = dayjs\n                .utc(dateTimeValue)\n                .set(\"second\", newSeconds);\n            handleDateTimeChange(formatDateTime(updatedDateTime));\n        }\n    };\n    const handleMillisecondsChange = (e) => {\n        const newMilliseconds = parseInt(e.target.value, 10);\n        if (dateTimeValue) {\n            const updatedDateTime = dayjs\n                .utc(dateTimeValue)\n                .set(\"millisecond\", newMilliseconds);\n            handleDateTimeChange(formatDateTime(updatedDateTime));\n        }\n    };\n    const onDateChange = (newDate) => {\n        if (!isNaN(newDate)) {\n            if (dateTimeValue) {\n                const updatedDate = dayjs.utc(newDate);\n                handleDateTimeChange(formatDateTime(updatedDate));\n            } else {\n                const updatedDate = newDate.utc(newDate);\n                handleDateTimeChange(formatDateTime(updatedDate));\n            }\n        }\n    };\n    return (\n        <FormControl error={error}>\n            <LocalizationProvider dateAdapter={AdapterDayjs}>\n                <Box\n                    sx={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        flexGrow: 1,\n                    }}\n                >\n                    <Box sx={{ marginRight: \"24px\" }}>\n                        <DatePicker\n                            value={\n                                dateTimeValue ? dayjs.utc(dateTimeValue) : null\n                            }\n                            onChange={onDateChange}\n                            disabled={disabled}\n                            onClose={() => (onBlur ? onBlur() : undefined)}\n                            slotProps={{\n                                textField: (params) => {\n                                    const { InputProps } = params;\n                                    InputProps[\"data-testid\"] = id;\n                                    InputProps[\"aria-required\"] = required;\n                                    return {\n                                        id: id,\n                                        label: \"Date\",\n                                        sx: {\n                                            ...defaultDateFieldStyles,\n                                            ...dateFieldSx,\n                                        },\n                                        value: dateTimeValue\n                                            ? dayjs.utc(dateTimeValue)\n                                            : null,\n                                        onChange: onDateChange,\n                                        error,\n                                        helperText: helperText,\n                                        onBlur: onBlur,\n                                        ...rest,\n                                    };\n                                },\n                                openPickerButton: {\n                                    id: `${id}-open-picker-button`,\n                                    \"data-testid\": `${id}-open-picker-button`,\n                                },\n                            }}\n                            slots={{ textField: TextField }}\n                        />\n                    </Box>\n                    <TextField\n                        id={`${id}-hour`}\n                        data-testid={`${id}-hour`}\n                        value={\n                            dateTimeValue ? dayjs.utc(dateTimeValue).hour() : 0\n                        }\n                        onChange={handleHoursChange}\n                        label=\"Hr\"\n                        type=\"number\"\n                        disabled={!dateTimeValue}\n                        inputProps={{\n                            min: 0,\n                            max: 24,\n                        }}\n                        textFieldStyles={textFieldStyles}\n                        required={required}\n                    />\n                    <TextField\n                        id={`${id}-minute`}\n                        data-testid={`${id}-minute`}\n                        value={\n                            dateTimeValue\n                                ? dayjs.utc(dateTimeValue).minute()\n                                : 0\n                        }\n                        onChange={handleMinutesChange}\n                        label=\"Min\"\n                        type=\"number\"\n                        disabled={!dateTimeValue}\n                        inputProps={{\n                            min: 0,\n                            max: 60,\n                        }}\n                        textFieldStyles={textFieldStyles}\n                        required={required}\n                    />\n                    <TextField\n                        id={`${id}-second`}\n                        data-testid={`${id}-second`}\n                        value={\n                            dateTimeValue\n                                ? dayjs.utc(dateTimeValue).second()\n                                : 0\n                        }\n                        onChange={handleSecondsChange}\n                        label=\"Sec\"\n                        type=\"number\"\n                        disabled={!dateTimeValue}\n                        inputProps={{\n                            min: 0,\n                            max: 60,\n                        }}\n                        textFieldStyles={textFieldStyles}\n                        required={required}\n                    />\n                    <TextField\n                        id={`${id}-millisecond`}\n                        data-testid={`${id}-millisecond`}\n                        value={\n                            dateTimeValue\n                                ? dayjs.utc(dateTimeValue).millisecond()\n                                : 0\n                        }\n                        onChange={handleMillisecondsChange}\n                        label=\"MS\"\n                        type=\"number\"\n                        disabled={!dateTimeValue}\n                        inputProps={{\n                            min: 0,\n                            max: 999,\n                        }}\n                        textFieldStyles={textFieldStyles}\n                        required={required}\n                    />\n                </Box>\n            </LocalizationProvider>\n        </FormControl>\n    );\n};\n\nInstant.propTypes = {\n    id: PropTypes.string,\n    placeholder: PropTypes.string,\n    disabled: PropTypes.bool,\n    required: PropTypes.bool,\n    dateTimeValue: PropTypes.any,\n    handleDateTimeChange: PropTypes.function,\n    textFieldSx: PropTypes.any,\n    dateFieldSx: PropTypes.any,\n    error: PropTypes.bool,\n    helperText: PropTypes.string,\n    datePickerProps: PropTypes.any,\n    onBlur: PropTypes.any,\n};\n\nexport default Instant;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst VARIANTS = [\"white\", \"gray\"];\n\nconst DSLink = ({\n    className,\n    href,\n    download,\n    ariaLabel,\n    onClick,\n    children,\n    variant,\n    ...rest\n}) => {\n    let linkClass = \"qpp-c-link\";\n    if (VARIANTS.includes(variant)) {\n        variant === \"gray\"\n            ? (linkClass = linkClass.concat(\" \", \"qpp-u-color--gray-60\"))\n            : (linkClass = linkClass.concat(\" \", `qpp-u-color--${variant}`));\n    }\n\n    if (className) {\n        linkClass = linkClass.concat(\" \", className);\n    }\n\n    return (\n        <a\n            aria-label={ariaLabel}\n            className={linkClass || \"\"}\n            href={href}\n            download={download}\n            onClick={onClick}\n            {...rest}\n        >\n            {children}\n        </a>\n    );\n};\n\nDSLink.propTypes = {\n    children: PropTypes.node,\n    className: PropTypes.string,\n    href: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    onClick: PropTypes.func,\n    download: PropTypes.bool,\n    variant: PropTypes.oneOf(VARIANTS),\n};\n\nDSLink.defaultProps = {\n    children: null,\n    className: \"\",\n    href: \"\",\n    ariaLabel: null,\n    onClick: () => null,\n    download: false,\n    variant: null,\n};\n\nexport default DSLink;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport ErrorIcon from \"@mui/icons-material/Error\";\nimport MadieDialog from \"../MadieDialog\";\n\nconst MadieConfirmDialog = ({\n    open,\n    onClose,\n    onContinue,\n    action,\n    warning,\n    ...otherDialogProps\n}) => (\n    <MadieDialog\n        title={otherDialogProps.dialogTitle}\n        dialogProps={{\n            open: open,\n            onClose,\n            \"data-testid\": `${action}-dialog`,\n        }}\n        cancelButtonProps={{\n            variant: \"secondary\",\n            onClick: onClose,\n            cancelText: otherDialogProps.cancelText\n                ? otherDialogProps.cancelText\n                : \"Cancel\",\n            \"data-testid\": `${action}-dialog-cancel-button`,\n        }}\n        continueButtonProps={{\n            variant: \"danger-primary\",\n            type: \"submit\",\n            \"data-testid\": `${action}-dialog-continue-button`,\n            continueText: otherDialogProps.continueText\n                ? otherDialogProps.continueText\n                : \"Continue\",\n            onClick: onContinue,\n        }}\n    >\n        <div id=\"confirm-dialog-body\">\n            <section className=\"dialog-warning-body\">\n                {action?.includes(\"discard\") && (\n                    <p>You have unsaved changes.</p>\n                )}\n                <p>\n                    Are you sure you want to{\" \"}\n                    <span className=\"strong\">{otherDialogProps.name}</span>?\n                </p>\n            </section>\n            <section className=\"dialog-warning-action\">\n                <ErrorIcon />\n                <p>{warning}</p>\n            </section>\n        </div>\n    </MadieDialog>\n);\nMadieConfirmDialog.propTypes = {\n    open: PropTypes.bool,\n    onClose: PropTypes.func,\n    onContinue: PropTypes.func,\n    action: PropTypes.string,\n    warning: PropTypes.string,\n};\n\nexport default MadieConfirmDialog;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport ErrorIcon from \"@mui/icons-material/Error\";\nimport MadieDialog from \"../MadieDialog\";\nimport parse, { domToReact } from \"html-react-parser\";\n\nconst options = {\n    replace: ({ name, children }) => {\n        if (name === \"p\") {\n            return <>{domToReact(children)}</>; //  Return the children directly, effectively removing the <p> tag\n        }\n    },\n};\n\nconst MadieDeleteDialog = ({\n    open,\n    onClose,\n    onContinue,\n    ...otherDialogProps\n}) => (\n    <MadieDialog\n        title={otherDialogProps.dialogTitle}\n        dialogProps={{\n            open: open,\n            onClose,\n            \"data-testid\": \"delete-dialog\",\n        }}\n        cancelButtonProps={{\n            variant: \"secondary\",\n            onClick: onClose,\n            cancelText: \"Cancel\",\n            \"data-testid\": \"delete-dialog-cancel-button\",\n        }}\n        continueButtonProps={{\n            variant: \"danger-primary\",\n            type: \"submit\",\n            \"data-testid\": \"delete-dialog-continue-button\",\n            continueText: otherDialogProps.alternateText\n                ? `${otherDialogProps.alternateText}`\n                : \"Yes, Delete\",\n            onClick: onContinue,\n        }}\n    >\n        <div id=\"delete-dialog-body\">\n            <section className=\"dialog-warning-body\">\n                <p>\n                    {otherDialogProps?.customDialogBody ? (\n                        otherDialogProps.customDialogBody\n                    ) : (\n                        <>\n                            Are you sure you want to{\" \"}\n                            {otherDialogProps.alternateText\n                                ? otherDialogProps.alternateText.toLowerCase()\n                                : \"delete\"}{\" \"}\n                        </>\n                    )}\n                    <span className=\"strong\">\n                        {parse(\n                            otherDialogProps?.name\n                                ? otherDialogProps?.name\n                                : \"\",\n                            options\n                        )}\n                    </span>\n                    {otherDialogProps?.statement ? \"\" : \"?\"}\n                </p>\n            </section>\n            {otherDialogProps.hideWarning !== true && (\n                <section className=\"dialog-warning-action\">\n                    <ErrorIcon />\n                    <p>This action cannot be undone.</p>\n                </section>\n            )}\n        </div>\n    </MadieDialog>\n);\n\nMadieDeleteDialog.propTypes = {\n    open: PropTypes.bool,\n    onClose: PropTypes.func,\n    onContinue: PropTypes.func,\n};\n\nexport default MadieDeleteDialog;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport ErrorIcon from \"@mui/icons-material/Error\";\nimport MadieDialog from \"../MadieDialog\";\n\nconst MadieDiscardDialog = ({ open, onClose, onContinue }) => (\n    <MadieDialog\n        title=\"Discard Changes?\"\n        dialogProps={{\n            open: open,\n            onClose,\n            \"data-testid\": \"discard-dialog\",\n        }}\n        cancelButtonProps={{\n            variant: \"secondary\",\n            onClick: onClose,\n            cancelText: \"No, Keep Working\",\n            \"data-testid\": \"discard-dialog-cancel-button\",\n        }}\n        continueButtonProps={{\n            variant: \"primary\",\n            type: \"submit\",\n            \"data-testid\": \"discard-dialog-continue-button\",\n            continueText: \"Yes, Discard All Changes\",\n            onClick: onContinue,\n        }}\n    >\n        <div id=\"discard-changes-dialog-body\">\n            <section className=\"dialog-warning-body\">\n                <p>You have unsaved changes.</p>\n                <p className=\"strong\">\n                    Are you sure you want to discard your changes?\n                </p>\n            </section>\n            <section className=\"dialog-warning-action\">\n                <ErrorIcon />\n                <p>This Action cannot be undone.</p>\n            </section>\n        </div>\n    </MadieDialog>\n);\n\nMadieDiscardDialog.propTypes = {\n    open: PropTypes.bool,\n    onClose: PropTypes.func,\n    onContinue: PropTypes.func,\n};\n\nexport default MadieDiscardDialog;\n","import React from \"react\";\nimport { CircularProgress } from \"@mui/material\";\nimport PropTypes from \"prop-types\";\n\n// To change the spinner size you have to pass style props for height and width.\nconst MadieSpinner = (props) => {\n    return (\n        <CircularProgress\n            aria-label=\"loading-spinner\"\n            sx={{\n                \"& .MuiCircularProgress-svg\": {\n                    backgroundColor: \"transparent\",\n                    borderRadius: \"100%\",\n                    boxShadow: `inset 0 0 0px ${\n                        props.thickness ? props.thickness : \"7\"\n                    }px #DDDDDD`,\n                },\n                \"& .MuiCircularProgress-circle\": {\n                    color: \"#209FA6\",\n                    strokeLinecap: \"round\",\n                },\n            }}\n            thickness={7}\n            style={{ height: 50, width: 50 }}\n            // Props overwrite whatever they want.\n            {...props}\n        />\n    );\n};\n\nMadieSpinner.propTypes = {\n    thickness: PropTypes.number,\n};\n\nexport default MadieSpinner;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport UnfoldMoreIcon from \"@mui/icons-material/UnfoldMore\";\nimport tw from \"twin.macro\";\nimport \"styled-components/macro\";\n\nconst MadieTable = ({\n  table,\n  currentSort,\n  currentDirection,\n  handleSort,\n  renderExpandedRow,\n  id=\"measureListTable\",\n  dataTestId = \"measure-list-tbl\"\n}) => {\n    const TH = tw.th`p-3 text-left text-sm font-bold capitalize`;\n    const [hoveredHeader, setHoveredHeader] = useState(null);\n\n  return (\n    <table\n      /* eslint-disable-next-line react/no-unknown-property */\n      tw=\"min-w-full\"\n      id={id}\n      data-testid={dataTestId}\n      className=\"tcl-table\"\n      style={{\n        borderSpacing: \"0 2em !important\",\n        overflow: \"visible\",\n        backgroundColor: \"#fff\",\n        opacity: 1,\n      }}\n    >\n      <thead className=\"sticky-table\" style={{ overflow: \"visible\" }}>\n        {table.getHeaderGroups().map((headerGroup) => (\n          <tr key={headerGroup.id}>\n            {headerGroup.headers.map((header) => {\n              const isHovered = hoveredHeader?.includes(header.id);\n\n              return (\n                <TH\n                  key={header.id}\n                  scope=\"col\"\n                  onMouseEnter={() => setHoveredHeader(header.id)}\n                  onMouseLeave={() => setHoveredHeader(null)}\n                  className=\"header-cell\"\n                >\n                  {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                    <button\n                      className={\n                        header.column.getCanSort()\n                          ? \"cursor-pointer select-none header-button\"\n                          : \"header-button\"\n                      }\n                      disabled={!header.column.getCanSort()}\n                      onClick={() =>\n                        handleSort(header.id.replace(\"_\", \".\"))\n                      }\n                      data-testid={`header-${header.id.replace(\"_\", \".\")}`}\n                      title={\n                        header.column.getCanSort()\n                          ? currentSort ===\n                            header.column.id.replace(\"_\", \".\")\n                            ? currentDirection === \"ASC\"\n                              ? \"Sort descending\"\n                              : currentDirection === \"DESC\"\n                              ? \"Clear sort\"\n                              : \"Sort ascending\"\n                            : \"Sort ascending\"\n                          : undefined\n                      }\n                    >\n                      {flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n\n                      <span className=\"arrowDisplay\">\n                        {header.column.getCanSort() ? (\n                          currentSort ===\n                          header.column.id.replace(\"_\", \".\") ? (\n                            currentDirection === \"ASC\" ? (\n                              <KeyboardArrowUpIcon />\n                            ) : (\n                              <KeyboardArrowDownIcon />\n                            )\n                          ) : isHovered ? (\n                            <UnfoldMoreIcon data-testid=\"unfold-more-icon\" />\n                          ) : null\n                        ) : null}\n                      </span>\n                    </button>\n                  ) : (\n                    flexRender(\n                      header.column.columnDef.header,\n                      header.getContext()\n                    )\n                  )}\n                </TH>\n              );\n            })}\n          </tr>\n        ))}\n      </thead>\n\n      <tbody className=\"table-body measures-list\" style={{ padding: 20 }}>\n                {table.getRowModel().rows.length === 0 && (\n                  <tr>\n                    <td\n                      colSpan={table.getAllColumns().length}\n                      style={{ padding: \"40px 0\", textAlign: \"center\" }}\n                    >\n                      <span>No results were found</span>\n                    </td>\n                  </tr>\n                )}\n                {table.getRowModel().rows.map((row) => (\n                  <React.Fragment key={row.id}>\n                    <tr\n                      key={row.id}\n                      className=\"ml-tr\"\n                      data-testid={`row-item`}\n                      style={{\n                        borderBottom: \"solid 1px #8c8c8c\",\n                        borderSpacing: \"0 2em !important\",\n                      }}\n                    >\n                      {row.getVisibleCells().map((cell) => (\n                        <td key={cell.id} data-testid={`measure-name-${cell.id}`}>\n                          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </td>\n                      ))}\n                    </tr>\n                    {/* Expanded row logic should be passed in as a fragment as we look for measureset, libraryset, and will also render a table in the composite view. */}\n                    {renderExpandedRow?.(row)}\n                  </React.Fragment>\n                ))}\n              </tbody>\n    </table>\n  );\n};\n\nMadieTable.propTypes = {\n  table: PropTypes.shape({\n    getHeaderGroups: PropTypes.func.isRequired,\n    getRowModel: PropTypes.func.isRequired,\n    getAllColumns: PropTypes.func.isRequired,\n  }).isRequired,\n\n  currentSort: PropTypes.string,\n  currentDirection: PropTypes.oneOf([\"ASC\", \"DESC\"]),\n  handleSort: PropTypes.func.isRequired,\n  renderExpandedRow: PropTypes.func,\n\n  id: PropTypes.string,\n  dataTestId: PropTypes.string,\n};\n\n\nexport default MadieTable;","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Tooltip } from \"@mui/material\";\nimport TooltipIcon from \"../MadieTooltipIcon\";\n\nconst MadieToolTip = \n({\n  id,\n  widthContainer = 14,\n  heightContainer = 14,\n  ...rest\n}) => {\n    return (\n        <Tooltip\n          placement=\"bottom\"\n          arrow\n          slotProps={{\n            tooltip: {\n              sx: {\n                zIndex: 99,\n                backgroundColor: \"#333\",\n                \"& .MuiTooltip-arrow\": {\n                  color: \"#333\",\n                },\n              },\n            },\n          }}\n              {...rest}\n        >\n              <div\n                aria-describedby={id} \n                tabIndex={0}\n                style={{ width: widthContainer, height: heightContainer}}\n                data-testId={id} \n                id={id}\n              >\n                <TooltipIcon />\n              </div>\n            </Tooltip>\n          );\n};\n\n\nMadieToolTip.propTypes = {\n  id: PropTypes.string,\n  widthContainer: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  heightContainer: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n};\n\nexport default MadieToolTip;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst TooltipIcon = ({ color = \"#0073C8\", ...props }) => (\n    <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 14 14\"\n        fill=\"none\"\n        {...props}\n    >\n        <g clipPath=\"url(#clip0_17397_1786)\">\n            <path\n                d=\"M6.4165 10.5H7.58317V9.33334H6.4165V10.5ZM6.99984 1.16667C3.77984 1.16667 1.1665 3.78001 1.1665 7.00001C1.1665 10.22 3.77984 12.8333 6.99984 12.8333C10.2198 12.8333 12.8332 10.22 12.8332 7.00001C12.8332 3.78001 10.2198 1.16667 6.99984 1.16667ZM6.99984 11.6667C4.42734 11.6667 2.33317 9.57251 2.33317 7.00001C2.33317 4.42751 4.42734 2.33334 6.99984 2.33334C9.57234 2.33334 11.6665 4.42751 11.6665 7.00001C11.6665 9.57251 9.57234 11.6667 6.99984 11.6667ZM6.99984 3.50001C5.71067 3.50001 4.6665 4.54417 4.6665 5.83334H5.83317C5.83317 5.19167 6.35817 4.66667 6.99984 4.66667C7.6415 4.66667 8.1665 5.19167 8.1665 5.83334C8.1665 7.00001 6.4165 6.85417 6.4165 8.75001H7.58317C7.58317 7.43751 9.33317 7.29167 9.33317 5.83334C9.33317 4.54417 8.289 3.50001 6.99984 3.50001Z\"\n                fill={color}\n            />\n        </g>\n        <defs>\n            <clipPath id=\"clip0_17397_1786\">\n                <rect width=\"14\" height=\"14\" fill={color} />\n            </clipPath>\n        </defs>\n    </svg>\n);\n\nexport default TooltipIcon;\n\nTooltipIcon.propTypes = {\n    color: PropTypes.string,\n};\n","import React, { useRef, useState, useEffect } from \"react\";\nimport ReactModal from \"react-modal\";\nimport PropTypes from \"prop-types\";\n\nimport { CloseXIcon2 } from \"../../lib/SvgComponents.jsx\";\n\nconst Modal = ({\n    children,\n    onRequestClose,\n    title,\n    primary,\n    secondary,\n    appElement,\n    isOpen,\n    ...props\n}) => {\n    const [overflowSeparator, setOverflowSeparator] = useState(false);\n    const closeButtonRef = useRef(null);\n    const contentRef = useRef(null);\n\n    useEffect(() => {\n        ReactModal.setAppElement(appElement);\n    }, []);\n\n    const getWidth = () => {\n        if (props.width) {\n            return {\n                width: props.width,\n                maxWidth: \"calc(100vw - 2rem)\",\n                maxHeight: \"calc(100vh - 2rem)\",\n            };\n        } else {\n            return {};\n        }\n    };\n\n    return (\n        <ReactModal\n            onRequestClose={onRequestClose}\n            portalClassName=\"qpp-c-modal\"\n            className=\"qpp-c-modal__content\"\n            overlayClassName=\"qpp-c-modal__overlay\"\n            bodyOpenClassName=\"qpp-c-modal__body-open\"\n            isOpen={isOpen}\n            style={{\n                content: getWidth(),\n            }}\n            onAfterOpen={() => {\n                // Add heading separator based on overflow\n                if (\n                    contentRef.current?.scrollHeight >\n                    document.documentElement.clientHeight * 0.6\n                ) {\n                    setOverflowSeparator(true);\n                } else {\n                    setOverflowSeparator(false);\n                }\n\n                // Set default focus\n                if (closeButtonRef?.current) {\n                    closeButtonRef.current.focus();\n                }\n            }}\n            aria={{\n                labelledby: \"modal-heading\",\n                describedby: \"modal-body\",\n            }}\n            {...props}\n        >\n            <div\n                className={`qpp-c-modal__header ${\n                    overflowSeparator ? \"qpp-c-modal__header-sep\" : \"\"\n                }`}\n            >\n                <h3 id=\"modal-heading\">{title}</h3>\n                <button\n                    className=\"closex qpp-c-button qpp-c-button--text qpp-u-color--black\"\n                    aria-label=\"close modal\"\n                    data-testid=\"modal-close-btn\"\n                    onClick={onRequestClose}\n                    ref={closeButtonRef}\n                >\n                    <CloseXIcon2 />\n                </button>\n            </div>\n            <div\n                id=\"modal-body\"\n                className=\"qpp-c-modal__body\"\n                ref={contentRef}\n                tabIndex={overflowSeparator ? \"0\" : undefined}\n            >\n                {children}\n            </div>\n            {(primary || secondary) && (\n                <div className=\"qpp-c-modal__footer\">\n                    {secondary && (\n                        <button\n                            className={`qpp-c-button qpp-c-button--secondary ${\n                                primary ? \"qpp-u-margin-right--16\" : \"\"\n                            }`}\n                            loading={secondary.loading}\n                            onClick={secondary.onClick || onRequestClose}\n                            aria-label={secondary.title}\n                            data-testid=\"modal-secondary-btn\"\n                        >\n                            {secondary.title}\n                        </button>\n                    )}\n                    {primary && (\n                        <button\n                            className=\"qpp-c-button\"\n                            loading={primary.loading}\n                            onClick={primary.onClick}\n                            data-testid=\"modal-primary-btn\"\n                            aria-label={primary.title}\n                        >\n                            {primary.title}\n                        </button>\n                    )}\n                </div>\n            )}\n        </ReactModal>\n    );\n};\n\nModal.propTypes = {\n    title: PropTypes.string,\n    children: PropTypes.node.isRequired,\n    primary: PropTypes.shape({\n        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n        onClick: PropTypes.func,\n        loading: PropTypes.bool,\n        loadingText: PropTypes.string,\n    }),\n    secondary: PropTypes.shape({\n        title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n        onClick: PropTypes.func,\n        loading: PropTypes.bool,\n        loadingText: PropTypes.string,\n    }),\n    onRequestClose: PropTypes.func,\n    appElement: PropTypes.string,\n    isOpen: PropTypes.bool,\n    width: PropTypes.string,\n};\n\nModal.defaultProps = {\n    onRequestClose: () => {},\n    title: undefined,\n    primary: null,\n    secondary: null,\n    appElement: \"body > *:not(.qpp-c-modal)\",\n    isOpen: false,\n};\n\nexport default Modal;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport DsModal from \"./Modal\";\n\nconst Modal = ({ useDesignSystem, ...rest }) => {\n    return <DsModal {...rest} />;\n};\n\nModal.propTypes = {\n    useDesignSystem: PropTypes.bool,\n};\nModal.defaultProps = {\n    useDesignSystem: false,\n};\nModal.displayName = \"Modal\";\n\nexport default Modal;\n","import * as React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextField from \"../TextField\";\n\nexport default function NumberInput({\n    id,\n    error = false,\n    helperText = undefined,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n    tooltipText,\n    inputProps,\n    allowNegative = true,\n    ...rest\n}) {\n    const newInputProps = { ...inputProps } || {};\n    if (!newInputProps[\"data-testid\"]) {\n        newInputProps[\"data-testid\"] = `${id}-input`;\n    }\n    // if aria-describedBy is not provided, add it depending on helper-text and tooltip presence\n    if (!newInputProps[\"aria-describedby\"]) {\n        let newDescribedBy = \"\";\n        if (helperText) {\n            newDescribedBy += `${id}-helper-text `;\n        }\n        if (tooltipText) {\n            newDescribedBy += `${id}-tooltip`;\n        }\n        if (newDescribedBy) {\n            newInputProps[\"aria-describedby\"] = newDescribedBy;\n        }\n    }\n    newInputProps[\"type\"] = \"number\";\n    if (!allowNegative) {\n        newInputProps[\"min\"] = 0;\n    }\n    return (\n        <TextField\n            id={`integer-field-${id}`}\n            error={error}\n            helperText={helperText}\n            required={required}\n            disabled={disabled}\n            readOnly={readOnly}\n            label={label}\n            tooltipText={tooltipText}\n            inputProps={newInputProps}\n            placeholder={`Enter ${label}`}\n            data-testid={`integer-field-${id}`}\n            onKeyDown={(e) => {\n                if (\n                    e.key === \"e\" ||\n                    e.key === \"E\" ||\n                    e.key === \"+\" ||\n                    e.key === \".\"\n                ) {\n                    e.preventDefault();\n                }\n            }}\n            {...rest}\n        />\n    );\n}\n\nNumberInput.propTypes = {\n    id: PropTypes.string,\n    error: PropTypes.bool,\n    helperText: PropTypes.string,\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    label: PropTypes.string,\n    tooltipText: PropTypes.string,\n    inputProps: PropTypes.object,\n    allowNegative: PropTypes.bool,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { visuallyHidden } from \"@mui/utils\";\n\nimport {\n    Pagination as PaginationComponent,\n    PaginationItem,\n    Select,\n    MenuItem,\n    Typography,\n} from \"@mui/material\";\nimport { styled } from \"@mui/system\";\n\n// for ts later implemeentation.\n// interface PaginationProps {\n//     totalItems: number; // total items\n//     visibleItems: number; // returned by paging object in spring\n//     count: number; // page count\n//     limit: number; // items per page\n//     limitOptions: number[]; // limit options\n//     shape?: \"rounded\" | \"circular\"; // style\n//     page: number; // current page zer0 indexed\n//     siblingCount?: number;\n//     boundaryCount?: number;\n//     handlePageChange: (e: any, v: any) => void;\n//     handleLimitChange: (e: any) => void;\n//     hidePrevButton: boolean;\n//     hideNextButton: boolean;\n//   }\n\nconst Container = styled(\"div\")({\n    display: \"flex\",\n    flexGrow: 1,\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    minHeight: 90,\n    padding: \"0px 24px\",\n});\nconst Row = styled(\"div\")({\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n});\nconst Pagination = ({\n    totalItems = 0,\n    visibleItems = 0,\n    count = 1,\n    offset = 0,\n    shape = \"rounded\",\n    page = 0,\n    limit = 10,\n    limitOptions = [10, 25, 50],\n    handlePageChange,\n    handleLimitChange,\n    hidePrevButton = true,\n    hideNextButton = false,\n}) => {\n    return (\n        <Container>\n            <Row>\n                {/*this span is only for screen reader*/}\n                <span id=\"items-per-page\" style={visuallyHidden}>\n                    Items per page {limit}.\n                </span>\n                <Typography\n                    fontSize={14}\n                    fontFamily=\"Rubik\"\n                    sx={{\n                        color: \"#333333\",\n                    }}\n                >\n                    Items per page\n                </Typography>\n                <Select\n                    size=\"small\"\n                    sx={{\n                        margin: \"0 11px\",\n                        \"& .MuiOutlinedInput-notchedOutline\": {\n                            borderColor: \"#8C8C8C\",\n                            \"& legend\": {\n                                width: 0,\n                            },\n                        },\n                        \"& .MuiInputBase-input\": {\n                            fontFamily: \"Rubik\",\n                            fontSize: 14,\n                            borderRadius: 3,\n                        },\n                    }}\n                    id=\"pagination-limit-select\"\n                    value={limit}\n                    label={null}\n                    onChange={handleLimitChange}\n                    inputProps={{\n                        \"aria-labelledby\": \"items-per-page\",\n                        \"aria-describedby\":\n                            \"items-per-page offset-of-total-items\",\n                    }}\n                >\n                    {limitOptions.map((val) => (\n                        <MenuItem\n                            value={val}\n                            key={`limit-${val}`}\n                            data-testid=\"limit-option\"\n                        >\n                            {val}\n                        </MenuItem>\n                    ))}\n                </Select>\n                <Typography\n                    fontSize={14}\n                    id=\"offset-of-total-items\"\n                    sx={{\n                        color: \"#757575\",\n                    }}\n                    fontFamily=\"Rubik\"\n                >{`${offset + 1} - ${\n                    visibleItems + offset\n                } of ${totalItems}`}</Typography>\n            </Row>\n            <PaginationComponent\n                sx={{\n                    \"& .MuiPagination-ul\": {\n                        \"& .MuiPaginationItem-root\": {\n                            color: \"#0073C8\",\n                            border: \"solid 1px #8c8c8c\",\n                            \"&:focus\": {\n                                border: \"0.0625rem solid #125496\",\n                                borderRadius: \"0.1875rem\",\n                                boxShadow: \"0 0 0 0.25rem #cbe4ff\",\n                                outline: \"none\",\n                            },\n                        },\n                        \"& .Mui-selected\": {\n                            color: \"#fff\",\n                            backgroundColor: \"#0073C8 !important\",\n                        },\n                        \"& .MuiPaginationItem-ellipsis\": {\n                            border: \"solid 1px transparent\",\n                        },\n                        \"& .MuiPaginationItem-previousNext\": {\n                            border: \"solid 1px transparent\",\n                        },\n                    },\n                }}\n                renderItem={(props) => {\n                    if (props.type === \"next\") {\n                        return (\n                            <PaginationItem\n                                sx={{\n                                    border: \"solid 1px transparent\",\n                                    \"& .Mui-selected\": {\n                                        backgroundColor: \"#0073C8\",\n                                        border: \"solid 1px #0073C8\",\n                                        color: \"#fff\",\n                                    },\n                                    \"&::before\": {\n                                        content: '\"Next  \"',\n                                        marginRight: \"5px\",\n                                        fontSize: 14,\n                                        fontFamily: \"Rubik\",\n                                    },\n                                }}\n                                {...props}\n                            />\n                        );\n                    }\n                    if (props.type === \"previous\") {\n                        return (\n                            <PaginationItem\n                                sx={{\n                                    border: \"solid 1px transparent\",\n                                    \"& .Mui-selected\": {},\n                                    \"&::after\": {\n                                        content: '\"  Previous\"',\n                                        marginLeft: \"5px\",\n                                        fontSize: 14,\n                                        fontFamily: \"Rubik\",\n                                    },\n                                }}\n                                {...props}\n                            />\n                        );\n                    }\n                    return <PaginationItem {...props} />;\n                }}\n                count={count}\n                page={page}\n                shape={shape}\n                siblingCount={2}\n                boundaryCount={0}\n                onChange={handlePageChange}\n                hidePrevButton={hidePrevButton}\n                hideNextButton={hideNextButton}\n            />\n        </Container>\n    );\n};\n\nPagination.propTypes = {\n    totalItems: PropTypes.number,\n    visibleItems: PropTypes.number,\n    count: PropTypes.number,\n    offset: PropTypes.number,\n    shape: PropTypes.string,\n    limit: PropTypes.number,\n    page: PropTypes.number,\n    limitOptions: PropTypes.array,\n    handlePageChange: PropTypes.func,\n    handleLimitChange: PropTypes.func,\n    hidePrevButton: PropTypes.bool,\n    hideNextButton: PropTypes.bool,\n    type: PropTypes.string,\n};\n\nexport { Pagination };\n","import React from \"react\";\nimport {\n    FormControl,\n    FormHelperText,\n    FormControlLabel,\n    Radio,\n    RadioGroup,\n} from \"@mui/material\";\nimport PropTypes from \"prop-types\";\nimport InputLabel from \"../InputLabel\";\nimport { ReadOnlyTextField } from \"../index\";\n\nconst RadioButton = ({\n    id,\n    dataTestId,\n    options = [],\n    disabled = false,\n    readOnly = false,\n    label,\n    required = false,\n    error = false,\n    helperText,\n    ...rest\n}) => {\n    if (readOnly) {\n        const option = options?.find(\n            (option) => String(option.value) === String(rest.value)\n        );\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...rest}\n                value={option?.label}\n            />\n        );\n    }\n    return (\n        <FormControl error={error} fullWidth>\n            <InputLabel\n                htmlFor={`${id}`}\n                id={`${id}-label`}\n                disabled={disabled}\n                required={required}\n                shrink\n                style={{ marginBottom: 0, height: 16 }} // force a height\n                sx={[\n                    {\n                        backgroundColor: \"transparent\",\n                        display: \"flex\",\n                        flexDirection: \"row-reverse\",\n                        alignSelf: \"baseline\",\n                        textTransform: \"none\",\n                        // force it outside the select box\n                        position: \"initial\",\n                        transform: \"translateX(0px) translateY(0px)\",\n                        fontFamily: \"Rubik\",\n                        fontWeight: 500,\n                        fontSize: 14,\n                        color: \"#333\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#AE1C1C !important\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    required && {\n                        transform: \"translateX(-12px) translateY(0px)\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#D92F2\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    disabled && {\n                        color: \"rgba(0,0,0,0.6)\",\n                    },\n                    error && {\n                        color: \"#AE1C1C !important\",\n                    },\n                ]}\n            >\n                {label}\n            </InputLabel>\n            {helperText && (\n                <FormHelperText\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    id={`${id}-helper-text`}\n                    data-testid={`${id}-helper-text`}\n                    error={error}\n                    sx={[\n                        {\n                            margin: \"4px 0px 0px 0px\",\n                            color: \"#515151\",\n                            lineHeight: 1,\n                        },\n                        error && {\n                            color: \"#AE1C1C !important\",\n                        },\n                    ]}\n                >\n                    {helperText}\n                </FormHelperText>\n            )}\n            <RadioGroup\n                aria-labelledby={`${id}-radio-buttons-group`}\n                data-testid={`${id}-radio-buttons-group`}\n                {...rest}\n            >\n                {options.map((option, index) => (\n                    <FormControlLabel\n                        disabled={disabled}\n                        key={index}\n                        value={option.value}\n                        control={<Radio />}\n                        label={option.label}\n                    />\n                ))}\n            </RadioGroup>\n        </FormControl>\n    );\n};\n\nRadioButton.propTypes = {\n    id: PropTypes.string,\n    dataTestId: PropTypes.string,\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    error: PropTypes.bool,\n    label: PropTypes.string,\n    helperText: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n};\n\nexport default RadioButton;\n","import React from \"react\";\nimport { FormControl, TextareaAutosize } from \"@mui/material\";\nimport InputLabel from \"../InputLabel\";\nimport PropTypes from \"prop-types\";\n\nconst ReadOnlyTextField = ({\n    id,\n    required = false,\n    disabled = false,\n    label,\n    ...rest\n}) => {\n    return (\n        <FormControl fullWidth>\n            <InputLabel\n                disabled={disabled}\n                shrink\n                required={required}\n                htmlFor={id}\n                sx={[\n                    {\n                        backgroundColor: \"transparent\",\n                        display: \"flex\",\n                        flexDirection: \"row-reverse\",\n                        alignSelf: \"baseline\",\n                        textTransform: \"none\",\n                        // force it outside the select box\n                        position: \"initial\",\n                        transform: \"translateX(0px) translateY(0px)\",\n                        fontFamily: \"Rubik\",\n                        fontWeight: 500,\n                        fontSize: 14,\n                        color: \"#333\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#AE1C1C !important\",\n                            marginRight: \"3px !important\",\n                        },\n                    },\n                    required && {\n                        transform: \"translateX(-12px) translateY(0px)\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#D92F2\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    disabled && {\n                        color: \"rgba(0,0,0,0.6)\",\n                    },\n                ]}\n            >\n                {label}\n            </InputLabel>\n            <TextareaAutosize\n                style={{\n                    color: \"#333\",\n                    fontFamily: \"Rubik\",\n                    fontSize: \"14px\",\n                    fontStyle: \"normal\",\n                    fontWeight: 400,\n                    lineHeight: \"24px\",\n                    border: \"none\",\n                    resize: \"none\",\n                    padding: \"0px 0px\",\n                    outline: \"none\",\n                    boxShadow: \"none\",\n                }}\n                readOnly={true}\n                disableUnderline={true}\n                label={null}\n                disabled={disabled}\n                id={id}\n                {...rest}\n                value={\n                    rest?.value == null ||\n                    rest.value === \"\" ||\n                    (typeof rest.value === \"object\" &&\n                        Object.keys(rest.value).length === 0)\n                        ? \"-\"\n                        : rest.value\n                }\n            />\n        </FormControl>\n    );\n};\n\nReadOnlyTextField.propTypes = {\n    id: PropTypes.string,\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.\n    label: PropTypes.string,\n};\nexport default ReadOnlyTextField;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { IconButton, InputAdornment, MenuItem } from \"@mui/material\";\nimport Select from \"../Select\"\nimport TextField from \"../TextField\"\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { filterByOptions } from \"./useFilterSearch\";\n/**\n * Reusable component for measure filter and search UI\n * Provides filter dropdown and search input with trigger and clear actions\n */\n\nconst SearchAndFilter = ({\n  filterBy,\n  searchField,\n  onFilterChange,\n  onSearchChange,\n  onSearchTrigger,\n  onSearchClear,\n  filterByOpts = filterByOptions,\n  textFieldID = \"test-case\"\n}) => {\n  \n  return (\n    <div className=\"measure-search-filters\">\n      <div>\n        <Select\n          label=\"Filter By\"\n          id=\"filter-by-select\"\n          data-testid=\"filter-by-select\"\n          inputProps={{ \"data-testid\": \"filter-by-select-input\" }}\n          placeHolder={{ name: \"Filter By\", value: \"\" }}\n          SelectDisplayProps={{\n            \"aria-required\": \"true\",\n          }}\n          size=\"small\"\n          name=\"filterBy\"\n          value={filterBy}\n          onChange={onFilterChange}\n          options={[\n            <MenuItem key=\"-\" value=\"\" data-testid={`filter-by--`}>\n              -\n            </MenuItem>,\n            ...filterByOpts?.map((option) => {\n              return (\n                <MenuItem\n                  key={option}\n                  value={option}\n                  data-testid={`filter-by-${option}`}\n                >\n                  {option}\n                </MenuItem>\n              );\n            }),\n          ]}\n        />\n      </div>\n      <div>\n        <TextField\n          id=\"search\"\n          label=\"Search\"\n          placeholder=\"Search\"\n          inputProps={{\n            \"data-testid\": `${textFieldID}-list-search-input`, \n          }}\n          data-testid=\"test-case-list-search\"\n          name=\"searchField\"\n          value={searchField}\n          onChange={onSearchChange}\n          onKeyPress={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              onSearchTrigger();\n            }\n          }}\n          slotProps={{\n            input: {\n              startAdornment: (\n                <InputAdornment\n                  position=\"start\"\n                  data-testid={`${textFieldID}-trigger-search`}\n                  onClick={onSearchTrigger}\n                  style={{ cursor: \"pointer\" }}\n                >\n                  <SearchIcon />\n                </InputAdornment>\n              ),\n              endAdornment: (\n                <InputAdornment\n                  data-testid={`${textFieldID}-clear-search`}\n                  position=\"end\"\n                  style={{ cursor: \"pointer\" }}\n                  onClick={onSearchClear}\n                >\n                  <IconButton>\n                    <ClearIcon />\n                  </IconButton>\n                </InputAdornment>\n              ),\n            },\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nSearchAndFilter.propTypes = {\n  filterBy: PropTypes.string.isRequired,\n  searchField: PropTypes.string.isRequired,\n  onFilterChange: PropTypes.func.isRequired,\n  onSearchChange: PropTypes.func.isRequired,\n  onSearchTrigger: PropTypes.func.isRequired,\n  onSearchClear: PropTypes.func.isRequired,\n  filterByOpts: PropTypes.arrayOf(PropTypes.string),\n  textFieldID: PropTypes.string,\n};\n\nSearchAndFilter.defaultProps = {\n  filterByOpts: filterByOptions,\n};\nexport default SearchAndFilter;","import { useState } from \"react\";\n\nexport const filterByOptions = [\"Measure\", \"Version\", \"CMS ID\"];\n\nexport const filterMap = {\n  Measure: \"measureName\",\n  Version: \"version\",\n  \"CMS ID\": \"cmsId\",\n};\n\n/**\n * Custom hook for managing measure or libraries filter and search functionality\n * Provides state and handlers for filtering and searching measures by various criteria\n */\nexport const useFilterSearch = (\n  onPageReset\n) => {\n  const [filterBy, setFilterBy] = useState(\"\");\n  const [searchField, setSearchField] = useState(\"\");\n  const [finalSearchAndFilterby, setFinalSearchAndFilterby] =\n    useState({\n      finalSearchField: \"\",\n      finalFilterBy: \"\",\n    });\n\n  const handleFilter = (e) => {\n    setFilterBy(e.target.value);\n  };\n\n  const handleSearch = (e) => {\n    setSearchField(e.target.value);\n  };\n\n  const finalizeSearchCriteria = () => {\n    const finalSearchAndFilter = {\n      finalSearchField: searchField,\n      finalFilterBy: filterBy,\n    };\n    setFinalSearchAndFilterby(finalSearchAndFilter);\n  };\n\n  const blankSearchCriteria = () => {\n    setSearchField(\"\");\n    setFilterBy(\"\");\n    setFinalSearchAndFilterby({ finalFilterBy: \"\", finalSearchField: \"\" });\n    if (onPageReset) {\n      onPageReset();\n    }\n  };\n\n  return {\n    filterBy,\n    searchField,\n    finalSearchAndFilterby,\n    handleFilter,\n    handleSearch,\n    finalizeSearchCriteria,\n    blankSearchCriteria,\n  };\n};\n","import React from \"react\";\nimport { FormControl, Select as MUISelect, MenuItem } from \"@mui/material\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport InputLabel from \"../InputLabel\";\nimport FormHelperText from \"@mui/material/FormHelperText\";\nimport PropTypes from \"prop-types\";\nimport { ReadOnlyTextField } from \"../index\";\n\nconst Select = ({\n    placeHolder = undefined, // expects placeholder objects of { name: value } and inserts into the render item function.\n    required = false,\n    disabled = false,\n    readOnly = false,\n    id,\n    error = false,\n    label,\n    helperText = undefined,\n    options = [\n        <MenuItem\n            key=\"test\"\n            value=\"test value\"\n            data-testid=\"measure-model-option-\"\n        >\n            test value\n        </MenuItem>,\n    ],\n    ...rest\n}) => {\n    if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...rest}\n            />\n        );\n    }\n\n    const placehold = (\n        <span style={{ color: \"#717171\" }}>\n            {placeHolder?.name || \"placeholder\"}\n        </span>\n    );\n    return (\n        <FormControl error={error} fullWidth>\n            <InputLabel\n                // {/* has init at .2rem/3.2 px bottom. passing sx breaks style. */}\n                id={`${id}-label`}\n                disabled={disabled}\n                required={required}\n                shrink\n                style={{ marginBottom: 0, height: 16 }} // force a heignt\n                sx={[\n                    {\n                        backgroundColor: \"transparent\",\n                        display: \"flex\",\n                        flexDirection: \"row-reverse\",\n                        alignSelf: \"baseline\",\n                        textTransform: \"none\",\n                        // force it outside the select box\n                        position: \"initial\",\n                        transform: \"translateX(0px) translateY(0px)\",\n                        fontFamily: \"Rubik\",\n                        fontWeight: 500,\n                        fontSize: 14,\n                        color: \"#333\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#AE1C1C !important\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    required && {\n                        transform: \"translateX(-12px) translateY(0px)\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#D92F2\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    disabled && {\n                        color: \"rgba(0,0,0,0.6)\",\n                    },\n                    error && {\n                        color: \"#AE1C1C !important\",\n                    },\n                ]}\n            >\n                {label}\n            </InputLabel>\n            {helperText && (\n                <FormHelperText\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    data-testid={`${id}-helper-text`}\n                    id={`${id}-helper-text`}\n                    sx={[\n                        {\n                            margin: \"4px 0px 0px 0px\",\n                            color: \"#515151\",\n                            lineHeight: 1,\n                        },\n                        error && {\n                            color: \"#AE1C1C !important\",\n                        },\n                    ]}\n                >\n                    {helperText}\n                </FormHelperText>\n            )}\n            <MUISelect\n                sx={[\n                    {\n                        border: \"none\",\n                        borderRadius: \"3px\",\n                        height: 40,\n                        marginTop: \"8px\",\n                        \"& .MuiOutlinedInput-notchedOutline\": {\n                            borderColor: \"#8C8C8C\",\n                            borderRadius: \"3px\",\n                            \"& legend\": {\n                                width: 0,\n                            },\n                        },\n                        \"& .MuiOutlinedInput-root\": {\n                            \"&&\": {\n                                borderRadius: \"3px\",\n                            },\n                        },\n                        // input base selector\n                        \"& .MuiInputBase-input\": {\n                            color: \"#333\",\n                            fontFamily: \"Rubik\",\n                            fontSize: 14,\n                            borderRadius: \"3px\",\n                            padding: \"9px 14px\",\n                            \"&::placeholder\": {\n                                color: \"#717171\",\n                            },\n                        },\n                        \"& \t.MuiSelect-icon\": {\n                            color: \"#323232\",\n                        },\n                        \"& .Mui-disabled\": {\n                            backgroundColor: \"#EDEDED\",\n                            border: \"#EDEDED\",\n                        },\n                    },\n                    error && {\n                        \"& .MuiOutlinedInput-notchedOutline\": {\n                            borderColor: \"#AE1C1C !important\",\n                        },\n                    },\n                ]}\n                displayEmpty\n                IconComponent={ExpandMoreIcon}\n                disabled={disabled}\n                required={required}\n                id={id}\n                aria-describedby={`${id}-helper-text`}\n                labelId={`${id}-label`}\n                renderValue={(selected) => {\n                    if (placeHolder) {\n                        if (selected === placeHolder.value) {\n                            return placehold;\n                        }\n                    }\n                    return selected;\n                }}\n                {...rest}\n            >\n                {options && options}\n            </MUISelect>\n        </FormControl>\n    );\n};\n\nSelect.propTypes = {\n    id: PropTypes.string,\n    placeHolder: PropTypes.shape({\n        name: PropTypes.string,\n        value: PropTypes.any,\n    }), // expects placeholder objects of { name: value } and inserts into the render item function.\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    error: PropTypes.bool,\n    label: PropTypes.string,\n    helperText: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.element),\n};\n\nexport default Select;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Tab as MuiTab } from \"@mui/material\";\n\nconst typeA = {\n    color: \"#fff\",\n    borderRadius: \"4px 4px 0px 0px !important\",\n    backgroundColor: \"#003366\",\n    \"&:hover\": {\n        background: \"#001F3D\",\n    },\n    \"&:focus\": {\n        background: \"#125496\",\n        boxShadow: \"0px 0px 0px 4px #CBE4FF\",\n    },\n};\nconst typeB = {\n    color: \"#515151\",\n    \"&:hover\": {\n        background: \"#F2F9FF\",\n        color: \"#242424\",\n    },\n    \"&:focus\": {\n        boxShadow: \"0px 0px 0px 4px #CBE4FF\",\n        background: \"#fff\",\n    },\n};\nconst typeC = {\n    color: \"#333\",\n    background: \"#EDEDED\",\n    \"&:hover\": {\n        background: \"#FAFAFA\",\n        color: \"#515151\",\n    },\n    \"&:focus\": {\n        boxShadow: \"0px 0px 0px 4px #CBE4FF\",\n        background: \"#fff\",\n    },\n};\n\nconst Tab = ({ type, orientation, size, ...rest }) => {\n    const baseStyle = {\n        height: size === \"standard\" ? \"48px\" : \"60px\",\n        fontFamily: \"Rubik, sans serif\",\n        fontWeight: 400,\n        padding: size === \"standard\" ? \"14.5px 24px\" : \"20.5px 24px\",\n        textTransform: \"none\",\n        fontSize: \"16px\",\n        alignItems: orientation === \"vertical\" && \"flex-start\",\n        \"&.Mui-disabled\": {\n            background: \"#DDDDDD\",\n            color: \"#717171 !important\",\n        },\n    };\n    const style = ((type) => {\n        if (type === \"A\") {\n            return { ...baseStyle, ...typeA };\n        }\n        if (type === \"B\" || type === \"D\") {\n            return { ...baseStyle, ...typeB };\n        }\n        if (type === \"C\") {\n            return { ...baseStyle, ...typeC };\n        }\n    })(type);\n    return <MuiTab tabIndex={0} sx={style} {...rest} />;\n};\n\nTab.propTypes = {\n    orientation: PropTypes.string,\n    type: PropTypes.oneOf([\"A\", \"B\", \"C\", \"D\"]),\n    size: PropTypes.oneOf([\"standard\", \"large\"]),\n};\nTab.defaultProps = {\n    type: \"A\",\n    size: \"standard\",\n    onChange: null,\n};\n\nexport default Tab;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport const TabPanel = ({\n    children,\n    value,\n    id,\n    index,\n    className,\n    disabled,\n}) => {\n    const classes = [\"qpp-c-tabs__panel\", className].filter(Boolean).join(\" \");\n    return (\n        <div\n            role=\"tabpanel\"\n            id={id}\n            aria-hidden={value !== index}\n            aria-labelledby={`qpp-c-tabs__item--${id}`}\n            aria-disabled={disabled}\n            className={classes}\n        >\n            {value === index && children}\n        </div>\n    );\n};\n\nTabPanel.propTypes = {\n    children: PropTypes.node,\n    className: PropTypes.string,\n    index: PropTypes.number.isRequired,\n    id: PropTypes.string,\n    value: PropTypes.number.isRequired,\n    disabled: PropTypes.bool,\n};\n\nTabPanel.defaultProps = {\n    index: 0,\n    value: 0,\n};\n\nexport default TabPanel;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Tabs as MuiTabs } from \"@mui/material\";\n\nconst typeA = {\n    \"& .MuiTabs-flexContainer\": {\n        columnGap: \"4px !important\",\n    },\n    \"& .MuiTabs-indicator\": {\n        display: \"none !important\",\n    },\n};\n\nconst typeB = {\n    backgroundColor: \"#FFF\",\n    color: \"#515151\",\n    \"& .MuiTabs-indicator\": {\n        backgroundColor: \"#209FA6\",\n        height: \"6px\",\n    },\n};\n\nconst typeC = {\n    color: \"333\",\n    \"& .MuiTabs-indicator\": {\n        backgroundColor: \"#209FA6\",\n        height: \"100%\",\n        width: \"6px !important\",\n        left: 0,\n    },\n};\n\nconst typeCVerticalSelected = {\n    \"& .MuiTab-root.Mui-selected\": {\n        borderTop: \"solid 1px #8C8C8C\",\n        borderBottom: \"solid 1px #8C8C8C\",\n        borderRight: \"1px solid white\",\n        width: \"calc(100% + 1px)\",\n    },\n};\n\nconst typeD = {\n    backgroundColor: \"#FFF\",\n    color: \"#515151\",\n    \"& .MuiTabs-indicator\": {\n        backgroundColor: \"#209FA6\",\n        height: \"6px\",\n        top: 0,\n    },\n};\n\nconst baseStyle = {\n    outline: \"none\",\n    fontFamily: \"Rubik, sans Sarif\",\n    fontWeight: 400,\n    lineHeight: 19,\n    backgroundColor: \"transparent\",\n    \"& .Mui-selected\": {\n        outline: \"none\",\n        fontWeight: 500,\n        color: \"#333 !important\",\n        backgroundColor: \"#fff\",\n    },\n};\n\nconst Tabs = ({ type, size, orientation, ...rest }) => {\n    let style = { ...baseStyle };\n\n    switch (type) {\n        case \"A\":\n            style = { ...style, ...typeA };\n            break;\n        case \"B\":\n            style = { ...style, ...typeB };\n            break;\n        case \"C\":\n            if (orientation === \"vertical\") {\n                style = { ...style, ...typeC, ...typeCVerticalSelected };\n            } else {\n                style = { ...style, ...typeC };\n            }\n            break;\n        case \"D\":\n            style = { ...style, ...typeD };\n            break;\n        default:\n            break;\n    }\n\n    return (\n        <MuiTabs disableRipple orientation={orientation} sx={style} {...rest} />\n    );\n};\n\nTabs.propTypes = {\n    orientation: PropTypes.string,\n    type: PropTypes.oneOf([\"A\", \"B\", \"C\", \"D\"]),\n    size: PropTypes.oneOf([\"standard\", \"large\"]),\n    ariaLabel: PropTypes.string,\n    selected: PropTypes.string,\n    defaultSelectedId: PropTypes.string,\n    onChange: PropTypes.func,\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),\n};\n\nTabs.defaultProps = {\n    orientation: \"horizontal\",\n    type: \"A\",\n    size: \"standard\",\n    selected: null,\n    defaultSelectedId: null,\n    onChange: null,\n    children: null,\n};\n\nexport default Tabs;\n","import React from \"react\";\nimport { FormControl, FormHelperText, TextareaAutosize } from \"@mui/material\";\nimport InputLabel from \"../InputLabel\";\nimport PropTypes from \"prop-types\";\nimport { ReadOnlyTextField } from \"../index\";\n\nconst TextArea = ({\n    id,\n    error = false,\n    helperText = undefined,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n    inputProps,\n    maxLength = undefined,\n    ...rest\n}) => {\n    if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...inputProps}\n                {...rest}\n            />\n        );\n    }\n    // coerce this to avoid issue passing props to dom.\n    // text area autosize is deprecated and only takes style rules\n    return (\n        <FormControl fullWidth error={error}>\n            <div\n                style={{\n                    width: 1,\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    flexGrow: 1,\n                }}\n            />\n            <InputLabel\n                disabled={disabled}\n                shrink\n                required={required}\n                error={error}\n                htmlFor={id}\n                style={{ marginBottom: 0, height: 16 }} // force a heignt\n                sx={[\n                    {\n                        backgroundColor: \"transparent\",\n                        borderColor: \"#8C8C8C\",\n                        display: \"flex\",\n                        flexDirection: \"row-reverse\",\n                        alignSelf: \"baseline\",\n                        textTransform: \"none\",\n                        // force it outside the select box\n                        position: \"initial\",\n                        transform: \"translateX(0px) translateY(0px)\",\n                        fontFamily: \"Rubik\",\n                        fontWeight: 500,\n                        fontSize: 14,\n                        color: \"#333\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#AE1C1C !important\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    required && {\n                        transform: \"translateX(-12px) translateY(0px)\",\n                        \"& .MuiInputLabel-asterisk\": {\n                            color: \"#D92F2\",\n                            marginRight: \"3px !important\", //this was\n                        },\n                    },\n                    disabled && {\n                        color: \"rgba(0,0,0,0.6)\",\n                    },\n                    error && {\n                        color: \"#AE1C1C !important\",\n                    },\n                ]}\n            >\n                {label}\n            </InputLabel>\n            {helperText && (\n                <FormHelperText\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    id={`${id}-helper-text`}\n                    data-testid={`${id}-helper-text`}\n                    sx={[\n                        {\n                            margin: \"4px 0px 0px 0px\",\n                            color: \"#515151\",\n                            lineHeight: 1,\n                        },\n                        error && {\n                            color: \"#AE1C1C !important\",\n                        },\n                    ]}\n                >\n                    {helperText}\n                </FormHelperText>\n            )}\n            <TextareaAutosize\n                style={{ marginTop: \"8px\", maxWidth: \"100%\" }}\n                className={\n                    error ? \"text-area-variable error\" : \"text-area-variable\"\n                }\n                label={null}\n                disabled={disabled}\n                id={id}\n                {...inputProps}\n                {...rest}\n            />\n            {maxLength && !disabled && (\n                <span\n                    style={{\n                        fontFamily: \"Rubik\",\n                        fontSize: 12,\n                        color: \"#717171\",\n                        position: \"absolute\",\n                        bottom: -26,\n                        right: 0,\n                    }}\n                >\n                    {rest.value?.length}/{maxLength} Characters\n                </span>\n            )}\n        </FormControl>\n    );\n};\n\nTextArea.propTypes = {\n    id: PropTypes.string,\n    error: PropTypes.bool,\n    helperText: PropTypes.string,\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.\n    label: PropTypes.string,\n    inputProps: PropTypes.any,\n    maxLength: PropTypes.number,\n};\nexport default TextArea;\n","import React from \"react\";\nimport {\n    FormControl,\n    TextField as MUITextField,\n    FormHelperText,\n} from \"@mui/material\";\nimport InputLabel from \"../InputLabel\";\nimport MadieToolTip from \"../MadieTooltip\";\nimport PropTypes from \"prop-types\";\nimport { ReadOnlyTextField } from \"../index\";\n\nconst TextField = ({\n    id,\n    error = false,\n    helperText = undefined,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n    tooltipText,\n    inputProps,\n    labelColor = undefined,\n    textFieldStyles = {},\n    maxLength = undefined,\n    ...rest\n}) => {\n    if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...rest}\n            />\n        );\n    }\n    // get a copy of input props\n    const newInputProps = { ...inputProps } || {};\n\n    if (!newInputProps[\"data-testid\"]) {\n        newInputProps[\"data-testid\"] = `${id}-input`;\n    }\n    // if aria-describedBy is not provided, add it depending on helper-text and tooltip presence\n    if (!newInputProps[\"aria-describedby\"]) {\n        let newDescribedBy = \"\";\n        if (helperText) {\n            newDescribedBy += `${id}-helper-text `;\n        }\n        if (tooltipText) {\n            newDescribedBy += `${id}-tooltip`;\n        }\n        if (newDescribedBy) {\n            newInputProps[\"aria-describedby\"] = newDescribedBy;\n        }\n    }\n\n    const extendedTextFieldStyles = {\n        borderRadius: \"3px\",\n\n        border: \"none\",\n        marginTop: \"8px\",\n        \"& .MuiOutlinedInput-notchedOutline\": {\n            borderRadius: \"3px\",\n            borderColor: \"#8C8C8C\",\n            \"& legend\": {\n                width: 0,\n            },\n        },\n        \"& .MuiInputBase-root\": {\n            height: \"auto\",\n        },\n        \"& .MuiOutlinedInput-root\": {\n            \"&&\": {\n                borderRadius: \"3px\",\n            },\n        },\n        // input base selector\n        \"& .MuiInputBase-input\": {\n            color: \"#333\",\n            fontFamily: \"Rubik\",\n            fontSize: 14,\n            borderRadius: \"3px\",\n            padding: \"9px 14px\",\n            \"&::placeholder\": {\n                opacity: 1,\n                color: \"#717171\",\n            },\n        },\n        ...textFieldStyles,\n    };\n    return (\n        <FormControl fullWidth error={error}>\n            <div\n                style={{\n                    width: 1,\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    flexGrow: 1,\n                }}\n            />\n            <div style={{ display: \"flex\", flexDirection: \"row\", alignItems: \"baseline\" }}>\n                <InputLabel\n                    disabled={disabled}\n                    shrink\n                    required={required}\n                    error={error}\n                    htmlFor={id}\n                    style={{ marginBottom: 0, height: 16 }} // force a heignt\n                    sx={[\n                        {\n                            backgroundColor: \"transparent\",\n                            display: \"flex\",\n                            flexDirection: \"row-reverse\",\n                            alignSelf: \"baseline\",\n                            textTransform: \"none\",\n                            // force it outside the select box\n                            position: \"initial\",\n                            transform: \"translateX(0px) translateY(0px)\",\n                            fontFamily: \"Rubik\",\n                            fontWeight: 500,\n                            fontSize: 14,\n                            color: () => {\n                                if (labelColor) {\n                                    return labelColor;\n                                } else {\n                                    return \"#333\";\n                                }\n                            },\n                            \"& .MuiInputLabel-asterisk\": {\n                                color: \"#AE1C1C !important\",\n                                marginRight: \"3px !important\", //this was\n                            },\n                        },\n                        required && {\n                            transform: \"translateX(-12px) translateY(0px)\",\n                            \"& .MuiInputLabel-asterisk\": {\n                                color: \"#D92F2\",\n                                marginRight: \"3px !important\", //this was\n                            },\n                        },\n                        disabled && {\n                            color: \"rgba(0,0,0,0.6) !important\",\n                        },\n                        error && {\n                            color: \"#AE1C1C !important\",\n                        },\n                    ]}\n                >\n                    {label}\n                </InputLabel>\n                {tooltipText && (\n                    <MadieToolTip\n                        title={tooltipText}\n                        id={`${id}-tooltip`}\n                    />\n                )}\n            </div>\n            {helperText && (\n                <FormHelperText\n                    tabIndex={0}\n                    aria-live=\"polite\"\n                    id={`${id}-helper-text`}\n                    data-testid={`${id}-helper-text`}\n                    sx={[\n                        {\n                            margin: \"4px 0px 0px 0px\",\n                            color: \"#515151\",\n                            lineHeight: 1,\n                        },\n                        error && {\n                            color: \"#AE1C1C !important\",\n                        },\n                    ]}\n                >\n                    {helperText}\n                </FormHelperText>\n            )}\n            <MUITextField\n                sx={extendedTextFieldStyles}\n                label={null}\n                error={error}\n                disabled={disabled}\n                id={id}\n                inputProps={{\n                    ...newInputProps,\n                }}\n                {...rest}\n            />\n            {maxLength && !disabled && (\n                <span\n                    style={{\n                        fontFamily: \"Rubik\",\n                        fontSize: 12,\n                        color: \"#717171\",\n                        position: \"absolute\",\n                        bottom: -26,\n                        right: 0,\n                    }}\n                >\n                    {rest.value?.length}/{maxLength} Characters\n                </span>\n            )}\n        </FormControl>\n    );\n};\n\nTextField.propTypes = {\n    id: PropTypes.string,\n    textFieldStyles: PropTypes.object,\n    error: PropTypes.bool,\n    helperText: PropTypes.string,\n    required: PropTypes.bool,\n    disabled: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    placeholder: PropTypes.string, // expects placeholder objects of { name: value } and inserts into the render item function.\n    label: PropTypes.string,\n    tooltipText: PropTypes.string,\n    inputProps: PropTypes.object,\n    labelColor: PropTypes.string,\n    maxLength: PropTypes.number,\n};\nexport default TextField;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst TextInput = ({\n    id,\n    name,\n    placeholder,\n    disabled,\n    required,\n    size,\n    className,\n    label,\n    minLength,\n    maxLength,\n    hint,\n    errorLabel,\n    error,\n    autoComplete,\n    onChange,\n    onKeyPress,\n    style,\n    dataTestId,\n    type,\n    innerRef,\n    number,\n    variant,\n    parentElement,\n    ...props\n}) => {\n    const ContainerElement = parentElement || \"span\";\n    const numberProps = {\n        pattern: \"[0-9]*\",\n    };\n\n    const textInputClass = [\n        \"qpp-c-text-input\",\n        variant === \"success\" && !error && \"qpp-c-text-input--success\",\n        error && \"qpp-c-text-input--error\",\n        size === \"big\" && \"qpp-c-text-input--big\",\n        className,\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    return (\n        <ContainerElement className=\"qppds ds-text-input-container\">\n            {label && (\n                <label className=\"qpp-u-margin-bottom--8\" htmlFor={id}>\n                    {label}\n                </label>\n            )}\n            <input\n                {...(number ? numberProps : {})}\n                style={style}\n                data-testid={dataTestId}\n                type={type}\n                className={textInputClass || \"\"}\n                id={id}\n                name={name}\n                placeholder={placeholder}\n                disabled={disabled}\n                minLength={minLength}\n                maxLength={maxLength}\n                required={required}\n                autoComplete={autoComplete}\n                onChange={onChange}\n                onKeyPress={onKeyPress}\n                ref={innerRef}\n                {...props}\n            />\n            {hint && <span className=\"qpp-hint-message\">{hint}</span>}\n            {error && (\n                <span\n                    aria-label={errorLabel}\n                    role=\"alert\"\n                    className=\"qpp-error-message\"\n                >\n                    {error}\n                </span>\n            )}\n        </ContainerElement>\n    );\n};\n\nTextInput.propTypes = {\n    id: PropTypes.string,\n    name: PropTypes.string,\n    placeholder: PropTypes.string,\n    disabled: PropTypes.bool,\n    required: PropTypes.bool,\n    className: PropTypes.string,\n    minLength: PropTypes.string,\n    maxLength: PropTypes.string,\n    hint: PropTypes.string,\n    errorLabel: PropTypes.string,\n    error: PropTypes.string,\n    autoComplete: PropTypes.string,\n    onChange: PropTypes.func,\n    onKeyPress: PropTypes.func,\n    style: PropTypes.object,\n    dataTestId: PropTypes.string,\n    type: PropTypes.string,\n    innerRef: PropTypes.string,\n    number: PropTypes.bool,\n    variant: PropTypes.oneOf([\"success\"]),\n    parentElement: PropTypes.string,\n    label: PropTypes.string,\n    size: PropTypes.oneOf([\"big\"]),\n};\n\nTextInput.defaultProps = {\n    id: \"\",\n    name: \"\",\n    placeholder: null,\n    disabled: false,\n    required: false,\n    className: \"\",\n    minLength: \"\",\n    maxLength: \"\",\n    error: null,\n    errorLabel: null,\n    hint: null,\n    autoComplete: \"on\",\n    onChange: () => null,\n    onKeyPress: () => null,\n    style: null,\n    dataTestId: \"\",\n    type: \"text\",\n    innerRef: null,\n    number: false,\n    variant: null,\n    parentElement: \"span\",\n    label: null,\n    size: null,\n};\n\nexport default TextInput;\n","import React from \"react\";\nimport { TimePicker } from \"@mui/x-date-pickers\";\nimport { LocalizationProvider } from \"@mui/x-date-pickers/LocalizationProvider\";\nimport { AdapterDayjs } from \"@mui/x-date-pickers/AdapterDayjs\";\nimport InputLabel from \"../InputLabel\";\nimport { kebabCase } from \"lodash\";\nimport PropTypes from \"prop-types\";\nimport dayjs from \"dayjs\";\nimport { ReadOnlyTextField } from \"../ReadOnlyTextField\";\n\nconst timeFieldStyle = {\n    width: \"170px\",\n    height: 40,\n    marginTop: \"8px\",\n    \"& .MuiOutlinedInput-notchedOutline\": {\n        borderRadius: \"3px\",\n        borderColor: \"#8C8C8C\",\n        \"& legend\": {\n            width: 0,\n        },\n    },\n    \"& .MuiOutlinedInput-root\": {\n        \"&&\": {\n            borderRadius: \"3px\",\n        },\n    },\n    \"& .MuiInputBase-input\": {\n        color: \"#333333\",\n        fontFamily: \"Rubik\",\n        fontSize: 14,\n        borderRadius: \"3px\",\n        padding: \"9px\",\n        Width: \"170px\",\n        \"&::placeholder\": {\n            opacity: 1,\n            color: \"#717171\",\n            fontFamily: \"Rubik\",\n            fontSize: 14,\n        },\n    },\n};\n\nconst TimeField = ({\n    id,\n    label,\n    value,\n    handleTimeChange,\n    readOnly,\n    disabled,\n    required,\n    error,\n    ...rest\n}) => {\n        if (readOnly) {\n        return (\n            <ReadOnlyTextField\n                required={required}\n                label={label}\n                id={id}\n                size=\"small\"\n                {...rest}\n                value={value ? dayjs.utc(value).format(\"HH:mm:ss a\") : \"-\"}\n            />\n        );\n    }\n    return (\n        <LocalizationProvider dateAdapter={AdapterDayjs}>\n            <InputLabel\n                data-testid={`${kebabCase(label)}`}\n                style={{ marginBottom: 0, height: 16 }}\n                sx={[\n                    {\n                        backgroundColor: \"transparent\",\n                        textTransform: \"none\",\n                        height: 17,\n                        left: 0,\n                        right: 0,\n                        top: 0,\n                        fontFamily: \"Rubik\",\n                        fontStyle: \"normal\",\n                        fontWeight: 500,\n                        fontSize: 14,\n                        color: \"#333333\",\n                    },\n                ]}\n                required={required}\n                disabled={disabled}\n                error={error}\n            >\n                {`${label}`}\n            </InputLabel>\n            <TimePicker\n                sx={timeFieldStyle}\n                disabled={disabled}\n                value={value ? value : null}\n                onChange={handleTimeChange}\n                slotProps={{\n                    textField: {\n                        id: \"time\",\n                    },\n                }}\n                {...rest}\n            />\n        </LocalizationProvider>\n    );\n};\n\nTimeField.propTypes = {\n    id: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    value: PropTypes.object,\n    handleTimeChange: PropTypes.func.isRequired,\n    disabled: PropTypes.bool,\n    required: PropTypes.bool,\n    readOnly: PropTypes.bool,\n    error: PropTypes.string,\n};\n\nexport default TimeField;\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { FormControlLabel, Switch } from \"@mui/material\";\n\nconst Toggle = ({\n    checked,\n    className,\n    defaultChecked,\n    disabled,\n    id,\n    label,\n    onChange,\n    ...rest\n}) => {\n    const [uncontrolledChecked, setUncontrolledChecked] =\n        useState(defaultChecked);\n    const isControlled = checked !== undefined;\n    const isChecked = isControlled ? checked : uncontrolledChecked;\n    const classes = [\n        \"qpp-c-toggle\",\n        disabled && \"qpp-c-toggle--disabled\",\n        className,\n    ]\n        .filter(Boolean)\n        .join(\" \");\n\n    const handleChange = (event) => {\n        const nextChecked = event.target.checked;\n\n        if (!isControlled) {\n            setUncontrolledChecked(nextChecked);\n        }\n\n        onChange(event, nextChecked);\n    };\n\n    return (\n        <FormControlLabel\n            className={classes}\n            control={\n                <Switch\n                    checked={isChecked}\n                    disabled={disabled}\n                    id={id}\n                    onChange={handleChange}\n                    slotProps={{\n                        input: {\n                            role: \"switch\",\n                            ...rest,\n                        },\n                    }}\n                />\n            }\n            label={label}\n            sx={{ color: \"#515151\", textTransform: \"none\" }}\n        />\n    );\n};\n\nToggle.propTypes = {\n    checked: PropTypes.bool,\n    className: PropTypes.string,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    id: PropTypes.string.isRequired,\n    label: PropTypes.node,\n    onChange: PropTypes.func,\n};\n\nToggle.defaultProps = {\n    checked: undefined,\n    className: \"\",\n    defaultChecked: false,\n    disabled: false,\n    label: null,\n    onChange: () => null,\n};\n\nexport default Toggle;","import { IconButton } from \"@mui/material\";\nimport React, { useState } from \"react\";\nimport _ from \"lodash\";\nimport PropTypes from \"prop-types\";\n\nconst TruncateText = ({\n    text,\n    maxLength = 120,\n    dataTestId,\n    fontSize = \"1rem\",\n}) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n\n    if (!text || _.trim(text) === \"\") {\n        return null;\n    }\n\n    const toggleExpanded = () => setIsExpanded((prev) => !prev);\n\n    const displayedText = isExpanded ? text : _.slice(text, 0, maxLength);\n\n    return (\n        <div data-testid={`${dataTestId}-content`} style={{ fontSize }}>\n            <span>{displayedText}</span>\n            {text.length > maxLength && (\n                <IconButton\n                    onClick={toggleExpanded}\n                    data-testid={`${dataTestId}-toggle-button`}\n                    color=\"primary\"\n                    sx={{\n                        marginLeft: \"5px\",\n                        padding: \"0\",\n                        cursor: \"pointer\",\n                        textDecoration: \"underline\",\n                        fontSize: \"inherit\",\n                    }}\n                >\n                    {isExpanded ? \"Show less\" : \"Show more\"}\n                </IconButton>\n            )}\n        </div>\n    );\n};\n\nTruncateText.propTypes = {\n    text: PropTypes.string,\n    maxLength: PropTypes.number,\n    dataTestId: PropTypes.string,\n    fontSize: PropTypes.string,\n};\n\nexport default TruncateText;\n","import React, { Component } from \"react\";\nimport DSSpinner from \"@cmsgov/design-system/dist/components/Spinner/Spinner\";\n\nexport default class SpinnerUI extends Component {\n    render() {\n        return <DSSpinner />;\n    }\n}\n","import Accordion from \"./Accordion\";\nimport Alert from \"./Alert\";\nimport AutoComplete from \"./AutoComplete/AutoComplete\";\nimport Breadcrumb from \"./Breadcrumb\";\nimport Button, { TextButton } from \"./Button\";\nimport CalloutBox from \"./CalloutBox\";\nimport Card from \"./Card\";\nimport DateField from \"./DateField/DateField\";\nimport DateTimeField from \"./DateTimeField/DateTimeField\";\nimport FlashNotification from \"./FlashNotification/FlashNotificationUI\";\nimport Footer from \"./Footer/FooterUI\";\nimport Instant from \"./Instant\";\nimport InputLabel from \"./InputLabel\";\nimport FormControlLabel from \"./FormControlLabel\";\nimport MadieAlert from \"./MadieAlert\";\nimport MadieDialog from \"./MadieDialog\";\nimport MadieDiscardDialog from \"./MadieDiscardDialog\";\nimport MadieDeleteDialog from \"./MadieDeleteDialog\";\nimport MadieConfirmDialog from \"./MadieConfirmDialog\";\nimport MadieTable from \"./MadieTable\";\nimport MadieSpinner from \"./MadieSpinner\";\nimport MadieTooltip from \"./MadieTooltip\";\nimport MadieTooltipIcon from \"./MadieTooltipIcon\";\nimport Modal from \"./Modal\";\nimport Popover from \"./Popover\";\nimport { Pagination } from \"./Pagination\";\nimport RadioButton from \"./RadioButton/RadioButton\";\nimport ReadOnlyTextField from \"./ReadOnlyTextField\";\nimport RichTextEditor from \"./RichTextEditor\";\nimport Select from \"./Select\";\nimport Spinner from \"./UnwrappedSpinner\";\nimport TabPanel from \"./Tabs/TabPanel\";\nimport Tabs from \"./Tabs/index\";\nimport Tab from \"./Tabs/Tab\";\nimport TextField from \"./TextField\";\nimport TimeField from \"./TimeField/TimeField\";\nimport TextArea from \"./TextArea\";\nimport Tooltip from \"./Tooltip\";\nimport Toggle from \"./Toggle/Toggle\";\nimport Toast from \"./Toast\";\nimport Infotip from \"./Infotip\";\nimport SearchAndFilter from \"./SearchAndFilter\";\nimport TextInput from \"./TextInput\";\nimport Dropdown from \"./Dropdown\";\nimport DSLink from \"./Link\";\nimport NumberInput from \"./NumberInput\";\nimport TruncateText from \"./TruncateText/index\";\nimport theme from \"../themes/actionCenterTheme.js\";\n// utilities\nimport { filterByOptions, filterMap, useFilterSearch } from \"./SearchAndFilter/useFilterSearch.jsx\";\nimport {\n    MyApplicationsIcon,\n    UserSignInIcon,\n    MyTestDataIcon,\n    ReportDataIcon,\n    ManageUsersIcon,\n    AccountHomeIcon,\n    FacilityBasedPreviewIcon,\n    PaymentIcon,\n    PhysicianCompareIcon,\n    HardshipIcon,\n    TargetIcon,\n    ReportsIcon,\n    HelpSupportIcon,\n    DashboardIcon,\n    AccountSettings,\n    DetailsIcon,\n    StarIcon,\n    CliniciansIcon,\n    GroupReporting,\n    IndividualReporting,\n    ChevronLeft,\n    ChevronRight,\n    ChevronDown,\n    SwitchPractice,\n    ScoreIncrease,\n    TooltipIcon,\n    NavCollapse,\n    NavExpand,\n    CloseXIcon,\n    CloseXIcon2,\n    BellOutline,\n    EarlyClaims,\n    CliniciansList,\n    YoutubeIcon,\n    TwitterIcon,\n    WiViewReportsIcon,\n    WiViewProgressIcon,\n    WiManageGroupIcon,\n} from \"../lib/SvgComponents.jsx\";\n\nconst Icons = {\n    MyApplicationsIcon,\n    UserSignInIcon,\n    MyTestDataIcon,\n    ReportDataIcon,\n    ManageUsersIcon,\n    AccountHomeIcon,\n    FacilityBasedPreviewIcon,\n    PaymentIcon,\n    PhysicianCompareIcon,\n    HardshipIcon,\n    TargetIcon,\n    ReportsIcon,\n    HelpSupportIcon,\n    DashboardIcon,\n    AccountSettings,\n    DetailsIcon,\n    StarIcon,\n    CliniciansIcon,\n    GroupReporting,\n    IndividualReporting,\n    ChevronLeft,\n    ChevronRight,\n    ChevronDown,\n    SwitchPractice,\n    ScoreIncrease,\n    TooltipIcon,\n    NavCollapse,\n    NavExpand,\n    CloseXIcon,\n    CloseXIcon2,\n    BellOutline,\n    EarlyClaims,\n    CliniciansList,\n    YoutubeIcon,\n    TwitterIcon,\n    WiViewReportsIcon,\n    WiViewProgressIcon,\n    WiManageGroupIcon,\n};\n\nexport {\n    Accordion,\n    Alert,\n    AutoComplete,\n    Breadcrumb,\n    Button,\n    CalloutBox,\n    Card,\n    DateField,\n    DateTimeField,\n    FlashNotification,\n    Footer,\n    FormControlLabel,\n    InputLabel,\n    Icons,\n    Infotip,\n    Instant,\n    Modal,\n    MadieAlert,\n    MadieDialog,\n    MadieDiscardDialog,\n    MadieDeleteDialog,\n    MadieConfirmDialog,\n    MadieSpinner,\n    MadieTable,\n    MadieTooltipIcon,\n    MadieTooltip,\n    NumberInput,\n    Pagination,\n    Popover,\n    RadioButton,\n    ReadOnlyTextField,\n    RichTextEditor,\n    SearchAndFilter,\n    Select,\n    Spinner,\n    TabPanel,\n    Tabs,\n    Tab,\n    TextButton,\n    TextInput,\n    TimeField,\n    TextField,\n    TextArea,\n    Toggle,\n    Toast,\n    Dropdown,\n    Tooltip,\n    DSLink,\n    TruncateText,\n    theme,\n    // utilities\n    filterByOptions,\n    filterMap,\n    useFilterSearch,\n};\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport const Chevron = (props) => {\n    return (\n        <svg\n            width=\"10px\"\n            height=\"6px\"\n            viewBox=\"0 0 10 6\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            {...props}\n        >\n            <g stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n                <g\n                    transform=\"translate(-56.000000, -9.000000)\"\n                    fill=\"#242424\"\n                    fillRule=\"nonzero\"\n                >\n                    <path d=\"M61,14.9622437 C61.0868403,14.9622437 61.1636607,14.9288436 61.2304609,14.8620433 L61.2304609,14.8620433 L65.8997996,10.1927046 C65.9665999,10.1259043 66,10.049084 66,9.96224368 C66,9.87540334 65.9665999,9.79858303 65.8997996,9.73178276 L65.8997996,9.73178276 L65.3987976,9.23078076 C65.3319973,9.16398049 65.255177,9.13058036 65.1683367,9.13058036 C65.0814963,9.13058036 65.004676,9.16398049 64.9378758,9.23078076 L64.9378758,9.23078076 L61,13.1686565 L57.0621242,9.23078076 C56.995324,9.16398049 56.9185037,9.13058036 56.8316633,9.13058036 C56.744823,9.13058036 56.6680027,9.16398049 56.6012024,9.23078076 L56.6012024,9.23078076 L56.1002004,9.73178276 C56.0334001,9.79858303 56,9.87540334 56,9.96224368 C56,10.049084 56.0334001,10.1259043 56.1002004,10.1927046 L56.1002004,10.1927046 L60.7695391,14.8620433 C60.8363393,14.9288436 60.9131597,14.9622437 61,14.9622437 Z\"></path>\n                </g>\n            </g>\n        </svg>\n    );\n};\n\nChevron.propTypes = {\n    className: PropTypes.string,\n};\n\nChevron.defaultProps = {\n    className: \"accordion-icon\",\n};\n","import { createTheme } from '@mui/material/styles';\n\nimport { red } from '@mui/material/colors';\n\nconst theme = createTheme({\n  zIndex: {\n    appBar: 1251,\n    tooltip: 1250,\n  },\n  palette: {    \n    primary: {\n      main: '#007bff',\n    }\n  },\n  components: {\n    MuiIconButton: {\n      styleOverrides: {\n        root: {\n          '&.DeleteClass': { color: red[700] },\n          '&.Mui-disabled': {\n            color: \"#8C8C8C\",\n          },\n          color: \"#0073C8\"\n        }\n      }\n    }\n  },\n\n});\n\nexport default theme;"],"names":[],"sourceRoot":""}

package/storybook-static/9425.89de0c76.iframe.bundle.js

@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunk_madie_madie_design_system=self.webpackChunk_madie_madie_design_system||[]).push([[9425],{"./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{renderElement:()=>renderElement,unmountElement:()=>unmountElement});var react_dom__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react-dom/index.js"),renderElement=async(node,el)=>new Promise(resolve=>{react_dom__WEBPACK_IMPORTED_MODULE_0__.render(node,el,()=>resolve(null))}),unmountElement=el=>{react_dom__WEBPACK_IMPORTED_MODULE_0__.unmountComponentAtNode(el)}}}]);
+//# sourceMappingURL=9425.89de0c76.iframe.bundle.js.map

package/storybook-static/9425.89de0c76.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"9425.ad0b6507.iframe.bundle.js","mappings":"AAEA","sources":["webpack://@madie/madie-design-system/./node_modules/@storybook/react-dom-shim/dist/react-16.mjs"],"sourcesContent":["import * as ReactDOM from 'react-dom';\n\nvar renderElement=async(node,el)=>new Promise(resolve=>{ReactDOM.render(node,el,()=>resolve(null));}),unmountElement=el=>{ReactDOM.unmountComponentAtNode(el);};\n\nexport { renderElement, unmountElement };\n"],"names":[],"sourceRoot":""}