feat: Implement a flippable arrow ui component (#78)

Resolves [DSTRBTN-540]

<details open="true"><summary>Generated summary (powered by <a href="https://app.graphite.dev">Graphite</a>)</summary>

> ## TL;DR
> This pull request introduces a new UI component, `FlippableArrow`, which is an arrow icon that can be flipped vertically based on the `expanded` prop. 
> 
> ## What changed
> Three new files were added to the `src/ui/FlippableArrow` directory:
> 
> 1. `FlippableArrow.styles.ts`: This file contains the styled component `IconWrapper` which applies a 3D rotation transformation to its child based on the `expanded` prop.
> 
> 2. `FlippableArrow.tsx`: This is the main component file. It accepts `expanded`, `color`, and `size` as props and renders the `IconWrapper` with an `Icon` child.
> 
> 3. `index.ts`: This file exports the `FlippableArrow` component.
> 
> ## How to test
> To test this component, import it into a React component and pass in the required props. Change the `expanded` prop to see the arrow icon flip.
> 
> ```jsx
> import React, { useState } from 'react';
> import FlippableArrow from 'src/ui/FlippableArrow';
> 
> function TestComponent() {
>   const [expanded, setExpanded] = useState(false);
> 
>   return (
>     <div>
>       <FlippableArrow expanded={expanded} color="black" size={24} />
>       <button onClick={() => setExpanded(!expanded)}>Toggle</button>
>     </div>
>   );
> }
> ```
> 
> ## Why make this change
> This change was made to provide a reusable UI component that can be used wherever a flippable arrow icon is needed, such as in accordions or dropdown menus. This will help ensure consistency across the application and reduce code duplication.
</details>

[DSTRBTN-540]: https://orfium.atlassian.net/browse/DSTRBTN-540?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

src/ui/FlippableArrow/FlippableArrow.styles.ts

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+import { transition } from '@orfium/ictinus/dist/theme/functions';
+
+export const IconWrapper = styled.span<{ expanded: boolean }>`
+  perspective: 1000px;
+  position: relative;
+
+  > span {
+    ${transition(0.2)};
+    transform-style: preserve-3d;
+    transform: ${({ expanded }) => (expanded ? `rotateX(180deg) ` : `rotateX(0)`)};
+  }
+`;

src/ui/FlippableArrow/FlippableArrow.tsx

@@ -0,0 +1,20 @@
+import { Icon } from '@orfium/ictinus';
+import { IconWrapper } from './FlippableArrow.styles';
+
+type FlippableChevronProps = {
+  expanded: boolean;
+  color: string;
+  size: number;
+};
+
+function FlippableArrow(props: FlippableChevronProps) {
+  const { expanded, color, size } = props;
+
+  return (
+    <IconWrapper expanded={expanded}>
+      <Icon name={'triangleDown'} color={color} size={size} />
+    </IconWrapper>
+  );
+}
+
+export default FlippableArrow;

src/ui/FlippableArrow/index.ts

@@ -0,0 +1,2 @@
+export * from './FlippableArrow';
+export { default } from './FlippableArrow';