botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/SendBox/AttachmentBar/Preview/sendBoxAttachment.ts

@@ -1,13 +0,0 @@
-import { type InferInput, instance, object, optional, pipe, readonly, union } from 'valibot';
-
-const sendBoxAttachmentSchema = pipe(
-  object({
-    blob: union([instance(Blob), instance(File)]),
-    thumbnailURL: optional(instance(URL))
-  }),
-  readonly()
-);
-
-type SendBoxAttachment = InferInput<typeof sendBoxAttachmentSchema>;
-
-export { sendBoxAttachmentSchema, type SendBoxAttachment };

package/src/SendBox/AttachmentBar/index.ts

@@ -1,3 +0,0 @@
-import AttachmentBar from './AttachmentBar';
-
-export { AttachmentBar };

package/src/SendBox/DropZone.tsx

@@ -1,64 +0,0 @@
-import { hooks } from 'botframework-webchat-api';
-import { useFileDropZone } from '@msinternal/botframework-webchat-react-hooks';
-import React, { memo } from 'react';
-
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
-import testIds from '../testIds';
-
-const { useLocalizer } = hooks;
-
-const DROP_ZONE_STYLE = {
-  '&.webchat__drop-zone': {
-    backdropFilter: 'blur(4px)',
-    backgroundColor: 'rgba(0, 0, 0, 0.08)',
-    border: '2px dashed #999',
-    borderRadius: 4,
-    cursor: 'copy',
-    display: 'grid',
-    gap: 8,
-    placeContent: 'center',
-    placeItems: 'center',
-    transition: 'background-color 0.2s ease',
-
-    '&.webchat__drop-zone--droppable': {
-      backgroundColor: 'rgba(0, 120, 212, 0.15)',
-      borderColor: '#0078d4'
-    }
-  }
-};
-
-const DROP_ZONE_TEXT_STYLE = {
-  '&.webchat__drop-zone__text': {
-    fontSize: 14,
-    fontWeight: 600,
-    pointerEvents: 'none' as const
-  }
-};
-
-type DropZoneProps = Readonly<{
-  onFilesAdded: (files: File[]) => void;
-}>;
-
-function DropZone({ onFilesAdded }: DropZoneProps) {
-  const { dropZoneRef, dropZoneState, handleDragOver, handleDrop } = useFileDropZone(onFilesAdded);
-  const localize = useLocalizer();
-  const styleToEmotionObject = useStyleToEmotionObject();
-  const dropZoneClassName = styleToEmotionObject(DROP_ZONE_STYLE) + '';
-  const dropZoneTextClassName = styleToEmotionObject(DROP_ZONE_TEXT_STYLE) + '';
-
-  return dropZoneState ? (
-    <div
-      className={`webchat__drop-zone ${dropZoneClassName}${dropZoneState === 'droppable' ? ' webchat__drop-zone--droppable' : ''}`}
-      data-testid={testIds.sendBoxDropZone}
-      onDragOver={handleDragOver}
-      onDrop={handleDrop}
-      ref={dropZoneRef}
-    >
-      <span className={`webchat__drop-zone__text ${dropZoneTextClassName}`}>{localize('TEXT_INPUT_DROP_ZONE')}</span>
-    </div>
-  ) : null;
-}
-
-DropZone.displayName = 'DropZone';
-
-export default memo(DropZone);

package/src/Styles/CSSCustomPropertiesContainer.tsx

@@ -1,195 +0,0 @@
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { makeCreateStyles } from '@msinternal/botframework-webchat-styles';
-import { InjectStyleElements } from '@msinternal/botframework-webchat-styles/react';
-import { useStyleOptions } from 'botframework-webchat-api/hook.js';
-import classNames from 'classnames';
-import random from 'math-random';
-import React, { forwardRef, memo, useMemo, type Ref } from 'react';
-import { object, optional, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
-import CustomPropertyNames from './CustomPropertyNames';
-import { StrictStyleOptions } from 'botframework-webchat-api';
-
-const customPropertiesContainerPropsSchema = pipe(
-  object({
-    children: optional(reactNode()),
-    className: optional(string()),
-    // Intentionally undefinedable() instead of optional() to remind caller they should pass nonce.
-    nonce: undefinedable(string())
-  }),
-  readonly()
-);
-
-type CustomPropertiesContainerProps = InferInput<typeof customPropertiesContainerPropsSchema>;
-
-const webchatCustomPropertiesClass = 'webchat__css-custom-properties';
-
-function uniqueId() {
-  // eslint-disable-next-line no-magic-numbers
-  return Math.ceil(random() * Number.MAX_SAFE_INTEGER).toString(36);
-}
-
-function hasBundleStyleOptions(styleOptions: StrictStyleOptions): styleOptions is StrictStyleOptions & {
-  cardPushButtonBackgroundColor?: string;
-  cardPushButtonTextColor?: string;
-} {
-  return 'cardPushButtonBackgroundColor' in styleOptions || 'cardPushButtonTextColor' in styleOptions;
-}
-
-function CustomPropertiesContainer(props: CustomPropertiesContainerProps, ref: Ref<HTMLDivElement>) {
-  const { children, className, nonce } = validateProps(customPropertiesContainerPropsSchema, props);
-
-  const [styleOptions] = useStyleOptions();
-
-  const [styleElements, classNameState] = useMemo(() => {
-    const {
-      accent,
-      avatarSize,
-      borderAnimationColor1,
-      borderAnimationColor2,
-      borderAnimationColor3,
-      bubbleAttachmentMaxWidth,
-      bubbleAttachmentMinWidth,
-      bubbleBackground,
-      bubbleBorderColor,
-      bubbleBorderRadius,
-      bubbleBorderStyle,
-      bubbleBorderWidth,
-      bubbleFromUserBackground,
-      bubbleFromUserBorderColor,
-      bubbleFromUserBorderRadius,
-      bubbleFromUserBorderStyle,
-      bubbleFromUserBorderWidth,
-      bubbleFromUserNubOffset,
-      bubbleFromUserNubSize,
-      bubbleFromUserTextColor,
-      bubbleTextColor,
-      bubbleImageMaxHeight,
-      bubbleImageMinHeight,
-      bubbleMessageMaxWidth,
-      bubbleMessageMinWidth,
-      bubbleMinHeight,
-      bubbleNubOffset,
-      bubbleNubSize,
-      fontSizeSmall,
-      markdownExternalLinkIconImage,
-      messageActivityWordBreak,
-      monospaceFont,
-      paddingRegular,
-      primaryFont,
-      sendBoxAttachmentBarMaxHeight,
-      subtle,
-      timestampColor,
-      transcriptActivityVisualKeyboardIndicatorColor,
-      transcriptActivityVisualKeyboardIndicatorStyle,
-      transcriptActivityVisualKeyboardIndicatorWidth,
-      transcriptOverlayButtonBackground,
-      transcriptOverlayButtonBackgroundOnDisabled,
-      transcriptOverlayButtonBackgroundOnFocus,
-      transcriptOverlayButtonBackgroundOnHover,
-      transcriptOverlayButtonColor,
-      transcriptOverlayButtonColorOnDisabled,
-      transcriptOverlayButtonColorOnFocus,
-      transcriptOverlayButtonColorOnHover,
-      transcriptTerminatorBackgroundColor,
-      transcriptTerminatorBorderRadius,
-      transcriptTerminatorColor,
-      transcriptTerminatorFontSize,
-      transcriptVisualKeyboardIndicatorColor,
-      transcriptVisualKeyboardIndicatorStyle,
-      transcriptVisualKeyboardIndicatorWidth,
-      transitionDuration,
-      transitionEasing
-    } = styleOptions;
-
-    let bundleStyleProps = '';
-    if (hasBundleStyleOptions(styleOptions)) {
-      const { cardPushButtonBackgroundColor, cardPushButtonTextColor } = styleOptions;
-      bundleStyleProps = `
-  ${CustomPropertyNames.BackgroundCardPushButton}: ${cardPushButtonBackgroundColor};
-  ${CustomPropertyNames.ColorCardPushButton}: ${cardPushButtonTextColor};
-`;
-    }
-
-    const randomClass = `w${uniqueId()}_${webchatCustomPropertiesClass.replace('webchat__', '')}` as const;
-
-    const contents = `
-.${webchatCustomPropertiesClass}.${randomClass} {
-  display: contents;
-  /* From component */
-  ${CustomPropertyNames.BackgroundBubble}: ${bubbleBackground};
-  ${CustomPropertyNames.BackgroundBubbleUser}: ${bubbleFromUserBackground};
-  ${CustomPropertyNames.BackgroundTranscriptOverlayButton}: ${transcriptOverlayButtonBackground};
-  ${CustomPropertyNames.BackgroundTranscriptOverlayButtonDisabled}: ${transcriptOverlayButtonBackgroundOnDisabled};
-  ${CustomPropertyNames.BackgroundTranscriptOverlayButtonFocus}: ${transcriptOverlayButtonBackgroundOnFocus};
-  ${CustomPropertyNames.BackgroundTranscriptOverlayButtonHover}: ${transcriptOverlayButtonBackgroundOnHover};
-  ${CustomPropertyNames.BackgroundTranscriptTerminator}: ${transcriptTerminatorBackgroundColor};
-  ${CustomPropertyNames.BorderAnimationColor1}: ${borderAnimationColor1};
-  ${CustomPropertyNames.BorderAnimationColor2}: ${borderAnimationColor2};
-  ${CustomPropertyNames.BorderAnimationColor3}: ${borderAnimationColor3};
-  ${CustomPropertyNames.BorderColorBubble}: ${bubbleBorderColor};
-  ${CustomPropertyNames.BorderColorBubbleUser}: ${bubbleFromUserBorderColor};
-  ${CustomPropertyNames.BorderRadiusBubble}: ${bubbleBorderRadius}px;
-  ${CustomPropertyNames.BorderRadiusBubbleUser}: ${bubbleFromUserBorderRadius}px;
-  ${CustomPropertyNames.BorderRadiusTranscriptTerminator}: ${transcriptTerminatorBorderRadius}px;
-  ${CustomPropertyNames.BorderStyleBubble}: ${bubbleBorderStyle};
-  ${CustomPropertyNames.BorderStyleBubbleUser}: ${bubbleFromUserBorderStyle};
-  ${CustomPropertyNames.BorderStyleTranscriptActivityVisualKeyboardIndicator}: ${transcriptActivityVisualKeyboardIndicatorStyle};
-  ${CustomPropertyNames.BorderStyleTranscriptVisualKeyboardIndicator}: ${transcriptVisualKeyboardIndicatorStyle};
-  ${CustomPropertyNames.BorderWidthBubble}: ${bubbleBorderWidth}px;
-  ${CustomPropertyNames.BorderWidthBubbleUser}: ${bubbleFromUserBorderWidth}px;
-  ${CustomPropertyNames.BorderWidthTranscriptActivityVisualKeyboardIndicator}: ${transcriptActivityVisualKeyboardIndicatorWidth}px;
-  ${CustomPropertyNames.BorderWidthTranscriptVisualKeyboardIndicator}: ${transcriptVisualKeyboardIndicatorWidth}px;
-  ${CustomPropertyNames.ColorAccent}: ${accent};
-  ${CustomPropertyNames.ColorBubble}: ${bubbleTextColor};
-  ${CustomPropertyNames.ColorBubbleUser}: ${bubbleFromUserTextColor};
-  ${CustomPropertyNames.ColorSubtle}: ${subtle};
-  ${CustomPropertyNames.ColorTimestamp}: ${timestampColor || subtle};
-  ${CustomPropertyNames.ColorTranscriptActivityVisualKeyboardIndicator}: ${transcriptActivityVisualKeyboardIndicatorColor};
-  ${CustomPropertyNames.ColorTranscriptOverlayButton}: ${transcriptOverlayButtonColor};
-  ${CustomPropertyNames.ColorTranscriptOverlayButtonDisabled}: ${transcriptOverlayButtonColorOnDisabled};
-  ${CustomPropertyNames.ColorTranscriptOverlayButtonFocus}: ${transcriptOverlayButtonColorOnFocus || 'unset'};
-  ${CustomPropertyNames.ColorTranscriptOverlayButtonHover}: ${transcriptOverlayButtonColorOnHover || 'unset'};
-  ${CustomPropertyNames.ColorTranscriptTerminator}: ${transcriptTerminatorColor};
-  ${CustomPropertyNames.ColorTranscriptVisualKeyboardIndicator}: ${transcriptVisualKeyboardIndicatorColor};
-  ${CustomPropertyNames.FontMonospace}: ${monospaceFont};
-  ${CustomPropertyNames.FontPrimary}: ${primaryFont};
-  ${CustomPropertyNames.FontSizeSmall}: ${fontSizeSmall};
-  ${CustomPropertyNames.FontSizeTranscriptTerminator}: ${transcriptTerminatorFontSize}px;
-  ${CustomPropertyNames.IconURLExternalLink}: ${markdownExternalLinkIconImage};
-  ${CustomPropertyNames.MaxHeightImageBubble}: ${bubbleImageMaxHeight}px;
-  ${CustomPropertyNames.MaxHeightSendBoxAttachmentBar}: ${sendBoxAttachmentBarMaxHeight}px;
-  ${CustomPropertyNames.MaxWidthAttachmentBubble}: ${bubbleAttachmentMaxWidth}px;
-  ${CustomPropertyNames.MinWidthAttachmentBubble}: ${bubbleAttachmentMinWidth}px;
-  ${CustomPropertyNames.MaxWidthMessageBubble}: ${bubbleMessageMaxWidth}px;
-  ${CustomPropertyNames.MinWidthMessageBubble}: ${bubbleMessageMinWidth}px;
-  ${CustomPropertyNames.MinHeightBubble}: ${bubbleMinHeight}px;
-  ${CustomPropertyNames.MinHeightImageBubble}: ${bubbleImageMinHeight}px;
-  ${CustomPropertyNames.PaddingRegular}: ${paddingRegular}px;
-  ${CustomPropertyNames.SizeAvatar}: ${avatarSize}px;
-  ${CustomPropertyNames.SizeBubbleNub}: ${bubbleNubSize === undefined ? 'unset' : `${bubbleNubSize}px`};
-  ${CustomPropertyNames.SizeBubbleNubUser}: ${bubbleFromUserNubSize === undefined ? 'unset' : `${bubbleFromUserNubSize}px`};
-  ${CustomPropertyNames.SpaceBubbleNub}: ${bubbleNubOffset}px;
-  ${CustomPropertyNames.SpaceBubbleNubUser}: ${bubbleFromUserNubOffset}px;
-  ${CustomPropertyNames.TransitionDuration}: ${transitionDuration};
-  ${CustomPropertyNames.TransitionEasing}: ${transitionEasing};
-  ${CustomPropertyNames.WordBreakMessageActivity}: ${messageActivityWordBreak};
-  /* From bundle */
-  ${bundleStyleProps}
-}
-`;
-    const [style] = makeCreateStyles(contents)(`component/CustomPropertiesContainer-${uniqueId()}`);
-
-    return [Object.freeze([style]), Object.freeze([`${webchatCustomPropertiesClass} ${randomClass}`] as const)];
-  }, [styleOptions]);
-
-  return (
-    <div className={classNames(className, classNameState[0])} ref={ref}>
-      <InjectStyleElements at={styleOptions.stylesRoot} nonce={nonce} styleElements={styleElements} />
-      {children}
-    </div>
-  );
-}
-
-CustomPropertiesContainer.displayName = 'CustomPropertiesContainer';
-
-export default memo(forwardRef<HTMLDivElement, CustomPropertiesContainerProps>(CustomPropertiesContainer));

package/src/Styles/StyleSet/ActivityButton.ts

@@ -1,49 +0,0 @@
-export default function createActivityButtonStyle() {
-  return {
-    '&.webchat__activity-button': {
-      alignItems: 'center',
-      appearance: 'none',
-      background: '#fff',
-      borderRadius: '4px',
-      border: '1px solid #d1d1d1',
-      color: '#242424',
-      display: 'flex',
-      gap: '4px',
-      justifyContent: 'center',
-      padding: '5px 12px',
-
-      '&:hover': {
-        background: '#f5f5f5',
-        border: '1px solid #c7c7c7',
-        color: '#242424'
-      },
-
-      '&:active': {
-        background: '#e0e0e0',
-        border: '1px solid #b3b3b3',
-        color: '#242424'
-      },
-
-      '&:focus-visible': {
-        background: '#fff',
-        outline: '2px solid #000',
-        outlineOffset: '-2px'
-      },
-
-      '&[aria-disabled="true"]': {
-        background: '#f0f0f0',
-        border: '1px solid #e0e0e0',
-        color: '#bdbdbd',
-        cursor: 'not-allowed'
-      },
-
-      '& .webchat__activity-button__icon': {
-        height: '20px',
-        width: '20px',
-
-        '--webchat__component-icon--color': '#707070',
-        '--webchat__component-icon--size': '20px'
-      }
-    }
-  };
-}

package/src/Styles/StyleSet/ActivityCopyButton.ts

@@ -1,40 +0,0 @@
-export default function createActivityButtonStyle() {
-  return {
-    '&.webchat__activity-copy-button': {
-      overflow: ['clip', 'hidden'],
-      position: 'relative',
-
-      '& .webchat__activity-copy-button__copied-text': {
-        alignItems: 'center',
-        backgroundColor: '#fff',
-        display: 'flex',
-        height: '100%',
-        justifyContent: 'center',
-        position: 'absolute',
-        visibility: 'hidden',
-        width: '100%'
-      },
-
-      '&.webchat__activity-copy-button--copied': {
-        '.webchat__activity-copy-button__copied-text': {
-          animation: 'webchat__activity-copy-button__copied-animation 0.7s linear'
-        },
-
-        '.webchat__activity-button__icon, .webchat__activity-button__text': {
-          visibility: 'hidden'
-        }
-      },
-
-      '@keyframes webchat__activity-copy-button__copied-animation': {
-        '0%': {
-          // This is set during the animation only hence shouldn't spill when hidden from the above tree
-          visibility: 'visible'
-        },
-
-        '100%': {
-          visibility: 'unset'
-        }
-      }
-    }
-  };
-}

package/src/Styles/StyleSet/ChatHistoryBox.ts

@@ -1,22 +0,0 @@
-export default function createChatHistoryBoxStyleSet() {
-  return {
-    '&.webchat__chat-history-box': {
-      display: 'flex',
-      flex: 'auto',
-      overflow: ['clip', 'hidden'],
-      position: 'relative'
-    },
-
-    '.webchat__chat-history-box__toolbar': {
-      bottom: '5px',
-      isolation: 'isolate',
-      position: 'absolute',
-      right: '20px',
-      zIndex: 1,
-
-      '&.webchat__chat-history-box__toolbar--rtl': {
-        left: '20px'
-      }
-    }
-  };
-}

package/src/Styles/StyleSet/CodeBlock.ts

@@ -1,39 +0,0 @@
-import CustomPropertyNames from '../CustomPropertyNames';
-
-export default function createCodeBlockStyle() {
-  return {
-    '&.webchat__code-block': {
-      background: `var(${CustomPropertyNames.BackgroundCodeBlock}, inherit)`,
-      border: '1px solid #d1d1d1',
-      borderRadius: '4px',
-      color: `var(${CustomPropertyNames.ColorCodeBlock}, currentColor)`,
-      display: 'block',
-      margin: '16px 0',
-      overflow: 'hidden',
-      padding: '4px 4px 4px 8px',
-
-      ':has(> .webchat__code-block__theme--github-dark-default)': {
-        background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #0d1117)`,
-        color: `var(${CustomPropertyNames.ColorCodeBlock}, #e6edf3)`
-      },
-
-      ':has(> .webchat__code-block__theme--github-light-default)': {
-        background: `var(${CustomPropertyNames.BackgroundCodeBlock}, #ffffff)`,
-        color: `var(${CustomPropertyNames.ColorCodeBlock}, #1f2328)`
-      },
-
-      ':has(.webchat__code-block__body:focus-visible):focus-within': {
-        outline: '2px solid #000',
-        outlineOffset: '-2px'
-      },
-
-      '.webchat__code-block__body': {
-        display: 'contents',
-        lineHeight: 'normal',
-        margin: '0',
-        outline: 'none',
-        whiteSpace: 'pre-wrap'
-      }
-    }
-  };
-}

package/src/Styles/StyleSet/CodeBlockCopyButton.ts

@@ -1,71 +0,0 @@
-import CSSTokens from '../CSSTokens';
-
-export default function createCodeBlockCopyButtonStyle() {
-  return {
-    '&.webchat__code-block-copy-button': {
-      alignItems: 'center',
-      appearance: 'none',
-      background: '#fff',
-      borderRadius: '4px',
-      border: '1px solid #d1d1d1',
-      color: '#242424',
-      display: 'grid',
-      float: 'right', // Use "inline-end" after we update Chromium in Docker
-      gap: '4px',
-      justifyContent: 'center',
-      marginInlineStart: CSSTokens.PaddingRegular,
-      padding: '3px',
-
-      '&:hover': {
-        background: '#f5f5f5',
-        border: '1px solid #c7c7c7',
-        color: '#242424'
-      },
-
-      '&:active': {
-        background: '#e0e0e0',
-        border: '1px solid #b3b3b3',
-        color: '#242424'
-      },
-
-      '&:focus-visible': {
-        background: '#fff',
-        outline: '2px solid #000',
-        outlineOffset: '-2px'
-      },
-
-      '&[aria-disabled="true"]': {
-        background: '#f0f0f0',
-        border: '1px solid #e0e0e0',
-        color: '#bdbdbd',
-        cursor: 'not-allowed'
-      },
-
-      '& .webchat__code-block-copy-button__icon': {
-        gridColumn: 1,
-        gridRow: 1,
-
-        '--webchat__component-icon--color': '#707070',
-        '--webchat__component-icon--size': '16px'
-      },
-
-      '& .webchat__code-block-copy-button__icon--copied': {
-        opacity: 0
-      },
-
-      '&.webchat__code-block-copy-button--copied .webchat__code-block-copy-button__icon': {
-        animation: 'webchat__code-block-copy-button__copied-animation 0.5s linear'
-      },
-
-      '@keyframes webchat__code-block-copy-button__copied-animation': {
-        '0%': {
-          opacity: '100%'
-        },
-
-        '100%': {
-          opacity: 'unset'
-        }
-      }
-    }
-  };
-}

package/src/Styles/StyleSet/Tooltip.ts

@@ -1,66 +0,0 @@
-export default () => ({
-  '*:has(> &.webchat__tooltip)': {
-    position: 'relative',
-
-    // For <button>, the tooltip will be placed inside <button>.
-    // For <input type="checkbox/radio">, the tooltip will be placed after <input>.
-    '&:is(:hover, :focus-visible, :active) > .webchat__tooltip, &:has(:is(:hover, :focus-visible, :active)) > .webchat__tooltip':
-      {
-        opacity: 1,
-        transitionDelay: '400ms'
-      }
-  },
-
-  '&.webchat__tooltip': {
-    '--webchat__tooltip-tip-size': '8.484px',
-    '--webchat__tooltip-background': '#fff',
-    '--webchat__tooltip-anchor-inline-start': '50%',
-
-    background: 'var(--webchat__tooltip-background)',
-    borderRadius: '4px',
-    color: '#242424',
-    filter: `drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.14)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.12))`,
-    fontSize: '12px',
-    inlineSize: 'max-content',
-    isolation: 'isolate',
-    lineHeight: '16px',
-    margin: 0,
-    maxInlineSize: '30ch',
-    opacity: 0,
-    padding: '6px 12px',
-    pointerEvents: 'none',
-    position: 'absolute',
-    textAlign: 'start',
-    transition: 'opacity 0.2s ease',
-    userSelect: 'none',
-    willChange: 'filter',
-
-    '&::after': {
-      background: 'inherit',
-      color: 'currentColor',
-      content: `""`,
-      inset: 0,
-      position: 'absolute'
-    },
-
-    '&.webchat__tooltip--block-start, &.webchat__tooltip--block-end': {
-      textAlign: 'center'
-    },
-
-    '&.webchat__tooltip--block-start': {
-      insetBlockEnd: 'calc(100% + 7px)',
-      insetInlineStart: '50%',
-      transform: 'translate(calc(-1 * var(--webchat__tooltip-anchor-inline-start)), 0)',
-      '&::after': {
-        border: '1px solid var(--webchat__tooltip-background)',
-        borderBottomLeftRadius: '2px',
-        clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',
-        height: 'var(--webchat__tooltip-tip-size)',
-        insetBlockStart: 'calc(100% - 6px)',
-        insetInlineStart: 'calc(var(--webchat__tooltip-anchor-inline-start) - var(--webchat__tooltip-tip-size) / 2)',
-        transform: 'rotate(-45deg)',
-        width: 'var(--webchat__tooltip-tip-size)'
-      }
-    }
-  }
-});

package/src/Styles/StyleSet/ViewCodeDialog.ts

@@ -1,70 +0,0 @@
-import CSSTokens from '../CSSTokens';
-
-export default function createViewCodeDialogStyle() {
-  return {
-    '&.webchat__view-code-dialog': {
-      boxSizing: 'border-box',
-      display: 'grid',
-      height: '100%',
-      maxHeight: '100vh',
-      overflow: 'hidden',
-      padding: '1rem',
-      placeItems: 'center',
-
-      '& .webchat__modal-dialog__box': {
-        display: 'flex',
-        flexDirection: 'column',
-        maxHeight: '100%',
-        maxWidth: '100%',
-        position: 'relative'
-      },
-
-      '& .webchat__modal-dialog__close-button-layout': {
-        position: 'absolute',
-        right: 0
-      },
-
-      '& .webchat__modal-dialog__body': {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: CSSTokens.PaddingRegular,
-        overflow: 'hidden'
-      },
-
-      '& .webchat__view-code-dialog__header': {
-        alignItems: 'center',
-        display: 'flex',
-        paddingInlineEnd: '30px'
-      },
-
-      '& .webchat__view-code-dialog__title': {
-        margin: '0 auto 0 0',
-        textTransform: 'capitalize'
-      },
-
-      '& .webchat__view-code-dialog__body': {
-        border: 'none',
-        borderRadius: 0,
-        overflow: 'auto',
-        height: '100%',
-
-        '.webchat__code-block__body': {
-          display: 'block',
-          margin: 0,
-          padding: '16px 0'
-        }
-      },
-
-      '& .webchat__view-code-dialog__footer': {
-        color: CSSTokens.ColorSubtle,
-        lineHeight: '20px'
-      },
-
-      '& .webchat__view-code-dialog__copy-button': {
-        position: 'absolute',
-        right: '10px',
-        top: '10px'
-      }
-    }
-  };
-}

package/src/Styles/StyleSet/types/StyleSet.ts

@@ -1,11 +0,0 @@
-type ContainerQuery = `@container ${string}`;
-type MediaQuery = `@media ${string}`;
-type SelfQuery = `&${string}`;
-type CustomVariable = `--${string}`;
-
-type StyleSet = {
-  [key: ContainerQuery | MediaQuery | SelfQuery]: StyleSet;
-  [key: CustomVariable]: string;
-} & Partial<CSSStyleDeclaration>;
-
-export { type ContainerQuery, type CustomVariable, type MediaQuery, type SelfQuery, type StyleSet };