@openameba/spindle-ui 0.26.0 → 0.26.1-alpha.0

package/Button/Button.mjs

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-Button';
+export const Button = forwardRef(function Button({ children, layout = 'intrinsic', size = 'large', variant = 'contained', icon, ...rest }, ref) {
+    return (React.createElement("button", Object.assign({ className: `${BLOCK_NAME} ${BLOCK_NAME}--${layout} ${BLOCK_NAME}--${size} ${BLOCK_NAME}--${variant}`, ref: ref }, rest), icon ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${size}` }, icon),
+        children)) : (children)));
+});

package/Button/index.mjs

@@ -0,0 +1 @@
+export { Button } from './Button';

package/ButtonGroup/ButtonGroup.mjs

@@ -0,0 +1,13 @@
+import React from 'react';
+const BLOCK_NAME = 'spui-ButtonGroup';
+export const ButtonGroup = ({ children, className, direction = 'row', size = 'large', ...rest }) => {
+    const classnames = [
+        BLOCK_NAME,
+        `${BLOCK_NAME}--${direction}`,
+        `${BLOCK_NAME}--${size}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (React.createElement("div", Object.assign({ className: classnames }, rest), children));
+};

package/ButtonGroup/index.mjs

@@ -0,0 +1 @@
+export { ButtonGroup } from './ButtonGroup';

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.26.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.0...@openameba/spindle-ui@0.26.1-alpha.0) (2022-02-21)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([5a24128](https://github.com/openameba/spindle/commit/5a241288ba6964c77fabdeb7b498fe4ac62b7328))
+
+
+
+
+
 # [0.26.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.1...@openameba/spindle-ui@0.26.0) (2022-02-21)
 
 
@@ -10,6 +21,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 * **spindle-ui:** add HeroCarousel component ([d7e0a53](https://github.com/openameba/spindle/commit/d7e0a5302cfca4d7600188098ef4dd224998e2bb))
 
+## [0.25.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.1...@openameba/spindle-ui@0.25.2-alpha.0) (2021-12-09)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([bdf0c9f](https://github.com/openameba/spindle/commit/bdf0c9ff79a69ad9dd2706dcfe96bd29559b373e))
+
 
 
 
@@ -70,12 +88,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **spindle-icons:** update icons ([39ce767](https://github.com/openameba/spindle/commit/39ce7673df4556ee3b9a6ea6dc62ad25236a6fc9))
+## [0.22.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.22.0...@openameba/spindle-ui@0.22.1-alpha.0) (2021-09-06)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([f26be31](https://github.com/openameba/spindle/commit/f26be31bf53ec73fbe00222773ba691809dae5d5))
 
 
 
 
 
 # [0.22.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.2...@openameba/spindle-ui@0.22.0) (2021-09-06)
+## [0.21.3-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.2...@openameba/spindle-ui@0.21.3-alpha.0) (2021-07-30)
 
 
 ### Bug Fixes
@@ -97,12 +122,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### BREAKING CHANGES
 
 * **spindle-icons,spindle-ui:** setting icon was renamed to gear
+* **spindle-ui:** set side effect for css ([ec4e8f1](https://github.com/openameba/spindle/commit/ec4e8f143cd6769cc6b3d49534233a46eaf79b2d))
 
 
 
 
 
 ## [0.21.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.1...@openameba/spindle-ui@0.21.2) (2021-07-30)
+## [0.21.2-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.21.1...@openameba/spindle-ui@0.21.2-alpha.0) (2021-07-28)
 
 **Note:** Version bump only for package @openameba/spindle-ui
 
@@ -163,6 +190,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Features
 
 * **spindle-icons:** update icons ([ae07c8e](https://github.com/openameba/spindle/commit/ae07c8eca4f33789c45b3c3d6a2e7f8f17c11e81))
+## [0.18.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.18.0...@openameba/spindle-ui@0.18.1-alpha.0) (2021-06-11)
+
+**Note:** Version bump only for package @openameba/spindle-ui
 
 
 
@@ -218,6 +248,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 ### Bug Fixes
 
 * **spindle-ui:** fix CSS variable name ([f76d2ee](https://github.com/openameba/spindle/commit/f76d2ee1840574a1247a20ea1ee212b85d99708e))
+# [0.15.0-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.14.0...@openameba/spindle-ui@0.15.0-alpha.0) (2021-03-15)
+
+**Note:** Version bump only for package @openameba/spindle-ui
 
 
 

package/Form/Checkbox.mjs

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { CheckBold } from '../Icon';
+const BLOCK_NAME = 'spui-Checkbox';
+export const Checkbox = forwardRef(function Checkbox({ children, ...rest }, ref) {
+    return (React.createElement("label", { className: `${BLOCK_NAME}-label` },
+        React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, ref: ref, type: "checkbox" }, rest)),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(CheckBold, { "aria-hidden": "true" })),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
+        children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
+});

package/Form/DropDown.mjs

@@ -0,0 +1,38 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { ChevronDownBold } from '../Icon';
+const BLOCK_NAME = 'spui-DropDown';
+export const DropDown = forwardRef(function DropDown({ children, hasError = false, onChange, ...rest }, ref) {
+    const selectEl = useRef(null);
+    const [text, setText] = useState('');
+    const [disabled, setDisabled] = useState(false);
+    const update = () => {
+        if (selectEl && selectEl.current) {
+            const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
+            const value = selectedEl.text;
+            const disabled = selectedEl.disabled;
+            setText(value);
+            setDisabled(disabled);
+        }
+    };
+    const handleChange = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        update();
+    };
+    // Update text once
+    useEffect(update, []);
+    return (React.createElement("label", { className: [
+            `${BLOCK_NAME}-label`,
+            !disabled ? 'is-active' : '',
+            hasError ? 'is-error' : '',
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` }, text),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(ChevronDownBold, { "aria-hidden": "true" })),
+        React.createElement("select", Object.assign({ className: `${BLOCK_NAME}-select`, ref: mergeRefs([selectEl, ref]), onChange: handleChange }, rest), children),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/InlineDropDown.mjs

@@ -0,0 +1,30 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { ChevronDownBold } from '../Icon';
+const BLOCK_NAME = 'spui-InlineDropDown';
+export const InlineDropDown = forwardRef(function InlineDropDown({ children, visualSize = 'medium', onChange, ...rest }, ref) {
+    const selectEl = useRef(null);
+    const [text, setText] = useState('');
+    const update = () => {
+        if (selectEl && selectEl.current) {
+            const selectedEl = selectEl.current.options[selectEl.current.selectedIndex];
+            const value = selectedEl.text;
+            setText(value);
+        }
+    };
+    const handleChange = (event) => {
+        if (typeof onChange === 'function') {
+            onChange(event);
+        }
+        update();
+    };
+    // Update text once
+    useEffect(update, []);
+    return (React.createElement("label", { className: [`${BLOCK_NAME}-label`].filter(Boolean).join(' ') },
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` },
+            React.createElement("span", { className: `${BLOCK_NAME}-text ${BLOCK_NAME}-text--${visualSize}` }, text),
+            React.createElement("span", { className: `${BLOCK_NAME}-icon ${BLOCK_NAME}-icon--${visualSize}` },
+                React.createElement(ChevronDownBold, { "aria-hidden": "true" }))),
+        React.createElement("select", Object.assign({ className: `${BLOCK_NAME}-select ${BLOCK_NAME}-select--${visualSize}`, ref: mergeRefs([selectEl, ref]), onChange: handleChange }, rest), children),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/InputLabel.mjs

@@ -0,0 +1,5 @@
+import React from 'react';
+const BLOCK_NAME = 'spui-InputLabel';
+export const InputLabel = ({ children, id = '', ...rest }) => {
+    return (React.createElement("label", Object.assign({ className: BLOCK_NAME, htmlFor: id }, rest), children));
+};

package/Form/InvalidMessage.mjs

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ExclamationmarkCircleFill } from '../Icon';
+const BLOCK_NAME = 'spui-InvalidMessage';
+export const InvalidMessage = ({ children, visible = false, ...rest }) => {
+    return (React.createElement("p", Object.assign({ className: BLOCK_NAME, hidden: !visible }, rest),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(ExclamationmarkCircleFill, { "aria-hidden": "true" })),
+        React.createElement("span", { className: `${BLOCK_NAME}-body` }, children)));
+};

package/Form/Radio.mjs

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { CheckBold } from '../Icon';
+const BLOCK_NAME = 'spui-Radio';
+export const Radio = forwardRef(function Radio({ children, id = '', ...rest }, ref) {
+    return (React.createElement("label", { className: `${BLOCK_NAME}-label`, htmlFor: id },
+        React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, id: id, ref: ref, type: "radio" }, rest)),
+        React.createElement("span", { className: `${BLOCK_NAME}-icon` },
+            React.createElement(CheckBold, { "aria-hidden": "true" })),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` }),
+        children && React.createElement("span", { className: `${BLOCK_NAME}-text` }, children)));
+});

package/Form/TextArea.mjs

@@ -0,0 +1,5 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-TextArea';
+export const TextArea = forwardRef(function TextArea({ children, hasError = false, id = '', ...rest }, ref) {
+    return (React.createElement("textarea", Object.assign({ className: [`${BLOCK_NAME}`, hasError ? 'is-error' : ''].join(' '), id: id, ref: ref }, rest), children));
+});

package/Form/TextField.mjs

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-TextField';
+export const TextField = forwardRef(function TextField({ hasError = false, id = '', variant = 'medium', ...rest }, ref) {
+    return (React.createElement("input", Object.assign({ className: [
+            `${BLOCK_NAME}`,
+            `${BLOCK_NAME}--${variant}`,
+            hasError ? 'is-error' : '',
+        ].join(' '), id: id, ref: ref }, rest)));
+});

package/Form/ToggleSwitch.mjs

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+const BLOCK_NAME = 'spui-ToggleSwitch';
+export const ToggleSwitch = forwardRef(function ToggleSwitch({ id = '', ...rest }, ref) {
+    return (React.createElement("label", { className: BLOCK_NAME },
+        React.createElement("input", Object.assign({ className: `${BLOCK_NAME}-input`, id: id, ref: ref, type: "checkbox" }, rest)),
+        React.createElement("span", { className: `${BLOCK_NAME}-visual` }),
+        React.createElement("span", { className: `${BLOCK_NAME}-outline` })));
+});

package/Form/index.mjs

@@ -0,0 +1,8 @@
+export { Checkbox } from './Checkbox';
+export { DropDown } from './DropDown';
+export { InputLabel } from './InputLabel';
+export { InvalidMessage } from './InvalidMessage';
+export { Radio } from './Radio';
+export { TextArea } from './TextArea';
+export { TextField } from './TextField';
+export { ToggleSwitch } from './ToggleSwitch';

package/HeroCarousel/HeroCarousel.mjs

@@ -0,0 +1,27 @@
+import React from 'react';
+import ChevronLeftBold from '../Icon/ChevronLeftBold';
+import ChevronRightBold from '../Icon/ChevronRightBold';
+import Pause from '../Icon/Pause';
+import PlayFill from '../Icon/PlayFill';
+import HeroCarouselItem from './HeroCarouselItem';
+import { useAutoPlayCarousel } from './hooks/useAutoPlayCarousel';
+const BLOCK_NAME = 'spui-HeroCarousel';
+const ITEM_LINK_CLASS_NAME = 'js-auto-play-carousel-item-link';
+export const HeroCarousel = React.memo(function HeroCarousel({ carouselList, }) {
+    if (carouselList.length === 0) {
+        return null;
+    }
+    const { handleSlideToPrev, handleSlideToNext, handleMouseEnter, handleMouseDown, handleMouseLeave, handleTouchStart, handleTransitionEnd, isAutoPlaying, isLinkClicked, itemsToRender, listRef, listStyles, toggleAutoPlay, handleFocus, handleBlur, } = useAutoPlayCarousel({
+        items: carouselList,
+        itemLinkClassName: ITEM_LINK_CLASS_NAME,
+    });
+    return (React.createElement("div", null,
+        React.createElement("div", { className: `${BLOCK_NAME}-container`, onBlur: handleBlur, onFocus: handleFocus, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTransitionEnd: handleTransitionEnd },
+            React.createElement("ul", { "aria-roledescription": "\u30AB\u30EB\u30FC\u30BB\u30EB", className: `${BLOCK_NAME}-list`, ref: listRef, role: "group", style: listStyles }, itemsToRender.map((item, index) => (React.createElement(HeroCarouselItem, { carouselItem: item, isLinkClicked: isLinkClicked, itemLinkClassName: ITEM_LINK_CLASS_NAME, key: `hero-carousel-${index}` }))))),
+        React.createElement("div", { className: `${BLOCK_NAME}-controls` },
+            React.createElement("button", { "aria-label": "1\u3064\u524D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: `${BLOCK_NAME}-control ${BLOCK_NAME}-control--prev`, type: "button", onClick: handleSlideToPrev },
+                React.createElement(ChevronLeftBold, { "aria-hidden": true })),
+            React.createElement("button", { "aria-label": isAutoPlaying ? 'スライドを停止' : 'スライドを再生', className: `${BLOCK_NAME}-control`, type: "button", onClick: toggleAutoPlay }, isAutoPlaying ? (React.createElement(Pause, { "aria-hidden": true })) : (React.createElement(PlayFill, { "aria-hidden": true }))),
+            React.createElement("button", { "aria-label": "1\u3064\u5F8C\u308D\u306E\u30A2\u30A4\u30C6\u30E0\u306B\u79FB\u52D5", className: `${BLOCK_NAME}-control ${BLOCK_NAME}-control--next`, type: "button", onClick: handleSlideToNext },
+                React.createElement(ChevronRightBold, { "aria-hidden": true })))));
+});

package/HeroCarousel/HeroCarouselItem.mjs

@@ -0,0 +1,21 @@
+import React, { useCallback } from 'react';
+import './HeroCarouselItem.css';
+const BLOCK_NAME = 'spui-HeroCarouselItem';
+export const HeroCarouselItem = React.memo(function HeroCarouselItem({ carouselItem, isLinkClicked, itemLinkClassName, }) {
+    const handleLinkClick = useCallback((e) => {
+        if (!isLinkClicked) {
+            e.preventDefault();
+        }
+    }, [isLinkClicked]);
+    return (React.createElement("li", { className: `${BLOCK_NAME}-listItem` },
+        React.createElement("a", { className: `${itemLinkClassName} ${BLOCK_NAME}-link`, href: carouselItem.link, onClick: handleLinkClick },
+            React.createElement("span", { className: `${BLOCK_NAME}-imageBlock` },
+                React.createElement("img", { alt: "", className: `${BLOCK_NAME}-image`, src: carouselItem.imageUrl })),
+            React.createElement("div", { className: `${BLOCK_NAME}-titleContainer` },
+                React.createElement("p", { className: `${BLOCK_NAME}-title` }, carouselItem.title)))));
+}, (prevProps, nextProps) => prevProps.isLinkClicked === nextProps.isLinkClicked &&
+    prevProps.itemLinkClassName === nextProps.itemLinkClassName &&
+    prevProps.carouselItem.title === nextProps.carouselItem.title &&
+    prevProps.carouselItem.link === nextProps.carouselItem.link &&
+    prevProps.carouselItem.imageUrl === nextProps.carouselItem.imageUrl);
+export default HeroCarouselItem;

package/HeroCarousel/hooks/useAutoPlayCarousel.mjs

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAutoSlide } from './useAutoSlide';
+import { useCarouselFocus } from './useCarouselFocus';
+import { useSliderMoveEvent } from './useSliderMoveEvent';
+import { useSliderTransition } from './useSliderTransition';
+import { useValueRef } from './useValueRef';
+const COPY_COUNT = 5;
+const SWIPE_THRESHOLD_X = 20;
+export function useAutoPlayCarousel({ items, itemLinkClassName, }) {
+    const { diffXRef, diffYRef, setDiffX, setDiffY, setStartX, setStartY, } = useSliderMoveEvent();
+    const [focusOffset, setFocusOffset] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    const [isLinkClicked, setIsLinkClicked] = useState(false);
+    const isHoveringRef = useValueRef(isHovering);
+    const slideToNextRef = useValueRef(() => slideToNext());
+    const itemCount = useMemo(() => items.length, [items]);
+    const getIsCopiedItem = useCallback((index) => {
+        return index < COPY_COUNT || index >= itemCount + COPY_COUNT;
+    }, [itemCount]);
+    const { isAutoPlaying, setIsAutoPlaying, resetAutoSlide, resetTimeOut, toggleAutoPlay, } = useAutoSlide({
+        onTimeOut: slideToNextRef.current,
+    });
+    const { linkRefs, listRef } = useCarouselFocus({
+        getIsCopiedItem,
+        itemLinkClassName,
+    });
+    const isAutoPlayingRef = useValueRef(isAutoPlaying);
+    const { currentIndexRef, handleTransitionEnd, listStyles, setCurrentIndex, setDisableAutoFocus, setDisableTransition, } = useSliderTransition({
+        copyCount: COPY_COUNT,
+        itemCount,
+        isAutoPlaying,
+        linkRefs,
+    });
+    const itemsToRender = useMemo(
+    // generate copy contents on both ends to make carousel look like looping
+    () => [
+        ...items.slice(-COPY_COUNT),
+        ...items,
+        ...items.slice(0, COPY_COUNT),
+    ], [items]);
+    const slideToNext = (ignoreHover = false) => {
+        const shouldSlideToNext = ((!isHoveringRef.current && isAutoPlayingRef.current) || ignoreHover) &&
+            currentIndexRef.current <= itemCount;
+        if (shouldSlideToNext) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current + 1);
+        }
+        resetAutoSlide();
+    };
+    const slideToPrev = () => {
+        if (currentIndexRef.current >= 0) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current - 1);
+        }
+        resetAutoSlide();
+    };
+    const handleMouseEnter = () => setIsHovering(true);
+    const handleMouseLeave = () => {
+        setIsHovering(false);
+        resetAutoSlide();
+    };
+    const handleMouseDown = (e) => {
+        resetTimeOut();
+        setStartX(e.clientX);
+        setStartY(e.clientY);
+    };
+    const onMouseUp = () => {
+        if (diffXRef.current > SWIPE_THRESHOLD_X) {
+            setIsLinkClicked(false);
+            setIsAutoPlaying(false);
+            slideToPrev();
+        }
+        if (diffXRef.current < -SWIPE_THRESHOLD_X) {
+            setIsLinkClicked(false);
+            setIsAutoPlaying(false);
+            slideToNext(true);
+        }
+        if (diffXRef.current === 0 && diffYRef.current === 0) {
+            setIsLinkClicked(true);
+        }
+        setStartX(null);
+        setStartY(null);
+        setDiffX(0);
+        setDiffY(0);
+    };
+    const handleTouchStart = (e) => {
+        if (!e.touches.length)
+            return;
+        const touch = e.touches[0];
+        resetTimeOut();
+        handleMouseEnter();
+        setStartX(touch.clientX);
+        setStartY(touch.clientY);
+    };
+    const onTouchEnd = () => {
+        setIsHovering(false);
+        onMouseUp();
+    };
+    const handleSlideToPrev = () => {
+        resetTimeOut();
+        setIsAutoPlaying(false);
+        slideToPrev();
+    };
+    const handleSlideToNext = () => {
+        resetTimeOut();
+        setIsAutoPlaying(false);
+        slideToNext(true);
+    };
+    const handleFocus = (e) => {
+        setIsAutoPlaying(false);
+        const { offsetLeft: newFocusOffset } = e.target;
+        setFocusOffset(newFocusOffset);
+        if (focusOffset === 0) {
+            return;
+        }
+        setDisableAutoFocus(true);
+        if (isHovering && diffXRef.current === 0 && diffYRef.current === 0) {
+            setIsLinkClicked(true);
+            return;
+        }
+        if (focusOffset > newFocusOffset) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current - 1);
+        }
+        if (focusOffset < newFocusOffset) {
+            setDisableTransition(false);
+            setCurrentIndex(currentIndexRef.current + 1);
+        }
+    };
+    const handleBlur = () => {
+        setIsAutoPlaying(true);
+    };
+    useEffect(() => {
+        document.body.addEventListener('mouseup', onMouseUp);
+        document.body.addEventListener('touchend', onTouchEnd);
+        return () => {
+            document.body.removeEventListener('mouseup', onMouseUp);
+            document.body.removeEventListener('touchend', onTouchEnd);
+        };
+    }, []);
+    return {
+        handleSlideToPrev,
+        handleSlideToNext,
+        handleMouseEnter,
+        handleMouseDown,
+        handleMouseLeave,
+        handleTouchStart,
+        handleTransitionEnd,
+        isAutoPlaying,
+        isLinkClicked,
+        itemsToRender,
+        listRef,
+        listStyles,
+        toggleAutoPlay,
+        handleFocus,
+        handleBlur,
+    };
+}

package/HeroCarousel/hooks/useAutoSlide.mjs

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react';
+const AUTO_SLIDE_SPEED = 4000; // ms
+export function useAutoSlide({ onTimeOut }) {
+    const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+    const [timeoutId, setTimeoutId] = useState(null);
+    const resetTimeOut = useCallback(() => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    }, [timeoutId]);
+    const activateAutoSlide = () => {
+        resetTimeOut();
+        const newTimeoutId = setTimeout(() => {
+            onTimeOut();
+        }, AUTO_SLIDE_SPEED);
+        setTimeoutId(newTimeoutId);
+    };
+    const resetAutoSlide = () => {
+        if (isAutoPlaying) {
+            activateAutoSlide();
+        }
+    };
+    const toggleAutoPlay = () => {
+        resetTimeOut();
+        if (!isAutoPlaying) {
+            activateAutoSlide();
+        }
+        setIsAutoPlaying((prev) => !prev);
+    };
+    useEffect(() => {
+        activateAutoSlide();
+    }, []);
+    return {
+        isAutoPlaying,
+        setIsAutoPlaying,
+        resetAutoSlide,
+        resetTimeOut,
+        toggleAutoPlay,
+    };
+}

package/HeroCarousel/hooks/useCarouselFocus.mjs

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+export function useCarouselFocus({ getIsCopiedItem, itemLinkClassName, }) {
+    const listRef = useRef(null);
+    const linkRefs = useRef([]);
+    useEffect(() => {
+        if (!listRef.current)
+            return;
+        const linkElements = listRef.current.querySelectorAll(`a.${itemLinkClassName}`);
+        if (!linkElements)
+            return;
+        // NOTE: use NodeList forEach as IE polyfill
+        Array.prototype.forEach.call(linkElements, (link, index) => {
+            linkRefs.current.push(link);
+            link.setAttribute('tabindex', getIsCopiedItem(index) ? '-1' : '0');
+            link.setAttribute('aria-hidden', getIsCopiedItem(index) ? 'true' : 'false');
+        });
+    }, [getIsCopiedItem, itemLinkClassName]);
+    return {
+        linkRefs,
+        listRef,
+    };
+}

package/HeroCarousel/hooks/useSliderMoveEvent.mjs

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { useValueRef } from './useValueRef';
+export function useSliderMoveEvent() {
+    const [diffX, setDiffX] = useState(0);
+    const [diffY, setDiffY] = useState(0);
+    const [startX, setStartX] = useState(null);
+    const [startY, setStartY] = useState(null);
+    const diffXRef = useValueRef(diffX);
+    const diffYRef = useValueRef(diffY);
+    const startXRef = useValueRef(startX);
+    const startYRef = useValueRef(startY);
+    const onMouseMove = (e) => {
+        if (startXRef.current === null || startYRef.current === null)
+            return;
+        e.preventDefault();
+        setDiffX(e.clientX - startXRef.current);
+        setDiffY(e.clientY - startYRef.current);
+    };
+    const onTouchMove = (e) => {
+        if (startXRef.current === null ||
+            startYRef.current === null ||
+            !e.touches.length) {
+            return;
+        }
+        const touch = e.touches[0];
+        setDiffX(touch.clientX - startXRef.current);
+        setDiffY(touch.clientY - startYRef.current);
+    };
+    useEffect(() => {
+        document.body.addEventListener('mousemove', onMouseMove);
+        document.body.addEventListener('touchmove', onTouchMove, {
+            passive: true,
+        });
+        return () => {
+            document.body.removeEventListener('mousemove', onMouseMove);
+            document.body.removeEventListener('touchmove', onTouchMove);
+        };
+    }, []);
+    return {
+        diffXRef,
+        diffYRef,
+        setDiffX,
+        setDiffY,
+        setStartX,
+        setStartY,
+    };
+}

package/HeroCarousel/hooks/useSliderTransition.mjs

@@ -0,0 +1,30 @@
+import { useMemo, useState } from 'react';
+import { useValueRef } from './useValueRef';
+export function useSliderTransition({ copyCount, itemCount, linkRefs, isAutoPlaying, }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const currentIndexRef = useValueRef(currentIndex);
+    const [disableTransition, setDisableTransition] = useState(false);
+    const [disableAutoFocus, setDisableAutoFocus] = useState(false);
+    const listStyles = useMemo(() => {
+        return {
+            transition: disableTransition ? 'none' : '',
+            transform: `translate3d(${-100 * (currentIndex + copyCount)}%, 0, 0) translateX(0)`,
+        };
+    }, [copyCount, currentIndex, disableTransition]);
+    const handleTransitionEnd = () => {
+        if (!isAutoPlaying && !disableAutoFocus) {
+            linkRefs.current[currentIndex + copyCount].focus();
+        }
+        // if reach contents end, rewind without transition to make it look like looping
+        setDisableTransition(true);
+        setCurrentIndex((prev) => (prev + itemCount) % itemCount);
+    };
+    return {
+        currentIndexRef,
+        handleTransitionEnd,
+        listStyles,
+        setCurrentIndex,
+        setDisableAutoFocus,
+        setDisableTransition,
+    };
+}

package/HeroCarousel/hooks/useValueRef.mjs

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function useValueRef(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}

package/HeroCarousel/index.mjs

@@ -0,0 +1 @@
+export { HeroCarousel } from './HeroCarousel';

package/Icon/755.mjs

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function Svg755(props) {
+    return (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", role: "img" }, props),
+        React.createElement("path", { d: "M18.28 9.5h-1.64l-.35.72.07.03c.19.09.37.22.55.42.31.33.47.76.46 1.27-.01.62-.23 1.13-.66 1.52-.42.38-.95.58-1.6.58h-.01c-.55 0-1.03-.16-1.43-.46l-.18-.14.57-1.04.25.2c.26.2.49.28.85.28.28 0 .5-.08.68-.26.18-.18.26-.38.26-.66 0-.2-.09-.39-.26-.52-.22-.17-.6-.21-.61-.21-.35-.04-.62-.03-.78-.01l.99-2.13.39-.87h3.03l-.58 1.28zm-6.46 1.22c.19.09.37.22.55.42.31.33.47.76.47 1.27-.01.62-.23 1.13-.66 1.52-.42.38-.95.57-1.59.57h-.03c-.55 0-1.03-.16-1.43-.46l-.18-.14.57-1.04.25.2c.26.2.49.28.85.28.28 0 .5-.08.68-.26.18-.18.26-.38.26-.66 0-.2-.09-.39-.26-.52-.22-.17-.6-.21-.61-.21-.35-.04-.62-.03-.78-.01l.99-2.13.39-.86h3.03l-.57 1.28H12.1l-.35.72.07.03zm-6.12 4l2.08-4.3H5.25l.2-.41.39-.87h3.95l-2.66 5.57H5.7v.01zM3 6.1v11.19l7.45-.01-.07 1.8 2.75-1.8 7.87.01V4.92L3 6.1z" })));
+}
+export default Svg755;

package/Icon/Abemakun.mjs

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function SvgAbemakun(props) {
+    return (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", role: "img" }, props),
+        React.createElement("path", { d: "M19.24 16.91c-.18-.45-.52-.65-1.14-1.06-.47-.3-.79-.72-.85-1.55-.07-1.08.16-1.76.11-3.31-.04-1.2-.47-2.1-.74-2.63-.32-.62-.37-1.06-.4-1.78-.02-.66.01-2.12 0-2.58-.02-.46-.2-.76-.52-.9-.38-.18-.79-.12-1.13.25-.31.34-.88.95-1.28 1.31-.51.47-.84.57-1.29.57-.45 0-.78-.1-1.29-.57-.4-.36-.97-.97-1.28-1.31-.34-.37-.75-.43-1.13-.25-.32.14-.5.44-.52.9-.01.46.02 1.92 0 2.57-.02.72-.08 1.16-.4 1.79-.27.53-.7 1.43-.74 2.63-.06 1.55.18 2.23.11 3.31-.06.83-.38 1.25-.85 1.55-.62.4-.96.61-1.14 1.06-.13.31-.13.77.25.96.24.12.54.1.84-.02.24-.09.47-.24.7-.22.18.01.32.1.35.4.03.3.17.43.39.43.18 0 .35-.12.47-.45.14-.35.2-.66.42-.66.23.01.28.25.3.59.02.49-.17.88-.53 1.21-.42.39-.74.76-.62 1.24.08.34.45.56 1.05.59.59.03 1.57.04 2.25.02.63-.02 1-.29 1.08-.65.09-.41-.15-.56-.09-.9.03-.19.21-.27.4-.27.19 0 .37.08.4.27.06.34-.18.49-.09.9.08.36.44.64 1.08.65.68.02 1.66.01 2.25-.02.59-.03.96-.25 1.04-.59.11-.48-.2-.85-.62-1.24-.37-.34-.56-.72-.53-1.21.02-.34.07-.59.3-.59.21-.01.28.31.42.66.13.33.3.45.47.45.22 0 .36-.13.39-.43.03-.29.17-.39.35-.4.23-.01.46.13.7.22.31.12.6.15.84.02.35-.2.35-.65.22-.96zM14.76 8.3a.49.49 0 11-.49.49c-.01-.27.21-.49.49-.49zm-5.52 0a.49.49 0 11-.002.981.49.49 0 01.002-.981zM12 18.51a2.279 2.279 0 110-4.56 2.279 2.279 0 110 4.56zm3.26-6.24c-.21.35-.62.64-1.1.68-.64.06-1.03-.17-1.29-.45-.24-.27-.5-.52-.87-.52s-.63.25-.87.52c-.25.28-.65.51-1.29.45-.48-.04-.89-.32-1.1-.68-.42-.7-.06-1.63.49-2.09.79-.68 1.62-.94 2.77-.94s1.97.26 2.77.94c.55.47.9 1.39.49 2.09zm-2.12-1.91c0 .49-.5.87-1.14.87-.64 0-1.14-.38-1.14-.87s.5-.87 1.14-.87c.64 0 1.14.38 1.14.87z" })));
+}
+export default SvgAbemakun;