@netlify/spark-ui 1.4.5 → 1.5.0-alpha.0

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -14,21 +14,26 @@ import {
   useSearchToggles,
   useSearchLogger,
 } from '../../hooks';
+import { useTimeout } from '@utils/useTimeout';
+
+import AskNetlify from '../../../../preact/AskNetlify/AskNetlify';
 
 import './SearchModal.css';
 
 interface Props {
   children: ComponentChildren;
   className?: string;
-  debug?: boolean
+  debug?: boolean;
 }
 
-function SearchModal(props: Props = {className: '', children: null, debug: false }) {
+function SearchModal(props: Props = { className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
+  const [modalState, setModalState] = useState({ current: 'search' });
+  const [askNetlifyQuery, setAskNetlifyQuery] = useState('');
 
   // Poll for the existence of window.pagefind.
   useEffect(() => {
-    let intervalId:number;
+    let intervalId: number;
 
     const checkForPagefind = () => {
       if (window.pagefind) {
@@ -45,19 +50,18 @@ function SearchModal(props: Props = {className: '', children: null, debug: false
     return () => clearInterval(intervalId);
   }, []);
 
-
   const { children, className, debug, ...rest } = props;
   const { state, actions } = useSearch();
-  const [searchOpen, setSearchOpen] = useState(false);
 
+  const [searchOpen, setSearchOpen] = useState(false);
   const openSearch = () => setSearchOpen(true);
   const closeSearch = () => setSearchOpen(false);
 
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchLogger(state, debug)
-  useSearchToggles(isPagefindLoaded,  openSearch);
+  useSearchLogger(state, debug);
+  useSearchToggles(isPagefindLoaded, openSearch);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
   useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
@@ -67,31 +71,64 @@ function SearchModal(props: Props = {className: '', children: null, debug: false
     searchOpen ? modalRef.current.showModal() : modalRef.current.close();
   }, [searchOpen]);
 
+  useEffect(() => {
+    const input = modalRef.current?.querySelector('input');
+
+    if (input) input.focus();
+
+    if (modalState.current === 'ask') {
+      setTimeout(() => {
+        modalRef.current.classList.add('n-search-modal-ask');
+      }, 150);
+    } else if (modalState.current === 'search') {
+      setTimeout(() => {
+        modalRef.current.classList.remove('n-search-modal-ask');
+      }, 150);
+    }
+  }, [modalState.current]);
+
   return (
-    <Modal ref={modalRef} className={`n-search-modal ${className ? className : ''}`} {...rest}>
+    <Modal
+      ref={modalRef}
+      className={`n-search-modal ${className ? className : ''}`}
+      data-state={modalState.current}
+      {...rest}
+    >
       <div ref={containerRef} className="n-search-container">
-          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
-
-        <SearchWindow
-          searchLoading={state.isLoading}
-          searchTerm={state.searchTerm}
-          results={state.results}
-        >
-          {children}
-        </SearchWindow>
-
-        <div className="n-search-footer">
-          <p className="n-search-footer-tip">
-            <KeyboardKey keyNames={['Esc']} />
-            to close
-          </p>
-          <p className="n-search-footer-tip">
-            <KeyboardKey keyNames={['Tab']} />
-            <span>or</span>
-            <KeyboardKey keyNames={['↑', '↓']} />
-            to navigate
-          </p>
-        </div>
+        {modalState.current === 'ask' && (
+          <AskNetlify query={askNetlifyQuery} setModalState={setModalState} />
+        )}
+        {modalState.current === 'search' && (
+          <>
+            <SearchInput
+              setSearchTerm={actions.setSearchTerm}
+              setAskNetlifyQuery={setAskNetlifyQuery}
+              initialValue={state.searchTerm}
+            />
+
+            <SearchWindow
+              setModalState={setModalState}
+              searchLoading={state.isLoading}
+              searchTerm={state.searchTerm}
+              results={state.results}
+            >
+              {children}
+            </SearchWindow>
+
+            <div className="n-search-footer">
+              <p className="n-search-footer-tip">
+                <KeyboardKey keyNames={['Esc']} />
+                to closed
+              </p>
+              <p className="n-search-footer-tip">
+                <KeyboardKey keyNames={['Tab']} />
+                <span>or</span>
+                <KeyboardKey keyNames={['↑', '↓']} />
+                to navigate
+              </p>
+            </div>
+          </>
+        )}
       </div>
     </Modal>
   );

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -4,6 +4,10 @@ import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
+import { handleThemeChange } from '@utils/handleThemeChange';
+
+import Icon from '../../../preact/Icon';
+
 /* --- Search Results Window (for active searches) --- */
 const SearchResults: FunctionComponent<SearchResultsProps> = ({
   searchLoading,
@@ -20,9 +24,9 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
   if (!results || results.length === 0) {
     return (
-        <SearchHeading>
-          0 results for <span className="n-search-term">{searchTerm}</span>
-        </SearchHeading>
+      <SearchHeading>
+        0 results for <span className="n-search-term">{searchTerm}</span>
+      </SearchHeading>
     );
   }
 
@@ -43,29 +47,40 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
 /* --- Main Search Results Component --- */
 export default function SearchWindow({
+  setModalState,
   searchLoading,
   searchTerm,
   results,
   children: DefaultWindow,
 }: SearchWindowProps) {
-  const askNetlify: SearchLinkProps = {
-    icon: 'sparkles',
-    label: 'Ask Netlify AI',
-    url: 'https://docs.netlify.com/ask-netlify/',
-  };
-
   return (
     <div className="n-search-window">
       <div className="search-links">
-        <SearchLink {...askNetlify} />
         {searchTerm && searchTerm.length > 1 ? (
-          <SearchResults
-            searchLoading={searchLoading}
-            searchTerm={searchTerm}
-            results={results}
-          />
+          <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
         ) : DefaultWindow ? (
-          DefaultWindow
+          <>
+            <SearchLink
+              as="button"
+              icon="netlify"
+              label="Ask Netlify AI"
+              onClick={() => {
+                setModalState({ current: 'ask' });
+              }}
+            />
+
+            {DefaultWindow}
+
+            <SearchLink
+              as="button"
+              icon="netlify"
+              label="Toggle theme"
+              onClick={() => {
+                const theme = document.documentElement.getAttribute('data-theme');
+                handleThemeChange(theme === 'dark' ? 'light' : 'dark');
+              }}
+            />
+          </>
         ) : null}
       </div>
     </div>

package/packages/components/preact/SearchModal/hooks/useKeyboardNav.ts

@@ -21,7 +21,7 @@ export function useKeyboardNav(
   onClose: () => void
 ) {
   useEffect(() => {
-    if (!isPagefindLoaded) return 
+    if (!isPagefindLoaded) return;
     const handleKeydown = (e: KeyboardEvent) => {
       if (!isOpen) return;
 
@@ -35,7 +35,7 @@ export function useKeyboardNav(
         const container = containerRef.current;
         if (!container) return;
 
-        const links = Array.from(container.querySelectorAll('a'));
+        const links = Array.from(container.querySelectorAll('.n-search-link'));
         const currentIndex = links.findIndex(link => link === document.activeElement);
         const nextIndex =
           e.key === 'ArrowDown'

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -2,14 +2,17 @@ import type { ComponentChildren } from 'preact';
 import type { IconName } from '../../Icon';
 
 export interface SearchLinkProps {
+  as?: any;
   icon: IconName;
   label: string;
   resource?: 'blog' | 'changelog' | 'docs' | 'guide';
-  url: string;
+  url?: string;
   excerpt?: string;
+  onClick?: () => void;
 }
 
 export interface SearchWindowProps {
+  setModalState: (e: { current: string }) => void;
   searchLoading: boolean;
   searchTerm?: string;
   results?: SearchLinkProps[];
@@ -33,4 +36,4 @@ export interface SearchGTMObjectProps {
   resultUrl?: string;
   query?: string;
   debug_mode?: boolean;
-}
+}

package/packages/components/preact/index.ts

@@ -4,6 +4,7 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
+export { default as AskNetlify } from "./AskNetlify/AskNetlify"
 export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';

package/packages/styles/tokens.css

@@ -4,6 +4,9 @@
 
 :root {
   --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
+  --badge-bg-color: var(--neutral-100);
+  --badge-border-color: var(--neutral-300);
+  --badge-text-color: var(--neutral-500);
   --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
   --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
   --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -153,8 +156,12 @@
   --red-700: color(srgb 0.6862745098039216 0.1450980392156863 0.21176470588235294);
   --red-800: color(srgb 0.5019607843137255 0.0392156862745098 0.12549019607843137);
   --red-900: color(srgb 0.23921568627450981 0.10980392156862745 0.10588235294117647);
+  --search-answer-message-color: var(--neutral-200);
+  --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
+  --search-loading-color: var(--blue-700);
+  --search-user-message-color: var(--blue-100);
   --shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / 0.07), 0 6px 30px 0 color(srgb 0 0 0 / 0.06), 0 8px 10px 0 color(srgb 0 0 0 / 0.1);
   --shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / 0.1);
   --shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / 0.25);
@@ -186,6 +193,9 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+    --badge-bg-color: var(--neutral-700);
+    --badge-border-color: var(--neutral-600);
+    --badge-text-color: var(--neutral-100);
     --button-outline-bg-color: color(srgb 0 0 0 / 0);
     --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
     --button-outline-stroke-color: var(--teal-200);
@@ -242,8 +252,12 @@
     --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
     --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
     --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+    --search-answer-message-color: var(--neutral-600);
+    --search-back-btn-bg-color: var(--neutral-500);
     --search-bg-color: var(--neutral-700);
     --search-highlight-color: var(--teal-800);
+    --search-loading-color: var(--teal-200);
+    --search-user-message-color: var(--teal-800);
     --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
     --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
   }
@@ -251,6 +265,9 @@
 
 [data-theme="dark"] {
   --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
+  --badge-bg-color: var(--neutral-700);
+  --badge-border-color: var(--neutral-600);
+  --badge-text-color: var(--neutral-100);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
   --button-outline-stroke-color: var(--teal-200);
@@ -307,14 +324,21 @@
   --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
   --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
   --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
+  --search-answer-message-color: var(--neutral-600);
+  --search-back-btn-bg-color: var(--neutral-500);
   --search-bg-color: var(--neutral-700);
   --search-highlight-color: var(--teal-800);
+  --search-loading-color: var(--teal-200);
+  --search-user-message-color: var(--teal-800);
   --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
   --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
 }
 
 [data-theme="light"] {
   --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
+  --badge-bg-color: var(--neutral-100);
+  --badge-border-color: var(--neutral-300);
+  --badge-text-color: var(--neutral-500);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
   --button-outline-stroke-color: var(--neutral-800);
@@ -371,8 +395,12 @@
   --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
   --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
   --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
+  --search-answer-message-color: var(--neutral-200);
+  --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
+  --search-loading-color: var(--blue-700);
+  --search-user-message-color: var(--blue-100);
   --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }

package/packages/utils/handleThemeChange.ts

@@ -0,0 +1,11 @@
+export const handleThemeChange = (value: 'dark' | 'light' | '') => {
+  const element = document.documentElement;
+
+  if (value === '') {
+    element.removeAttribute('data-theme');
+    localStorage.removeItem('theme');
+  } else {
+    element.setAttribute('data-theme', value);
+    localStorage.setItem('theme', value);
+  }
+};

package/dist/chunks/compat.module.DJD78v1z.js

@@ -1,175 +0,0 @@
-import { Component as f, options as a, createElement as d, Fragment as h, toChildArray as v } from "preact";
-import "./hooks.module.D9IrxdEh.js";
-function C(e, t) {
-  for (var r in t) e[r] = t[r];
-  return e;
-}
-function m(e, t) {
-  for (var r in e) if (r !== "__source" && !(r in t)) return !0;
-  for (var o in t) if (o !== "__source" && e[o] !== t[o]) return !0;
-  return !1;
-}
-function y(e, t) {
-  this.props = e, this.context = t;
-}
-(y.prototype = new f()).isPureReactComponent = !0, y.prototype.shouldComponentUpdate = function(e, t) {
-  return m(this.props, e) || m(this.state, t);
-};
-var b = a.__b;
-a.__b = function(e) {
-  e.type && e.type.__f && e.ref && (e.props.ref = e.ref, e.ref = null), b && b(e);
-};
-var x = typeof Symbol < "u" && Symbol.for && Symbol.for("react.forward_ref") || 3911;
-function z(e) {
-  function t(r) {
-    var o = C({}, r);
-    return delete o.ref, e(o, r.ref || null);
-  }
-  return t.$$typeof = x, t.render = t, t.prototype.isReactComponent = t.__f = !0, t.displayName = "ForwardRef(" + (e.displayName || e.name) + ")", t;
-}
-var U = a.__e;
-a.__e = function(e, t, r, o) {
-  if (e.then) {
-    for (var n, l = t; l = l.__; ) if ((n = l.__c) && n.__c) return t.__e == null && (t.__e = r.__e, t.__k = r.__k), n.__c(e, t);
-  }
-  U(e, t, r, o);
-};
-var g = a.unmount;
-function N(e, t, r) {
-  return e && (e.__c && e.__c.__H && (e.__c.__H.__.forEach(function(o) {
-    typeof o.__c == "function" && o.__c();
-  }), e.__c.__H = null), (e = C({}, e)).__c != null && (e.__c.__P === r && (e.__c.__P = t), e.__c.__e = !0, e.__c = null), e.__k = e.__k && e.__k.map(function(o) {
-    return N(o, t, r);
-  })), e;
-}
-function E(e, t, r) {
-  return e && r && (e.__v = null, e.__k = e.__k && e.__k.map(function(o) {
-    return E(o, t, r);
-  }), e.__c && e.__c.__P === t && (e.__e && r.appendChild(e.__e), e.__c.__e = !0, e.__c.__P = r)), e;
-}
-function p() {
-  this.__u = 0, this.o = null, this.__b = null;
-}
-function R(e) {
-  var t = e.__.__c;
-  return t && t.__a && t.__a(e);
-}
-function s() {
-  this.i = null, this.l = null;
-}
-a.unmount = function(e) {
-  var t = e.__c;
-  t && t.__R && t.__R(), t && 32 & e.__u && (e.type = null), g && g(e);
-}, (p.prototype = new f()).__c = function(e, t) {
-  var r = t.__c, o = this;
-  o.o == null && (o.o = []), o.o.push(r);
-  var n = R(o.__v), l = !1, _ = function() {
-    l || (l = !0, r.__R = null, n ? n(i) : i());
-  };
-  r.__R = _;
-  var i = function() {
-    if (!--o.__u) {
-      if (o.state.__a) {
-        var u = o.state.__a;
-        o.__v.__k[0] = E(u, u.__c.__P, u.__c.__O);
-      }
-      var c;
-      for (o.setState({ __a: o.__b = null }); c = o.o.pop(); ) c.forceUpdate();
-    }
-  };
-  o.__u++ || 32 & t.__u || o.setState({ __a: o.__b = o.__v.__k[0] }), e.then(_, _);
-}, p.prototype.componentWillUnmount = function() {
-  this.o = [];
-}, p.prototype.render = function(e, t) {
-  if (this.__b) {
-    if (this.__v.__k) {
-      var r = document.createElement("div"), o = this.__v.__k[0].__c;
-      this.__v.__k[0] = N(this.__b, r, o.__O = o.__P);
-    }
-    this.__b = null;
-  }
-  var n = t.__a && d(h, null, e.fallback);
-  return n && (n.__u &= -33), [d(h, null, t.__a ? null : e.children), n];
-};
-var k = function(e, t, r) {
-  if (++r[1] === r[0] && e.l.delete(t), e.props.revealOrder && (e.props.revealOrder[0] !== "t" || !e.l.size)) for (r = e.i; r; ) {
-    for (; r.length > 3; ) r.pop()();
-    if (r[1] < r[0]) break;
-    e.i = r = r[2];
-  }
-};
-(s.prototype = new f()).__a = function(e) {
-  var t = this, r = R(t.__v), o = t.l.get(e);
-  return o[0]++, function(n) {
-    var l = function() {
-      t.props.revealOrder ? (o.push(n), k(t, e, o)) : n();
-    };
-    r ? r(l) : l();
-  };
-}, s.prototype.render = function(e) {
-  this.i = null, this.l = /* @__PURE__ */ new Map();
-  var t = v(e.children);
-  e.revealOrder && e.revealOrder[0] === "b" && t.reverse();
-  for (var r = t.length; r--; ) this.l.set(t[r], this.i = [1, 0, this.i]);
-  return e.children;
-}, s.prototype.componentDidUpdate = s.prototype.componentDidMount = function() {
-  var e = this;
-  this.l.forEach(function(t, r) {
-    k(e, r, t);
-  });
-};
-var A = typeof Symbol < "u" && Symbol.for && Symbol.for("react.element") || 60103, V = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/, W = /^on(Ani|Tra|Tou|BeforeInp|Compo)/, H = /[A-Z0-9]/g, $ = typeof document < "u", j = function(e) {
-  return (typeof Symbol < "u" && typeof Symbol() == "symbol" ? /fil|che|rad/ : /fil|che|ra/).test(e);
-};
-f.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function(e) {
-  Object.defineProperty(f.prototype, e, { configurable: !0, get: function() {
-    return this["UNSAFE_" + e];
-  }, set: function(t) {
-    Object.defineProperty(this, e, { configurable: !0, writable: !0, value: t });
-  } });
-});
-var P = a.event;
-function D() {
-}
-function F() {
-  return this.cancelBubble;
-}
-function B() {
-  return this.defaultPrevented;
-}
-a.event = function(e) {
-  return P && (e = P(e)), e.persist = D, e.isPropagationStopped = F, e.isDefaultPrevented = B, e.nativeEvent = e;
-};
-var L = { enumerable: !1, configurable: !0, get: function() {
-  return this.class;
-} }, O = a.vnode;
-a.vnode = function(e) {
-  typeof e.type == "string" && function(t) {
-    var r = t.props, o = t.type, n = {}, l = o.indexOf("-") === -1;
-    for (var _ in r) {
-      var i = r[_];
-      if (!(_ === "value" && "defaultValue" in r && i == null || $ && _ === "children" && o === "noscript" || _ === "class" || _ === "className")) {
-        var u = _.toLowerCase();
-        _ === "defaultValue" && "value" in r && r.value == null ? _ = "value" : _ === "download" && i === !0 ? i = "" : u === "translate" && i === "no" ? i = !1 : u[0] === "o" && u[1] === "n" ? u === "ondoubleclick" ? _ = "ondblclick" : u !== "onchange" || o !== "input" && o !== "textarea" || j(r.type) ? u === "onfocus" ? _ = "onfocusin" : u === "onblur" ? _ = "onfocusout" : W.test(_) && (_ = u) : u = _ = "oninput" : l && V.test(_) ? _ = _.replace(H, "-$&").toLowerCase() : i === null && (i = void 0), u === "oninput" && n[_ = u] && (_ = "oninputCapture"), n[_] = i;
-      }
-    }
-    o == "select" && n.multiple && Array.isArray(n.value) && (n.value = v(r.children).forEach(function(c) {
-      c.props.selected = n.value.indexOf(c.props.value) != -1;
-    })), o == "select" && n.defaultValue != null && (n.value = v(r.children).forEach(function(c) {
-      c.props.selected = n.multiple ? n.defaultValue.indexOf(c.props.value) != -1 : n.defaultValue == c.props.value;
-    })), r.class && !r.className ? (n.class = r.class, Object.defineProperty(n, "className", L)) : (r.className && !r.class || r.class && r.className) && (n.class = n.className = r.className), t.props = n;
-  }(e), e.$$typeof = A, O && O(e);
-};
-var S = a.__r;
-a.__r = function(e) {
-  S && S(e), e.__c;
-};
-var w = a.diffed;
-a.diffed = function(e) {
-  w && w(e);
-  var t = e.props, r = e.__e;
-  r != null && e.type === "textarea" && "value" in t && t.value !== r.value && (r.value = t.value == null ? "" : t.value);
-};
-export {
-  z as D
-};