@soul-refiner/design-system 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/common/styles.ts

@@ -61,11 +61,11 @@ export namespace Styles {
   export const padding = css<Padding>`
     padding: ${({ $padding }) =>
       $padding && typeof $padding === 'number'
-        ? `${$padding}px`
+        ? `${$padding}px;`
         : $padding && typeof $padding === 'string' && $padding.includes('px')
         ? $padding
         : $padding && typeof $padding === 'string'
-        ? `var(--${$padding})`
+        ? `var(--${$padding});`
         : '0px'};
   `;
 

package/src/components/actions/rate/rate.tsx

@@ -84,5 +84,5 @@ const SVG = styled.svg<{
   $isRateable?: number;
 }>`
   fill: url(#MyGradient);
-  cursor: pointer;
+  cursor: ${({ $isRateable }) => ($isRateable ? 'pointer' : 'initial')};
 `;

package/src/components/atoms/box/box.tsx

@@ -15,6 +15,7 @@ import {
 type NativeProps = Pick<
   React.HTMLAttributes<HTMLDivElement>,
   | 'children'
+  | 'className'
   | 'dangerouslySetInnerHTML'
   | 'onBlur'
   | 'onBlurCapture'

package/src/components/atoms/typography/heading.tsx

@@ -8,7 +8,7 @@ export interface CommonProps extends TypographyProps {
 
 export interface HeadingProps extends CommonProps {
   as?: React.ElementType;
-  $fontSize?: 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
+  $fontSize?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
   $lineHeight?: 64 | 60 | 54 | 48 | 36 | 28 | 26;
 }
 

package/src/components/atoms/typography/paragraph.tsx

@@ -19,7 +19,6 @@ export const P = ({
   $fontSize = 16,
   $lineHeight = 24,
   $textAlign = 'left',
-
   ...rest
 }: ParagraphProps) => (
   <StyledP

package/src/components/card/action/action.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+
+export interface ActionCardProps {
+  actions: React.ReactElement | React.ReactElement[];
+  content: string;
+  image: string;
+  logo: React.ReactElement;
+  subtitle: string;
+  sx?: string;
+  title: string;
+}
+
+export const ActionCard = ({
+  actions,
+  content,
+  image,
+  logo,
+  subtitle,
+  sx,
+  title,
+}: ActionCardProps) => {
+  return (
+    <Action $backgroundImage={image} $sx={sx}>
+      <img src={image} alt="" />
+      <Figcaption>
+        <LogoWrapper>{logo}</LogoWrapper>
+        <H
+          as="span"
+          $mediumBold
+          $color="grey-2"
+          $fontSize={18}
+          $lineHeight={26}
+        >
+          {title}
+        </H>
+        <P as="span" $color="grey-4" $fontSize={12} $lineHeight={16}>
+          {subtitle}
+        </P>
+        <P
+          as="span"
+          $color="grey-3"
+          $fontSize={14}
+          $lineHeight={20}
+          $textAlign="center"
+          sx="margin-top: 12px;"
+        >
+          {content}
+        </P>
+        <Box
+          $display="flex"
+          $dir="row"
+          $gap={8}
+          sx="margin-top: 8px; width: 100%;"
+        >
+          {React.Children.toArray(actions)}
+        </Box>
+      </Figcaption>
+    </Action>
+  );
+};
+
+const Action = styled.figure<{
+  $backgroundImage: string;
+  $sx?: string;
+}>`
+  position: relative;
+  aspect-ratio: 310 / 374;
+  border-radius: 16px;
+  max-width: 374px;
+  width: 100%;
+  margin: 0px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  box-shadow: var(--elevation-1);
+
+  img {
+    aspect-ratio: 310 / 160;
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figcaption = styled.figcaption`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-flow: column nowrap;
+  aspect-ratio: 310 / 198;
+  padding: 56px 16px 16px;
+  box-sizing: border-box;
+  background-color: var(--color-white);
+  border-radius: 0px 0px 15px 15px;
+  text-align: center;
+`;
+
+const LogoWrapper = styled.div`
+  position: absolute;
+  top: -28px;
+  right: calc(50% - 28px);
+  border: 4px solid var(--color-white);
+  border-radius: 50%;
+`;

package/src/components/card/action/index.ts

@@ -0,0 +1,2 @@
+export { ActionCard } from './action';
+export type { ActionCardProps } from './action';

package/src/components/card/audio/audio.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Rate } from 'components';
+
+export interface AudioEpisodeCardProps {
+  actions: React.ReactElement[];
+  actionDropdown?: React.ReactElement;
+  content: string;
+  cta: React.ReactElement;
+  href: string;
+  image: string;
+  logo?: React.ReactElement;
+  numRating: number;
+  rating: number;
+  subtitle: string;
+  supportLabel?: string;
+  sx?: string;
+  title: string;
+}
+
+export const AudioEpisodeCard = ({
+  actions,
+  actionDropdown,
+  content,
+  cta,
+  href,
+  image,
+  logo,
+  numRating,
+  rating,
+  subtitle,
+  supportLabel,
+  sx,
+  title,
+}: AudioEpisodeCardProps) => {
+  const hasLogo = !!logo;
+
+  return (
+    <Wrapper $sx={sx} href={href}>
+      <Figure>
+        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
+        <img className="thumbnail" src={image} alt="" />
+        <Figcaption>
+          <Box $display="block" className="hidden">
+            {cta}
+          </Box>
+          <Box $align="center" $dir="row" $gap={16}>
+            {logo}
+            <Box $dir="column">
+              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
+                {title}
+              </H>
+              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
+                {subtitle}
+              </P>
+            </Box>
+            {supportLabel && (
+              <P
+                className="not-hover"
+                $color="grey-4"
+                $fontSize={12}
+                $lineHeight={16}
+                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
+              >
+                {supportLabel}
+              </P>
+            )}
+          </Box>
+          <P
+            $color="grey-5"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={6}
+            className="hidden inline"
+          >
+            {content}
+          </P>
+          <Box className="hidden" $align="center" $dir="row">
+            <Rate isRateable={false} percent={rating} size="small" />
+            <P
+              $color="grey-4"
+              $fontSize={12}
+              $lineHeight={16}
+              sx="margin: 0px auto 0px 4px;"
+            >
+              ({numRating})
+            </P>
+            <Box $align="center" $dir="row" $gap={8}>
+              {React.Children.toArray(actions)}
+            </Box>
+          </Box>
+        </Figcaption>
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.a<{ $sx?: string }>`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  user-select: none;
+
+  figure {
+    max-width: 228px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    .hidden {
+      display: flex;
+
+      &.inline {
+        display: -webkit-box;
+      }
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+    }
+
+    figure {
+      max-width: 280px;
+      aspect-ratio: 280 / 434;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+    }
+
+    figcaption {
+      margin-top: -80px;
+      padding: 24px;
+    }
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figure = styled.figure`
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    border-radius: 16px;
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 228 / 228;
+  }
+`;
+
+const Figcaption = styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`;
+
+const DropdownWrapper = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;

package/src/components/card/audio/index.ts

@@ -0,0 +1,2 @@
+export { AudioEpisodeCard } from './audio';
+export type { AudioEpisodeCardProps } from './audio';

package/src/components/card/card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ActionCard, ActionCardProps } from './action';
+import { AudioEpisodeCard, AudioEpisodeCardProps } from './audio';
+import { FeatureCard, FeatureCardProps } from './feature';
+import { PersonCard, PersonCardProps } from './person';
+import { PriceCard, PriceCardProps } from './price';
+import { RegularCard, RegularCardProps } from './regular';
+import { VideoEpisodeCard, VideoEpisodeCardProps } from './video';
+import { WrittenEpisodeCard, WrittenEpisodeCardProps } from './written';
+
+type CardType =
+  | 'action'
+  | 'audio-episode'
+  | 'feature'
+  | 'person'
+  | 'price'
+  | 'regular'
+  | 'video-episode'
+  | 'written-episode';
+
+export type CardProps = (
+  | ActionCardProps
+  | AudioEpisodeCardProps
+  | FeatureCardProps
+  | PersonCardProps
+  | PriceCardProps
+  | RegularCardProps
+  | VideoEpisodeCardProps
+  | WrittenEpisodeCardProps
+) & {
+  type: CardType;
+};
+
+export const Card = ({ type = 'regular', ...rest }: CardProps) => {
+  const lookup: Record<CardType, React.ReactElement> = {
+    action: <ActionCard {...(rest as ActionCardProps)} />,
+    'audio-episode': <AudioEpisodeCard {...(rest as AudioEpisodeCardProps)} />,
+    feature: <FeatureCard {...(rest as FeatureCardProps)} />,
+    person: <PersonCard {...(rest as PersonCardProps)} />,
+    price: <PriceCard {...(rest as PriceCardProps)} />,
+    regular: <RegularCard {...(rest as RegularCardProps)} />,
+    'video-episode': <VideoEpisodeCard {...(rest as VideoEpisodeCardProps)} />,
+    'written-episode': (
+      <WrittenEpisodeCard {...(rest as WrittenEpisodeCardProps)} />
+    ),
+  };
+
+  return lookup[type];
+};

package/src/components/card/feature/feature.tsx

@@ -0,0 +1,248 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, Button, Modal } from 'components';
+import { Camera, Checkmark, Close, Pencil } from 'icons';
+
+export interface FeatureCardProps {
+  content: string;
+  editable?: boolean;
+  href?: string;
+  image: string;
+  onSave?: (title: string, content: string) => void;
+  sx?: string;
+  title: string;
+  uploadModal?: React.ReactElement;
+}
+
+export const FeatureCard = ({
+  content = '',
+  editable,
+  href,
+  image,
+  onSave,
+  sx,
+  title = '',
+  uploadModal,
+}: FeatureCardProps) => {
+  const [editing, setEditing] = React.useState(false);
+  const [editingTitle, setTitle] = React.useState(() => title);
+  const [editingContent, setContent] = React.useState(() => content);
+
+  const handleSetEditing = () => setEditing(true);
+
+  const handleCancelEdit = () => {
+    setTitle(title);
+    setContent(content);
+    setEditing(false);
+  };
+
+  const handleSave = () => {
+    setEditing(false);
+    onSave && onSave(editingTitle, editingContent);
+  };
+
+  const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+  };
+
+  const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setContent(event.target.value);
+  };
+
+  const showEditIcon = !editing && editable;
+  const isLink = !!href;
+
+  return (
+    <Wrapper as={isLink ? 'div' : 'a'} href={href}>
+      <Figure $editing={editing} $isLink={isLink} $sx={sx}>
+        <img alt={title} src={image} />
+        {!editing && (
+          <Title>
+            {editingTitle}
+            <figure>
+              <Content>{editingContent}</Content>
+            </figure>
+            {showEditIcon && (
+              <Pencil className="edit" onClick={handleSetEditing} />
+            )}
+            {editable && uploadModal && (
+              <Modal>
+                <Modal.Trigger>
+                  <Button
+                    icon={<Camera />}
+                    type="outlined"
+                    size="small"
+                    sx="position: absolute; right: 8px; top: -72px;"
+                  >
+                    Edit
+                  </Button>
+                </Modal.Trigger>
+                <Modal.Content>{uploadModal}</Modal.Content>
+              </Modal>
+            )}
+          </Title>
+        )}
+        {editing && (
+          <Box
+            $align="flex-end"
+            $display="flex"
+            $dir="column"
+            $gap={8}
+            sx="position: relative;"
+          >
+            <EditTitle onChange={handleTitleChange} value={editingTitle} />
+            <EditContent
+              onChange={handleContentChange}
+              value={editingContent}
+            />
+            <Box $gap={8}>
+              <Checkmark
+                onClick={handleSave}
+                sx={`
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                `}
+              />
+              <Close
+                onClick={handleCancelEdit}
+                sx={`
+                  padding: 8px;
+                  border-radius: 4px;
+                  cursor: pointer;
+                  background-color: var(--color-white); 
+                  box-shadow: var(--elevation-1);
+                  &:hover {
+                    background-color: var(--color-grey-10);
+                  }
+                `}
+              />
+            </Box>
+          </Box>
+        )}
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  text-decoration: none;
+`;
+
+const Figure = styled.figure<{
+  $editing: boolean;
+  $isLink: boolean;
+  $sx?: string;
+}>`
+  max-width: 352px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 16px;
+  padding: 16px;
+  margin: 0px;
+  border-radius: 16px;
+  box-shadow: var(--elevation-1);
+  border: 1px solid var(--color-white);
+
+  &:hover {
+    ${({ $isLink }) =>
+      $isLink
+        ? 'border: 1px solid var(--color-primary-blue-3); cursor: pointer;'
+        : 'cursor: arrow;'}
+
+    button {
+      display: flex;
+    }
+
+    .edit {
+      display: block;
+    }
+  }
+
+  img {
+    max-width: 352px;
+    aspect-ratio: 1/1;
+  }
+
+  figure {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 4px;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  button {
+    display: none;
+  }
+
+  .edit {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+  }
+
+  ${({ $editing }) =>
+    $editing
+      ? `
+    background-color: var(--color-grey-9);`
+      : `
+    background-color: var(--color-white);`}
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Title = styled.figcaption`
+  position: relative;
+  padding-right: 32px;
+  color: var(--color-grey-2);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  user-select: none;
+`;
+
+const Content = styled.figcaption`
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;
+
+const EditTitle = styled.input`
+  width: calc(100% - 24px);
+  padding: 12px;
+  background-color: var(--color-white);
+  font-size: 18px;
+  font-family: Inter;
+  font-weight: 500;
+  line-height: 26px;
+  letter-spacing: -0.252px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+`;
+
+const EditContent = styled(EditTitle)`
+  padding: 6px 12px;
+  font-size: 14px;
+  font-family: Inter;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+`;

package/src/components/card/feature/index.ts

@@ -0,0 +1,2 @@
+export { FeatureCard } from './feature';
+export type { FeatureCardProps } from './feature';

package/src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export type { CardProps } from './card';

package/src/components/card/person/index.ts

@@ -0,0 +1,2 @@
+export { PersonCard } from './person';
+export type { PersonCardProps } from './person';

package/src/components/card/person/person.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+
+export interface PersonCardProps {
+  actions?: React.ReactElement | React.ReactElement[];
+  href: string;
+  image: string;
+  subtitle: string;
+  sx?: string;
+  title: string;
+}
+
+export const PersonCard = ({
+  actions,
+  href,
+  image,
+  subtitle,
+  sx,
+  title,
+}: PersonCardProps) => {
+  return (
+    <Wrapper $image={image} as={href ? 'a' : 'div'}>
+      <Person $sx={sx}>
+        <Shadow>
+          <img src={image} alt="" />
+        </Shadow>
+        <Figcaption>
+          <H as="span" $bold $color="white" $fontSize={24} $lineHeight={36}>
+            {title}
+          </H>
+          <P as="span" $color="white" $fontSize={14} $lineHeight={20}>
+            {subtitle}
+          </P>
+          {actions && (
+            <Box $display="flex" $dir="row" $gap={8} sx="margin-top: 16px;">
+              {React.Children.toArray(actions)}
+            </Box>
+          )}
+        </Figcaption>
+      </Person>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{
+  $image: string;
+}>`
+  width: 312px;
+  height: 400px;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 16px;
+  }
+`;
+
+const Shadow = styled.div`
+  border-radius: 16px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
+    transparent 50% / cover no-repeat;
+`;
+
+const Person = styled.figure<{
+  $sx?: string;
+}>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figcaption = styled.figcaption`
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+`;

package/src/components/card/price/index.ts

@@ -0,0 +1,2 @@
+export { PriceCard } from './price';
+export type { PriceCardProps } from './price';

package/src/components/card/price/price.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P } from 'components';
+import { Checkmark } from 'icons';
+
+export interface PriceCardProps {
+  actions: React.ReactElement;
+  content: string;
+  features: string[];
+  featureTitle: string;
+  price: string;
+  title: string;
+}
+
+export const PriceCard = ({
+  actions,
+  content,
+  featureTitle,
+  features,
+  price,
+  title,
+}: PriceCardProps) => {
+  const id = React.useId();
+  return (
+    <Price>
+      <Box
+        $align="stretch"
+        $display="flex"
+        $dir="column"
+        $gap={24}
+        sx={`
+          padding: 24px 48px; 
+          background-color: var(--color-grey-10); 
+          border-radius: 16px 16px 0px 0px;
+        `}
+      >
+        <H
+          as="h6"
+          $fontSize={24}
+          $lineHeight={36}
+          $semiBold
+          $textAlign="center"
+        >
+          {title}
+        </H>
+        <Box $dir="column">
+          <H
+            as="p"
+            $bold
+            $fontSize={32}
+            $lineHeight={48}
+            $textClampLines={5}
+            $textAlign="center"
+          >
+            {price}
+          </H>
+          <P as="span" $color="grey-4" $textAlign="center">
+            /month
+          </P>
+        </Box>
+        {actions}
+      </Box>
+      <Box
+        sx="padding: 16px 24px; position: relative;"
+        $display="flex"
+        $dir="column"
+      >
+        <P sx="padding: 16px 0px;">{content}</P>
+        <Divider />
+        <Box sx="padding: 16px 0px;" $dir="column" $gap={8}>
+          <P $color="grey-2" $mediumBold>
+            {featureTitle}
+          </P>
+          {features.map((item, index) => (
+            <Box key={id + index.toString(36)} $align="center" $gap={12}>
+              <Checkmark
+                color="green-5"
+                sx="padding: 2px; border-radius: 50%; background-color: var(--color-green-9);"
+              />
+              <P $fontSize={14} $lineHeight={20}>
+                {item}
+              </P>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Price>
+  );
+};
+
+const Price = styled.figure`
+  margin: 0px;
+  padding: 0px;
+  width: 280px;
+  height: fit-content;
+  border-radius: 16px;
+  box-shadow: var(--elevation-2);
+  user-select: none;
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-3);
+  }
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: var(--color-grey-9);
+`;

package/src/components/card/regular/index.ts

@@ -0,0 +1,2 @@
+export { RegularCard } from './regular';
+export type { RegularCardProps } from './regular';

package/src/components/card/regular/regular.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from 'components';
+
+export interface RegularCardProps extends React.PropsWithChildren {
+  href?: string;
+  image: string;
+  sx?: string;
+}
+
+export const RegularCard = ({
+  children,
+  href,
+  image,
+  sx,
+}: RegularCardProps) => {
+  return (
+    <Wrapper $isLink={!!href} $sx={sx} as={href ? 'a' : 'div'} href={href}>
+      <img src={image} alt="" />
+      <Box $dir="column" $padding={24}>
+        {children}
+      </Box>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{
+  $isLink: boolean;
+  $sx?: string;
+}>`
+  position: relative;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: 16px;
+  background-color: var(--color-white);
+
+  ${({ $isLink }) =>
+    $isLink
+      ? `
+    &:hover {
+      border: 1px solid var(--color-primary-blue-3);
+    }`
+      : ''}
+
+  img {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;

package/src/components/card/video/index.ts

@@ -0,0 +1,2 @@
+export { VideoEpisodeCard } from './video';
+export type { VideoEpisodeCardProps } from './video';

package/src/components/card/video/video.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Rate } from 'components';
+
+export interface VideoEpisodeCardProps {
+  actions: React.ReactElement[];
+  actionDropdown?: React.ReactElement;
+  content: string;
+  cta: React.ReactElement;
+  href: string;
+  image: string;
+  logo?: React.ReactElement;
+  numRating: number;
+  rating: number;
+  subtitle: string;
+  supportLabel?: string;
+  sx?: string;
+  title: string;
+}
+
+export const VideoEpisodeCard = ({
+  actions,
+  actionDropdown,
+  content,
+  cta,
+  href,
+  image,
+  logo,
+  numRating,
+  rating,
+  subtitle,
+  supportLabel,
+  sx,
+  title,
+}: VideoEpisodeCardProps) => {
+  const hasLogo = !!logo;
+
+  return (
+    <Wrapper $sx={sx} href={href}>
+      <Figure>
+        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
+        <img className="thumbnail" src={image} alt="" />
+        <Figcaption>
+          <Box $display="block" className="hidden">
+            {cta}
+          </Box>
+          <Box $align="center" $dir="row" $gap={16}>
+            {logo}
+            <Box $dir="column">
+              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
+                {title}
+              </H>
+              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
+                {subtitle}
+              </P>
+            </Box>
+            {supportLabel && (
+              <P
+                className="not-hover"
+                $color="grey-4"
+                $fontSize={12}
+                $lineHeight={16}
+                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
+              >
+                {supportLabel}
+              </P>
+            )}
+          </Box>
+          <P
+            $color="grey-5"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={4}
+            className="hidden"
+          >
+            {content}
+          </P>
+          <Box className="hidden" $align="center" $dir="row">
+            <Rate isRateable={false} percent={rating} size="small" />
+            <P
+              $color="grey-4"
+              $fontSize={12}
+              $lineHeight={16}
+              sx="margin: 0px auto 0px 4px;"
+            >
+              ({numRating})
+            </P>
+            <Box $align="center" $dir="row" $gap={8}>
+              {React.Children.toArray(actions)}
+            </Box>
+          </Box>
+        </Figcaption>
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.a<{ $sx?: string }>`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  user-select: none;
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    .hidden {
+      display: flex;
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+    }
+
+    figure {
+      aspect-ratio: 410 / 414;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+    }
+
+    figcaption {
+      margin-top: -40px;
+      padding: 24px;
+    }
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figure = styled.figure`
+  max-width: 410px;
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 410 / 239;
+    border-radius: 16px;
+  }
+`;
+
+const Figcaption = styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`;
+
+const DropdownWrapper = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;

package/src/components/card/written/index.ts

@@ -0,0 +1,2 @@
+export { WrittenEpisodeCard } from './written';
+export type { WrittenEpisodeCardProps } from './written';

package/src/components/card/written/written.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Rate } from 'components';
+
+export interface WrittenEpisodeCardProps {
+  actions: React.ReactElement[];
+  actionDropdown?: React.ReactElement;
+  content: string;
+  cta: React.ReactElement;
+  href: string;
+  image: string;
+  logo?: React.ReactElement;
+  numRating: number;
+  rating: number;
+  subtitle: string;
+  supportLabel?: string;
+  sx?: string;
+  title: string;
+}
+
+export const WrittenEpisodeCard = ({
+  actions,
+  actionDropdown,
+  content,
+  cta,
+  href,
+  image,
+  logo,
+  numRating,
+  rating,
+  subtitle,
+  supportLabel,
+  sx,
+  title,
+}: WrittenEpisodeCardProps) => {
+  const hasLogo = !!logo;
+
+  return (
+    <Wrapper $sx={sx} href={href}>
+      <Figure>
+        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
+        <img className="thumbnail" src={image} alt="" />
+        <Figcaption>
+          <Box $display="block" className="hidden">
+            {cta}
+          </Box>
+          <Box $align="center" $dir="row" $gap={16}>
+            {logo}
+            <Box $dir="column">
+              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
+                {title}
+              </H>
+              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
+                {subtitle}
+              </P>
+            </Box>
+            {supportLabel && (
+              <P
+                className="not-hover"
+                $color="grey-4"
+                $fontSize={12}
+                $lineHeight={16}
+                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
+              >
+                {supportLabel}
+              </P>
+            )}
+          </Box>
+          <P
+            $color="grey-5"
+            $fontSize={14}
+            $lineHeight={20}
+            $mediumBold
+            $textClampLines={6}
+            className="hidden inline"
+          >
+            {content}
+          </P>
+          <Box className="hidden" $align="center" $dir="row">
+            <Rate isRateable={false} percent={rating} size="small" />
+            <P
+              $color="grey-4"
+              $fontSize={12}
+              $lineHeight={16}
+              sx="margin: 0px auto 0px 4px;"
+            >
+              ({numRating})
+            </P>
+            <Box $align="center" $dir="row" $gap={8}>
+              {React.Children.toArray(actions)}
+            </Box>
+          </Box>
+        </Figcaption>
+      </Figure>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.a<{ $sx?: string }>`
+  cursor: pointer;
+  display: block;
+  position: relative;
+  user-select: none;
+
+  figure {
+    max-width: 228px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  &:hover {
+    .hidden {
+      display: flex;
+
+      &.inline {
+        display: -webkit-box;
+      }
+    }
+
+    .not-hover {
+      display: none;
+    }
+
+    .thumbnail {
+      border-radius: 16px 16px 0px 0px;
+      aspect-ratio: 228 / 228;
+    }
+
+    figure {
+      max-width: 280px;
+      aspect-ratio: 280 / 434;
+      box-shadow: var(--elevation-3);
+      background: linear-gradient(
+        0deg,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.85) 55%,
+        rgba(255, 255, 255, 0.1) 80%
+      );
+    }
+
+    figcaption {
+      margin-top: -80px;
+      padding: 24px;
+    }
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+
+const Figure = styled.figure`
+  margin: 0px;
+  border-radius: 16px;
+
+  .thumbnail {
+    border-radius: 16px;
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    aspect-ratio: 228 / 326;
+  }
+`;
+
+const Figcaption = styled.figcaption`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 8px;
+  padding: 8px;
+`;
+
+const DropdownWrapper = styled.div`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;

package/src/components/iconography/avatar/avatar.tsx

@@ -186,9 +186,11 @@ const Container = styled.div<{
   $size: number;
   href?: string;
 }>`
+  flex-shrink: 0;
   display: flex;
   flex-flow: row nowrap;
-  cursor: pointer;
+  cursor: ${({ as }) =>
+    as && (as === 'a' || as === 'button') ? 'pointer' : 'initial'};
   padding: 0px;
   border: 0px;
   position: relative;
@@ -196,6 +198,7 @@ const Container = styled.div<{
 
   > img,
   > svg {
+    flex-shrink: 0;
     border-radius: 50%;
     overflow: hidden;
     object-fit: cover;

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './actions';
 export * from './atoms';
+export * from './card';
 export * from './feedback';
 export * from './iconography';
 export * from './input';