tzynwang

import { useCallback, useEffect, useState } from 'react';
import type { StyleKeys } from '@Models/style/types';

type PrefersColorScheme = `(prefers-color-scheme: ${StyleKeys})`;

const SCHEME_QUERY: PrefersColorScheme = '(prefers-color-scheme: light)';

export default function useSystemColorScheme(): StyleKeys {
  /* States */
  const [scheme, setScheme] = useState<StyleKeys>(

tzynwang

import React, { memo, useState, useEffect } from 'react';
import cn from 'classnames';
import Style, { StyleContext } from '@Models/style';
import type { StyleProviderProps, StyleKeys } from './types';

function StyleProvider(props: StyleProviderProps): React.ReactElement {
  /* States */
  const { children } = props;
  const [styleName, setStyleName] = useState<StyleKeys>('light');
  const [dynamicStyle, setDynamicStyle] = useState<string>(

tzynwang

import React, { memo, useMemo } from 'react';
import { css } from '@emotion/css';
import cn from 'classnames';
import type { BadgeProps } from './types';

const badgeWrapperStyle = css({
  display: 'inline-flex',
  position: 'relative',
});
const baseStyle = css({

tzynwang

import React, { memo, useCallback, useMemo, useState } from 'react';
import { css } from '@emotion/css';
import cn from 'classnames';
import { PersonIcon } from '@Assets/icons';
import ImageBase from '@Components/Base/ImageBase';
import type { AvatarProps } from './types';

const figureStyle = css({
  border: '4px solid #f9f4ef',
  backgroundColor: '#f9f4ef',

tzynwang

import React, { memo, useId, useMemo } from 'react';
import { css } from '@emotion/css';
import cn from 'classnames';
import { CheckboxIcon, CheckboxOutlineIcon } from '@Assets/icons';
import type { InputCheckboxProps } from './types';

const inputStyle = css({
  all: 'unset',
  border: 'none',
});

tzynwang

import React, { memo, useMemo } from 'react';
import { css } from '@emotion/css';
import cn from 'classnames';
import ButtonBase from '@Components/Base/ButtonBase2';
import type { ButtonProps } from './types';

const ButtonForward = React.forwardRef<
  HTMLButtonElement | HTMLLabelElement,
  ButtonProps
>(function ButtonContained(props, ref): React.ReactElement {

tzynwang

import React, {
  memo,
  useEffect,
  useRef,
  useState,
  useCallback,
  useMemo,
} from 'react';
import { css, keyframes } from '@emotion/css';
import cn from 'classnames';

tzynwang

import React, { memo, useMemo } from 'react';
import cn from 'classnames';
import { css, keyframes } from '@emotion/css';
import Portal from '@Components/Layer/Portal';
import useDelayUnmount from '@Hooks/useDelayUnmount';
import type { TransitionEffectProps } from './types';

const fadeIn = keyframes`
from {
  opacity: 0;

tzynwang

import React, { memo, useState } from 'react';
import Stack from '@Components/Layout/Stack';
import Accordion from '@Components/Common/Accordion';
import AccordionTitle from '@Components/Common/Accordion/AccordionTitle';
import AccordionBody from '@Components/Common/Accordion/AccordionBody';

function AccordionsDemo(): React.ReactElement {
  /* States */
  const [currentOpen, setCurrentOpen] = useState<number>(0);

tzynwang

import React, { memo, useState, useCallback, useEffect, useMemo } from 'react';
import { css } from '@emotion/css';
import cn from 'classnames';
import type { AccordionProps } from './types';

const defaultWrapperStyle = css({ width: '100%', border: '1px solid #333' });
const defaultBodyStyle = css({
  padding: '24px',
  borderTop: '1px solid #333',
  backgroundColor: '#fffffe',