@frontify/fondue 12.0.0-beta.128 → 12.0.0-beta.129

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import DatepickerComponent, { ReactDatePicker } from 'react-datepicker';
 import { Validation } from '../../utilities/validation';
 type SingleDatePickerProps = {
     variant?: 'single';
@@ -25,10 +26,13 @@ export type DatePickerProps = {
     customTrigger?: React.ReactNode;
     children?: React.ReactNode;
     hasPopperArrow?: boolean;
+    preventOpenOnFocus?: boolean;
     filterDate?: (date: Date) => boolean;
     onOpen?: () => void;
     onClose?: () => void;
     onBlur?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 } & (SingleDatePickerProps | RangeDatePickerProps);
-export declare const DatePicker: FC<DatePickerProps>;
+export type ReactDatePickerRef = ReactDatePicker<never, boolean>;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatepickerComponent<never, boolean>>>;
 export {};

package/dist/components/DatePicker/DatePicker.es.js

@@ -1,117 +1,124 @@
 import { IconSize as r } from "../../foundation/Icon/IconSize.es.js";
-import { format as F, getYear as L } from "date-fns";
-import e, { useState as j } from "react";
-import v from "react-datepicker";
+import { format as v, getYear as A } from "date-fns";
+import e, { forwardRef as H, useState as T } from "react";
+import V from "react-datepicker";
 import "./DatePicker.css.es.js";
-import { DatePickerTrigger as A } from "./DatePickerTrigger.es.js";
-import { Validation as H } from "../../utilities/validation.es.js";
-import T from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
-import V from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
-import Y from "../../foundation/Icon/Generated/IconCaretRight.es.js";
-import q from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
+import { DatePickerTrigger as Y } from "./DatePickerTrigger.es.js";
+import { Validation as q } from "../../utilities/validation.es.js";
+import G from "../../foundation/Icon/Generated/IconCaretLeftDouble.es.js";
+import J from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
+import K from "../../foundation/Icon/Generated/IconCaretRight.es.js";
+import O from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
 import { Button as i } from "../Button/Button.es.js";
-import { ButtonStyle as n, ButtonSize as m, ButtonEmphasis as o } from "../Button/ButtonTypes.es.js";
-const G = (s, a) => s === "single" ? a < new Date() ? "past-date" : "future-date" : "range-day", J = ({
-  placeHolder: s = "Select a date",
-  isClearable: a,
-  shouldCloseOnSelect: f,
-  onChange: d,
-  onOpen: l,
-  onClose: c,
-  onBlur: w,
-  dateFormat: y = "dd MMM yyyy",
-  value: D,
-  startDate: k,
-  endDate: E,
-  minDate: g,
-  maxDate: z,
-  validation: C = H.Default,
-  customTrigger: M,
-  children: h = /* @__PURE__ */ e.createElement(e.Fragment, null),
-  hasPopperArrow: S = !0,
-  filterDate: I = () => !0,
-  variant: p = "single"
-}) => {
-  const [b, u] = j(!1), N = () => {
-    u(!0), l == null || l();
-  }, W = () => {
-    u(!1), c == null || c();
-  };
-  return /* @__PURE__ */ e.createElement("div", { "data-test-id": "date-picker" }, /* @__PURE__ */ e.createElement(
-    v,
-    {
-      calendarClassName: "tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap",
-      selected: D,
-      startDate: k,
-      endDate: E,
-      minDate: g,
-      maxDate: z,
-      calendarStartDay: 1,
-      onChange: d,
-      onBlur: w,
-      selectsRange: p === "range",
-      showPopperArrow: S,
-      filterDate: I,
-      customInput: M ?? /* @__PURE__ */ e.createElement(
-        A,
-        {
-          isCalendarOpen: b,
-          isClearable: a,
-          placeHolder: s,
-          validation: C,
-          onDateChanged: d
-        }
-      ),
-      formatWeekDay: (t) => t.slice(0, 1),
-      isClearable: a,
-      dateFormat: y,
-      onCalendarClose: W,
-      onCalendarOpen: N,
-      shouldCloseOnSelect: f,
-      dayClassName: (t) => G(p, t),
-      renderCustomHeader: ({ date: t, decreaseMonth: x, increaseMonth: B, increaseYear: P, decreaseYear: R }) => /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0" }, /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: R,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(T, { size: r.Size20 })
-        }
-      ), /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: x,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(V, { size: r.Size20 })
-        }
-      ), /* @__PURE__ */ e.createElement("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center" }, F(t, "MMMM"), " ", L(t)), /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: B,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(Y, { size: r.Size20 })
-        }
-      ), /* @__PURE__ */ e.createElement(
-        i,
-        {
-          style: n.Default,
-          size: m.Medium,
-          onClick: P,
-          emphasis: o.Weak,
-          icon: /* @__PURE__ */ e.createElement(q, { size: r.Size20 })
-        }
-      ))
-    },
-    h
-  ));
-};
-J.displayName = "FondueDatePicker";
+import { ButtonStyle as n, ButtonSize as o, ButtonEmphasis as s } from "../Button/ButtonTypes.es.js";
+const Q = (m, a) => m === "single" ? a < new Date() ? "past-date" : "future-date" : "range-day", U = H(
+  ({
+    placeHolder: m = "Select a date",
+    isClearable: a,
+    shouldCloseOnSelect: u,
+    onChange: d,
+    onOpen: l,
+    onClose: c,
+    onBlur: w,
+    onKeyDown: y,
+    dateFormat: D = "dd MMM yyyy",
+    value: k,
+    startDate: E,
+    endDate: g,
+    minDate: z,
+    maxDate: C,
+    validation: M = q.Default,
+    customTrigger: h,
+    children: S = /* @__PURE__ */ e.createElement(e.Fragment, null),
+    hasPopperArrow: I = !0,
+    preventOpenOnFocus: b = !1,
+    filterDate: N = () => !0,
+    variant: f = "single"
+  }, R) => {
+    const [W, p] = T(!1), x = () => {
+      p(!0), l == null || l();
+    }, B = () => {
+      p(!1), c == null || c();
+    };
+    return /* @__PURE__ */ e.createElement("div", { "data-test-id": "date-picker" }, /* @__PURE__ */ e.createElement(
+      V,
+      {
+        calendarClassName: "tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap",
+        selected: k,
+        startDate: E,
+        endDate: g,
+        minDate: z,
+        maxDate: C,
+        calendarStartDay: 1,
+        onChange: d,
+        onKeyDown: y,
+        onBlur: w,
+        selectsRange: f === "range",
+        showPopperArrow: I,
+        preventOpenOnFocus: b,
+        filterDate: N,
+        customInput: h ?? /* @__PURE__ */ e.createElement(
+          Y,
+          {
+            isCalendarOpen: W,
+            isClearable: a,
+            placeHolder: m,
+            validation: M,
+            onDateChanged: d
+          }
+        ),
+        ref: R,
+        formatWeekDay: (t) => t.slice(0, 1),
+        isClearable: a,
+        dateFormat: D,
+        onCalendarClose: B,
+        onCalendarOpen: x,
+        shouldCloseOnSelect: u,
+        dayClassName: (t) => Q(f, t),
+        renderCustomHeader: ({ date: t, decreaseMonth: P, increaseMonth: F, increaseYear: L, decreaseYear: j }) => /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-justify-between tw-pb-4 tw-px-0" }, /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: j,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(G, { size: r.Size20 })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: P,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(J, { size: r.Size20 })
+          }
+        ), /* @__PURE__ */ e.createElement("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center" }, v(t, "MMMM"), " ", A(t)), /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: F,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(K, { size: r.Size20 })
+          }
+        ), /* @__PURE__ */ e.createElement(
+          i,
+          {
+            style: n.Default,
+            size: o.Medium,
+            onClick: L,
+            emphasis: s.Weak,
+            icon: /* @__PURE__ */ e.createElement(O, { size: r.Size20 })
+          }
+        ))
+      },
+      S
+    ));
+  }
+);
+U.displayName = "FondueDatePicker";
 export {
-  J as DatePicker
+  U as DatePicker
 };
 //# sourceMappingURL=DatePicker.es.js.map

package/dist/components/DatePicker/DatePicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { FC, useState } from 'react';\nimport DatepickerComponent from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: React.ReactNode;\n    children?: React.ReactNode;\n    hasPopperArrow?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport const DatePicker: FC<DatePickerProps> = ({\n    placeHolder = 'Select a date',\n    isClearable,\n    shouldCloseOnSelect,\n    onChange,\n    onOpen,\n    onClose,\n    onBlur,\n    dateFormat = 'dd MMM yyyy',\n    value,\n    startDate,\n    endDate,\n    minDate,\n    maxDate,\n    validation = Validation.Default,\n    customTrigger,\n    children = <></>,\n    hasPopperArrow = true,\n    filterDate = () => true,\n    variant = 'single',\n}) => {\n    const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n    const handleOpen = () => {\n        setIsCalendarOpen(true);\n        onOpen?.();\n    };\n\n    const handleClose = () => {\n        setIsCalendarOpen(false);\n        onClose?.();\n    };\n\n    return (\n        <div data-test-id=\"date-picker\">\n            <DatepickerComponent\n                calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                selected={value}\n                startDate={startDate}\n                endDate={endDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                calendarStartDay={1}\n                onChange={onChange}\n                onBlur={onBlur}\n                selectsRange={variant === 'range' ? true : false}\n                showPopperArrow={hasPopperArrow}\n                filterDate={filterDate}\n                customInput={\n                    customTrigger ?? (\n                        <DatePickerTrigger\n                            isCalendarOpen={isCalendarOpen}\n                            isClearable={isClearable}\n                            placeHolder={placeHolder}\n                            validation={validation}\n                            onDateChanged={onChange}\n                        />\n                    )\n                }\n                formatWeekDay={(day) => day.slice(0, 1)}\n                isClearable={isClearable}\n                dateFormat={dateFormat}\n                onCalendarClose={handleClose}\n                onCalendarOpen={handleOpen}\n                shouldCloseOnSelect={shouldCloseOnSelect}\n                dayClassName={(date) => getDayClasses(variant, date)}\n                renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                    <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={decreaseYear}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                        />\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={decreaseMonth}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretLeft size={IconSize.Size20} />}\n                        />\n                        <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                            {format(date, 'MMMM')} {getYear(date)}\n                        </p>\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={increaseMonth}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretRight size={IconSize.Size20} />}\n                        />\n                        <Button\n                            style={ButtonStyle.Default}\n                            size={ButtonSize.Medium}\n                            onClick={increaseYear}\n                            emphasis={ButtonEmphasis.Weak}\n                            icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                        />\n                    </div>\n                )}\n            >\n                {children}\n            </DatepickerComponent>\n        </div>\n    );\n};\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["getDayClasses","variant","date","DatePicker","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","children","React","hasPopperArrow","filterDate","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleClose","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble"],"mappings":"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"}
+{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { forwardRef, useState } from 'react';\nimport DatepickerComponent, { ReactDatePicker } from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: React.ReactNode;\n    children?: React.ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport type ReactDatePickerRef = ReactDatePicker<never, boolean>;\n\nexport const DatePicker = forwardRef<ReactDatePicker<never, boolean>, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'dd MMM yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            children = <></>,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            filterDate = () => true,\n            variant = 'single',\n        },\n        ref,\n    ) => {\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id=\"date-picker\">\n                <DatepickerComponent\n                    calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range' ? true : false}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                            />\n                        )\n                    }\n                    ref={ref}\n                    formatWeekDay={(day) => day.slice(0, 1)}\n                    isClearable={isClearable}\n                    dateFormat={dateFormat}\n                    onCalendarClose={handleClose}\n                    onCalendarOpen={handleOpen}\n                    shouldCloseOnSelect={shouldCloseOnSelect}\n                    dayClassName={(date) => getDayClasses(variant, date)}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeft size={IconSize.Size20} />}\n                            />\n                            <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                                {format(date, 'MMMM')} {getYear(date)}\n                            </p>\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRight size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                            />\n                        </div>\n                    )}\n                >\n                    {children}\n                </DatepickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","children","React","hasPopperArrow","preventOpenOnFocus","filterDate","ref","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleClose","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble"],"mappings":"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"}

package/dist/components/Tooltip/Tooltip.es.js

@@ -1,7 +1,7 @@
 import { IconSize as $ } from "../../foundation/Icon/IconSize.es.js";
-import { useLink as me } from "@react-aria/link";
-import { FOCUS_VISIBLE_STYLE as ce } from "../../utilities/focusStyle.es.js";
-import { merge as d } from "../../utilities/merge.es.js";
+import { useLink as ce } from "@react-aria/link";
+import { FOCUS_VISIBLE_STYLE as me } from "../../utilities/focusStyle.es.js";
+import { merge as w } from "../../utilities/merge.es.js";
 import t, { useState as E, useRef as D, useMemo as pe, useCallback as g, useEffect as V, useLayoutEffect as ue, cloneElement as C } from "react";
 import { BrightHeader as be, brightHeaderArrowBackgroundColors as T } from "./BrightHeader.es.js";
 import { usePopper as Ee } from "react-popper";
@@ -29,34 +29,34 @@ const he = {
   ["Right-Middle"]: "right",
   ["Bottom-Middle"]: "bottom",
   ["Left-Middle"]: "left"
-}, ke = (e, r, n) => {
+}, ke = (e, o, l) => {
   switch (!0) {
     case e.toString().includes("Top".toLowerCase()):
       return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base";
     case e.toString().includes("Right".toLowerCase()):
-      return d([
+      return w([
         "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]",
-        r && n === "Start" && e.toString().includes("Start".toLowerCase()) ? T[r] : "before:tw-dark before:tw-bg-base"
+        o && l === "Start" && e.toString().includes("Start".toLowerCase()) ? T[o] : "before:tw-dark before:tw-bg-base"
       ]);
     case e.toString().includes("Bottom".toLowerCase()):
-      return d([
+      return w([
         "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
-        r ? T[r] : "before:tw-dark before:tw-bg-base"
+        o ? T[o] : "before:tw-dark before:tw-bg-base"
       ]);
     case e.toString().includes("Left".toLowerCase()):
-      return d([
+      return w([
         "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]",
-        r && n === "Start" && e.toString().includes("Start".toLowerCase()) ? T[r] : "before:tw-dark before:tw-bg-base"
+        o && l === "Start" && e.toString().includes("Start".toLowerCase()) ? T[o] : "before:tw-dark before:tw-bg-base"
       ]);
     default:
       return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base";
   }
 }, xe = ({
   content: e,
-  tooltipIcon: r,
-  heading: n,
+  tooltipIcon: o,
+  heading: l,
   headingIcon: S,
-  linkUrl: c,
+  linkUrl: m,
   linkLabel: Q,
   brightHeader: p,
   buttons: s,
@@ -75,17 +75,17 @@ const he = {
   var _;
   const [L, P] = E(
     null
-  ), N = D(null), a = A || Z, { linkProps: H } = me({ isDisabled: a }, N), U = pe(
-    () => c || p || s || n || S,
-    [c, p, s, n, S]
-  ), ee = he[`${y}-${B}`], [u, te] = E(null), [h, oe] = E(null), [re, se] = E(null), O = ge(), w = Ee(L, u, {
+  ), N = D(null), a = A || Z, { linkProps: H } = ce({ isDisabled: a }, N), U = pe(
+    () => m || p || s || l || S,
+    [m, p, s, l, S]
+  ), ee = he[`${y}-${B}`], [u, te] = E(null), [h, re] = E(null), [oe, se] = E(null), O = ge(), f = Ee(L, u, {
     placement: ee,
     strategy: "fixed",
     modifiers: [
       {
         name: "arrow",
         options: {
-          element: re
+          element: oe
         }
       },
       {
@@ -99,47 +99,47 @@ const he = {
         enabled: X
       }
     ]
-  }), ae = ((_ = w.state) == null ? void 0 : _.placement) ?? y, ne = ke(ae, p, B), [l, i] = E(!1), f = D(null), le = g(() => {
-    f.current && clearTimeout(f.current), f.current = setTimeout(() => i(!1), z);
+  }), ae = ((_ = f.state) == null ? void 0 : _.placement) ?? y, ne = ke(ae, p, B), [i, d] = E(!1), n = D(null), le = g(() => {
+    n.current && clearTimeout(n.current), n.current = setTimeout(() => d(!1), z);
   }, [z]), F = g(() => {
-    if (f.current && clearTimeout(f.current), x) {
-      f.current = setTimeout(() => i(!0), x);
+    if (n.current && clearTimeout(n.current), x) {
+      n.current = setTimeout(() => d(!0), x);
       return;
     }
-    i(!0);
+    d(!0);
   }, [x]), ie = g(
-    (o) => {
-      var m;
-      const b = o.path ?? ((m = o.composedPath) == null ? void 0 : m.call(o));
+    (r) => {
+      var c;
+      const b = r.path ?? ((c = r.composedPath) == null ? void 0 : c.call(r));
       b && [L, h, u].some((fe) => b.includes(fe)) && F();
     },
     [F, L, h, u]
   ), de = g(
-    (o) => {
-      const { relatedTarget: b } = o;
-      (!b || ![u, h].some((m) => m == null ? void 0 : m.contains(b))) && i(!1);
+    (r) => {
+      const { relatedTarget: b } = r;
+      (!b || ![u, h].some((c) => c == null ? void 0 : c.contains(b))) && d(!1);
     },
     [u, h]
   ), I = a ? {} : {
-    onMouseOver: (o) => ie(o.nativeEvent),
+    onMouseOver: (r) => ie(r.nativeEvent),
     onMouseLeave: le,
-    onFocus: () => i(!0),
+    onFocus: () => d(!0),
     onBlur: de
   };
   V(() => {
-    i(a ? !1 : M);
+    n.current && clearTimeout(n.current), d(a ? !1 : M);
   }, [M, a]);
   const k = g(
-    (o) => {
-      l && o.key === "Escape" && i(!1);
+    (r) => {
+      i && r.key === "Escape" && d(!1);
     },
-    [l]
+    [i]
   );
   return ue(() => {
-    typeof w.update == "function" && l && w.update();
-  }, [l]), V(() => (l ? window.addEventListener("keydown", k) : window.removeEventListener("keydown", k), () => {
+    typeof f.update == "function" && i && f.update();
+  }, [i]), V(() => (i ? window.addEventListener("keydown", k) : window.removeEventListener("keydown", k), () => {
     window.removeEventListener("keydown", k);
-  }), [k, l]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...I, ref: oe }, R && C(R, {
+  }), [k, i]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ...I, ref: re }, R && C(R, {
     ref: P,
     "aria-describedby": O,
     "aria-disabled": a
@@ -148,39 +148,39 @@ const he = {
     {
       ref: te,
       "aria-hidden": a,
-      className: d([
+      className: w([
         "tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]",
-        !l && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
+        !i && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
       ]),
       "data-test-id": "tooltip",
       role: "tooltip",
       id: O,
-      style: w.styles.popper,
-      ...w.attributes.popper,
+      style: f.styles.popper,
+      ...f.attributes.popper,
       ...I
     },
     p && /* @__PURE__ */ t.createElement(be, { headerStyle: p }),
     /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: d([
+        className: w([
           "tw-px-4 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]",
           U ? J.small : J.large,
-          c ? K.small : K.large
+          m ? K.small : K.large
         ])
       },
-      n && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, S && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, C(S, { size: $.Size20 })), n),
-      /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, r && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, C(r, { size: $.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
-      c && /* @__PURE__ */ t.createElement(
+      l && /* @__PURE__ */ t.createElement("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1" }, S && /* @__PURE__ */ t.createElement("span", { className: "tw-mr-1.5" }, C(S, { size: $.Size20 })), l),
+      /* @__PURE__ */ t.createElement("div", { className: "tw-flex" }, o && /* @__PURE__ */ t.createElement("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4" }, C(o, { size: $.Size16 })), /* @__PURE__ */ t.createElement("span", { className: "tw-text-s tw-min-w-0 tw-break-words" }, e)),
+      m && /* @__PURE__ */ t.createElement(
         "a",
         {
           ...H,
           "data-test-id": "tooltip-link",
           ref: N,
-          href: c,
+          href: m,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: d(["tw-text-xs tw-text-black-40 tw-underline tw-mt-1", ce])
+          className: w(["tw-text-xs tw-text-black-40 tw-underline tw-mt-1", me])
         },
         Q ?? "Click here to learn more."
       ),
@@ -212,8 +212,8 @@ const he = {
         "data-test-id": "popover-arrow",
         "data-popper-arrow": v,
         ref: se,
-        style: w.styles.arrow,
-        className: d([
+        style: f.styles.arrow,
+        className: w([
           v && "tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line",
           v && ne
         ])