@remember-web/primitive 0.0.0-alpha.1

package/src/Inputs/Select/index.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import type { Ref, RefAttributes } from 'react';
+import { Children, forwardRef } from 'react';
+
+import DesignedSelect from './DesignedSelect';
+import NativeSelect from './NativeSelect';
+import { NativeOption } from './NativeSelect/Option';
+import { OptionHolder } from './Option';
+import { SelectLabel } from './styles';
+import type {
+  DesignedSelectProps,
+  NativeSelectProps,
+  SelectProps,
+  SelectValue,
+} from './types';
+
+function Select<Value extends SelectValue>(
+  props: SelectProps<Value>,
+  ref: Ref<HTMLDivElement | HTMLSelectElement>
+) {
+  const {
+    children,
+    label,
+    value,
+    className,
+    disabled,
+    onChange,
+    placeholder,
+    width,
+    required,
+  } = props;
+
+  if (props.native) {
+    return (
+      <div>
+        {label && (
+          <SelectLabel>
+            {label}
+            {required && <mark>*</mark>}
+          </SelectLabel>
+        )}
+        <NativeSelect
+          disabled={disabled}
+          className={className}
+          onChange={(e) => {
+            onChange?.(e.target.value as Value, e.target.innerText);
+          }}
+          value={value}
+          required={required}
+          placeholder={placeholder}
+          width={width}
+          ref={ref as Ref<HTMLSelectElement>}
+        >
+          {Children.map(children, (child) => (
+            <NativeOption {...child.props} />
+          ))}
+        </NativeSelect>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {label && (
+        <SelectLabel>
+          {label}
+          {required && <mark>*</mark>}
+        </SelectLabel>
+      )}
+      <DesignedSelect
+        className={className}
+        value={value}
+        disabled={disabled}
+        onChange={(_value, _label) => onChange?.(_value as Value, _label)}
+        placeholder={placeholder}
+        width={width}
+        maxHeight={props.maxHeight}
+        extendDirection={props.extendDirection}
+        ref={ref as Ref<HTMLDivElement>}
+      >
+        {children}
+      </DesignedSelect>
+    </div>
+  );
+}
+
+export default Object.assign(
+  forwardRef(Select) as <Value extends SelectValue>(
+    props:
+      | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)
+      | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)
+  ) => JSX.Element,
+  { Option: OptionHolder }
+);

package/src/Inputs/Select/styles.ts

@@ -0,0 +1,53 @@
+'use client';
+
+import styled from 'styled-components';
+import {
+  bg200,
+  contents000,
+  contents200,
+  contents300,
+  getTypographyStyles,
+  roleRed,
+} from '@remember-web/mixin';
+
+export const SelectContainer = styled.div<{ $width?: number | string }>`
+  ${getTypographyStyles('Body1_M')}
+  color: ${contents000};
+  width: ${({ $width }) => {
+    if (!$width) {
+      return 'fit-content';
+    }
+
+    if (typeof $width === 'number') {
+      return `${$width}px`;
+    }
+
+    return $width;
+  }};
+  position: relative;
+  user-select: none;
+
+  &:focus {
+    outline: none;
+    border-color: ${contents000};
+  }
+  &[aria-disabled='true'] {
+    color: ${contents200};
+    border-color: ${contents300};
+    background-color: ${bg200};
+  }
+`;
+
+export const SelectLabel = styled.label`
+  ${getTypographyStyles('Headline4_B')}
+  display: block;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  & > mark {
+    all: unset;
+    color: ${roleRed};
+  }
+`;

package/src/Inputs/Select/types.ts

@@ -0,0 +1,52 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import type { OptionHolder } from './Option';
+
+export type OptionElementType<Value extends SelectValue> = ReactElement<
+  OptionProps<Value>,
+  typeof OptionHolder
+>;
+
+type WithOptionProps<Value extends SelectValue> = {
+  children: OptionElementType<Value> | OptionElementType<Value>[];
+};
+
+export type SelectValue = string | number | undefined;
+
+export type SelectBaseProps<Value extends SelectValue> = {
+  className?: string;
+  disabled?: boolean;
+  error?: boolean;
+  label?: ReactNode;
+  required?: boolean;
+  // TODO: children의 prop에 따라 결정되는 제네릭 구현이 필요 infer를 활용하면 될 것 같기도 한데 추후 확인
+  value?: Value;
+  placeholder?: string;
+  width?: number | string;
+  onChange?: (
+    targetValue: Value,
+    targetLabel: ReactNode
+  ) => Promise<void> | void;
+};
+
+export type DesignedSelectProps<Value extends SelectValue> =
+  SelectBaseProps<Value> & {
+    native?: false | never;
+    maxHeight?: number;
+    extendDirection?: 'above' | 'below';
+  } & WithOptionProps<Value>;
+
+export type NativeSelectProps<Value extends SelectValue> =
+  SelectBaseProps<Value> & {
+    native: true;
+  } & WithOptionProps<Value>;
+
+export type SelectProps<Value extends SelectValue> =
+  | DesignedSelectProps<Value>
+  | NativeSelectProps<Value>;
+
+export type OptionProps<Value extends SelectValue> = {
+  disabled?: boolean;
+  value: Value;
+  children: ReactNode;
+};

package/src/Inputs/Select/utils.ts

@@ -0,0 +1,65 @@
+// focus된 요소의 sibling을 찾아서 focus
+export function focusSibling<E extends HTMLElement>(
+  currentFocusedElement: E,
+  siblingDirection: 'previous' | 'next'
+) {
+  if (currentFocusedElement?.matches('[data-option-value]')) {
+    const siblingElement = getSiblingElement(
+      currentFocusedElement,
+      siblingDirection
+    );
+    const listElement = currentFocusedElement.parentElement;
+    if (
+      listElement &&
+      siblingElement?.matches('[data-option-value]') &&
+      checkSameElementType(currentFocusedElement, siblingElement)
+    ) {
+      siblingElement.focus({ preventScroll: true });
+      // 방향키를 통해 넘어가는 스크롤 방향에 따라 scrollIntoView의 block을 다르게 설정
+      if (
+        {
+          // 아래 요소를 선택할 때 스크롤이 아래로 내려가는 경우
+          next:
+            siblingElement.offsetTop >=
+            (siblingElement.parentElement?.scrollTop ?? 0) +
+              listElement.clientHeight,
+
+          // 위 요소를 선택할 때 스크롤이 위로 올라가는 경우
+          previous:
+            siblingElement.offsetTop <=
+            (siblingElement.parentElement?.scrollTop ?? 0),
+        }[siblingDirection]
+      ) {
+        siblingElement.scrollIntoView({
+          block: siblingDirection === 'previous' ? 'start' : 'end',
+        });
+      }
+    }
+  }
+}
+
+const checkSameElementType = <E extends Element>(
+  element1: E,
+  element2: Element
+): element2 is E => element2 instanceof element1.constructor;
+
+// 재귀적으로 disabled되지 않은 sibling을 찾아서 반환
+function getSiblingElement<E extends Element>(
+  target: E,
+  siblingDirection: 'previous' | 'next'
+): E | null {
+  const siblingElement = target[`${siblingDirection}ElementSibling`];
+  if (
+    !siblingElement ||
+    !checkSameElementType(target, siblingElement) ||
+    !siblingElement.matches('[data-option-value]')
+  ) {
+    return null;
+  }
+
+  if (siblingElement.matches('[aria-disabled="true"]')) {
+    return getSiblingElement(siblingElement, siblingDirection);
+  }
+
+  return siblingElement;
+}

package/src/Inputs/TextInput/TextInput.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
+
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
+
+import TextInput from '.';
+
+type Story = StoryObj<typeof TextInput>;
+
+const meta = {
+  title: 'Inputs/TextInput',
+  component: TextInput,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: [
+        'text',
+        'email',
+        'number',
+        'search',
+        'tel',
+        'url',
+        'password',
+        'date',
+        'datetime-local',
+      ] satisfies Parameters<typeof TextInput>[0]['type'][],
+    },
+    hasTogglePasswordVisibilityButton: {
+      type: 'boolean',
+      defaultValue: false,
+      if: {
+        arg: 'type',
+        eq: 'password',
+      },
+    },
+    placeholder: {
+      type: 'string',
+      table: {
+        defaultValue: { summary: 'PlaceHolder' },
+      },
+    },
+    hintText: { type: 'string' },
+    hintTextColor: {
+      control: 'select',
+      options: ['roleRed', 'contents000', 'contents300'],
+      defaultValue: 'roleRed',
+    },
+    leftElement: { control: 'select', options: iconNames },
+    rightElement: { control: 'select', options: iconNames },
+    label: { type: 'string' },
+    required: { type: 'boolean', defaultValue: false },
+    errorMessage: { type: 'string' },
+    width: { type: 'number' },
+    disabled: {
+      type: 'boolean',
+      defaultValue: false,
+    },
+  },
+} satisfies Meta<typeof TextInput>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  render: ({ leftElement, rightElement, ...props }) => {
+    const leftIconString = String(leftElement);
+    const RightIconString = String(rightElement);
+    const renderedLeftElement =
+      leftElement &&
+      isIconName(leftIconString) &&
+      createElement(getIconComponentFromName(leftIconString));
+    const renderedRightElement =
+      rightElement &&
+      isIconName(RightIconString) &&
+      createElement(getIconComponentFromName(RightIconString));
+    return (
+      <TextInput
+        leftElement={renderedLeftElement}
+        rightElement={renderedRightElement}
+        placeholder="PlaceHolder"
+        {...props}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/Inputs/TextInput/index.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import type { ForwardRefRenderFunction } from 'react';
+import { forwardRef, useId, useState } from 'react';
+
+import { IconHidden, IconVisible } from '@remember-web/icon';
+
+import {
+  InputContainer,
+  InputDecorator,
+  InputError,
+  InputHintText,
+  InputInner,
+  InputLabel,
+  InputTogglePasswordVisibilityButton,
+  InputWrapper,
+} from './styles';
+import type { InputProps } from './types';
+
+const TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (
+  {
+    className,
+    label,
+    leftElement,
+    rightElement,
+    disabled,
+    hintText,
+    hintTextColor,
+    errorMessage,
+    width,
+    ...props
+  },
+  ref
+) => {
+  const inputId = useId();
+  const labelId = useId();
+  const [isVisiblePassword, setIsVisiblePassword] = useState(false);
+  const isForceVisibleInput =
+    props.type === 'password' &&
+    props.hasTogglePasswordVisibilityButton &&
+    isVisiblePassword;
+
+  return (
+    <InputWrapper $width={width}>
+      {label && (
+        <InputLabel id={labelId} htmlFor={inputId}>
+          {label}
+          {props.required && <mark>*</mark>}
+        </InputLabel>
+      )}
+      <InputContainer
+        disabled={disabled}
+        hasError={!!errorMessage}
+        className={className}
+      >
+        {leftElement && <InputDecorator>{leftElement}</InputDecorator>}
+        <InputInner
+          disabled={disabled}
+          id={inputId}
+          aria-labelledby={label ? labelId : undefined}
+          {...props}
+          type={isForceVisibleInput ? 'text' : props.type || 'text'}
+          ref={ref}
+        />
+        {hintText && (
+          <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>
+        )}
+        {props.type === 'password' &&
+          props.hasTogglePasswordVisibilityButton && (
+            <TogglePasswordVisibilityButton
+              value={isVisiblePassword}
+              onChange={setIsVisiblePassword}
+            />
+          )}
+        {rightElement && <InputDecorator>{rightElement}</InputDecorator>}
+      </InputContainer>
+      {errorMessage && <InputError>{errorMessage}</InputError>}
+    </InputWrapper>
+  );
+};
+
+const TogglePasswordVisibilityButton = ({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) => (
+  <InputTogglePasswordVisibilityButton
+    type="button"
+    role="switch"
+    aria-checked={value ? 'true' : 'false'}
+    aria-label="비밀번호 표시"
+    onClick={() => {
+      onChange(!value);
+    }}
+  >
+    {value ? <IconHidden size="small" /> : <IconVisible size="small" />}
+  </InputTogglePasswordVisibilityButton>
+);
+
+export default forwardRef(TextInput);

package/src/Inputs/TextInput/styles.ts

@@ -0,0 +1,122 @@
+'use client';
+
+import styled, { css } from 'styled-components';
+
+import {
+  bg200,
+  contents000,
+  contents200,
+  contents300,
+  roleRed,
+} from '@remember-web/mixin';
+import { ellipsis, getTypographyStyles } from '@remember-web/mixin';
+import { formatUnit } from '@remember-web/shared/utils/style';
+import { ColorVariable } from '@remember-web/mixin';
+
+export const InputWrapper = styled.div<{ $width?: string | number }>`
+  ${({ $width }) =>
+    $width &&
+    css`
+      width: ${formatUnit($width)};
+    `};
+`;
+
+export const InputContainer = styled.div<{
+  disabled?: boolean;
+  hasError?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  border: 1px solid ${contents300};
+  border-radius: 4px;
+  padding: 0 12px;
+  gap: 8px;
+
+  transition: border-color 0.2s, background-color 0.2s;
+
+  ${({ hasError, disabled }) => [
+    hasError
+      ? css`
+          border-color: ${roleRed};
+        `
+      : css`
+          &:focus-within {
+            border-color: ${contents000};
+          }
+        `,
+    disabled &&
+      css`
+        background-color: ${bg200};
+      `,
+  ]}
+`;
+
+export const InputDecorator = styled.div`
+  flex-shrink: 0;
+  /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */
+  > * {
+    display: block;
+  }
+`;
+
+export const InputInner = styled.input`
+  ${getTypographyStyles('Body1_M')}
+  color: ${contents000};
+
+  display: block;
+  flex-grow: 1;
+  width: 100%;
+  padding: 10px 0;
+  border: 0;
+  background-color: transparent;
+
+  &:placeholder-shown {
+    ${ellipsis()}
+  }
+
+  &::placeholder {
+    color: ${contents200};
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const InputLabel = styled.label`
+  ${getTypographyStyles('Headline4_B')}
+  display: block;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  & > mark {
+    all: unset;
+    color: ${roleRed};
+  }
+`;
+
+export const InputError = styled.div`
+  ${getTypographyStyles('Body2_M')}
+  color: ${roleRed};
+
+  margin-top: 8px;
+`;
+
+export const InputHintText = styled.span<{ textColor?: ColorVariable }>`
+  ${getTypographyStyles('Body1_M')}
+  color: ${({ textColor }) => textColor};
+  white-space: nowrap;
+`;
+
+export const InputTogglePasswordVisibilityButton = styled.button`
+  all: unset;
+  appearance: none;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  & > svg {
+    display: block;
+  }
+`;

package/src/Inputs/TextInput/types.ts

@@ -0,0 +1,33 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+import type { ColorVariable } from '@remember-web/mixin';
+
+type BaseInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  `aria-${string}`
+>;
+
+type TextInputProps = {
+  type?:
+    | 'text'
+    | 'number'
+    | 'email'
+    | 'search'
+    | 'tel'
+    | 'url'
+    | 'date'
+    | 'datetime-local';
+  label?: ReactNode;
+  hintText?: string;
+  hintTextColor?: ColorVariable;
+  leftElement?: ReactNode;
+  rightElement?: ReactNode;
+  errorMessage?: string;
+};
+
+type PasswordInputProps = Omit<TextInputProps, 'type'> & {
+  type: 'password';
+  hasTogglePasswordVisibilityButton: boolean;
+};
+
+export type InputProps = BaseInputProps & (TextInputProps | PasswordInputProps);

package/src/Inputs/index.ts

@@ -0,0 +1,2 @@
+export { default as TextInput } from './TextInput';
+export { default as Select } from './Select';

package/src/Logos/EnvLabel/index.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+export type EnvType =
+  | 'production'
+  | 'final'
+  | 'alpha'
+  | 'bravo'
+  | 'test'
+  | 'development';
+
+export const getEnvLabel = (env?: EnvType): JSX.Element | undefined => {
+  switch (env) {
+    case 'bravo':
+    case 'development':
+      return (
+        <path
+          d="M129.26 7.86C129.947 7.86 130.5 7.93 130.92 8.07C131.34 8.20333 131.647 8.40333 131.84 8.67C132.033 8.93 132.13 9.25333 132.13 9.64C132.13 9.95333 132.073 10.22 131.96 10.44C131.847 10.6533 131.703 10.8233 131.53 10.95C131.363 11.0767 131.19 11.1633 131.01 11.21V11.26C131.203 11.3067 131.397 11.3867 131.59 11.5C131.783 11.6133 131.943 11.7833 132.07 12.01C132.203 12.23 132.27 12.53 132.27 12.91C132.27 13.3433 132.16 13.7167 131.94 14.03C131.72 14.3433 131.407 14.5833 131 14.75C130.593 14.9167 130.11 15 129.55 15H126.77V7.86H129.26ZM129.28 10.6C129.6 10.6 129.823 10.5333 129.95 10.4C130.083 10.2667 130.15 10.1067 130.15 9.92C130.15 9.72667 130.077 9.58 129.93 9.48C129.783 9.37333 129.553 9.32 129.24 9.32H128.7V10.6H129.28ZM128.7 12.01V13.51H129.38C129.713 13.51 129.947 13.44 130.08 13.3C130.213 13.1533 130.28 12.97 130.28 12.75C130.28 12.6233 130.25 12.5033 130.19 12.39C130.137 12.2767 130.04 12.1867 129.9 12.12C129.767 12.0467 129.58 12.01 129.34 12.01H128.7ZM135.848 7.86C136.495 7.86 137.032 7.94 137.458 8.1C137.892 8.26 138.215 8.49667 138.428 8.81C138.648 9.11667 138.758 9.50333 138.758 9.97C138.758 10.2567 138.708 10.52 138.608 10.76C138.515 11 138.378 11.2133 138.198 11.4C138.018 11.5867 137.802 11.75 137.548 11.89L139.628 15H137.438L135.928 12.4H135.438V15H133.508V7.86H135.848ZM135.818 9.32H135.438V10.95H135.798C135.998 10.95 136.172 10.9233 136.318 10.87C136.472 10.81 136.592 10.7167 136.678 10.59C136.765 10.4567 136.808 10.28 136.808 10.06C136.808 9.90667 136.775 9.77667 136.708 9.67C136.642 9.55667 136.535 9.47 136.388 9.41C136.242 9.35 136.052 9.32 135.818 9.32ZM144.656 15L144.306 13.66H141.986L141.626 15H139.506L141.836 7.83H144.406L146.766 15H144.656ZM143.596 10.91C143.563 10.7833 143.516 10.6033 143.456 10.37C143.396 10.13 143.336 9.88333 143.276 9.63C143.216 9.37667 143.169 9.17 143.136 9.01C143.109 9.17 143.066 9.37 143.006 9.61C142.953 9.85 142.896 10.0867 142.836 10.32C142.783 10.5533 142.736 10.75 142.696 10.91L142.386 12.08H143.906L143.596 10.91ZM153.301 7.86L150.961 15H148.691L146.361 7.86H148.531L149.501 11.48C149.535 11.6133 149.575 11.7867 149.621 12C149.668 12.2133 149.711 12.4267 149.751 12.64C149.798 12.8533 149.825 13.0267 149.831 13.16C149.845 13.0267 149.868 12.8567 149.901 12.65C149.941 12.4367 149.981 12.2267 150.021 12.02C150.068 11.8067 150.111 11.6333 150.151 11.5L151.141 7.86H153.301ZM160.657 11.42C160.657 11.9733 160.59 12.4767 160.457 12.93C160.324 13.3767 160.117 13.7633 159.837 14.09C159.557 14.4167 159.197 14.6667 158.757 14.84C158.324 15.0133 157.8 15.1 157.187 15.1C156.587 15.1 156.067 15.0133 155.627 14.84C155.194 14.6667 154.834 14.4167 154.547 14.09C154.267 13.7633 154.057 13.3767 153.917 12.93C153.784 12.4767 153.717 11.97 153.717 11.41C153.717 10.67 153.84 10.0267 154.087 9.48C154.334 8.92667 154.714 8.5 155.227 8.2C155.74 7.9 156.397 7.75 157.197 7.75C158.01 7.75 158.67 7.90333 159.177 8.21C159.69 8.51 160.064 8.93667 160.297 9.49C160.537 10.0367 160.657 10.68 160.657 11.42ZM155.747 11.42C155.747 11.8467 155.794 12.2167 155.887 12.53C155.987 12.8367 156.144 13.0733 156.357 13.24C156.57 13.4067 156.847 13.49 157.187 13.49C157.54 13.49 157.82 13.4067 158.027 13.24C158.24 13.0733 158.394 12.8367 158.487 12.53C158.58 12.2167 158.627 11.8467 158.627 11.42C158.627 10.7733 158.52 10.2633 158.307 9.89C158.094 9.51667 157.724 9.33 157.197 9.33C156.85 9.33 156.57 9.41667 156.357 9.59C156.144 9.75667 155.987 9.99667 155.887 10.31C155.794 10.6167 155.747 10.9867 155.747 11.42Z"
+          fill="#00B3EA"
+        />
+      );
+    case 'test':
+      return (
+        <path
+          d="M129.92 15H127.99V9.44H126.25V7.86H131.66V9.44H129.92V15ZM136.918 15H132.678V7.86H136.918V9.41H134.608V10.53H136.748V12.08H134.608V13.43H136.918V15ZM142.836 12.83C142.836 13.2167 142.736 13.5833 142.536 13.93C142.343 14.2767 142.04 14.56 141.626 14.78C141.22 14.9933 140.69 15.1 140.036 15.1C139.71 15.1 139.423 15.0833 139.176 15.05C138.936 15.0233 138.71 14.9767 138.496 14.91C138.283 14.8433 138.063 14.7567 137.836 14.65V12.93C138.223 13.1233 138.613 13.2733 139.006 13.38C139.4 13.48 139.756 13.53 140.076 13.53C140.27 13.53 140.426 13.5067 140.546 13.46C140.666 13.4133 140.756 13.35 140.816 13.27C140.876 13.19 140.906 13.1 140.906 13C140.906 12.8733 140.863 12.7667 140.776 12.68C140.69 12.5933 140.553 12.5033 140.366 12.41C140.18 12.3167 139.93 12.2 139.616 12.06C139.35 11.94 139.11 11.8133 138.896 11.68C138.683 11.5467 138.5 11.3967 138.346 11.23C138.2 11.0633 138.086 10.87 138.006 10.65C137.926 10.4233 137.886 10.1567 137.886 9.85C137.886 9.39 138 9.00667 138.226 8.7C138.453 8.38667 138.766 8.15333 139.166 8C139.573 7.84 140.043 7.76 140.576 7.76C141.043 7.76 141.463 7.81333 141.836 7.92C142.21 8.02 142.543 8.13667 142.836 8.27L142.246 9.76C141.94 9.62 141.636 9.51 141.336 9.43C141.043 9.34333 140.77 9.3 140.516 9.3C140.35 9.3 140.213 9.32 140.106 9.36C140 9.4 139.92 9.45667 139.866 9.53C139.82 9.59667 139.796 9.67333 139.796 9.76C139.796 9.87333 139.84 9.97333 139.926 10.06C140.013 10.1467 140.156 10.2433 140.356 10.35C140.563 10.45 140.843 10.58 141.196 10.74C141.543 10.8933 141.836 11.0633 142.076 11.25C142.323 11.43 142.51 11.6467 142.636 11.9C142.77 12.1467 142.836 12.4567 142.836 12.83ZM147.088 15H145.158V9.44H143.418V7.86H148.828V9.44H147.088V15Z"
+          fill="#00B3EA"
+        />
+      );
+    case 'alpha':
+      return (
+        <path
+          d="M131.15 15L130.8 13.66H128.48L128.12 15H126L128.33 7.83H130.9L133.26 15H131.15ZM130.09 10.91C130.057 10.7833 130.01 10.6033 129.95 10.37C129.89 10.13 129.83 9.88333 129.77 9.63C129.71 9.37667 129.663 9.17 129.63 9.01C129.603 9.17 129.56 9.37 129.5 9.61C129.447 9.85 129.39 10.0867 129.33 10.32C129.277 10.5533 129.23 10.75 129.19 10.91L128.88 12.08H130.4L130.09 10.91ZM134.026 15V7.86H135.956V13.44H138.706V15H134.026ZM142.316 7.86C143.223 7.86 143.9 8.05667 144.346 8.45C144.8 8.84333 145.026 9.40333 145.026 10.13C145.026 10.4567 144.98 10.77 144.886 11.07C144.793 11.3633 144.64 11.63 144.426 11.87C144.22 12.1033 143.943 12.29 143.596 12.43C143.25 12.5633 142.823 12.63 142.316 12.63H141.776V15H139.846V7.86H142.316ZM142.276 9.42H141.776V11.06H142.156C142.323 11.06 142.476 11.0333 142.616 10.98C142.763 10.92 142.88 10.8267 142.966 10.7C143.053 10.5667 143.096 10.3933 143.096 10.18C143.096 9.95333 143.03 9.77 142.896 9.63C142.763 9.49 142.556 9.42 142.276 9.42ZM152.285 15H150.345V12.09H148.105V15H146.165V7.86H148.105V10.51H150.345V7.86H152.285V15ZM158.201 15L157.851 13.66H155.531L155.171 15H153.051L155.381 7.83H157.951L160.311 15H158.201ZM157.141 10.91C157.107 10.7833 157.061 10.6033 157.001 10.37C156.941 10.13 156.881 9.88333 156.821 9.63C156.761 9.37667 156.714 9.17 156.681 9.01C156.654 9.17 156.611 9.37 156.551 9.61C156.497 9.85 156.441 10.0867 156.381 10.32C156.327 10.5533 156.281 10.75 156.241 10.91L155.931 12.08H157.451L157.141 10.91Z"
+          fill="#FF5414"
+        />
+      );
+    default:
+  }
+};

package/src/Logos/RememberLogo/RememberLogo.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RememberLogo } from './index';
+
+type Story = StoryObj<typeof RememberLogo>;
+
+const meta = {
+  title: 'Logos/RememberLogo',
+  component: RememberLogo,
+  args: {
+    color: 'black',
+    height: 20,
+  },
+} satisfies Meta<typeof RememberLogo>;
+
+export const Default: Story = {
+  render: (args) => <RememberLogo {...args} />,
+};
+
+export default meta;