@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/Accordion/AccordionGroup.stories.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._InsideCard = exports._Default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _index = require("../Button/index");
+var _Card = require("../Card/Card");
+var _index2 = require("../Icon/index");
+var _index3 = require("../Truncate/index");
+var _Accordion = require("./Accordion");
+var _AccordionGroup = require("./AccordionGroup");
+var _AccordionGroupStoriesModule = _interopRequireDefault(require("./AccordionGroup.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/AccordionGroup',
+  component: _AccordionGroup.AccordionGroup,
+  argTypes: {
+    classNames: {
+      description: 'Optional class name overrides for styling the group container.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string}'
+        }
+      }
+    },
+    children: {
+      description: 'One or more Accordion components to be rendered inside the group.',
+      control: false,
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    onAccordionClick: {
+      description: 'Callback triggered when any accordion is toggled open or closed.',
+      control: false,
+      table: {
+        type: {
+          summary: '(id: string, isOpen: boolean) => mixed'
+        }
+      }
+    },
+    onToggle: {
+      description: 'Whether to display toggle switches on all child accordions. If true, toggle logic and disabledIds apply.',
+      control: false,
+      table: {
+        type: {
+          summary: '(id: string, checked?: boolean) => mixed'
+        }
+      }
+    },
+    enabledToggleIds: {
+      description: 'List of accordion ids that should be disabled (toggle off). These override any disabled prop on individual children.',
+      control: {
+        type: 'array'
+      },
+      table: {
+        type: {
+          summary: 'string[]'
+        },
+        defaultValue: {
+          summary: '[]'
+        }
+      }
+    },
+    initialOpenId: {
+      description: 'The id of the Accordion that should be expanded on initial render.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates an ToggleAccordionGroup component.',
+      description: {
+        component: `
+\`\`\`js
+import { AccordionGroup } from "@spaced-out/ui-design-system/lib/components/Accordion/AccordionGroup";
+\`\`\`
+The \`AccordionGroup\` is a controlled component designed to manage the state and behavior of multiple \`Accordion\` components in a unified manner.
+
+It centralizes control over toggling and open states by providing the following props to its children:
+- \`isOpen\`
+- \`disabled\`
+- \`onChange\`
+- \`onToggle\`
+- \`showToggle\`
+
+**Note:** For scenarios that require custom group behaviors beyond toggle control (e.g., conditional logic, external state),
+you can compose your own group using standalone Accordion components. This allows full flexibility without being constrained by
+the group's internal logic.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Accordion/AccordionGroup.jsx'
+    }
+  }
+};
+const accordionRecords = [{
+  id: 'accordion-1',
+  header: 'Resume Review',
+  content: 'Review and approve the candidate’s submitted resume and attached documents.'
+}, {
+  id: 'accordion-2',
+  header: 'Skill Assessment',
+  content: 'Evaluate the candidate’s technical and soft skills using provided assessments.'
+}, {
+  id: 'accordion-3',
+  header: 'Interview Feedback',
+  content: 'Summarize feedback from panel interviews and rate performance on key metrics.'
+}, {
+  id: 'accordion-4',
+  header: 'Background Check',
+  content: 'Verify the candidate’s previous employment, education, and criminal history.'
+}, {
+  id: 'accordion-5',
+  header: 'Final Decision',
+  content: 'Make a final decision to proceed with an offer or reject the application.'
+}];
+const _Default = args => {
+  const [enabledToggles, _setEnabledToggles] = React.useState([]);
+  return /*#__PURE__*/React.createElement(_AccordionGroup.AccordionGroup, _extends({}, args, {
+    enabledToggleIds: enabledToggles
+  }), accordionRecords.map(_ref => {
+    let {
+      id,
+      header,
+      content
+    } = _ref;
+    return /*#__PURE__*/React.createElement(_Accordion.Accordion, {
+      key: id,
+      id: id,
+      header: header
+    }, /*#__PURE__*/React.createElement("div", null, content));
+  }));
+};
+exports._Default = _Default;
+_Default.args = {
+  classNames: {
+    wrapper: ''
+  }
+};
+const _InsideCard = args => {
+  const [enabledToggles, _setEnabledToggles] = React.useState([]);
+  return /*#__PURE__*/React.createElement(_Card.Card, {
+    classNames: {
+      wrapper: _AccordionGroupStoriesModule.default.card
+    }
+  }, /*#__PURE__*/React.createElement(_Card.CardHeader, null, /*#__PURE__*/React.createElement(_Card.CardTitle, {
+    className: _AccordionGroupStoriesModule.default.cardTitle
+  }, /*#__PURE__*/React.createElement(_index2.SemanticIcon, {
+    name: "face-party",
+    semantic: "neutral",
+    type: "solid"
+  }), /*#__PURE__*/React.createElement(_index3.Truncate, null, "Candidate Screening Summary")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_index.Button, {
+    ariaLabel: 'download',
+    iconLeftName: "cloud-arrow-down",
+    type: "ghost"
+  }), /*#__PURE__*/React.createElement(_index.Button, {
+    ariaLabel: 'add',
+    iconLeftName: "add",
+    type: "ghost",
+    role: "button"
+  })))), /*#__PURE__*/React.createElement(_Card.CardContent, {
+    className: _AccordionGroupStoriesModule.default.cardContent
+  }, /*#__PURE__*/React.createElement(_AccordionGroup.AccordionGroup, _extends({}, args, {
+    enabledToggleIds: enabledToggles
+  }), accordionRecords.map(_ref2 => {
+    let {
+      id,
+      header,
+      content
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(_Accordion.Accordion, {
+      key: id,
+      id: id,
+      header: header
+    }, /*#__PURE__*/React.createElement("div", null, content));
+  }))));
+};
+exports._InsideCard = _InsideCard;
+_InsideCard.args = {
+  classNames: {
+    wrapper: _AccordionGroupStoriesModule.default.accordionGroupWrapper
+  }
+};

package/lib/components/Accordion/AccordionGroup.stories.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+
+import {Button} from '../Button/index';
+import {
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../Card/Card';
+import {SemanticIcon} from '../Icon/index';
+import {Truncate} from '../Truncate/index';
+
+import {Accordion} from './Accordion';
+import type {AccordionGroupPropsType} from './AccordionGroup';
+import {AccordionGroup} from './AccordionGroup';
+
+import css from './AccordionGroup.stories.module.css';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/AccordionGroup',
+  component: AccordionGroup,
+  argTypes: {
+    classNames: {
+      description:
+        'Optional class name overrides for styling the group container.',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string}',
+        },
+      },
+    },
+    children: {
+      description:
+        'One or more Accordion components to be rendered inside the group.',
+      control: false,
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    onAccordionClick: {
+      description:
+        'Callback triggered when any accordion is toggled open or closed.',
+      control: false,
+      table: {
+        type: {
+          summary: '(id: string, isOpen: boolean) => mixed',
+        },
+      },
+    },
+    onToggle: {
+      description:
+        'Whether to display toggle switches on all child accordions. If true, toggle logic and disabledIds apply.',
+      control: false,
+      table: {
+        type: {
+          summary: '(id: string, checked?: boolean) => mixed',
+        },
+      },
+    },
+    enabledToggleIds: {
+      description:
+        'List of accordion ids that should be disabled (toggle off). These override any disabled prop on individual children.',
+      control: {
+        type: 'array',
+      },
+      table: {
+        type: {summary: 'string[]'},
+        defaultValue: {summary: '[]'},
+      },
+    },
+    initialOpenId: {
+      description:
+        'The id of the Accordion that should be expanded on initial render.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {summary: 'string'},
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates an ToggleAccordionGroup component.',
+      description: {
+        component: `
+\`\`\`js
+import { AccordionGroup } from "@spaced-out/ui-design-system/lib/components/Accordion/AccordionGroup";
+\`\`\`
+The \`AccordionGroup\` is a controlled component designed to manage the state and behavior of multiple \`Accordion\` components in a unified manner.
+
+It centralizes control over toggling and open states by providing the following props to its children:
+- \`isOpen\`
+- \`disabled\`
+- \`onChange\`
+- \`onToggle\`
+- \`showToggle\`
+
+**Note:** For scenarios that require custom group behaviors beyond toggle control (e.g., conditional logic, external state),
+you can compose your own group using standalone Accordion components. This allows full flexibility without being constrained by
+the group's internal logic.
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Accordion/AccordionGroup.jsx',
+    },
+  },
+};
+
+const accordionRecords = [
+  {
+    id: 'accordion-1',
+    header: 'Resume Review',
+    content:
+      'Review and approve the candidate’s submitted resume and attached documents.',
+  },
+  {
+    id: 'accordion-2',
+    header: 'Skill Assessment',
+    content:
+      'Evaluate the candidate’s technical and soft skills using provided assessments.',
+  },
+  {
+    id: 'accordion-3',
+    header: 'Interview Feedback',
+    content:
+      'Summarize feedback from panel interviews and rate performance on key metrics.',
+  },
+  {
+    id: 'accordion-4',
+    header: 'Background Check',
+    content:
+      'Verify the candidate’s previous employment, education, and criminal history.',
+  },
+  {
+    id: 'accordion-5',
+    header: 'Final Decision',
+    content:
+      'Make a final decision to proceed with an offer or reject the application.',
+  },
+];
+
+export const _Default = (args: AccordionGroupPropsType) => {
+  const [enabledToggles, _setEnabledToggles] = React.useState<Array<string>>([]);
+
+  return (
+    <AccordionGroup {...args} enabledToggleIds={enabledToggles}>
+      {accordionRecords.map(({id, header, content}) => (
+        <Accordion key={id} id={id} header={header}>
+          <div>{content}</div>
+        </Accordion>
+      ))}
+    </AccordionGroup>
+  );
+};
+
+_Default.args = {
+  classNames: {wrapper: ''},
+};
+
+export const _InsideCard = (args: AccordionGroupPropsType) => {
+  const [enabledToggles, _setEnabledToggles] = React.useState<Array<string>>([]);
+  return (
+    <Card
+      classNames={{
+        wrapper: css.card,
+      }}
+    >
+      <CardHeader>
+        <CardTitle className={css.cardTitle}>
+          <SemanticIcon name="face-party" semantic="neutral" type="solid" />
+          <Truncate>Candidate Screening Summary</Truncate>
+        </CardTitle>
+        <div>
+          <CardActions>
+            <Button
+              ariaLabel={'download'}
+              iconLeftName="cloud-arrow-down"
+              type="ghost"
+            />
+            <Button
+              ariaLabel={'add'}
+              iconLeftName="add"
+              type="ghost"
+              role="button"
+            />
+          </CardActions>
+        </div>
+      </CardHeader>
+
+      <CardContent className={css.cardContent}>
+        <AccordionGroup {...args} enabledToggleIds={enabledToggles}>
+          {accordionRecords.map(({id, header, content}) => (
+            <Accordion key={id} id={id} header={header}>
+              <div>{content}</div>
+            </Accordion>
+          ))}
+        </AccordionGroup>
+      </CardContent>
+    </Card>
+  );
+};
+
+_InsideCard.args = {
+  classNames: {wrapper: css.accordionGroupWrapper},
+};

package/lib/components/Accordion/AccordionGroup.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './AccordionGroup.module.css';
+
+
+export type AccordionGroupClassNames = Readonly<{
+  wrapper?: string;
+}>;
+
+export type AccordionGroupPropsType = {
+  children: React.ReactNode;
+  onAccordionClick?: (id: string, isOpen: boolean) => unknown;
+  onToggle?: (id: string, checked?: boolean) => unknown;
+  enabledToggleIds?: Array<string>;
+  initialOpenId?: string;
+  classNames?: AccordionGroupClassNames;
+};
+
+export const AccordionGroup = (
+  {
+    children,
+    onAccordionClick,
+    onToggle,
+    enabledToggleIds = [],
+    initialOpenId = '',
+    classNames,
+  }: AccordionGroupPropsType,
+) => {
+  const [openId, setOpenedId] = React.useState(initialOpenId);
+  const [checks, setChecks] = React.useState(enabledToggleIds);
+  const handleAccordionChange = (id: any, isOpen: any) => {
+    setOpenedId(isOpen ? id : '');
+    onAccordionClick?.(id, isOpen);
+  };
+  const handleToggle = (id: any, checked: any) => {
+    setChecks((prev) =>
+      checked ? [...prev, id] : prev.filter((x) => x !== id),
+    );
+    setOpenedId((prev) => (checked ? id : prev === id ? '' : prev));
+    onToggle?.(id, checked);
+  };
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+
+// @ts-ignore - TS2571 - Object is of type 'unknown'.
+    const childId = child.props.id;
+
+    const isDisabled = !checks.includes(childId);
+
+    const isOpen = openId === childId;
+
+    return React.cloneElement(child, {
+// @ts-ignore - TS2769 - No overload matches this call.
+      classNames: {
+        headerWrapper: css.accordionHeaderWrapper,
+        wrapper: css.accordionWrapper,
+      },
+      onChange: handleAccordionChange,
+      onToggle: handleToggle,
+      showToggle: true,
+      disabled: isDisabled,
+      isOpen,
+    });
+  });
+
+  return (
+    <div className={classify(css.wrapper, classNames?.wrapper)}>
+      {enhancedChildren}
+    </div>
+  );
+};
+
+AccordionGroup.displayName = 'AccordionGroup';

package/lib/components/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Accordion';
+export * from './AccordionGroup';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/lib/components/Accordion/index.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+export * from './AccordionGroup';

package/lib/components/Avatar/Avatar.d.ts

@@ -0,0 +1,60 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import * as COLORS from '../../styles/variables/_color';
+import type { IconType } from '../Icon';
+import type { StatusSemanticType } from '../StatusIndicator';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    ring?: string;
+    content?: string;
+    image?: string;
+    icon?: string;
+    text?: string;
+}>;
+export declare const AVATAR_SIZE: Readonly<{
+    small: "small";
+    medium: "medium";
+    large: "large";
+    extraLarge: "extraLarge";
+}>;
+export declare const avatarSizeOptions: Array<unknown>;
+export type AvatarSize = typeof AVATAR_SIZE[keyof typeof AVATAR_SIZE];
+export declare const AVATAR_COLOR: Readonly<{
+    red: "#fce8ed";
+    orange: "#fcf2e7";
+    green: "#e6f5ed";
+    blue: "#e6f0fe";
+    gray: "#EBEBEB";
+    indigo: "#f1f1f5";
+}>;
+export type AvatarColorType = keyof typeof AVATAR_COLOR;
+export type AvatarProps = {
+    classNames?: ClassNames;
+    size?: AvatarSize;
+    imageSrc?: string;
+    ring?: boolean;
+    icon?: boolean;
+    text?: string;
+    color?: AvatarColorType;
+    style?: unknown;
+    iconName?: string;
+    iconType?: IconType;
+    status?: StatusSemanticType;
+    statusBorderColorToken?: keyof typeof COLORS;
+};
+export type AvatarContentProps = {
+    imageSrc?: string;
+    text?: string;
+    iconName?: string;
+    iconType?: IconType;
+    size: AvatarSize;
+    color?: AvatarColorType;
+    ring?: boolean;
+    status?: StatusSemanticType;
+    statusBorderColorToken?: keyof typeof COLORS;
+    classNames?: ClassNames;
+};
+export declare const Avatar: Flow.AbstractComponent<AvatarProps, HTMLDivElement>;
+export declare const BaseAvatar: ({ classNames, size, text, style, color, }: AvatarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Avatar.d.ts.map

package/lib/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAUxD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,oBAAoB,CAAC;AAM3D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAiC,CAAC;AAE/E,MAAM,MAAM,UAAU,GAAG,OAAO,WAAW,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AACtE,eAAO,MAAM,YAAY;;;;;;;EAOvB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;CAC9C,CAAC;AAwCF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AA0DF,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,cAAc,CA8DnE,CAAC;AAEL,eAAO,MAAM,UAAU,GACrB,2CAMG,WAAW,sBAqBT,CAAC"}

package/lib/components/Avatar/Avatar.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Text = require("../../components/Text");
-var _color = _interopRequireWildcard(require("../../styles/variables/_color"));
-var COLORS = _color;
+var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _StatusIndicator = require("../StatusIndicator");
@@ -100,10 +99,15 @@ const AvatarConditionalContent = _ref2 => {
     className: (0, _classify.default)(_AvatarModule.default.avatar, classNames?.image)
   }) : iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    type: iconType,
+    type: iconType
+    // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Readonly<{ small: string; medium: string; large: string; extraLarge: string; }>'.
+    ,
     size: iconSize[size],
     className: classNames?.icon
-  }) : text ? /*#__PURE__*/React.createElement(AvatarTextDecorator, {
+  }) : text ?
+  /*#__PURE__*/
+  // @ts-ignore - TS2786 - 'AvatarTextDecorator' cannot be used as a JSX component.
+  React.createElement(AvatarTextDecorator, {
     avatarText: getAvatarText(text),
     size: size,
     className: classNames?.text
@@ -129,7 +133,9 @@ const Avatar = exports.Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       [_AvatarModule.default.largeSize]: size === 'large',
       [_AvatarModule.default.mediumSize]: size === 'medium',
       [_AvatarModule.default.smallSize]: size === 'small'
-    }, classNames?.wrapper),
+    }, classNames?.wrapper)
+    // @ts-ignore - TS2322 - Type 'unknown' is not assignable to type 'CSSProperties | undefined'.
+    ,
     style: style,
     ref: ref
   }, ring ? /*#__PURE__*/React.createElement("div", {
@@ -172,7 +178,9 @@ const BaseAvatar = _ref4 => {
       [_AvatarModule.default.baseLargeSize]: size === 'large',
       [_AvatarModule.default.baseMediumSize]: size === 'medium',
       [_AvatarModule.default.baseSmallSize]: size === 'small'
-    }, classNames?.wrapper),
+    }, classNames?.wrapper)
+    // @ts-ignore - TS2698 - Spread types may only be created from object types.
+    ,
     style: {
       ...style,
       background: AVATAR_COLOR[color]