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

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

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import React, { useId } from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
@@ -44,15 +43,19 @@ const positionHoverStyle = {
     `
 };
 const TooltipDiv = /*#__PURE__*/ styled("div", {
-    target: "es4cffs0",
+    target: "e1dfj1r70",
     label: "TooltipDiv"
 })("position:absolute;background-color:", getThemeValue(THEME_NAME.TOOLTIP_COLOR), ";padding:5px;color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";border-radius:3px;transition:transform 0.3s ease;font-size:12px;z-index:1;", (props)=>positionStyle[props.position]);
 const TooltipContainer = /*#__PURE__*/ styled("div", {
-    target: "es4cffs1",
+    target: "e1dfj1r71",
     label: "TooltipContainer"
 })("position:relative;display:inline-flex;justify-content:center;align-items:center;&:hover ", TooltipDiv, ",&:focus-within ", TooltipDiv, "{", (props)=>positionHoverStyle[props.position], "}");
-function Tooltip(props) {
-    const { children, position, ...rest } = props;
+/**
+ * Tooltip Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function TooltipComponent(props, ref) {
+    const { children, position = "BOTTOM", ...rest } = props;
     const tooltipId = useId();
     // Clone the child to inject aria-describedby and tabIndex if possible
     const trigger = /*#__PURE__*/ React.isValidElement(children) ? /*#__PURE__*/ React.cloneElement(children, {
@@ -60,8 +63,9 @@ function Tooltip(props) {
         tabIndex: children.props && typeof children.props.tabIndex !== 'undefined' ? children.props.tabIndex : 0
     }) : children;
     return /*#__PURE__*/ jsxs(TooltipContainer, {
-        position: position,
         ...rest,
+        ref: ref,
+        position: position,
         children: [
             trigger,
             /*#__PURE__*/ jsx(TooltipDiv, {
@@ -74,21 +78,7 @@ function Tooltip(props) {
         ]
     });
 }
-Tooltip.propTypes = {
-    /** Text to show in the tooltip */ tooltipText: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.node
-    ]).isRequired,
-    /** Position of the tooltip */ position: PropTypes.oneOf([
-        "TOP",
-        "LEFT",
-        "RIGHT",
-        "BOTTOM"
-    ])
-};
-Tooltip.defaultProps = {
-    position: "BOTTOM"
-};
+const Tooltip = /*#__PURE__*/ React.forwardRef(TooltipComponent);
 
 export { TOOLTIP_POSITION, Tooltip as default };
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n    padding: 5px;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\nexport default function Tooltip(props: React.PropsWithChildren<TooltipProps>) {\n    const { children, position, ...rest } = props;\n    const tooltipId = useId();\n\n    // Clone the child to inject aria-describedby and tabIndex if possible\n    const trigger = React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement, {\n              'aria-describedby': tooltipId,\n              tabIndex:\n                  children.props && typeof children.props.tabIndex !== 'undefined'\n                      ? children.props.tabIndex\n                      : 0,\n          })\n        : children;\n\n    return (\n        <TooltipContainer position={position} {...rest}>\n            {trigger}\n            <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n                {rest.tooltipText}\n            </TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\ntype TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;\n\nTooltip.propTypes = {\n    /** Text to show in the tooltip */\n    tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,\n    /** Position of the tooltip */\n    position: PropTypes.oneOf([\n        TOOLTIP_POSITION.TOP,\n        TOOLTIP_POSITION.LEFT,\n        TOOLTIP_POSITION.RIGHT,\n        TOOLTIP_POSITION.BOTTOM,\n    ]),\n};\n\nTooltip.defaultProps = {\n    position: TOOLTIP_POSITION.BOTTOM,\n};\n"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","Tooltip","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","propTypes","PropTypes","oneOfType","string","node","isRequired","oneOf","defaultProps"],"mappings":";;;;;;AAKO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAIxC,SAASE,QAAQH,KAA4C,EAAA;AACxE,IAAA,MAAM,EAAEI,QAAQ,EAAEH,QAAQ,EAAE,GAAGI,MAAM,GAAGL,KAAAA;AACxC,IAAA,MAAMM,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CAACP,QAAAA,EAAgC;QAC/C,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACIR,QAAAA,CAASJ,KAAK,IAAI,OAAOI,SAASJ,KAAK,CAACY,QAAQ,KAAK,WAAA,GAC/CR,QAAAA,CAASJ,KAAK,CAACY,QAAQ,GACvB;KACd,CAAA,GACAR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACX,gBAAAA,EAAAA;QAAiBD,QAAAA,EAAUA,QAAAA;AAAW,QAAA,GAAGI,IAAI;;AACzCG,YAAAA,OAAAA;0BACDM,GAAA,CAACpB,UAAAA,EAAAA;gBAAWqB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUhB,QAAAA,EAAUA,QAAAA;AAClEI,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAIAf,OAAAA,CAAQgB,SAAS,GAAG;AAChB,uCACAD,WAAAA,EAAaE,SAAAA,CAAUC,SAAS,CAAC;AAACD,QAAAA,SAAAA,CAAUE,MAAM;AAAEF,QAAAA,SAAAA,CAAUG;AAAK,KAAA,CAAA,CAAEC,UAAU;AAC/E,mCACAvB,QAAAA,EAAUmB,SAAAA,CAAUK,KAAK,CAAC;;;;;AAKzB,KAAA;AACL,CAAA;AAEAtB,OAAAA,CAAQuB,YAAY,GAAG;IACnBzB,QAAQ,EAAA;AACZ,CAAA;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nexport enum TOOLTIP_POSITION {\n    TOP = 'TOP',\n    BOTTOM = 'BOTTOM',\n    LEFT = 'LEFT',\n    RIGHT = 'RIGHT',\n}\n\nconst positionStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        left: 0;\n        transform: translateX(-50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        right: 0;\n        transform: translateX(50%) scale(0);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        top: 0;\n        transform: translateY(-10px) scale(0);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        bottom: 0;\n        transform: translateY(10px) scale(0);\n    `,\n};\n\nconst positionHoverStyle = {\n    [TOOLTIP_POSITION.LEFT]: `\n        transform: translateX(-100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.RIGHT]: `\n        transform: translateX(100%) scale(1);\n    `,\n    [TOOLTIP_POSITION.TOP]: `\n        transform: translateY(-25px) scale(1);\n    `,\n    [TOOLTIP_POSITION.BOTTOM]: `\n        transform: translateY(25px) scale(1);\n    `,\n};\n\nconst TooltipDiv = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: absolute;\n    background-color: ${getThemeValue(THEME_NAME.TOOLTIP_COLOR)};\n    padding: 5px;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    border-radius: 3px;\n    transition: transform 0.3s ease;\n    font-size: 12px;\n    z-index: 1;\n    ${(props) => positionStyle[props.position]}\n`;\n\nconst TooltipContainer = styled.div<{ position: TOOLTIP_POSITION }>`\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n\n    &:hover ${TooltipDiv}, &:focus-within ${TooltipDiv} {\n        ${(props) => positionHoverStyle[props.position]}\n    }\n`;\n\ntype TooltipProps = React.PropsWithChildren<{\n    /** Text to show in the tooltip */\n    tooltipText: string | React.ReactNode;\n    /**\n     * Position of the tooltip\n     * @default TOOLTIP_POSITION.BOTTOM\n     */\n    position?: TOOLTIP_POSITION;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Tooltip Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction TooltipComponent(props: TooltipProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, position = TOOLTIP_POSITION.BOTTOM, ...rest } = props;\n    const tooltipId = useId();\n\n    // Clone the child to inject aria-describedby and tabIndex if possible\n    const trigger = React.isValidElement(children)\n        ? React.cloneElement(\n              children as React.ReactElement<{ tabIndex?: number; 'aria-describedby'?: string }>,\n              {\n                  'aria-describedby': tooltipId,\n                  tabIndex:\n                      (\n                          children as React.ReactElement<{\n                              tabIndex?: number;\n                              'aria-describedby'?: string;\n                          }>\n                      ).props &&\n                      typeof (\n                          children as React.ReactElement<{\n                              tabIndex?: number;\n                              'aria-describedby'?: string;\n                          }>\n                      ).props.tabIndex !== 'undefined'\n                          ? (\n                                children as React.ReactElement<{\n                                    tabIndex?: number;\n                                    'aria-describedby'?: string;\n                                }>\n                            ).props.tabIndex\n                          : 0,\n              },\n          )\n        : children;\n\n    return (\n        <TooltipContainer {...rest} ref={ref} position={position}>\n            {trigger}\n            <TooltipDiv id={tooltipId} aria-hidden=\"true\" role=\"tooltip\" position={position}>\n                {rest.tooltipText as React.ReactNode}\n            </TooltipDiv>\n        </TooltipContainer>\n    );\n}\n\nconst Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(TooltipComponent);\nexport default Tooltip;\n"],"names":["TOOLTIP_POSITION","positionStyle","positionHoverStyle","TooltipDiv","styled","getThemeValue","THEME_NAME","TOOLTIP_COLOR","TEXT_COLOR_LIGHT","props","position","TooltipContainer","TooltipComponent","ref","children","rest","tooltipId","useId","trigger","React","isValidElement","cloneElement","tabIndex","_jsxs","_jsx","id","aria-hidden","role","tooltipText","Tooltip","forwardRef"],"mappings":";;;;;AAIO,IAAA,gBAAKA,iBAAAA,SAAAA,gBAAAA,EAAAA;;;;;AAAAA,IAAAA,OAAAA,gBAAAA;AAKX,CAAA,CAAA,EAAA;AAED,MAAMC,aAAAA,GAAgB;AAClB,IAAA,CAAA,MAAA,GAAyB;;;IAGzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;;IAG1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;;IAGxB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;;IAG3B;AACJ,CAAA;AAEA,MAAMC,kBAAAA,GAAqB;AACvB,IAAA,CAAA,MAAA,GAAyB;;IAEzB,CAAC;AACD,IAAA,CAAA,OAAA,GAA0B;;IAE1B,CAAC;AACD,IAAA,CAAA,KAAA,GAAwB;;IAExB,CAAC;AACD,IAAA,CAAA,QAAA,GAA2B;;IAE3B;AACJ,CAAA;AAEA,MAAMC,UAAAA,iBAAaC,MAAAA,CAAAA,KAAAA,EAAAA;;;AAEKC,CAAAA,CAAAA,CAAAA,qCAAAA,EAAAA,aAAAA,CAAcC,UAAAA,CAAWC,aAAa,CAAA,EAAA,qBAAA,EAEjDF,aAAAA,CAAcC,UAAAA,CAAWE,gBAAgB,CAAA,EAAA,6EAAA,EAKhD,CAACC,KAAAA,GAAUR,aAAa,CAACQ,KAAAA,CAAMC,QAAQ,CAAC,CAAA;AAG9C,MAAMC,gBAAAA,iBAAmBP,MAAAA,CAAAA,KAAAA,EAAAA;;;AAMXD,CAAAA,CAAAA,CAAAA,0FAAAA,EAAAA,UAAAA,EAAAA,kBAAAA,EAA8BA,iBAClC,CAACM,KAAAA,GAAUP,kBAAkB,CAACO,KAAAA,CAAMC,QAAQ,CAAC,EAAA,GAAA,CAAA;AAevD;;;;AAIC,IACD,SAASE,gBAAAA,CAAiBH,KAAmB,EAAEI,GAA8B,EAAA;AACzE,IAAA,MAAM,EAAEC,QAAQ,EAAEJ,mBAAkC,EAAE,GAAGK,MAAM,GAAGN,KAAAA;AAClE,IAAA,MAAMO,SAAAA,GAAYC,KAAAA,EAAAA;;IAGlB,MAAMC,OAAAA,iBAAUC,MAAMC,cAAc,CAACN,0BAC/BK,KAAAA,CAAME,YAAY,CACdP,QAAAA,EACA;QACI,kBAAA,EAAoBE,SAAAA;AACpBM,QAAAA,QAAAA,EACI,QACIR,CAIFL,KAAK,IACP,OAAO,QACHK,CAIFL,KAAK,CAACa,QAAQ,KAAK,WAAA,GAEXR,SAIFL,KAAK,CAACa,QAAQ,GAChB;KACd,CAAA,GAEJR,QAAAA;AAEN,IAAA,qBACIS,IAAA,CAACZ,gBAAAA,EAAAA;AAAkB,QAAA,GAAGI,IAAI;QAAEF,GAAAA,EAAKA,GAAAA;QAAKH,QAAAA,EAAUA,QAAAA;;AAC3CQ,YAAAA,OAAAA;0BACDM,GAAA,CAACrB,UAAAA,EAAAA;gBAAWsB,EAAAA,EAAIT,SAAAA;gBAAWU,aAAAA,EAAY,MAAA;gBAAOC,IAAAA,EAAK,SAAA;gBAAUjB,QAAAA,EAAUA,QAAAA;AAClEK,gBAAAA,QAAAA,EAAAA,IAAAA,CAAKa;;;;AAItB;AAEA,MAAMC,OAAAA,iBAAUV,KAAAA,CAAMW,UAAU,CAA+BlB,gBAAAA;;;;"}

package/lib-esm/icons/CheckCircle.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-function CheckCircle(props) {
+function CheckCircle$4(props) {
     return /*#__PURE__*/ jsxs("svg", {
         height: "24",
         viewBox: "0 0 24 24",
@@ -19,5 +19,5 @@ function CheckCircle(props) {
     });
 }
 
-export { CheckCircle as default };
+export { CheckCircle$4 as default };
 //# sourceMappingURL=CheckCircle.js.map

package/lib-esm/icons/CheckCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckCircle.js","sources":["../../src/icons/CheckCircle.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M0 0h24v24H0V0zm0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,YAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,gCAAA;gBAAiCH,IAAAA,EAAK;;0BAC9CC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}
+{"version":3,"file":"CheckCircle.js","sources":["../../src/icons/CheckCircle.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M0 0h24v24H0V0zm0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,cAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,gCAAA;gBAAiCH,IAAAA,EAAK;;0BAC9CC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}

package/lib-esm/icons/ErrorOutline.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 
-function CheckCircle(props) {
+function CheckCircle$1(props) {
     return /*#__PURE__*/ jsx("svg", {
         height: "24",
         viewBox: "0 0 24 24",
@@ -13,5 +13,5 @@ function CheckCircle(props) {
     });
 }
 
-export { CheckCircle as default };
+export { CheckCircle$1 as default };
 //# sourceMappingURL=ErrorOutline.js.map

package/lib-esm/icons/ErrorOutline.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorOutline.js","sources":["../../src/icons/ErrorOutline.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsx","svg","height","viewBox","width","fill","path","d"],"mappings":";;AAAe,SAASA,YAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;AACzE,QAAA,QAAA,gBAAAC,GAAA,CAACM,MAAAA,EAAAA;YAAKC,CAAAA,EAAE;;;AAGpB;;;;"}
+{"version":3,"file":"ErrorOutline.js","sources":["../../src/icons/ErrorOutline.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsx","svg","height","viewBox","width","fill","path","d"],"mappings":";;AAAe,SAASA,cAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,GAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;AACzE,QAAA,QAAA,gBAAAC,GAAA,CAACM,MAAAA,EAAAA;YAAKC,CAAAA,EAAE;;;AAGpB;;;;"}

package/lib-esm/icons/Info.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-function CheckCircle(props) {
+function CheckCircle$3(props) {
     return /*#__PURE__*/ jsxs("svg", {
         height: "24",
         viewBox: "0 0 24 24",
@@ -19,5 +19,5 @@ function CheckCircle(props) {
     });
 }
 
-export { CheckCircle as default };
+export { CheckCircle$3 as default };
 //# sourceMappingURL=Info.js.map

package/lib-esm/icons/Info.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sources":["../../src/icons/Info.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,YAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,iBAAA;gBAAkBH,IAAAA,EAAK;;0BAC/BC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}
+{"version":3,"file":"Info.js","sources":["../../src/icons/Info.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,cAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,iBAAA;gBAAkBH,IAAAA,EAAK;;0BAC/BC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}

package/lib-esm/icons/ReportProblem.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
-function CheckCircle(props) {
+function CheckCircle$2(props) {
     return /*#__PURE__*/ jsxs("svg", {
         height: "24",
         viewBox: "0 0 24 24",
@@ -19,5 +19,5 @@ function CheckCircle(props) {
     });
 }
 
-export { CheckCircle as default };
+export { CheckCircle$2 as default };
 //# sourceMappingURL=ReportProblem.js.map

package/lib-esm/icons/ReportProblem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportProblem.js","sources":["../../src/icons/ReportProblem.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,YAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,iBAAA;gBAAkBH,IAAAA,EAAK;;0BAC/BC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}
+{"version":3,"file":"ReportProblem.js","sources":["../../src/icons/ReportProblem.tsx"],"sourcesContent":["export default function CheckCircle(props: React.SVGProps<SVGSVGElement>) {\n    return (\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" fill=\"currentColor\" {...props}>\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path d=\"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z\" />\n        </svg>\n    );\n}\n"],"names":["CheckCircle","props","_jsxs","svg","height","viewBox","width","fill","_jsx","path","d"],"mappings":";;AAAe,SAASA,cAAYC,KAAoC,EAAA;AACpE,IAAA,qBACIC,IAAA,CAACC,KAAAA,EAAAA;QAAIC,MAAAA,EAAO,IAAA;QAAKC,OAAAA,EAAQ,WAAA;QAAYC,KAAAA,EAAM,IAAA;QAAKC,IAAAA,EAAK,cAAA;AAAgB,QAAA,GAAGN,KAAK;;0BACzEO,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE,iBAAA;gBAAkBH,IAAAA,EAAK;;0BAC/BC,GAAA,CAACC,MAAAA,EAAAA;gBAAKC,CAAAA,EAAE;;;;AAGpB;;;;"}

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/lib-esm/shared/LayerManager.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardRefExoticComponent, RefAttributes } from 'react';
 /** Enums for layer position on screen. */
 export declare enum LAYER_POSITION {
     TOP_LEFT = 0,
@@ -13,7 +13,7 @@ interface LayerConfig {
     /** Show an overlay */
     overlay?: boolean;
     /** Element to render inside the layer. */
-    component: JSX.Element;
+    component: React.JSX.Element | null;
     /** Position of the layer */
     position?: LAYER_POSITION;
     /** Delay for exit */
@@ -23,7 +23,7 @@ interface LayerConfig {
     /** Close layer overlay is clicked. */
     closeOnOverlayClick?: boolean;
     /** Callback called when modal closes */
-    closeCallback?: <T>(resp: T) => void;
+    closeCallback?: (resp?: unknown) => void;
     /** Layer is created with max z-index */
     alwaysOnTop?: boolean;
 }
@@ -86,11 +86,12 @@ declare class LayerManager {
      * @param layer
      */
     private unmount;
+    private Empty;
     /**
      * Renders a layer.
      * @param config
      */
-    renderLayer: (config: LayerConfig) => [() => React.ReactPortal | null, (resp?: unknown) => void];
+    renderLayer: (config: LayerConfig) => [ForwardRefExoticComponent<RefAttributes<HTMLDivElement>>, (resp?: unknown) => void];
 }
 declare const _default: LayerManager;
 export default _default;

package/lib-esm/shared/LayerManager.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import React, { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from './constants.js';
 
@@ -32,8 +32,8 @@ import { getThemeValue, THEME_NAME } from './constants.js';
     [5]: 'bottom: 0; right: 0; justify-content: flex-end;',
     [6]: 'top: 0; left: 0; justify-content: center; align-items: center;'
 };
-/** Layer container component. */ const Container = /*#__PURE__*/ styled("div", {
-    target: "euaj5y50",
+/** Layer container component. */ const Container$5 = /*#__PURE__*/ styled("div", {
+    target: "e1at2bda0",
     label: "Container"
 })("position:fixed;display:flex;opacity:0;transition:opacity 0.3s ease;", (props)=>POSITION_STYLE[props.position], " ", (props)=>props.overlay && `
         width: 100%;
@@ -44,7 +44,7 @@ import { getThemeValue, THEME_NAME } from './constants.js';
     `, "    z-index:", (props)=>props.zIndex, ";.nf-layer-enter &{opacity:1;", (props)=>props.overlay && `
             backdrop-filter: blur(3px);
         `, "}");
-/** Key code for different keys. */ const KEY_CODES = {
+/** Key code for different keys. */ const KEY_CODES$1 = {
     ESC: 27
 };
 /**
@@ -82,13 +82,13 @@ import { getThemeValue, THEME_NAME } from './constants.js';
  *   const { LayerComponent } = this.state;
  *   return LayerComponent ? <LayerComponent /> : null;
  * }
- */ class LayerManager {
+ */ let LayerManager$1 = class LayerManager {
     /**
      * Constructor simply registers a event listener on body to
      * react to esc key press.
      */ constructor(){
         /** Layer stack */ this.layers = [];
-        /** z-index of the next layer */ this.nextIndex = 10000;
+        /** z-index of the next layer */ this.nextIndex = 0;
         this.timeoutIds = new Map(); // Track timeouts
         // Add cleanup method
         this.destroy = ()=>{
@@ -124,14 +124,21 @@ import { getThemeValue, THEME_NAME } from './constants.js';
                 this.timeoutIds.delete(layer.id);
                 try {
                     layer.config.closeCallback?.(resp);
-                } catch (e) {
-                    console.warn(e.message);
+                } catch (err) {
+                    if (err instanceof Error) {
+                        console.warn(err.message);
+                    } else {
+                        console.warn(err);
+                    }
                 }
                 // Clear reference to help GC
                 layer.config.component = null;
             }, layer.config.exitDelay);
             this.timeoutIds.set(layer.id, timeoutId);
         };
+        this.Empty = ()=>{
+            return null;
+        };
         /**
      * Renders a layer.
      * @param config
@@ -139,7 +146,7 @@ import { getThemeValue, THEME_NAME } from './constants.js';
             // SSR guard
             if (typeof document === 'undefined') {
                 return [
-                    ()=>null,
+                    /*#__PURE__*/ React.forwardRef(this.Empty),
                     ()=>{}
                 ];
             }
@@ -149,10 +156,12 @@ import { getThemeValue, THEME_NAME } from './constants.js';
                 ...config
             };
             // Get the z-index for the new layer
-            const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : this.nextIndex++;
+            const currentIndex = layerConfig.alwaysOnTop ? 2147483647 : 10000 + this.nextIndex;
             const className = layerConfig.alwaysOnTop ? 'nf-layer-manager-top' : 'nf-layer-manager';
             // Create a unique ID for tracking this layer
-            const layerId = `nf-layer-manager-${currentIndex}`;
+            const layerId = `${className}-${currentIndex + this.nextIndex}`;
+            // Always increment for next layer
+            this.nextIndex += 1;
             const overlayClickHandler = ()=>{
                 const layer = this.layers.find((l)=>l.id === layerId);
                 if (layer && layer.config.closeOnOverlayClick !== false) {
@@ -165,112 +174,103 @@ import { getThemeValue, THEME_NAME } from './constants.js';
                     this.unmount(layer, resp);
                 }
             };
-            // Return callback which will trigger the un-mount.
-            return [
-                ()=>{
-                    const [divElement, setDivElement] = React.useState(null);
-                    useEffect(()=>{
-                        // Create the div element only once when component mounts
-                        const div = document.createElement('div');
-                        div.setAttribute('class', className);
-                        div.setAttribute('id', layerId);
-                        document.body.appendChild(div);
-                        // Add layer to stack
-                        const currentLayer = {
-                            id: layerId,
-                            config: layerConfig,
-                            element: div
-                        };
-                        this.layers.push(currentLayer);
-                        setDivElement(div);
-                        // Add entry animation class after a short delay
-                        setTimeout(()=>{
-                            div.setAttribute('class', 'nf-layer-enter');
-                        }, 10);
-                        // Track elements modified for accessibility
-                        const modifiedElements = [];
-                        let originalBodyOverflow = null;
-                        let originalBodyPosition = null;
-                        let originalBodyWidth = null;
-                        let originalBodyTop = null;
-                        let scrollY = 0;
-                        // Apply aria-hidden to siblings and body scroll lock for overlay modals
-                        if (layerConfig.overlay) {
-                            // Hide all body children except this layer portal, scripts, and styles
-                            const bodyChildren = Array.from(document.body.children);
-                            bodyChildren.forEach((child)=>{
-                                if (child !== div && child.className !== 'nf-layer-manager-top' && child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE') {
-                                    const hadAriaHidden = child.hasAttribute('aria-hidden');
-                                    const previousValue = child.getAttribute('aria-hidden');
-                                    // Only set aria-hidden if not already hidden
-                                    if (previousValue !== 'true') {
-                                        child.setAttribute('aria-hidden', 'true');
-                                        modifiedElements.push({
-                                            element: child,
-                                            hadAriaHidden,
-                                            previousValue
-                                        });
-                                    }
+            const LayerContainer = (props, ref)=>{
+                const [divElement, setDivElement] = React.useState(null);
+                useEffect(()=>{
+                    // Create the div element only once when component mounts
+                    const div = document.createElement('div');
+                    div.setAttribute('class', className);
+                    div.setAttribute('id', layerId);
+                    document.body.appendChild(div);
+                    // Add layer to stack
+                    const currentLayer = {
+                        id: layerId,
+                        config: layerConfig,
+                        element: div
+                    };
+                    this.layers.push(currentLayer);
+                    setDivElement(div);
+                    // Add entry animation class after a short delay
+                    setTimeout(()=>{
+                        div.setAttribute('class', 'nf-layer-enter');
+                    }, 10);
+                    // Track elements modified for accessibility
+                    const modifiedElements = [];
+                    let originalBodyOverflow = null;
+                    let scrollY = 0;
+                    // Apply aria-hidden to siblings and body scroll lock for overlay modals
+                    if (layerConfig.overlay) {
+                        // Hide all body children except this layer portal, scripts, and styles
+                        const bodyChildren = Array.from(document.body.children);
+                        bodyChildren.forEach((child)=>{
+                            if (child !== div && child.className !== 'nf-layer-manager-top' && child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE') {
+                                const hadAriaHidden = child.hasAttribute('aria-hidden');
+                                const previousValue = child.getAttribute('aria-hidden');
+                                // Only set aria-hidden if not already hidden
+                                if (previousValue !== 'true') {
+                                    child.setAttribute('aria-hidden', 'true');
+                                    modifiedElements.push({
+                                        element: child,
+                                        hadAriaHidden,
+                                        previousValue
+                                    });
                                 }
-                            });
-                            // Prevent body scroll on iOS
-                            scrollY = window.scrollY;
-                            originalBodyOverflow = document.body.style.overflow;
-                            originalBodyPosition = document.body.style.position;
-                            originalBodyWidth = document.body.style.width;
-                            originalBodyTop = document.body.style.top;
-                            document.body.style.overflow = 'hidden';
-                            document.body.style.position = 'fixed';
-                            document.body.style.width = '100%';
-                            document.body.style.top = `-${scrollY}px`;
-                        }
-                        // Cleanup function - remove div when component unmounts
-                        return ()=>{
-                            // Restore aria-hidden attributes
-                            modifiedElements.forEach(({ element, hadAriaHidden, previousValue })=>{
-                                if (document.body.contains(element)) {
-                                    if (hadAriaHidden && previousValue !== null) {
-                                        element.setAttribute('aria-hidden', previousValue);
-                                    } else {
-                                        element.removeAttribute('aria-hidden');
-                                    }
-                                }
-                            });
-                            // Restore body scroll
-                            if (layerConfig.overlay) {
-                                document.body.style.overflow = originalBodyOverflow || '';
-                                document.body.style.position = originalBodyPosition || '';
-                                document.body.style.width = originalBodyWidth || '';
-                                document.body.style.top = originalBodyTop || '';
-                                window.scrollTo(0, scrollY);
-                            }
-                            if (document.body.contains(div)) {
-                                document.body.removeChild(div);
                             }
-                            // Remove from layers array
-                            const index = this.layers.findIndex((layer)=>layer.id === layerId);
-                            if (index !== -1) {
-                                this.layers.splice(index, 1);
-                            }
-                        };
-                    }, []); // Empty dependency array - run only once
-                    if (!divElement) {
-                        return null;
+                        });
+                        // Prevent body scroll on iOS
+                        scrollY = window.scrollY;
+                        originalBodyOverflow = document.body.style.overflow;
+                        document.body.style.overflow = 'hidden';
                     }
-                    return /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ jsx(Container, {
-                        onClick: overlayClickHandler,
-                        zIndex: currentIndex,
-                        ...layerConfig,
-                        children: layerConfig.component
-                    }), divElement);
-                },
+                    // Cleanup function - remove div when component unmounts
+                    return ()=>{
+                        // Restore aria-hidden attributes
+                        modifiedElements.forEach(({ element, hadAriaHidden, previousValue })=>{
+                            if (document.body.contains(element)) {
+                                if (hadAriaHidden && previousValue !== null) {
+                                    element.setAttribute('aria-hidden', previousValue);
+                                } else {
+                                    element.removeAttribute('aria-hidden');
+                                }
+                            }
+                        });
+                        // Restore body scroll
+                        if (layerConfig.overlay) {
+                            document.body.style.overflow = originalBodyOverflow || '';
+                            window.scrollTo(0, scrollY);
+                        }
+                        if (document.body.contains(div)) {
+                            document.body.removeChild(div);
+                        }
+                        // Remove from layers array
+                        const index = this.layers.findIndex((layer)=>layer.id === layerId);
+                        if (index !== -1) {
+                            this.layers.splice(index, 1);
+                        }
+                    };
+                }, []); // Empty dependency array - run only once
+                if (!divElement) {
+                    return null;
+                }
+                return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(Container$5, {
+                    ...props,
+                    ref: ref,
+                    onClick: overlayClickHandler,
+                    zIndex: currentIndex,
+                    ...layerConfig,
+                    children: layerConfig.component
+                }), divElement);
+            };
+            // Return callback which will trigger the un-mount.
+            return [
+                /*#__PURE__*/ React.forwardRef(LayerContainer),
                 closeFn
             ];
         };
         if (typeof document !== 'undefined') {
             // Store handler reference for cleanup
             this.keyupHandler = (e)=>{
-                if (this.layers.length && e.keyCode === KEY_CODES.ESC) {
+                if (this.layers.length && e.keyCode === KEY_CODES$1.ESC) {
                     const lastLayer = this.layers.slice(-1)[0];
                     if (lastLayer.config.closeOnEsc !== false) {
                         this.unmount(lastLayer);
@@ -280,9 +280,9 @@ import { getThemeValue, THEME_NAME } from './constants.js';
             document.body.addEventListener('keyup', this.keyupHandler);
         }
     }
-}
+};
 // Return the instance of the class to create a Singleton.
-var LayerManager$1 = new LayerManager();
+var LayerManager = new LayerManager$1();
 
-export { LAYER_POSITION, LayerManager$1 as default };
+export { LAYER_POSITION, LayerManager as default };
 //# sourceMappingURL=LayerManager.js.map