@sproutsocial/seeds-react-message 1.0.31 → 1.0.32

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     12.06 KB
-CJS dist/index.js.map 19.10 KB
-CJS ⚡️ Build success in 80ms
-ESM dist/esm/index.js     9.24 KB
-ESM dist/esm/index.js.map 19.00 KB
-ESM ⚡️ Build success in 80ms
+CJS dist/index.js     12.16 KB
+CJS dist/index.js.map 19.99 KB
+CJS ⚡️ Build success in 82ms
+ESM dist/esm/index.js     9.31 KB
+ESM dist/esm/index.js.map 19.88 KB
+ESM ⚡️ Build success in 82ms
 DTS Build start
-DTS ⚡️ Build success in 4800ms
+DTS ⚡️ Build success in 3931ms
 DTS dist/index.d.ts  2.34 KB
 DTS dist/index.d.mts 2.34 KB
-Done in 6.43s.
+Done in 5.28s.

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @sproutsocial/seeds-react-message
 
+## 1.0.32
+
+### Patch Changes
+
+- Updated dependencies [4ba8720]
+- Updated dependencies [df9d751]
+  - @sproutsocial/seeds-react-theme@3.6.2
+  - @sproutsocial/seeds-react-button@2.0.0
+  - @sproutsocial/seeds-react-avatar@1.1.9
+  - @sproutsocial/seeds-react-checkbox@1.3.28
+
 ## 1.0.31
 
 ### Patch Changes

package/dist/esm/index.js

@@ -45,6 +45,10 @@ var disabled = css`
   opacity: 0.4;
   pointer-events: none;
 `;
+var interactiveDisabled = css`
+  opacity: 0.4;
+  cursor: not-allowed;
+`;
 var container = css`
   background: ${({ theme }) => theme.colors.container.background.base};
   border: ${({ theme }) => theme.borders[500]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Message.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.ts","../../../seeds-react-box/src/Box.tsx","../../../seeds-react-box/src/styles.tsx","../../../seeds-react-box/src/index.ts","../../src/constants.ts","../../src/MessageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Avatar, { type TypeAvatarProps } from \"@sproutsocial/seeds-react-avatar\";\nimport Button, { type TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport Checkbox, {\n  type TypeCheckboxProps,\n} from \"@sproutsocial/seeds-react-checkbox\";\nimport Container, {\n  MessageBody as StyledMessageBody,\n  MessageFooter as StyledMessageFooter,\n  MessageHeader as StyledMessageHeader,\n  MessageMeta as StyledMessageMeta,\n} from \"./styles\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\nimport type { EnumDensities, TypeMessageProps } from \"./MessageTypes\";\n\nconst avatarSizeMap = (density: EnumDensities) => {\n  switch (density) {\n    case MESSAGE_DENSITIES.LARGE:\n      return \"40px\";\n\n    case MESSAGE_DENSITIES.COMPACT:\n      return \"20px\";\n\n    case MESSAGE_DENSITIES.CONDENSED:\n      return \"24px\";\n\n    case MESSAGE_DENSITIES.SMALL:\n    default:\n      return \"32px\";\n  }\n};\n\nconst MessageContext = React.createContext<{\n  density: EnumDensities;\n  borderColor: TypeMessageProps[\"borderColor\"];\n  bg?: TypeMessageProps[\"bg\"];\n  indentContent?: boolean;\n}>({\n  density: MESSAGE_DENSITIES.SMALL,\n  borderColor: \"container.border.base\",\n  bg: \"container.background.base\",\n  indentContent: true,\n});\n\nconst Message = ({\n  children,\n  density = MESSAGE_DENSITIES.SMALL,\n  borderColor = \"container.border.base\",\n  bg = \"container.background.base\",\n  indentContent = true,\n  innerRef,\n  qa,\n  ...rest\n}: TypeMessageProps) => {\n  return (\n    <MessageContext.Provider\n      value={{\n        density,\n        borderColor,\n        indentContent,\n      }}\n    >\n      <Container\n        borderColor={borderColor}\n        bg={bg}\n        ref={innerRef}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Container>\n    </MessageContext.Provider>\n  );\n};\n\nconst MessageBody = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageBody\n        data-qa-message-body\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageBody.displayName = \"Message.Body\";\nMessage.Body = MessageBody;\n\nconst MessageHeader = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor }) => (\n      <StyledMessageHeader\n        density={density}\n        borderColor={borderColor}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageHeader.displayName = \"Message.Header\";\nMessage.Header = MessageHeader;\n\nconst MessageFooter = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageFooter\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageFooter.displayName = \"Message.Footer\";\nMessage.Footer = MessageFooter;\n\nconst MessageMeta = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageMeta\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageMeta.displayName = \"Message.Meta\";\nMessage.Meta = MessageMeta;\n\nconst MessageButton = (props: TypeButtonProps) => (\n  <Button {...props} appearance={props.appearance || \"pill\"} />\n);\n\nMessageButton.displayName = \"Message.Button\";\nMessage.Button = MessageButton;\n\nconst MessageAvatar = (props: TypeAvatarProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}\n  </MessageContext.Consumer>\n);\n\nMessageAvatar.displayName = \"Message.Avatar\";\nMessage.Avatar = MessageAvatar;\n\nconst MessageCheckbox = (props: TypeCheckboxProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => (\n      <Checkbox\n        appearance=\"pill\"\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore - `density` is not a valid prop for `Checkbox`\n        density={density} // @ts-notes - not sure what's intended here so address during refactor\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageCheckbox.displayName = \"Message.Checkbox\";\nMessage.Checkbox = MessageCheckbox;\n\nMessage.Context = MessageContext;\nMessage.DENSITIES = MESSAGE_DENSITIES;\n\nexport default Message;\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { TypeMessageProps } from \"./MessageTypes\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\nconst Container = styled(Box)`\n  border-radius: ${(props) => props.theme.radii.outer};\n  border-width: ${(props) => props.theme.borderWidths[500]};\n  border-style: solid;\n  background-color: ${(props) => {\n    //@ts-ignore\n    return props.theme.colors[props.bg];\n  }};\n  &:focus {\n    ${focusRing} transition: box-shadow 0.15s;\n  }\n`;\n\nContainer.displayName = \"Message.Container\";\n\nexport const MessageHeader = memo(styled(Box)<TypeMessageProps>`\n  padding: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? `0 0 0 ${props.theme.space[100]}`\n      : props.theme.space[300]};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? 0\n      : props.theme.borderWidths[500]};\n  border-bottom-style: solid;\n  border-radius: ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer} 0 0;\n  ${(props) => props.theme.typography[200]};\n`);\n\nconst getContentPadding = (props: TypeMessageProps & { theme: TypeTheme }) => {\n  if (!props.indentContent) {\n    return props.theme.space[400];\n  }\n\n  switch (props.density) {\n    case MESSAGE_DENSITIES.LARGE: {\n      // 40 px avatar + 8px(message.header) + 16px(mr)\n      return \"64px\";\n    }\n\n    case MESSAGE_DENSITIES.COMPACT: {\n      // 20px avatar plus space.300 margin plus space.400 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.CONDENSED: {\n      // 24px avatar plus space.200 margin plus space.350 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.SMALL:\n    default: {\n      // 32px avatar plus space.300 margin plus space.400 margin\n      return \"56px\";\n    }\n  }\n};\n\nconst messagePadding = ({\n  density,\n  theme,\n}: {\n  density?: TypeMessageProps[\"density\"];\n  theme: TypeTheme;\n}) => {\n  if (density === MESSAGE_DENSITIES.CONDENSED) {\n    return 0;\n  }\n\n  if (density === MESSAGE_DENSITIES.COMPACT) {\n    return theme.space[300];\n  }\n\n  return theme.space[400];\n};\n\nexport const MessageBody = styled(Box)<TypeMessageProps>`\n  padding: ${messagePadding} ${messagePadding} ${messagePadding}\n    ${(props) => getContentPadding(props)};\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) =>\n    props.density === MESSAGE_DENSITIES.COMPACT ||\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? props.theme.typography[200]\n      : props.theme.typography[300]};\n`;\n\nexport const MessageFooter = styled(Box)<TypeMessageProps>`\n  padding-bottom: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  padding-left: ${(props) => getContentPadding(props)};\n  padding-right: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? \"nowrap\" : \"wrap\"};\n`;\n\nexport const MessageMeta = styled(Box)<TypeMessageProps>`\n  background: none;\n  border-width: 0;\n  border-style: none;\n  border-top-width: 1px;\n  border-top-style: solid;\n  display: block;\n  width: 100%;\n  text-align: start;\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  ${(props) => props.theme.typography[100]};\n  margin: ${(props) => props.theme.space[300]} 0\n    ${(props) => props.theme.space[200]};\n  padding: ${(props) => props.theme.space[200]}\n    ${(props) => props.theme.space[400]};\n  padding-left: ${(props) => getContentPadding(props)};\n  cursor: ${(props) => (props.onClick ? \"pointer\" : \"default\")};\n  color: ${(props) => props.theme.colors.text.subtext};\n  &:focus {\n    ${focusRing};\n  }\n`;\n\nexport default Container;\n","import { css } from \"styled-components\";\n\nexport const svgToDataURL = (svgStr: string) => {\n  const encoded = encodeURIComponent(svgStr)\n    .replace(/'/g, \"%27\")\n    .replace(/\"/g, \"%22\");\n\n  const header = \"data:image/svg+xml,\";\n  const dataUrl = header + encoded;\n\n  return dataUrl;\n};\n\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n`;\n\nexport const focusRing = css`\n  box-shadow: 0 0 0 1px\n      ${({ theme }) => theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${({ theme }) => theme.colors.button.primary.background.base},\n        transparent 70%\n      );\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n`;\n\nexport const pill = css`\n  min-width: ${({ theme }) => theme.space[600]};\n  min-height: ${({ theme }) => theme.space[600]};\n  padding: ${({ theme }) => theme.space[300]};\n  border-radius: ${({ theme }) => theme.radii.pill};\n`;\n\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\n`;\n\nexport const container = css`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borders[500]}\n    ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const divider = css`\n  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport const truncate = css`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n","import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n","export const MESSAGE_DENSITIES = {\n  COMPACT: \"compact\",\n  // Compact is deprecated. New applications should use condensed instead.\n  CONDENSED: \"condensed\",\n  SMALL: \"small\",\n  LARGE: \"large\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\ntype TypeQaProps = object;\n\n/* @ts-notes - this is a little hack to get the values of the const object,\n   but this should be updated to use an enum instead during the refactor */\ntype TypeDensityKeys = keyof typeof MESSAGE_DENSITIES;\nexport type EnumDensities = (typeof MESSAGE_DENSITIES)[TypeDensityKeys];\n\nexport interface TypeMessageProps extends TypeBoxProps {\n  /** Condensed, small, or large. */\n  density?: EnumDensities;\n  children: React.ReactNode;\n  innerRef?: React.Ref<HTMLDivElement>;\n  borderColor?: string;\n  // seeds borderColor tokens (enum when flow types are available)\n  bg?: string;\n  // seeds color tokens (enum when flow types are available)\n  indentContent?: boolean;\n  qa?: TypeQaProps;\n}\n","import Message from \"./Message\";\n\nexport default Message;\nexport { Message };\nexport * from \"./MessageTypes\";\nexport * from \"./constants\";\n"],"mappings":"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","names":["React","styled","Container","styled","styles_default","jsx","styles_default","MessageBody","MessageHeader","MessageFooter","MessageMeta","index_default"]}
+{"version":3,"sources":["../../src/Message.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.ts","../../../seeds-react-box/src/Box.tsx","../../../seeds-react-box/src/styles.tsx","../../../seeds-react-box/src/index.ts","../../src/constants.ts","../../src/MessageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Avatar, { type TypeAvatarProps } from \"@sproutsocial/seeds-react-avatar\";\nimport Button, { type TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport Checkbox, {\n  type TypeCheckboxProps,\n} from \"@sproutsocial/seeds-react-checkbox\";\nimport Container, {\n  MessageBody as StyledMessageBody,\n  MessageFooter as StyledMessageFooter,\n  MessageHeader as StyledMessageHeader,\n  MessageMeta as StyledMessageMeta,\n} from \"./styles\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\nimport type { EnumDensities, TypeMessageProps } from \"./MessageTypes\";\n\nconst avatarSizeMap = (density: EnumDensities) => {\n  switch (density) {\n    case MESSAGE_DENSITIES.LARGE:\n      return \"40px\";\n\n    case MESSAGE_DENSITIES.COMPACT:\n      return \"20px\";\n\n    case MESSAGE_DENSITIES.CONDENSED:\n      return \"24px\";\n\n    case MESSAGE_DENSITIES.SMALL:\n    default:\n      return \"32px\";\n  }\n};\n\nconst MessageContext = React.createContext<{\n  density: EnumDensities;\n  borderColor: TypeMessageProps[\"borderColor\"];\n  bg?: TypeMessageProps[\"bg\"];\n  indentContent?: boolean;\n}>({\n  density: MESSAGE_DENSITIES.SMALL,\n  borderColor: \"container.border.base\",\n  bg: \"container.background.base\",\n  indentContent: true,\n});\n\nconst Message = ({\n  children,\n  density = MESSAGE_DENSITIES.SMALL,\n  borderColor = \"container.border.base\",\n  bg = \"container.background.base\",\n  indentContent = true,\n  innerRef,\n  qa,\n  ...rest\n}: TypeMessageProps) => {\n  return (\n    <MessageContext.Provider\n      value={{\n        density,\n        borderColor,\n        indentContent,\n      }}\n    >\n      <Container\n        borderColor={borderColor}\n        bg={bg}\n        ref={innerRef}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Container>\n    </MessageContext.Provider>\n  );\n};\n\nconst MessageBody = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageBody\n        data-qa-message-body\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageBody.displayName = \"Message.Body\";\nMessage.Body = MessageBody;\n\nconst MessageHeader = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor }) => (\n      <StyledMessageHeader\n        density={density}\n        borderColor={borderColor}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageHeader.displayName = \"Message.Header\";\nMessage.Header = MessageHeader;\n\nconst MessageFooter = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageFooter\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageFooter.displayName = \"Message.Footer\";\nMessage.Footer = MessageFooter;\n\nconst MessageMeta = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageMeta\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageMeta.displayName = \"Message.Meta\";\nMessage.Meta = MessageMeta;\n\nconst MessageButton = (props: TypeButtonProps) => (\n  <Button {...props} appearance={props.appearance || \"pill\"} />\n);\n\nMessageButton.displayName = \"Message.Button\";\nMessage.Button = MessageButton;\n\nconst MessageAvatar = (props: TypeAvatarProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}\n  </MessageContext.Consumer>\n);\n\nMessageAvatar.displayName = \"Message.Avatar\";\nMessage.Avatar = MessageAvatar;\n\nconst MessageCheckbox = (props: TypeCheckboxProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => (\n      <Checkbox\n        appearance=\"pill\"\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore - `density` is not a valid prop for `Checkbox`\n        density={density} // @ts-notes - not sure what's intended here so address during refactor\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageCheckbox.displayName = \"Message.Checkbox\";\nMessage.Checkbox = MessageCheckbox;\n\nMessage.Context = MessageContext;\nMessage.DENSITIES = MESSAGE_DENSITIES;\n\nexport default Message;\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { TypeMessageProps } from \"./MessageTypes\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\nconst Container = styled(Box)`\n  border-radius: ${(props) => props.theme.radii.outer};\n  border-width: ${(props) => props.theme.borderWidths[500]};\n  border-style: solid;\n  background-color: ${(props) => {\n    //@ts-ignore\n    return props.theme.colors[props.bg];\n  }};\n  &:focus {\n    ${focusRing} transition: box-shadow 0.15s;\n  }\n`;\n\nContainer.displayName = \"Message.Container\";\n\nexport const MessageHeader = memo(styled(Box)<TypeMessageProps>`\n  padding: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? `0 0 0 ${props.theme.space[100]}`\n      : props.theme.space[300]};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? 0\n      : props.theme.borderWidths[500]};\n  border-bottom-style: solid;\n  border-radius: ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer} 0 0;\n  ${(props) => props.theme.typography[200]};\n`);\n\nconst getContentPadding = (props: TypeMessageProps & { theme: TypeTheme }) => {\n  if (!props.indentContent) {\n    return props.theme.space[400];\n  }\n\n  switch (props.density) {\n    case MESSAGE_DENSITIES.LARGE: {\n      // 40 px avatar + 8px(message.header) + 16px(mr)\n      return \"64px\";\n    }\n\n    case MESSAGE_DENSITIES.COMPACT: {\n      // 20px avatar plus space.300 margin plus space.400 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.CONDENSED: {\n      // 24px avatar plus space.200 margin plus space.350 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.SMALL:\n    default: {\n      // 32px avatar plus space.300 margin plus space.400 margin\n      return \"56px\";\n    }\n  }\n};\n\nconst messagePadding = ({\n  density,\n  theme,\n}: {\n  density?: TypeMessageProps[\"density\"];\n  theme: TypeTheme;\n}) => {\n  if (density === MESSAGE_DENSITIES.CONDENSED) {\n    return 0;\n  }\n\n  if (density === MESSAGE_DENSITIES.COMPACT) {\n    return theme.space[300];\n  }\n\n  return theme.space[400];\n};\n\nexport const MessageBody = styled(Box)<TypeMessageProps>`\n  padding: ${messagePadding} ${messagePadding} ${messagePadding}\n    ${(props) => getContentPadding(props)};\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) =>\n    props.density === MESSAGE_DENSITIES.COMPACT ||\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? props.theme.typography[200]\n      : props.theme.typography[300]};\n`;\n\nexport const MessageFooter = styled(Box)<TypeMessageProps>`\n  padding-bottom: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  padding-left: ${(props) => getContentPadding(props)};\n  padding-right: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? \"nowrap\" : \"wrap\"};\n`;\n\nexport const MessageMeta = styled(Box)<TypeMessageProps>`\n  background: none;\n  border-width: 0;\n  border-style: none;\n  border-top-width: 1px;\n  border-top-style: solid;\n  display: block;\n  width: 100%;\n  text-align: start;\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  ${(props) => props.theme.typography[100]};\n  margin: ${(props) => props.theme.space[300]} 0\n    ${(props) => props.theme.space[200]};\n  padding: ${(props) => props.theme.space[200]}\n    ${(props) => props.theme.space[400]};\n  padding-left: ${(props) => getContentPadding(props)};\n  cursor: ${(props) => (props.onClick ? \"pointer\" : \"default\")};\n  color: ${(props) => props.theme.colors.text.subtext};\n  &:focus {\n    ${focusRing};\n  }\n`;\n\nexport default Container;\n","import { css } from \"styled-components\";\n\nexport const svgToDataURL = (svgStr: string) => {\n  const encoded = encodeURIComponent(svgStr)\n    .replace(/'/g, \"%27\")\n    .replace(/\"/g, \"%22\");\n\n  const header = \"data:image/svg+xml,\";\n  const dataUrl = header + encoded;\n\n  return dataUrl;\n};\n\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n`;\n\nexport const focusRing = css`\n  box-shadow: 0 0 0 1px\n      ${({ theme }) => theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${({ theme }) => theme.colors.button.primary.background.base},\n        transparent 70%\n      );\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n`;\n\nexport const pill = css`\n  min-width: ${({ theme }) => theme.space[600]};\n  min-height: ${({ theme }) => theme.space[600]};\n  padding: ${({ theme }) => theme.space[300]};\n  border-radius: ${({ theme }) => theme.radii.pill};\n`;\n\n/**\n * General-purpose disabled mixin. Applies opacity and removes pointer events.\n *\n * NOTE: Do NOT use this mixin for interactive elements. Those elements must\n * remain pointer-accessible.\n */\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\n`;\n\n/**\n * Disabled mixin for interactive elements (buttons, links, controls) that use\n * `aria-disabled=\"true\"` instead of the HTML `disabled` attribute.\n *\n * Unlike `disabled`, this mixin intentionally omits `pointer-events: none` so\n * that click events still reach the element's JavaScript handler, where they\n * can be suppressed and optionally used to show feedback (e.g. a tooltip).\n *\n * Usage: pair with `aria-disabled=\"true\"` on the element and an `onClick`\n * guard that returns early when the element is disabled.\n *\n * @see `disabled` for non-interactive elements\n */\nexport const interactiveDisabled = css`\n  opacity: 0.4;\n  cursor: not-allowed;\n`;\n\nexport const container = css`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borders[500]}\n    ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const divider = css`\n  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport const truncate = css`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n","import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n","export const MESSAGE_DENSITIES = {\n  COMPACT: \"compact\",\n  // Compact is deprecated. New applications should use condensed instead.\n  CONDENSED: \"condensed\",\n  SMALL: \"small\",\n  LARGE: \"large\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\ntype TypeQaProps = object;\n\n/* @ts-notes - this is a little hack to get the values of the const object,\n   but this should be updated to use an enum instead during the refactor */\ntype TypeDensityKeys = keyof typeof MESSAGE_DENSITIES;\nexport type EnumDensities = (typeof MESSAGE_DENSITIES)[TypeDensityKeys];\n\nexport interface TypeMessageProps extends TypeBoxProps {\n  /** Condensed, small, or large. */\n  density?: EnumDensities;\n  children: React.ReactNode;\n  innerRef?: React.Ref<HTMLDivElement>;\n  borderColor?: string;\n  // seeds borderColor tokens (enum when flow types are available)\n  bg?: string;\n  // seeds color tokens (enum when flow types are available)\n  indentContent?: boolean;\n  qa?: TypeQaProps;\n}\n","import Message from \"./Message\";\n\nexport default Message;\nexport { Message };\nexport * from \"./MessageTypes\";\nexport * from \"./constants\";\n"],"mappings":"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","names":["React","styled","Container","styled","styles_default","jsx","styles_default","MessageBody","MessageHeader","MessageFooter","MessageMeta","index_default"]}

package/dist/index.js

@@ -83,6 +83,10 @@ var disabled = import_styled_components.css`
   opacity: 0.4;
   pointer-events: none;
 `;
+var interactiveDisabled = import_styled_components.css`
+  opacity: 0.4;
+  cursor: not-allowed;
+`;
 var container = import_styled_components.css`
   background: ${({ theme }) => theme.colors.container.background.base};
   border: ${({ theme }) => theme.borders[500]}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Message.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../../seeds-react-box/src/Box.tsx","../../seeds-react-box/src/styles.tsx","../../seeds-react-box/src/index.ts","../src/constants.ts","../src/MessageTypes.ts"],"sourcesContent":["import Message from \"./Message\";\n\nexport default Message;\nexport { Message };\nexport * from \"./MessageTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport Avatar, { type TypeAvatarProps } from \"@sproutsocial/seeds-react-avatar\";\nimport Button, { type TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport Checkbox, {\n  type TypeCheckboxProps,\n} from \"@sproutsocial/seeds-react-checkbox\";\nimport Container, {\n  MessageBody as StyledMessageBody,\n  MessageFooter as StyledMessageFooter,\n  MessageHeader as StyledMessageHeader,\n  MessageMeta as StyledMessageMeta,\n} from \"./styles\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\nimport type { EnumDensities, TypeMessageProps } from \"./MessageTypes\";\n\nconst avatarSizeMap = (density: EnumDensities) => {\n  switch (density) {\n    case MESSAGE_DENSITIES.LARGE:\n      return \"40px\";\n\n    case MESSAGE_DENSITIES.COMPACT:\n      return \"20px\";\n\n    case MESSAGE_DENSITIES.CONDENSED:\n      return \"24px\";\n\n    case MESSAGE_DENSITIES.SMALL:\n    default:\n      return \"32px\";\n  }\n};\n\nconst MessageContext = React.createContext<{\n  density: EnumDensities;\n  borderColor: TypeMessageProps[\"borderColor\"];\n  bg?: TypeMessageProps[\"bg\"];\n  indentContent?: boolean;\n}>({\n  density: MESSAGE_DENSITIES.SMALL,\n  borderColor: \"container.border.base\",\n  bg: \"container.background.base\",\n  indentContent: true,\n});\n\nconst Message = ({\n  children,\n  density = MESSAGE_DENSITIES.SMALL,\n  borderColor = \"container.border.base\",\n  bg = \"container.background.base\",\n  indentContent = true,\n  innerRef,\n  qa,\n  ...rest\n}: TypeMessageProps) => {\n  return (\n    <MessageContext.Provider\n      value={{\n        density,\n        borderColor,\n        indentContent,\n      }}\n    >\n      <Container\n        borderColor={borderColor}\n        bg={bg}\n        ref={innerRef}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Container>\n    </MessageContext.Provider>\n  );\n};\n\nconst MessageBody = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageBody\n        data-qa-message-body\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageBody.displayName = \"Message.Body\";\nMessage.Body = MessageBody;\n\nconst MessageHeader = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor }) => (\n      <StyledMessageHeader\n        density={density}\n        borderColor={borderColor}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageHeader.displayName = \"Message.Header\";\nMessage.Header = MessageHeader;\n\nconst MessageFooter = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageFooter\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageFooter.displayName = \"Message.Footer\";\nMessage.Footer = MessageFooter;\n\nconst MessageMeta = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageMeta\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageMeta.displayName = \"Message.Meta\";\nMessage.Meta = MessageMeta;\n\nconst MessageButton = (props: TypeButtonProps) => (\n  <Button {...props} appearance={props.appearance || \"pill\"} />\n);\n\nMessageButton.displayName = \"Message.Button\";\nMessage.Button = MessageButton;\n\nconst MessageAvatar = (props: TypeAvatarProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}\n  </MessageContext.Consumer>\n);\n\nMessageAvatar.displayName = \"Message.Avatar\";\nMessage.Avatar = MessageAvatar;\n\nconst MessageCheckbox = (props: TypeCheckboxProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => (\n      <Checkbox\n        appearance=\"pill\"\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore - `density` is not a valid prop for `Checkbox`\n        density={density} // @ts-notes - not sure what's intended here so address during refactor\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageCheckbox.displayName = \"Message.Checkbox\";\nMessage.Checkbox = MessageCheckbox;\n\nMessage.Context = MessageContext;\nMessage.DENSITIES = MESSAGE_DENSITIES;\n\nexport default Message;\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { TypeMessageProps } from \"./MessageTypes\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\nconst Container = styled(Box)`\n  border-radius: ${(props) => props.theme.radii.outer};\n  border-width: ${(props) => props.theme.borderWidths[500]};\n  border-style: solid;\n  background-color: ${(props) => {\n    //@ts-ignore\n    return props.theme.colors[props.bg];\n  }};\n  &:focus {\n    ${focusRing} transition: box-shadow 0.15s;\n  }\n`;\n\nContainer.displayName = \"Message.Container\";\n\nexport const MessageHeader = memo(styled(Box)<TypeMessageProps>`\n  padding: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? `0 0 0 ${props.theme.space[100]}`\n      : props.theme.space[300]};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? 0\n      : props.theme.borderWidths[500]};\n  border-bottom-style: solid;\n  border-radius: ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer} 0 0;\n  ${(props) => props.theme.typography[200]};\n`);\n\nconst getContentPadding = (props: TypeMessageProps & { theme: TypeTheme }) => {\n  if (!props.indentContent) {\n    return props.theme.space[400];\n  }\n\n  switch (props.density) {\n    case MESSAGE_DENSITIES.LARGE: {\n      // 40 px avatar + 8px(message.header) + 16px(mr)\n      return \"64px\";\n    }\n\n    case MESSAGE_DENSITIES.COMPACT: {\n      // 20px avatar plus space.300 margin plus space.400 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.CONDENSED: {\n      // 24px avatar plus space.200 margin plus space.350 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.SMALL:\n    default: {\n      // 32px avatar plus space.300 margin plus space.400 margin\n      return \"56px\";\n    }\n  }\n};\n\nconst messagePadding = ({\n  density,\n  theme,\n}: {\n  density?: TypeMessageProps[\"density\"];\n  theme: TypeTheme;\n}) => {\n  if (density === MESSAGE_DENSITIES.CONDENSED) {\n    return 0;\n  }\n\n  if (density === MESSAGE_DENSITIES.COMPACT) {\n    return theme.space[300];\n  }\n\n  return theme.space[400];\n};\n\nexport const MessageBody = styled(Box)<TypeMessageProps>`\n  padding: ${messagePadding} ${messagePadding} ${messagePadding}\n    ${(props) => getContentPadding(props)};\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) =>\n    props.density === MESSAGE_DENSITIES.COMPACT ||\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? props.theme.typography[200]\n      : props.theme.typography[300]};\n`;\n\nexport const MessageFooter = styled(Box)<TypeMessageProps>`\n  padding-bottom: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  padding-left: ${(props) => getContentPadding(props)};\n  padding-right: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? \"nowrap\" : \"wrap\"};\n`;\n\nexport const MessageMeta = styled(Box)<TypeMessageProps>`\n  background: none;\n  border-width: 0;\n  border-style: none;\n  border-top-width: 1px;\n  border-top-style: solid;\n  display: block;\n  width: 100%;\n  text-align: start;\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  ${(props) => props.theme.typography[100]};\n  margin: ${(props) => props.theme.space[300]} 0\n    ${(props) => props.theme.space[200]};\n  padding: ${(props) => props.theme.space[200]}\n    ${(props) => props.theme.space[400]};\n  padding-left: ${(props) => getContentPadding(props)};\n  cursor: ${(props) => (props.onClick ? \"pointer\" : \"default\")};\n  color: ${(props) => props.theme.colors.text.subtext};\n  &:focus {\n    ${focusRing};\n  }\n`;\n\nexport default Container;\n","import { css } from \"styled-components\";\n\nexport const svgToDataURL = (svgStr: string) => {\n  const encoded = encodeURIComponent(svgStr)\n    .replace(/'/g, \"%27\")\n    .replace(/\"/g, \"%22\");\n\n  const header = \"data:image/svg+xml,\";\n  const dataUrl = header + encoded;\n\n  return dataUrl;\n};\n\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n`;\n\nexport const focusRing = css`\n  box-shadow: 0 0 0 1px\n      ${({ theme }) => theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${({ theme }) => theme.colors.button.primary.background.base},\n        transparent 70%\n      );\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n`;\n\nexport const pill = css`\n  min-width: ${({ theme }) => theme.space[600]};\n  min-height: ${({ theme }) => theme.space[600]};\n  padding: ${({ theme }) => theme.space[300]};\n  border-radius: ${({ theme }) => theme.radii.pill};\n`;\n\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\n`;\n\nexport const container = css`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borders[500]}\n    ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const divider = css`\n  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport const truncate = css`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n","import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n","export const MESSAGE_DENSITIES = {\n  COMPACT: \"compact\",\n  // Compact is deprecated. New applications should use condensed instead.\n  CONDENSED: \"condensed\",\n  SMALL: \"small\",\n  LARGE: \"large\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\ntype TypeQaProps = object;\n\n/* @ts-notes - this is a little hack to get the values of the const object,\n   but this should be updated to use an enum instead during the refactor */\ntype TypeDensityKeys = keyof typeof MESSAGE_DENSITIES;\nexport type EnumDensities = (typeof MESSAGE_DENSITIES)[TypeDensityKeys];\n\nexport interface TypeMessageProps extends TypeBoxProps {\n  /** Condensed, small, or large. */\n  density?: EnumDensities;\n  children: React.ReactNode;\n  innerRef?: React.Ref<HTMLDivElement>;\n  borderColor?: string;\n  // seeds borderColor tokens (enum when flow types are available)\n  bg?: string;\n  // seeds color tokens (enum when flow types are available)\n  indentContent?: boolean;\n  qa?: TypeQaProps;\n}\n"],"mappings":"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","names":["index_default","React","import_styled_components","import_styled_components","styled","Container","styled","styles_default","import_jsx_runtime","styles_default","MessageBody","MessageHeader","MessageFooter","MessageMeta","Button","Avatar","Checkbox","React","index_default"]}
+{"version":3,"sources":["../src/index.ts","../src/Message.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../../seeds-react-box/src/Box.tsx","../../seeds-react-box/src/styles.tsx","../../seeds-react-box/src/index.ts","../src/constants.ts","../src/MessageTypes.ts"],"sourcesContent":["import Message from \"./Message\";\n\nexport default Message;\nexport { Message };\nexport * from \"./MessageTypes\";\nexport * from \"./constants\";\n","import * as React from \"react\";\nimport Avatar, { type TypeAvatarProps } from \"@sproutsocial/seeds-react-avatar\";\nimport Button, { type TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport Checkbox, {\n  type TypeCheckboxProps,\n} from \"@sproutsocial/seeds-react-checkbox\";\nimport Container, {\n  MessageBody as StyledMessageBody,\n  MessageFooter as StyledMessageFooter,\n  MessageHeader as StyledMessageHeader,\n  MessageMeta as StyledMessageMeta,\n} from \"./styles\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\nimport type { EnumDensities, TypeMessageProps } from \"./MessageTypes\";\n\nconst avatarSizeMap = (density: EnumDensities) => {\n  switch (density) {\n    case MESSAGE_DENSITIES.LARGE:\n      return \"40px\";\n\n    case MESSAGE_DENSITIES.COMPACT:\n      return \"20px\";\n\n    case MESSAGE_DENSITIES.CONDENSED:\n      return \"24px\";\n\n    case MESSAGE_DENSITIES.SMALL:\n    default:\n      return \"32px\";\n  }\n};\n\nconst MessageContext = React.createContext<{\n  density: EnumDensities;\n  borderColor: TypeMessageProps[\"borderColor\"];\n  bg?: TypeMessageProps[\"bg\"];\n  indentContent?: boolean;\n}>({\n  density: MESSAGE_DENSITIES.SMALL,\n  borderColor: \"container.border.base\",\n  bg: \"container.background.base\",\n  indentContent: true,\n});\n\nconst Message = ({\n  children,\n  density = MESSAGE_DENSITIES.SMALL,\n  borderColor = \"container.border.base\",\n  bg = \"container.background.base\",\n  indentContent = true,\n  innerRef,\n  qa,\n  ...rest\n}: TypeMessageProps) => {\n  return (\n    <MessageContext.Provider\n      value={{\n        density,\n        borderColor,\n        indentContent,\n      }}\n    >\n      <Container\n        borderColor={borderColor}\n        bg={bg}\n        ref={innerRef}\n        {...qa}\n        {...rest}\n      >\n        {children}\n      </Container>\n    </MessageContext.Provider>\n  );\n};\n\nconst MessageBody = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageBody\n        data-qa-message-body\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageBody.displayName = \"Message.Body\";\nMessage.Body = MessageBody;\n\nconst MessageHeader = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor }) => (\n      <StyledMessageHeader\n        density={density}\n        borderColor={borderColor}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageHeader.displayName = \"Message.Header\";\nMessage.Header = MessageHeader;\n\nconst MessageFooter = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageFooter\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageFooter.displayName = \"Message.Footer\";\nMessage.Footer = MessageFooter;\n\nconst MessageMeta = (props: TypeMessageProps) => (\n  <MessageContext.Consumer>\n    {({ density, borderColor, indentContent }) => (\n      <StyledMessageMeta\n        density={density}\n        borderColor={borderColor}\n        indentContent={indentContent}\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageMeta.displayName = \"Message.Meta\";\nMessage.Meta = MessageMeta;\n\nconst MessageButton = (props: TypeButtonProps) => (\n  <Button {...props} appearance={props.appearance || \"pill\"} />\n);\n\nMessageButton.displayName = \"Message.Button\";\nMessage.Button = MessageButton;\n\nconst MessageAvatar = (props: TypeAvatarProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}\n  </MessageContext.Consumer>\n);\n\nMessageAvatar.displayName = \"Message.Avatar\";\nMessage.Avatar = MessageAvatar;\n\nconst MessageCheckbox = (props: TypeCheckboxProps) => (\n  <MessageContext.Consumer>\n    {({ density }) => (\n      <Checkbox\n        appearance=\"pill\"\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore - `density` is not a valid prop for `Checkbox`\n        density={density} // @ts-notes - not sure what's intended here so address during refactor\n        {...props}\n      />\n    )}\n  </MessageContext.Consumer>\n);\n\nMessageCheckbox.displayName = \"Message.Checkbox\";\nMessage.Checkbox = MessageCheckbox;\n\nMessage.Context = MessageContext;\nMessage.DENSITIES = MESSAGE_DENSITIES;\n\nexport default Message;\n","import { memo } from \"react\";\nimport styled from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { TypeMessageProps } from \"./MessageTypes\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\nconst Container = styled(Box)`\n  border-radius: ${(props) => props.theme.radii.outer};\n  border-width: ${(props) => props.theme.borderWidths[500]};\n  border-style: solid;\n  background-color: ${(props) => {\n    //@ts-ignore\n    return props.theme.colors[props.bg];\n  }};\n  &:focus {\n    ${focusRing} transition: box-shadow 0.15s;\n  }\n`;\n\nContainer.displayName = \"Message.Container\";\n\nexport const MessageHeader = memo(styled(Box)<TypeMessageProps>`\n  padding: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? `0 0 0 ${props.theme.space[100]}`\n      : props.theme.space[300]};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom-width: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? 0\n      : props.theme.borderWidths[500]};\n  border-bottom-style: solid;\n  border-radius: ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer} 0 0;\n  ${(props) => props.theme.typography[200]};\n`);\n\nconst getContentPadding = (props: TypeMessageProps & { theme: TypeTheme }) => {\n  if (!props.indentContent) {\n    return props.theme.space[400];\n  }\n\n  switch (props.density) {\n    case MESSAGE_DENSITIES.LARGE: {\n      // 40 px avatar + 8px(message.header) + 16px(mr)\n      return \"64px\";\n    }\n\n    case MESSAGE_DENSITIES.COMPACT: {\n      // 20px avatar plus space.300 margin plus space.400 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.CONDENSED: {\n      // 24px avatar plus space.200 margin plus space.350 margin\n      return \"40px\";\n    }\n\n    case MESSAGE_DENSITIES.SMALL:\n    default: {\n      // 32px avatar plus space.300 margin plus space.400 margin\n      return \"56px\";\n    }\n  }\n};\n\nconst messagePadding = ({\n  density,\n  theme,\n}: {\n  density?: TypeMessageProps[\"density\"];\n  theme: TypeTheme;\n}) => {\n  if (density === MESSAGE_DENSITIES.CONDENSED) {\n    return 0;\n  }\n\n  if (density === MESSAGE_DENSITIES.COMPACT) {\n    return theme.space[300];\n  }\n\n  return theme.space[400];\n};\n\nexport const MessageBody = styled(Box)<TypeMessageProps>`\n  padding: ${messagePadding} ${messagePadding} ${messagePadding}\n    ${(props) => getContentPadding(props)};\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) =>\n    props.density === MESSAGE_DENSITIES.COMPACT ||\n    props.density === MESSAGE_DENSITIES.CONDENSED\n      ? props.theme.typography[200]\n      : props.theme.typography[300]};\n`;\n\nexport const MessageFooter = styled(Box)<TypeMessageProps>`\n  padding-bottom: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  padding-left: ${(props) => getContentPadding(props)};\n  padding-right: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: ${(props) =>\n    props.density === MESSAGE_DENSITIES.CONDENSED ? \"nowrap\" : \"wrap\"};\n`;\n\nexport const MessageMeta = styled(Box)<TypeMessageProps>`\n  background: none;\n  border-width: 0;\n  border-style: none;\n  border-top-width: 1px;\n  border-top-style: solid;\n  display: block;\n  width: 100%;\n  text-align: start;\n  border-radius: 0 0 ${(props) => props.theme.radii.outer}\n    ${(props) => props.theme.radii.outer};\n  ${(props) => props.theme.typography[100]};\n  margin: ${(props) => props.theme.space[300]} 0\n    ${(props) => props.theme.space[200]};\n  padding: ${(props) => props.theme.space[200]}\n    ${(props) => props.theme.space[400]};\n  padding-left: ${(props) => getContentPadding(props)};\n  cursor: ${(props) => (props.onClick ? \"pointer\" : \"default\")};\n  color: ${(props) => props.theme.colors.text.subtext};\n  &:focus {\n    ${focusRing};\n  }\n`;\n\nexport default Container;\n","import { css } from \"styled-components\";\n\nexport const svgToDataURL = (svgStr: string) => {\n  const encoded = encodeURIComponent(svgStr)\n    .replace(/'/g, \"%27\")\n    .replace(/\"/g, \"%22\");\n\n  const header = \"data:image/svg+xml,\";\n  const dataUrl = header + encoded;\n\n  return dataUrl;\n};\n\nexport const visuallyHidden = css`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  border: 0;\n`;\n\nexport const focusRing = css`\n  box-shadow: 0 0 0 1px\n      ${({ theme }) => theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${({ theme }) => theme.colors.button.primary.background.base},\n        transparent 70%\n      );\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n`;\n\nexport const pill = css`\n  min-width: ${({ theme }) => theme.space[600]};\n  min-height: ${({ theme }) => theme.space[600]};\n  padding: ${({ theme }) => theme.space[300]};\n  border-radius: ${({ theme }) => theme.radii.pill};\n`;\n\n/**\n * General-purpose disabled mixin. Applies opacity and removes pointer events.\n *\n * NOTE: Do NOT use this mixin for interactive elements. Those elements must\n * remain pointer-accessible.\n */\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\n`;\n\n/**\n * Disabled mixin for interactive elements (buttons, links, controls) that use\n * `aria-disabled=\"true\"` instead of the HTML `disabled` attribute.\n *\n * Unlike `disabled`, this mixin intentionally omits `pointer-events: none` so\n * that click events still reach the element's JavaScript handler, where they\n * can be suppressed and optionally used to show feedback (e.g. a tooltip).\n *\n * Usage: pair with `aria-disabled=\"true\"` on the element and an `onClick`\n * guard that returns early when the element is disabled.\n *\n * @see `disabled` for non-interactive elements\n */\nexport const interactiveDisabled = css`\n  opacity: 0.4;\n  cursor: not-allowed;\n`;\n\nexport const container = css`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borders[500]}\n    ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const divider = css`\n  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport const truncate = css`\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n`;\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeBoxProps } from \"./BoxTypes\";\n\nconst Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ color, ...props }, ref) => {\n    return (\n      <Container\n        {...props}\n        ref={ref}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      />\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n\nexport default Box;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  BORDER,\n  LAYOUT,\n  POSITION,\n  FLEXBOX,\n  GRID,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeContainerProps } from \"./BoxTypes\";\n\nconst Container = styled.div<TypeContainerProps>`\n  box-sizing: border-box;\n  font-family: ${({ theme }) => theme.fontFamily};\n\n  ${COMMON}\n  ${BORDER}\n  ${LAYOUT}\n  ${POSITION}\n  ${FLEXBOX}\n  ${GRID}\n`;\n\nexport default Container;\n","import Box from \"./Box\";\n\nexport default Box;\nexport { Box };\nexport * from \"./BoxTypes\";\n","export const MESSAGE_DENSITIES = {\n  COMPACT: \"compact\",\n  // Compact is deprecated. New applications should use condensed instead.\n  CONDENSED: \"condensed\",\n  SMALL: \"small\",\n  LARGE: \"large\",\n} as const;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { MESSAGE_DENSITIES } from \"./constants\";\n\ntype TypeQaProps = object;\n\n/* @ts-notes - this is a little hack to get the values of the const object,\n   but this should be updated to use an enum instead during the refactor */\ntype TypeDensityKeys = keyof typeof MESSAGE_DENSITIES;\nexport type EnumDensities = (typeof MESSAGE_DENSITIES)[TypeDensityKeys];\n\nexport interface TypeMessageProps extends TypeBoxProps {\n  /** Condensed, small, or large. */\n  density?: EnumDensities;\n  children: React.ReactNode;\n  innerRef?: React.Ref<HTMLDivElement>;\n  borderColor?: string;\n  // seeds borderColor tokens (enum when flow types are available)\n  bg?: string;\n  // seeds color tokens (enum when flow types are available)\n  indentContent?: boolean;\n  qa?: TypeQaProps;\n}\n"],"mappings":"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","names":["index_default","React","import_styled_components","import_styled_components","styled","Container","styled","styles_default","import_jsx_runtime","styles_default","MessageBody","MessageHeader","MessageFooter","MessageMeta","Button","Avatar","Checkbox","React","index_default"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-message",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Seeds React Message",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.6.1",
+    "@sproutsocial/seeds-react-theme": "^3.6.2",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-avatar": "^1.1.8",
-    "@sproutsocial/seeds-react-button": "^1.4.3",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.27"
+    "@sproutsocial/seeds-react-avatar": "^1.1.9",
+    "@sproutsocial/seeds-react-button": "^2.0.0",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.28"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",