@kaizen/components 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.1.0...@kaizen/components@1.2.0) (2023-02-13)
+
+
+### Features
+
+* **KaizenProvider:** add KaizenProvider to @kaizen/components ([#3239](https://github.com/cultureamp/kaizen-design-system/issues/3239)) ([16819f0](https://github.com/cultureamp/kaizen-design-system/commit/16819f0717dfebd6a938b2784dc84751650f8be4))
+
+
+
+
+
 # 1.1.0 (2023-01-24)
 
 

package/dist/KaizenProvider/KaizenProvider.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ThemeManager } from "./ThemeProvider";
+export interface KaizenProviderProps {
+    children: React.ReactNode;
+    themeManager?: ThemeManager;
+}
+export declare const KaizenProvider: {
+    ({ children, themeManager, }: KaizenProviderProps): JSX.Element;
+    displayName: string;
+};

package/dist/KaizenProvider/KaizenProvider.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.KaizenProvider = void 0;
+var react_1 = __importDefault(require("react"));
+var ThemeProvider_1 = require("./ThemeProvider");
+var KaizenProvider = function (_a) {
+    var children = _a.children, themeManager = _a.themeManager;
+    return (react_1["default"].createElement(ThemeProvider_1.ThemeProvider, { themeManager: themeManager }, children));
+};
+exports.KaizenProvider = KaizenProvider;
+exports.KaizenProvider.displayName = "KaizenProvider";
+//# sourceMappingURL=KaizenProvider.js.map

package/dist/KaizenProvider/KaizenProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KaizenProvider.js","sourceRoot":"","sources":["../../src/KaizenProvider/KaizenProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,iDAA6D;AAOtD,IAAM,cAAc,GAAG,UAAC,EAGT;QAFpB,QAAQ,cAAA,EACR,YAAY,kBAAA;IAC0B,OAAA,CACtC,iCAAC,6BAAa,IAAC,YAAY,EAAE,YAAY,IAAG,QAAQ,CAAiB,CACtE;AAFuC,CAEvC,CAAA;AALY,QAAA,cAAc,kBAK1B;AAED,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA"}

package/dist/KaizenProvider/ThemeProvider/ThemeManager.d.ts

@@ -0,0 +1,25 @@
+import { Theme as BaseTheme } from "@kaizen/design-tokens";
+/**
+ * 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)`.
+ */
+export declare class ThemeManager<Theme extends BaseTheme = BaseTheme> {
+    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;
+}

package/dist/KaizenProvider/ThemeProvider/ThemeManager.js

@@ -0,0 +1,75 @@
+"use strict";
+exports.__esModule = true;
+exports.ThemeManager = void 0;
+var design_tokens_1 = require("@kaizen/design-tokens");
+/**
+ * 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)`.
+ */
+var ThemeManager = /** @class */ (function () {
+    function ThemeManager(theme, rootElementId, 
+    /* This allows you to stop the  class from applying the theme automatically during construction. Defaults to true */
+    apply) {
+        if (rootElementId === void 0) { rootElementId = ""; }
+        if (apply === void 0) { apply = true; }
+        var _this = this;
+        this.themeChangeListeners = [];
+        this.rootElement = null;
+        this.getRootElement = function () { return _this.rootElement; };
+        this.getRootElementId = function () { return _this.rootElementId; };
+        this.getCurrentTheme = function () { return _this.theme; };
+        this.setRootElement = function (element) {
+            _this.rootElement = element;
+        };
+        this.setRootElementId = function (rootElementId) {
+            return (_this.rootElementId = rootElementId);
+        };
+        this.setAndApplyTheme = function (theme, force) {
+            if (!force) {
+                if (_this.theme === theme)
+                    return;
+            }
+            _this.theme = theme;
+            _this.applyCurrentTheme();
+            _this.notifyThemeChangeListeners(theme);
+        };
+        this.addThemeChangeListener = function (listener) {
+            _this.themeChangeListeners.push(listener);
+        };
+        this.removeThemeChangeListener = function (listener) {
+            _this.themeChangeListeners = _this.themeChangeListeners.filter(function (l) { return l !== listener; });
+        };
+        this.applyCurrentTheme = function () {
+            var _a;
+            if (typeof window !== "undefined") {
+                _this.setRootElement((_a = document.getElementById(_this.rootElementId)) !== null && _a !== void 0 ? _a : document.documentElement);
+                var cssVariableDefinitions = (0, design_tokens_1.makeCssVariableDefinitionsMap)(_this.theme);
+                Object.entries(cssVariableDefinitions).forEach(function (_a) {
+                    var _b;
+                    var key = _a[0], value = _a[1];
+                    (_b = _this.rootElement) === null || _b === void 0 ? void 0 : _b.style.setProperty(key, value);
+                });
+            }
+        };
+        this.notifyThemeChangeListeners = function (theme) {
+            _this.themeChangeListeners.forEach(function (listener) { return listener(theme); });
+        };
+        /*
+          For some reason, storybook likes this way of defining class properties better.
+          If you use `constructor( private theme: Theme, ...)` - theme becomes undefined within the class's methods.
+        */
+        this.theme = theme;
+        this.rootElementId = rootElementId;
+        if (apply)
+            this.applyCurrentTheme();
+    }
+    return ThemeManager;
+}());
+exports.ThemeManager = ThemeManager;
+// I would like to expose this, but instantiating ThemeManager in some situations or runtimes (such as nodejs) cause exceptions.
+// For now it is not exposed, but we might come back to it, as it makes sense to have a singleton ThemeManager in almost all cases
+/* export const defaultThemeManager = new ThemeManager(defaultTheme) */
+//# sourceMappingURL=ThemeManager.js.map

package/dist/KaizenProvider/ThemeProvider/ThemeManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeManager.js","sourceRoot":"","sources":["../../../src/KaizenProvider/ThemeProvider/ThemeManager.ts"],"names":[],"mappings":";;;AAAA,uDAG8B;AAE9B;;;;;;GAMG;AAEH;IAME,sBACE,KAAY,EACZ,aAA0B;IAC1B,oHAAoH;IACpH,KAAqB;QAFrB,8BAAA,EAAA,kBAA0B;QAE1B,sBAAA,EAAA,YAAqB;QAJvB,iBAaC;QAlBO,yBAAoB,GAAG,EAAmC,CAAA;QAE1D,gBAAW,GAAuB,IAAI,CAAA;QAkBvC,mBAAc,GAAG,cAA0B,OAAA,KAAI,CAAC,WAAW,EAAhB,CAAgB,CAAA;QAC3D,qBAAgB,GAAG,cAAc,OAAA,KAAI,CAAC,aAAa,EAAlB,CAAkB,CAAA;QACnD,oBAAe,GAAG,cAAa,OAAA,KAAI,CAAC,KAAK,EAAV,CAAU,CAAA;QAEzC,mBAAc,GAAG,UAAC,OAAoB;YAC3C,KAAI,CAAC,WAAW,GAAG,OAAO,CAAA;QAC5B,CAAC,CAAA;QACM,qBAAgB,GAAG,UAAC,aAAqB;YAC9C,OAAA,CAAC,KAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAApC,CAAoC,CAAA;QAC/B,qBAAgB,GAAG,UAAC,KAAY,EAAE,KAAe;YACtD,IAAI,CAAC,KAAK,EAAE;gBACV,IAAI,KAAI,CAAC,KAAK,KAAK,KAAK;oBAAE,OAAM;aACjC;YACD,KAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAClB,KAAI,CAAC,iBAAiB,EAAE,CAAA;YACxB,KAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAA;QACxC,CAAC,CAAA;QAEM,2BAAsB,GAAG,UAAC,QAAgC;YAC/D,KAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC1C,CAAC,CAAA;QACM,8BAAyB,GAAG,UACjC,QAAgC;YAEhC,KAAI,CAAC,oBAAoB,GAAG,KAAI,CAAC,oBAAoB,CAAC,MAAM,CAC1D,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,QAAQ,EAAd,CAAc,CACpB,CAAA;QACH,CAAC,CAAA;QACM,sBAAiB,GAAG;;YACzB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;gBACjC,KAAI,CAAC,cAAc,CACjB,MAAA,QAAQ,CAAC,cAAc,CAAC,KAAI,CAAC,aAAa,CAAC,mCAAI,QAAQ,CAAC,eAAe,CACxE,CAAA;gBACD,IAAM,sBAAsB,GAAG,IAAA,6CAA6B,EAAC,KAAI,CAAC,KAAK,CAAC,CAAA;gBACxE,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,UAAC,EAAY;;wBAAX,GAAG,QAAA,EAAE,KAAK,QAAA;oBACzD,MAAA,KAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;gBACjD,CAAC,CAAC,CAAA;aACH;QACH,CAAC,CAAA;QAEO,+BAA0B,GAAG,UAAC,KAAY;YAChD,KAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,CAAC,CAAA;QAChE,CAAC,CAAA;QAnDC;;;UAGE;QACF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;QAClC,IAAI,KAAK;YAAE,IAAI,CAAC,iBAAiB,EAAE,CAAA;IACrC,CAAC;IA6CH,mBAAC;AAAD,CAAC,AAhED,IAgEC;AAhEY,oCAAY;AAkEzB,gIAAgI;AAChI,kIAAkI;AAClI,uEAAuE"}

package/dist/KaizenProvider/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import React, { Context } from "react";
+import { Theme } from "@kaizen/design-tokens";
+import { ThemeManager } from "./ThemeManager";
+export 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.
+ */
+export declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager?: ThemeManager<Theme> | undefined;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useTheme: () => Theme;

package/dist/KaizenProvider/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+exports.__esModule = true;
+exports.useTheme = exports.ThemeProvider = exports.ThemeContext = void 0;
+var react_1 = __importStar(require("react"));
+var design_tokens_1 = require("@kaizen/design-tokens");
+var ThemeManager_1 = require("./ThemeManager");
+exports.ThemeContext = (0, react_1.createContext)(design_tokens_1.defaultTheme);
+/**
+ * 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.
+ */
+var ThemeProvider = function (_a) {
+    var themeManager = _a.themeManager, props = __rest(_a, ["themeManager"]);
+    var themeManagerInstance = (0, react_1.useState)(function () { return themeManager || new ThemeManager_1.ThemeManager(design_tokens_1.defaultTheme); })[0];
+    var _b = (0, react_1.useState)(themeManagerInstance.getCurrentTheme()), theme = _b[0], setTheme = _b[1];
+    (0, react_1.useEffect)(function () {
+        var cancelled = false;
+        var listener = function (newTheme) {
+            if (!cancelled)
+                setTheme(newTheme);
+        };
+        themeManagerInstance.addThemeChangeListener(listener);
+        return function () {
+            cancelled = true;
+            themeManagerInstance.removeThemeChangeListener(listener);
+        };
+    }, []);
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(exports.ThemeContext.Provider, { value: theme }, props.children),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" }),
+        react_1["default"].createElement("link", { rel: "preload", href: "https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" })));
+};
+exports.ThemeProvider = ThemeProvider;
+var useTheme = function () { return (0, react_1.useContext)(exports.ThemeContext); };
+exports.useTheme = useTheme;
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/KaizenProvider/ThemeProvider/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/KaizenProvider/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAMc;AACd,uDAA2D;AAC3D,+CAA6C;AAEhC,QAAA,YAAY,GAAmB,IAAA,qBAAa,EAAQ,4BAAY,CAAC,CAAA;AAE9E;;;GAGG;AACI,IAAM,aAAa,GAAG,UAAC,EAM7B;IALC,IAAA,YAAY,kBAAA,EACT,KAAK,cAFoB,gBAG7B,CADS;IAKD,IAAA,oBAAoB,GAAI,IAAA,gBAAQ,EACrC,cAAM,OAAA,YAAY,IAAI,IAAI,2BAAY,CAAC,4BAAY,CAAC,EAA9C,CAA8C,CACrD,GAF0B,CAE1B;IAEK,IAAA,KAAoB,IAAA,gBAAQ,EAChC,oBAAoB,CAAC,eAAe,EAAE,CACvC,EAFM,KAAK,QAAA,EAAE,QAAQ,QAErB,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,IAAI,SAAS,GAAG,KAAK,CAAA;QACrB,IAAM,QAAQ,GAAG,UAAC,QAAe;YAC/B,IAAI,CAAC,SAAS;gBAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpC,CAAC,CAAA;QACD,oBAAoB,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAA;QACrD,OAAO;YACL,SAAS,GAAG,IAAI,CAAA;YAChB,oBAAoB,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL;QACE,iCAAC,oBAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAChC,KAAK,CAAC,QAAQ,CACO;QACxB,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,oEAAoE,EACzE,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,WAAW,GACvB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,yEAAyE,EAC9E,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,WAAW,GACvB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,sEAAsE,EAC3E,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,WAAW,GACvB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,uEAAuE,EAC5E,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,WAAW,GACvB;QACF,2CACE,GAAG,EAAC,SAAS,EACb,IAAI,EAAC,iFAAiF,EACtF,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,YAAY,EACjB,WAAW,EAAC,WAAW,GACvB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AArEY,QAAA,aAAa,iBAqEzB;AAEM,IAAM,QAAQ,GAAG,cAAa,OAAA,IAAA,kBAAU,EAAC,oBAAY,CAAC,EAAxB,CAAwB,CAAA;AAAhD,QAAA,QAAQ,YAAwC"}

package/dist/KaizenProvider/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ThemeProvider";
+export * from "./ThemeManager";

package/dist/{ExampleComponent → KaizenProvider/ThemeProvider}/index.js

@@ -14,5 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 exports.__esModule = true;
-__exportStar(require("./ExampleComponent"), exports);
+__exportStar(require("./ThemeProvider"), exports);
+__exportStar(require("./ThemeManager"), exports);
 //# sourceMappingURL=index.js.map

package/dist/KaizenProvider/ThemeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/KaizenProvider/ThemeProvider/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA+B;AAC/B,iDAA8B"}

package/dist/KaizenProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./KaizenProvider";
+export * from "./ThemeProvider";

package/dist/KaizenProvider/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+exports.__esModule = true;
+__exportStar(require("./KaizenProvider"), exports);
+__exportStar(require("./ThemeProvider"), exports);
+//# sourceMappingURL=index.js.map

package/dist/KaizenProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/KaizenProvider/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAgC;AAChC,kDAA+B"}

package/dist/index.d.ts

@@ -1 +1 @@
-export * from "./ExampleComponent";
+export * from "./KaizenProvider";

package/dist/index.js

@@ -15,5 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 exports.__esModule = true;
 // Example of exporting components to be consumed from main @kaizen/components
-__exportStar(require("./ExampleComponent"), exports);
+__exportStar(require("./KaizenProvider"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8EAA8E;AAC9E,qDAAkC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8EAA8E;AAC9E,mDAAgC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Kaizen component library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,11 +24,12 @@
     "url": "https://github.com/cultureamp/kaizen-discourse/issues"
   },
   "homepage": "https://github.com/cultureamp/kaizen-design-system#readme",
-  "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
-  },
   "dependencies": {
     "classnames": "^2.3.2"
   },
-  "gitHead": "f7aee4a1c7f098c13ecaeae16ece3cb82b90cd0a"
+  "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": "eff16687da5abe5db2541d576c4f2f6c590e3566"
 }

package/dist/ExampleComponent/ExampleComponent.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const ExampleComponent: () => JSX.Element;

package/dist/ExampleComponent/ExampleComponent.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.ExampleComponent = void 0;
-var react_1 = __importDefault(require("react"));
-var ExampleComponent_module_scss_1 = __importDefault(require("./ExampleComponent.module.scss"));
-// Placeholder for illustration DO NOT COPY
-var ExampleComponent = function () { return (react_1["default"].createElement("div", { className: ExampleComponent_module_scss_1["default"].exampleComponent }, "ExampleComponent")); };
-exports.ExampleComponent = ExampleComponent;
-//# sourceMappingURL=ExampleComponent.js.map

package/dist/ExampleComponent/ExampleComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExampleComponent.js","sourceRoot":"","sources":["../../src/ExampleComponent/ExampleComponent.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,gGAAmD;AAEnD,2CAA2C;AACpC,IAAM,gBAAgB,GAAG,cAAmB,OAAA,CACjD,0CAAK,SAAS,EAAE,yCAAM,CAAC,gBAAgB,uBAAwB,CAChE,EAFkD,CAElD,CAAA;AAFY,QAAA,gBAAgB,oBAE5B"}

package/dist/ExampleComponent/docs/ExampleComponent.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { ExampleComponent } from "..";
-declare const _default: ComponentMeta<() => JSX.Element>;
-export default _default;
-export declare const DefaultStory: ComponentStory<typeof ExampleComponent>;

package/dist/ExampleComponent/docs/ExampleComponent.stories.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-exports.DefaultStory = void 0;
-var react_1 = __importDefault(require("react"));
-var __1 = require("..");
-exports["default"] = {
-    title: "AIO/ExampleComponent (Do Not Use)",
-    component: __1.ExampleComponent,
-    parameters: {}
-};
-var DefaultStory = function (args) { return (react_1["default"].createElement(__1.ExampleComponent, null)); };
-exports.DefaultStory = DefaultStory;
-exports.DefaultStory.storyName = "ExampleComponent";
-//# sourceMappingURL=ExampleComponent.stories.js.map

package/dist/ExampleComponent/docs/ExampleComponent.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExampleComponent.stories.js","sourceRoot":"","sources":["../../../src/ExampleComponent/docs/ExampleComponent.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,wBAAqC;AAErC,qBAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,oBAAgB;IAC3B,UAAU,EAAE,EAAE;CAC2B,CAAA;AAEpC,IAAM,YAAY,GAA4C,UAAA,IAAI,IAAI,OAAA,CAC3E,iCAAC,oBAAgB,OAAG,CACrB,EAF4E,CAE5E,CAAA;AAFY,QAAA,YAAY,gBAExB;AACD,oBAAY,CAAC,SAAS,GAAG,kBAAkB,CAAA"}

package/dist/ExampleComponent/index.d.ts

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

package/dist/ExampleComponent/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ExampleComponent/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qDAAkC"}