@spaced-out/ui-design-system 0.3.9 → 0.3.11

package/.cspell/custom-words.txt

@@ -2,6 +2,7 @@ Aaiun
 Aditya
 aditya-kaushal
 amet
+Analyzation
 Anant
 Aqtau
 Aqtobe

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.11](https://github.com/spaced-out/ui-design-system/compare/v0.3.10...v0.3.11) (2024-12-18)
+
+
+### Bug Fixes
+
+* ai prompt style fixes ([1af84dd](https://github.com/spaced-out/ui-design-system/commit/1af84dd1cd14cf105a9688ab76e1aa641793295c))
+* bug fixes in separator ([#306](https://github.com/spaced-out/ui-design-system/issues/306)) ([115b1da](https://github.com/spaced-out/ui-design-system/commit/115b1dad44e0e2b349a1e8f044e68aec20ef31b7))
+
+### [0.3.10](https://github.com/spaced-out/ui-design-system/compare/v0.3.9...v0.3.10) (2024-12-17)
+
+
+### Features
+
+* chat bubble ([#304](https://github.com/spaced-out/ui-design-system/issues/304)) ([8c6464b](https://github.com/spaced-out/ui-design-system/commit/8c6464b1cc85638dfb04bea2a1398eb73a3d4ef9))
+* introduces new disclaimer and prompt input components ([#299](https://github.com/spaced-out/ui-design-system/issues/299)) ([f6e2bac](https://github.com/spaced-out/ui-design-system/commit/f6e2bac64dc6431363df9bad6446a3140551d2a1))
+* introduces new prompt chip and text tile components ([#303](https://github.com/spaced-out/ui-design-system/issues/303)) ([be62fea](https://github.com/spaced-out/ui-design-system/commit/be62fea58833d90e1882a66dd67fc6b7e98ae31a))
+* radio tile component ([#300](https://github.com/spaced-out/ui-design-system/issues/300)) ([12a29a4](https://github.com/spaced-out/ui-design-system/commit/12a29a4f7e158d0a15d8e87c6f309580a7766aab))
+* separator component ([#305](https://github.com/spaced-out/ui-design-system/issues/305)) ([716997c](https://github.com/spaced-out/ui-design-system/commit/716997cd29947e207caa8ccc126c3b6b98961aca))
+
 ### [0.3.9](https://github.com/spaced-out/ui-design-system/compare/v0.3.8...v0.3.9) (2024-12-17)
 
 

package/lib/components/Banner/Banner.js

@@ -26,6 +26,7 @@ const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     semantic: semantic,
     ref: ref,
     classNames: {
+      ...classNames,
       wrapper: (0, _classify.default)(_BannerModule.default.bannerContainer, {
         [_BannerModule.default.neutral]: semantic === _common.ALERT_SEMANTIC.neutral,
         [_BannerModule.default.success]: semantic === _common.ALERT_SEMANTIC.success,

package/lib/components/Banner/Banner.js.flow

@@ -34,6 +34,7 @@ export const Banner: React$AbstractComponent<BannerProps, HTMLDivElement> =
           semantic={semantic}
           ref={ref}
           classNames={{
+            ...classNames,
             wrapper: classify(
               css.bannerContainer,
               {

package/lib/components/ChatBubble/ChatBubble.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatFooterRightSlot = exports.ChatFooterLeftSlot = exports.ChatFooter = exports.ChatContent = exports.ChatBubble = exports.ChatBody = exports.ChatAnchor = exports.CHAT_BUBBLE_ORIENTATION = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Avatar = require("../Avatar");
+var _Icon = require("../Icon");
+var _Tooltip = require("../Tooltip");
+var _ChatBubbleModule = _interopRequireDefault(require("./ChatBubble.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const getNamedComponent = (childrenArray, comp) => {
+  const nodes = [];
+  for (const child of childrenArray) {
+    if (
+    // $FlowFixMe
+    child?.type?.displayName === comp) {
+      nodes.push(child);
+    }
+  }
+  return nodes.length > 1 ? nodes : nodes[0] || null;
+};
+const CHAT_BUBBLE_ORIENTATION = Object.freeze({
+  left: 'left',
+  right: 'right '
+});
+exports.CHAT_BUBBLE_ORIENTATION = CHAT_BUBBLE_ORIENTATION;
+const ChatBubble = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    orientation = 'left',
+    children
+  } = _ref;
+  const isLeftAligned = orientation === 'left';
+  const childrenArray = React.Children.toArray(children);
+  const anchorComponent = getNamedComponent(childrenArray, 'ChatAnchor');
+  const chatComponent = getNamedComponent(childrenArray, 'ChatContent');
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "ChatBubble",
+    className: (0, _classify.default)(_ChatBubbleModule.default.chatBubbleWrapper, {
+      [_ChatBubbleModule.default.chatBubbleWrapperLeft]: isLeftAligned,
+      [_ChatBubbleModule.default.chatBubbleWrapperRight]: !isLeftAligned
+    }, classNames?.wrapper)
+  }, anchorComponent, chatComponent);
+});
+exports.ChatBubble = ChatBubble;
+const ChatAnchor = _ref2 => {
+  let {
+    isAI = true,
+    tooltip,
+    classNames,
+    avatarProps
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ChatAnchor",
+    className: (0, _classify.default)(_ChatBubbleModule.default.chatAnchorWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({}, tooltip, {
+    hidden: !tooltip
+  }), isAI ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "sparkle",
+    color: "information",
+    type: "solid",
+    size: "large"
+  }) : /*#__PURE__*/React.createElement(_Avatar.Avatar, avatarProps)));
+};
+exports.ChatAnchor = ChatAnchor;
+ChatAnchor.displayName = 'ChatAnchor';
+const ChatContent = _ref3 => {
+  let {
+    classNames,
+    children
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ChatContent",
+    className: (0, _classify.default)(_ChatBubbleModule.default.chatContentWrapper, classNames?.wrapper)
+  }, children);
+};
+exports.ChatContent = ChatContent;
+ChatContent.displayName = 'ChatContent';
+const ChatBody = _ref4 => {
+  let {
+    withBgColor = true,
+    isLoading,
+    children,
+    loadingText = 'Generating',
+    classNames
+  } = _ref4;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ChatBody",
+    className: (0, _classify.default)(_ChatBubbleModule.default.chatBodyWrapper, {
+      [_ChatBubbleModule.default.chatBodyWrapperLoading]: isLoading || !withBgColor,
+      [_ChatBubbleModule.default.chatBodyWrapperBgColor]: withBgColor
+    }, classNames?.wrapper)
+  }, isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ChatBubbleModule.default.loadingContainer, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _ChatBubbleModule.default.loadingText
+  }, loadingText), /*#__PURE__*/React.createElement("span", {
+    className: _ChatBubbleModule.default.loader
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _ChatBubbleModule.default.dot
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _ChatBubbleModule.default.dot
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _ChatBubbleModule.default.dot
+  }))) : children);
+};
+exports.ChatBody = ChatBody;
+ChatBody.displayName = 'ChatBody';
+const ChatFooter = _ref5 => {
+  let {
+    children,
+    classNames
+  } = _ref5;
+  const childrenArray = React.Children.toArray(children);
+  const leftSlot = getNamedComponent(childrenArray, 'ChatFooterLeftSlot');
+  const rightSlot = getNamedComponent(childrenArray, 'ChatFooterRightSlot');
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "ChatFooter",
+    className: (0, _classify.default)(_ChatBubbleModule.default.chatFooterWrapper, classNames?.wrapper)
+  }, leftSlot, rightSlot);
+};
+exports.ChatFooter = ChatFooter;
+ChatFooter.displayName = 'ChatFooter';
+const ChatFooterRightSlot = _ref6 => {
+  let {
+    children,
+    classNames
+  } = _ref6;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames?.wrapper
+  }, children);
+};
+exports.ChatFooterRightSlot = ChatFooterRightSlot;
+ChatFooterRightSlot.displayName = 'ChatFooterRightSlot';
+const ChatFooterLeftSlot = _ref7 => {
+  let {
+    children,
+    classNames
+  } = _ref7;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames?.wrapper
+  }, children);
+};
+exports.ChatFooterLeftSlot = ChatFooterLeftSlot;
+ChatFooterLeftSlot.displayName = 'ChatFooterLeftSlot';

package/lib/components/ChatBubble/ChatBubble.js.flow

@@ -0,0 +1,218 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Avatar} from '../Avatar';
+import type {AvatarProps} from '../Avatar/Avatar.js';
+import {Icon} from '../Icon';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './ChatBubble.module.css';
+
+
+const getNamedComponent = (
+  childrenArray: Array<React.Node>,
+  comp: string,
+): React.Node | React.Node[] | null => {
+  const nodes: React.Node[] = [];
+  for (const child of childrenArray) {
+    if (
+      // $FlowFixMe
+      child?.type?.displayName === comp
+    ) {
+      nodes.push(child);
+    }
+  }
+  return nodes.length > 1 ? nodes : nodes[0] || null;
+};
+
+export type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const CHAT_BUBBLE_ORIENTATION = Object.freeze({
+  left: 'left',
+  right: 'right ',
+});
+
+export type ChatBubbleOrientation = $Values<typeof CHAT_BUBBLE_ORIENTATION>;
+
+export type ChatBubbleProps = {
+  classNames?: ClassNames,
+  orientation?: ChatBubbleOrientation,
+  children: React.Node,
+};
+
+export const ChatBubble: React$AbstractComponent<
+  ChatBubbleProps,
+  HTMLDivElement,
+> = React.forwardRef<ChatBubbleProps, HTMLDivElement>(
+  ({classNames, orientation = 'left', children}: ChatBubbleProps, ref) => {
+    const isLeftAligned = orientation === 'left';
+
+    const childrenArray: React.Node[] = React.Children.toArray(children);
+
+    const anchorComponent = getNamedComponent(childrenArray, 'ChatAnchor');
+    const chatComponent = getNamedComponent(childrenArray, 'ChatContent');
+
+    return (
+      <div
+        ref={ref}
+        data-testid="ChatBubble"
+        className={classify(
+          css.chatBubbleWrapper,
+          {
+            [css.chatBubbleWrapperLeft]: isLeftAligned,
+            [css.chatBubbleWrapperRight]: !isLeftAligned,
+          },
+          classNames?.wrapper,
+        )}
+      >
+        {anchorComponent}
+        {chatComponent}
+      </div>
+    );
+  },
+);
+
+export type ChatAnchorProps = {
+  isAI?: boolean,
+  tooltip?: BaseTooltipProps,
+  classNames?: ClassNames,
+  avatarProps?: AvatarProps,
+};
+
+export const ChatAnchor = ({
+  isAI = true,
+  tooltip,
+  classNames,
+  avatarProps,
+}: ChatAnchorProps): React.Node => (
+  <div
+    data-testid="ChatAnchor"
+    className={classify(css.chatAnchorWrapper, classNames?.wrapper)}
+  >
+    <Tooltip {...tooltip} hidden={!tooltip}>
+      {isAI ? (
+        <Icon name="sparkle" color="information" type="solid" size="large" />
+      ) : (
+        <Avatar {...avatarProps} />
+      )}
+    </Tooltip>
+  </div>
+);
+
+ChatAnchor.displayName = 'ChatAnchor';
+
+export type ChatContentProps = {classNames?: ClassNames, children?: React.Node};
+
+export const ChatContent = ({
+  classNames,
+  children,
+}: ChatContentProps): React.Node => (
+  <div
+    data-testid="ChatContent"
+    className={classify(css.chatContentWrapper, classNames?.wrapper)}
+  >
+    {children}
+  </div>
+);
+
+ChatContent.displayName = 'ChatContent';
+
+export type ChatBodyClassNames = $ReadOnly<{wrapper?: string, loader: string}>;
+
+export type ChatBodyProps = {
+  withBgColor?: boolean,
+  isLoading?: boolean,
+  loadingText?: string,
+  children?: React.Node,
+  classNames?: ClassNames,
+};
+
+export const ChatBody = ({
+  withBgColor = true,
+  isLoading,
+  children,
+  loadingText = 'Generating',
+  classNames,
+}: ChatBodyProps): React.Node => (
+  <div
+    data-testid="ChatBody"
+    className={classify(
+      css.chatBodyWrapper,
+      {
+        [css.chatBodyWrapperLoading]: isLoading || !withBgColor,
+        [css.chatBodyWrapperBgColor]: withBgColor,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {isLoading ? (
+      <div className={classify(css.loadingContainer, classNames?.wrapper)}>
+        <span className={css.loadingText}>{loadingText}</span>
+        <span className={css.loader}>
+          <span className={css.dot} />
+          <span className={css.dot} />
+          <span className={css.dot} />
+        </span>
+      </div>
+    ) : (
+      children
+    )}
+  </div>
+);
+
+ChatBody.displayName = 'ChatBody';
+
+export type ChatFooterProps = {classNames?: ClassNames, children?: React.Node};
+
+export const ChatFooter = ({
+  children,
+  classNames,
+}: ChatFooterProps): React.Node => {
+  const childrenArray: React.Node[] = React.Children.toArray(children);
+
+  const leftSlot = getNamedComponent(childrenArray, 'ChatFooterLeftSlot');
+  const rightSlot = getNamedComponent(childrenArray, 'ChatFooterRightSlot');
+
+  return (
+    <div
+      data-testid="ChatFooter"
+      className={classify(css.chatFooterWrapper, classNames?.wrapper)}
+    >
+      {leftSlot}
+      {rightSlot}
+    </div>
+  );
+};
+
+ChatFooter.displayName = 'ChatFooter';
+
+export type ChatFooterRightSlotProps = {
+  children?: React.Node,
+  classNames?: ClassNames,
+};
+
+export const ChatFooterRightSlot = ({
+  children,
+  classNames,
+}: ChatFooterRightSlotProps): React.Node => (
+  <div className={classNames?.wrapper}>{children}</div>
+);
+
+ChatFooterRightSlot.displayName = 'ChatFooterRightSlot';
+
+export type ChatFooterLeftSlotProps = {
+  children?: React.Node,
+  classNames?: ClassNames,
+};
+
+export const ChatFooterLeftSlot = ({
+  children,
+  classNames,
+}: ChatFooterLeftSlotProps): React.Node => (
+  <div className={classNames?.wrapper}>{children}</div>
+);
+
+ChatFooterLeftSlot.displayName = 'ChatFooterLeftSlot';

package/lib/components/ChatBubble/ChatBubble.module.css

@@ -0,0 +1,132 @@
+@value (spaceNone,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
+@value (colorBorderPrimary,
+colorBackgroundTertiary,
+colorNeutralLightest,
+colorFillPrimary,
+colorInformation) from '../../styles/variables/_color.css';
+@value (borderWidthNone,
+borderWidthPrimary,
+borderRadiusSmall
+) from '../../styles/variables/_border.css';
+@value (size2,size4,size12,size24,size42,size580,sizeFluid) from
+  '../../styles/variables/_size.css';
+@value (opacity100, opacity60,opacity80) from
+  '../../styles/variables/_opacity.css';
+
+.chatBubbleWrapper {
+  display: flex;
+  gap: spaceSmall;
+}
+
+.chatBubbleWrapperLeft {
+  flex-direction: row; /* ChatAnchor comes first */
+}
+
+.chatBubbleWrapperRight {
+  flex-direction: row-reverse; /* ChatContent comes first */
+}
+
+.chatAnchorWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: size42;
+  width: size42;
+}
+
+.chatContentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusSmall;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall;
+  max-width: size580;
+}
+
+.chatBodyWrapper {
+  padding: spaceSmall;
+  border-radius: borderRadiusSmall;
+}
+
+.chatBodyWrapperBgColor {
+  background-color: colorNeutralLightest;
+}
+
+.chatBodyWrapperLoading {
+  padding: spaceNone;
+  background-color: colorBackgroundTertiary;
+}
+
+.chatFooterWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: spaceXSmall;
+}
+
+.loadingContainer {
+  display: flex;
+  align-items: flex-start;
+}
+
+.loadingText {
+  composes: buttonTextMedium from '../../styles/typography.module.css';
+  display: inline-flex;
+  background: linear-gradient(
+    90deg,
+    colorFillPrimary 0%,
+    colorInformation 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.loader {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: size2; /* Small gap between dots */
+  width: size24;
+}
+
+.dot {
+  width: calc(size12/4);
+  height: calc(size12/4);
+  background: linear-gradient(
+    90deg,
+    colorFillPrimary 0%,
+    colorInformation 100%
+  );
+  border-radius: 50%; /* Makes dots circular */
+  opacity: opacity80;
+
+  /* Bounce Animation */
+  animation: bounce 0.5s infinite ease-in-out alternate;
+}
+
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.1s; /* Slight delay for second dot */
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.2s; /* Slight delay for third dot */
+}
+
+@keyframes bounce {
+  0% {
+    transform: translateY(0);
+    opacity: opacity60;
+  }
+  100% {
+    transform: translateY(size12); /* Higher bounce */
+    opacity: opacity100;
+  }
+}

package/lib/components/ChatBubble/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChatBubble = require("./ChatBubble");
+Object.keys(_ChatBubble).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatBubble[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatBubble[key];
+    }
+  });
+});

package/lib/components/ChatBubble/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './ChatBubble';

package/lib/components/Disclaimer/Disclaimer.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Disclaimer = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Banner = require("../Banner");
+var _Icon = require("../Icon");
+var _DisclaimerModule = _interopRequireDefault(require("./Disclaimer.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Disclaimer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    leftIconName = 'info-circle',
+    leftIconType = _Icon.ICON_TYPE.regular,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_Banner.Banner, _extends({
+    ref: ref
+  }, restProps, {
+    // Do not let consumers control this
+    dismissable: true,
+    leftIconName: leftIconName,
+    leftIconType: leftIconType,
+    classNames: {
+      ...classNames,
+      wrapper: _DisclaimerModule.default.disclaimerWrapper,
+      icon: _DisclaimerModule.default.iconWrapper
+    }
+  }));
+});
+exports.Disclaimer = Disclaimer;

package/lib/components/Disclaimer/Disclaimer.js.flow

@@ -0,0 +1,44 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {BannerProps} from '../Banner';
+import {Banner} from '../Banner';
+import {ICON_TYPE} from '../Icon';
+
+import css from './Disclaimer.module.css';
+
+
+export type DisclaimerProps = {
+  ...BannerProps,
+  selfDismiss?: boolean,
+};
+
+export const Disclaimer: React$AbstractComponent<
+  DisclaimerProps,
+  HTMLDivElement,
+> = React.forwardRef<DisclaimerProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      leftIconName = 'info-circle',
+      leftIconType = ICON_TYPE.regular,
+      ...restProps
+    }: DisclaimerProps,
+    ref,
+  ) => (
+    <Banner
+      ref={ref}
+      {...restProps}
+      // Do not let consumers control this
+      dismissable
+      leftIconName={leftIconName}
+      leftIconType={leftIconType}
+      classNames={{
+        ...classNames,
+        wrapper: css.disclaimerWrapper,
+        icon: css.iconWrapper,
+      }}
+    ></Banner>
+  ),
+);

package/lib/components/Disclaimer/Disclaimer.module.css

@@ -0,0 +1,14 @@
+@value (
+  colorBorderPrimary,
+  colorTextPrimary,
+  colorBackgroundTertiary
+) from '../../styles/variables/_color.css';
+
+.disclaimerWrapper {
+  background-color: colorBackgroundTertiary;
+  border-color: colorBorderPrimary;
+}
+
+.iconWrapper {
+  color: colorTextPrimary;
+}

package/lib/components/Disclaimer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Disclaimer = require("./Disclaimer");
+Object.keys(_Disclaimer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Disclaimer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Disclaimer[key];
+    }
+  });
+});