@charcoal-ui/react 4.0.0-beta.8 → 4.0.0-rc.1

package/src/components/TextField/index.tsx

@@ -26,7 +26,7 @@ export type TextFieldProps = {
   requiredText?: string
   disabled?: boolean
   subLabel?: React.ReactNode
-  rdfaPredix?: string
+  rdfaPrefix?: string
 
   getCount?: (value: string) => number
 } & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>
@@ -89,7 +89,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     const showAssistiveText =
       assistiveText != null && assistiveText.length !== 0
 
-    const classNames = useClassNames('charcoal-text-field-root')
+    const classNames = useClassNames('charcoal-text-field-root', className)
 
     return (
       <div className={classNames} aria-disabled={disabled}>

package/src/core/CharcoalProvider.tsx

@@ -1,39 +1,15 @@
 import * as React from 'react'
-import { ThemeProvider } from 'styled-components'
-import ComponentAbstraction, { Components } from './ComponentAbstraction'
-import { TokenInjector } from '@charcoal-ui/styled'
-import type { ThemeMap } from '@charcoal-ui/styled/src/TokenInjector'
-import { CharcoalTheme, ThemeColor } from '@charcoal-ui/theme'
-
 import { OverlayProvider } from './OverlayProvider'
 import { SSRProvider } from './SSRProvider'
 
-export type CharcoalProviderProps = React.PropsWithChildren<{
-  themeMap: ThemeMap<CharcoalTheme>
-  defaultTheme?: CharcoalTheme
-  injectTokens?: boolean
-  components?: Partial<Components>
-  background?: keyof ThemeColor
-}>
+export type CharcoalProviderProps = {
+  children: React.ReactNode
+}
 
-export function CharcoalProvider({
-  themeMap,
-  defaultTheme = themeMap[':root'],
-  components = {},
-  injectTokens = true,
-  children,
-  background,
-}: CharcoalProviderProps) {
+export function CharcoalProvider({ children }: CharcoalProviderProps) {
   return (
     <SSRProvider>
-      <ThemeProvider theme={defaultTheme}>
-        {injectTokens && (
-          <TokenInjector theme={themeMap} background={background} />
-        )}
-        <ComponentAbstraction components={components}>
-          <OverlayProvider>{children}</OverlayProvider>
-        </ComponentAbstraction>
-      </ThemeProvider>
+      <OverlayProvider>{children}</OverlayProvider>
     </SSRProvider>
   )
 }

package/src/index.ts

@@ -1,8 +1,3 @@
-export {
-  default as ComponentAbstraction,
-  useComponentAbstraction,
-  type LinkProps,
-} from './core/ComponentAbstraction'
 export { SSRProvider } from './core/SSRProvider'
 export { OverlayProvider } from './core/OverlayProvider'
 export {

package/src/type.d.ts

@@ -1,18 +1,7 @@
-import { CSSProp, DefaultTheme } from 'styled-components'
-import { CharcoalTheme as Theme } from '@charcoal-ui/theme'
-
-declare module 'styled-components' {
-  export interface DefaultTheme extends Theme {}
-}
+import 'react'
 
 declare module 'react' {
   interface CSSProperties {
-    [key: `--${string}`]: string | undefined
-  }
-  interface Attributes {
-    css?: CSSProp<DefaultTheme>
-  }
-  interface CSSProperties {
-    [key: `--${string}`]: string | undefined
+    [key: `--${string}`]: string | number
   }
 }

package/dist/components/Modal/__stories__/InternalScrollStory.d.ts

@@ -1,4 +0,0 @@
-import { Story } from '../../../_lib/compat';
-import { ModalProps } from '..';
-export declare const InternalScrollStory: Story<ModalProps>;
-//# sourceMappingURL=InternalScrollStory.d.ts.map

package/dist/components/Modal/__stories__/InternalScrollStory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InternalScrollStory.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/__stories__/InternalScrollStory.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC5C,OAAc,EAAe,UAAU,EAAE,MAAM,IAAI,CAAA;AAQnD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,UAAU,CA0BjD,CAAA"}

package/dist/core/ComponentAbstraction.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-export type LinkProps = {
-    /**
-     * リンクのURL
-     */
-    to: string;
-} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
-export declare const DefaultLink: React.ForwardRefExoticComponent<{
-    /**
-     * リンクのURL
-     */
-    to: string;
-} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
-export interface Components {
-    Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>;
-}
-interface Props {
-    children: React.ReactNode;
-    components: Partial<Components>;
-}
-export default function ComponentAbstraction({ children, components }: Props): JSX.Element;
-export declare function useComponentAbstraction(): Components;
-export {};
-//# sourceMappingURL=ComponentAbstraction.d.ts.map

package/dist/core/ComponentAbstraction.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentAbstraction.d.ts","sourceRoot":"","sources":["../../src/core/ComponentAbstraction.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;CACX,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAA;AAErD,eAAO,MAAM,WAAW;IANtB;;OAEG;QACC,MAAM;gOAWX,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAC3E;AAQD,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,eAQ3E;AAED,wBAAgB,uBAAuB,eAEtC"}

package/dist/styled.d.ts

@@ -1,95 +0,0 @@
-export declare const theme: (specFn: (o: Record<string, unknown> & Readonly<{
-    bg: Record<string, unknown> & {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface7: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface8: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface9: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface10: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text5: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly icon6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly brand: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly warning: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly success: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly updatedItem: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-    } & {
-        readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-    };
-    font: {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly border: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly transparent: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly background2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface7: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface8: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface9: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly surface10: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly link2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text1: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text2: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text3: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text4: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly text5: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly icon6: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly brand: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly warning: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly success: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-        readonly updatedItem: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-    };
-}> & {
-    readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bold" | "monospace" | "preserveHalfLeading">;
-} & {
-    readonly margin: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled/dist/factories/lib").MethodChain<import("@charcoal-ui/styled/dist/internals").Internal, "horizontal" | "vertical" | "all" | "bottom" | "left" | "right" | "top", [0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440]>;
-} & {
-    readonly height: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
-        column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
-        auto: import("@charcoal-ui/styled/dist/internals").Internal;
-        full: import("@charcoal-ui/styled/dist/internals").Internal;
-    }>;
-    readonly width: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 40 | 24 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled/dist/internals").Internal;
-        column: (span: number) => import("@charcoal-ui/styled/dist/internals").Internal;
-        auto: import("@charcoal-ui/styled/dist/internals").Internal;
-        full: import("@charcoal-ui/styled/dist/internals").Internal;
-    }>;
-} & import("@charcoal-ui/styled/dist/internals").Internal & {
-    readonly hover: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "press" | "disabled">;
-    readonly press: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "disabled">;
-    readonly disabled: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "hover" | "press">;
-} & Readonly<{
-    border: {
-        readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "bottom" | "left" | "right" | "top">;
-    };
-}> & Readonly<{
-    borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled/dist/internals").Internal;
-}> & Readonly<{
-    outline: {
-        readonly assertive: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
-        readonly default: import("@charcoal-ui/styled/dist/factories/lib").PropertyChain<import("@charcoal-ui/styled/dist/internals").Internal, "focus">;
-    };
-}>) => import("@charcoal-ui/styled/dist/util").ArrayOrSingle<import("@charcoal-ui/styled/dist/internals").Internal | (false | null | undefined)>) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
-//# sourceMappingURL=styled.d.ts.map

package/dist/styled.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAAsB,CAAA"}

package/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Button /> componentAs props are passed to the data-as attribute 1`] = `
-<a
-  className="charcoal-button"
-  data-as="componentAs"
-  data-full-width={true}
-  href="/"
-  target="_blank"
-/>
-`;

package/src/components/Button/index.test.tsx

@@ -1,32 +0,0 @@
-import 'jest-styled-components'
-
-import renderer from 'react-test-renderer'
-import Button from '.'
-
-function Link({
-  as,
-  children,
-  ...props
-}: { as: string; children: React.ReactNode } & React.ComponentProps<'a'>) {
-  return (
-    <a {...props} data-as={as}>
-      {children}
-    </a>
-  )
-}
-
-describe('<Button />', () => {
-  test('componentAs props are passed to the data-as attribute', () => {
-    expect(
-      renderer.create(
-        <Button
-          href="/"
-          target="_blank"
-          fullWidth
-          as={Link}
-          componentAs="componentAs"
-        />
-      )
-    ).toMatchSnapshot()
-  })
-})

package/src/components/Modal/__stories__/InternalScrollStory.tsx

@@ -1,75 +0,0 @@
-import { Story } from '../../../_lib/compat'
-import Modal, { BottomSheet, ModalProps } from '..'
-import { OverlayProvider } from '@react-aria/overlays'
-import { useOverlayTriggerState } from 'react-stately'
-import Button from '../../Button'
-import { ModalBody, ModalButtons, ModalHeader } from '../ModalPlumbing'
-import styled, { css } from 'styled-components'
-import { maxWidth } from '@charcoal-ui/utils'
-
-export const InternalScrollStory: Story<ModalProps> = (args: ModalProps) => {
-  const state = useOverlayTriggerState({})
-  return (
-    <OverlayProvider>
-      <Button onClick={() => state.open()}>Open Modal</Button>
-
-      <Modal {...args} isOpen={state.isOpen} onClose={() => state.close()}>
-        <ModalHeader />
-        <ModalBody>
-          <ModalBodyOverflowDiv $offset={56} $bottomSheet={args.bottomSheet}>
-            <div
-              style={{
-                height: 1000,
-                background: `linear-gradient(#e66465, #9198e5)`,
-              }}
-            ></div>
-          </ModalBodyOverflowDiv>
-          <TopBorderButtons>
-            <Button fullWidth onClick={() => state.close()}>
-              Close
-            </Button>
-          </TopBorderButtons>
-        </ModalBody>
-      </Modal>
-    </OverlayProvider>
-  )
-}
-
-// underlay padding-top: 40px (desktop)
-// underlay padding-bottom: 40px (desktop)
-// modal header: 64px (desktop)
-// modal header: 48px (mobile-bottom-sheet)
-// modal padding-bottom: 40px
-// button and space: 56px
-const MAX_HEIGHT_OFFSET = 64 + 40 + 40 + 40
-const MAX_HEIGHT_OFFSET_MOBILE = MAX_HEIGHT_OFFSET - 40 * 2 - 16
-const ModalBodyOverflowDiv = styled.div<{
-  $offset: number
-  $bottomSheet?: BottomSheet
-}>`
-  overflow: auto;
-  max-height: calc(
-    100vh - ${MAX_HEIGHT_OFFSET}px - ${({ $offset }) => $offset}px
-  );
-  ${({ $bottomSheet, $offset }) =>
-    ($bottomSheet === true || $bottomSheet === 'full') &&
-    css`
-      @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-        max-height: calc(100vh - ${MAX_HEIGHT_OFFSET_MOBILE}px - ${$offset}px);
-      }
-    `}
-`
-
-const TopBorderButtons = styled(ModalButtons)`
-  position: relative;
-  &::before {
-    content: '';
-    pointer-events: none;
-    border-top: 1px solid ${({ theme }) => theme.border.default.color};
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-`

package/src/components/a11y.test.tsx

@@ -1,99 +0,0 @@
-import path from 'path'
-import * as glob from 'glob'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { render } from '@testing-library/react'
-import { ThemeProvider } from 'styled-components'
-import { Story } from '../_lib/compat'
-import ComponentAbstraction, { DefaultLink } from '../core/ComponentAbstraction'
-import { light, dark } from '@charcoal-ui/theme'
-
-expect.extend(toHaveNoViolations)
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-interface StoryWithMetadata<ArgsType = any> {
-  filename: string
-  name: string
-  story: Story<ArgsType>
-  args: ArgsType
-}
-
-const stories: StoryWithMetadata[] = glob
-  .sync(path.resolve(__dirname, '**/*.story.tsx'))
-  .flatMap((filePath) => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const exports = require(`./${path.relative(
-      __dirname,
-      filePath
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    )}`) as Record<string, any>
-
-    return Object.entries(exports)
-      .filter(
-        ([exportName, exportValue]) =>
-          exportName !== 'default' && typeof exportValue === 'function'
-      )
-      .map(([exportName, exportValue]) => ({
-        filename: path.relative(__dirname, filePath),
-        name: exportName,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        story: exportValue as Story<any>,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-        args: { ...exports.default.args, ...exportValue.args },
-      }))
-  })
-
-const themes = Object.entries({
-  light,
-  dark,
-})
-
-const links = Object.entries({
-  DefaultLink,
-})
-
-const div = document.body.appendChild(document.createElement('div'))
-
-beforeEach(() => {
-  global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-    observe() {
-      return null
-    },
-    disconnect() {
-      return null
-    },
-  }))
-
-  global.matchMedia = jest.fn().mockImplementation(() => ({
-    matches: true,
-    media: '(max-width: 600px)',
-    addEventListener() {
-      // Do Nothing
-    },
-    removeEventListener() {
-      // Do Nothing
-    },
-  }))
-})
-
-describe.each(themes)('using %s theme', (_name, theme) => {
-  describe.each(links)('using %s component', (_name, link) => {
-    describe.each(stories)(
-      'storiesOf($filename).add($name)',
-      ({ story: Story, args }) => {
-        it('has no accessibility violations', async () => {
-          expect(() => {
-            render(
-              <ThemeProvider theme={theme}>
-                <ComponentAbstraction components={{ Link: link }}>
-                  <Story {...args} />
-                </ComponentAbstraction>
-              </ThemeProvider>
-            )
-          }).not.toThrow()
-
-          expect(await axe(div)).toHaveNoViolations()
-        })
-      }
-    )
-  })
-})

package/src/core/ComponentAbstraction.tsx

@@ -1,48 +0,0 @@
-import { useContext } from 'react'
-import * as React from 'react'
-
-export type LinkProps = {
-  /**
-   * リンクのURL
-   */
-  to: string
-} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>
-
-export const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  function DefaultLink({ to, children, ...rest }, ref) {
-    return (
-      <a href={to} ref={ref} {...rest}>
-        {children}
-      </a>
-    )
-  }
-)
-
-export interface Components {
-  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>
-}
-
-const DefaultValue: Components = {
-  Link: DefaultLink,
-}
-
-const ComponentAbstractionContext = React.createContext(DefaultValue)
-
-interface Props {
-  children: React.ReactNode
-  components: Partial<Components>
-}
-
-export default function ComponentAbstraction({ children, components }: Props) {
-  return (
-    <ComponentAbstractionContext.Provider
-      value={{ ...DefaultValue, ...components }}
-    >
-      {children}
-    </ComponentAbstractionContext.Provider>
-  )
-}
-
-export function useComponentAbstraction() {
-  return useContext(ComponentAbstractionContext)
-}

package/src/styled.ts

@@ -1,3 +0,0 @@
-import styled from 'styled-components'
-import { createTheme } from '@charcoal-ui/styled'
-export const theme = createTheme(styled)