@anker-in/headless-ui 0.0.27-alpha.0 → 0.0.27-alpha.2

package/src/stories/badge.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Badge } from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Components/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-
-  },
-  args: {
-
-  },
-} satisfies Meta<typeof Badge>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    children: 'Badge',
-  }
-}
-
-export const Examples: Story = {
-  render() {
-    return (
-      <div className="flex flex-col space-y-4">
-        <Badge>Outline</Badge>
-        <Badge>Fill</Badge>
-      </div>
-    )
-  },
-}

package/src/stories/brandEquity.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import BrandEquity from '../biz-components/BrandEquity/BrandEquity.js';
-
-const ShieldCheckIcon = (props: { className?: string }) => <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4653 6.25C11.9801 4.79351 13.3691 3.75 15.0019 3.75C16.6347 3.75 18.0237 4.79351 18.5385 6.25H11.4653ZM8.75192 8.75V13.75C8.75192 14.4404 9.31156 15 10.0019 15C10.6923 15 11.2519 14.4404 11.2519 13.75V8.75H18.7519V13.75C18.7519 14.4404 19.3116 15 20.0019 15C20.6923 15 21.2519 14.4404 21.2519 13.75V8.75H23.8452C24.5037 8.75 25.0493 9.26086 25.0925 9.91794L26.0793 24.9179C26.1268 25.639 25.5547 26.25 24.832 26.25H5.1718C4.44915 26.25 3.87705 25.639 3.92449 24.9179L4.91133 9.91794C4.95456 9.26086 5.50014 8.75 6.15864 8.75H8.75192ZM8.87694 6.25C9.45603 3.3972 11.9782 1.25 15.0019 1.25C18.0256 1.25 20.5478 3.3972 21.1269 6.25H23.8452C25.8207 6.25 27.4574 7.78258 27.5871 9.75382L28.5739 24.7538C28.7163 26.9171 27 28.75 24.832 28.75H5.1718C3.00385 28.75 1.28756 26.9171 1.42989 24.7538L2.41673 9.75382C2.54641 7.78259 4.18314 6.25 6.15864 6.25H8.87694ZM12.5019 16.25C12.5019 15.5596 13.0616 15 13.7519 15H16.2519C16.9423 15 17.5019 15.5596 17.5019 16.25C17.5019 16.9404 16.9423 17.5 16.2519 17.5H13.7519C13.0616 17.5 12.5019 16.9404 12.5019 16.25Z" fill="#1D1D1F" />
-</svg>
-
-const meta = {
-  title: 'Biz-Components/BrandEquity',
-  component: BrandEquity,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof BrandEquity>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const mockItems = [
-  {
-    icon: <ShieldCheckIcon className="w-6 h-6" />,
-    title: 'Hassle-Free Warranty',
-    description: 'Comprehensive warranty protection on all purchases.',
-  },
-  {
-    icon: <ShieldCheckIcon className="w-6 h-6" />,
-    title: 'Our Happy Customers',
-    description: 'Join millions of satisfied Anker users worldwide.',
-  },
-  {
-    icon: <ShieldCheckIcon className="w-6 h-6" />,
-    title: 'Anker credits rewards',
-    description: 'Buy more, save more, and earn more.',
-  },
-  {
-    icon: <ShieldCheckIcon className="w-6 h-6" />,
-    title: 'Pay with Ease',
-    description: 'Pay immediately or in installments with Affirm.',
-  },
-  {
-    icon: <ShieldCheckIcon className="w-6 h-6" />,
-    title: '30-day money-back guarantee',
-    description: 'Return within 30 days for a full refund.',
-  },
-  {
-    avatarList: [
-      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/25954496272e3aad27d750494d4748ca_c591cb1a-5f47-42d9-b356-0acd9e87fed0.png?v=1744612103',
-      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ee5edd6de20a7af2f30f2fa976d779c9_6ddc29a7-c287-4afc-909c-383fe1f1a74b.png?v=1744612102',
-      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/c3269421a5343c0e59065b53bd81c8f5_ba2fc271-206e-4480-b815-9eb76b45f691.png?v=1744612102',
-      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b0b7c87fb0819b6cd109bf4b0d865006_e0f7c15a-7d1a-45e7-aee3-783e681a3864.png?v=1744612102',
-      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/85087c9c0ec8c86b481eaea247812c3e.png?v=1744612102'
-    ],
-    title: 'We are Here to Help',
-    description: 'Contact our expert team via email or live chat for assistance.',
-  },
-];
-
-export const Default: Story = {
-  args: {
-    items: mockItems,
-    className: "bg-[#eeeeee] p-4"
-  },
-};
-
-
-export const CustomBackground: Story = {
-  args: {
-    items: mockItems,
-    className: 'bg-gray-900 p-4',
-    itemShape: 'round',
-  },
-}; 

package/src/stories/button.stories.tsx

@@ -1,145 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { SearchIcon } from '@storybook/icons'
-
-import { Button } from '../components/index.js'
-import React from 'react'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  // 同时定义了页面左侧菜单
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `按钮组件, 分为多种变体和大小, 支持 loading 状态和图标`
-      }
-    }
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    theme: {
-      control: {
-        type: 'select',
-      },
-      options: ['dark', 'light'],
-      description: '主题, 默认是 light',
-    },
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['nature', 'primary', 'secondary', 'link', 'ghost'],
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'base', 'lg', 'icon'],
-    },
-    hoverEffect: {
-      description: 'hover 状态下的动画效果，仅在variant是primary 和 secondary 时生效',
-      control: {
-        type: 'select',
-      },
-      options: ['none', 'slide'],
-    },
-  },
-  args: {
-    theme: 'light',
-    variant: 'primary',
-    size: 'base',
-    children: 'Button',
-    asChild: false,
-    disabled: false,
-    loading: false,
-    hoverEffect: 'none',
-  },
-} satisfies Meta<typeof Button>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-// args 会作为 props 传递给组件
-// Story的名会作为菜单的名称 自动首字母大写并按照大写字母拆分 UseAsButton => Use As Button
-
-export const Nature: Story = {
-  args: {
-    size: 'lg',
-    variant: 'nature',
-    children: 'Default',
-  },
-}
-
-export const Primary: Story = {
-  args: {
-    size: 'lg',
-    children: 'Primary',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    size: 'lg',
-    variant: 'secondary',
-    children: 'Secondary',
-  },
-}
-
-export const Link: Story = {
-  args: {
-    size: 'lg',
-    variant: 'link',
-    children: 'Link',
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    size: 'lg',
-    children: (
-      <>
-        WithIcon <SearchIcon className="ml-2" />
-      </>
-    ),
-  },
-}
-
-export const Aschild: Story = {
-  args: {
-    size: 'lg',
-    asChild: true,
-    children: <a href="http://example.com">as a a tag</a>,
-  },
-}
-
-export const Spinner: Story = {
-  args: {
-    size: 'lg',
-    loading: true,
-    spinner: (
-      <div className="flex animate-pulse flex-row font-bold text-neutral-900">
-        <svg
-          viewBox="0 0 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          p-id="2625"
-          width="1rem"
-          className="align-middle"
-        >
-          <path
-            d="M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z"
-            fill=""
-            p-id="2626"
-          ></path>
-        </svg>
-        &nbsp;loading...
-      </div>
-    ),
-  },
-}

package/src/stories/card.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Button,
-  Picture,
-} from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Components/Card',
-  component: Card,
-  subcomponents: {
-    CardHeader,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardTitle,
-  },
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          '卡片组件，内部可以嵌套CardHeader, CardContent, CardFooter等组件, CardHeader 内可以嵌套CardTitle, CardDescription',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Card>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render() {
-    return (
-      <Card className="">
-        <CardHeader></CardHeader>
-        <CardContent>
-          <p>Charge Easily On the Go</p>
-          <p>charge Everything Everywhere Faster All at Once</p>
-        </CardContent>
-        <CardFooter className="flex justify-between">
-          <Button>Learn More</Button>
-        </CardFooter>
-      </Card>
-    )
-  },
-}
-
-export const WithHeader: Story = {
-  render() {
-    return (
-      <Card className="">
-        <CardHeader>
-          <CardTitle>Card title</CardTitle>
-          <CardDescription>Card description</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <p>Charge Easily On the Go</p>
-          <p>charge Everything Everywhere Faster All at Once</p>
-        </CardContent>
-        <CardFooter className="flex justify-between">
-          <Button>Learn More</Button>
-        </CardFooter>
-      </Card>
-    )
-  },
-}
-
-export const WithImage: Story = {
-  render() {
-    return (
-      <Card className="w-[400px]">
-        <CardContent className="p-0">
-          <Picture
-            source="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e5e7c8b6a240bb042c57529a3299c255.png?v=1741664601"
-            alt="A random image"
-          />
-          <p className="p-2">
-            click learn more to see how we can help you charge everything everywhere faster all at once
-          </p>
-        </CardContent>
-        <CardFooter className="flex justify-between pt-[8px]">
-          <Button>Learn More</Button>
-        </CardFooter>
-      </Card>
-    )
-  },
-}

package/src/stories/carousel.stories.tsx

@@ -1,161 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  Card,
-  CardContent,
-} from '../components/index.js'
-
-import React from 'react'
-
-const meta = {
-  title: 'Components/Carousel',
-  component: Carousel,
-  subcomponents: {
-    CarouselContent,
-    CarouselItem,
-  },
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: '轮播组件, 基于轻量级组件embla-carousel-react, https://www.embla-carousel.com/get-started/react/',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    opts: {
-      description:
-        'embla-carousel-react 的配置参数, 可以配置loop: true 开启循环，align: center | start | end 对齐方式， 查看 https://www.embla-carousel.com/api/options/',
-      control: {
-        type: 'object',
-      },
-    },
-    showNavigation: {
-      description: '是否显示导航点',
-      control: {
-        type: 'boolean',
-      },
-    },
-    orientation: {
-      description: '轮播方向',
-      control: {
-        type: 'select',
-      },
-      options: ['horizontal', 'vertical'],
-    },
-    setApi: {
-      description: '设置api, 可以通过这个函数获取carousel API 实例，拿到api 实例后,可以调用api 实例的方法或者属性',
-    },
-    plugins: {
-      description:
-        'embla-carousel-react 的插件,embla-carousel 的 Autoplay, Wheel Gesture 等高级功能 通过插件支持  https://www.embla-carousel.com/plugins/',
-    },
-  },
-  args: {
-    opts: {},
-    orientation: 'horizontal',
-  },
-} satisfies Meta<typeof Carousel>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    opts: {
-      align: 'start',
-    },
-    children: (
-      <>
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="basis-1/3">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </>
-    ),
-  },
-}
-
-export const Vertical: Story = {
-  render() {
-    return (
-      <Carousel
-        opts={{
-          align: 'start',
-        }}
-        orientation="vertical"
-        className="w-full max-w-xs"
-      >
-        <CarouselContent className="-mt-1 h-[200px]">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="basis-1/2 pt-1">
-              <div className="p-1">
-                <Card>
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
-    )
-  },
-}
-
-const images = [
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388_mo_path_1.png?v=1741689169',
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388.png?v=1741689169',
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388_1_mo_never_missing.png?v=1741689169',
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388_mo_path_1.png?v=1741689169',
-  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1312320388.png?v=1741689169',
-]
-export const OverrideClassName: Story = {
-  render() {
-    return (
-      <Carousel
-        opts={{
-          loop: true,
-          align: 'center',
-        }}
-        showNavigation={true}
-        navigationPosition="outter"
-        className="w-full max-w-xl"
-      >
-        <CarouselContent className="">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="basis-1/2">
-              <div className="p-1">
-                <img src={images[index]} alt="" />
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious className="left-4" />
-        <CarouselNext className="right-4" />
-      </Carousel>
-    )
-  },
-}
-OverrideClassName.parameters = {
-  layout: 'padded',
-}

package/src/stories/category.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import Category from '../biz-components/Category'
-
-const meta = {
-  title: 'Biz-Components/Category',
-  component: Category,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Category>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const mockItems = [
-  {
-    title: 'Anker Prime 27',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-  {
-    title: 'Anker Prime',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-  {
-    title: 'Anker Prime',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-  {
-    title: 'Anker Prime',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-  {
-    title: 'Anker Prime',
-    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',
-  },
-]
-
-export const Default: Story = {
-  args: {
-    products: mockItems,
-    className: 'p-4',
-  },
-}
-
-export const Round: Story = {
-  args: {
-    products: mockItems,
-    className: 'p-4',
-    shape: 'round',
-  },
-}

package/src/stories/checkbox.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react/*'
-import { Checkbox } from '../components/index.js'
-import React from 'react'
-
-const meta = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: '复选框, 基于@radix-ui/react-checkbox https://www.radix-ui.com/primitives/docs/components/checkbox',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'base', 'lg'],
-      description: '尺寸',
-      table: {
-        defaultValue: { summary: 'base' },
-      },
-    },
-  },
-  args: {
-    size: 'base',
-  },
-} satisfies Meta<typeof Checkbox>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    size: 'base',
-  },
-}
-
-export const Sizes = () => (
-  <div className="flex flex-col gap-2">
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms" size="sm" />
-      <label
-        htmlFor="terms"
-        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms1" size="base" />
-      <label
-        htmlFor="terms1"
-        className="text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <Checkbox id="terms2" size="lg" />
-      <label
-        htmlFor="terms2"
-        className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-      >
-        Accept terms and conditions
-      </label>
-    </div>
-  </div>
-)
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: '不同的尺寸',
-    },
-  },
-}
-
-export const Disabled = () => (
-  <div className="flex items-center space-x-2">
-    <Checkbox id="terms" disabled />
-    <label
-      htmlFor="terms"
-      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-    >
-      Accept terms and conditions
-    </label>
-  </div>
-)