@kaizen/components 0.0.0-canary-kaio-moduleres-bundler-20240308005620 → 0.0.0-canary-less-gung-ho-20240308011930

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-kaio-moduleres-bundler-20240308005620",
+  "version": "0.0.0-canary-less-gung-ho-20240308011930",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import {
   ArrowLeftIcon,
   ArrowRightIcon,

package/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryFn } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { Button } from "~components/Button"
 import { ChevronRightIcon } from "~components/Icon"
 import {

package/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { FilterButton } from "~components/Filter/FilterButton"
 import {
   StickerSheet,

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { action } from "@storybook/addon-actions"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx

@@ -3,7 +3,7 @@ import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { action } from "@storybook/addon-actions"
 import { Meta } from "@storybook/react"
 import { within, userEvent } from "@storybook/test"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { DateRange } from "~components/Calendar"
 import {
   StickerSheet,

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -8,7 +8,7 @@ import {
   useQueryClient,
   keepPreviousData,
 } from "@tanstack/react-query"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"

package/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import {
   StickerSheet,
   StickerSheetStory,

package/src/KaizenProvider/KaizenProvider.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react"
-import { ToastNotificationsList } from "~components/Notification"
-import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
+import React from "react"
+// import { ToastNotificationsList } from "~components/Notification"
+// import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
-import { OptionalIntlProvider } from "./subcomponents/OptionalIntlProvider"
+// import { OptionalIntlProvider } from "./subcomponents/OptionalIntlProvider"
 
 export type KaizenProviderProps = {
   children: React.ReactNode
@@ -12,30 +12,30 @@ export type KaizenProviderProps = {
 export const KaizenProvider = ({
   children,
   locale = "en",
-}: KaizenProviderProps): JSX.Element => {
-  const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
-  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
+}: KaizenProviderProps): JSX.Element =>
+  // const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
+  // const [notificationsList, setNotificationsList] = useState<JSX.Element>()
 
-  useEffect(() => {
-    // SSR does not have a document, which is required for ToastNotificationsList.
-    // Await document render before rendering the component.
-    if (document !== undefined) {
-      setNotificationsList(<ToastNotificationsList />)
-      setDocumentIsAvailable(true)
-    }
-  }, [documentIsAvailable])
+  // useEffect(() => {
+  //   // SSR does not have a document, which is required for ToastNotificationsList.
+  //   // Await document render before rendering the component.
+  //   if (document !== undefined) {
+  //     setNotificationsList(<ToastNotificationsList />)
+  //     setDocumentIsAvailable(true)
+  //   }
+  // }, [documentIsAvailable])
 
-  return (
-    <OptionalIntlProvider locale={locale}>
+   (
+    // <OptionalIntlProvider locale={locale}>
       <>
-        <ToastNotificationProvider>
-          {notificationsList}
+        {/* <ToastNotificationProvider> */}
+          {/* {notificationsList} */}
           {children}
-        </ToastNotificationProvider>
+        {/* </ToastNotificationProvider> */}
         <FontDefinitions />
       </>
-    </OptionalIntlProvider>
+    // </OptionalIntlProvider>
   )
-}
+
 
 KaizenProvider.displayName = "KaizenProvider"

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { Text } from "~components/Text"
 import { chromaticModalSettings } from "../../_docs/controls"
 import { ConfirmationModal } from "../index"

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
 import { Text } from "~components/Text"

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"

package/src/Modal/_docs/controls.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Decorator } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 
 const IS_CHROMATIC = isChromatic()
 

package/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import classnames from "classnames"
 import {
   StickerSheet,

package/src/Tag/Tag.tsx

@@ -1,16 +1,6 @@
 import React from "react"
-import classnames from "classnames"
-import { Avatar, AvatarProps } from "~components/Avatar"
-import {
-  CautionIcon,
-  ClearIcon,
-  ExclamationIcon,
-  InformationIcon,
-  LiveIcon,
-  SuccessIcon,
-} from "~components/Icon"
+import { AvatarProps } from "~components/Avatar"
 import { TagVariants } from "./types"
-import styles from "./Tag.module.scss"
 
 export type TagWithAvatarProps = Omit<DefaultTagProps, "variant"> & {
   variant: "profile"
@@ -33,155 +23,9 @@ export interface DefaultTagProps {
 
 export type TagProps = DefaultTagProps | TagWithAvatarProps
 
-const isJSXElement = (
-  imageElementOrAvatarProps: JSX.Element | AvatarProps
-): imageElementOrAvatarProps is JSX.Element =>
-  "props" in imageElementOrAvatarProps
-
-const renderAvatar = (
-  imageElementOrAvatarProps: JSX.Element | AvatarProps
-): JSX.Element =>
-  isJSXElement(imageElementOrAvatarProps) ? (
-    <>{imageElementOrAvatarProps}</>
-  ) : (
-    <Avatar {...imageElementOrAvatarProps} size="small" />
-  )
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081928978/Tags Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-tag--docs Storybook}
- */
 export const Tag = (props: TagProps): JSX.Element => {
-  const {
-    children,
-    variant = "default",
-    size = "medium",
-    inline = false,
-    dismissible = false,
-    onDismiss,
-    onMouseDown,
-    onMouseLeave,
-    truncateWidth,
-  } = props
-
-  const isTruncated = truncateWidth && truncateWidth > 0
-  const canShowIcon = size === "medium"
-  return (
-    <div
-      className={classnames(
-        styles.root,
-        styles[variant],
-        variant === "profile" && styles.default,
-        styles[size],
-        inline && styles.inline,
-        dismissible && styles.dismissible
-      )}
-    >
-      <div className={styles.layoutContainer}>
-        <>
-          {canShowIcon &&
-            ((): JSX.Element | void => {
-              switch (props.variant) {
-                case "validationPositive":
-                  return (
-                    <span className={styles.validationIcon}>
-                      <SuccessIcon role="presentation" />
-                    </span>
-                  )
-                case "validationNegative":
-                  return (
-                    <span className={styles.validationIcon}>
-                      <ExclamationIcon role="presentation" />
-                    </span>
-                  )
-                case "validationCautionary":
-                  return (
-                    <span className={styles.validationIcon}>
-                      <CautionIcon role="presentation" />
-                    </span>
-                  )
-                case "validationInformative":
-                  return (
-                    <span className={styles.validationIcon}>
-                      <InformationIcon role="presentation" />
-                    </span>
-                  )
-                case "profile":
-                  return (
-                    <span className={styles.profile}>
-                      {props.avatar && renderAvatar(props.avatar)}
-                    </span>
-                  )
-                default:
-                  return
-              }
-            })()}
-          <span
-            className={classnames(
-              styles.textContent,
-              isTruncated && styles.truncate
-            )}
-            style={{
-              maxWidth: isTruncated ? truncateWidth : undefined,
-            }}
-          >
-            {children}
-          </span>
-          {dismissible && (
-            <>
-              <button
-                type="button"
-                className={styles.dismissButton}
-                onClick={onDismiss}
-                onMouseDown={onMouseDown}
-                onMouseLeave={onMouseLeave}
-              >
-                <div className={styles.iconWrapper}>
-                  <ClearIcon inheritSize role="img" aria-label="Dismiss" />
-                </div>
-              </button>
-            </>
-          )}
-          {variant === "statusLive" && (
-            <span className={styles.liveIcon}>
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_base}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_1}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_2}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-              <LiveIcon
-                role="presentation"
-                classNameOverride={styles.liveIcon_3}
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-              />
-            </span>
-          )}
-        </>
-      </div>
-    </div>
-  )
+  const { variant = "default" } = props
+  return <div>Testing Tag component {variant}</div>
 }
 
 Tag.displayName = "Tag"

package/src/__future__/Select/_docs/Select.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import isChromatic from "chromatic/isChromatic"
+import isChromatic from "chromatic"
 import {
   StickerSheet,
   StickerSheetStory,

package/dist/cjs/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var React = require('react');
-var i18nReactIntl = require('@cultureamp/i18n-react-intl');
-var reactIntl = require('react-intl');
-const OptionalIntlProvider = /*#__PURE__*/function () {
-  const OptionalIntlProvider = function (_a) {
-    var locale = _a.locale,
-      children = _a.children;
-    var parent = React.useContext(reactIntl.IntlContext);
-    if (parent) return children;
-    return React.createElement(i18nReactIntl.StaticIntlProvider, {
-      locale: locale
-    }, children);
-  };
-  OptionalIntlProvider.displayName = "OptionalIntlProvider";
-  return OptionalIntlProvider;
-}();
-exports.OptionalIntlProvider = OptionalIntlProvider;
-//# sourceMappingURL=OptionalIntlProvider.cjs.map

package/dist/cjs/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionalIntlProvider.cjs","sources":["../../../../../src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { StaticIntlProvider } from \"@cultureamp/i18n-react-intl\"\nimport { IntlContext } from \"react-intl\"\n\ntype Props = {\n  locale: string\n  children: React.ReactElement\n}\nexport const OptionalIntlProvider = ({\n  locale,\n  children,\n}: Props): JSX.Element => {\n  const parent = useContext(IntlContext)\n\n  if (parent) return children\n  return <StaticIntlProvider locale={locale}>{children}</StaticIntlProvider>\n}\n\nOptionalIntlProvider.displayName = \"OptionalIntlProvider\"\n"],"names":["OptionalIntlProvider","_a","locale","children","parent","useContext","IntlContext","React","createElement","StaticIntlProvider","displayName"],"mappings":";;;;;MAQaA,oBAAoB;EAAA,MAApBA,oBAAoB,GAAG,SAAAA,CAACC,EAG7B,EAAA;QAFNC,MAAM,GAAAD,EAAA,CAAAC,MAAA;MACNC,QAAQ,GAAAF,EAAA,CAAAE,QAAA;IAER,IAAMC,MAAM,GAAGC,gBAAU,CAACC,SAAAA,CAAAA,WAAW,CAAC;IAEtC,IAAIF,MAAM,EAAE,OAAOD,QAAQ;IAC3B,OAAOI,KAAA,CAAAC,aAAA,CAACC,aAAkB,CAAAA,kBAAA,EAAC;MAAAP,MAAM,EAAEA;IAAM,CAAA,EAAGC,QAAQ,CAAsB;EAC5E,CAAC;EAEDH,oBAAoB,CAACU,WAAW,GAAG,sBAAsB;EAAA,OAV5CV,oBAAoB;AAAA;"}

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

@@ -1,38 +0,0 @@
-'use strict';
-
-var styles = {
-  "root": "Tag-module_root__uRhoc",
-  "profile": "Tag-module_profile__OoGsS",
-  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
-  "validationIcon": "Tag-module_validationIcon__B-YLv",
-  "textContent": "Tag-module_textContent__q76X-",
-  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
-  "dismissButton": "Tag-module_dismissButton__rHv7r",
-  "background": "Tag-module_background__LkzGB",
-  "truncate": "Tag-module_truncate__5w7HW",
-  "inline": "Tag-module_inline__pPM-d",
-  "medium": "Tag-module_medium__NkOrv",
-  "small": "Tag-module_small__-xyNk",
-  "default": "Tag-module_default__6PVke",
-  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
-  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
-  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
-  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
-  "validationPositive": "Tag-module_validationPositive__vgFUE",
-  "validationInformative": "Tag-module_validationInformative__bnJ4A",
-  "validationNegative": "Tag-module_validationNegative__lZgIY",
-  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
-  "statusLive": "Tag-module_statusLive__xG48w",
-  "statusAction": "Tag-module_statusAction__woL-O",
-  "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv",
-  "liveIcon": "Tag-module_liveIcon__URtak",
-  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
-  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
-  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
-  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
-  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
-  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
-};
-module.exports = styles;
-//# sourceMappingURL=Tag.module.scss.cjs.map

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

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

package/dist/esm/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.mjs

@@ -1,18 +0,0 @@
-import React, { useContext } from 'react';
-import { StaticIntlProvider } from '@cultureamp/i18n-react-intl';
-import { IntlContext } from 'react-intl';
-const OptionalIntlProvider = /*#__PURE__*/function () {
-  const OptionalIntlProvider = function (_a) {
-    var locale = _a.locale,
-      children = _a.children;
-    var parent = useContext(IntlContext);
-    if (parent) return children;
-    return /*#__PURE__*/React.createElement(StaticIntlProvider, {
-      locale: locale
-    }, children);
-  };
-  OptionalIntlProvider.displayName = "OptionalIntlProvider";
-  return OptionalIntlProvider;
-}();
-export { OptionalIntlProvider };
-//# sourceMappingURL=OptionalIntlProvider.mjs.map

package/dist/esm/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionalIntlProvider.mjs","sources":["../../../../../src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { StaticIntlProvider } from \"@cultureamp/i18n-react-intl\"\nimport { IntlContext } from \"react-intl\"\n\ntype Props = {\n  locale: string\n  children: React.ReactElement\n}\nexport const OptionalIntlProvider = ({\n  locale,\n  children,\n}: Props): JSX.Element => {\n  const parent = useContext(IntlContext)\n\n  if (parent) return children\n  return <StaticIntlProvider locale={locale}>{children}</StaticIntlProvider>\n}\n\nOptionalIntlProvider.displayName = \"OptionalIntlProvider\"\n"],"names":["OptionalIntlProvider","_a","locale","children","parent","useContext","IntlContext","React","createElement","StaticIntlProvider","displayName"],"mappings":";;;MAQaA,oBAAoB;EAAA,MAApBA,oBAAoB,GAAG,SAAAA,CAACC,EAG7B,EAAA;QAFNC,MAAM,GAAAD,EAAA,CAAAC,MAAA;MACNC,QAAQ,GAAAF,EAAA,CAAAE,QAAA;IAER,IAAMC,MAAM,GAAGC,UAAU,CAACC,WAAW,CAAC;IAEtC,IAAIF,MAAM,EAAE,OAAOD,QAAQ;IAC3B,oBAAOI,KAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAC;MAAAP,MAAM,EAAEA;IAAM,CAAA,EAAGC,QAAQ,CAAsB;EAC5E,CAAC;EAEDH,oBAAoB,CAACU,WAAW,GAAG,sBAAsB;EAAA,OAV5CV,oBAAoB;AAAA;"}

package/dist/esm/Tag/Tag.module.scss.mjs

@@ -1,36 +0,0 @@
-var styles = {
-  "root": "Tag-module_root__uRhoc",
-  "profile": "Tag-module_profile__OoGsS",
-  "layoutContainer": "Tag-module_layoutContainer__pBLSz",
-  "validationIcon": "Tag-module_validationIcon__B-YLv",
-  "textContent": "Tag-module_textContent__q76X-",
-  "iconWrapper": "Tag-module_iconWrapper__aPrKH",
-  "dismissButton": "Tag-module_dismissButton__rHv7r",
-  "background": "Tag-module_background__LkzGB",
-  "truncate": "Tag-module_truncate__5w7HW",
-  "inline": "Tag-module_inline__pPM-d",
-  "medium": "Tag-module_medium__NkOrv",
-  "small": "Tag-module_small__-xyNk",
-  "default": "Tag-module_default__6PVke",
-  "sentimentPositive": "Tag-module_sentimentPositive__nbqE1",
-  "sentimentNeutral": "Tag-module_sentimentNeutral__8BtD8",
-  "sentimentNegative": "Tag-module_sentimentNegative__1J85t",
-  "sentimentNone": "Tag-module_sentimentNone__8BWjU",
-  "validationPositive": "Tag-module_validationPositive__vgFUE",
-  "validationInformative": "Tag-module_validationInformative__bnJ4A",
-  "validationNegative": "Tag-module_validationNegative__lZgIY",
-  "validationCautionary": "Tag-module_validationCautionary__ERS2t",
-  "statusLive": "Tag-module_statusLive__xG48w",
-  "statusAction": "Tag-module_statusAction__woL-O",
-  "statusClosed": "Tag-module_statusClosed__VhZP-",
-  "statusDraft": "Tag-module_statusDraft__9QZDv",
-  "liveIcon": "Tag-module_liveIcon__URtak",
-  "liveIcon_base": "Tag-module_liveIcon_base__Nk5um",
-  "liveIcon_1": "Tag-module_liveIcon_1__STFJY",
-  "liveIcon_2": "Tag-module_liveIcon_2__rko-D",
-  "liveIcon_3": "Tag-module_liveIcon_3__fL71y",
-  "pulse-inner": "Tag-module_pulse-inner__0-JFL",
-  "pulse-outer": "Tag-module_pulse-outer__f9Oox"
-};
-export { styles as default };
-//# sourceMappingURL=Tag.module.scss.mjs.map

package/dist/esm/Tag/Tag.module.scss.mjs.map

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