@sproutsocial/seeds-react-message 1.0.25 → 1.0.29

package/.turbo/turbo-build.log

@@ -3,19 +3,19 @@ $ tsup --dts
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-message/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-message/tsup.config.ts
 CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     11.65 KB
-CJS dist/index.js.map 18.13 KB
-CJS ⚡️ Build success in 323ms
-ESM dist/esm/index.js     8.74 KB
-ESM dist/esm/index.js.map 18.02 KB
-ESM ⚡️ Build success in 328ms
+CJS dist/index.js     12.06 KB
+CJS dist/index.js.map 19.10 KB
+CJS ⚡️ Build success in 74ms
+ESM dist/esm/index.js     9.24 KB
+ESM dist/esm/index.js.map 19.00 KB
+ESM ⚡️ Build success in 74ms
 DTS Build start
-DTS ⚡️ Build success in 24100ms
+DTS ⚡️ Build success in 3332ms
 DTS dist/index.d.ts  2.34 KB
 DTS dist/index.d.mts 2.34 KB
-Done in 32.13s.
+Done in 4.91s.

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @sproutsocial/seeds-react-message
 
+## 1.0.29
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@1.4.1
+- @sproutsocial/seeds-react-checkbox@1.3.25
+
+## 1.0.28
+
+### Patch Changes
+
+- Updated dependencies [7d54d67]
+- Updated dependencies [43f852d]
+  - @sproutsocial/seeds-react-button@1.4.0
+  - @sproutsocial/seeds-react-avatar@1.1.7
+
+## 1.0.27
+
+### Patch Changes
+
+- Updated dependencies [17d4f12]
+  - @sproutsocial/seeds-react-theme@3.6.0
+  - @sproutsocial/seeds-react-avatar@1.1.6
+  - @sproutsocial/seeds-react-checkbox@1.3.24
+  - @sproutsocial/seeds-react-button@1.3.20
+
+## 1.0.26
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@1.3.19
+- @sproutsocial/seeds-react-checkbox@1.3.23
+
 ## 1.0.25
 
 ### Patch Changes

package/dist/esm/index.js

@@ -10,7 +10,6 @@ import styled2 from "styled-components";
 
 // ../seeds-react-mixins/dist/esm/index.js
 import { css } from "styled-components";
-import { theme } from "@sproutsocial/seeds-react-theme";
 var visuallyHidden = css`
   position: absolute;
   width: 1px;
@@ -22,11 +21,12 @@ var visuallyHidden = css`
   border: 0;
 `;
 var focusRing = css`
-  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
+  box-shadow: 0 0 0 1px
+      ${({ theme }) => theme.colors.button.primary.background.base},
     0 0px 0px 4px
       color-mix(
         in srgb,
-        ${theme.colors.button.primary.background.base},
+        ${({ theme }) => theme.colors.button.primary.background.base},
         transparent 70%
       );
   outline: none;
@@ -36,15 +36,30 @@ var focusRing = css`
   }
 `;
 var pill = css`
-  min-width: ${theme.space[600]};
-  min-height: ${theme.space[600]};
-  padding: ${theme.space[300]};
-  border-radius: ${theme.radii.pill};
+  min-width: ${({ theme }) => theme.space[600]};
+  min-height: ${({ theme }) => theme.space[600]};
+  padding: ${({ theme }) => theme.space[300]};
+  border-radius: ${({ theme }) => theme.radii.pill};
 `;
 var disabled = css`
   opacity: 0.4;
   pointer-events: none;
 `;
+var container = css`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borders[500]}
+    ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+`;
+var divider = css`
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+`;
+var truncate = css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
 
 // ../seeds-react-box/dist/esm/index.js
 import * as React from "react";
@@ -60,7 +75,7 @@ import {
 import { jsx } from "react/jsx-runtime";
 var Container = styled.div`
   box-sizing: border-box;
-  font-family: ${({ theme: theme2 }) => theme2.fontFamily};
+  font-family: ${({ theme }) => theme.fontFamily};
 
   ${COMMON}
   ${BORDER}
@@ -141,15 +156,15 @@ var getContentPadding = (props) => {
 };
 var messagePadding = ({
   density,
-  theme: theme2
+  theme
 }) => {
   if (density === MESSAGE_DENSITIES.CONDENSED) {
     return 0;
   }
   if (density === MESSAGE_DENSITIES.COMPACT) {
-    return theme2.space[300];
+    return theme.space[300];
   }
-  return theme2.space[400];
+  return theme.space[400];
 };
 var MessageBody = styled2(index_default)`
   padding: ${messagePadding} ${messagePadding} ${messagePadding}

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\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\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 ${theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${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.space[600]};\n  min-height: ${theme.space[600]};\n  padding: ${theme.space[300]};\n  border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\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","theme","Container","styled","theme","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\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"]}

package/dist/index.js

@@ -48,7 +48,6 @@ var import_styled_components3 = __toESM(require("styled-components"));
 
 // ../seeds-react-mixins/dist/esm/index.js
 var import_styled_components = require("styled-components");
-var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
 var visuallyHidden = import_styled_components.css`
   position: absolute;
   width: 1px;
@@ -60,11 +59,12 @@ var visuallyHidden = import_styled_components.css`
   border: 0;
 `;
 var focusRing = import_styled_components.css`
-  box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
+  box-shadow: 0 0 0 1px
+      ${({ theme }) => theme.colors.button.primary.background.base},
     0 0px 0px 4px
       color-mix(
         in srgb,
-        ${import_seeds_react_theme.theme.colors.button.primary.background.base},
+        ${({ theme }) => theme.colors.button.primary.background.base},
         transparent 70%
       );
   outline: none;
@@ -74,15 +74,30 @@ var focusRing = import_styled_components.css`
   }
 `;
 var pill = import_styled_components.css`
-  min-width: ${import_seeds_react_theme.theme.space[600]};
-  min-height: ${import_seeds_react_theme.theme.space[600]};
-  padding: ${import_seeds_react_theme.theme.space[300]};
-  border-radius: ${import_seeds_react_theme.theme.radii.pill};
+  min-width: ${({ theme }) => theme.space[600]};
+  min-height: ${({ theme }) => theme.space[600]};
+  padding: ${({ theme }) => theme.space[300]};
+  border-radius: ${({ theme }) => theme.radii.pill};
 `;
 var disabled = import_styled_components.css`
   opacity: 0.4;
   pointer-events: none;
 `;
+var container = import_styled_components.css`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borders[500]}
+    ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+`;
+var divider = import_styled_components.css`
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+`;
+var truncate = import_styled_components.css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
 
 // ../seeds-react-box/dist/esm/index.js
 var React = __toESM(require("react"));
@@ -91,7 +106,7 @@ var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-
 var import_jsx_runtime = require("react/jsx-runtime");
 var Container = import_styled_components2.default.div`
   box-sizing: border-box;
-  font-family: ${({ theme: theme2 }) => theme2.fontFamily};
+  font-family: ${({ theme }) => theme.fontFamily};
 
   ${import_seeds_react_system_props.COMMON}
   ${import_seeds_react_system_props.BORDER}
@@ -172,15 +187,15 @@ var getContentPadding = (props) => {
 };
 var messagePadding = ({
   density,
-  theme: theme2
+  theme
 }) => {
   if (density === MESSAGE_DENSITIES.CONDENSED) {
     return 0;
   }
   if (density === MESSAGE_DENSITIES.COMPACT) {
-    return theme2.space[300];
+    return theme.space[300];
   }
-  return theme2.space[400];
+  return theme.space[400];
 };
 var MessageBody = (0, import_styled_components3.default)(index_default)`
   padding: ${messagePadding} ${messagePadding} ${messagePadding}

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\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\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 ${theme.colors.button.primary.background.base},\n    0 0px 0px 4px\n      color-mix(\n        in srgb,\n        ${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.space[600]};\n  min-height: ${theme.space[600]};\n  padding: ${theme.space[300]};\n  border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n  opacity: 0.4;\n  pointer-events: none;\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","theme","Container","styled","theme","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\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-message",
-  "version": "1.0.25",
+  "version": "1.0.29",
   "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.5.1",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-avatar": "^1.1.5",
-    "@sproutsocial/seeds-react-button": "^1.3.18",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.22"
+    "@sproutsocial/seeds-react-avatar": "^1.1.7",
+    "@sproutsocial/seeds-react-button": "^1.4.1",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.25"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",