Improve InputSelect, Text components

app/components/InputSelect.tsx

@@ -174,7 +174,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
         {opt.description && (
           <>
             &nbsp;
-            <Text as="span" type="tertiary" size="small">
+            <Text as="span" type="tertiary" size="small" ellipsis>
               – {opt.description}
             </Text>
           </>

app/components/Text.ts

@@ -1,11 +1,19 @@
 import styled, { css } from "styled-components";
+import { ellipsis } from "@shared/styles";
 
 type Props = {
+  /** The type of text to render */
   type?: "secondary" | "tertiary" | "danger";
+  /** The size of the text */
   size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+  /** The direction of the text (defaults to ltr) */
   dir?: "ltr" | "rtl" | "auto";
+  /** Whether the text should be selectable (defaults to false) */
   selectable?: boolean;
+  /** The font weight of the text */
   weight?: "bold" | "normal";
+  /** Whether the text should be truncated with an ellipsis */
+  ellipsis?: boolean;
 };
 
 /**
@@ -48,6 +56,8 @@ const Text = styled.span<Props>`
 
   white-space: normal;
   user-select: ${(props) => (props.selectable ? "text" : "none")};
+
+  ${(props) => props.ellipsis && ellipsis()}
 `;
 
 export default Text;