@helsenorge/designsystem-react 12.12.2 → 12.12.3

package/src/components/ElementHeader/ElementHeader.tsx

@@ -1,251 +0,0 @@
-import React from 'react';
-
-import cn from 'classnames';
-
-import ElementHeaderText, { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';
-import { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';
-import { isComponent, isComponentWithChildren } from '../../utils/component';
-import Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';
-import Badge, { BadgeProps, BadgeType } from '../Badge';
-import Icon, { IconProps, IconSize, SvgIcon } from '../Icon';
-import StatusDot, { StatusDotProps, StatusDotType } from '../StatusDot';
-import { TitleTags } from '../Title';
-import StatusDotList from './StatusDotList';
-import Highlighter from '../Highlighter';
-import { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';
-
-import styles from './styles.module.scss';
-
-export type ElementHeaderSize = 'small' | 'medium' | 'large';
-export type ParentType = 'linklist' | 'expanderlist';
-
-export interface ElementHeaderType extends React.FC<ElementHeaderProps> {
-  Avatar?: AvatarType;
-  Badge?: BadgeType;
-  ElementHeaderText?: ElementHeaderTextType;
-  StatusDot?: StatusDotType;
-  StatusDotList?: StatusDotListType;
-}
-
-export const renderElementHeader = (
-  element: React.ReactNode,
-  options: Pick<ElementHeaderProps, 'titleHtmlMarkup' | 'isHovered' | 'size' | 'parentType' | 'chevronIcon' | 'icon' | 'highlightText'>
-): React.ReactElement | undefined => {
-  const { titleHtmlMarkup, isHovered, size, parentType, chevronIcon, icon, highlightText } = options;
-
-  if (isComponent<ElementHeaderProps>(element, ElementHeader)) {
-    return React.cloneElement(element, {
-      chevronIcon,
-      icon,
-      isHovered,
-      size,
-      parentType,
-      highlightText,
-    });
-  }
-  if (element) {
-    return (
-      <ElementHeader
-        highlightText={highlightText}
-        titleHtmlMarkup={titleHtmlMarkup}
-        parentType={parentType}
-        chevronIcon={chevronIcon}
-        icon={icon}
-        isHovered={isHovered}
-        size={size}
-      >
-        {element}
-      </ElementHeader>
-    );
-  }
-};
-
-export interface ElementHeaderProps {
-  /** Adds custom classes to the ElementHeader element. */
-  className?: string;
-  /** Chevron to render inside of the ElementHeader */
-  chevronIcon?: SvgIcon;
-  /** Children to be rendered inside of ElementHeader */
-  children: React.ReactNode;
-  /** Changes the underlying element of the title. Default: h2*/
-  titleHtmlMarkup?: TitleTags;
-  /** icon to be rendered inside of ElementHeader */
-  icon?: React.ReactElement;
-  /** whether or not the parent is hovered */
-  isHovered?: boolean;
-  /** Adjusts styling based on parent */
-  parentType?: ParentType;
-  /** Changes size of the ElementHeader. */
-  size?: ElementHeaderSize;
-  /** Sets the data-testid attribute. */
-  testId?: string;
-  /** Highlights text in title. Used for search results */
-  highlightText?: string;
-}
-
-interface ElementHeaderChildren {
-  avatarChild?: React.ReactElement<AvatarProps>;
-  elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];
-  badgeChildren?: React.ReactElement<BadgeProps>[];
-  statusDotChildren?: React.ReactElement<StatusDotProps>[];
-  statusDotMCChild?: React.ReactElement<StatusDotListProps>;
-  elementChild?: React.ReactElement;
-  stringChildren: string[];
-  remainingChildren: React.ReactNode[];
-}
-
-type ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ElementHeaderChildren | undefined;
-
-export const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {
-  let avatarChild: React.ReactElement<AvatarProps> | undefined;
-  const badgeChildren: React.ReactElement<BadgeProps>[] = [];
-  const statusDotChildren: React.ReactElement<StatusDotProps>[] = [];
-  let statusDotMCChild: React.ReactElement<StatusDotListProps> | undefined;
-  const elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[] = [];
-  const stringChildren: string[] = [];
-  const remainingChildren: React.ReactNode[] = [];
-
-  React.Children.forEach(children, child => {
-    if (child === null || typeof child === 'undefined') return;
-    if (isComponent<AvatarProps>(child, Avatar)) {
-      avatarChild = child;
-    } else if (isComponent<ElementHeaderTextProps>(child, ElementHeaderText)) {
-      elementHeaderTextChildren.push(child);
-    } else if (isComponent<BadgeProps>(child, Badge)) {
-      badgeChildren.push(child);
-    } else if (isComponent<StatusDotListProps>(child, StatusDotList)) {
-      statusDotMCChild = child;
-    } else if (isComponent<StatusDotProps>(child, StatusDot)) {
-      statusDotChildren.push(child);
-    } else if (typeof child === 'string') {
-      stringChildren.push(child);
-    } else {
-      remainingChildren.push(child);
-    }
-  });
-
-  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.
-  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.
-  const hasSpecialChildren =
-    avatarChild !== undefined ||
-    elementHeaderTextChildren.length > 0 ||
-    statusDotChildren.length > 0 ||
-    statusDotMCChild !== undefined ||
-    (badgeChildren !== undefined && stringChildren.length > 0);
-  const noRemainingRecursiveChildren =
-    remainingChildren.length === 0 ||
-    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');
-
-  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {
-    return {
-      avatarChild,
-      elementHeaderTextChildren: elementHeaderTextChildren,
-      badgeChildren,
-      statusDotChildren,
-      statusDotMCChild,
-      stringChildren,
-      remainingChildren,
-    };
-  }
-
-  if (isComponentWithChildren(remainingChildren[0])) {
-    return mapChildren(remainingChildren[0]?.props?.children, true);
-  }
-};
-
-export const ElementHeaderRoot: ElementHeaderType = props => {
-  const {
-    className = '',
-    titleHtmlMarkup = 'h2',
-    parentType = 'linklist',
-    chevronIcon,
-    children,
-    icon,
-    isHovered,
-    size,
-    testId,
-    highlightText,
-  } = props;
-  const breakpoint = useBreakpoint();
-  const showIcon = size !== 'small' && !!icon;
-  const contentIsString = typeof children === 'string';
-  const mappedChildren = mapChildren(children);
-  const hasStatusDots = !!mappedChildren?.statusDotChildren?.length || !!mappedChildren?.statusDotMCChild;
-
-  const listLabelClasses = cn(styles['element-header'], className);
-  const badgeContainerClasses = cn(styles['element-header__badge-container']);
-  const badgeClasses = cn(styles['element-header__badge']);
-  const statusdotContainerClasses = cn(styles['element-header__statusdot-container']);
-  const chevronClasses = cn(styles['element-header__chevron']);
-  const contentClasses = cn(styles['element-header__content'], {
-    [styles['element-header__content--element']]: !contentIsString,
-  });
-  const iconClasses = cn(styles['element-header__icon'], { [styles['element-header__icon--with-statusdot']]: hasStatusDots });
-  const avatarClasses = cn(styles['element-header__avatar'], {});
-  const CustomTag = titleHtmlMarkup;
-  const iconPropIsIconComponent = isComponent<IconProps>(icon, Icon);
-
-  return (
-    <span data-testid={testId} className={listLabelClasses}>
-      {showIcon && icon && (
-        <span className={iconClasses}>
-          {iconPropIsIconComponent
-            ? React.cloneElement(icon, {
-                size: breakpoint < Breakpoint.md ? IconSize.XSmall : IconSize.Small,
-                isHovered,
-              })
-            : icon}
-        </span>
-      )}
-      {size !== 'small' && mappedChildren?.avatarChild && (
-        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>
-      )}
-
-      <span className={contentClasses} data-hasstatusdots={hasStatusDots}>
-        {mappedChildren?.elementHeaderTextChildren}
-        {!!mappedChildren?.stringChildren.length && (
-          <CustomTag className={styles['element-header__title']}>
-            <Highlighter searchText={highlightText}>{mappedChildren.stringChildren}</Highlighter>
-          </CustomTag>
-        )}
-        <Highlighter searchText={highlightText}>{mappedChildren?.remainingChildren}</Highlighter>
-      </span>
-
-      {hasStatusDots && (
-        <span className={statusdotContainerClasses}>
-          {!!mappedChildren?.statusDotChildren && <StatusDotList>{mappedChildren.statusDotChildren}</StatusDotList>}
-          {!!mappedChildren?.statusDotMCChild && mappedChildren?.statusDotMCChild}
-        </span>
-      )}
-
-      <span className={badgeContainerClasses}>
-        {mappedChildren?.badgeChildren &&
-          mappedChildren.badgeChildren.map((badgeChild, index) => {
-            return (
-              <span key={index} className={badgeClasses} data-parenttype={parentType}>
-                {badgeChild}
-              </span>
-            );
-          })}
-      </span>
-      {chevronIcon && (
-        <span className={chevronClasses} data-parenttype={parentType}>
-          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />
-        </span>
-      )}
-    </span>
-  );
-};
-
-type ElementHeaderComponent = typeof ElementHeaderRoot & {
-  Text: React.FC<ElementHeaderTextProps>;
-  StatusDotList: React.FC<StatusDotListProps>;
-};
-ElementHeaderRoot.displayName = 'ElementHeader';
-const ElementHeader = ElementHeaderRoot as ElementHeaderComponent;
-ElementHeader.Text = ElementHeaderText;
-ElementHeader.Text.displayName = 'ElementHeader.Text';
-ElementHeader.StatusDotList = StatusDotList;
-ElementHeader.StatusDotList.displayName = 'ElementHeader.StatusDotList';
-
-export default ElementHeader;

package/src/components/ElementHeader/ElementHeaderText/ElementHeaderText.stories.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-
-import { StoryObj, Meta } from '@storybook/react-vite';
-import { Docs } from 'frankenstein-build-tools';
-
-import ElementHeaderText from './ElementHeaderText';
-import { allTitleTags } from '../../../../.storybook/knobs';
-import ElementHeader from '../ElementHeader';
-
-const meta = {
-  title: '@helsenorge/designsystem-react/_Internal/ElementHeader/Text',
-  component: ElementHeaderText,
-  parameters: {
-    docs: {
-      page: (): React.JSX.Element => <Docs component={ElementHeaderText} />,
-    },
-  },
-  args: {
-    firstText: 'Element header text',
-  },
-  argTypes: {
-    firstText: {
-      control: 'text',
-      description: 'The first text in the ElementHeaderText Component',
-    },
-    firstTextEmphasised: {
-      control: 'boolean',
-      description: 'Will style the first text as bold',
-    },
-    secondText: {
-      control: 'text',
-      description: 'The second text in the ElementHeaderText Component',
-    },
-    secondTextEmphasised: {
-      control: 'boolean',
-      description: 'Will style the second text as bold',
-    },
-    subText: {
-      control: 'boolean',
-      description: 'Whether or not this ElementHeaderText is a sub text',
-    },
-    className: {
-      control: 'text',
-      description: 'Adds custom classes to the ElementHeaderText component.',
-    },
-    testId: {
-      control: 'text',
-      description: 'Sets the data-testid attribute.',
-    },
-    titleHtmlMarkup: {
-      control: 'select',
-      options: allTitleTags,
-      description: 'Changes the underlying element of the text. Default: span',
-    },
-  },
-} satisfies Meta<typeof ElementHeaderText>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-  render: args => (
-    <ElementHeader>
-      <ElementHeader.Text {...args} />
-    </ElementHeader>
-  ),
-};

package/src/components/ElementHeader/ElementHeaderText/ElementHeaderText.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-
-import cn from 'classnames';
-
-import Highlighter from '../../Highlighter';
-import { TitleTags } from '../../Title';
-import styles from '../styles.module.scss';
-
-export type ElementHeaderTextType = React.FC<ElementHeaderTextProps>;
-
-export interface ElementHeaderTextProps {
-  /** The first text in the ElementHeaderText Component */
-  firstText: string;
-  /** Will style the first text as bold */
-  firstTextEmphasised?: boolean;
-  /** The second text in the ElementHeaderText Component */
-  secondText?: string;
-  /** Will style the second text as bold */
-  secondTextEmphasised?: boolean;
-  /** Whether or not this ElementHeaderText is a sub text */
-  subText?: boolean;
-  /** Adds custom classes to the ElementHeaderText component. */
-  className?: string;
-  /** Sets the data-testid attribute. */
-  testId?: string;
-  /** Changes the underlying element of the text. Default: span*/
-  titleHtmlMarkup?: TitleTags;
-  /** Highlights text. Used for search results */
-  highlightText?: string;
-}
-
-export const ElementHeaderText: ElementHeaderTextType = props => {
-  const {
-    firstText,
-    firstTextEmphasised = false,
-    secondText = undefined,
-    secondTextEmphasised = false,
-    subText = false,
-    className = '',
-    testId,
-    titleHtmlMarkup = 'span',
-    highlightText,
-  } = props;
-
-  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {
-    [styles['text-wrapper--sub-level']]: subText,
-  });
-  const firstHeaderTextSegmentClasses = cn({
-    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,
-  });
-  const secondHeaderTextSegmentClasses = cn({
-    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,
-  });
-  const CustomTag = titleHtmlMarkup;
-
-  return (
-    <span data-testid={testId} className={headerTextWrapperClasses}>
-      <CustomTag className={styles['element-header__title']}>
-        <Highlighter searchText={highlightText}>
-          <span className={firstHeaderTextSegmentClasses}>{firstText}</span>
-          {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}
-        </Highlighter>
-      </CustomTag>
-    </span>
-  );
-};
-
-export default ElementHeaderText;

package/src/components/ElementHeader/ElementHeaderText/index.ts

@@ -1,3 +0,0 @@
-import ElementHeaderText from './ElementHeaderText';
-export * from './ElementHeaderText';
-export default ElementHeaderText;

package/src/components/ElementHeader/StatusDotList/StatusDotList.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { StoryObj, Meta } from '@storybook/react-vite';
-import { Docs } from 'frankenstein-build-tools';
-
-import ElementHeader from '../ElementHeader';
-import StatusDotList from './StatusDotList';
-import StatusDot, { StatusDotVariant } from '../../StatusDot';
-
-const meta = {
-  title: '@helsenorge/designsystem-react/_Internal/ElementHeader/StatusDotList',
-  component: StatusDotList,
-  parameters: {
-    docs: {
-      page: (): React.JSX.Element => <Docs component={StatusDotList} />,
-    },
-  },
-  args: {},
-  argTypes: {},
-} satisfies Meta<typeof StatusDotList>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-  render: args => (
-    <ElementHeader>
-      <ElementHeader.StatusDotList {...args}>
-        <StatusDot variant={StatusDotVariant.success} text="Label" />
-        <StatusDot variant={StatusDotVariant.recurring} text="Label" />
-        <StatusDot variant={StatusDotVariant.group} text="Label" />
-      </ElementHeader.StatusDotList>
-    </ElementHeader>
-  ),
-};

package/src/components/ElementHeader/StatusDotList/StatusDotList.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import cn from 'classnames';
-
-import StatusDot, { StatusDotProps, StatusDotVariant } from '../../StatusDot';
-
-import styles from './styles.module.scss';
-
-export type StatusDotListType = React.FC<StatusDotListProps>;
-
-export interface StatusDotListProps {
-  /** Additional text to the bottom statusdot */
-  additionalText?: string;
-  /** StatusDot that is under the others and outside the stacking */
-  bottomStatusDot?: React.ReactElement<StatusDotProps>;
-  /** Stacking of the statusdots  */
-  stacking?: 'vertical' | 'horizontal';
-  /** StatusDots as children */
-  children?: React.ReactNode;
-  /** Adds custom classes */
-  className?: string;
-  /** Show a hidden for child statusdot over the other */
-  hiddenForChild?: boolean;
-  /** Sets the data-testid attribute. */
-  testId?: string;
-  /** StatusDot that is over the others and outside the stacking */
-  topStatusDot?: React.ReactElement<StatusDotProps>;
-}
-
-export const StatusDotList: StatusDotListType = props => {
-  const {
-    additionalText,
-    children,
-    className = '',
-    testId,
-    stacking = 'horizontal',
-    hiddenForChild = false,
-    topStatusDot,
-    bottomStatusDot,
-  } = props;
-
-  return (
-    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>
-      {topStatusDot}
-      {/* @todo: legg til tekst i SOT */}
-      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text="Skjult for barnet" />}
-      <span data-stacking={stacking} className={styles['statusdotlist__children']}>
-        {children}
-      </span>
-      {bottomStatusDot}
-      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}
-    </span>
-  );
-};
-
-export default StatusDotList;

package/src/components/ElementHeader/StatusDotList/index.ts

@@ -1,3 +0,0 @@
-import StatusDotList from './StatusDotList';
-export * from './StatusDotList';
-export default StatusDotList;

package/src/components/ElementHeader/index.ts

@@ -1,3 +0,0 @@
-import ElementHeader from './ElementHeader';
-export * from './ElementHeader';
-export default ElementHeader;

package/src/components/EmptyState/EmptyBoxBeeMedium.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-
-import { EmptyStateIllustrationProps } from './EmptyState';
-
-const EmptyBoxBeeMedium: React.FC<EmptyStateIllustrationProps> = ({ color, svgProperties }) => {
-  const palette = (() => {
-    switch (color) {
-      case 'blueberry':
-        return {
-          light: '#CAE7ED',
-          dark: '#AFDAE3',
-        };
-      case 'cherry':
-        return {
-          light: '#F7E1D2',
-          dark: '#EEC0A5',
-        };
-      default:
-        return {
-          light: '#F5F3F3',
-          dark: '#EAE7E7',
-        };
-    }
-  })();
-
-  return (
-    <svg width="132" height="132" viewBox="0 0 132 132" {...svgProperties}>
-      <path d="M66.0445 66.4768V118.755L25.207 104.674V53.6095L66.0445 66.4768Z" fill={palette.dark} />
-      <path d="M25.1984 53.6095L14.0254 79.7274L54.8716 92.9885L66.0446 66.4664L25.1984 53.6095Z" fill={palette.light} />
-      <path d="M66.0443 66.4891V41.2087L106.882 53.6058" fill={palette.dark} />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M78.5763 18.8076C79.0277 18.8695 79.3434 19.2857 79.2814 19.7371C79.1182 20.926 79.3609 22.348 79.8056 23.7065C80.2476 25.0571 80.8609 26.2595 81.3546 26.9836C81.6113 27.36 81.5142 27.8733 81.1378 28.13C80.7613 28.3867 80.248 28.2896 79.9914 27.9131C79.4008 27.047 78.7224 25.7015 78.2374 24.2197C77.755 22.7459 77.4355 21.0513 77.6467 19.5127C77.7087 19.0613 78.1249 18.7456 78.5763 18.8076Z"
-        fill="black"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M81.3303 17.2706C81.7682 17.3965 82.0211 17.8535 81.8952 18.2914C81.754 18.7825 81.7534 19.4366 81.8932 20.2206C82.0313 20.9948 82.2953 21.8357 82.624 22.6671C83.2829 24.3335 84.1667 25.8743 84.6765 26.6219C84.9331 26.9984 84.836 27.5116 84.4596 27.7683C84.0831 28.025 83.5699 27.9279 83.3132 27.5514C82.7387 26.7088 81.796 25.0603 81.0896 23.2738C80.7357 22.3787 80.4324 21.4274 80.2688 20.5103C80.107 19.6029 80.0704 18.6667 80.3095 17.8354C80.4354 17.3976 80.8924 17.1446 81.3303 17.2706Z"
-        fill="black"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M84.3326 16.6089C84.5611 16.5069 84.7937 16.3306 85.0147 16.0669C85.426 15.576 85.7423 14.8341 85.8144 13.9532C85.8864 13.0723 85.6948 12.2889 85.3686 11.7377C85.0413 11.1844 84.6244 10.9258 84.2328 10.8937C83.8412 10.8617 83.3879 11.0492 82.975 11.542C82.8631 11.6756 82.7582 11.8277 82.6633 11.9963C82.6895 12.02 82.7155 12.044 82.7413 12.0683C83.6047 12.8795 84.18 13.8846 84.3834 14.8843C84.5002 15.4584 84.4966 16.0561 84.3326 16.6089ZM79.4366 18.144C78.2337 18.732 77.1911 19.4446 76.3751 20.2294C74.9865 21.5648 74.1117 23.2671 74.57 24.9673C75.0282 26.6675 76.6402 27.6995 78.5117 28.1561C80.4163 28.6207 82.7991 28.5568 85.2269 27.9024C87.6548 27.248 89.7469 26.1056 91.1599 24.7467C92.5485 23.4113 93.4233 21.709 92.965 20.0088C92.5068 18.3087 90.8948 17.2767 89.0233 16.8201C88.3101 16.6461 87.53 16.5462 86.7055 16.5237C87.1187 15.8287 87.3852 14.9886 87.4589 14.0876C87.5554 12.9069 87.3082 11.7755 86.7887 10.8975C86.2704 10.0215 85.4347 9.3365 84.3673 9.24923C83.2999 9.16196 82.364 9.70214 81.7103 10.4822C81.5602 10.6614 81.422 10.856 81.297 11.0638C80.8163 10.8289 80.3191 10.6731 79.8285 10.6048C78.8204 10.4645 77.7639 10.6913 77.0306 11.4718C76.2973 12.2524 76.1367 13.321 76.3396 14.3183C76.5429 15.3181 77.1182 16.3231 77.9817 17.1343C78.429 17.5546 78.9234 17.8945 79.4366 18.144ZM77.5188 21.4187C76.3173 22.5742 75.9339 23.6877 76.1631 24.5379C76.3923 25.388 77.2833 26.158 78.9028 26.5531C80.4893 26.9401 82.5856 26.9055 84.7975 26.3092C87.0094 25.713 88.8392 24.6894 90.0162 23.5574C91.2177 22.4019 91.6011 21.2884 91.3719 20.4383C91.1427 19.5881 90.2517 18.8182 88.6322 18.4231C87.0457 18.036 84.9494 18.0706 82.7375 18.6669C80.5256 19.2631 78.6958 20.2868 77.5188 21.4187ZM79.1115 15.9318C78.4673 15.3266 78.0841 14.6169 77.9564 13.9894C77.8283 13.3594 77.9641 12.888 78.2331 12.6016C78.5022 12.3153 78.9641 12.1504 79.6009 12.2391C80.2352 12.3274 80.9674 12.6657 81.6115 13.2708C82.2556 13.876 82.6389 14.5857 82.7665 15.2133C82.8947 15.8433 82.7589 16.3146 82.4899 16.601C82.2208 16.8874 81.7588 17.0523 81.1221 16.9636C80.4878 16.8753 79.7556 16.537 79.1115 15.9318Z"
-        fill="black"
-      />
-      <path
-        d="M86.9232 22.0241C87.2764 21.985 87.531 21.667 87.4919 21.3138C87.4529 20.9606 87.1348 20.7059 86.7816 20.745C86.4284 20.7841 86.1738 21.1021 86.2129 21.4553C86.252 21.8085 86.57 22.0632 86.9232 22.0241Z"
-        fill="black"
-      />
-      <path
-        d="M71.3422 26.792C71.5558 27.1944 71.4028 27.6938 71.0003 27.9075C70.5514 28.1458 70.1064 28.3646 69.6658 28.5662C69.2515 28.7558 68.7619 28.5736 68.5723 28.1593C68.3827 27.745 68.5649 27.2554 68.9792 27.0658C69.3914 26.8772 69.8073 26.6728 70.2267 26.4501C70.6291 26.2365 71.1285 26.3895 71.3422 26.792Z"
-        fill="black"
-      />
-      <path
-        d="M66.0673 29.0626C66.193 29.5006 65.9398 29.9575 65.5018 30.0832C64.5253 30.3634 63.5803 30.5934 62.6796 30.8068C62.2362 30.9118 61.7916 30.6375 61.6866 30.1941C61.5816 29.7507 61.8559 29.3062 62.2993 29.2012C63.1952 28.989 64.1091 28.7662 65.0467 28.4972C65.4847 28.3715 65.9416 28.6247 66.0673 29.0626Z"
-        fill="black"
-      />
-      <path
-        d="M59.1028 30.838C59.2465 31.2704 59.0125 31.7374 58.5801 31.8811C57.6914 32.1764 56.8722 32.5224 56.1157 32.9692C55.7234 33.201 55.2176 33.0708 54.9858 32.6785C54.7541 32.2862 54.8843 31.7803 55.2766 31.5486C56.161 31.0262 57.0945 30.636 58.0597 30.3153C58.4921 30.1716 58.9591 30.4056 59.1028 30.838Z"
-        fill="black"
-      />
-      <path
-        d="M71.5541 54.5886C71.865 54.2555 72.3871 54.2375 72.7201 54.5484C73.4346 55.2153 74.0197 55.99 74.3965 56.8919C74.5722 57.3124 74.3737 57.7956 73.9533 57.9712C73.5329 58.1468 73.0497 57.9484 72.874 57.528C72.6037 56.881 72.1714 56.2933 71.5943 55.7546C71.2612 55.4437 71.2432 54.9217 71.5541 54.5886Z"
-        fill="black"
-      />
-      <path
-        d="M74.0043 60.1656C74.4453 60.2803 74.7097 60.7308 74.5949 61.1717C74.4833 61.6006 74.3355 62.0413 74.1504 62.4944C73.9781 62.9162 73.4965 63.1184 73.0747 62.9461C72.6529 62.7738 72.4506 62.2922 72.6229 61.8704C72.7827 61.4792 72.9065 61.1081 72.9981 60.7562C73.1129 60.3152 73.5634 60.0508 74.0043 60.1656Z"
-        fill="black"
-      />
-      <path
-        d="M59.5522 50.4407C59.6487 49.9954 60.0879 49.7126 60.5332 49.809C61.3282 49.9812 62.1755 50.1663 63.0418 50.3722C63.4851 50.4775 63.759 50.9223 63.6537 51.3656C63.5483 51.8089 63.1036 52.0828 62.6603 51.9775C61.8115 51.7758 60.9783 51.5937 60.1839 51.4216C59.7386 51.3252 59.4558 50.886 59.5522 50.4407Z"
-        fill="black"
-      />
-      <path
-        d="M53.4951 47.9978C53.7638 47.6298 54.2799 47.5494 54.6479 47.8181L56.86 48.9392C57.2965 49.0698 57.5444 49.5296 57.4138 49.9661C57.2831 50.4026 56.8233 50.6505 56.3868 50.5199L55.0539 50.009C54.3809 49.7338 52.9854 48.9392 53.4951 47.9978Z"
-        fill="black"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M50.414 41.3585C50.8676 41.3164 51.2696 41.65 51.3117 42.1037C51.394 42.9898 51.6245 43.8331 51.985 44.6147L65.8048 40.4194C65.8834 40.3955 65.9642 40.3838 66.0444 40.3838C66.1247 40.3838 66.2054 40.3955 66.2841 40.4194L107.122 52.8165C107.158 52.8275 107.193 52.8407 107.226 52.8561C107.41 52.9381 107.564 53.0872 107.649 53.2852L118.822 79.4032C118.913 79.6163 118.911 79.8578 118.815 80.0688C118.719 80.2798 118.539 80.4408 118.318 80.5124L107.95 83.8786V104.74C107.95 105.093 107.725 105.407 107.391 105.521L66.3814 119.508C66.192 119.593 65.9754 119.604 65.7754 119.535L24.9379 105.454C24.6052 105.339 24.3818 105.026 24.3818 104.674V83.9574L13.7704 80.5124C13.55 80.4408 13.3699 80.2798 13.274 80.0688C13.1782 79.8578 13.1755 79.6163 13.2667 79.4032L24.4397 53.2852C24.5245 53.0871 24.6786 52.938 24.8628 52.856C24.8962 52.8407 24.9311 52.8275 24.9673 52.8165L50.3938 45.0977C50.009 44.2069 49.7613 43.2528 49.6688 42.2563C49.6267 41.8026 49.9603 41.4007 50.414 41.3585ZM66.8694 53.178C67.4665 53.3887 68.0435 53.6161 68.5905 53.8632C69.0058 54.0508 69.4944 53.8663 69.682 53.451C69.8696 53.0358 69.685 52.5471 69.2698 52.3595C68.5022 52.0128 67.6931 51.7072 66.8694 51.4343V42.3214L104.099 53.6234L66.8694 65.342V53.178ZM65.2193 70.5501V117.598L26.0318 104.086V84.4931L54.6166 93.7734C55.0242 93.9058 55.4653 93.704 55.6317 93.309L65.2193 70.5501ZM64.9286 66.9903L25.6629 54.6209L15.1389 79.2219L54.4053 91.9701L64.9286 66.9903ZM27.9927 53.6224L65.2194 65.342V42.3214L27.9927 53.6224ZM66.8693 117.598V70.5498L76.4572 93.309C76.6235 93.704 77.0646 93.9058 77.4722 93.7734L106.3 84.4143V104.15L66.8693 117.598ZM116.95 79.2219L106.426 54.6209L67.1566 66.9815L77.6835 91.9701L116.95 79.2219Z"
-        fill="black"
-      />
-      <path
-        d="M52.7349 34.7536C53.1087 35.0142 53.2003 35.5285 52.9397 35.9022C52.404 36.6703 51.9543 37.4375 51.6152 38.248C51.4393 38.6683 50.956 38.8665 50.5357 38.6906C50.1153 38.5147 49.9172 38.0314 50.093 37.6111C50.4895 36.6635 51.0045 35.7926 51.5863 34.9583C51.847 34.5846 52.3612 34.4929 52.7349 34.7536Z"
-        fill="black"
-      />
-    </svg>
-  );
-};
-
-export default EmptyBoxBeeMedium;