feat: Implement a flippable arrow ui component

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';