@kaizen/components 1.5.1 → 1.6.3

package/dist/index.d.ts

@@ -1,12 +1,346 @@
-export { a as KaizenProvider, K as KaizenProviderProps } from './KaizenProvider-44a90581.js';
-export { T as ThemeContext, a as ThemeProvider, u as useTheme } from './ThemeProvider-9852214a.js';
-export { ThemeManager } from './KaizenProvider/ThemeProvider/ThemeManager.js';
-export { defaultTheme } from './KaizenProvider/ThemeProvider/themes/index.js';
-export { a as Filter, F as FilterProps } from './Filter-15d87e2c.js';
-export { a as FilterContents, F as FilterContentsProps } from './FilterContents-8d959c14.js';
-export { FilterTriggerRef } from './Filter/types.js';
-export { default as heartTheme } from './KaizenProvider/ThemeProvider/themes/heart.js';
-export { CSSVariableTheme, DeepMapObjectLeafs, Theme, ThemeKey, TypographyFont } from './KaizenProvider/ThemeProvider/themes/types.js';
-import 'react';
-import '@kaizen/design-tokens';
-import './types.js';
+/// <reference types="react" />
+import React$1, { CSSProperties, Context, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+import * as _kaizen_design_tokens from '@kaizen/design-tokens';
+import { Theme as Theme$1 } from '@kaizen/design-tokens';
+import { TooltipProps } from '@kaizen/draft-tooltip';
+
+/**
+ * Use this class to set and apply themes, and to access or subscribe to the currently active one.
+ * This class fulfills the idea of theming and runtime theme switching by relying on CSS variables,
+ * and the ability to update them in JavaScript - a framework agnostic method.
+ *
+ * It works by converting a Theme interface to a flattened map of CSS variable keys and values, then calling `document.documentElement.style.setProperty(key, value)`.
+ */
+declare class ThemeManager<Theme extends Theme$1 = Theme$1> {
+    private themeChangeListeners;
+    private theme;
+    private rootElement;
+    private rootElementId;
+    constructor(theme: Theme, rootElementId?: string, apply?: boolean);
+    getRootElement: () => HTMLElement | null;
+    getRootElementId: () => string;
+    getCurrentTheme: () => Theme;
+    setRootElement: (element: HTMLElement) => void;
+    setRootElementId: (rootElementId: string) => string;
+    setAndApplyTheme: (theme: Theme, force?: boolean) => void;
+    addThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    removeThemeChangeListener: (listener: (theme: Theme) => void) => void;
+    applyCurrentTheme: () => void;
+    private notifyThemeChangeListeners;
+}
+
+/**
+ * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
+ * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
+ * For example:
+ * ```ts
+ * type Font = {
+ *   fontSize: `${number}rem`,
+ *
+ *  }
+ * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
+ * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
+ *
+ * ```
+ * */
+type KaizenCSSProperties = CSSProperties;
+type Hex = string;
+type TypographyFont = {
+    fontFamily: KaizenCSSProperties["fontFamily"];
+    fontWeight: KaizenCSSProperties["fontWeight"];
+    fontSize: KaizenCSSProperties["fontSize"];
+    lineHeight: KaizenCSSProperties["lineHeight"];
+    letterSpacing: KaizenCSSProperties["letterSpacing"];
+};
+type ThemeKey = "heart" | "custom";
+type Theme = {
+    themeKey: ThemeKey;
+    border: {
+        solid: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        dashed: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+        borderless: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        focusRing: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+    };
+    animation: {
+        easingFunction: {
+            easeInOut: string;
+            easeIn: string;
+            easeOut: string;
+            linear: string;
+            bounceIn: string;
+            bounceOut: string;
+            bounceInOut: string;
+        };
+        duration: {
+            instant: string;
+            immediate: string;
+            rapid: string;
+            fast: string;
+            slow: string;
+            deliberate: string;
+        };
+    };
+    color: {
+        purple: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+            "800": Hex;
+        };
+        blue: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        green: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        yellow: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        red: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        orange: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        gray: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+        };
+        white: Hex;
+    };
+    dataViz: {
+        favorable: Hex;
+        unfavorable: Hex;
+    };
+    layout: {
+        contentMaxWidth: string;
+        contentMaxWidthWithSidebar: string;
+        contentSideMargin: string;
+        mobileActionsDrawerHeight: string;
+        navigationBarHeight: string;
+        breakpoints: {
+            medium: string;
+            large: string;
+        };
+    };
+    shadow: {
+        small: {
+            boxShadow: string;
+        };
+        large: {
+            boxShadow: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+        0: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        112: string;
+        128: string;
+        160: string;
+        200: string;
+        240: string;
+        280: string;
+        320: string;
+    };
+    typography: {
+        dataLarge: TypographyFont;
+        dataLargeUnits: TypographyFont;
+        dataMedium: TypographyFont;
+        dataMediumUnits: TypographyFont;
+        dataSmall: TypographyFont;
+        dataSmallUnits: TypographyFont;
+        display0: TypographyFont;
+        heading1: TypographyFont;
+        heading2: TypographyFont;
+        heading3: TypographyFont;
+        heading4: TypographyFont;
+        heading5: TypographyFont;
+        heading6: TypographyFont;
+        paragraphIntroLede: TypographyFont;
+        paragraphBody: TypographyFont;
+        paragraphSmall: TypographyFont;
+        paragraphExtraSmall: TypographyFont;
+        paragraphBold: {
+            fontWeight: KaizenCSSProperties["fontWeight"];
+        };
+        buttonPrimary: TypographyFont;
+        buttonSecondary: TypographyFont;
+    };
+};
+type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint | boolean | symbol | null | undefined | ((...params: any[]) => any) ? LeafType : T extends Record<any, any> ? {
+    [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>;
+} : T;
+/**
+ * Apologies for the complex types.
+ * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
+ * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
+ */
+type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
+
+declare const heartTheme: Theme;
+
+declare const defaultTheme: Theme;
+
+declare const ThemeContext: Context<Theme>;
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager?: ThemeManager<_kaizen_design_tokens.Theme> | undefined;
+    children: React$1.ReactNode;
+}) => JSX.Element;
+declare const useTheme: () => Theme;
+
+interface KaizenProviderProps {
+    children: React$1.ReactNode;
+    themeManager?: ThemeManager;
+}
+declare const KaizenProvider: {
+    ({ children, themeManager, }: KaizenProviderProps): JSX.Element;
+    displayName: string;
+};
+
+type OverrideClassName<T extends Record<string, any>> = Omit<T, "className"> & {
+    classNameOverride?: string;
+};
+
+type FilterTriggerRef = {
+    triggerRef?: React.RefObject<HTMLButtonElement>;
+};
+
+interface FilterProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactNode;
+    isOpen: boolean;
+    setIsOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    renderTrigger: (triggerProps: {
+        onClick: () => void;
+        isOpen: boolean;
+    }) => JSX.Element & {
+        ref?: React$1.RefObject<FilterTriggerRef>;
+    };
+}
+declare const Filter: {
+    ({ children, isOpen, setIsOpen, renderTrigger, classNameOverride, ...restProps }: FilterProps): JSX.Element;
+    displayName: string;
+};
+
+interface FilterContentsProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactNode;
+}
+declare const FilterContents: {
+    ({ children, classNameOverride, ...restProps }: FilterContentsProps): JSX.Element;
+    displayName: string;
+};
+
+interface FilterButtonBaseProps extends OverrideClassName<ButtonHTMLAttributes<HTMLButtonElement>> {
+    children: React$1.ReactNode;
+}
+
+interface FilterButtonProps extends Omit<FilterButtonBaseProps, "children"> {
+    label: string;
+    selectedValue?: string | JSX.Element;
+    isOpen?: boolean;
+}
+declare const FilterButton: React$1.ForwardRefExoticComponent<FilterButtonProps & React$1.RefAttributes<FilterTriggerRef>>;
+
+type DataAttributes = {
+    [key: `data-${string}`]: string | undefined;
+};
+
+interface ButtonGroupProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
+    children: React$1.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React$1.ReactElement<FilterButtonBaseProps | TooltipProps>>;
+}
+
+interface FilterButtonRemovableProps extends Omit<ButtonGroupProps, "children"> {
+    triggerButtonProps: FilterButtonProps & DataAttributes;
+    removeButtonProps: Partial<Omit<FilterButtonBaseProps, "children">> & DataAttributes & {
+        tooltipText?: string;
+    };
+}
+type FilterButtonRemovableRefs = FilterTriggerRef & {
+    removeButtonRef?: React$1.RefObject<HTMLButtonElement>;
+};
+declare const FilterButtonRemovable: React$1.ForwardRefExoticComponent<FilterButtonRemovableProps & React$1.RefAttributes<FilterButtonRemovableRefs>>;
+
+export { CSSVariableTheme, DeepMapObjectLeafs, Filter, FilterButton, FilterButtonProps, FilterButtonRemovable, FilterButtonRemovableProps, FilterButtonRemovableRefs, FilterContents, FilterContentsProps, FilterProps, FilterTriggerRef, KaizenProvider, KaizenProviderProps, Theme, ThemeContext, ThemeKey, ThemeManager, ThemeProvider, TypographyFont, defaultTheme, heartTheme, useTheme };

package/dist/styles.css

@@ -1,114 +1 @@
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(1 104 179 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(1 104 179 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  
-}
-
-.fixed {
-  position: fixed
-}
-
-.inline-block {
-  display: inline-block
-}
-
-.contents {
-  display: contents
-}
-
-.bg-green-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(143 219 199 / var(--tw-bg-opacity))
-}
-
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
+.ExampleComponent-module_exampleComponent__GfCkW{color:blue}.FilterPopover-module_filterPopover__OgOEM{background-color:var(--color-white,#fff);border-radius:var(--border-borderless-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 8px 40px rgba(0,0,0,.08),0 3px 9px rgba(0,0,0,.1));display:inline-flex;z-index:1010}.FilterContents-module_filterContents__uNUpd{padding:var(--spacing-md,1.5rem)}.SVG-module_icon__FE6iP{display:inline-block;height:20px;width:20px}.SVG-module_icon__FE6iP>use{pointer-events:none}.SVG-module_inheritSize__wiKMe{display:block;height:inherit;width:inherit}@media screen and (-ms-high-contrast:active){.SVG-module_icon__FE6iP{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__FE6iP{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__FE6iP{color:#000}}.SVG-module_interactiveIconWrapper__ACcob{cursor:pointer}.SVG-module_interactiveIconWrapper__ACcob .SVG-module_icon__FE6iP{opacity:.7;transition:var(--animation-duration-fast,.3s) opacity}.SVG-module_interactiveIconWrapper__ACcob.SVG-module_disabled__WB5BU .SVG-module_icon__FE6iP,.SVG-module_interactiveIconWrapper__ACcob:disabled .SVG-module_icon__FE6iP{opacity:.3}.SVG-module_interactiveIconWrapper__ACcob:not(:disabled):not(.SVG-module_disabled__WB5BU).SVG-module_active__R9jic .SVG-module_icon__FE6iP,.SVG-module_interactiveIconWrapper__ACcob:not(:disabled):not(.SVG-module_disabled__WB5BU).SVG-module_hover__QivVO .SVG-module_icon__FE6iP,.SVG-module_interactiveIconWrapper__ACcob:not(:disabled):not(.SVG-module_disabled__WB5BU):active .SVG-module_icon__FE6iP,.SVG-module_interactiveIconWrapper__ACcob:not(:disabled):not(.SVG-module_disabled__WB5BU):focus .SVG-module_icon__FE6iP,.SVG-module_interactiveIconWrapper__ACcob:not(:disabled):not(.SVG-module_disabled__WB5BU):hover .SVG-module_icon__FE6iP,.SVG-module_reversedInteractiveIconWrapper__hTsnf .SVG-module_icon__FE6iP{opacity:1}.SVG-module_reversedInteractiveIconWrapper__hTsnf .SVG-module_active__R9jic .SVG-module_icon__FE6iP,.SVG-module_reversedInteractiveIconWrapper__hTsnf :active .SVG-module_icon__FE6iP{opacity:.5}.FilterButtonBase-module_filterButtonBase__I8mV-{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-color:var(--color-blue-100,#e6f6ff);border:0;border-radius:var(--border-solid-border-radius,7px);color:inherit;color:var(--color-blue-500,#0168b3);display:inline;display:inline-flex;font:inherit;font-family:var(--typography-button-secondary-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-button-secondary-font-size,1rem);font-weight:var(--typography-button-secondary-font-weight,500);height:3rem;letter-spacing:var(--typography-button-secondary-letter-spacing,normal);line-height:var(--typography-button-secondary-line-height,1.5rem);margin:0;padding:0;padding:var(--spacing-sm,.75rem);position:relative;white-space:nowrap}.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--active,.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--hover,.FilterButtonBase-module_filterButtonBase__I8mV-:active,.FilterButtonBase-module_filterButtonBase__I8mV-:hover{z-index:2}.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--active,.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--focus,.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--hover,.FilterButtonBase-module_filterButtonBase__I8mV-:active,.FilterButtonBase-module_filterButtonBase__I8mV-:focus-visible,.FilterButtonBase-module_filterButtonBase__I8mV-:hover,.js-focus-visible .FilterButtonBase-module_filterButtonBase__I8mV-.focus-visible{background-color:var(--color-blue-200,#bde2f5)}.FilterButtonBase-module_filterButtonBase__I8mV-:focus{outline:none}.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--focus,.FilterButtonBase-module_filterButtonBase__I8mV-:focus-visible,.js-focus-visible .FilterButtonBase-module_filterButtonBase__I8mV-.focus-visible{outline:none}.FilterButtonBase-module_filterButtonBase__I8mV-.story__filter-button-base--focus:after,.FilterButtonBase-module_filterButtonBase__I8mV-:focus-visible:after,.js-focus-visible .FilterButtonBase-module_filterButtonBase__I8mV-.focus-visible:after{border:var(--border-focus-ring-border-width,2px) var(--border-focus-ring-border-style,solid) var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);bottom:calc(var(--border-focus-ring-border-width, 2px)*-1 - 1px);content:"";left:calc(var(--border-focus-ring-border-width, 2px)*-1 - 1px);position:absolute;right:calc(var(--border-focus-ring-border-width, 2px)*-1 - 1px);top:calc(var(--border-focus-ring-border-width, 2px)*-1 - 1px);z-index:3}.FilterButton-module_filterButton__Q2dMX{gap:var(--spacing-xs,.375rem)}.FilterButton-module_labelContainer__5G-MD{display:inline-flex}.FilterButton-module_hasSelectedValues__dyQkL{font-weight:var(--typography-button-primary-font-weight,700)}.FilterButton-module_labelSeparator__xrkAx{-webkit-margin-end:var(--spacing-xs,.375rem);margin-inline-end:var(--spacing-xs,.375rem)}[dir=ltr] [dir=rtl] .FilterButton-module_labelSeparator__xrkAx{margin-right:0}.Tooltip-module_tooltip__80yPv{pointer-events:none;position:relative;z-index:1070}.Tooltip-module_tooltipContent__gXHKT{border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 3px 16px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1));color:var(--color-purple-800,#2f2438);font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-heading-6-font-size,.875rem);font-weight:var(--typography-paragraph-body-font-weight,400);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:var(--typography-paragraph-small-line-height,1.125rem);max-width:400px;padding:.4375rem .53125rem;text-align:center;transition:opacity var(--animation-duration-fast,.3s),transform var(--animation-duration-fast,.3s)}.Tooltip-module_tooltipContent__gXHKT.Tooltip-module_default__oLBfa{background-color:var(--color-white,#fff);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-300,#eaeaec)}.Tooltip-module_tooltipContent__gXHKT.Tooltip-module_informative__Lw2ZJ{background-color:var(--color-blue-100,#e6f6ff);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-blue-300,#73c0e8)}.Tooltip-module_tooltipContent__gXHKT.Tooltip-module_positive__31-es{background-color:var(--color-green-100,#e8f8f4);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-green-300,#8fdbc7)}.Tooltip-module_tooltipContent__gXHKT.Tooltip-module_cautionary__jr2QQ{background-color:var(--color-yellow-100,#fff9e4);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-yellow-300,#ffe36e)}.Tooltip-module_tooltipContent__gXHKT.Tooltip-module_highlight__b5HMe{background-color:var(--color-purple-100,#f4edf8);border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-purple-300,#c9a5dd)}.Tooltip-module_arrow__LWe4h{position:absolute;z-index:1}[data-popper-placement^=top] .Tooltip-module_arrow__LWe4h{bottom:0}[data-popper-placement^=bottom] .Tooltip-module_arrow__LWe4h{top:0}[data-popper-placement^=bottom] .Tooltip-module_arrow__LWe4h .Tooltip-module_arrowInner__whQvw{transform:rotate(180deg)}[data-popper-placement^=left] .Tooltip-module_arrow__LWe4h{right:0}[data-popper-placement^=left] .Tooltip-module_arrow__LWe4h .Tooltip-module_arrowInner__whQvw{transform:rotate(270deg)}[data-popper-placement^=right] .Tooltip-module_arrow__LWe4h{left:0}[data-popper-placement^=right] .Tooltip-module_arrow__LWe4h .Tooltip-module_arrowInner__whQvw{transform:rotate(90deg)}.Tooltip-module_arrowMain__VSut6:after,.Tooltip-module_arrowMain__VSut6:before{border-left:7px solid transparent;border-right:7px solid transparent;content:"";left:50%;margin-left:-7px;position:absolute}.Tooltip-module_arrowMain__VSut6.Tooltip-module_default__oLBfa:before{border-top:7px solid var(--color-gray-300,#eaeaec)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_informative__Lw2ZJ:before{border-top:7px solid var(--color-blue-300,#73c0e8)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_positive__31-es:before{border-top:7px solid var(--color-green-300,#8fdbc7)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_highlight__b5HMe:before{border-top:7px solid var(--color-purple-300,#c9a5dd)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_cautionary__jr2QQ:before{border-top:7px solid var(--color-yellow-300,#ffe36e)}.Tooltip-module_arrowMain__VSut6:after{margin-top:-3px}.Tooltip-module_arrowMain__VSut6.Tooltip-module_default__oLBfa:after{border-top:7px solid #fff}.Tooltip-module_arrowMain__VSut6.Tooltip-module_informative__Lw2ZJ:after{border-top:7px solid var(--color-blue-100,#e6f6ff)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_positive__31-es:after{border-top:7px solid var(--color-green-100,#e8f8f4)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_highlight__b5HMe:after{border-top:7px solid var(--color-purple-100,#f4edf8)}.Tooltip-module_arrowMain__VSut6.Tooltip-module_cautionary__jr2QQ:after{border-top:7px solid var(--color-yellow-100,#fff9e4)}.Tooltip-module_arrowShadow__cwgsV:before{border-top:0 solid var(--color-gray-300,#eaeaec)}.Tooltip-module_arrowShadow__cwgsV:after{border-top:7px solid rgba(var(--color-purple-800-rgb,47,36,56),.09);filter:blur(4px);margin-top:1px}.Tooltip-module_displayInline__iojZb{display:inline}.Tooltip-module_displayBlock__RfmWl{display:block}.Tooltip-module_displayInlineBlock__2q-e6{display:inline-block}.Tooltip-module_displayFlex__orTOm{display:flex}.Tooltip-module_displayInlineFlex__z-4AS{display:inline-flex}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j.story__button-group--focus:after,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j:focus-visible:after,.js-focus-visible .ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j.focus-visible:after{border-end-start-radius:var(--border-focus-ring-border-radius,10px);border-start-start-radius:var(--border-focus-ring-border-radius,10px)}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx.story__button-group--focus:after,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx:focus-visible:after,.js-focus-visible .ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx.focus-visible:after{border-end-end-radius:var(--border-focus-ring-border-radius,10px);border-start-end-radius:var(--border-focus-ring-border-radius,10px)}.ButtonGroup-module_buttonGroup__bsy2X{display:inline-flex}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-{border-radius:0}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.story__button-group--focus:after,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-:focus-visible:after,.js-focus-visible .ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.focus-visible:after{border-radius:0}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j.story__button-group--focus:after,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j:focus-visible:after,.js-focus-visible .ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_firstChild__uEn1j.focus-visible:after{inset-inline-end:-1px}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-:not(.ButtonGroup-module_firstChild__uEn1j){-webkit-border-start:1px solid var(--color-blue-300,#73c0e8);border-inline-start:1px solid var(--color-blue-300,#73c0e8)}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-:not(.ButtonGroup-module_firstChild__uEn1j):not(.ButtonGroup-module_lastChild__Vicsx).story__button-group--focus:after,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-:not(.ButtonGroup-module_firstChild__uEn1j):not(.ButtonGroup-module_lastChild__Vicsx):focus-visible:after,.js-focus-visible .ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-:not(.ButtonGroup-module_firstChild__uEn1j):not(.ButtonGroup-module_lastChild__Vicsx).focus-visible:after{inset-inline-end:-1px;inset-inline-start:-1px}.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx.story__button-group--focus:after,.ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx:focus-visible:after,.js-focus-visible .ButtonGroup-module_buttonGroup__bsy2X .ButtonGroup-module_child__K6AP-.ButtonGroup-module_lastChild__Vicsx.focus-visible:after{inset-inline-start:-1px}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(1,104,179,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(1,104,179,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1080px){.container{max-width:1080px}}.visible{visibility:visible}.fixed{position:fixed}.inline-block{display:inline-block}.contents{display:contents}.bg-green-300{--tw-bg-opacity:1;background-color:rgb(143 219 199/var(--tw-bg-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

package/package.json

@@ -1,51 +1,69 @@
 {
   "name": "@kaizen/components",
-  "version": "1.5.1",
+  "version": "1.6.3",
   "description": "Kaizen component library",
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
+  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
+  "homepage": "https://cultureamp.design",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cultureamp/kaizen-discourse/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cultureamp/kaizen-design-system.git"
+  },
   "files": [
     "future",
     "dist",
     "icons"
   ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "prepublish": "tsup && yarn tailwindcss",
-    "build": "yarn prepublish",
-    "tailwindcss": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
-    "build:watch": "yarn clean && yarn prepublish --watch",
-    "clean": "rimraf 'dist'"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cultureamp/kaizen-design-system.git"
-  },
-  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/cultureamp/kaizen-discourse/issues"
+    "build": "yarn build:clean && yarn prepublish",
+    "build:clean": "rimraf 'dist'",
+    "build:components": "rollup -c",
+    "build:deps": "yarn workspace @kaizen/design-tokens build && yarn workspace @kaizen/tailwind build && yarn workspace @kaizen/draft-tooltip build",
+    "compile": "tsc",
+    "dist:clean": "rm ./dist/tailwind.css ./dist/raw-styles.css",
+    "dist:combine-styles": "concat-cli -f ./dist/esm/*.css ./dist/*.css -o ./dist/raw-styles.css",
+    "dist:copy-tailwind": "cp styles/tailwind.css dist/tailwind.css",
+    "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
+    "postBuild": "yarn dist:copy-tailwind && yarn dist:combine-styles && yarn dist:postcss",
+    "prepublish": "yarn build:deps && yarn build:components && yarn postBuild && yarn dist:clean",
+    "test": "jest"
   },
-  "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
   "dependencies": {
-    "@kaizen/component-library": "^16.4.3",
-    "@kaizen/design-tokens": "^10.3.1",
-    "@kaizen/draft-tooltip": "^5.4.32",
+    "@kaizen/component-library": "^16.5.0",
+    "@kaizen/draft-tooltip": "^5.4.34",
     "@popperjs/core": "^2.11.6",
     "classnames": "^2.3.2",
     "react-focus-on": "^3.7.0",
     "react-popper": "^2.3.0"
   },
   "devDependencies": {
-    "@deanc/esbuild-plugin-postcss": "^1.0.2",
     "@kaizen/tailwind": "^0.6.0",
+    "@rollup/plugin-alias": "^4.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-image": "^3.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
     "autoprefixer": "^10.4.14",
-    "tailwindcss": "^3.2.7",
-    "tiny-glob": "^0.2.9",
-    "tsup": "^6.6.3"
+    "concat-cli": "^4.0.0",
+    "esbuild": "^0.17.12",
+    "rollup": "^3.20.0",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "ts-jest": "^29.0.5",
+    "ttypescript": "^1.5.15",
+    "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
+    "@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
-  "gitHead": "5e85cea99046c6dc3b9c26c268fff757d1109fac"
+  "gitHead": "f0137701658ddab6ba545a72de9ad6267b0f71a0"
 }

package/dist/ButtonGroup/index.d.ts

@@ -1,5 +0,0 @@
-export { a as ButtonGroup, B as ButtonGroupProps } from '../ButtonGroup-b1e541fe.js';
-import 'react';
-import '@kaizen/draft-tooltip';
-import '../FilterButtonBase-4004361e.js';
-import '../types.js';

package/dist/ButtonGroup/index.js

@@ -1,7 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunkGTXIOS6Djs = require('../chunk-GTXIOS6D.js');
-require('../chunk-SBUK4XZM.js');
-
-
-exports.ButtonGroup = _chunkGTXIOS6Djs.ButtonGroup;

package/dist/ButtonGroup-b1e541fe.d.ts

@@ -1,14 +0,0 @@
-import React__default, { HTMLAttributes } from 'react';
-import { TooltipProps } from '@kaizen/draft-tooltip';
-import { F as FilterButtonBaseProps } from './FilterButtonBase-4004361e.js';
-import { OverrideClassName } from './types.js';
-
-interface ButtonGroupProps extends OverrideClassName<HTMLAttributes<HTMLDivElement>> {
-    children: React__default.ReactElement<FilterButtonBaseProps | TooltipProps> | Array<React__default.ReactElement<FilterButtonBaseProps | TooltipProps>>;
-}
-declare const ButtonGroup: {
-    ({ children, classNameOverride, ...restProps }: ButtonGroupProps): JSX.Element;
-    displayName: string;
-};
-
-export { ButtonGroupProps as B, ButtonGroup as a };