message: fix(popup): Fix PopupCard styles to be more easily overridden
  `PopupCard` defines `width`, `position`, and `maxWidth` in Emotion styles instead of style props making overriding styles inconsistent. This change moves all layout styles into style props.
  [category:Components]
diff: @@ -42,13 +42,7 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
  const StyledPopupCard = styled(Card)<
  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
  ->(
  - {
  - position: 'relative',
  - maxWidth: `calc(100vw - ${space.l})`,
  - },
  - ({width}) => width && {width},
  - ({transformOrigin}) => {
  +>(({transformOrigin}) => {
  if (transformOrigin == null) {
  return {};
  }
  @@ -62,16 +56,11 @@ const StyledPopupCard = styled(Card)<
  animation: 'none',
  },
  };
  - }
  -);
  +});
  export const PopupCard = createComponent('div')({
  displayName: 'Popup.Card',
  - Component: (
  - {children, model, padding = 'l', depth = 2, width, ...elemProps}: PopupCardProps,
  - ref,
  - Element
  - ) => {
  + Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
  const localModel = useModelContext(PopupModelContext, model);
  const props = usePopupCard(localModel, elemProps, ref);
  const transformOrigin = React.useMemo(() => {
  @@ -82,9 +71,10 @@ export const PopupCard = createComponent('div')({
  <StyledPopupCard
  as={Element}
  transformOrigin={transformOrigin}
  - depth={depth}
  - width={width}
  - padding={padding}
  + position="relative"
  + padding="l"
  + depth={2}
  + maxWidth={`calc(100vw - ${space.l})`}
  {...props}
  >
  <Card.Body>{children}</Card.Body>
  