How to use the @paprika/stylers.truncateText function in @paprika/stylers

[role="button"] {
    font-weight: bold;
    margin-left: -${tokens.spaceSm};
    padding: ${tokens.space} ${tokens.spaceSm};
    width: calc(100% + ${tokens.spaceSm});
  }
`;

export const itemLabelStyles = css`
  ${stylers.truncateText}
`;

export const incompleteStyles = css`
  ${stylers.fontSize()}
  ${stylers.truncateText}

  border-bottom: 1px solid ${tokens.border.color};
  flex-grow: 1;
  font-weight: bold;
  height: ${incompleteHeight};
  line-height: ${incompleteHeight};
`;

}

  &:focus {
    outline: 0;
  }

  svg {
    margin-right: ${tokens.spaceSm};
  }

  ${({ size }) => pillSizeStyles[size]}
  ${({ pillColor }) => pillColorStyles[pillColor]}
`;

export const pillTextStyles = css`
  ${stylers.truncateText};
  align-items: center;
  display: inline-flex;
`;

export default pillStyles;

}
`;

export const TagBodyStyled = styled.span`
  display: flex;
  width: 100%;
  align-items: center;
  line-height: 1;
`;

export const TagBodyTextStyled = styled.span`
  display: block;
  width: 100%;
  align-items: flex-end;
  padding-right: 8px;
  ${stylers.truncateText};
`;

&.spinner--medium .spinner__visual {
  border-width: 3px;
  height: ${stylers.spacer(6)};
  width: ${stylers.spacer(6)};
}

&.spinner--large .spinner__visual {
  border-width: 4px;
  height: ${stylers.spacer(9)};
  width: ${stylers.spacer(9)};
}

.spinner__caption {
  ${stylers.lineHeight(-2)}
  ${stylers.truncateText}
  color: ${tokens.color.blackLighten20};
  font-weight: normal;
  margin: ${tokens.space} auto 0 auto;
  overflow: hidden;
  text-align: center;
}

&.spinner--small .spinner__caption {
  ${stylers.fontSize(-3)};
  max-width: 210px;
}

&.spinner--medium .spinner__caption {
  ${stylers.fontSize(-1)};
  max-width: 240px;
}

export const itemStyles = css`
  color: ${tokens.textColor.subtle};
  display: flex;

  [data-pka-anchor="indicator"] {
    margin: ${tokens.space} ${tokens.spaceLg} 0 0;
  }
`;

export const activeItemStyles = css`
  display: flex;
  justify-content: space-between;
`;

export const activeLabelStyles = css`
  ${stylers.truncateText}
  
  color: ${tokens.color.blue};
`;

export const activeStatusStyles = css`
  ${stylers.fontSize(-1)}

  font-style: italic;
  font-weight: normal;
`;

import styled from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

export const Box = styled.div`
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.border.radius};
  margin-bottom: ${stylers.spacer(2)};
  padding: ${stylers.spacer(2)};
  width: 280px;
`;

export const TruncatedBox = styled(Box)`
  ${stylers.truncateText};
`;

export const UntruncatedBox = styled(TruncatedBox)`
  ${stylers.noTruncateText};
`;

export const InvisibleBox = styled(Box)`
  ${stylers.visuallyHidden};
`;

export const InputWithPlaceholder = styled.input`
  ${stylers.placeholders};
`;

export const FontScale = styled.div``;