@salt-ds/core 1.8.2 → 1.9.0

package/dist-es/tooltip/Tooltip.js

@@ -1,21 +1,17 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, isValidElement, cloneElement } from 'react';
-import { FloatingPortal, FloatingArrow } from '@floating-ui/react';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
-import '../utils/useFloatingUI.js';
+import { useFloatingComponent } from '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
-import { SaltProvider } from '../salt-provider/SaltProvider.js';
+import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import { mergeProps } from '../utils/mergeProps.js';
 import { useTooltip } from './useTooltip.js';
-import css_248z from './Tooltip.css.js';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { TooltipBase } from './TooltipBase.js';
 
 const withBaseName = makePrefixer("saltTooltip");
 const Tooltip = forwardRef(
@@ -23,7 +19,7 @@ const Tooltip = forwardRef(
     const {
       children,
       className,
-      disabled: disabledProp,
+      disabled: disabledProp = false,
       hideArrow = false,
       hideIcon = false,
       open: openProp,
@@ -35,18 +31,12 @@ const Tooltip = forwardRef(
       ...rest
     } = props;
     const {
-      a11yProps,
       disabled: formFieldDisabled,
       validationStatus: formFieldValidationStatus
     } = useFormFieldProps();
     const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
     const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "salt-tooltip",
-      css: css_248z,
-      window: targetWindow
-    });
+    const { Component: FloatingComponent } = useFloatingComponent();
     const hookProps = {
       open: openProp,
       placement,
@@ -60,7 +50,8 @@ const Tooltip = forwardRef(
       floating,
       reference,
       getTriggerProps,
-      getTooltipProps
+      getTooltipProps,
+      getTooltipPosition
     } = useTooltip(hookProps);
     const triggerRef = useForkRef(
       isValidElement(children) ? children.ref : null,
@@ -73,43 +64,18 @@ const Tooltip = forwardRef(
           ...mergeProps(getTriggerProps(), children.props),
           ref: triggerRef
         }),
-        open && !disabled && /* @__PURE__ */ jsx(FloatingPortal, {
-          children: /* @__PURE__ */ jsx(SaltProvider, {
-            children: /* @__PURE__ */ jsxs("div", {
-              className: clsx(
-                withBaseName(),
-                withBaseName(status),
-                className
-              ),
-              ref: floatingRef,
-              ...getTooltipProps(),
-              children: [
-                /* @__PURE__ */ jsxs("div", {
-                  className: withBaseName("container"),
-                  children: [
-                    !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
-                      status,
-                      size: 1,
-                      className: withBaseName("icon")
-                    }),
-                    /* @__PURE__ */ jsx("span", {
-                      id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
-                      className: withBaseName("content"),
-                      children: content
-                    })
-                  ]
-                }),
-                !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
-                  ...arrowProps,
-                  className: withBaseName("arrow"),
-                  strokeWidth: 1,
-                  fill: "var(--salt-container-primary-background)",
-                  stroke: "var(--tooltip-status-borderColor)",
-                  height: 5,
-                  width: 10
-                })
-              ]
-            })
+        /* @__PURE__ */ jsx(FloatingComponent, {
+          className: clsx(withBaseName(), withBaseName(status), className),
+          open: open && !disabled,
+          ref: floatingRef,
+          ...getTooltipProps(),
+          ...getTooltipPosition(),
+          children: /* @__PURE__ */ jsx(TooltipBase, {
+            hideIcon,
+            status,
+            content,
+            hideArrow,
+            arrowProps
           })
         })
       ]

package/dist-es/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      a11yProps,\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled ?? disabledProp;\n    const status = formFieldValidationStatus ?? statusProp;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tooltip\",\n      css: tooltipCss,\n      window: targetWindow,\n    });\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span\n                    id={a11yProps?.[\"aria-describedby\"]}\n                    className={withBaseName(\"content\")}\n                  >\n                    {content}\n                  </span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n} from \"react\";\n\nimport { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n  useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled ?? disabledProp;\n    const status = formFieldValidationStatus ?? statusProp;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n      getTooltipPosition,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref);\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(withBaseName(), withBaseName(status), className)}\n          open={open && !disabled}\n          ref={floatingRef}\n          {...getTooltipProps()}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SAAS,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,UAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACf,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/tooltip/TooltipBase.js

@@ -0,0 +1,58 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
+import { FloatingArrow } from '@floating-ui/react';
+import 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import 'clsx';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import css_248z from './Tooltip.css.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+
+const withBaseName = makePrefixer("saltTooltip");
+const TooltipBase = (props) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tooltip",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { a11yProps } = useFormFieldProps();
+  const { arrowProps, content, hideArrow, hideIcon, status } = props;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: withBaseName("container"),
+        children: [
+          !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
+            status,
+            size: 1,
+            className: withBaseName("icon")
+          }),
+          /* @__PURE__ */ jsx("span", {
+            id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
+            className: withBaseName("content"),
+            children: content
+          })
+        ]
+      }),
+      !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
+        ...arrowProps,
+        className: withBaseName("arrow"),
+        strokeWidth: 1,
+        fill: "var(--salt-container-primary-background)",
+        stroke: "var(--tooltip-status-borderColor)",
+        height: 5,
+        width: 10
+      })
+    ]
+  });
+};
+
+export { TooltipBase };
+//# sourceMappingURL=TooltipBase.js.map

package/dist-es/tooltip/TooltipBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n  arrowProps: FloatingArrowProps;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps } = useFormFieldProps();\n\n  const { arrowProps, content, hideArrow, hideIcon, status } = props;\n  return (\n    <>\n      <div className={withBaseName(\"container\")}>\n        {!hideIcon && (\n          <StatusIndicator\n            status={status}\n            size={1}\n            className={withBaseName(\"icon\")}\n          />\n        )}\n        <span\n          id={a11yProps?.[\"aria-describedby\"]}\n          className={withBaseName(\"content\")}\n        >\n          {content}\n        </span>\n      </div>\n      {!hideArrow && (\n        <FloatingArrow\n          {...arrowProps}\n          className={withBaseName(\"arrow\")}\n          strokeWidth={1}\n          fill=\"var(--salt-container-primary-background)\"\n          stroke=\"var(--tooltip-status-borderColor)\"\n          height={5}\n          width={10}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["tooltipCss"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAC7D,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAED,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/tooltip/useAriaAnnounce.js

@@ -2,7 +2,7 @@ import { useRef, useEffect } from 'react';
 import '../aria-announcer/AriaAnnouncerContext.js';
 import 'react/jsx-runtime';
 import { useAriaAnnouncer } from '../aria-announcer/useAriaAnnouncer.js';
-import '../utils/useFloatingUI.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';

package/dist-es/tooltip/useTooltip.js

@@ -1,7 +1,7 @@
 import { offset, flip, shift, limitShift, arrow, useInteractions, useHover, safePolygon, useFocus, useRole, useDismiss } from '@floating-ui/react';
 import { useRef } from 'react';
 import { useControlled } from '../utils/useControlled.js';
-import { useFloatingUI } from '../utils/useFloatingUI.js';
+import { useFloatingUI } from '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
@@ -37,7 +37,8 @@ function useTooltip(props) {
     strategy,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
     placement,
-    context
+    context,
+    elements
   } = useFloatingUI({
     open,
     onOpenChange: handleOpenChange,
@@ -80,24 +81,30 @@ function useTooltip(props) {
   const getTooltipProps = () => {
     return getFloatingProps({
       "data-placement": placement,
-      ref: floating,
-      style: {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
-        position: strategy
-      }
+      ref: floating
     });
   };
   const getTriggerProps = () => getReferenceProps({
     ref: reference
   });
+  const getTooltipPosition = () => {
+    var _a, _b;
+    return {
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      position: strategy,
+      width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+      height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
+    };
+  };
   return {
     arrowProps,
     open,
     floating,
     reference,
     getTooltipProps,
-    getTriggerProps
+    getTriggerProps,
+    getTooltipPosition
   };
 }
 

package/dist-es/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n    style: {\n      position: strategy,\n      left: arrowX ?? 0,\n      top: arrowY ?? 0,\n    },\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n      style: {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n      },\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n  };\n}\n"],"names":["open"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n    elements,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n    style: {\n      position: strategy,\n      left: arrowX ?? 0,\n      top: arrowY ?? 0,\n    },\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  const getTooltipPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n    getTooltipPosition,\n  };\n}\n"],"names":["open"],"mappings":"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"}

package/dist-es/utils/useFloatingUI/useFloatingUI.js

@@ -0,0 +1,115 @@
+import { jsx } from 'react/jsx-runtime';
+import { FloatingPortal, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
+import { forwardRef, createContext, useMemo, useContext } from 'react';
+import { SaltProvider } from '../../salt-provider/SaltProvider.js';
+
+const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(props, ref) {
+  const { open, top, left, position, ...rest } = props;
+  const style = {
+    top,
+    left,
+    position
+  };
+  return open ? /* @__PURE__ */ jsx(FloatingPortal, {
+    children: /* @__PURE__ */ jsx(SaltProvider, {
+      children: /* @__PURE__ */ jsx("div", {
+        style,
+        ...rest,
+        ref
+      })
+    })
+  }) : null;
+});
+const FloatingComponentContext = createContext({
+  Component: DefaultFloatingComponent
+});
+if (process.env.NODE_ENV !== "production") {
+  FloatingComponentContext.displayName = "FloatingComponentContext";
+}
+function FloatingComponentProvider(props) {
+  const { Component, children } = props;
+  const value = useMemo(() => ({ Component }), [Component]);
+  return /* @__PURE__ */ jsx(FloatingComponentContext.Provider, {
+    value,
+    children
+  });
+}
+function useFloatingComponent() {
+  return useContext(FloatingComponentContext);
+}
+const defaultGetMiddleware = (defaultMiddleware) => defaultMiddleware;
+const defaultFloatingPlaform = {
+  platform,
+  middleware: defaultGetMiddleware,
+  animationFrame: false
+};
+const FloatingPlatformContext = createContext(
+  defaultFloatingPlaform
+);
+function FloatingPlatformProvider(props) {
+  const {
+    platform: platformProp,
+    middleware,
+    animationFrame,
+    children
+  } = props;
+  const floatingPlatformContextValue = useMemo(
+    () => ({
+      platform: platformProp != null ? platformProp : platform,
+      middleware: middleware != null ? middleware : defaultGetMiddleware,
+      animationFrame: animationFrame != null ? animationFrame : false
+    }),
+    [platformProp, middleware, animationFrame]
+  );
+  return /* @__PURE__ */ jsx(FloatingPlatformContext.Provider, {
+    value: floatingPlatformContextValue,
+    children
+  });
+}
+function useFloatingPlatform() {
+  return useContext(FloatingPlatformContext);
+}
+const DEFAULT_FLOATING_UI_MIDDLEWARE = [
+  flip(),
+  shift({ limiter: limitShift() })
+];
+function useFloatingUI(props) {
+  const {
+    placement,
+    strategy,
+    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
+    open = false,
+    onOpenChange
+  } = props;
+  const handleOpenChange = (open2) => {
+    update();
+    onOpenChange == null ? void 0 : onOpenChange(open2);
+  };
+  const {
+    platform: contextPlaform,
+    middleware: contextMiddleware,
+    animationFrame
+  } = useFloatingPlatform();
+  const { reference, floating, refs, update, ...rest } = useFloating({
+    placement,
+    strategy,
+    middleware: contextMiddleware(middleware),
+    open,
+    onOpenChange: handleOpenChange,
+    whileElementsMounted: (...args) => {
+      const cleanup = autoUpdate(...args, { animationFrame });
+      return cleanup;
+    },
+    platform: contextPlaform
+  });
+  return {
+    reference,
+    floating,
+    refs,
+    update,
+    ...rest
+  };
+}
+
+export { DEFAULT_FLOATING_UI_MIDDLEWARE, FloatingComponentProvider, FloatingPlatformProvider, useFloatingComponent, useFloatingPlatform, useFloatingUI };
+//# sourceMappingURL=useFloatingUI.js.map

package/dist-es/utils/useFloatingUI/useFloatingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  Middleware,\n  Placement,\n  Platform,\n  Strategy,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n  FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useMemo,\n  forwardRef,\n  PropsWithChildren,\n  Ref,\n  ForwardRefExoticComponent,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport interface FloatingComponentProps {\n  /**\n   * Whether the floating component is open (used for determinig whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Position props for the floating component\n   */\n  top: number;\n  left: number;\n  width?: number;\n  height?: number;\n  position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLElement,\n  CombinedFloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const { open, top, left, position, ...rest } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n  return open ? (\n    <FloatingPortal>\n      <SaltProvider>\n        <div style={style} {...rest} ref={ref as Ref<HTMLDivElement>} />\n      </SaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: ForwardRefExoticComponent<CombinedFloatingComponentProps>;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame ?? false,\n    }),\n    [platformProp, middleware, animationFrame]\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const handleOpenChange = (open: boolean) => {\n    update();\n    onOpenChange?.(open);\n  };\n\n  const {\n    platform: contextPlaform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlaform,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}

package/dist-es/viewport/ViewportProvider.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState } from 'react';
-import '../utils/useFloatingUI.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';

package/dist-types/accordion/AccordionGroup.d.ts

@@ -1,3 +1,8 @@
-import { ComponentPropsWithoutRef } from "react";
-export declare type AccordionGroupProps = ComponentPropsWithoutRef<"div">;
-export declare const AccordionGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface AccordionGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The child Accordions to be rendered
+     */
+    children?: ReactNode;
+}
+export declare const AccordionGroup: import("react").ForwardRefExoticComponent<AccordionGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/accordion/AccordionHeader.d.ts

@@ -1,3 +1,8 @@
-import { ComponentPropsWithoutRef } from "react";
-export declare type AccordionHeaderProps = ComponentPropsWithoutRef<"button">;
-export declare const AccordionHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface AccordionHeaderProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * The content of the Accordion Header
+     */
+    children?: ReactNode;
+}
+export declare const AccordionHeader: import("react").ForwardRefExoticComponent<AccordionHeaderProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/accordion/AccordionPanel.d.ts

@@ -1,3 +1,8 @@
-import { ComponentPropsWithoutRef } from "react";
-export declare type AccordionPanelProps = ComponentPropsWithoutRef<"div">;
-export declare const AccordionPanel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface AccordionPanelProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the Accordion Panel
+     */
+    children?: ReactNode;
+}
+export declare const AccordionPanel: import("react").ForwardRefExoticComponent<AccordionPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/aria-announcer/AriaAnnouncerContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type AnnounceFn = (announcement: string, delay?: number) => void;
 export declare type AriaAnnouncer = {
     announce: AnnounceFn;

package/dist-types/banner/BannerActions.d.ts

@@ -1,2 +1,9 @@
-/// <reference types="react" />
-export declare const BannerActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+interface BannerActionsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of BannerActions
+     */
+    children: ReactNode;
+}
+export declare const BannerActions: import("react").ForwardRefExoticComponent<BannerActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/banner/BannerContent.d.ts

@@ -1,2 +1,9 @@
-/// <reference types="react" />
-export declare const BannerContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+interface BannerContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of BannerContent
+     */
+    children: ReactNode;
+}
+export declare const BannerContent: import("react").ForwardRefExoticComponent<BannerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/border-item/BorderItem.d.ts

@@ -2,7 +2,7 @@ import { ElementType, ReactElement } from "react";
 import { GridItemProps } from "../grid-item";
 import { PolymorphicComponentPropWithRef } from "../utils";
 export declare const BORDER_POSITION: readonly ["north", "west", "center", "east", "south"];
-export declare type BorderPosition = typeof BORDER_POSITION[number];
+export declare type BorderPosition = (typeof BORDER_POSITION)[number];
 export declare type BorderItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Aligns a grid item inside a cell along the inline (row) axis. Defaults to "stretch"

package/dist-types/button/Button.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
 export declare const ButtonVariantValues: readonly ["primary", "secondary", "cta"];
-export declare type ButtonVariant = typeof ButtonVariantValues[number];
+export declare type ButtonVariant = (typeof ButtonVariantValues)[number];
 export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
     /**
      * If `true`, the button will be disabled.

package/dist-types/checkbox/CheckboxIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxIconProps {
     checked?: boolean;

package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { a11yValueAriaProps } from "../../form-field-context";
 import { AdornmentValidationStatus } from "../../status-adornment";
 import { CheckboxGroupProps } from "../CheckboxGroup";

package/dist-types/flex-item/FlexItem.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, ReactElement, CSSProperties } from "react";
 import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
 export declare const FLEX_ITEM_ALIGNMENTS: readonly ["start", "end", "center", "stretch"];
-export declare type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];
+export declare type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];
 export declare type FlexItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Allows the alignment specified by parent to be overridden for individual items, default is "start".

package/dist-types/flex-layout/FlexLayout.d.ts

@@ -4,8 +4,8 @@ export declare type LayoutSeparator = "start" | "center" | "end";
 export declare type LayoutDirection = "row" | "column";
 export declare const FLEX_ALIGNMENT_BASE: readonly ["start", "end", "center"];
 export declare const FLEX_CONTENT_ALIGNMENT_BASE: readonly ["start", "end", "center", "space-between", "space-around", "space-evenly"];
-export declare type FlexAlignment = typeof FLEX_ALIGNMENT_BASE[number];
-export declare type FlexContentAlignment = typeof FLEX_CONTENT_ALIGNMENT_BASE[number];
+export declare type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];
+export declare type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];
 export declare type FlexLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is "stretch".

package/dist-types/form-field/FormFieldHelperText.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TextProps } from "../text";
 export declare const FormFieldHelperText: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) => JSX.Element;

package/dist-types/form-field/FormFieldLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextProps } from "../text";
 export interface FormFieldLabelProps extends Omit<TextProps<"label">, "variant" | "styleAs"> {
     /**

package/dist-types/form-field-context/FormFieldContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface A11yValueProps {
     /**
      * id for FormFieldHelperText

package/dist-types/grid-item/GridItem.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, ReactElement } from "react";
 import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
 export declare const GRID_ALIGNMENT_BASE: readonly ["start", "end", "center", "stretch"];
-declare type GridAlignment = typeof GRID_ALIGNMENT_BASE[number];
+declare type GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];
 declare type GridProperty = number | "auto";
 export declare type GridItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**