@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

package/lib/components/Avatar/Avatar.stories.js

@@ -1,135 +0,0 @@
-import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
-import CogOutlineIcon from '@pingux/mdi-react/CogOutlineIcon';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Avatar, Box, IconWrapper } from '../../index';
-import { pingImg } from '../../utils/devUtils/constants/images';
-import AvatarReadme from './Avatar.mdx';
-import { avatarArgTypes } from './avatarAttributes';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/Avatar',
-  component: Avatar,
-  parameters: {
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(AvatarReadme, null), ___EmotionJSX(DocsLayout, null));
-      }
-    }
-  },
-  argTypes: avatarArgTypes,
-  args: {
-    src: pingImg
-  }
-};
-export var Default = function Default(_ref) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return ___EmotionJSX(Avatar, args);
-};
-export var SizeVariation = function SizeVariation() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "sm",
-    alignItems: "center"
-  }, ___EmotionJSX(Avatar, {
-    size: "sm",
-    color: "green"
-  }), ___EmotionJSX(Avatar, {
-    size: "md",
-    color: "green"
-  }), ___EmotionJSX(Avatar, {
-    size: "lg",
-    color: "green"
-  }), ___EmotionJSX(Avatar, {
-    size: "xl",
-    color: "green"
-  }));
-};
-export var ColorVariation = function ColorVariation() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "sm",
-    alignItems: "center"
-  }, ___EmotionJSX(Avatar, {
-    color: "green"
-  }), ___EmotionJSX(Avatar, {
-    color: "purple"
-  }), ___EmotionJSX(Avatar, {
-    color: "pink"
-  }), ___EmotionJSX(Avatar, {
-    color: "red"
-  }), ___EmotionJSX(Avatar, {
-    color: "orange"
-  }), ___EmotionJSX(Avatar, {
-    color: "yellow"
-  }), ___EmotionJSX(Avatar, {
-    color: "teal"
-  }), ___EmotionJSX(Avatar, {
-    color: "cyan"
-  }), ___EmotionJSX(Avatar, {
-    color: "blue"
-  }), ___EmotionJSX(Avatar, {
-    color: "indigo"
-  }));
-};
-export var IconVariation = function IconVariation() {
-  return ___EmotionJSX(Avatar, {
-    color: "green"
-  }, ___EmotionJSX(IconWrapper, {
-    icon: CogOutlineIcon,
-    color: "green",
-    size: "xs",
-    title: {
-      name: 'Cog Outline Icon'
-    }
-  }));
-};
-export var ImageVariation = function ImageVariation(_ref2) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  return ___EmotionJSX(Avatar, args);
-};
-export var SquareVariation = function SquareVariation() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "sm",
-    alignItems: "center"
-  }, ___EmotionJSX(Avatar, {
-    color: "green",
-    isSquare: true
-  }), ___EmotionJSX(Avatar, {
-    color: "green",
-    isSquare: true,
-    size: "xmd"
-  }), ___EmotionJSX(Avatar, {
-    color: "green",
-    isSquare: true,
-    size: "lg"
-  }), ___EmotionJSX(Avatar, {
-    color: "green",
-    isSquare: true,
-    size: "xl"
-  }));
-};
-export var LogoVariation = function LogoVariation(args) {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "sm",
-    alignItems: "center"
-  }, ___EmotionJSX(Avatar, _extends({}, args, {
-    isSquare: true,
-    isLogo: true
-  })), ___EmotionJSX(Avatar, _extends({}, args, {
-    isSquare: true,
-    size: "xmd",
-    isLogo: true
-  })), ___EmotionJSX(Avatar, _extends({}, args, {
-    isSquare: true,
-    size: "lg",
-    isLogo: true
-  })), ___EmotionJSX(Avatar, _extends({}, args, {
-    isSquare: true,
-    size: "xl",
-    isLogo: true
-  })));
-};

package/lib/components/Avatar/Avatar.test.js

@@ -1,198 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import React from 'react';
-import { faker } from '@faker-js/faker';
-import { randomUUID } from 'node:crypto';
-import { render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
-import { avatarColors as colors } from './constants';
-import getColorFromUUID from './getColorFromUuid';
-import Avatar from '.';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var src = faker.image.lorempicsum.imageUrl(150, 150, false, undefined, '1');
-var datatestId = 'avatar-component';
-var defaultProps = {
-  src: src,
-  'data-testid': datatestId
-};
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(Avatar, _extends({}, defaultProps, props)));
-};
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Avatar, _extends({}, defaultProps, props));
-  }
-});
-test('an avatar is rendered', function () {
-  getComponent();
-  var img = screen.getByRole('img');
-  expect(img).toBeInstanceOf(HTMLImageElement);
-  expect(img).toBeInTheDocument();
-  expect(img).toHaveAttribute('alt', 'Avatar');
-});
-test('an avatar is rendered with custom alt', function () {
-  getComponent({
-    alt: 'Custom Alt'
-  });
-  var img = screen.getByRole('img');
-  expect(img).toHaveAttribute('alt', 'Custom Alt');
-});
-test('an avatar is rendered with initials', function () {
-  var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
-  getComponent({
-    src: undefined,
-    defaultText: 'KL'
-  });
-  var avatar = screen.getByText('KL');
-  expect(avatar).toBeInTheDocument();
-  warnSpy.mockRestore();
-});
-describe('getColorFromUUID', function () {
-  test('returns a consistent color for the same UUID', function () {
-    var uuid = '123e4567-e89b-12d3-a456-426614174000';
-    var result1 = getColorFromUUID(uuid, colors);
-    var result2 = getColorFromUUID(uuid, colors);
-    expect(result1).toBe(result2);
-  });
-  test('returns a color from the provided array', function () {
-    var uuid = 'random-id';
-    var result = getColorFromUUID(uuid, colors);
-    expect(colors).toContain(result);
-  });
-  test('distributes colors differently for different UUIDs', function () {
-    var colorA = getColorFromUUID('id-1', colors);
-    var colorB = getColorFromUUID('id-2', colors);
-    expect(colorA).not.toBe(colorB);
-  });
-  test('throws error if color array is empty', function () {
-    expect(function () {
-      return getColorFromUUID('uuid', []);
-    }).toThrow('Color array cannot be empty.');
-  });
-  test('uses the specific color class when color prop is provided', function () {
-    getComponent({
-      color: 'blue',
-      colorId: 'some-id'
-    });
-    var avatar = screen.getByTestId(datatestId);
-    expect(avatar).toHaveClass('is-blue');
-  });
-  test('applies a hashed color class from colorId', function () {
-    var uuid = '550e8400-e29b-41d4-a716-446655440000';
-    getComponent({
-      colorId: uuid
-    });
-    var avatar = screen.getByTestId(datatestId);
-    var classList = _Array$from(avatar.classList);
-    var colorClass = _findInstanceProperty(classList).call(classList, function (cls) {
-      return _startsWithInstanceProperty(cls).call(cls, 'is-');
-    });
-    expect(colorClass).toBeDefined();
-    expect(avatar).not.toHaveClass('is-green');
-  });
-  test('defaults to is-green when no color props are passed', function () {
-    getComponent();
-    var avatar = screen.getByTestId(datatestId);
-    expect(avatar).toHaveClass('is-green');
-  });
-});
-describe('Avatar fallback behavior', function () {
-  test('warns in development when no src, color, or colorId is provided', function () {
-    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
-    getComponent({
-      src: undefined
-    });
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("No 'src', 'color', or 'colorId' provided"));
-    warnSpy.mockRestore();
-  });
-  test('does not crash when colorId is null', function () {
-    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
-    getComponent({
-      src: undefined,
-      colorId: null
-    });
-    var avatar = screen.getByTestId(datatestId);
-    var classList = _Array$from(avatar.classList);
-    var colorClass = _findInstanceProperty(classList).call(classList, function (cls) {
-      return _startsWithInstanceProperty(cls).call(cls, 'is-');
-    });
-    expect(colorClass).toBeDefined();
-    warnSpy.mockRestore();
-  });
-  test('two avatars with missing colorId get the same color class', function () {
-    var _context, _context2;
-    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
-    var _render = render(___EmotionJSX(Avatar, {
-        "data-testid": "avatar-1"
-      })),
-      unmount = _render.unmount;
-    var avatar1 = screen.getByTestId('avatar-1');
-    var colorClass1 = _findInstanceProperty(_context = _Array$from(avatar1.classList)).call(_context, function (cls) {
-      return _startsWithInstanceProperty(cls).call(cls, 'is-');
-    });
-    unmount();
-    render(___EmotionJSX(Avatar, {
-      "data-testid": "avatar-2"
-    }));
-    var avatar2 = screen.getByTestId('avatar-2');
-    var colorClass2 = _findInstanceProperty(_context2 = _Array$from(avatar2.classList)).call(_context2, function (cls) {
-      return _startsWithInstanceProperty(cls).call(cls, 'is-');
-    });
-    expect(colorClass1).toBe(colorClass2);
-    warnSpy.mockRestore();
-  });
-  test('does not warn when color prop is provided', function () {
-    var warnSpy = jest.spyOn(console, 'warn').mockImplementation();
-    getComponent({
-      src: undefined,
-      color: 'blue'
-    });
-    expect(warnSpy).not.toHaveBeenCalled();
-    warnSpy.mockRestore();
-  });
-});
-describe('getColorFromUUID Distribution', function () {
-  test('distributes 10,000 UUIDs evenly across 10 colors', function () {
-    var iterations = 10000;
-    var distribution = {};
-    _forEachInstanceProperty(colors).call(colors, function (c) {
-      distribution[c] = 0;
-    });
-    for (var i = 0; i < iterations; i += 1) {
-      var uuid = randomUUID();
-      var selectedColor = getColorFromUUID(uuid, colors);
-      distribution[selectedColor] += 1;
-    }
-    var expectedMean = iterations / colors.length;
-    var allowedVariance = 0.15;
-    _forEachInstanceProperty(colors).call(colors, function (color) {
-      var count = distribution[color];
-      expect(count).toBeGreaterThan(expectedMean * (1 - allowedVariance));
-      expect(count).toBeLessThan(expectedMean * (1 + allowedVariance));
-    });
-  });
-});
-describe('Color Selection Logic', function () {
-  var getResolvedId = function getResolvedId(colorId, defaultText) {
-    return colorId || (defaultText && defaultText !== 'AA' ? defaultText : '_INTERNAL_DEFAULT_ID_');
-  };
-  test('should use colorId if it is provided', function () {
-    expect(getResolvedId('custom-id', 'BB')).toBe('custom-id');
-  });
-  test('should use defaultText if colorId is missing and text is not "AA"', function () {
-    expect(getResolvedId(null, 'BB')).toBe('BB');
-  });
-  test('should use hardcoded string if colorId is missing and text is "AA"', function () {
-    expect(getResolvedId(undefined, 'AA')).toBe('_INTERNAL_DEFAULT_ID_');
-  });
-  test('should use hardcoded string if both colorId and defaultText are null', function () {
-    expect(getResolvedId(null, null)).toBe('_INTERNAL_DEFAULT_ID_');
-  });
-  test('should use hardcoded string if colorId is missing and defaultText is empty string', function () {
-    expect(getResolvedId(null, '')).toBe('_INTERNAL_DEFAULT_ID_');
-  });
-});

package/lib/components/Avatar/stories/Avatar.chromatic.stories.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import WithUiLibraryCss from '../../../styles/themeOverrides/withUiLibraryCss';
-import AvatarNextGen from './AvatarNextGen';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Chromatic Only Avatar',
-  tags: ['!dev', '!autodocs'],
-  decorators: [WithUiLibraryCss]
-};
-export var Default = function Default() {
-  return ___EmotionJSX(AvatarNextGen, null);
-};

package/lib/components/Avatar/stories/AvatarNextGen.chromatic.stories.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { AstroProvider, NextGenTheme } from '../../..';
-import AvatarNextGen from './AvatarNextGen';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Chromatic Only Onyx Avatar',
-  tags: ['!dev', '!autodocs']
-};
-export var Default = function Default() {
-  return ___EmotionJSX(AstroProvider, {
-    theme: NextGenTheme
-  }, ___EmotionJSX(AvatarNextGen, null));
-};

package/lib/components/Avatar/stories/AvatarNextGenDark.chromatic.stories.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { AstroProvider, NextGenDarkTheme } from '../../..';
-import AvatarNextGen from './AvatarNextGen';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Chromatic Only Onyx Dark Avatar',
-  tags: ['!dev', '!autodocs']
-};
-export var Default = function Default() {
-  return ___EmotionJSX(AstroProvider, {
-    themeOverrides: [NextGenDarkTheme]
-  }, ___EmotionJSX(AvatarNextGen, null));
-};

package/lib/components/Badge/Badge.mdx

@@ -1,29 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import * as BadgeStories from './Badge.stories';
-import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
-import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
-
-<Meta of={BadgeStories} isTemplate />
-
-# Badge
-
-Badges are compact Box components used as filtering cues or contextual support. They should be clearly labeled and should not be used as buttons. 
-
-This component uses [props from Theme-UI](https://theme-ui.com/sx-prop).
-
-### Help Hints
-
-Pass a `helpHint` to attach contextual help text to a badge. The badge itself becomes the tooltip
-trigger — no separate icon or button is rendered — and the hint opens on hover or keyboard focus.
-Use `helpHintProps` to customize the tooltip's placement and appearance.
-
-### Required Components
-
-This component can be used independently, and does not require additional components.
-
-### Accessibility
-
-<AccessibilityTable keyboardRows={[
-  KeyboardRows.spaceEnterSelectsComponentSimple,
-  KeyboardRows.tabFocusesComponent,
-]} keyboardDescription="Badge itself is not focusable. However, when components are added to it, these keys provide additional functionality." />

package/lib/components/Badge/Badge.stories.js

@@ -1,284 +0,0 @@
-import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
-import AlertCircleIcon from '@pingux/mdi-react/AlertCircleOutlineIcon';
-import AlertIcon from '@pingux/mdi-react/AlertOutlineIcon';
-import CheckCircleIcon from '@pingux/mdi-react/CheckCircleOutlineIcon';
-import Clear from '@pingux/mdi-react/CloseIcon';
-import CogIcon from '@pingux/mdi-react/CogIcon';
-import InformationCircleIcon from '@pingux/mdi-react/InformationCircleOutlineIcon';
-import PencilOutlineIcon from '@pingux/mdi-react/PencilOutlineIcon';
-import PlusCircleMultipleOutlineIcon from '@pingux/mdi-react/PlusCircleMultipleOutlineIcon';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { useGetTheme } from '../../hooks';
-import { Badge, Box, DefaultBadge, Icon, IconButton } from '../../index';
-import { flatColorList } from '../../styles/colors';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
-import { docArgTypes } from '../../utils/docUtils/docArgTypes.js';
-import BadgeReadme from './Badge.mdx';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/Badge',
-  component: Badge,
-  argTypes: {
-    bg: {
-      control: {
-        type: 'select',
-        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 1),
-            colorName = _ref2[0];
-          return colorName;
-        })
-      }
-    },
-    textColor: {
-      control: {
-        type: 'select',
-        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 1),
-            colorName = _ref4[0];
-          return colorName;
-        })
-      }
-    },
-    label: {
-      control: {
-        type: 'text'
-      }
-    },
-    isUppercase: {
-      control: {
-        type: 'boolean'
-      }
-    },
-    helpHint: {
-      control: {
-        type: docArgTypes.text
-      },
-      table: {
-        type: {
-          summary: docArgTypes.string
-        }
-      }
-    },
-    helpHintProps: {
-      control: {
-        type: docArgTypes.object
-      },
-      table: {
-        type: {
-          summary: 'BadgeHelpHintProps'
-        }
-      }
-    }
-  },
-  args: {
-    label: 'Label',
-    isUppercase: false
-  },
-  parameters: {
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(BadgeReadme, null), ___EmotionJSX(DocsLayout, null));
-      }
-    }
-  }
-};
-export var Default = function Default(_ref5) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref5), _ref5));
-  return ___EmotionJSX(Badge, _extends({
-    label: "Label"
-  }, args));
-};
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.badge["default"]
-  }
-};
-export var CountBadge = function CountBadge(args) {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "xs"
-  }, ___EmotionJSX(Badge, _extends({}, args, {
-    label: "4",
-    variant: "countBadge"
-  })), ___EmotionJSX(Badge, _extends({}, args, {
-    label: "4",
-    variant: "countNeutral"
-  })));
-};
-CountBadge.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.badge.countBadge
-  }
-};
-export var BadgeWithCustomColors = function BadgeWithCustomColors(args) {
-  var _useGetTheme = useGetTheme(),
-    isOnyx = _useGetTheme.themeState.isOnyx;
-  var bg = isOnyx ? 'indigo-100' : 'green';
-  var textColor = isOnyx ? 'cyan-800' : 'white';
-  return ___EmotionJSX(Badge, _extends({}, args, {
-    label: "Custom Colors",
-    bg: bg,
-    textColor: textColor,
-    sx: {
-      color: textColor
-    }
-  }));
-};
-export var BadgeWithIcon = function BadgeWithIcon() {
-  var _useGetTheme2 = useGetTheme(),
-    isOnyx = _useGetTheme2.themeState.isOnyx;
-  return ___EmotionJSX(Box, {
-    gap: "10px"
-  }, !isOnyx ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
-    label: "Badge with Icon Button",
-    bg: "navy",
-    textColor: "white"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "Setting Badge with Icon Button",
-    variant: "inverted",
-    ml: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: CogIcon,
-    size: "14px",
-    title: {
-      name: 'Setting Icon'
-    }
-  }))), ___EmotionJSX(Badge, {
-    label: "Badge with Icon Button"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "Clear Badge with Icon Button",
-    variant: "inverted",
-    ml: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: Clear,
-    size: "14px",
-    title: {
-      name: 'Clear Icon'
-    }
-  }))), ___EmotionJSX(Badge, {
-    label: "Badge with Icon",
-    bg: "green",
-    textColor: "white"
-  }, ___EmotionJSX(Icon, {
-    icon: PencilOutlineIcon,
-    ml: "xs",
-    size: "14px",
-    color: "white",
-    "aria-hidden": "true",
-    focusable: "false",
-    title: {
-      name: 'Edit Icon'
-    }
-  }))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Badge, {
-    label: "Badge with Icon Button",
-    variant: "primary"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "Setting Badge with Icon Button",
-    ml: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: CogIcon,
-    size: "xxs",
-    title: {
-      name: 'Setting Icon'
-    }
-  }))), ___EmotionJSX(Badge, {
-    label: "Badge with Icon Button"
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "Clear Badge with Icon Button",
-    ml: "xs"
-  }, ___EmotionJSX(Icon, {
-    icon: Clear,
-    size: "xxs",
-    title: {
-      name: 'Clear Icon'
-    }
-  }))), ___EmotionJSX(Badge, {
-    label: "Badge with Icon",
-    variant: "success"
-  }, ___EmotionJSX(Icon, {
-    icon: PencilOutlineIcon,
-    ml: "xs",
-    size: "14px",
-    "aria-hidden": "true",
-    focusable: "false",
-    title: {
-      name: 'Edit Icon'
-    }
-  }))));
-};
-export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
-  return ___EmotionJSX(Badge, {
-    label: "Badge with Icon Button and Left Slot",
-    bg: "white",
-    variant: "itemBadgeWithSlot",
-    slots: {
-      leftIcon: ___EmotionJSX(Icon, {
-        icon: PlusCircleMultipleOutlineIcon,
-        size: 16,
-        color: "text.primary"
-      })
-    }
-  }, ___EmotionJSX(IconButton, {
-    "aria-label": "delete",
-    variant: "badgeDeleteButton"
-  }, ___EmotionJSX(Icon, {
-    icon: Clear,
-    size: 14,
-    title: {
-      name: 'Clear Icon'
-    }
-  })));
-};
-export var StatusBadgeVariants = function StatusBadgeVariants() {
-  var statusBadges = [['criticalStatusBadge', 'Critical', AlertCircleIcon], ['warningStatusBadge', 'Warning', AlertIcon], ['healthyStatusBadge', 'Healthy', CheckCircleIcon], ['activeStatusBadge', 'Active', InformationCircleIcon], ['secondaryStatusBadge', 'Secondary', InformationCircleIcon]];
-  return ___EmotionJSX(Box, {
-    gap: "md"
-  }, _mapInstanceProperty(statusBadges).call(statusBadges, function (_ref6) {
-    var _ref7 = _slicedToArray(_ref6, 3),
-      variant = _ref7[0],
-      label = _ref7[1],
-      icon = _ref7[2];
-    return ___EmotionJSX(Box, {
-      key: variant,
-      isRow: true,
-      alignItems: "center",
-      gap: "md"
-    }, ___EmotionJSX(Badge, {
-      variant: variant,
-      label: label,
-      slots: {
-        leftIcon: ___EmotionJSX(Icon, {
-          icon: icon,
-          size: "xs"
-        })
-      }
-    }), ___EmotionJSX(Badge, {
-      variant: variant,
-      label: label
-    }));
-  }));
-};
-StatusBadgeVariants.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.badge.statusVariants
-  }
-};
-export var Customizations = function Customizations() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    gap: "lg"
-  }, ___EmotionJSX(DefaultBadge, {
-    label: "Customized Hint",
-    helpHint: "This hint opens to the right of the badge, with a light background.",
-    helpHintProps: {
-      direction: 'right'
-    }
-  }));
-};