@zendeskgarden/react-typography 9.0.0-next.2 → 9.0.0-next.20

package/dist/esm/elements/lists/UnorderedList.js

@@ -0,0 +1,53 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Item } from './UnorderedListItem.js';
+import { SIZE, TYPE_UNORDERED_LIST } from '../../types/index.js';
+import { UnorderedListContext } from '../../utils/useUnorderedListContext.js';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import { StyledUnorderedList } from '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const UnorderedListComponent = forwardRef((_ref, ref) => {
+  let {
+    size,
+    type,
+    ...other
+  } = _ref;
+  const value = useMemo(() => ({
+    size: size
+  }), [size]);
+  return React.createElement(UnorderedListContext.Provider, {
+    value: value
+  }, React.createElement(StyledUnorderedList, Object.assign({
+    ref: ref,
+    listType: type
+  }, other)));
+});
+UnorderedListComponent.displayName = 'UnorderedList';
+UnorderedListComponent.propTypes = {
+  size: PropTypes.oneOf(SIZE),
+  type: PropTypes.oneOf(TYPE_UNORDERED_LIST)
+};
+UnorderedListComponent.defaultProps = {
+  size: 'medium',
+  type: 'disc'
+};
+const UnorderedList = UnorderedListComponent;
+UnorderedList.Item = Item;
+
+export { UnorderedList };

package/dist/esm/elements/lists/UnorderedListItem.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import useUnorderedListContext from '../../utils/useUnorderedListContext.js';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import { StyledUnorderedListItem } from '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const UnorderedListItem = forwardRef((props, ref) => {
+  const {
+    size
+  } = useUnorderedListContext();
+  return React.createElement(StyledUnorderedListItem, Object.assign({
+    ref: ref,
+    space: size
+  }, props));
+});
+UnorderedListItem.displayName = 'UnorderedList.Item';
+const Item = UnorderedListItem;
+
+export { Item };

package/dist/esm/elements/span/Icon.js

@@ -0,0 +1,25 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React from 'react';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const IconComponent = props => React.createElement(StyledIcon, props);
+IconComponent.displayName = 'Span.Icon';
+const Icon = IconComponent;
+
+export { Icon };

package/dist/esm/elements/span/Span.js

@@ -0,0 +1,49 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import { StyledFont } from '../../styled/StyledFont.js';
+import '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+import { StartIcon } from './StartIcon.js';
+import { Icon } from './Icon.js';
+
+const SpanComponent = forwardRef((_ref, ref) => {
+  let {
+    tag,
+    ...other
+  } = _ref;
+  return React.createElement(StyledFont, Object.assign({
+    as: tag,
+    ref: ref,
+    size: "inherit"
+  }, other));
+});
+SpanComponent.displayName = 'Span';
+SpanComponent.propTypes = {
+  tag: PropTypes.any,
+  isBold: PropTypes.bool,
+  isMonospace: PropTypes.bool,
+  hue: PropTypes.string
+};
+SpanComponent.defaultProps = {
+  tag: 'span'
+};
+const Span = SpanComponent;
+Span.Icon = Icon;
+Span.StartIcon = StartIcon;
+
+export { Span };

package/dist/esm/elements/span/StartIcon.js

@@ -0,0 +1,27 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React from 'react';
+import '../../styled/StyledBlockquote.js';
+import '../../styled/StyledCode.js';
+import '../../styled/StyledCodeBlock.js';
+import '../../styled/StyledCodeBlockContainer.js';
+import '../../styled/StyledCodeBlockLine.js';
+import '../../styled/StyledCodeBlockToken.js';
+import '../../styled/StyledEllipsis.js';
+import '../../styled/StyledFont.js';
+import { StyledIcon } from '../../styled/StyledIcon.js';
+import '../../styled/StyledList.js';
+import '../../styled/StyledListItem.js';
+import '../../styled/StyledParagraph.js';
+
+const StartIconComponent = props => React.createElement(StyledIcon, Object.assign({
+  $isStart: true
+}, props));
+StartIconComponent.displayName = 'Span.StartIcon';
+const StartIcon = StartIconComponent;
+
+export { StartIcon };

package/dist/esm/index.js

@@ -0,0 +1,20 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+export { SM } from './elements/SM.js';
+export { MD } from './elements/MD.js';
+export { LG } from './elements/LG.js';
+export { XL } from './elements/XL.js';
+export { XXL } from './elements/XXL.js';
+export { XXXL } from './elements/XXXL.js';
+export { Blockquote } from './elements/Blockquote.js';
+export { Code } from './elements/Code.js';
+export { CodeBlock } from './elements/CodeBlock.js';
+export { Ellipsis } from './elements/Ellipsis.js';
+export { Paragraph } from './elements/Paragraph.js';
+export { OrderedList } from './elements/lists/OrderedList.js';
+export { UnorderedList } from './elements/lists/UnorderedList.js';
+export { Span } from './elements/span/Span.js';

package/dist/esm/styled/StyledBlockquote.js

@@ -0,0 +1,26 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { THEME_SIZES } from './StyledFont.js';
+
+const COMPONENT_ID = 'typography.blockquote';
+const StyledBlockquote = styled.blockquote.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledBlockquote",
+  componentId: "sc-1tt3ye0-0"
+})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => getColor({
+  theme: props.theme,
+  variable: 'border.default'
+}), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledBlockquote.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledBlockquote };

package/dist/esm/styled/StyledCode.js

@@ -0,0 +1,66 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledFont } from './StyledFont.js';
+
+const COMPONENT_ID = 'typography.code';
+const colorStyles = _ref => {
+  let {
+    hue,
+    theme
+  } = _ref;
+  const bgColorArgs = {
+    theme,
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    }
+  };
+  const fgColorArgs = {
+    theme
+  };
+  switch (hue) {
+    case 'green':
+      bgColorArgs.variable = 'background.success';
+      fgColorArgs.variable = 'foreground.successEmphasis';
+      break;
+    case 'red':
+      bgColorArgs.variable = 'background.danger';
+      fgColorArgs.variable = 'foreground.dangerEmphasis';
+      break;
+    case 'yellow':
+      bgColorArgs.variable = 'background.warning';
+      fgColorArgs.variable = 'foreground.warningEmphasis';
+      break;
+    default:
+      fgColorArgs.variable = 'foreground.default';
+      bgColorArgs.variable = 'background.subtle';
+      break;
+  }
+  const backgroundColor = getColor(bgColorArgs);
+  const foregroundColor = getColor(fgColorArgs);
+  return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
+};
+const StyledCode = styled(StyledFont).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  as: 'code',
+  isMonospace: true
+}).withConfig({
+  displayName: "StyledCode",
+  componentId: "sc-l8yvmf-0"
+})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCode.defaultProps = {
+  theme: DEFAULT_THEME,
+  hue: 'grey',
+  size: 'inherit'
+};
+
+export { StyledCode };

package/dist/esm/styled/StyledCodeBlock.js

@@ -0,0 +1,36 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'typography.codeblock';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
+};
+const StyledCodeBlock = styled.pre.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledCodeBlock",
+  componentId: "sc-5wky57-0"
+})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCodeBlock.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCodeBlock };

package/dist/esm/styled/StyledCodeBlockContainer.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { focusStyles, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'typography.codeblock_container';
+const StyledCodeBlockContainer = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledCodeBlockContainer",
+  componentId: "sc-14zgbfw-0"
+})(["transition:box-shadow 0.1s ease-in-out;overflow:auto;", " ", ";"], props => focusStyles({
+  theme: props.theme
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCodeBlockContainer.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCodeBlockContainer };

package/dist/esm/styled/StyledCodeBlockLine.js

@@ -0,0 +1,100 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledFont, THEME_SIZES } from './StyledFont.js';
+
+const COMPONENT_ID = 'typography.codeblock_code';
+const colorStyles = _ref => {
+  let {
+    theme,
+    diff,
+    isHighlighted
+  } = _ref;
+  let backgroundColor;
+  if (diff) {
+    const hues = {
+      hunk: 'royal',
+      add: 'lime',
+      delete: 'crimson',
+      change: 'lemon'
+    };
+    backgroundColor = getColor({
+      theme,
+      hue: hues[diff],
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 400
+      },
+      transparency: theme.opacity[300]
+    });
+  } else if (isHighlighted) {
+    backgroundColor = getColor({
+      theme,
+      dark: {
+        hue: 'white'
+      },
+      light: {
+        hue: 'neutralHue',
+        shade: 700
+      },
+      transparency: theme.opacity[100]
+    });
+  }
+  return css(["background-color:", ";"], backgroundColor);
+};
+const lineNumberStyles = _ref2 => {
+  let {
+    theme,
+    language,
+    size
+  } = _ref2;
+  const color = getColor({
+    theme,
+    variable: 'foreground.subtle',
+    light: {
+      offset: -100
+    }
+  });
+  let padding;
+  if (language && language === 'diff') {
+    padding = 0;
+  } else if (size === 'small') {
+    padding = theme.space.base * 4;
+  } else if (size === 'large') {
+    padding = theme.space.base * 7;
+  } else {
+    padding = theme.space.base * 6;
+  }
+  return `
+    &::before {
+      display: table-cell;
+      padding-right: ${padding}px;
+      width: 1px;
+      text-align: right;
+      color: ${color};
+      content: counter(linenumber);
+      counter-increment: linenumber;
+    }
+  `;
+};
+const StyledCodeBlockLine = styled(StyledFont).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20',
+  as: 'code',
+  isMonospace: true
+}).withConfig({
+  displayName: "StyledCodeBlockLine",
+  componentId: "sc-1goay17-0"
+})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], colorStyles, props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCodeBlockLine.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCodeBlockLine };

package/dist/esm/styled/StyledCodeBlockToken.js

@@ -0,0 +1,183 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledCodeBlock } from './StyledCodeBlock.js';
+
+const COMPONENT_ID = 'typography.codeblock_token';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const colors = {
+    boolean: getColor({
+      theme,
+      dark: {
+        hue: 'azure',
+        shade: 600
+      },
+      light: {
+        hue: 'royal',
+        shade: 700
+      }
+    }),
+    builtin: getColor({
+      theme,
+      hue: 'teal',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    comment: getColor({
+      theme,
+      dark: {
+        hue: 'mint',
+        shade: 600
+      },
+      light: {
+        hue: 'lime',
+        shade: 700
+      }
+    }),
+    constant: getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 600
+      },
+      light: {
+        hue: 'azure',
+        shade: 700
+      }
+    }),
+    coord: getColor({
+      theme,
+      hue: 'blue',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    deleted: getColor({
+      theme,
+      hue: 'red',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    diff: getColor({
+      theme,
+      hue: 'yellow',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    function: getColor({
+      theme,
+      dark: {
+        hue: 'yellow',
+        shade: 300
+      },
+      light: {
+        hue: 'orange',
+        shade: 700
+      }
+    }),
+    inserted: getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    keyword: getColor({
+      theme,
+      hue: 'fuschia',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    name: getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 400
+      },
+      light: {
+        hue: 'crimson',
+        shade: 700
+      }
+    }),
+    number: getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 400
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    punctuation: getColor({
+      theme,
+      dark: {
+        hue: 'grey',
+        shade: 700
+      },
+      light: {
+        hue: 'red',
+        shade: 900
+      }
+    }),
+    regex: getColor({
+      theme,
+      hue: 'red',
+      shade: 600
+    }),
+    value: getColor({
+      theme,
+      dark: {
+        hue: 'crimson',
+        shade: 600
+      },
+      light: {
+        hue: 'red',
+        shade: 800
+      }
+    })
+  };
+  return css(["&.builtin,&.class-name,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script){color:", ";}&.doctype,&.prolog,&.tag.punctuation:not(.attr-value):not(.script):not(.spread){color:", ";}&.attribute.value,&.attr-value,&.atrule,&.cdata,&.string,&.url.content{color:", ";}&.constant,&.interpolation-punctuation{color:", ";}&.attr-name,&.attr-value.spread,&.environment,&.interpolation,&.parameter,&.property,&.property-access,&.variable{color:", ";}&.parameter.punctuation,&.attr-name + .attr-value.punctuation{color:inherit;}&.regex{color:", ";}&.boolean,&.bold:not(.diff),&.entity,&.important,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script):not(.class-name){color:", ";}&.number,&.unit{color:", ";}&.assign-left,&.function,&.selector:not(.attribute){color:", ";}&.atrule.rule,&.keyword{color:", ";}&.blockquote,&.comment,&.shebang{color:", ";}", ".language-css &&.plain{color:", ";}", ".language-diff &&.coord{color:", ";}", ".language-diff &&.deleted{color:", ";}", ".language-diff &&.diff{color:", ";}", ".language-diff &&.inserted{color:", ";}"], colors.builtin, colors.punctuation, colors.value, colors.constant, colors.name, colors.regex, colors.boolean, colors.number, colors.function, colors.keyword, colors.comment, StyledCodeBlock, colors.value, StyledCodeBlock, colors.coord, StyledCodeBlock, colors.deleted, StyledCodeBlock, colors.diff, StyledCodeBlock, colors.inserted);
+};
+const StyledCodeBlockToken = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledCodeBlockToken",
+  componentId: "sc-1hkshdq-0"
+})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledCodeBlockToken.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledCodeBlockToken };

package/dist/esm/styled/StyledEllipsis.js

@@ -0,0 +1,22 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'typography.ellipsis';
+const StyledEllipsis = styled.div.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.20'
+}).withConfig({
+  displayName: "StyledEllipsis",
+  componentId: "sc-1u4uqmy-0"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], props => props.theme.rtl ? 'rtl' : 'ltr', props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledEllipsis.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledEllipsis };