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

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

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

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

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

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

@@ -12,17 +12,17 @@ interface ChipInputProps {
     /** Callback when chips change */
     onChange?: (newValue: string[]) => void;
     /**
-     * Aria label for the close button on chip. Defaults to "Remove {label}"
+     * Aria label for the close button on chip. Defaults to "Remove {:label}"
      * @default "Remove {:label}"
      */
     closeButtonAriaLabel?: string;
     /**
-     * Announcement text when a chip is added. Defaults to "{label} was added"
+     * Announcement text when a chip is added. Defaults to "{:label} was added"
      * @default "{:label} was added"
      */
     addedAnnouncementTemplate?: string;
     /**
-     * Announcement text when a chip is removed. Defaults to "{label} was removed"
+     * Announcement text when a chip is removed. Defaults to "{:label} was removed"
      * @default "{:label} was removed"
      */
     removedAnnouncementTemplate?: string;

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

@@ -8,7 +8,7 @@ import { ORIENTATION } from '../DragAndDrop/types.js';
 
 // Label component for the ChipInput
 const Label$6 = /*#__PURE__*/ styled("label", {
-    target: "e1fb0gvp0",
+    target: "e17bg7n50",
     label: "Label"
 })("display:inline-flex;flex-direction:column;flex:1;position:relative;margin:10px 5px;color:inherit;padding:0 8px;width:250px;border-radius:3px;border:1px solid ", getThemeValue(THEME_NAME.BORDER_COLOR), ";background-color:", getThemeValue(THEME_NAME.BACKGROUND), ";&:has(:focus),&:has(:active){border-color:", getThemeValue(THEME_NAME.PRIMARY), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";}&:has(:focus) > span,&:has(:active) > span{color:", getThemeValue(THEME_NAME.PRIMARY), ";}&:has(:disabled){border-color:", getThemeValue(THEME_NAME.DISABLED_BORDER), ";background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:has(:disabled) > span{color:", getThemeValue(THEME_NAME.DISABLED), ";}&:has(:focus:invalid){border-color:", getThemeValue(THEME_NAME.ERROR), ";box-shadow:0 0 0 4px ", getThemeValue(THEME_NAME.ERROR_LIGHT), ";}", (props)=>props.touched ? `
         &:has(:invalid) {
@@ -38,12 +38,12 @@ const Label$6 = /*#__PURE__*/ styled("label", {
     ` : '');
 // Error message container
 const ErrorContainer$4 = /*#__PURE__*/ styled("div", {
-    target: "e1fb0gvp1",
+    target: "e17bg7n51",
     label: "ErrorContainer"
 })("color:", getThemeValue(THEME_NAME.ERROR), ";padding-top:3px;font-size:12px;line-height:14px;margin-left:3px;");
 // Visually hidden but accessible to screen readers
 const VisuallyHidden$1 = /*#__PURE__*/ styled("ul", {
-    target: "e1fb0gvp2",
+    target: "e17bg7n52",
     label: "VisuallyHidden"
 })("position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;& li{list-style:none;}");
 /**

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

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

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

@@ -142,11 +142,7 @@ class Modal extends React.Component {
                 this.setInitialFocus(node);
             }
             if (this.props.forwardRef) {
-                try {
-                    this.props.forwardRef.current = node;
-                } catch (e) {
-                    console.warn(e);
-                }
+                this.props.forwardRef.current = node;
             }
         }, /**
      * Sets initial focus within the modal.

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nexport {\n    Header as ModalHeader,\n    Body as ModalBody,\n    Footer as ModalFooter,\n} from '../../shared/styles';\nimport { DialogContainer as ModalContainer } from '../Dialog/Dialog';\n\ntype ModalProps = {\n    /** Opens the modal */\n    open: boolean;\n    /** Closes the modal on esc */\n    closeOnEsc?: boolean;\n    /** Closes the modal on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the modal closes. */\n    onClose?: () => void;\n    /** Ref forwarded to the modal container */\n    forwardRef?: React.Ref<HTMLDivElement>;\n} & React.HTMLAttributes<HTMLDivElement>;\n\ninterface ModalState {\n    open: boolean;\n}\n\n/**\n * Modal component\n *\n * A dialog window that sits on top of the main application content.\n * It disrupts the user's workflow to demand attention for a critical task or decision.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the modal while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Modal extends React.Component<\n    React.PropsWithChildren<ModalProps>,\n    ModalState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: ModalProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private modalRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the modal.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.modalRef.current) return [];\n        return Array.from(\n            this.modalRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the modal.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the modal mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n        }\n    }\n\n    /**\n     * Lifecycle method to restore focus when the modal unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n        // Clean up layer references\n        if (this.closeCallback) {\n            this.closeCallback();\n            this.closeCallback = undefined;\n        }\n        this.layer = undefined;\n    }\n\n    /**\n     * Restores focus to the element that was focused before the modal opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Modal DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setModalRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n\n        if (this.props.forwardRef) {\n            try {\n                (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current =\n                    node;\n            } catch (e) {\n                console.warn(e);\n            }\n        }\n    };\n\n    /**\n     * Sets initial focus within the modal.\n     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Modal updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: ModalProps) {\n        const { open, closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n\n            this.layer = LayerManager.renderLayer({\n                overlay: true,\n                exitDelay: 300,\n                position: LAYER_POSITION.DIALOG,\n                closeCallback: this.onClose,\n                closeOnEsc: closeOnEsc,\n                closeOnOverlayClick: closeOnOverlayClick,\n                component: (\n                    <ModalContainer\n                        {...rest}\n                        ref={this.setModalRef}\n                        role=\"dialog\"\n                        aria-modal=\"true\"\n                        tabIndex={-1}\n                        onKeyDown={this.handleKeyDown}\n                        onClick={(e) => e.stopPropagation()}\n                        elevated\n                    >\n                        {children}\n                    </ModalContainer>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    /**\n     * Renders the Modal component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"],"names":["Modal","React","Component","getDerivedStateFromProps","props","open","componentDidMount","lastFocusedElement","document","activeElement","componentWillUnmount","restoreFocus","closeCallback","undefined","layer","getSnapshotBeforeUpdate","prevProps","closeOnEsc","closeOnOverlayClick","children","rest","LayerManager","renderLayer","overlay","exitDelay","position","LAYER_POSITION","DIALOG","onClose","component","_jsx","ModalContainer","ref","setModalRef","role","aria-modal","tabIndex","onKeyDown","handleKeyDown","onClick","e","stopPropagation","elevated","forceUpdate","render","state","setState","modalRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","forwardRef","console","warn","root","firstChild","firstElementChild","getAttribute","setAttribute","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nexport {\n    Header as ModalHeader,\n    Body as ModalBody,\n    Footer as ModalFooter,\n} from '../../shared/styles';\nimport { DialogContainer as ModalContainer } from '../Dialog/Dialog';\n\ntype ModalProps = {\n    /** Opens the modal */\n    open: boolean;\n    /** Closes the modal on esc */\n    closeOnEsc?: boolean;\n    /** Closes the modal on overlay click */\n    closeOnOverlayClick?: boolean;\n    /** Call back function called when the modal closes. */\n    onClose?: () => void;\n    /** Ref forwarded to the modal container */\n    forwardRef?: React.Ref<HTMLDivElement>;\n} & React.HTMLAttributes<HTMLDivElement>;\n\ninterface ModalState {\n    open: boolean;\n}\n\n/**\n * Modal component\n *\n * A dialog window that sits on top of the main application content.\n * It disrupts the user's workflow to demand attention for a critical task or decision.\n *\n * Accessibility:\n * - Implements ARIA `role=\"dialog\"` and `aria-modal=\"true\"`.\n * - Traps focus effectively within the modal while open.\n * - Restores focus to the triggering element upon closure.\n * - Supports closing via ESC key and overlay click.\n */\nexport default class Modal extends React.Component<\n    React.PropsWithChildren<ModalProps>,\n    ModalState\n> {\n    state = {\n        open: false,\n    };\n\n    static defaultProps = {\n        closeOnEsc: true,\n        closeOnOverlayClick: true,\n    };\n\n    /**\n     * Syncs state with props.\n     */\n    static getDerivedStateFromProps(props: ModalProps) {\n        if (props.open) {\n            return {\n                open: true,\n            };\n        }\n        return null;\n    }\n\n    private layer?: ReturnType<typeof LayerManager.renderLayer>;\n\n    private closeCallback?: (resp?: unknown) => void;\n\n    /**\n     * Internal close handler.\n     * Restores focus and calls the external onClose callback.\n     */\n    private onClose = () => {\n        this.restoreFocus();\n        this.setState({\n            open: false,\n        });\n        this.props.onClose?.();\n        this.closeCallback = undefined;\n        this.layer = undefined;\n    };\n\n    private lastFocusedElement: HTMLElement | null = null;\n    private modalRef = React.createRef<HTMLDivElement>();\n\n    /**\n     * Retrieves all focusable elements within the modal.\n     */\n    private getFocusableElements = (): HTMLElement[] => {\n        if (!this.modalRef.current) return [];\n        return Array.from(\n            this.modalRef.current.querySelectorAll(\n                'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n            ),\n        ) as HTMLElement[];\n    };\n\n    /**\n     * Handles keydown events to implement the focus trap.\n     * Traps Tab and Shift+Tab within the modal.\n     */\n    private handleKeyDown = (e: React.KeyboardEvent) => {\n        if (e.key === 'Tab') {\n            const focusableElements = this.getFocusableElements();\n            if (focusableElements.length === 0) return;\n\n            const firstElement = focusableElements[0];\n            const lastElement = focusableElements[focusableElements.length - 1];\n\n            if (e.shiftKey) {\n                if (document.activeElement === firstElement) {\n                    lastElement.focus();\n                    e.preventDefault();\n                }\n            } else {\n                if (document.activeElement === lastElement) {\n                    firstElement.focus();\n                    e.preventDefault();\n                }\n            }\n        }\n    };\n\n    /**\n     * Lifecycle method to save the currently focused element when the modal mounts while open.\n     */\n    componentDidMount() {\n        if (this.props.open) {\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n        }\n    }\n\n    /**\n     * Lifecycle method to restore focus when the modal unmounts.\n     */\n    componentWillUnmount() {\n        if (this.props.open) {\n            this.restoreFocus();\n        }\n        // Clean up layer references\n        if (this.closeCallback) {\n            this.closeCallback();\n            this.closeCallback = undefined;\n        }\n        this.layer = undefined;\n    }\n\n    /**\n     * Restores focus to the element that was focused before the modal opened.\n     */\n    private restoreFocus = () => {\n        if (this.lastFocusedElement) {\n            // Check if the element is still in the document\n            const elementToBeFocused = this.lastFocusedElement;\n            this.lastFocusedElement = null;\n            setTimeout(() => {\n                if (document.body.contains(elementToBeFocused)) {\n                    elementToBeFocused.focus();\n                }\n            }, 100);\n        }\n    };\n\n    /**\n     * Callback ref to capture the Modal DOM element.\n     * Triggers initial focus setting when the element mounts.\n     */\n    private setModalRef = (node: HTMLDivElement | null) => {\n        // Update ref\n        (this.modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n\n        if (node) {\n            // Set initial focus when the node is mounted\n            this.setInitialFocus(node);\n        }\n\n        if (this.props.forwardRef) {\n            (this.props.forwardRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }\n    };\n\n    /**\n     * Sets initial focus within the modal.\n     * Tries to focus the header (first child) first, then the first interactive element, or falls back to the container.\n     */\n    private setInitialFocus = (root: HTMLElement) => {\n        // Try to find the header (assumed to be the first child)\n        const firstChild = root.firstElementChild as HTMLElement;\n        if (firstChild) {\n            // Ensure it's focusable\n            if (firstChild.getAttribute('tabindex') === null) {\n                firstChild.setAttribute('tabindex', '-1');\n            }\n            firstChild.focus();\n            return;\n        }\n\n        // Fallback to focusable elements\n        const focusableElements = this.getFocusableElements();\n        if (focusableElements.length > 0) {\n            focusableElements[0].focus();\n        } else {\n            // Fallback to container\n            root.focus();\n        }\n    };\n\n    /**\n     * Lifecycle method to handle Modal updates.\n     * Manages opening/closing logic via LayerManager and focus preservation.\n     */\n    getSnapshotBeforeUpdate(prevProps: ModalProps) {\n        const { open, closeOnEsc, closeOnOverlayClick, children, ...rest } = this.props;\n\n        if (prevProps.open && !open) {\n            this.closeCallback?.();\n            this.restoreFocus();\n        }\n\n        if (!prevProps.open && open) {\n            // Save current focus\n            this.lastFocusedElement = document.activeElement as HTMLElement;\n\n            this.layer = LayerManager.renderLayer({\n                overlay: true,\n                exitDelay: 300,\n                position: LAYER_POSITION.DIALOG,\n                closeCallback: this.onClose,\n                closeOnEsc: closeOnEsc,\n                closeOnOverlayClick: closeOnOverlayClick,\n                component: (\n                    <ModalContainer\n                        {...rest}\n                        ref={this.setModalRef}\n                        role=\"dialog\"\n                        aria-modal=\"true\"\n                        tabIndex={-1}\n                        onKeyDown={this.handleKeyDown}\n                        onClick={(e) => e.stopPropagation()}\n                        elevated\n                    >\n                        {children}\n                    </ModalContainer>\n                ),\n            });\n            this.closeCallback = this.layer[1];\n            this.forceUpdate();\n        }\n    }\n\n    /**\n     * Renders the Modal component via the LayerManager portal.\n     */\n    render() {\n        if (this.state.open && this.layer) {\n            const [Component] = this.layer;\n            return <Component />;\n        }\n\n        return null;\n    }\n}\n"],"names":["Modal","React","Component","getDerivedStateFromProps","props","open","componentDidMount","lastFocusedElement","document","activeElement","componentWillUnmount","restoreFocus","closeCallback","undefined","layer","getSnapshotBeforeUpdate","prevProps","closeOnEsc","closeOnOverlayClick","children","rest","LayerManager","renderLayer","overlay","exitDelay","position","LAYER_POSITION","DIALOG","onClose","component","_jsx","ModalContainer","ref","setModalRef","role","aria-modal","tabIndex","onKeyDown","handleKeyDown","onClick","e","stopPropagation","elevated","forceUpdate","render","state","setState","modalRef","createRef","getFocusableElements","current","Array","from","querySelectorAll","key","focusableElements","length","firstElement","lastElement","shiftKey","focus","preventDefault","elementToBeFocused","setTimeout","body","contains","node","setInitialFocus","forwardRef","root","firstChild","firstElementChild","getAttribute","setAttribute","defaultProps"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ declare const Tabs: import("react").ForwardRefExoticComponent<{
     /** OnChange event handler */
     onChange?: (index: number) => void;
     /** Props for div that contains tab body */
-    bodyProps?: object;
+    bodyProps?: React.HTMLAttributes<HTMLDivElement>;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -4,21 +4,20 @@ import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Button = /*#__PURE__*/ styled("button", {
-    target: "ewv2rsc0",
+    target: "e132lwyw0",
     label: "Button"
 })("background-color:transparent;border:none;padding:8px 12px;font-size:14px;border-radius:3px 3px 0 0;border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none', ";color:", (props)=>props.active ? getThemeValue(THEME_NAME.PRIMARY) : getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";cursor:pointer;&:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`, ";}&[disabled]{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";border-bottom:3px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
 const ButtonContainer = /*#__PURE__*/ styled("div", {
-    target: "ewv2rsc1",
+    target: "e132lwyw1",
     label: "ButtonContainer"
 })("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
 const TabBody = /*#__PURE__*/ styled("div", {
-    target: "ewv2rsc2",
+    target: "e132lwyw2",
     label: "TabBody"
 })("min-height:150px;");
 function TabsComponent(props, ref) {
-    const { active: propsActive = 0, onChange, bodyProps, ...rest } = props;
+    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;
     const [active, setActive] = useState(propsActive);
-    const { children } = props;
     const tabRefs = [];
     const childrenArray = Children.toArray(children);
     const switchTab = (index)=>()=>{

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n    useState,\n    Children,\n    useEffect,\n    PropsWithChildren,\n    isValidElement,\n    forwardRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    /**\n     * Active Tab Index\n     * @default 0\n     */\n    active?: number;\n    /** OnChange event handler */\n    onChange?: (index: number) => void;\n    /** Props for div that contains tab body */\n    bodyProps?: object;\n}>;\n\nfunction TabsComponent(props: ITabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onChange, bodyProps, ...rest } = props;\n    const [active, setActive] = useState(propsActive);\n    const { children } = props;\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        if (propsActive !== undefined) {\n            setActive(propsActive);\n            onChange?.(propsActive);\n        }\n    }, [propsActive, onChange]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tab-${sanitize(name)}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name)}-${i}`;\n    });\n\n    // Sanity check for active index\n    if (active === undefined || active < 0 || active >= childrenArray.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" ref={ref} {...rest}>\n                {childrenArray.map((child, index) => (\n                    <Button\n                        key={tabIds[index]}\n                        ref={(el) => (tabRefs[index] = el)}\n                        id={tabIds[index]}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === index}\n                        aria-controls={panelIds[index]}\n                        tabIndex={active === index ? 0 : -1}\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        onKeyDown={onTabKeyDown(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                        aria-disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody\n                {...bodyProps}\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nconst Tabs = forwardRef(TabsComponent);\nexport default Tabs;\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","TabsComponent","ref","propsActive","onChange","bodyProps","rest","setActive","useState","children","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","undefined","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","Tabs","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n    useState,\n    Children,\n    useEffect,\n    PropsWithChildren,\n    isValidElement,\n    forwardRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    /**\n     * Active Tab Index\n     * @default 0\n     */\n    active?: number;\n    /** OnChange event handler */\n    onChange?: (index: number) => void;\n    /** Props for div that contains tab body */\n    bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n}>;\n\nfunction TabsComponent(props: ITabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;\n    const [active, setActive] = useState(propsActive);\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        if (propsActive !== undefined) {\n            setActive(propsActive);\n            onChange?.(propsActive);\n        }\n    }, [propsActive, onChange]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tab-${sanitize(name)}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name)}-${i}`;\n    });\n\n    // Sanity check for active index\n    if (active === undefined || active < 0 || active >= childrenArray.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" ref={ref} {...rest}>\n                {childrenArray.map((child, index) => (\n                    <Button\n                        key={tabIds[index]}\n                        ref={(el) => (tabRefs[index] = el)}\n                        id={tabIds[index]}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === index}\n                        aria-controls={panelIds[index]}\n                        tabIndex={active === index ? 0 : -1}\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        onKeyDown={onTabKeyDown(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                        aria-disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody\n                {...bodyProps}\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nconst Tabs = forwardRef(TabsComponent);\nexport default Tabs;\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","TabsComponent","ref","propsActive","onChange","bodyProps","children","rest","setActive","useState","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","undefined","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","Tabs","forwardRef"],"mappings":"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"}

package/lib-esm/index.js

@@ -0,0 +1,43 @@
+export { default as Accordion } from './components/Accordion/Accordion.js';
+export { default as AccordionStep, AccordionStepBody, AccordionStepFooter } from './components/Accordion/AccordionStep.js';
+export { BADGE_TYPE, default as Badge } from './components/Badge/Badge.js';
+export { default as Button } from './components/Button/Button.js';
+export { default as LinkButton } from './components/Button/LinkButton.js';
+export { default as RaisedButton } from './components/Button/RaisedButton.js';
+export { default as ActionButton } from './components/Button/ActionButton.js';
+export { default as IconButton } from './components/Button/IconButton.js';
+export { default as Card } from './components/Card/Card.js';
+export { default as Chip } from './components/Chip/Chip.js';
+export { default as ChipInput } from './components/ChipInput/ChipInput.js';
+export { default as Dialog } from './components/Dialog/Dialog.js';
+export { default as DragAndDrop } from './components/DragAndDrop/DragAndDrop.js';
+export { default as Group } from './components/Groups/Group.js';
+export { default as Input } from './components/Input/Input.js';
+export { default as TextArea } from './components/Input/TextArea.js';
+export { default as Select } from './components/Input/Select.js';
+export { default as Checkbox } from './components/Input/Checkbox.js';
+export { default as Toggle } from './components/Input/Toggle.js';
+export { default as Radio } from './components/Input/Radio.js';
+export { default as RadioButton, RadioGroup } from './components/Input/RadioButton.js';
+export { default as Dropdown } from './components/Input/Dropdown.js';
+export { default as Menu } from './components/Menu/Menu.js';
+export { default as MenuItem } from './components/Menu/MenuItem.js';
+export { POPOVER_POSITION, default as Popover } from './components/Popover/Popover.js';
+export { default as Spinner } from './components/Spinner/Spinner.js';
+export { default as Stepper } from './components/Stepper/Stepper.js';
+export { default as Step } from './components/Stepper/Step.js';
+export { default as Tabs } from './components/Tabs/Tabs.js';
+export { default as Tab } from './components/Tabs/Tab.js';
+export { TOOLTIP_POSITION, default as Tooltip } from './components/Tooltip/Tooltip.js';
+export { Body as CardBody, Footer as CardFooter, Header as CardHeader, Body as DialogBody, Footer as DialogFooter, Header as DialogHeader, Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Body as ModalBody, Footer as ModalFooter, Header as ModalHeader, Body as StepBody, Footer as StepFooter } from './shared/styles.js';
+export { default as AlertDialog } from './components/Dialog/AlertDialog.js';
+export { default as ConfirmDialog } from './components/Dialog/ConfirmDialog.js';
+export { default as PromptDialog } from './components/Dialog/PromptDialog.js';
+export { ORIENTATION } from './components/DragAndDrop/types.js';
+export { DRAWER_POSITION, default as Drawer } from './components/Drawer/Drawer.js';
+export { default as GroupLabel } from './components/Groups/GroupLabel.js';
+export { default as Modal } from './components/Modal/Modal.js';
+export { default as Notification } from './components/Notification/Notification.js';
+export { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './components/Notification/types.js';
+export { TOAST_TYPE, default as Toast } from './components/Toast/Toast.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "no-frills-ui",
-    "version": "0.0.14-alpha.10",
+    "version": "0.0.14-alpha.11",
     "description": "React components that are made of styled native components. Mostly!",
     "main": "dist/index.js",
-    "module": "lib-esm/components/index.js",
-    "jsnext:main": "lib-esm/components/index.js",
-    "types": "lib-esm/components/index.d.ts",
+    "module": "lib-esm/index.js",
+    "jsnext:main": "lib-esm/index.js",
+    "types": "lib-esm/index.d.ts",
     "sideEffects": false,
     "exports": {
         ".": {
-            "types": "./lib-esm/components/index.d.ts",
-            "import": "./lib-esm/components/index.js",
+            "types": "./lib-esm/index.d.ts",
+            "import": "./lib-esm/index.js",
             "require": "./dist/index.js"
         }
     },
@@ -42,21 +42,21 @@
         },
         {
             "name": "Tree-shaking - Single Component (Button)",
-            "path": "lib-esm/components/index.js",
+            "path": "lib-esm/index.js",
             "import": "{ Button }",
             "limit": "5 KB",
             "gzip": true
         },
         {
             "name": "Tree-shaking - Multiple Components",
-            "path": "lib-esm/components/index.js",
+            "path": "lib-esm/index.js",
             "import": "{ Button, Card, Input }",
             "limit": "10 KB",
             "gzip": true
         },
         {
             "name": "Tree-shaking - All exports",
-            "path": "lib-esm/components/index.js",
+            "path": "lib-esm/index.js",
             "import": "*",
             "limit": "25 KB",
             "gzip": true

package/lib-esm/components/index.js

@@ -1,43 +0,0 @@
-export { default as Accordion } from './Accordion/Accordion.js';
-export { default as AccordionStep, AccordionStepBody, AccordionStepFooter } from './Accordion/AccordionStep.js';
-export { BADGE_TYPE, default as Badge } from './Badge/Badge.js';
-export { default as Button } from './Button/Button.js';
-export { default as LinkButton } from './Button/LinkButton.js';
-export { default as RaisedButton } from './Button/RaisedButton.js';
-export { default as ActionButton } from './Button/ActionButton.js';
-export { default as IconButton } from './Button/IconButton.js';
-export { default as Card } from './Card/Card.js';
-export { default as Chip } from './Chip/Chip.js';
-export { default as ChipInput } from './ChipInput/ChipInput.js';
-export { default as Dialog } from './Dialog/Dialog.js';
-export { default as DragAndDrop } from './DragAndDrop/DragAndDrop.js';
-export { default as Group } from './Groups/Group.js';
-export { default as Input } from './Input/Input.js';
-export { default as TextArea } from './Input/TextArea.js';
-export { default as Select } from './Input/Select.js';
-export { default as Checkbox } from './Input/Checkbox.js';
-export { default as Toggle } from './Input/Toggle.js';
-export { default as Radio } from './Input/Radio.js';
-export { default as RadioButton, RadioGroup } from './Input/RadioButton.js';
-export { default as Dropdown } from './Input/Dropdown.js';
-export { default as Menu } from './Menu/Menu.js';
-export { default as MenuItem } from './Menu/MenuItem.js';
-export { POPOVER_POSITION, default as Popover } from './Popover/Popover.js';
-export { default as Spinner } from './Spinner/Spinner.js';
-export { default as Stepper } from './Stepper/Stepper.js';
-export { default as Step } from './Stepper/Step.js';
-export { default as Tabs } from './Tabs/Tabs.js';
-export { default as Tab } from './Tabs/Tab.js';
-export { TOOLTIP_POSITION, default as Tooltip } from './Tooltip/Tooltip.js';
-export { Body as CardBody, Footer as CardFooter, Header as CardHeader, Body as DialogBody, Footer as DialogFooter, Header as DialogHeader, Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Body as ModalBody, Footer as ModalFooter, Header as ModalHeader, Body as StepBody, Footer as StepFooter } from '../shared/styles.js';
-export { default as AlertDialog } from './Dialog/AlertDialog.js';
-export { default as ConfirmDialog } from './Dialog/ConfirmDialog.js';
-export { default as PromptDialog } from './Dialog/PromptDialog.js';
-export { ORIENTATION } from './DragAndDrop/types.js';
-export { DRAWER_POSITION, default as Drawer } from './Drawer/Drawer.js';
-export { default as GroupLabel } from './Groups/GroupLabel.js';
-export { default as Modal } from './Modal/Modal.js';
-export { default as Notification } from './Notification/Notification.js';
-export { NOTIFICATION_POSITION, NOTIFICATION_TYPE } from './Notification/types.js';
-export { TOAST_TYPE, default as Toast } from './Toast/Toast.js';
-//# sourceMappingURL=index.js.map