@kaizen/components 1.46.0 → 1.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -70,7 +70,6 @@
     "react-select": "^5.8.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "tslib": "^2.6.2",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
     "@kaizen/hosted-assets": "2.0.3"
@@ -82,35 +81,28 @@
     "@babel/plugin-transform-react-pure-annotations": "^7.24.1",
     "@cultureamp/frontend-apis": "^9.5.0",
     "@cultureamp/i18n-react-intl": "^2.5.6",
-    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "agadoo": "^3.0.0",
     "autoprefixer": "^10.4.19",
-    "babel-plugin-pure-static-props": "^0.2.0",
-    "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.6",
     "rollup": "^4.17.2",
-    "rollup-plugin-dts": "^6.1.0",
-    "rollup-plugin-ignore": "^1.0.10",
-    "rollup-plugin-node-externals": "^7.1.2",
-    "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.76.0",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
-    "ts-patch": "^3.1.2",
-    "typescript-transform-paths": "^3.4.7",
-    "@kaizen/tailwind": "1.2.6",
-    "@kaizen/design-tokens": "10.3.20"
+    "tslib": "^2.6.2",
+    "tsx": "^4.10.2",
+    "@kaizen/design-tokens": "10.4.0",
+    "@kaizen/package-bundler": "2.0.0"
+  },
+  "devDependenciesComments": {
+    "postcss": "Installed in root",
+    "postcss-cli": "Installed in root",
+    "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.6",
@@ -118,19 +110,11 @@
     "react-intl": "^6.6.6"
   },
   "scripts": {
-    "build": "pnpm clean && pnpm prepublishOnly",
+    "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
+    "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "test:treeshake": "agadoo ./dist/esm/index.mjs",
-    "clean": "rimraf dist",
-    "build:components": "rollup -c && pnpm build:types",
-    "build:styles": "postcss styles/global.css --output dist/global.css",
-    "build:types": "tspc --project tsconfig.types.json",
-    "compile": "tsc",
-    "dist:clean": "rm ./dist/global.css ./dist/raw-styles.css",
-    "dist:combine-styles": "concat-cli -f ./dist/*.css ./dist/esm/*.css -o ./dist/raw-styles.css",
-    "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
-    "postBuild": "pnpm dist:combine-styles && pnpm dist:postcss",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract"
   }

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -115,6 +115,20 @@ export const StickerSheetDefault: Story = {
         '#Breadcrumbs-focus-example [class^="TitleBlockZen-TitleBlockZen-module__breadcrumb"]',
       ],
     },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: "color-contrast", // false positive from animate in on the breadcrumbs
+            enabled: false,
+          },
+          {
+            id: "landmark-unique", // false positive from having multiple TitleBlocks on a page
+            enabled: false,
+          },
+        ],
+      },
+    },
   },
   render: args => (
     <StickerSheet>

package/src/Tooltip/_docs/Tooltip.mdx

@@ -61,3 +61,73 @@ Again, try to keep the contents of your children as simple as possible, ideally
 
 When your direct child is not semantic, you will get a console warning like this:
 `<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info.`
+
+
+### Tooltips, Kaizen components and avoiding common pitfalls
+
+While technically any Kaizen component can be wrapped by a `Tooltip`, as called out previously, only those with [accessible roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) like `button`, `link` or `heading`, will be readable to assistive technologies.
+
+We've created some guidance below with the most common cases for `Tooltip` and how to ensure the additional context is read to the user.
+
+#### Button and IconButton
+
+<Canvas of={TooltipStories.ButtonsWithTooltip} />
+
+While Kaizen buttons are compatible with `Tooltip`, caution is advised when using the custom `component` render prop.
+
+```JSX
+  <Tooltip text="Contact customer support.">
+    <Button
+      {...buttonProps}
+      component={() => (
+        // The most immediate child is a `div`, which has no `role`.
+        <div>
+          <button type="button">
+            Help
+          </button>
+        </div>
+      )}
+    />
+  </Tooltip>
+```
+
+In the example above, the `div` in now the direct descendant of `Tooltip`, therefore will no longer be accessible to assistive technologies.
+
+#### ButtonGroup
+
+The `Tooltip` component must wrap the children of `ButtonGroup` to be accessible to screen readers.
+
+<Canvas of={TooltipStories.ButtonGroupWithTooltip} />
+
+#### Table headers and tooltips
+
+While the composable `Tooltip` is not exposed in the Kaizen `Table`, it is important to call out that the `tooltipInfo` prop in `TableHeaderRowCell` must also have an `onClick` or `href` to be announced to assistive technologies.
+
+<Canvas of={TooltipStories.TableHeadersWithTooltips} />
+
+Without either of these, the `Tooltip` content will not be readable to keyboard users or assistive technologies.
+
+#### Tags
+
+Seen in the example below simple `Tag`s with plain text as `children` will not accessible to keyboard users or assistive technologies as it's direct descendant is a `div` with no semantic `role`.
+
+<Canvas of={TooltipStories.TagWithHoverOnlyTooltip}  />
+
+While `Tooltip` should be avoided if there are no interactive states within the `Tag`, internal elements like buttons or links can be wrapped in a `Tooltip` component to add necessary context.
+
+<Canvas of={TooltipStories.TagWithTooltip} />
+
+The [future Tag](?path=/docs/components-tag-future--docs#overview) offers a composable solution for those needing to add more context to an interactive `Tag`.
+
+#### Form components and tooltips
+
+While a `Tooltip` can seem like a natural pairing when space is a commodity, form elements still require a concise label that is _ideally_ visible (See MDN's guide on [Tooltip best practices](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role#best_practices)).
+
+<Canvas of={TooltipStories.CheckboxFieldTooltip} />
+
+In the example above, the `Tooltip` content `"Select all users"` is accessible to screen readers via keyboard navigation, however will not be announced when the input receives focus. This a limitation of `CheckboxField` and form components where the immediate `children` of `Tooltip` is a wrapper.
+
+<Canvas of={TooltipStories.CheckboxFieldWithDescriptionTooltip} />
+
+In these instances, `aria-describedby` can be leveraged to provide a description to the input.
+

package/src/Tooltip/_docs/Tooltip.stories.tsx

@@ -1,9 +1,18 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { Button } from "~components/Button"
-import { InformationIcon } from "~components/Icon"
-import { Tag } from "~components/Tag"
+import { Button, IconButton } from "~components/Button"
+import { ButtonGroup } from "~components/ButtonGroup"
+import { CheckboxField } from "~components/Checkbox"
+import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
+import { InformationIcon, RemoveLinkIcon, QuestionIcon } from "~components/Icon"
+import {
+  TableContainer,
+  TableHeader,
+  TableHeaderRowCell,
+  TableRow,
+} from "~components/Table"
 import { Text } from "~components/Text"
+import { Tag } from "~components/__future__"
 import { Tooltip } from "../index"
 
 const meta = {
@@ -12,6 +21,16 @@ const meta = {
   args: {
     text: "Example tooltip text.",
   },
+  decorators: [
+    Story => (
+      <div className="flex mt-[60px] gap-12">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: "centered",
+  },
 } satisfies Meta<typeof Tooltip>
 
 export default meta
@@ -31,19 +50,6 @@ export const Playground: Story = {
       <Button label="Hover or focus me" />
     </Tooltip>
   ),
-  decorators: [
-    Story => (
-      <div
-        style={{
-          marginTop: "100px",
-          display: "flex",
-          justifyContent: "center",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 }
 
 export const OverflowScroll: Story = {
@@ -143,3 +149,160 @@ export const OverflowScroll: Story = {
     </>
   ),
 }
+
+export const ButtonsWithTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: args => (
+    <>
+      <Tooltip {...args} text="Contact customer support.">
+        <Button label="Help" icon={<QuestionIcon role="presentation" />} />
+      </Tooltip>
+      <Tooltip {...args} text="Remove the link from current selection.">
+        <IconButton
+          label="Remove link"
+          icon={<RemoveLinkIcon role="presentation" />}
+        />
+      </Tooltip>
+    </>
+  ),
+}
+
+export const ButtonGroupWithTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: args => (
+    <>
+      <ButtonGroup>
+        <Tooltip {...args} text="Sort by first">
+          <FilterButtonBase>First</FilterButtonBase>
+        </Tooltip>
+        <Tooltip {...args} text="Sort by last">
+          <FilterButtonBase>Last</FilterButtonBase>
+        </Tooltip>
+      </ButtonGroup>
+    </>
+  ),
+}
+
+export const TableHeadersWithTooltips: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <>
+      <TableContainer>
+        <TableHeader>
+          <TableRow>
+            <TableHeaderRowCell
+              labelText="Resources"
+              sorting="descending"
+              width={3 / 12}
+              onClick={(): void => undefined}
+              tooltipInfo="Sort Resources by descending"
+            />
+            <TableHeaderRowCell
+              labelText="Supplementary"
+              width={3 / 12}
+              onClick={(): void => undefined}
+              sorting="ascending"
+              tooltipInfo="Sort Supplementary by ascending"
+            />
+            <TableHeaderRowCell labelText="Date" width={3 / 12} />
+            <TableHeaderRowCell labelText="Price" width={3 / 12} />
+          </TableRow>
+        </TableHeader>
+      </TableContainer>
+    </>
+  ),
+}
+
+export const TagWithHoverOnlyTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <Tooltip text="John Jonson Johnington the Third">
+      <Tag>John Jonson Jo...</Tag>
+    </Tooltip>
+  ),
+}
+
+export const TagWithTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <Tag>
+      <Tooltip text="Visit John Jonson's profile">
+        <a className="text-inherit font no-underline" href="#John">
+          John Jonson
+        </a>
+      </Tooltip>
+    </Tag>
+  ),
+}
+
+export const TagWithCheckboxField: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <>
+      <Tooltip text="Select all users">
+        <CheckboxField labelText="Users" id="sb-checkbox-tooltip--id" />
+      </Tooltip>
+    </>
+  ),
+}
+
+export const CheckboxFieldTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <>
+      <Tooltip text="Select all users">
+        <CheckboxField labelText="Users" id="sb-checkbox-tooltip--id" />
+      </Tooltip>
+    </>
+  ),
+}
+
+export const CheckboxFieldWithDescriptionTooltip: Story = {
+  parameters: {
+    docs: {
+      source: { type: "dynamic" },
+    },
+  },
+  render: () => (
+    <>
+      <Tooltip text="Select all users">
+        <CheckboxField
+          labelText="Users"
+          id="sb-checkbox-tooltip--id"
+          aria-describedby="sb-checkbox-description--id"
+        />
+        <span id="sb-checkbox-description--id" className="sr-only">
+          Select all users
+        </span>
+      </Tooltip>
+    </>
+  ),
+}

package/dist/cjs/Avatar/Avatar.cjs

@@ -1,116 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var classnames = require('classnames');
-var reactTextfit = require('react-textfit');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var UserIcon = require('../Icon/UserIcon.cjs');
-var Avatar_module = require('./Avatar.module.scss.cjs');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var getInitials = function (fullName, max2Characters) {
-  if (max2Characters === void 0) {
-    max2Characters = false;
-  }
-  return fullName == null ? "" : fullName.split(/\s/).reduce(function (acc, name) {
-    return "".concat(acc).concat(name.slice(0, 1));
-  }, "").toUpperCase().substring(0, max2Characters ? 2 : 8);
-};
-var getMaxFontSizePixels = function (size) {
-  if (size === "small") return 8;
-  if (size === "medium") return 16;
-  if (size === "xlarge" || size === "xxlarge") return 34;
-  return 22;
-};
-var fallbackIcon = function (fullName) {
-  if (fullName) {
-    return React__default.default.createElement(UserIcon.UserIcon, {
-      inheritSize: true,
-      role: "img",
-      "aria-label": fullName
-    });
-  }
-  return React__default.default.createElement(UserIcon.UserIcon, {
-    inheritSize: true,
-    role: "presentation"
-  });
-};
-var renderInitials = function (fullName, size, disableInitials) {
-  if (fullName === void 0) {
-    fullName = "";
-  }
-  if (disableInitials === void 0) {
-    disableInitials = false;
-  }
-  var initials = getInitials(fullName);
-  var isLongName = initials.length > 2 && size !== "small";
-  var renderFallback = disableInitials || initials === "";
-  return renderFallback ? React__default.default.createElement("span", {
-    className: Avatar_module.fallbackIcon
-  }, fallbackIcon(fullName)) : React__default.default.createElement("abbr", {
-    className: classnames__default.default(Avatar_module.initials, isLongName && Avatar_module.longName),
-    title: fullName || ""
-  }, isLongName ?
-  // Only called if 3 or more initials, fits text width for long names
-  React__default.default.createElement(reactTextfit.Textfit, {
-    mode: "single",
-    max: getMaxFontSizePixels(size)
-  }, initials) : getInitials(fullName, size === "small"));
-};
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857475/Avatar Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-avatar-avatar--docs Storybook}
- */
-var Avatar = function (_a) {
-  var fullName = _a.fullName,
-    _b = _a.size,
-    size = _b === void 0 ? "medium" : _b,
-    avatarSrc = _a.avatarSrc,
-    _c = _a.disableInitials,
-    disableInitials = _c === void 0 ? false : _c,
-    _d = _a.isCompany,
-    isCompany = _d === void 0 ? false : _d,
-    _e = _a.isCurrentUser,
-    isCurrentUser = _e === void 0 ? true : _e,
-    classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["fullName", "size", "avatarSrc", "disableInitials", "isCompany", "isCurrentUser", "classNameOverride"]);
-  var _f = React.useState(avatarSrc ? "loading" : "none"),
-    avatarState = _f[0],
-    setAvatarState = _f[1];
-  var image = React.useRef(null);
-  var renderInitialAvatar = !isCompany && (avatarState === "none" || avatarState === "error");
-  React.useEffect(function () {
-    setAvatarState(avatarSrc ? "loading" : "none");
-  }, [avatarSrc]);
-  var onImageFailure = function () {
-    return setAvatarState("error");
-  };
-  var onImageSuccess = function () {
-    return setAvatarState("success");
-  };
-  // if the image is cached onLoad may not trigger: https://stackoverflow.com/a/59809184
-  React.useEffect(function () {
-    var _a;
-    if ((_a = image === null || image === void 0 ? void 0 : image.current) === null || _a === void 0 ? void 0 : _a.complete) onImageSuccess();
-  }, [image]);
-  var isNoneOrError = avatarState === "none" || avatarState === "error";
-  var isPersonal = isNoneOrError && isCurrentUser;
-  var isOtherUser = isNoneOrError && !isCurrentUser;
-  return React__default.default.createElement("span", tslib.__assign({
-    className: classnames__default.default(Avatar_module.wrapper, Avatar_module[size], classNameOverride, isCompany && Avatar_module.company, isPersonal && Avatar_module.personal, isOtherUser && Avatar_module.otherUser, (avatarState === "loading" || avatarState === "error") && Avatar_module.loading)
-  }, restProps), avatarState !== "none" && React__default.default.createElement("img", {
-    ref: image,
-    className: classnames__default.default(Avatar_module.avatarImage, isCompany && Avatar_module.companyAvatarImage),
-    src: avatarSrc,
-    onError: onImageFailure,
-    onLoad: onImageSuccess,
-    alt: fullName || ""
-  }), renderInitialAvatar && renderInitials(fullName, size, disableInitials));
-};
-exports.Avatar = Avatar;

package/dist/cjs/Avatar/Avatar.module.scss.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "Avatar-module_wrapper__LY2q2",
-  "small": "Avatar-module_small__PeksS",
-  "personal": "Avatar-module_personal__2U7--",
-  "otherUser": "Avatar-module_otherUser__b-drl",
-  "company": "Avatar-module_company__2qtJE",
-  "initials": "Avatar-module_initials__VDY2Q",
-  "medium": "Avatar-module_medium__Vy3V8",
-  "large": "Avatar-module_large__qiNWs",
-  "xlarge": "Avatar-module_xlarge__Vx4IG",
-  "xxlarge": "Avatar-module_xxlarge__oOoGq",
-  "avatarImage": "Avatar-module_avatarImage__FuULy",
-  "loading": "Avatar-module_loading__i9V-D",
-  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
-  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
-  "longName": "Avatar-module_longName__31Yuf"
-};
-module.exports = styles;

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -1,52 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var classnames = require('classnames');
-var Avatar = require('../Avatar/Avatar.cjs');
-var AvatarGroup_module = require('./AvatarGroup.module.scss.cjs');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var renderCounter = function (remainingAvatars) {
-  if (remainingAvatars <= 0) return;
-  return React__default.default.createElement("li", {
-    "aria-label": "There ".concat(remainingAvatars > 1 ? "are ".concat(remainingAvatars, " other members") : "is ".concat(remainingAvatars, " other member"), " of this group"),
-    className: AvatarGroup_module.AvatarGroupItem
-  }, React__default.default.createElement("span", {
-    className: AvatarGroup_module.AvatarCounter,
-    "aria-hidden": true
-  }, "+".concat(remainingAvatars)));
-};
-var renderAvatars = function (avatars, maxVisible, size) {
-  return React__default.default.createElement(React__default.default.Fragment, null, avatars === null || avatars === void 0 ? void 0 : avatars.map(function (avatarProps, index) {
-    return index < maxVisible && React__default.default.createElement("li", {
-      key: "avatar-".concat(index),
-      className: AvatarGroup_module.AvatarGroupItem
-    }, React__default.default.createElement(Avatar.Avatar, tslib.__assign({}, avatarProps, {
-      size: size
-    })));
-  }), renderCounter((avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible));
-};
-/**
- * {@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}
- */
-var AvatarGroup = function (_a) {
-  var _b = _a.size,
-    size = _b === void 0 ? "medium" : _b,
-    _c = _a.maxVisible,
-    maxVisible = _c === void 0 ? 2 : _c,
-    avatars = _a.avatars,
-    classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["size", "maxVisible", "avatars", "classNameOverride"]);
-  return React__default.default.createElement("ul", tslib.__assign({
-    className: classnames__default.default(AvatarGroup_module.AvatarGroup, AvatarGroup_module[size], classNameOverride),
-    "aria-label": "Avatar Group"
-  }, restProps), renderAvatars(avatars, maxVisible, size));
-};
-exports.AvatarGroup = AvatarGroup;

package/dist/cjs/AvatarGroup/AvatarGroup.module.scss.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var styles = {
-  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
-  "small": "AvatarGroup-module_small__7uv8k",
-  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
-  "medium": "AvatarGroup-module_medium__af52y",
-  "large": "AvatarGroup-module_large__HN9Yy",
-  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl"
-};
-module.exports = styles;

package/dist/cjs/Badge/Badge.cjs

@@ -1,49 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var classnames = require('classnames');
-var Badge_module = require('./Badge.module.scss.cjs');
-function _interopDefault(e) {
-  return e && e.__esModule ? e : {
-    default: e
-  };
-}
-var React__default = /*#__PURE__*/_interopDefault(React);
-var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3064857333/Badge Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-badge--docs Storybook}
- */
-var Badge = function (_a) {
-  var children = _a.children,
-    _b = _a.variant,
-    variant = _b === void 0 ? "default" : _b,
-    _c = _a.reversed,
-    reversed = _c === void 0 ? false : _c,
-    _d = _a.size,
-    size = _d === void 0 ? "small" : _d,
-    classNameOverride = _a.classNameOverride,
-    restProps = tslib.__rest(_a, ["children", "variant", "reversed", "size", "classNameOverride"]);
-  return React__default.default.createElement("span", tslib.__assign({
-    className: classnames__default.default(Badge_module.badge, Badge_module[variant], classNameOverride, reversed && Badge_module.reversed, size === "large" && Badge_module.large)
-  }, restProps), variant !== "dot" && children);
-};
-var BadgeAnimated = function (props) {
-  var _a = React.useState(false),
-    isFocused = _a[0],
-    setIsFocused = _a[1];
-  React.useLayoutEffect(function () {
-    setIsFocused(true);
-    setTimeout(function () {
-      setIsFocused(false);
-    }, 150);
-  }, [props.children]);
-  return React__default.default.createElement("span", {
-    className: classnames__default.default(Badge_module.animation, isFocused && Badge_module.animationOn)
-  }, React__default.default.createElement(Badge, tslib.__assign({}, props)));
-};
-Badge.displayName = "Badge";
-exports.Badge = Badge;
-exports.BadgeAnimated = BadgeAnimated;

package/dist/cjs/Badge/Badge.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "badge": "Badge-module_badge__CRtsW",
-  "large": "Badge-module_large__0QOpY",
-  "default": "Badge-module_default__k4Kcf",
-  "active": "Badge-module_active__-e-i2",
-  "reversed": "Badge-module_reversed__OgQLB",
-  "dark": "Badge-module_dark__RH34a",
-  "dot": "Badge-module_dot__BOKL1",
-  "animation": "Badge-module_animation__NTy6C",
-  "animationOn": "Badge-module_animationOn__nWK38"
-};
-module.exports = styles;