@kaizen/components 1.27.0 → 1.29.0

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -0,0 +1,183 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var classnames = require('classnames');
+var reactPopper = require('react-popper');
+var AppearanceAnim = require('./subcomponents/AppearanceAnim.cjs');
+var isSemanticElement = require('./utils/isSemanticElement.cjs');
+var Tooltip_module = require('./Tooltip.module.scss.cjs');
+var positionToPlacement = new Map([["above", "top"], ["below", "bottom"], ["left", "left"], ["right", "right"]]);
+// Sync with Tooltip.scss
+var arrowHeight = 7;
+var arrowWidth = 14;
+var TooltipContent = function (_a) {
+  var position = _a.position,
+    text = _a.text,
+    referenceElement = _a.referenceElement,
+    tooltipId = _a.tooltipId,
+    _b = _a.mood,
+    mood = _b === void 0 ? "default" : _b;
+  var _c = React.useState(null),
+    popperElement = _c[0],
+    setPopperElement = _c[1];
+  var _d = React.useState(null),
+    arrowElement = _d[0],
+    setArrowElement = _d[1];
+  var _e = reactPopper.usePopper(referenceElement, popperElement, {
+      modifiers: [{
+        name: "arrow",
+        options: {
+          element: arrowElement,
+          // Ensures that the arrow doesn't go too far to the left or right
+          // of the tooltip.
+          padding: arrowWidth / 2 + 10
+        }
+      }, {
+        name: "offset",
+        options: {
+          offset: [0, arrowHeight + 6]
+        }
+      }, {
+        name: "preventOverflow",
+        options: {
+          // Makes sure that the tooltip isn't flush up against the end of the
+          // viewport
+          padding: 8,
+          altAxis: true,
+          altBoundary: true,
+          tetherOffset: 50
+        }
+      }, {
+        name: "flip",
+        options: {
+          padding: 8,
+          altBoundary: true,
+          fallbackPlacements: ["left", "top", "bottom", "right"]
+        }
+      }],
+      placement: position ? positionToPlacement.get(position) : undefined
+    }),
+    popperStyles = _e.styles,
+    attributes = _e.attributes;
+  var _f = AppearanceAnim.useAnimation(),
+    isVisible = _f.isVisible,
+    isAnimIn = _f.isAnimIn,
+    isAnimOut = _f.isAnimOut;
+  return isVisible || isAnimOut || isAnimIn ? React.createElement("div", tslib.__assign({
+    ref: setPopperElement,
+    className: Tooltip_module.tooltip,
+    style: popperStyles.popper
+  }, attributes.popper, {
+    role: "tooltip",
+    id: tooltipId
+  }), React.createElement("div", {
+    className: classnames(Tooltip_module.tooltipContent, Tooltip_module[mood])
+  }, text), React.createElement("div", {
+    ref: setArrowElement,
+    className: Tooltip_module.arrow,
+    style: popperStyles.arrow
+  }, React.createElement("div", {
+    className: Tooltip_module.arrowInner
+  }, React.createElement("div", {
+    className: classnames(Tooltip_module.arrowMain, Tooltip_module[mood])
+  }), React.createElement("div", {
+    className: Tooltip_module.arrowShadow
+  })))) : null;
+};
+var renderChildren = function (content, tooltipId, hasActiveTooltip) {
+  if (isSemanticElement.isSemanticElement(content)) {
+    return React.cloneElement(content, {
+      "aria-describedby": hasActiveTooltip ? tooltipId : undefined
+    });
+  }
+  // We don't want to block them from this but just provide context for better a11y guidance
+  // eslint-disable-next-line no-console
+  console.warn("<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly.");
+  return content;
+};
+const Tooltip = /*#__PURE__*/function () {
+  const Tooltip = function (_a) {
+    var children = _a.children,
+      text = _a.text,
+      _b = _a.display,
+      display = _b === void 0 ? "block" : _b,
+      _c = _a.position,
+      position = _c === void 0 ? "above" : _c,
+      classNameOverride = _a.classNameOverride,
+      portalSelector = _a.portalSelector,
+      animationDuration = _a.animationDuration,
+      _d = _a.isInitiallyVisible,
+      isInitiallyVisible = _d === void 0 ? false : _d,
+      _e = _a.mood,
+      mood = _e === void 0 ? "default" : _e;
+    var _f = React.useState(isInitiallyVisible),
+      isHover = _f[0],
+      setIsHover = _f[1];
+    var _g = React.useState(false),
+      isFocus = _g[0],
+      setIsFocus = _g[1];
+    var _h = React.useState(null),
+      referenceElement = _h[0],
+      setReferenceElement = _h[1];
+    var tooltipId = React.useId();
+    var hasActiveTooltip = isHover || isFocus;
+    var tooltip = React.createElement(TooltipContent, {
+      text: text,
+      position: position,
+      referenceElement: referenceElement,
+      tooltipId: tooltipId,
+      mood: mood
+    });
+    var portalSelectorElementRef = React.useRef(null);
+    React.useEffect(function () {
+      portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
+    }, [portalSelector]);
+    React.useEffect(function () {
+      if (portalSelector && !portalSelectorElementRef.current) {
+        // eslint-disable-next-line no-console
+        console.warn("The portal could not be created using the selector: " + portalSelector);
+      }
+    }, [portalSelectorElementRef, portalSelector]);
+    var getDisplayClassName = function () {
+      switch (display) {
+        case "inline":
+          return Tooltip_module.displayInline;
+        case "block":
+          return Tooltip_module.displayBlock;
+        case "inline-block":
+          return Tooltip_module.displayInlineBlock;
+        case "flex":
+          return Tooltip_module.displayFlex;
+        case "inline-flex":
+          return Tooltip_module.displayInlineFlex;
+        default:
+          return undefined;
+      }
+    };
+    return React.createElement(AppearanceAnim.AnimationProvider, {
+      isVisible: hasActiveTooltip,
+      animationDuration: animationDuration
+    }, React.createElement(React.Fragment, null, React.createElement("div", {
+      ref: setReferenceElement,
+      className: classnames(classNameOverride, getDisplayClassName()),
+      onMouseEnter: function () {
+        return setIsHover(true);
+      },
+      onMouseLeave: function () {
+        return setIsHover(false);
+      },
+      onFocusCapture: function () {
+        return setIsFocus(true);
+      },
+      onBlurCapture: function () {
+        return setIsFocus(false);
+      }
+    }, renderChildren(children, tooltipId, hasActiveTooltip)), portalSelector && portalSelectorElementRef.current ? ReactDOM.createPortal(tooltip, portalSelectorElementRef.current) : tooltip));
+  };
+  Tooltip.displayName = "Tooltip";
+  return Tooltip;
+}();
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=Tooltip.cjs.map

package/dist/cjs/Tooltip/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  cloneElement,\n  useEffect,\n  useRef,\n  useState,\n  useId,\n} from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { Placement } from \"@popperjs/core\"\nimport classnames from \"classnames\"\nimport { usePopper } from \"react-popper\"\nimport { AnimationProvider, useAnimation } from \"./subcomponents/AppearanceAnim\"\nimport { isSemanticElement } from \"./utils/isSemanticElement\"\nimport styles from \"./Tooltip.module.scss\"\n\ntype Position = \"above\" | \"below\" | \"left\" | \"right\"\ntype Mood = \"default\" | \"informative\" | \"positive\" | \"cautionary\" | \"highlight\"\n\nexport type TooltipProps = {\n  /**\n   * Unfortunately, the content needed to be wrapped in a div. This can sometimes\n   * break the css layout. To get around this, we allow you to specify the css\n   * display value directly. If you need to need to modify more values, feel free\n   * to use the `classNameOverride` prop, but avoid it if you can.\n   */\n  display?: \"block\" | \"inline\" | \"inline-block\" | \"flex\" | \"inline-flex\"\n  /**\n   * This is more a \"desired position\". The tooltip will automatically change\n   * its position, if there's not enough room to show it in the one specified.\n   */\n  position?: Position\n  /** The text content for the tooltip */\n  text: React.ReactNode\n  /**\n   * This is the interactable element that is being described by the tooltip `text`\n   */\n  children?: React.ReactNode\n  classNameOverride?: string\n  mood?: Mood\n  /**\n   * Render the tooltip inside a react portal, given the ccs selector.\n   * This is typically used for instances where the menu is a descendant of an\n   * `overflow: scroll` or `overflow: hidden` element.\n   */\n  portalSelector?: string\n  /**\n   * Should the tooltip be visible on the first render. Useful for visual\n   * regression testing.\n   */\n  isInitiallyVisible?: boolean\n  animationDuration?: number\n}\n\nconst positionToPlacement = new Map<Position, Placement>([\n  [\"above\", \"top\"],\n  [\"below\", \"bottom\"],\n  [\"left\", \"left\"],\n  [\"right\", \"right\"],\n])\n\n// Sync with Tooltip.scss\nconst arrowHeight = 7\nconst arrowWidth = 14\n\ntype TooltipContentProps = Pick<TooltipProps, \"position\" | \"text\" | \"mood\"> & {\n  tooltipId: string\n  referenceElement: HTMLDivElement | null\n}\n\nconst TooltipContent = ({\n  position,\n  text,\n  referenceElement,\n  tooltipId,\n  mood = \"default\",\n}: TooltipContentProps): JSX.Element | null => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(\n    null\n  )\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)\n  const { styles: popperStyles, attributes } = usePopper(\n    referenceElement,\n    popperElement,\n    {\n      modifiers: [\n        {\n          name: \"arrow\",\n          options: {\n            element: arrowElement,\n            // Ensures that the arrow doesn't go too far to the left or right\n            // of the tooltip.\n            padding: arrowWidth / 2 + 10,\n          },\n        },\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, arrowHeight + 6],\n          },\n        },\n        {\n          name: \"preventOverflow\",\n          options: {\n            // Makes sure that the tooltip isn't flush up against the end of the\n            // viewport\n            padding: 8,\n            altAxis: true,\n            altBoundary: true,\n            tetherOffset: 50,\n          },\n        },\n        {\n          name: \"flip\",\n          options: {\n            padding: 8,\n            altBoundary: true,\n            fallbackPlacements: [\"left\", \"top\", \"bottom\", \"right\"],\n          },\n        },\n      ],\n      placement: position ? positionToPlacement.get(position) : undefined,\n    }\n  )\n  const { isVisible, isAnimIn, isAnimOut } = useAnimation()\n\n  return isVisible || isAnimOut || isAnimIn ? (\n    <div\n      ref={setPopperElement}\n      className={styles.tooltip}\n      style={popperStyles.popper}\n      {...attributes.popper}\n      role=\"tooltip\"\n      id={tooltipId}\n    >\n      <div className={classnames(styles.tooltipContent, styles[mood])}>\n        {text}\n      </div>\n      <div\n        ref={setArrowElement}\n        className={styles.arrow}\n        style={popperStyles.arrow}\n      >\n        <div className={styles.arrowInner}>\n          <div className={classnames(styles.arrowMain, styles[mood])} />\n          <div className={styles.arrowShadow} />\n        </div>\n      </div>\n    </div>\n  ) : null\n}\n\nconst renderChildren = (\n  content: ReactNode,\n  tooltipId: string,\n  hasActiveTooltip: boolean\n): ReactNode => {\n  if (isSemanticElement(content)) {\n    return cloneElement(content, {\n      \"aria-describedby\": hasActiveTooltip ? tooltipId : undefined,\n    })\n  }\n  // We don't want to block them from this but just provide context for better a11y guidance\n  // eslint-disable-next-line no-console\n  console.warn(\n    \"<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info. To ensure accessibility, Tooltip should be wrapping a semantic and focusable element directly.\"\n  )\n  return content\n}\n\nexport const Tooltip = ({\n  children,\n  text,\n  display = \"block\",\n  position = \"above\",\n  classNameOverride,\n  portalSelector,\n  animationDuration,\n  isInitiallyVisible = false,\n  mood = \"default\",\n}: TooltipProps): JSX.Element => {\n  const [isHover, setIsHover] = useState(isInitiallyVisible)\n  const [isFocus, setIsFocus] = useState(false)\n  const [referenceElement, setReferenceElement] =\n    useState<HTMLDivElement | null>(null)\n  const tooltipId = useId()\n  const hasActiveTooltip = isHover || isFocus\n\n  const tooltip = (\n    <TooltipContent\n      text={text}\n      position={position}\n      referenceElement={referenceElement}\n      tooltipId={tooltipId}\n      mood={mood}\n    />\n  )\n\n  const portalSelectorElementRef = useRef<Element | null>(null)\n\n  useEffect(() => {\n    portalSelectorElementRef.current = portalSelector\n      ? document.querySelector(portalSelector)\n      : null\n  }, [portalSelector])\n\n  useEffect(() => {\n    if (portalSelector && !portalSelectorElementRef.current) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"The portal could not be created using the selector: \" + portalSelector\n      )\n    }\n  }, [portalSelectorElementRef, portalSelector])\n\n  const getDisplayClassName = (): string | undefined => {\n    switch (display) {\n      case \"inline\":\n        return styles.displayInline\n      case \"block\":\n        return styles.displayBlock\n      case \"inline-block\":\n        return styles.displayInlineBlock\n      case \"flex\":\n        return styles.displayFlex\n      case \"inline-flex\":\n        return styles.displayInlineFlex\n      default:\n        return undefined\n    }\n  }\n\n  return (\n    <AnimationProvider\n      isVisible={hasActiveTooltip}\n      animationDuration={animationDuration}\n    >\n      <>\n        <div\n          ref={setReferenceElement}\n          className={classnames(classNameOverride, getDisplayClassName())}\n          onMouseEnter={(): void => setIsHover(true)}\n          onMouseLeave={(): void => setIsHover(false)}\n          onFocusCapture={(): void => setIsFocus(true)}\n          onBlurCapture={(): void => setIsFocus(false)}\n        >\n          {renderChildren(children, tooltipId, hasActiveTooltip)}\n        </div>\n\n        {portalSelector && portalSelectorElementRef.current\n          ? ReactDOM.createPortal(tooltip, portalSelectorElementRef.current)\n          : tooltip}\n      </>\n    </AnimationProvider>\n  )\n}\n\nTooltip.displayName = \"Tooltip\"\n"],"names":["positionToPlacement","Map","arrowHeight","arrowWidth","TooltipContent","_a","position","text","referenceElement","tooltipId","_b","mood","_c","useState","popperElement","setPopperElement","_d","arrowElement","setArrowElement","_e","usePopper","modifiers","name","options","element","padding","offset","altAxis","altBoundary","tetherOffset","fallbackPlacements","placement","get","undefined","popperStyles","styles","attributes","_f","useAnimation","isVisible","isAnimIn","isAnimOut","React","createElement","__assign","ref","className","tooltip","style","popper","role","id","classnames","tooltipContent","arrow","arrowInner","arrowMain","arrowShadow","renderChildren","content","hasActiveTooltip","isSemanticElement","cloneElement","console","warn","Tooltip","children","display","classNameOverride","portalSelector","animationDuration","isInitiallyVisible","isHover","setIsHover","_g","isFocus","setIsFocus","_h","setReferenceElement","useId","portalSelectorElementRef","useRef","useEffect","current","document","querySelector","getDisplayClassName","displayInline","displayBlock","displayInlineBlock","displayFlex","displayInlineFlex","AnimationProvider","Fragment","onMouseEnter","onMouseLeave","onFocusCapture","onBlurCapture","ReactDOM","createPortal","displayName"],"mappings":"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"}

package/dist/cjs/Tooltip/Tooltip.module.scss.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__NMZ65",
+  "tooltipContent": "Tooltip-module_tooltipContent__7vVkT",
+  "default": "Tooltip-module_default__lCIk7",
+  "informative": "Tooltip-module_informative__cgZuq",
+  "positive": "Tooltip-module_positive__xe7nM",
+  "cautionary": "Tooltip-module_cautionary__xoU2V",
+  "highlight": "Tooltip-module_highlight__bmY0r",
+  "arrow": "Tooltip-module_arrow__fL2PX",
+  "arrowInner": "Tooltip-module_arrowInner__knDLR",
+  "arrowMain": "Tooltip-module_arrowMain__KidE0",
+  "arrowShadow": "Tooltip-module_arrowShadow__Se33a",
+  "displayInline": "Tooltip-module_displayInline__HkfUK",
+  "displayBlock": "Tooltip-module_displayBlock__WswRy",
+  "displayInlineBlock": "Tooltip-module_displayInlineBlock__d6X3l",
+  "displayFlex": "Tooltip-module_displayFlex__DZdVc",
+  "displayInlineFlex": "Tooltip-module_displayInlineFlex__quEIM"
+};
+module.exports = styles;
+//# sourceMappingURL=Tooltip.module.scss.cjs.map

package/dist/cjs/Tooltip/Tooltip.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/Tooltip/subcomponents/AppearanceAnim.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var useDebounce = require('use-debounce');
+var ANIM_DURATION_MS = 400;
+var AnimationContext = React.createContext({
+  isVisible: false,
+  isAnimIn: false,
+  isAnimOut: false
+});
+/**
+ * Simply applies a css animation to transition a component in and out.
+ * When the component is no longer needed, it will no longer be rendered to the
+ * dom.
+ */
+var AnimationProvider = function (_a) {
+  var isVisible = _a.isVisible,
+    _b = _a.animationDuration,
+    animationDuration = _b === void 0 ? ANIM_DURATION_MS : _b,
+    otherProps = tslib.__rest(_a, ["isVisible", "animationDuration"]);
+  var _c = React.useState(false),
+    isAnimIn = _c[0],
+    setIsAnimIn = _c[1];
+  var _d = React.useState(false),
+    isAnimOut = _d[0],
+    setIsAnimOut = _d[1];
+  var _e = React.useState(false),
+    prevIsOpen = _e[0],
+    setPrevIsOpen = _e[1];
+  // Keeps the modal visible while the css animation is completing
+  var trackAnimOutCompleted = useDebounce.useDebouncedCallback(function () {
+    setIsAnimOut(false);
+  }, animationDuration, {
+    leading: false
+  });
+  // Allows us to flash the component in an "invisible" state, for one frame.
+  // Then set it to "visible". This allows us to make sure the css transition
+  // actually works.
+  var trackAnimInCompleted = useDebounce.useDebouncedCallback(function () {
+    setIsAnimIn(false);
+  }, 0, {
+    leading: false
+  });
+  if (isVisible !== prevIsOpen) {
+    setPrevIsOpen(isVisible);
+    if (!isVisible) {
+      trackAnimInCompleted.cancel();
+      setIsAnimOut(true);
+      trackAnimOutCompleted();
+    } else {
+      trackAnimOutCompleted.cancel();
+      setIsAnimIn(true);
+      trackAnimInCompleted();
+    }
+  }
+  return React.createElement(AnimationContext.Provider, tslib.__assign({
+    value: {
+      isVisible: isVisible,
+      isAnimOut: isAnimOut,
+      isAnimIn: isAnimIn
+    }
+  }, otherProps));
+};
+var useAnimation = function () {
+  var context = React.useContext(AnimationContext);
+  if (!context) {
+    throw new Error("useAnimation must be used within a AnimationProvider");
+  }
+  return context;
+};
+exports.AnimationContext = AnimationContext;
+exports.AnimationProvider = AnimationProvider;
+exports.useAnimation = useAnimation;
+//# sourceMappingURL=AppearanceAnim.cjs.map

package/dist/cjs/Tooltip/subcomponents/AppearanceAnim.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceAnim.cjs","sources":["../../../../src/Tooltip/subcomponents/AppearanceAnim.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { useDebouncedCallback } from \"use-debounce\"\n\ntype AnimationProps = {\n  isAnimIn?: boolean\n  isAnimOut?: boolean\n  prevIsOpen?: boolean\n  animationDuration?: number\n  isVisible: boolean\n}\n\nconst ANIM_DURATION_MS = 400\n\nexport const AnimationContext = React.createContext<AnimationProps>({\n  isVisible: false,\n  isAnimIn: false,\n  isAnimOut: false,\n})\n\n/**\n * Simply applies a css animation to transition a component in and out.\n * When the component is no longer needed, it will no longer be rendered to the\n * dom.\n */\nexport const AnimationProvider = ({\n  isVisible,\n  animationDuration = ANIM_DURATION_MS,\n  ...otherProps\n}: AnimationProps & { children?: React.ReactNode }): JSX.Element => {\n  const [isAnimIn, setIsAnimIn] = useState(false)\n  const [isAnimOut, setIsAnimOut] = useState(false)\n  const [prevIsOpen, setPrevIsOpen] = useState(false)\n\n  // Keeps the modal visible while the css animation is completing\n  const trackAnimOutCompleted = useDebouncedCallback(\n    () => {\n      setIsAnimOut(false)\n    },\n    animationDuration,\n    { leading: false }\n  )\n\n  // Allows us to flash the component in an \"invisible\" state, for one frame.\n  // Then set it to \"visible\". This allows us to make sure the css transition\n  // actually works.\n  const trackAnimInCompleted = useDebouncedCallback(\n    () => {\n      setIsAnimIn(false)\n    },\n    0,\n    { leading: false }\n  )\n\n  if (isVisible !== prevIsOpen) {\n    setPrevIsOpen(isVisible)\n    if (!isVisible) {\n      trackAnimInCompleted.cancel()\n      setIsAnimOut(true)\n      trackAnimOutCompleted()\n    } else {\n      trackAnimOutCompleted.cancel()\n      setIsAnimIn(true)\n      trackAnimInCompleted()\n    }\n  }\n\n  return (\n    <AnimationContext.Provider\n      value={{\n        isVisible,\n        isAnimOut,\n        isAnimIn,\n      }}\n      {...otherProps}\n    />\n  )\n}\n\nexport const useAnimation = (): AnimationProps => {\n  const context = React.useContext(AnimationContext)\n  if (!context) {\n    throw new Error(\"useAnimation must be used within a AnimationProvider\")\n  }\n  return context\n}\n"],"names":["ANIM_DURATION_MS","AnimationContext","React","createContext","isVisible","isAnimIn","isAnimOut","AnimationProvider","_a","_b","animationDuration","otherProps","__rest","_c","useState","setIsAnimIn","_d","setIsAnimOut","_e","prevIsOpen","setPrevIsOpen","trackAnimOutCompleted","useDebouncedCallback","leading","trackAnimInCompleted","cancel","createElement","Provider","__assign","value","useAnimation","context","useContext","Error"],"mappings":";;;;;AAWA,IAAMA,gBAAgB,GAAG,GAAG;AAEf,IAAAC,gBAAgB,GAAGC,KAAK,CAACC,aAAa,CAAiB;EAClEC,SAAS,EAAE,KAAK;EAChBC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE;AACZ,CAAA,CAAC;AAEF;;;;AAIG;AACI,IAAMC,iBAAiB,GAAG,SAAAA,CAACC,EAIgB,EAAA;EAHhD,IAAAJ,SAAS,GAAAI,EAAA,CAAAJ,SAAA;IACTK,EAAA,GAAAD,EAAA,CAAAE,iBAAoC;IAApCA,iBAAiB,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAAT,gBAAgB,GAAAS,EAAA;IACjCE,UAAU,GAAAC,KAAA,CAAAA,MAAA,CAAAJ,EAAA,EAHmB,kCAIjC,CADc;EAEP,IAAAK,EAAA,GAA0BC,KAAAA,CAAAA,QAAQ,CAAC,KAAK,CAAC;IAAxCT,QAAQ,GAAAQ,EAAA,CAAA,CAAA,CAAA;IAAEE,WAAW,GAAAF,EAAA,CAAA,CAAA,CAAmB;EACzC,IAAAG,EAAA,GAA4BF,KAAAA,CAAAA,QAAQ,CAAC,KAAK,CAAC;IAA1CR,SAAS,GAAAU,EAAA,CAAA,CAAA,CAAA;IAAEC,YAAY,GAAAD,EAAA,CAAA,CAAA,CAAmB;EAC3C,IAAAE,EAAA,GAA8BJ,KAAAA,CAAAA,QAAQ,CAAC,KAAK,CAAC;IAA5CK,UAAU,GAAAD,EAAA,CAAA,CAAA,CAAA;IAAEE,aAAa,GAAAF,EAAA,CAAA,CAAA,CAAmB;;EAGnD,IAAMG,qBAAqB,GAAGC,WAAAA,CAAAA,oBAAoB,CAChD,YAAA;IACEL,YAAY,CAAC,KAAK,CAAC;EACpB,CAAA,EACDP,iBAAiB,EACjB;IAAEa,OAAO,EAAE;EAAO,CAAA,CACnB;;;;EAKD,IAAMC,oBAAoB,GAAGF,WAAAA,CAAAA,oBAAoB,CAC/C,YAAA;IACEP,WAAW,CAAC,KAAK,CAAC;EACnB,CAAA,EACD,CAAC,EACD;IAAEQ,OAAO,EAAE;EAAO,CAAA,CACnB;EAED,IAAInB,SAAS,KAAKe,UAAU,EAAE;IAC5BC,aAAa,CAAChB,SAAS,CAAC;IACxB,IAAI,CAACA,SAAS,EAAE;MACdoB,oBAAoB,CAACC,MAAM,CAAA,CAAE;MAC7BR,YAAY,CAAC,IAAI,CAAC;MAClBI,qBAAqB,EAAE;IACxB,CAAA,MAAM;MACLA,qBAAqB,CAACI,MAAM,CAAA,CAAE;MAC9BV,WAAW,CAAC,IAAI,CAAC;MACjBS,oBAAoB,EAAE;IACvB;EACF;EAED,OACEtB,KAAC,CAAAwB,aAAA,CAAAzB,gBAAgB,CAAC0B,QAAQ,EAAAC,KAAAA,CAAAA,QAAA,CAAA;IACxBC,KAAK,EAAE;MACLzB,SAAS,EAAAA,SAAA;MACTE,SAAS,EAAAA,SAAA;MACTD,QAAQ,EAAAA;;EAEN,CAAA,EAAAM,UAAU,CACd,CAAA;AAEN,CAAC;AAEY,IAAAmB,YAAY,GAAG,SAAAA,CAAA,EAAA;EAC1B,IAAMC,OAAO,GAAG7B,KAAK,CAAC8B,UAAU,CAAC/B,gBAAgB,CAAC;EAClD,IAAI,CAAC8B,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,sDAAsD,CAAC;EACxE;EACD,OAAOF,OAAO;AAChB,CAAA;;;"}

package/dist/cjs/Tooltip/utils/isSemanticElement.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+
+// Noting that this is contingent on our displayName for our components -  this something we control
+var allowedDisplayNames = ["Button", "IconButton", "FilterButtonBase"];
+function extractDisplayName(type) {
+  return type.displayName || type.name || "Unknown";
+}
+/**
+ *  Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers
+ */
+var isSemanticElement = function (element) {
+  if (!React.isValidElement(element)) return false;
+  var props = element.props,
+    type = element.type;
+  if ("role" in props) {
+    return props.role !== "presentation" && props.role !== "none";
+  }
+  if (typeof type !== "string") {
+    // As we are only checking whether this matches to our allowedDisplayNames
+    // type casting should be fine
+    var displayName = extractDisplayName(type);
+    return allowedDisplayNames.includes(displayName);
+  }
+  return !(type === "div" || type === "span");
+};
+exports.extractDisplayName = extractDisplayName;
+exports.isSemanticElement = isSemanticElement;
+//# sourceMappingURL=isSemanticElement.cjs.map

package/dist/cjs/Tooltip/utils/isSemanticElement.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isSemanticElement.cjs","sources":["../../../../src/Tooltip/utils/isSemanticElement.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\"\n\n// Noting that this is contingent on our displayName for our components -  this something we control\nconst allowedDisplayNames = [\"Button\", \"IconButton\", \"FilterButtonBase\"]\n\nexport function extractDisplayName(type: React.FunctionComponent): string {\n  return type.displayName || type.name || \"Unknown\"\n}\n\n/**\n *  Validates implicit or explicitly semantic roles required to make `aria-describedby` announce predictably with screen readers\n */\nexport const isSemanticElement = (\n  element: ReactNode\n): element is React.ReactElement => {\n  if (!React.isValidElement(element)) return false\n\n  const { props, type } = element\n\n  if (\"role\" in props) {\n    return props.role !== \"presentation\" && props.role !== \"none\"\n  }\n\n  if (typeof type !== \"string\") {\n    // As we are only checking whether this matches to our allowedDisplayNames\n    // type casting should be fine\n    const displayName = extractDisplayName(\n      type as unknown as React.FunctionComponent\n    )\n\n    return allowedDisplayNames.includes(displayName)\n  }\n\n  return !(type === \"div\" || type === \"span\")\n}\n"],"names":["allowedDisplayNames","extractDisplayName","type","displayName","name","isSemanticElement","element","React","isValidElement","props","role","includes"],"mappings":";;;;AAEA;AACA,IAAMA,mBAAmB,GAAG,CAAC,QAAQ,EAAE,YAAY,EAAE,kBAAkB,CAAC;AAElE,SAAUC,kBAAkBA,CAACC,IAA6B,EAAA;EAC9D,OAAOA,IAAI,CAACC,WAAW,IAAID,IAAI,CAACE,IAAI,IAAI,SAAS;AACnD;AAEA;;AAEG;AACI,IAAMC,iBAAiB,GAAG,SAAAA,CAC/BC,OAAkB,EAAA;EAElB,IAAI,CAACC,KAAK,CAACC,cAAc,CAACF,OAAO,CAAC,EAAE,OAAO,KAAK;EAExC,IAAAG,KAAK,GAAWH,OAAO,CAAAG,KAAlB;IAAEP,IAAI,GAAKI,OAAO,CAAAJ,IAAZ;EAEnB,IAAI,MAAM,IAAIO,KAAK,EAAE;IACnB,OAAOA,KAAK,CAACC,IAAI,KAAK,cAAc,IAAID,KAAK,CAACC,IAAI,KAAK,MAAM;EAC9D;EAED,IAAI,OAAOR,IAAI,KAAK,QAAQ,EAAE;;;IAG5B,IAAMC,WAAW,GAAGF,kBAAkB,CACpCC,IAA0C,CAC3C;IAED,OAAOF,mBAAmB,CAACW,QAAQ,CAACR,WAAW,CAAC;EACjD;EAED,OAAO,EAAED,IAAI,KAAK,KAAK,IAAIA,IAAI,KAAK,MAAM,CAAC;AAC7C,CAAA;;"}

package/dist/cjs/__future__/Tag/RemovableTag/RemovableTag.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var Tag = require('../Tag/Tag.cjs');
+var RemoveButton = require('./subcomponents/RemoveButton.cjs');
+var RemovableTag_module = require('./RemovableTag.module.scss.cjs');
+const RemovableTag = /*#__PURE__*/function () {
+  const RemovableTag = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      // Note: We've commented out color support for now, but may introduce it back in later
+      // if a good use case comes along.
+      // color = "gray",
+      removeButtonProps = _a.removeButtonProps,
+      restProps = tslib.__rest(_a, ["children", "classNameOverride", "removeButtonProps"]);
+    return React.createElement(Tag.Tag, tslib.__assign({
+      classNameOverride: classnames(classNameOverride, RemovableTag_module.removableTag)
+    }, restProps), children, React.createElement(RemoveButton.RemoveButton
+    // color={color}
+    , tslib.__assign({}, removeButtonProps)));
+  };
+  RemovableTag.displayName = "RemovableTag";
+  return RemovableTag;
+}();
+exports.RemovableTag = RemovableTag;
+//# sourceMappingURL=RemovableTag.cjs.map

package/dist/cjs/__future__/Tag/RemovableTag/RemovableTag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemovableTag.cjs","sources":["../../../../../src/__future__/Tag/RemovableTag/RemovableTag.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Tag, TagProps } from \"../Tag\"\nimport {\n  RemoveButton,\n  RemoveButtonBaseProps,\n} from \"./subcomponents/RemoveButton\"\nimport styles from \"./RemovableTag.module.scss\"\n\nexport type RemovableTagProps = {\n  removeButtonProps: RemoveButtonBaseProps\n} & Omit<TagProps, \"color\" | \"icon\">\n\nexport const RemovableTag = ({\n  children,\n  classNameOverride,\n  // Note: We've commented out color support for now, but may introduce it back in later\n  // if a good use case comes along.\n  // color = \"gray\",\n  removeButtonProps,\n  ...restProps\n}: RemovableTagProps): JSX.Element => (\n  <Tag\n    classNameOverride={classNames(classNameOverride, styles.removableTag)}\n    // color={color}\n    {...restProps}\n  >\n    {children}\n    <RemoveButton\n      // color={color}\n      {...removeButtonProps}\n    />\n  </Tag>\n)\n\nRemovableTag.displayName = \"RemovableTag\"\n"],"names":["RemovableTag","_a","children","classNameOverride","removeButtonProps","restProps","__rest","React","createElement","Tag","__assign","classNames","styles","removableTag","RemoveButton","displayName"],"mappings":";;;;;;;;MAaaA,YAAY;EAAA,MAAZA,YAAY,GAAG,SAAAA,CAACC,EAQT,EAAA;IAPlB,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRC,iBAAiB,GAAAF,EAAA,CAAAE,iBAAA;;;;MAIjBC,iBAAiB,GAAAH,EAAA,CAAAG,iBAAA;MACdC,SAAS,GAAAC,KAAA,CAAAA,MAAA,CAAAL,EAAA,EAPe,sDAQ5B,CADa;IACwB,OACpCM,KAAA,CAAAC,aAAA,CAACC,GAAG,CAAAA,GAAA,EAAAC,KAAA,CAAAA,QAAA,CAAA;MACFP,iBAAiB,EAAEQ,UAAU,CAACR,iBAAiB,EAAES,mBAAM,CAACC,YAAY;IAAC,GAEjER,SAAS,CAAA,EAEZH,QAAQ,EACTK,KAAA,CAAAC,aAAA,CAACM,YAAY,CAAAA;;yBAEPV,iBAAiB,CAAA,CACrB,CACE;GACP;EAEDJ,YAAY,CAACe,WAAW,GAAG,cAAc;EAAA,OAtB5Bf,YAAY;AAAA;"}

package/dist/cjs/__future__/Tag/RemovableTag/RemovableTag.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "removableTag": "RemovableTag-module_removableTag__IwJHj"
+};
+module.exports = styles;
+//# sourceMappingURL=RemovableTag.module.scss.cjs.map

package/dist/cjs/__future__/Tag/RemovableTag/RemovableTag.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemovableTag.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveButton.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var RemoveTagIcon = require('./RemoveTagIcon.cjs');
+var RemoveButton_module = require('./RemoveButton.module.scss.cjs');
+const RemoveButton = /*#__PURE__*/function () {
+  const RemoveButton = function (_a) {
+    var classNameOverride = _a.classNameOverride,
+      // color = "gray",
+      ariaLabel = _a.ariaLabel,
+      onClick = _a.onClick,
+      restProps = tslib.__rest(_a, ["classNameOverride", "ariaLabel", "onClick"]);
+    return React.createElement("button", tslib.__assign({
+      type: "button",
+      "aria-label": ariaLabel,
+      className: classnames(RemoveButton_module.removeButton, classNameOverride),
+      onClick: onClick
+    }, restProps), React.createElement(RemoveTagIcon.RemoveTagIcon, {
+      role: "presentation"
+    }));
+  };
+  RemoveButton.displayName = "RemoveButton";
+  return RemoveButton;
+}();
+exports.RemoveButton = RemoveButton;
+//# sourceMappingURL=RemoveButton.cjs.map

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveButton.cjs","sources":["../../../../../../src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes } from \"react\"\nimport classnames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { RemoveTagIcon } from \"./RemoveTagIcon\"\nimport styles from \"./RemoveButton.module.scss\"\n\n// type RemoveButtonColor =\n// | \"gray\"\n// | \"blue\"\n// | \"green\"\n// | \"yellow\"\n// | \"orange\"\n// | \"red\"\n// | \"purple\"\n\nexport type RemoveButtonBaseProps = {\n  // color?: RemoveButtonColor\n  ariaLabel: string\n  onClick: () => void\n}\nexport type RemoveButtonProps = OverrideClassName<\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\" | \"color\"> &\n    RemoveButtonBaseProps\n>\n\nexport const RemoveButton = ({\n  classNameOverride,\n  // color = \"gray\",\n  ariaLabel,\n  onClick,\n  ...restProps\n}: RemoveButtonProps): JSX.Element => (\n  <button\n    type=\"button\"\n    aria-label={ariaLabel}\n    className={classnames(styles.removeButton, classNameOverride)}\n    onClick={onClick}\n    {...restProps}\n  >\n    <RemoveTagIcon role=\"presentation\" />\n  </button>\n)\n\nRemoveButton.displayName = \"RemoveButton\"\n"],"names":["RemoveButton","_a","classNameOverride","ariaLabel","onClick","restProps","__rest","React","type","className","classnames","styles","removeButton","createElement","RemoveTagIcon","role","displayName"],"mappings":";;;;;;;MAyBaA,YAAY;EAAA,MAAZA,YAAY,GAAG,SAAAA,CAACC,EAMT,EAAA;IALlB,IAAAC,iBAAiB,GAAAD,EAAA,CAAAC,iBAAA;;MAEjBC,SAAS,GAAAF,EAAA,CAAAE,SAAA;MACTC,OAAO,GAAAH,EAAA,CAAAG,OAAA;MACJC,SAAS,GAAAC,KAAA,CAAAA,MAAA,CAAAL,EAAA,EALe,6CAM5B,CADa;IACwB,OACpCM;MACEC,IAAI,EAAC,QAAQ;MACD,YAAA,EAAAL,SAAS;MACrBM,SAAS,EAAEC,UAAU,CAACC,mBAAM,CAACC,YAAY,EAAEV,iBAAiB,CAAC;MAC7DE,OAAO,EAAEA;IAAO,CAAA,EACZC,SAAS,CAAA,EAEbE,KAAC,CAAAM,aAAA,CAAAC,aAAa,CAAAA,aAAA;MAACC,IAAI,EAAC;IAAiB,CAAA,CAAA,CAC9B;GACV;EAEDf,YAAY,CAACgB,WAAW,GAAG,cAAc;EAAA,OAlB5BhB,YAAY;AAAA;"}

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var styles = {
+  "removeButton": "RemoveButton-module_removeButton__9yzxJ"
+};
+module.exports = styles;
+//# sourceMappingURL=RemoveButton.module.scss.cjs.map

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveButton.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var SVG = require('../../../../Icon/subcomponents/SVG/SVG.cjs');
+var RemoveTagIcon = function (props) {
+  var svgContent = React.createElement(React.Fragment, null, React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.97304 10.0337L5.05893 13.9478L6.11959 15.0085L10.0337 11.0944L13.9478 15.0085L15.0085 13.9478L11.0944 10.0337L15.0085 6.11959L13.9478 5.05893L10.0337 8.97304L6.11959 5.05893L5.05893 6.11959L8.97304 10.0337Z",
+    fill: "currentColor"
+  }));
+  return React.createElement(SVG.SVG, tslib.__assign({}, props, {
+    viewBox: "0 0 20 20"
+  }), svgContent);
+};
+exports.RemoveTagIcon = RemoveTagIcon;
+//# sourceMappingURL=RemoveTagIcon.cjs.map

package/dist/cjs/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveTagIcon.cjs","sources":["../../../../../../src/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { SVG, IconProps } from \"~components/Icon/subcomponents/SVG\"\n\nexport const RemoveTagIcon = (props: IconProps): JSX.Element => {\n  const svgContent = (\n    <>\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8.97304 10.0337L5.05893 13.9478L6.11959 15.0085L10.0337 11.0944L13.9478 15.0085L15.0085 13.9478L11.0944 10.0337L15.0085 6.11959L13.9478 5.05893L10.0337 8.97304L6.11959 5.05893L5.05893 6.11959L8.97304 10.0337Z\"\n        fill=\"currentColor\"\n      />\n    </>\n  )\n  return (\n    <SVG {...props} viewBox=\"0 0 20 20\">\n      {svgContent}\n    </SVG>\n  )\n}\n"],"names":["RemoveTagIcon","props","svgContent","React","createElement","Fragment","fillRule","clipRule","d","fill","SVG","__assign","viewBox"],"mappings":";;;;;AAGO,IAAMA,aAAa,GAAG,SAAAA,CAACC,KAAgB,EAAA;EAC5C,IAAMC,UAAU,GACdC,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAE,QAAA,EAAA,IAAA,EACEF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IACEE,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,mNAAmN;IACrNC,IAAI,EAAC;EACL,CAAA,CAAA,CAEL;EACD,OACEN,KAAA,CAAAC,aAAA,CAACM,GAAG,CAAAA,GAAA,EAAAC,KAAA,CAAAA,QAAA,CAAA,CAAA,CAAA,EAAKV,KAAK,EAAA;IAAEW,OAAO,EAAC;GAAW,CAAA,EAChCV,UAAU,CACP;AAEV,CAAA;"}

package/dist/cjs/__future__/Tag/{Tag.cjs → Tag/Tag.cjs}

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var Tag_module = require('./Tag.module.scss.cjs');
@@ -9,10 +10,11 @@ const Tag = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       icon = _a.icon,
       _b = _a.color,
-      color = _b === void 0 ? "gray" : _b;
-    return React.createElement("span", {
+      color = _b === void 0 ? "gray" : _b,
+      restProps = tslib.__rest(_a, ["children", "classNameOverride", "icon", "color"]);
+    return React.createElement("span", tslib.__assign({
       className: classnames(Tag_module.tag, Tag_module[color], classNameOverride)
-    }, icon && React.createElement("span", {
+    }, restProps), icon && React.createElement("span", {
       className: Tag_module.iconContainer
     }, icon), children);
   };

package/dist/cjs/__future__/Tag/Tag/Tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.cjs","sources":["../../../../../src/__future__/Tag/Tag/Tag.tsx"],"sourcesContent":["import React, { ReactNode, HTMLAttributes } from \"react\"\nimport classNames from \"classnames\"\nimport { OverrideClassName } from \"~types/OverrideClassName\"\nimport { TagColors } from \"./types\"\nimport styles from \"./Tag.module.scss\"\n\nexport type TagProps = {\n  children: ReactNode\n  color?: TagColors\n  icon?: React.ReactElement\n} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>\n\nexport const Tag = ({\n  children,\n  classNameOverride,\n  icon,\n  color = \"gray\",\n  ...restProps\n}: TagProps): JSX.Element => (\n  <span\n    className={classNames(styles.tag, styles[color], classNameOverride)}\n    {...restProps}\n  >\n    {icon && <span className={styles.iconContainer}>{icon}</span>}\n    {children}\n  </span>\n)\n\nTag.displayName = \"Tag\"\n"],"names":["Tag","_a","children","classNameOverride","icon","_b","color","restProps","__rest","React","createElement","__assign","className","classNames","styles","tag","iconContainer","displayName"],"mappings":";;;;;;MAYaA,GAAG;EAAA,MAAHA,GAAG,GAAG,SAAAA,CAACC,EAMT,EAAA;IALT,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA;MACRC,iBAAiB,GAAAF,EAAA,CAAAE,iBAAA;MACjBC,IAAI,GAAAH,EAAA,CAAAG,IAAA;MACJC,aAAc;MAAdC,KAAK,mBAAG,MAAM,GAAAD,EAAA;MACXE,SAAS,GAAAC,KAAA,CAAAA,MAAA,CAAAP,EAAA,EALM,kDAMnB,CADa;IACe,OAC3BQ,KACE,CAAAC,aAAA,CAAA,MAAA,EAAAC,KAAAA,CAAAA,QAAA,CAAA;MAAAC,SAAS,EAAEC,UAAU,CAACC,UAAM,CAACC,GAAG,EAAED,UAAM,CAACR,KAAK,CAAC,EAAEH,iBAAiB;IAAC,GAC/DI,SAAS,CAAA,EAEZH,IAAI,IAAIK;MAAMG,SAAS,EAAEE,UAAM,CAACE;IAAgB,CAAA,EAAAZ,IAAI,CAAQ,EAC5DF,QAAQ,CACJ;GACR;EAEDF,GAAG,CAACiB,WAAW,GAAG,KAAK;EAAA,OAhBVjB,GAAG;AAAA;"}

package/dist/cjs/__future__/Tag/Tag/Tag.module.scss.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var styles = {
+  "tag": "Tag-module_tag__Ef8Iu",
+  "iconContainer": "Tag-module_iconContainer__tEPTW",
+  "gray": "Tag-module_gray__4YmDZ",
+  "blue": "Tag-module_blue__CjyTI",
+  "green": "Tag-module_green__uC0TU",
+  "yellow": "Tag-module_yellow__wEk5Z",
+  "orange": "Tag-module_orange__V-KdG",
+  "red": "Tag-module_red__cg1Rf",
+  "purple": "Tag-module_purple__OR2Jt"
+};
+module.exports = styles;
+//# sourceMappingURL=Tag.module.scss.cjs.map

package/dist/cjs/dts/BrandMoment/_docs/ExampleHeaders.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const MinimalBasic: () => JSX.Element;
 export declare const MinimalCustomerFocused: () => JSX.Element;
 export declare const FakeNavBar: () => JSX.Element;

package/dist/cjs/dts/Button/GenericButton/GenericButton.d.ts

@@ -8,6 +8,7 @@ export type CustomButtonProps = {
     onFocus?: (e: FocusEvent<HTMLElement>) => void;
     onBlur?: (e: FocusEvent<HTMLElement>) => void;
     children?: React.ReactNode;
+    "data-testid"?: string;
 };
 export type ButtonFormAttributes = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "form" | "formAction" | "formMethod" | "formEncType" | "formTarget" | "formNoValidate">;
 export type GenericProps = {

package/dist/cjs/dts/Button/IconButton/IconButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GenericProps, ButtonFormAttributes, WorkingProps, WorkingUndefinedProps, ButtonBadgeProps } from "../GenericButton";
 export type IconButtonProps = GenericProps & ButtonFormAttributes & (WorkingProps | WorkingUndefinedProps) & {
     label: string;

package/dist/cjs/dts/Button/index.d.ts

@@ -1,5 +1,3 @@
 export type { CustomButtonProps } from "./GenericButton";
 export * from "./Button";
 export * from "./IconButton";
-export * from "./PaginationLink";
-export * from "./DirectionalLink";

package/dist/cjs/dts/Calendar/CalendarPopover/CalendarPopover.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from "react";
+import { Options } from "@popperjs/core";
+import { OverrideClassName } from "../../types/OverrideClassName";
+export type CalendarPopoverProps = {
+    children: React.ReactNode;
+    referenceElement: HTMLElement | null;
+    popperOptions?: Partial<Options>;
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+/**
+ * Only for use with Calendar components.
+ * @todo: Replace with Popover when we have a reusable one.
+ */
+export declare const CalendarPopover: {
+    ({ children, referenceElement, popperOptions, classNameOverride, ...restProps }: CalendarPopoverProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/Calendar/CalendarPopover/index.d.ts

@@ -0,0 +1 @@
+export * from "./CalendarPopover";

package/dist/cjs/dts/Calendar/CalendarRange/CalendarRange.d.ts

@@ -0,0 +1,12 @@
+import { DayPickerRangeProps } from "react-day-picker";
+import { OverrideClassName } from "../../types/OverrideClassName";
+export type CalendarRangeElement = HTMLDivElement;
+export type CalendarRangeProps = {
+    id?: string;
+    onMount?: (calendarElement: CalendarRangeElement) => void;
+    hasDivider?: boolean;
+} & OverrideClassName<Omit<DayPickerRangeProps, "mode">>;
+export declare const CalendarRange: {
+    ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, locale, ...restProps }: CalendarRangeProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/Calendar/CalendarRange/index.d.ts

@@ -0,0 +1 @@
+export * from "./CalendarRange";

package/dist/cjs/dts/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -0,0 +1,11 @@
+import { DayPickerSingleProps } from "react-day-picker";
+import { OverrideClassName } from "../../types/OverrideClassName";
+export type CalendarSingleElement = HTMLDivElement;
+export type CalendarSingleProps = {
+    id?: string;
+    onMount?: (calendarElement: CalendarSingleElement) => void;
+} & OverrideClassName<Omit<DayPickerSingleProps, "mode">>;
+export declare const CalendarSingle: {
+    ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
+    displayName: string;
+};

package/dist/cjs/dts/Calendar/CalendarSingle/index.d.ts

@@ -0,0 +1 @@
+export * from "./CalendarSingle";