@veritone-ce/design-system 2.8.7 → 2.8.9

package/dist/cjs/Accordion/Accordion.js

@@ -0,0 +1,111 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+var defaultTheme = require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var iconsMaterial = require('@mui/icons-material');
+var wrappers = require('../Icon/wrappers.js');
+require('../Icon/factory.js');
+var Context = require('./Context.js');
+var reactSpring_web_modern = require('../bundled_modules/@react-spring/web/dist/react-spring_web.modern.js');
+var reactSpring_core_modern = require('../bundled_modules/@react-spring/core/dist/react-spring_core.modern.js');
+
+const ExpandLessIcon = wrappers.adaptMuiSvgIcon(iconsMaterial.ExpandLess);
+const Accordion = React.forwardRef(
+  ({
+    title,
+    palette = defaultTheme.defaultThemeCssVariableUsages.palette.background.primary,
+    defaultExpanded = false,
+    id: providedId,
+    children,
+    "data-testid": dataTestId,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const id = providedId || generatedId;
+    const { isExpanded, toggleAccordion } = Context.useAccordionState(
+      id,
+      defaultExpanded
+    );
+    const contentRef = React.useRef(null);
+    const contentAnimation = reactSpring_core_modern.useSpring({
+      from: {
+        height: 0,
+        opacity: 0,
+        overflow: "hidden"
+      },
+      to: {
+        height: isExpanded ? contentRef.current?.scrollHeight || "auto" : 0,
+        opacity: isExpanded ? 1 : 0,
+        overflow: "hidden"
+      },
+      config: {
+        tension: 250,
+        friction: 25
+      },
+      // When animation completes and content is expanded, remove height constraint
+      onRest: () => {
+        if (isExpanded && contentRef.current) {
+          contentRef.current.style.height = "auto";
+        }
+      }
+    });
+    const iconAnimation = reactSpring_core_modern.useSpring({
+      transform: isExpanded ? "rotate(0deg)" : "rotate(180deg)",
+      config: {
+        tension: 300,
+        friction: 20
+      }
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...props,
+        ref,
+        "data-testid": dataTestId,
+        className: cx.cx(styles_module.default["accordion"], className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: styles_module.default["accordion-header"],
+              onClick: toggleAccordion,
+              style: {
+                backgroundColor: palette,
+                ...style
+              },
+              "data-expanded": isExpanded,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default["accordion-title"], children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactSpring_web_modern.a.span,
+                  {
+                    className: styles_module.default["accordion-icon"],
+                    style: iconAnimation,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ExpandLessIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactSpring_web_modern.a.div, { style: contentAnimation, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles_module.default["accordion-content"], children }) })
+        ]
+      }
+    );
+  }
+);
+
+exports.default = Accordion;

package/dist/cjs/Accordion/AccordionGroup.js

@@ -0,0 +1,61 @@
+'use strict';
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styles_module = require('./styles.module.scss.js');
+var cx = require('../styles/cx.js');
+require('../styles/defaultThemeOptions.js');
+require('@capsizecss/core');
+require('color2k');
+require('../styles/defaultTheme.js');
+require('../styles/provider.client.js');
+require('../styles/css-vars.js');
+var Context = require('./Context.js');
+
+const AccordionGroup = React.forwardRef(
+  ({
+    defaultActiveId = null,
+    allowAllClosed = true,
+    children,
+    "data-testid": dataTestId,
+    className,
+    ...props
+  }, ref) => {
+    const [activeAccordionId, setActiveAccordionId] = React.useState(
+      defaultActiveId
+    );
+    const handleSetActiveAccordion = (id) => {
+      setActiveAccordionId((prevId) => {
+        if (id === prevId && allowAllClosed) {
+          return null;
+        }
+        return id;
+      });
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Context.AccordionGroupContext.Provider,
+      {
+        value: {
+          activeAccordionId,
+          setActiveAccordionId: handleSetActiveAccordion
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ...props,
+            ref,
+            "data-testid": dataTestId,
+            className: cx.cx(styles_module.default["accordion-group"], className),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.default = AccordionGroup;

package/dist/cjs/Accordion/Context.js

@@ -0,0 +1,39 @@
+'use strict';
+'use client';
+'use strict';
+
+var React = require('react');
+
+const defaultContextValue = {
+  activeAccordionId: null,
+  setActiveAccordionId: () => {
+  }
+};
+const AccordionGroupContext = React.createContext(defaultContextValue);
+const useAccordionGroup = () => {
+  return React.useContext(AccordionGroupContext);
+};
+const useIsInsideAccordionGroup = () => {
+  const context = React.useContext(AccordionGroupContext);
+  return context !== defaultContextValue;
+};
+const useAccordionState = (id, defaultExpanded = false) => {
+  const accordionGroup = useAccordionGroup();
+  const isInGroup = useIsInsideAccordionGroup();
+  const [localExpanded, setLocalExpanded] = React.useState(defaultExpanded);
+  const isExpanded = isInGroup ? accordionGroup?.activeAccordionId === id : localExpanded;
+  const toggleAccordion = () => {
+    if (isInGroup && accordionGroup) {
+      accordionGroup.setActiveAccordionId(isExpanded ? null : id);
+    } else {
+      setLocalExpanded(!localExpanded);
+    }
+  };
+  return { isExpanded, toggleAccordion };
+};
+
+exports.AccordionGroupContext = AccordionGroupContext;
+exports.defaultContextValue = defaultContextValue;
+exports.useAccordionGroup = useAccordionGroup;
+exports.useAccordionState = useAccordionState;
+exports.useIsInsideAccordionGroup = useIsInsideAccordionGroup;

package/dist/cjs/Accordion/styles.module.scss.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"accordion-group":"vt_ce_Accordion_accordion-group__8bbf5326","accordion":"vt_ce_Accordion_accordion__dd9538a7","accordion-header":"vt_ce_Accordion_accordion-header__364b94af","accordion-title":"vt_ce_Accordion_accordion-title__5880129b","accordion-icon":"vt_ce_Accordion_accordion-icon__36646438","accordion-content":"vt_ce_Accordion_accordion-content__19b0322a"};
+
+exports.default = styles;

package/dist/cjs/Badge/index.js

@@ -5,6 +5,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var cx = require('../styles/cx.js');
 require('../styles/defaultThemeOptions.js');
 require('@capsizecss/core');
@@ -12,8 +13,9 @@ require('color2k');
 var defaultTheme = require('../styles/defaultTheme.js');
 require('../styles/provider.client.js');
 require('../styles/css-vars.js');
-var styles_module = require('./styles.module.scss.js');
+var isNil = require('../utils/isNil.js');
 var index = require('../Typography/index.js');
+var styles_module = require('./styles.module.scss.js');
 
 function Badge({
   palette = defaultTheme.defaultThemeCssVariableUsages.palette.indicator.info.base,
@@ -22,6 +24,13 @@ function Badge({
   ...props
 }) {
   const variantCn = styles_module.default[`variant-${variant}`];
+  const displayLabel = React.useMemo(() => {
+    if (typeof props.label === "number" && typeof props.max === "number") {
+      return props.label > props.max ? `${props.max}+` : props.label;
+    }
+    return props.label;
+  }, [props.label, props.max]);
+  const hasLabel = !isNil.isNil(displayLabel);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -29,7 +38,7 @@ function Badge({
       className: cx.cx(styles_module.default["badge-anchor"], props.className),
       children: [
         props.children,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["badge-wrapper"], "data-disabled": disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default["badge-wrapper"], "data-disabled": disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cx.cx(styles_module.default["badge"], variantCn),
@@ -45,7 +54,7 @@ function Badge({
                 variant: "paragraph3",
                 leadingTrim: true,
                 className: styles_module.default["badge-text"],
-                children: props.label
+                children: displayLabel
               }
             )
           }

package/dist/cjs/bundled_modules/@react-spring/animated/dist/react-spring_animated.modern.js

@@ -0,0 +1,338 @@
+'use strict';
+
+var reactSpring_shared_modern = require('../../shared/dist/react-spring_shared.modern.js');
+var React = require('react');
+var reactSpring_rafz_modern = require('../../rafz/dist/react-spring_rafz.modern.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+// src/Animated.ts
+var $node = Symbol.for("Animated:node");
+var isAnimated = (value) => !!value && value[$node] === value;
+var getAnimated = (owner) => owner && owner[$node];
+var setAnimated = (owner, node) => reactSpring_shared_modern.defineHidden(owner, $node, node);
+var getPayload = (owner) => owner && owner[$node] && owner[$node].getPayload();
+var Animated = class {
+  constructor() {
+    setAnimated(this, this);
+  }
+  /** Get every `AnimatedValue` used by this node. */
+  getPayload() {
+    return this.payload || [];
+  }
+};
+var AnimatedValue = class _AnimatedValue extends Animated {
+  constructor(_value) {
+    super();
+    this._value = _value;
+    this.done = true;
+    this.durationProgress = 0;
+    if (reactSpring_shared_modern.is.num(this._value)) {
+      this.lastPosition = this._value;
+    }
+  }
+  /** @internal */
+  static create(value) {
+    return new _AnimatedValue(value);
+  }
+  getPayload() {
+    return [this];
+  }
+  getValue() {
+    return this._value;
+  }
+  setValue(value, step) {
+    if (reactSpring_shared_modern.is.num(value)) {
+      this.lastPosition = value;
+      if (step) {
+        value = Math.round(value / step) * step;
+        if (this.done) {
+          this.lastPosition = value;
+        }
+      }
+    }
+    if (this._value === value) {
+      return false;
+    }
+    this._value = value;
+    return true;
+  }
+  reset() {
+    const { done } = this;
+    this.done = false;
+    if (reactSpring_shared_modern.is.num(this._value)) {
+      this.elapsedTime = 0;
+      this.durationProgress = 0;
+      this.lastPosition = this._value;
+      if (done) this.lastVelocity = null;
+      this.v0 = null;
+    }
+  }
+};
+var AnimatedString = class _AnimatedString extends AnimatedValue {
+  constructor(value) {
+    super(0);
+    this._string = null;
+    this._toString = reactSpring_shared_modern.createInterpolator({
+      output: [value, value]
+    });
+  }
+  /** @internal */
+  static create(value) {
+    return new _AnimatedString(value);
+  }
+  getValue() {
+    const value = this._string;
+    return value == null ? this._string = this._toString(this._value) : value;
+  }
+  setValue(value) {
+    if (reactSpring_shared_modern.is.str(value)) {
+      if (value == this._string) {
+        return false;
+      }
+      this._string = value;
+      this._value = 1;
+    } else if (super.setValue(value)) {
+      this._string = null;
+    } else {
+      return false;
+    }
+    return true;
+  }
+  reset(goal) {
+    if (goal) {
+      this._toString = reactSpring_shared_modern.createInterpolator({
+        output: [this.getValue(), goal]
+      });
+    }
+    this._value = 0;
+    super.reset();
+  }
+};
+
+// src/context.ts
+var TreeContext = { dependencies: null };
+
+// src/AnimatedObject.ts
+var AnimatedObject = class extends Animated {
+  constructor(source) {
+    super();
+    this.source = source;
+    this.setValue(source);
+  }
+  getValue(animated) {
+    const values = {};
+    reactSpring_shared_modern.eachProp(this.source, (source, key) => {
+      if (isAnimated(source)) {
+        values[key] = source.getValue(animated);
+      } else if (reactSpring_shared_modern.hasFluidValue(source)) {
+        values[key] = reactSpring_shared_modern.getFluidValue(source);
+      } else if (!animated) {
+        values[key] = source;
+      }
+    });
+    return values;
+  }
+  /** Replace the raw object data */
+  setValue(source) {
+    this.source = source;
+    this.payload = this._makePayload(source);
+  }
+  reset() {
+    if (this.payload) {
+      reactSpring_shared_modern.each(this.payload, (node) => node.reset());
+    }
+  }
+  /** Create a payload set. */
+  _makePayload(source) {
+    if (source) {
+      const payload = /* @__PURE__ */ new Set();
+      reactSpring_shared_modern.eachProp(source, this._addToPayload, payload);
+      return Array.from(payload);
+    }
+  }
+  /** Add to a payload set. */
+  _addToPayload(source) {
+    if (TreeContext.dependencies && reactSpring_shared_modern.hasFluidValue(source)) {
+      TreeContext.dependencies.add(source);
+    }
+    const payload = getPayload(source);
+    if (payload) {
+      reactSpring_shared_modern.each(payload, (node) => this.add(node));
+    }
+  }
+};
+
+// src/AnimatedArray.ts
+var AnimatedArray = class _AnimatedArray extends AnimatedObject {
+  constructor(source) {
+    super(source);
+  }
+  /** @internal */
+  static create(source) {
+    return new _AnimatedArray(source);
+  }
+  getValue() {
+    return this.source.map((node) => node.getValue());
+  }
+  setValue(source) {
+    const payload = this.getPayload();
+    if (source.length == payload.length) {
+      return payload.map((node, i) => node.setValue(source[i])).some(Boolean);
+    }
+    super.setValue(source.map(makeAnimated));
+    return true;
+  }
+};
+function makeAnimated(value) {
+  const nodeType = reactSpring_shared_modern.isAnimatedString(value) ? AnimatedString : AnimatedValue;
+  return nodeType.create(value);
+}
+function getAnimatedType(value) {
+  const parentNode = getAnimated(value);
+  return parentNode ? parentNode.constructor : reactSpring_shared_modern.is.arr(value) ? AnimatedArray : reactSpring_shared_modern.isAnimatedString(value) ? AnimatedString : AnimatedValue;
+}
+var withAnimated = (Component, host) => {
+  const hasInstance = (
+    // Function components must use "forwardRef" to avoid being
+    // re-rendered on every animation frame.
+    !reactSpring_shared_modern.is.fun(Component) || Component.prototype && Component.prototype.isReactComponent
+  );
+  return React.forwardRef((givenProps, givenRef) => {
+    const instanceRef = React.useRef(null);
+    const ref = hasInstance && // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useCallback(
+      (value) => {
+        instanceRef.current = updateRef(givenRef, value);
+      },
+      [givenRef]
+    );
+    const [props, deps] = getAnimatedState(givenProps, host);
+    const forceUpdate = reactSpring_shared_modern.useForceUpdate();
+    const callback = () => {
+      const instance = instanceRef.current;
+      if (hasInstance && !instance) {
+        return;
+      }
+      const didUpdate = instance ? host.applyAnimatedValues(instance, props.getValue(true)) : false;
+      if (didUpdate === false) {
+        forceUpdate();
+      }
+    };
+    const observer = new PropsObserver(callback, deps);
+    const observerRef = React.useRef(void 0);
+    reactSpring_shared_modern.useIsomorphicLayoutEffect(() => {
+      observerRef.current = observer;
+      reactSpring_shared_modern.each(deps, (dep) => reactSpring_shared_modern.addFluidObserver(dep, observer));
+      return () => {
+        if (observerRef.current) {
+          reactSpring_shared_modern.each(
+            observerRef.current.deps,
+            (dep) => reactSpring_shared_modern.removeFluidObserver(dep, observerRef.current)
+          );
+          reactSpring_rafz_modern.raf.cancel(observerRef.current.update);
+        }
+      };
+    });
+    React.useEffect(callback, []);
+    reactSpring_shared_modern.useOnce(() => () => {
+      const observer2 = observerRef.current;
+      reactSpring_shared_modern.each(observer2.deps, (dep) => reactSpring_shared_modern.removeFluidObserver(dep, observer2));
+    });
+    const usedProps = host.getComponentProps(props.getValue());
+    return /* @__PURE__ */ React__namespace.createElement(Component, { ...usedProps, ref });
+  });
+};
+var PropsObserver = class {
+  constructor(update, deps) {
+    this.update = update;
+    this.deps = deps;
+  }
+  eventObserved(event) {
+    if (event.type == "change") {
+      reactSpring_rafz_modern.raf.write(this.update);
+    }
+  }
+};
+function getAnimatedState(props, host) {
+  const dependencies = /* @__PURE__ */ new Set();
+  TreeContext.dependencies = dependencies;
+  if (props.style)
+    props = {
+      ...props,
+      style: host.createAnimatedStyle(props.style)
+    };
+  props = new AnimatedObject(props);
+  TreeContext.dependencies = null;
+  return [props, dependencies];
+}
+function updateRef(ref, value) {
+  if (ref) {
+    if (reactSpring_shared_modern.is.fun(ref)) ref(value);
+    else ref.current = value;
+  }
+  return value;
+}
+
+// src/createHost.ts
+var cacheKey = Symbol.for("AnimatedComponent");
+var createHost = (components, {
+  applyAnimatedValues = () => false,
+  createAnimatedStyle = (style) => new AnimatedObject(style),
+  getComponentProps = (props) => props
+} = {}) => {
+  const hostConfig = {
+    applyAnimatedValues,
+    createAnimatedStyle,
+    getComponentProps
+  };
+  const animated = (Component) => {
+    const displayName = getDisplayName(Component) || "Anonymous";
+    if (reactSpring_shared_modern.is.str(Component)) {
+      Component = animated[Component] || (animated[Component] = withAnimated(Component, hostConfig));
+    } else {
+      Component = Component[cacheKey] || (Component[cacheKey] = withAnimated(Component, hostConfig));
+    }
+    Component.displayName = `Animated(${displayName})`;
+    return Component;
+  };
+  reactSpring_shared_modern.eachProp(components, (Component, key) => {
+    if (reactSpring_shared_modern.is.arr(components)) {
+      key = getDisplayName(Component);
+    }
+    animated[key] = animated(Component);
+  });
+  return {
+    animated
+  };
+};
+var getDisplayName = (arg) => reactSpring_shared_modern.is.str(arg) ? arg : arg && reactSpring_shared_modern.is.str(arg.displayName) ? arg.displayName : reactSpring_shared_modern.is.fun(arg) && arg.name || null;
+
+exports.Animated = Animated;
+exports.AnimatedArray = AnimatedArray;
+exports.AnimatedObject = AnimatedObject;
+exports.AnimatedString = AnimatedString;
+exports.AnimatedValue = AnimatedValue;
+exports.createHost = createHost;
+exports.getAnimated = getAnimated;
+exports.getAnimatedType = getAnimatedType;
+exports.getPayload = getPayload;
+exports.isAnimated = isAnimated;
+exports.setAnimated = setAnimated;