@phillips/seldon 1.47.0 → 1.48.0

package/dist/node_modules/react-transition-group/esm/Transition.js

@@ -0,0 +1,336 @@
+import C from "../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";
+import D from "../../@babel/runtime/helpers/esm/inheritsLoose.js";
+import o from "../../prop-types/index.js";
+import v from "react";
+import b from "react-dom";
+import T from "./config.js";
+import { timeoutsShape as R } from "./utils/PropTypes.js";
+import O from "./TransitionGroupContext.js";
+import { forceReflow as k } from "./utils/reflow.js";
+var x = "unmounted", f = "exited", l = "entering", h = "entered", N = "exiting", p = /* @__PURE__ */ function(d) {
+  D(u, d);
+  function u(i, e) {
+    var t;
+    t = d.call(this, i, e) || this;
+    var n = e, r = n && !n.isMounting ? i.enter : i.appear, s;
+    return t.appearStatus = null, i.in ? r ? (s = f, t.appearStatus = l) : s = h : i.unmountOnExit || i.mountOnEnter ? s = x : s = f, t.state = {
+      status: s
+    }, t.nextCallback = null, t;
+  }
+  u.getDerivedStateFromProps = function(e, t) {
+    var n = e.in;
+    return n && t.status === x ? {
+      status: f
+    } : null;
+  };
+  var a = u.prototype;
+  return a.componentDidMount = function() {
+    this.updateStatus(!0, this.appearStatus);
+  }, a.componentDidUpdate = function(e) {
+    var t = null;
+    if (e !== this.props) {
+      var n = this.state.status;
+      this.props.in ? n !== l && n !== h && (t = l) : (n === l || n === h) && (t = N);
+    }
+    this.updateStatus(!1, t);
+  }, a.componentWillUnmount = function() {
+    this.cancelNextCallback();
+  }, a.getTimeouts = function() {
+    var e = this.props.timeout, t, n, r;
+    return t = n = r = e, e != null && typeof e != "number" && (t = e.exit, n = e.enter, r = e.appear !== void 0 ? e.appear : n), {
+      exit: t,
+      enter: n,
+      appear: r
+    };
+  }, a.updateStatus = function(e, t) {
+    if (e === void 0 && (e = !1), t !== null)
+      if (this.cancelNextCallback(), t === l) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var n = this.props.nodeRef ? this.props.nodeRef.current : b.findDOMNode(this);
+          n && k(n);
+        }
+        this.performEnter(e);
+      } else
+        this.performExit();
+    else this.props.unmountOnExit && this.state.status === f && this.setState({
+      status: x
+    });
+  }, a.performEnter = function(e) {
+    var t = this, n = this.props.enter, r = this.context ? this.context.isMounting : e, s = this.props.nodeRef ? [r] : [b.findDOMNode(this), r], c = s[0], m = s[1], S = this.getTimeouts(), g = r ? S.appear : S.enter;
+    if (!e && !n || T.disabled) {
+      this.safeSetState({
+        status: h
+      }, function() {
+        t.props.onEntered(c);
+      });
+      return;
+    }
+    this.props.onEnter(c, m), this.safeSetState({
+      status: l
+    }, function() {
+      t.props.onEntering(c, m), t.onTransitionEnd(g, function() {
+        t.safeSetState({
+          status: h
+        }, function() {
+          t.props.onEntered(c, m);
+        });
+      });
+    });
+  }, a.performExit = function() {
+    var e = this, t = this.props.exit, n = this.getTimeouts(), r = this.props.nodeRef ? void 0 : b.findDOMNode(this);
+    if (!t || T.disabled) {
+      this.safeSetState({
+        status: f
+      }, function() {
+        e.props.onExited(r);
+      });
+      return;
+    }
+    this.props.onExit(r), this.safeSetState({
+      status: N
+    }, function() {
+      e.props.onExiting(r), e.onTransitionEnd(n.exit, function() {
+        e.safeSetState({
+          status: f
+        }, function() {
+          e.props.onExited(r);
+        });
+      });
+    });
+  }, a.cancelNextCallback = function() {
+    this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
+  }, a.safeSetState = function(e, t) {
+    t = this.setNextCallback(t), this.setState(e, t);
+  }, a.setNextCallback = function(e) {
+    var t = this, n = !0;
+    return this.nextCallback = function(r) {
+      n && (n = !1, t.nextCallback = null, e(r));
+    }, this.nextCallback.cancel = function() {
+      n = !1;
+    }, this.nextCallback;
+  }, a.onTransitionEnd = function(e, t) {
+    this.setNextCallback(t);
+    var n = this.props.nodeRef ? this.props.nodeRef.current : b.findDOMNode(this), r = e == null && !this.props.addEndListener;
+    if (!n || r) {
+      setTimeout(this.nextCallback, 0);
+      return;
+    }
+    if (this.props.addEndListener) {
+      var s = this.props.nodeRef ? [this.nextCallback] : [n, this.nextCallback], c = s[0], m = s[1];
+      this.props.addEndListener(c, m);
+    }
+    e != null && setTimeout(this.nextCallback, e);
+  }, a.render = function() {
+    var e = this.state.status;
+    if (e === x)
+      return null;
+    var t = this.props, n = t.children;
+    t.in, t.mountOnEnter, t.unmountOnExit, t.appear, t.enter, t.exit, t.timeout, t.addEndListener, t.onEnter, t.onEntering, t.onEntered, t.onExit, t.onExiting, t.onExited, t.nodeRef;
+    var r = C(t, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+    return (
+      // allows for nested Transitions
+      /* @__PURE__ */ v.createElement(O.Provider, {
+        value: null
+      }, typeof n == "function" ? n(e, r) : v.cloneElement(v.Children.only(n), r))
+    );
+  }, u;
+}(v.Component);
+p.contextType = O;
+p.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * A React reference to DOM element that need to transition:
+   * https://stackoverflow.com/a/51127130/4671932
+   *
+   *   - When `nodeRef` prop is used, `node` is not passed to callback functions
+   *      (e.g. `onEnter`) because user already has direct access to the node.
+   *   - When changing `key` prop of `Transition` in a `TransitionGroup` a new
+   *     `nodeRef` need to be provided to `Transition` with changed `key` prop
+   *     (see
+   *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
+   */
+  nodeRef: o.shape({
+    current: typeof Element == "undefined" ? o.any : function(d, u, a, i, e, t) {
+      var n = d[u];
+      return o.instanceOf(n && "ownerDocument" in n ? n.ownerDocument.defaultView.Element : Element)(d, u, a, i, e, t);
+    }
+  }),
+  /**
+   * A `function` child can be used instead of a React element. This function is
+   * called with the current transition status (`'entering'`, `'entered'`,
+   * `'exiting'`, `'exited'`), which can be used to apply context
+   * specific props to a component.
+   *
+   * ```jsx
+   * <Transition in={this.state.in} timeout={150}>
+   *   {state => (
+   *     <MyComponent className={`fade fade-${state}`} />
+   *   )}
+   * </Transition>
+   * ```
+   */
+  children: o.oneOfType([o.func.isRequired, o.element.isRequired]).isRequired,
+  /**
+   * Show the component; triggers the enter or exit states
+   */
+  in: o.bool,
+  /**
+   * By default the child component is mounted immediately along with
+   * the parent `Transition` component. If you want to "lazy mount" the component on the
+   * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
+   * mounted, even on "exited", unless you also specify `unmountOnExit`.
+   */
+  mountOnEnter: o.bool,
+  /**
+   * By default the child component stays mounted after it reaches the `'exited'` state.
+   * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
+   */
+  unmountOnExit: o.bool,
+  /**
+   * By default the child component does not perform the enter transition when
+   * it first mounts, regardless of the value of `in`. If you want this
+   * behavior, set both `appear` and `in` to `true`.
+   *
+   * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
+   * > only adds an additional enter transition. However, in the
+   * > `<CSSTransition>` component that first enter transition does result in
+   * > additional `.appear-*` classes, that way you can choose to style it
+   * > differently.
+   */
+  appear: o.bool,
+  /**
+   * Enable or disable enter transitions.
+   */
+  enter: o.bool,
+  /**
+   * Enable or disable exit transitions.
+   */
+  exit: o.bool,
+  /**
+   * The duration of the transition, in milliseconds.
+   * Required unless `addEndListener` is provided.
+   *
+   * You may specify a single timeout for all transitions:
+   *
+   * ```jsx
+   * timeout={500}
+   * ```
+   *
+   * or individually:
+   *
+   * ```jsx
+   * timeout={{
+   *  appear: 500,
+   *  enter: 300,
+   *  exit: 500,
+   * }}
+   * ```
+   *
+   * - `appear` defaults to the value of `enter`
+   * - `enter` defaults to `0`
+   * - `exit` defaults to `0`
+   *
+   * @type {number | { enter?: number, exit?: number, appear?: number }}
+   */
+  timeout: function(u) {
+    var a = R;
+    u.addEndListener || (a = a.isRequired);
+    for (var i = arguments.length, e = new Array(i > 1 ? i - 1 : 0), t = 1; t < i; t++)
+      e[t - 1] = arguments[t];
+    return a.apply(void 0, [u].concat(e));
+  },
+  /**
+   * Add a custom transition end trigger. Called with the transitioning
+   * DOM node and a `done` callback. Allows for more fine grained transition end
+   * logic. Timeouts are still used as a fallback if provided.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * ```jsx
+   * addEndListener={(node, done) => {
+   *   // use the css transitionend event to mark the finish of a transition
+   *   node.addEventListener('transitionend', done, false);
+   * }}
+   * ```
+   */
+  addEndListener: o.func,
+  /**
+   * Callback fired before the "entering" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool) -> void
+   */
+  onEnter: o.func,
+  /**
+   * Callback fired after the "entering" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool)
+   */
+  onEntering: o.func,
+  /**
+   * Callback fired after the "entered" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool) -> void
+   */
+  onEntered: o.func,
+  /**
+   * Callback fired before the "exiting" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExit: o.func,
+  /**
+   * Callback fired after the "exiting" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExiting: o.func,
+  /**
+   * Callback fired after the "exited" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExited: o.func
+} : {};
+function E() {
+}
+p.defaultProps = {
+  in: !1,
+  mountOnEnter: !1,
+  unmountOnExit: !1,
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  onEnter: E,
+  onEntering: E,
+  onEntered: E,
+  onExit: E,
+  onExiting: E,
+  onExited: E
+};
+p.UNMOUNTED = x;
+p.EXITED = f;
+p.ENTERING = l;
+p.ENTERED = h;
+p.EXITING = N;
+export {
+  h as ENTERED,
+  l as ENTERING,
+  f as EXITED,
+  N as EXITING,
+  x as UNMOUNTED,
+  p as default
+};

package/dist/node_modules/react-transition-group/esm/TransitionGroupContext.js

@@ -0,0 +1,5 @@
+import t from "react";
+const o = t.createContext(null);
+export {
+  o as default
+};

package/dist/node_modules/react-transition-group/esm/config.js

@@ -0,0 +1,6 @@
+const a = {
+  disabled: !1
+};
+export {
+  a as default
+};

package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js

@@ -0,0 +1,21 @@
+import e from "../../../prop-types/index.js";
+var n = process.env.NODE_ENV !== "production" ? e.oneOfType([e.number, e.shape({
+  enter: e.number,
+  exit: e.number,
+  appear: e.number
+}).isRequired]) : null, t = process.env.NODE_ENV !== "production" ? e.oneOfType([e.string, e.shape({
+  enter: e.string,
+  exit: e.string,
+  active: e.string
+}), e.shape({
+  enter: e.string,
+  enterDone: e.string,
+  enterActive: e.string,
+  exit: e.string,
+  exitDone: e.string,
+  exitActive: e.string
+})]) : null;
+export {
+  t as classNamesShape,
+  n as timeoutsShape
+};

package/dist/node_modules/react-transition-group/esm/utils/reflow.js

@@ -0,0 +1,6 @@
+var e = function(o) {
+  return o.scrollTop;
+};
+export {
+  e as forceReflow
+};

package/dist/node_modules/usehooks-ts/dist/index.js

@@ -0,0 +1,37 @@
+import { useRef as d, useEffect as c, useLayoutEffect as f } from "react";
+import "../../lodash.debounce/index.js";
+var a = typeof window != "undefined" ? f : c;
+function E(t, r, u, i) {
+  const s = d(r);
+  a(() => {
+    s.current = r;
+  }, [r]), c(() => {
+    const e = window;
+    if (!(e && e.addEventListener))
+      return;
+    const o = (n) => {
+      s.current(n);
+    };
+    return e.addEventListener(t, o, i), () => {
+      e.removeEventListener(t, o, i);
+    };
+  }, [t, u, i]);
+}
+function L(t, r, u = "mousedown", i = {}) {
+  E(
+    u,
+    (s) => {
+      const e = s.target;
+      if (!e || !e.isConnected)
+        return;
+      (Array.isArray(t) ? t.filter((n) => !!n.current).every((n) => n.current && !n.current.contains(e)) : t.current && !t.current.contains(e)) && r(s);
+    },
+    void 0,
+    i
+  );
+}
+export {
+  E as useEventListener,
+  a as useIsomorphicLayoutEffect,
+  L as useOnClickOutside
+};

package/dist/scss/_vars.scss

@@ -352,6 +352,9 @@ $max-site-width: 1560px;
 /// height Tokens
 ///////////////////////
 $header-height: 42px;
+$nav-height: 3.5rem;
+$top-row-height: 3.75rem;
+$desktop-header-height: calc($nav-height + $top-row-height + 1px);
 $user-management-height: 30px;
 $header-submenu-top: calc($header-height + $user-management-height + 1px);
 $desktop-max-width: var(--desktop-max-width);

package/dist/scss/componentStyles.scss

@@ -20,6 +20,7 @@
 @use 'components/Row/row';
 @use 'components/GridItem/gridItem';
 @use 'components/Search/search';
+@use 'components/Search/searchButton';
 @use 'components/Search/SearchResults/searchResults';
 @use 'components/Social/social';
 @use 'components/SplitPanel/splitPanel';

package/dist/scss/components/Header/_header.scss

@@ -5,10 +5,25 @@
   background-color: $white;
   border-bottom: 1px solid rgba(0, 0, 0, 10%);
   display: flex;
-  padding: $user-management-height $spacing-md 0; // save space for the user management
+  flex-direction: column;
   position: sticky;
   top: 0;
 
+  &__top-row {
+    align-items: center;
+    background-color: $pure-white;
+    display: flex;
+    height: $top-row-height;
+    justify-content: center;
+    padding-top: 1rem;
+    width: 100%;
+    z-index: 10;
+
+    @include isHeaderMobile {
+      height: $nav-height;
+    }
+  }
+
   @include isHeaderMobile {
     padding: 0;
     top: 0;
@@ -21,7 +36,7 @@
     border: none;
     cursor: pointer;
     display: flex;
-    height: $header-height;
+    height: $nav-height;
     justify-content: center;
     left: 0;
     overflow: hidden;
@@ -86,6 +101,7 @@
 
   &__logo {
     margin: auto;
+    width: 11.65rem;
 
     @include isHeaderDesktop {
       margin: unset;
@@ -134,11 +150,15 @@
     transform: translateX(-100%);
 
     @include isHeaderDesktop {
-      height: $header-height;
       position: relative;
       transform: unset;
       width: 100%;
     }
+    .#{$px}-nav__list-container {
+      display: flex;
+      height: $nav-height;
+      padding-right: $nav-height;
+    }
 
     &.#{$px}-header__nav--open {
       transform: translateX(0);
@@ -147,5 +167,12 @@
         transform: unset;
       }
     }
+
+    .#{$px}-nav__item {
+      .#{$px}-link--snwHeaderLink {
+        align-content: center;
+        height: 100%;
+      }
+    }
   }
 }

package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss

@@ -27,7 +27,7 @@
       left: 0;
       position: absolute;
       right: 0;
-      top: $header-height;
+      top: $nav-height;
     }
   }
 
@@ -74,7 +74,7 @@
       min-height: 0;
       overflow: hidden;
       position: fixed;
-      top: $header-submenu-top;
+      top: $desktop-header-height;
       width: 100%;
       z-index: -1;
 

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -5,8 +5,11 @@
   justify-content: center;
   list-style: none;
   margin: 0;
+  opacity: 1;
   padding: 0;
-  width: 100%;
+  position: relative;
+  top: 0;
+  transition: top 0.25s ease-in 0.1s;
 
   @include isHeaderMobile {
     flex-direction: column;
@@ -16,7 +19,7 @@
     overflow: auto;
     padding: 0.5rem;
     transform: translateX(0%);
-    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
+    transition: transform 0.3s ease-in 0.1s;
   }
 
   &--expanded {
@@ -28,6 +31,15 @@
     }
   }
 
+  &--offscreen {
+    opacity: 0;
+    top: -100%;
+    transition:
+      top 0.25s ease-in 0.1s,
+      opacity 0.25s ease-in;
+    z-index: 5;
+  }
+
   & .#{$px}-nav__item > & {
     @include isHeaderMobile {
       display: none;

package/dist/scss/components/Navigation/_navigation.scss

@@ -2,22 +2,25 @@
 
 .#{$px}-nav {
   background: $pure-white;
+  flex-wrap: wrap;
   height: 100%;
   overflow: hidden;
   padding-top: 4.5rem;
   position: relative;
-  width: 100%;
 
   @include isHeaderDesktop {
     display: flex;
-    flex-wrap: wrap;
     overflow: visible;
     padding-top: 0;
-    place-content: center right;
+    place-content: center center;
     position: unset;
     width: auto;
   }
 
+  &__list-container {
+    position: relative;
+  }
+
   &--expanded &__label {
     animation: 1s linear fade-in-out forwards;
   }
@@ -61,19 +64,6 @@
     }
   }
 
-  // Zero out default styles for possible children
-  button {
-    appearance: none;
-    background: none;
-    border: none;
-    color: inherit;
-    display: block;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-    width: 100%;
-  }
-
   &__back-btn:hover,
   &__back-btn:focus,
   &__close-btn:hover,

package/dist/scss/components/Search/SearchResults/_searchResults.scss

@@ -2,13 +2,14 @@
 
 .#{$px}-search__results {
   align-items: flex-start;
+  background: $white;
   border-bottom: 1px solid $light-gray;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
-  padding: 0.75rem 0 1.5625rem;
+  padding: $spacing-sm;
   position: absolute;
-  top: $header-height;
+  top: $nav-height;
   width: 100%;
 
   &-container {
@@ -33,6 +34,13 @@
       }
     }
 
+    .#{$px}-link {
+      &--link {
+        border-bottom: 1px transparent solid;
+        color: $pure-black;
+      }
+    }
+
     p {
       @include pText(0.875rem, $pure-black);
 
@@ -40,22 +48,5 @@
       line-height: 1.25rem;
       text-transform: capitalize;
     }
-
-    &:hover,
-    &:focus,
-    &:focus-within,
-    &:active {
-      p {
-        color: $pure-black;
-        text-decoration: underline;
-      }
-
-      .phillips-link {
-        &--standalone {
-          border-bottom: none !important;
-          color: $pure-black;
-        }
-      }
-    }
   }
 }