@kaizen/components 1.47.0 → 1.47.1

package/dist/esm/utils/useResizeObserver.mjs

@@ -0,0 +1,55 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+var defaultCallback = function (entry) {
+  return entry;
+};
+/**
+ * Hook for observing changes to a DOM element via ResizeObserver.
+ *
+ * @param {resolveEntryCallback} resolveEntry - Callback for resolving the
+ * desired value from each ResizeObserverEntry emitted by ResizeObserver
+ * @return {Array} An array containing a ref for binding to the observed DOM
+ * element, and the current value of the callback-resolved ResizeObserverEntry
+ * @callback resolveEntryCallback
+ */
+var useResizeObserver = function (resolveEntry) {
+  if (resolveEntry === void 0) {
+    resolveEntry = defaultCallback;
+  }
+  var destroyResizeObserverRef = useRef(undefined);
+  var _a = useState(undefined),
+    dimensions = _a[0],
+    setDimensions = _a[1];
+  var resolveEntryRef = useRef(resolveEntry);
+  var ref = useCallback(function (node) {
+    if (node) {
+      var resizeObserver_1 = new ResizeObserver(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+          var entry = entries_1[_i];
+          var value = resolveEntryRef.current(entry);
+          if (value) {
+            setDimensions(value);
+          }
+        }
+      });
+      resizeObserver_1.observe(node);
+      destroyResizeObserverRef.current = function () {
+        resizeObserver_1.disconnect();
+      };
+    }
+  }, [destroyResizeObserverRef, setDimensions, resolveEntryRef]);
+  // Ensure the resolveEntryRef has the latest value
+  useEffect(function () {
+    resolveEntryRef.current = resolveEntry;
+  }, [resolveEntry]);
+  // Destroy the observer on unmount
+  useEffect(function () {
+    return function () {
+      if (destroyResizeObserverRef.current) {
+        destroyResizeObserverRef.current();
+      }
+    };
+  }, []);
+  return [ref, dimensions];
+};
+export { useResizeObserver };

package/dist/styles.css

@@ -0,0 +1 @@
+@layer tokens, normalize, reset;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#44a289;--color-green-500-rgb:68,162,137;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:700;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:700;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:700;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:700;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:700;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}

package/dist/types/Avatar/Avatar.d.ts

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from "react";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type AvatarSizes = "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type BaseAvatarProps = {
+    /**
+     * We use this for the alt text of the avatar, and to derive intials when user has no avatar image.
+     */
+    fullName?: string;
+    /**
+     * There are 5 fixed avatar sizes. `"small"` will remove border and box shadow to save space.
+     */
+    size?: AvatarSizes;
+    /**
+     * Src for the avatar img tag - if not passed we will derive initials from the full name.
+     * Note that the fullName prop will be used as the alt text.
+     */
+    avatarSrc?: string;
+    /**
+     * Default behaviour when an avatarSrc is not provided is to generate initials from the username.
+     * This disables this feature and shows the generic avatar.
+     * Enable this prop when there is no specific individual or group identified.
+     */
+    disableInitials?: boolean;
+    /**
+     * Renders Company Avatar variant - If true `fullName` and `avatarSrc` will be strictly typed.
+     */
+    isCompany?: boolean;
+} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
+export type GenericAvatarProps = BaseAvatarProps & {
+    isCompany?: false;
+    /**
+     * Shows a different background colour if the avatar is the current user and does not have a avatar img.
+     * @default "true"
+     */
+    isCurrentUser?: boolean;
+};
+export type CompanyAvatarProps = BaseAvatarProps & {
+    fullName: string;
+    avatarSrc: string;
+    disableInitials?: undefined;
+    isCompany: true;
+    isCurrentUser?: undefined;
+};
+export type AvatarProps = GenericAvatarProps | CompanyAvatarProps;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar--docs Storybook}
+ */
+export declare const Avatar: ({ fullName, size, avatarSrc, disableInitials, isCompany, isCurrentUser, classNameOverride, ...restProps }: AvatarProps) => JSX.Element;
+export {};

package/dist/types/Avatar/index.d.ts

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

package/dist/types/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from "react";
+import { CompanyAvatarProps, GenericAvatarProps } from "../Avatar";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type AvatarGroupAvatarProps = Omit<GenericAvatarProps, "size"> | Omit<CompanyAvatarProps, "size">;
+export type AvatarGroupSize = "small" | "medium" | "large";
+export type AvatarList = [AvatarGroupAvatarProps, ...AvatarGroupAvatarProps[]];
+export type AvatarGroupProps = {
+    /**
+     * There are 3 fixed sizes available. `"small"` will remove border and box shadow to save space.
+     * @default "medium"
+     */
+    size?: AvatarGroupSize;
+    /**
+     * If the length of Avatars exceeds the `maxVisible` a counter token will render
+     * @default 2
+     */
+    maxVisible: 2 | 3 | 4 | 5 | 6;
+    /**
+     * Takes a array of `AvatarProps` that must have at least item.
+     * Note that 'size' is omitted from the `AvatarProps` type so it will throw a type error if size is provided.
+     * */
+    avatars: AvatarList;
+} & OverrideClassName<HTMLAttributes<HTMLUListElement>>;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar-group--docs Storybook}
+ */
+export declare const AvatarGroup: ({ size, maxVisible, avatars, classNameOverride, ...restProps }: AvatarGroupProps) => JSX.Element;

package/dist/types/AvatarGroup/_docs/example-data.d.ts

@@ -0,0 +1,8 @@
+import { AvatarGroupAvatarProps, AvatarList } from "../AvatarGroup";
+export declare const EXAMPLE_USER_1: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_2: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_3: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_4: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_5: AvatarGroupAvatarProps;
+export declare const EXAMPLE_USER_6: AvatarGroupAvatarProps;
+export declare const AVATARS: AvatarList;

package/dist/types/AvatarGroup/index.d.ts

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

package/dist/types/Badge/Badge.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from "react";
+import { OverrideClassName } from "../types/OverrideClassName";
+type BadgeCommonProps = {
+    children?: string;
+    /**
+     * The "dark" variant is no longer in the UI kit
+     */
+    variant?: "default" | "active" | "dark";
+    /**
+     * renders reversed colors. Use on purple background
+     */
+    reversed?: boolean;
+    /**
+     * Supports "small" and "large" sizes - defaults to "small"
+     */
+    size?: "small" | "large";
+} & OverrideClassName<HTMLAttributes<HTMLSpanElement>>;
+type DotProps = Omit<BadgeCommonProps, "variant"> & {
+    children?: never;
+    variant: "dot";
+};
+export type BadgeProps = BadgeCommonProps | DotProps;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857333/Badge Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-badge--docs Storybook}
+ */
+export declare const Badge: {
+    ({ children, variant, reversed, size, classNameOverride, ...restProps }: BadgeProps): JSX.Element;
+    displayName: string;
+};
+export declare const BadgeAnimated: (props: BadgeProps) => JSX.Element;
+export {};

package/dist/types/Badge/index.d.ts

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

package/dist/types/Brand/Brand.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type BrandProps = {
+    variant: "logo-horizontal" | "logo-vertical" | "enso" | "collective-intelligence";
+    alt: string;
+    reversed?: boolean;
+} & OverrideClassName<HTMLAttributes<HTMLElement>>;
+export declare const Brand: {
+    ({ variant, alt, reversed, classNameOverride, ...restProps }: BrandProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/Brand/index.d.ts

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

package/dist/types/BrandMoment/BrandMoment.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, ReactElement, HTMLAttributes } from "react";
+import { ButtonProps } from "../Button";
+import { SceneProps } from "../Illustration";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type BrandMomentProps = {
+    mood: "informative" | "positive" | "negative";
+    illustration: ReactElement<SceneProps>;
+    header: ReactNode;
+    body?: ReactNode;
+    primaryAction?: ButtonProps;
+    secondaryAction?: ButtonProps;
+    text: {
+        title: ReactNode;
+        subtitle?: ReactNode;
+        body?: ReactNode;
+        footer?: ReactNode;
+    };
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061589/Brand+Moment Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-brand-moment--docs Storybook}
+ */
+export declare const BrandMoment: {
+    ({ mood, illustration, header, body, primaryAction, secondaryAction, text, classNameOverride, ...restProps }: BrandMomentProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/BrandMoment/_docs/ExampleHeaders.d.ts

@@ -0,0 +1,3 @@
+export declare const MinimalBasic: () => JSX.Element;
+export declare const MinimalCustomerFocused: () => JSX.Element;
+export declare const FakeNavBar: () => JSX.Element;

package/dist/types/BrandMoment/index.d.ts

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

package/dist/types/Button/Button/Button.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { GenericButtonProps, ButtonRef } from "../GenericButton";
+export type ButtonProps = GenericButtonProps;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
+ */
+export declare const Button: React.ForwardRefExoticComponent<GenericButtonProps & React.RefAttributes<ButtonRef | undefined>>;

package/dist/types/Button/Button/index.d.ts

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

package/dist/types/Button/GenericButton/GenericButton.d.ts

@@ -0,0 +1,81 @@
+import React, { ComponentType, MouseEvent, FocusEvent } from "react";
+export type CustomButtonProps = {
+    id?: string;
+    className: string;
+    href?: string;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent<any>) => void;
+    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 = {
+    id?: string;
+    reversed?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    href?: string;
+    newTabAndIUnderstandTheAccessibilityImplications?: boolean;
+    disableTabFocusAndIUnderstandTheAccessibilityImplications?: boolean;
+    onFocus?: (e: FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLElement>) => void;
+    component?: ComponentType<CustomButtonProps>;
+    classNameOverride?: string;
+};
+export type WorkingProps = {
+    working: true;
+    workingLabel: string;
+    workingLabelHidden?: boolean;
+};
+export type WorkingUndefinedProps = {
+    working?: false;
+};
+export type ButtonBadgeProps = {
+    text: string;
+    animateChange?: boolean;
+    variant?: "default" | "dark" | "active";
+    reversed?: boolean;
+};
+export type RenderProps = GenericButtonProps & {
+    additionalContent?: React.ReactNode;
+    iconButton?: boolean;
+    directionalLink?: boolean;
+    paginationLink?: boolean;
+    isActive?: boolean;
+};
+export type ButtonRef = {
+    focus: () => void;
+};
+export type SharedButtonProps = {
+    label: string;
+    primary?: boolean;
+    destructive?: boolean;
+    secondary?: boolean;
+    /** @default "regular" */
+    size?: "small" | "regular";
+    badge?: ButtonBadgeProps;
+    type?: "submit" | "reset" | "button";
+    fullWidth?: boolean;
+    iconPosition?: "start" | "end";
+    icon?: JSX.Element;
+    disabled?: boolean;
+};
+export type WorkingButtonProps = WorkingProps | WorkingUndefinedProps;
+export type BaseButtonProps = GenericProps & ButtonFormAttributes & {
+    label: string;
+    primary?: boolean;
+    destructive?: boolean;
+    secondary?: boolean;
+    /** @default "regular" */
+    size?: "small" | "regular";
+    badge?: ButtonBadgeProps;
+    type?: "submit" | "reset" | "button";
+    fullWidth?: boolean;
+    iconPosition?: "start" | "end";
+    icon?: JSX.Element;
+    disabled?: boolean;
+};
+export type GenericButtonProps = BaseButtonProps & WorkingButtonProps;
+export declare const GenericButton: React.ForwardRefExoticComponent<RenderProps & React.RefAttributes<ButtonRef | undefined>>;

package/dist/types/Button/GenericButton/index.d.ts

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

package/dist/types/Button/IconButton/IconButton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { BaseButtonProps, WorkingButtonProps, ButtonRef } from "../GenericButton";
+export type IconButtonProps = Omit<BaseButtonProps, "iconPosition"> & WorkingButtonProps;
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<ButtonRef | undefined>>;

package/dist/types/Button/IconButton/index.d.ts

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

package/dist/types/Button/index.d.ts

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

package/dist/types/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import React, { HTMLAttributes } from "react";
+import { FilterButtonBaseProps } from "../Filter/FilterButton/subcomponents/FilterButtonBase";
+import { TooltipProps } from "../Tooltip";
+import { OverrideClassName } from "../types/OverrideClassName";
+export type ButtonGroupProps = {
+    children: React.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React.ReactElement<FilterButtonBaseProps | TooltipProps>>;
+} & Omit<OverrideClassName<HTMLAttributes<HTMLDivElement>>, "children">;
+export declare const ButtonGroup: {
+    ({ children, classNameOverride, ...restProps }: ButtonGroupProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/ButtonGroup/index.d.ts

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

package/dist/types/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/types/Calendar/CalendarPopover/index.d.ts

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

package/dist/types/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/types/Calendar/CalendarRange/index.d.ts

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

package/dist/types/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/types/Calendar/CalendarSingle/index.d.ts

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

package/dist/types/Calendar/LegacyCalendarRange/LegacyCalendarRange.d.ts

@@ -0,0 +1,17 @@
+import type { Locale } from "date-fns";
+import { DateRange, DayClickEventHandler, Matcher } from "react-day-picker";
+import { DayOfWeek } from "../enums";
+export type LegacyCalendarRangeElement = HTMLDivElement;
+export type LegacyCalendarRangeProps = {
+    classNameOverride?: string;
+    defaultMonth?: Date;
+    weekStartsOn?: DayOfWeek;
+    disabledDays?: Matcher[];
+    selectedRange?: DateRange;
+    locale: Locale;
+    onDayChange: DayClickEventHandler;
+};
+export declare const LegacyCalendarRange: {
+    ({ classNameOverride, defaultMonth, weekStartsOn, disabledDays, selectedRange, locale, onDayChange, }: LegacyCalendarRangeProps): JSX.Element;
+    displayName: string;
+};

package/dist/types/Calendar/LegacyCalendarRange/index.d.ts

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

package/dist/types/Calendar/_docs/controls/defaultMonthControls.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from "@storybook/react";
+export declare const defaultMonthControls: Partial<ArgTypes>;

package/dist/types/Calendar/_docs/controls/weekStartsOnControls.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from "@storybook/react";
+export declare const weekStartsOnControls: Partial<ArgTypes>;

package/dist/types/Calendar/baseCalendarClassNames.d.ts

@@ -0,0 +1,2 @@
+import { ClassNames } from "react-day-picker";
+export declare const baseCalendarClassNames: ClassNames;

package/dist/types/Calendar/enums.d.ts

@@ -0,0 +1,15 @@
+export declare const DayOfWeek: {
+    readonly Sun: 0;
+    readonly Mon: 1;
+    readonly Tue: 2;
+    readonly Wed: 3;
+    readonly Thu: 4;
+    readonly Fri: 5;
+    readonly Sat: 6;
+};
+export type DayOfWeek = (typeof DayOfWeek)[keyof typeof DayOfWeek];
+export declare const DateFormat: {
+    readonly Numeral: "P";
+    readonly Text: "PP";
+};
+export type DateFormat = (typeof DateFormat)[keyof typeof DateFormat];

package/dist/types/Calendar/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./CalendarSingle";
+export * from "./CalendarRange";
+export * from "./enums";
+export * from "./types";
+export * from "./utils";

package/dist/types/Calendar/types.d.ts

@@ -0,0 +1,37 @@
+import { DateInterval, DateRange, DayPickerProps } from "react-day-picker";
+import { DayOfWeek } from "./enums";
+export type { DateInterval, DateRange };
+export type DisabledDays = DayPickerProps["disabled"];
+export type DisabledDayMatchers = {
+    /**
+     * Accepts an array of singluar dates and disables them.
+     * e.g. [new Date(2022, 1, 12), new Date(2022, 1, 25)]
+     */
+    disabledDates?: Date[];
+    /**
+     * Accepts an array of DayOfWeek values and disables those days throughout
+     * the calendar.
+     * e.g. [DayOfWeek.Mon, DayOfWeek.Tue]
+     */
+    disabledDaysOfWeek?: DayOfWeek[];
+    /**
+     * Accepts an object with a `from` and `to` date. Disables any date
+     * inside of that range, including the specified dates.
+     * { from: new Date(2022, 1, 12), to: new Date(2022, 1, 16) }
+     */
+    disabledRange?: DateRange;
+    /**
+     * Accepts an object with a `before` and `after` date. Disables any date
+     * inside of that range, excluding the specified dates.
+     * { after: new Date(2022, 1, 12), before: new Date(2022, 1, 16) }
+     */
+    disabledBeforeAfter?: DateInterval;
+    /**
+     * Accepts single date and disables all days before it.
+     * */
+    disabledBefore?: Date;
+    /**
+     * Accepts single date and disables all days after it.
+     */
+    disabledAfter?: Date;
+};

package/dist/types/Calendar/utils/calculateDisabledDays.d.ts

@@ -0,0 +1,3 @@
+import { Matcher } from "react-day-picker";
+import { DisabledDayMatchers } from "../types";
+export declare const calculateDisabledDays: ({ disabledDates, disabledDaysOfWeek, disabledRange, disabledBeforeAfter, disabledBefore, disabledAfter, }: DisabledDayMatchers) => Matcher[];

package/dist/types/Calendar/utils/formatDateAsNumeral.d.ts

@@ -0,0 +1,2 @@
+import { Locale } from "date-fns";
+export declare const formatDateAsNumeral: (date: Date, locale: Locale) => string;

package/dist/types/Calendar/utils/formatDateAsText.d.ts

@@ -0,0 +1,3 @@
+import { Locale } from "date-fns";
+import { DisabledDays } from "../types";
+export declare const formatDateAsText: (date: Date, disabledDays: DisabledDays, locale: Locale) => string;

package/dist/types/Calendar/utils/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./calculateDisabledDays";
+export * from "./formatDateAsNumeral";
+export * from "./formatDateAsText";
+export * from "./isDisabledDate";
+export * from "./isInvalidDate";
+export * from "./isValidWeekStartsOn";
+export * from "./isSelectingDayInCalendar";
+export * from "./parseDateAsTextOrNumeral";
+export * from "./parseDateFromNumeralFormatValue";
+export * from "./parseDateFromTextFormatValue";
+export * from "./setFocusInCalendar";

package/dist/types/Calendar/utils/isDisabledDate.d.ts

@@ -0,0 +1,2 @@
+import { DisabledDays } from "../types";
+export declare const isDisabledDate: (date: Date, disabledDays: DisabledDays) => boolean;

package/dist/types/Calendar/utils/isInvalidDate.d.ts

@@ -0,0 +1 @@
+export declare const isInvalidDate: (parsedDate: Date) => boolean;

package/dist/types/Calendar/utils/isSelectingDayInCalendar.d.ts

@@ -0,0 +1 @@
+export declare const isSelectingDayInCalendar: (target: (EventTarget & Element) | null) => boolean;

package/dist/types/Calendar/utils/isValidWeekStartsOn.d.ts

@@ -0,0 +1,2 @@
+import { DayOfWeek } from "../enums";
+export declare const isValidWeekStartsOn: (day: DayOfWeek | undefined) => day is 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;

package/dist/types/Calendar/utils/parseDateAsTextOrNumeral.d.ts

@@ -0,0 +1,2 @@
+import type { Locale } from "date-fns";
+export declare const parseDateAsTextOrNumeral: (value: string, locale: Locale) => Date;

package/dist/types/Calendar/utils/parseDateFromNumeralFormatValue.d.ts

@@ -0,0 +1,2 @@
+import { Locale } from "date-fns";
+export declare const parseDateFromNumeralFormatValue: (value: string, locale: Locale) => Date;

package/dist/types/Calendar/utils/parseDateFromTextFormatValue.d.ts

@@ -0,0 +1,2 @@
+import { Locale } from "date-fns";
+export declare const parseDateFromTextFormatValue: (value: string, locale: Locale) => Date;

package/dist/types/Calendar/utils/setFocusInCalendar.d.ts

@@ -0,0 +1,3 @@
+import { CalendarRangeElement } from "../CalendarRange";
+import { CalendarSingleElement } from "../CalendarSingle";
+export declare const setFocusInCalendar: (calendarElement: CalendarSingleElement | CalendarRangeElement, selectedDay: Date | undefined) => void;