@charcoal-ui/react-sandbox 4.0.0-beta.2 → 4.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react-sandbox",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -20,7 +20,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.2",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.4",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addons": "^7.4.1",
@@ -44,17 +44,16 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
-    "storybook": "^7.4.1",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.2",
-    "@charcoal-ui/react": "^4.0.0-beta.2",
-    "@charcoal-ui/styled": "^4.0.0-beta.2",
-    "@charcoal-ui/theme": "^4.0.0-beta.2",
-    "@charcoal-ui/utils": "^4.0.0-beta.2",
+    "@charcoal-ui/foundation": "^4.0.0-beta.4",
+    "@charcoal-ui/react": "^4.0.0-beta.4",
+    "@charcoal-ui/styled": "^4.0.0-beta.4",
+    "@charcoal-ui/theme": "^4.0.0-beta.4",
+    "@charcoal-ui/utils": "^4.0.0-beta.4",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "warning": "^4.0.3"
@@ -76,5 +75,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react-sandbox"
   },
-  "gitHead": "21a8c3ad738b69cfc849a3a7ec75dbae71eb9e97"
+  "gitHead": "788f785fe5cc2bfbf784d10cd603eb027b430c92"
 }

package/dist/components/Carousel/index.story.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    title: string;
-    decorators: any[];
-};
-export default _default;
-export declare const _Carousel: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/Carousel/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/index.story.tsx"],"names":[],"mappings":";;;;AAmBA,wBAGC;AAED,eAAO,MAAM,SAAS,mBAyCrB,CAAA"}

package/dist/components/CarouselButton/index.story.d.ts

@@ -1,10 +0,0 @@
-import CarouselButton from '.';
-declare const _default: {
-    title: string;
-    decorators: any[];
-    component: typeof CarouselButton;
-};
-export default _default;
-export declare const _CarouselButton: () => JSX.Element;
-export declare const _ScrollHintButton: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/CarouselButton/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselButton/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,cAA+C,MAAM,GAAG,CAAA;;;;;;AAE/D,wBAIC;AAED,eAAO,MAAM,eAAe,mBAmB3B,CAAA;AAMD,eAAO,MAAM,iBAAiB,mBAO7B,CAAA"}

package/dist/components/Filter/index.story.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-};
-export default _default;
-export declare function Default(): JSX.Element;
-export declare function Button(): JSX.Element;
-export declare function Link(): JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/Filter/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Filter/index.story.tsx"],"names":[],"mappings":";;;;AAaA,wBAGC;AAID,wBAAgB,OAAO,gBAetB;AA4BD,wBAAgB,MAAM,gBAQrB;AAED,wBAAgB,IAAI,gBAQnB"}

package/dist/components/HintText/index.story.d.ts

@@ -1,12 +0,0 @@
-import { Story } from '../../_lib/compat';
-import HintText from '.';
-declare const _default: {
-    title: string;
-    component: typeof HintText;
-};
-export default _default;
-export declare const Default: Story<{
-    hintText: string;
-    context: 'page' | 'section';
-}>;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/HintText/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/HintText/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,QAAQ,MAAM,GAAG,CAAA;;;;;AAExB,wBAGC;AAMD,eAAO,MAAM,OAAO;cAJc,MAAM;aAAW,MAAM,GAAG,SAAS;EAI7B,CAAA"}

package/dist/components/Layout/index.story.d.ts

@@ -1,14 +0,0 @@
-import Layout from '.';
-declare const _default: {
-    title: string;
-    component: typeof Layout;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare function Basic(): JSX.Element;
-export declare function NoMenu(): JSX.Element;
-export declare function Wide(): JSX.Element;
-export declare function Center(): JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/Layout/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/index.story.tsx"],"names":[],"mappings":"AAKA,OAAO,MAAwD,MAAM,GAAG,CAAA;;;;;;;;AAExE,wBAMC;AAED,wBAAgB,KAAK,gBAapB;AAED,wBAAgB,MAAM,gBAYrB;AAED,wBAAgB,IAAI,gBAanB;AAED,wBAAgB,MAAM,gBAYrB"}

package/dist/components/MenuListItem/index.story.d.ts

@@ -1,18 +0,0 @@
-import MenuListItem from '.';
-declare const _default: {
-    title: string;
-    component: typeof MenuListItem;
-};
-export default _default;
-export declare const Default: () => JSX.Element;
-export declare const Simple: () => JSX.Element;
-export declare const Disabled: () => JSX.Element;
-export declare const Link: () => JSX.Element;
-export declare const HardLink: () => JSX.Element;
-export declare const InlineIcon: () => JSX.Element;
-export declare const Icon: () => JSX.Element;
-export declare const NoHoverEffect: () => JSX.Element;
-export declare const Spacer: () => JSX.Element;
-export declare const Label: () => JSX.Element;
-export declare const TextEllipsis: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/MenuListItem/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/MenuListItem/index.story.tsx"],"names":[],"mappings":"AAKA,OAAO,YAMN,MAAM,GAAG,CAAA;;;;;AAEV,wBAGC;AAED,eAAO,MAAM,OAAO,mBAiBnB,CAAA;AAED,eAAO,MAAM,MAAM,mBAMlB,CAAA;AAED,eAAO,MAAM,QAAQ,mBAMpB,CAAA;AAED,eAAO,MAAM,IAAI,mBAMhB,CAAA;AAED,eAAO,MAAM,QAAQ,mBAQpB,CAAA;AAED,eAAO,MAAM,UAAU,mBAOtB,CAAA;AAED,eAAO,MAAM,IAAI,mBAMhB,CAAA;AAED,eAAO,MAAM,aAAa,mBAQzB,CAAA;AAED,eAAO,MAAM,MAAM,mBAMlB,CAAA;AAED,eAAO,MAAM,KAAK,mBAKjB,CAAA;AAED,eAAO,MAAM,YAAY,mBAQxB,CAAA"}

package/dist/components/Pager/index.story.d.ts

@@ -1,39 +0,0 @@
-import { Story } from '../../_lib/compat';
-declare const _default: {
-    title: string;
-    component: import("react").NamedExoticComponent<import(".").PagerProps>;
-    argTypes: {
-        page: {
-            control: {
-                type: string;
-                disable: boolean;
-            };
-        };
-        pageCount: {
-            control: {
-                type: string;
-                min: number;
-            };
-        };
-        pageRangeDisplayed: {
-            control: {
-                type: string;
-                min: number;
-            };
-        };
-    };
-};
-export default _default;
-interface Props {
-    page: number;
-    pageCount: number;
-    pageRangeDisplayed?: number;
-}
-export declare const Default: Story<Props>;
-export declare const Link: Story<Props>;
-export declare const NotCollapsed: Story<Props>;
-export declare const CollapsedWithDots: Story<Props>;
-export declare const LastPage: Story<Props>;
-export declare const One: Story<Props>;
-export declare const LittlePageRangeDisplayed: Story<Props>;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/Pager/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Pager/index.story.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAIzC,wBAuBC;AAED,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAkBD,eAAO,MAAM,OAAO,cAAwB,CAAA;AA0D5C,eAAO,MAAM,IAAI,cAAqB,CAAA;AAMtC,eAAO,MAAM,YAAY,cAAqB,CAAA;AAM9C,eAAO,MAAM,iBAAiB,cAAqB,CAAA;AAMnD,eAAO,MAAM,QAAQ,cAAqB,CAAA;AAM1C,eAAO,MAAM,GAAG,cAAqB,CAAA;AAMrC,eAAO,MAAM,wBAAwB,cAAqB,CAAA"}

package/dist/components/SwitchCheckbox/index.story.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import(".").Props & import("react").RefAttributes<HTMLInputElement>>;
-};
-export default _default;
-export declare const Default: () => JSX.Element;
-export declare const On: () => JSX.Element;
-export declare const Off: () => JSX.Element;
-export declare const Disabled: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/SwitchCheckbox/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchCheckbox/index.story.tsx"],"names":[],"mappings":";;;;AAIA,wBAGC;AAED,eAAO,MAAM,OAAO,mBAiBnB,CAAA;AAED,eAAO,MAAM,EAAE,mBAAmC,CAAA;AAClD,eAAO,MAAM,GAAG,mBAA2C,CAAA;AAC3D,eAAO,MAAM,QAAQ,mBAA4C,CAAA"}

package/dist/components/TextEllipsis/index.story.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-        title: string | undefined;
-    } & import(".").Props, "title">;
-};
-export default _default;
-export declare const Default: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/TextEllipsis/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/TextEllipsis/index.story.tsx"],"names":[],"mappings":";;;;;;AAIA,wBAGC;AAED,eAAO,MAAM,OAAO,mBA0BnB,CAAA"}

package/dist/components/WithIcon/index.story.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-declare const _default: {
-    title: string;
-    component: React.NamedExoticComponent<import(".").Props>;
-};
-export default _default;
-export declare const Default: () => JSX.Element;
-export declare const Performance: () => JSX.Element;
-export declare const Naive: () => JSX.Element;
-export declare const Prefix: () => JSX.Element;
-export declare const Hide: () => JSX.Element;
-export declare const Collapse: () => JSX.Element;
-export declare const LongText: () => JSX.Element;
-export declare const LongTextOverflow: () => JSX.Element;
-//# sourceMappingURL=index.story.d.ts.map

package/dist/components/WithIcon/index.story.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/WithIcon/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;;;;;AAM9B,wBAGC;AAED,eAAO,MAAM,OAAO,mBAoBnB,CAAA;AAED,eAAO,MAAM,WAAW,mBAYvB,CAAA;AAED,eAAO,MAAM,KAAK,mBAOjB,CAAA;AAED,eAAO,MAAM,MAAM,mBAMlB,CAAA;AAqBD,eAAO,MAAM,IAAI,mBAMhB,CAAA;AAED,eAAO,MAAM,QAAQ,mBAMpB,CAAA;AAED,eAAO,MAAM,QAAQ,mBAUpB,CAAA;AAED,eAAO,MAAM,gBAAgB,mBAU5B,CAAA"}

package/src/components/Carousel/__snapshots__/index.story.storyshot

@@ -1,360 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storybook Tests Sandbox/Carousel _Carousel 1`] = `
-.c12 {
-  stroke: none;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  line-height: 0;
-  font-size: 0;
-  vertical-align: middle;
-}
-
-.c11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: rgba(0,0,0,0.32);
-  -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;
-  transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;
-  color: #ffffff;
-}
-
-.c9 {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 0;
-  min-width: 40px;
-  border: none;
-  outline: 0;
-  background: transparent;
-  cursor: pointer;
-  -webkit-transition: 0.4s visibility,0.4s opacity;
-  transition: 0.4s visibility,0.4s opacity;
-  z-index: 1;
-  visibility: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.c9:hover .c10 {
-  background-color: rgba(0,0,0,0.3472);
-  color: #f5f5f5;
-}
-
-.c9:active .c10 {
-  background-color: rgba(0,0,0,0.4288);
-  color: #d6d6d6;
-}
-
-.c3 {
-  vertical-align: top;
-  overflow: hidden;
-  list-style: none;
-  padding: 0;
-  min-width: 100%;
-  box-sizing: border-box;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin: 0;
-}
-
-.c8 {
-  opacity: 0;
-  -webkit-transition: 0.4s opacity;
-  transition: 0.4s opacity;
-}
-
-.c1 {
-  position: relative;
-  z-index: 0;
-}
-
-.c1:hover .c7 {
-  opacity: 1;
-}
-
-.c2 {
-  overflow-x: auto;
-  padding: 0;
-  margin: 0;
-  -webkit-scrollbar-width: none;
-  -moz-scrollbar-width: none;
-  -ms-scrollbar-width: none;
-  scrollbar-width: none;
-}
-
-.c2::-webkit-scrollbar {
-  display: none;
-}
-
-.c5 {
-  background-color: rgba(0,0,0,0.02);
-  border-radius: 8px;
-  color: #adadad;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.c0 {
-  width: 100%;
-  padding: 0 108px;
-  box-sizing: border-box;
-}
-
-.c4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 0 16px;
-}
-
-.c4 > * + * {
-  margin-left: 4px;
-}
-
-.c6 {
-  width: 118px;
-  height: 118px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    className="c0"
-  >
-    <div
-      className="c1"
-    >
-      <div
-        className="c2"
-        onScroll={[Function]}
-      >
-        <ul
-          className="c3"
-        >
-          <div
-            className="c4"
-          >
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-            <div
-              className="c5 c6"
-              size={118}
-            >
-              Dummy
-            </div>
-          </div>
-        </ul>
-      </div>
-      <div
-        className="c7 c8"
-      >
-        <button
-          className="c9"
-          onClick={[Function]}
-          style={
-            Object {
-              "left": 0,
-              "paddingBottom": 0,
-              "paddingLeft": 16,
-            }
-          }
-          type="button"
-        >
-          <div
-            className="c10 c11"
-          >
-            <svg
-              className="c12"
-              size={24}
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z"
-                transform="rotate(180 12 12)"
-              />
-            </svg>
-          </div>
-        </button>
-        <button
-          className="c9"
-          onClick={[Function]}
-          style={
-            Object {
-              "paddingBottom": 0,
-              "paddingRight": 16,
-              "right": 0,
-            }
-          }
-          type="button"
-        >
-          <div
-            className="c10 c11"
-          >
-            <svg
-              className="c12"
-              size={24}
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M8.08579 16.5858C7.30474 17.3668 7.30474 18.6332 8.08579 19.4142C8.86684 20.1953 10.1332 20.1953 10.9142 19.4142L18.3284 12L10.9142 4.58579C10.1332 3.80474 8.86684 3.80474 8.08579 4.58579C7.30474 5.36684 7.30474 6.63317 8.08579 7.41421L12.6716 12L8.08579 16.5858Z"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/Carousel/index.story.tsx

@@ -1,85 +0,0 @@
-import { boolean, number, select, withKnobs } from '@storybook/addon-knobs'
-import styled, { css } from 'styled-components'
-import Carousel from '.'
-
-const dummyText = css`
-  color: ${({ theme }) => theme.color.text4};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-`
-
-const Dummy = styled.div`
-  background-color: ${({ theme }) => theme.color.surface2};
-  border-radius: 8px;
-
-  ${dummyText}
-`
-export default {
-  title: 'Sandbox/Carousel',
-  decorators: [withKnobs],
-}
-
-export const _Carousel = () => {
-  const hasGradient = boolean('Gradient', false)
-  const fadeInGradient = boolean('FadeInGradient', false)
-  const buttonOffset = number('buttonOffset', 0)
-  const buttonPadding = number('buttonPadding', 16)
-  const defaultScrollAlign = select(
-    'scrollAlign',
-    {
-      Left: 'left',
-      Center: 'center',
-      Right: 'right',
-    },
-    'left'
-  )
-  const defaultScrollOffset = number('scrollOffset', 0)
-  const itemCount = number('Item count', 20)
-  const itemSize = number('Item size', 118)
-
-  const items = Array.from({ length: itemCount })
-  return (
-    <Base>
-      <Carousel
-        buttonOffset={buttonOffset}
-        buttonPadding={buttonPadding}
-        defaultScroll={{
-          align: defaultScrollAlign,
-          offset: defaultScrollOffset,
-        }}
-        hasGradient={hasGradient}
-        fadeInGradient={fadeInGradient}
-      >
-        <Container>
-          {items.map((_value, index) => (
-            <Box size={itemSize} key={index}>
-              Dummy
-            </Box>
-          ))}
-        </Container>
-      </Carousel>
-    </Base>
-  )
-}
-const Base = styled.div`
-  width: 100%;
-  padding: 0 108px;
-  box-sizing: border-box;
-`
-
-const Container = styled.div`
-  display: flex;
-  padding: 0 16px;
-
-  > * + * {
-    margin-left: 4px;
-  }
-`
-
-const Box = styled(Dummy)<{ size: number }>`
-  width: ${(props) => `${props.size}px`};
-  height: ${(props) => `${props.size}px`};
-`