fix: review changes

src/components/Label/Label.props.ts

@@ -1,15 +1,15 @@
 import { SystemProps } from '@xstyled/styled-components';
 
 import { config } from './Label.styles';
-import { ButtonProps } from '../Button';
+// import { ButtonProps } from '../Button';
 
 import { Theme } from '@/theme';
 import { DeepPartial } from '@/utility-types/DeepPartial';
 
 export type LabelProps = {
   label: string;
-  action?: ButtonProps<'bare'>;
+  // action?: ButtonProps<'bare'>;
   tooltip?: boolean;
-  optional?: boolean;
+  optional?: string;
   custom?: DeepPartial<SystemProps<Theme> & typeof config>;
 };

src/components/Label/Label.tsx

@@ -4,7 +4,7 @@ import { merge } from 'lodash';
 
 import { LabelProps } from './Label.props';
 import { config as defaultConfig } from './Label.styles';
-import { Button } from '../Button';
+// import { Button } from '../Button';
 
 import { tet } from '@/tetrisly';
 
@@ -24,9 +24,9 @@ export const Label = ({
   return (
     <tet.div {...labelStyles} {...rest} data-testid="label">
       {label}
-      {optional && (
+      {!!optional && (
         <tet.span {...optionalStyles} data-testid="label-optional">
-          (optional)
+          ({optional})
         </tet.span>
       )}
       {/* TODO: add tooltip instead of bare icon, when we get one */}
@@ -35,14 +35,15 @@ export const Label = ({
           <Icon name="20-info-fill" />
         </tet.span>
       )}
-      {!!action && (
+      {/* TODO: add action when we discuss how they should behave */}
+      {/* {!!action && (
         <Button
           variant="bare"
           {...action}
           marginLeft="auto"
           data-testid="label-action"
         />
-      )}
+      )} */}
     </tet.div>
   );
 };