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

package/Button/Button.css

@@ -1 +1 @@
-:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-surface-accent-primary);--Button--outlined-color:var(--color-surface-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-text-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}
+:root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{box-shadow:var(--Button-onFocus-boxShadow);outline:none}.spui-Button:focus:not(:focus-visible){box-shadow:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}

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,46 @@
 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)
+
+
+### Features
+
+* **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))
+
+
+
+
+
+## [0.25.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.25.0...@openameba/spindle-ui@0.25.1) (2021-12-09)
+
+
+### Bug Fixes
+
+* **spindle-ui:** correct button tokens ([6b88a5f](https://github.com/openameba/spindle/commit/6b88a5fd5fd8677aec82add4fe3552674ace69cc))
+
+
+
+
+
 # [0.25.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.24.0...@openameba/spindle-ui@0.25.0) (2021-12-03)
 
 
@@ -48,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
@@ -75,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
 
@@ -141,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
 
 
 
@@ -196,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.css

@@ -0,0 +1 @@
+:root{--HeroCarousel-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarousel-container{align-items:center;display:flex;height:11.6em;justify-content:center;overflow:hidden;padding:.6rem 0}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:16.7em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;margin:.88em auto 0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;height:3em;justify-content:center;padding:0;width:3em}.spui-HeroCarousel-control:hover{opacity:.7}.spui-HeroCarousel-control:focus{box-shadow:var(--HeroCarousel-onFocus-boxShadow);outline:none}.spui-HeroCarousel-control:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarousel-control--prev{border-radius:100px 0 0 100px;border-right:1px solid var(--color-border-low-emphasis)}.spui-HeroCarousel-control--next{border-left:1px solid var(--color-border-low-emphasis);border-radius:0 100px 100px 0}@media (prefers-reduced-motion:reduce){.spui-HeroCarousel-list{transition:1ms}}@media screen and (min-width:768px){.spui-HeroCarousel-container{height:13em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:18.5em}.spui-HeroCarousel-controls{margin-top:1.25em}.spui-HeroCarousel-control{height:3.3em;width:3.3em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.35em;width:1.35em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.5em;width:1.5em}}

package/HeroCarousel/HeroCarousel.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { CarouselItem } from './HeroCarouselItem';
+declare type Props = {
+    carouselList: CarouselItem[];
+};
+export declare const HeroCarousel: FC<Props>;
+export {};
+//# sourceMappingURL=HeroCarousel.d.ts.map

package/HeroCarousel/HeroCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarousel.d.ts","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarousel.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,EAAE,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,KAAK,CA0FjC,CAAC"}

package/HeroCarousel/HeroCarousel.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroCarousel = void 0;
+var react_1 = __importDefault(require("react"));
+var ChevronLeftBold_1 = __importDefault(require("../Icon/ChevronLeftBold"));
+var ChevronRightBold_1 = __importDefault(require("../Icon/ChevronRightBold"));
+var Pause_1 = __importDefault(require("../Icon/Pause"));
+var PlayFill_1 = __importDefault(require("../Icon/PlayFill"));
+var HeroCarouselItem_1 = __importDefault(require("./HeroCarouselItem"));
+var useAutoPlayCarousel_1 = require("./hooks/useAutoPlayCarousel");
+var BLOCK_NAME = 'spui-HeroCarousel';
+var ITEM_LINK_CLASS_NAME = 'js-auto-play-carousel-item-link';
+exports.HeroCarousel = react_1.default.memo(function HeroCarousel(_a) {
+    var carouselList = _a.carouselList;
+    if (carouselList.length === 0) {
+        return null;
+    }
+    var _b = useAutoPlayCarousel_1.useAutoPlayCarousel({
+        items: carouselList,
+        itemLinkClassName: ITEM_LINK_CLASS_NAME,
+    }), handleSlideToPrev = _b.handleSlideToPrev, handleSlideToNext = _b.handleSlideToNext, handleMouseEnter = _b.handleMouseEnter, handleMouseDown = _b.handleMouseDown, handleMouseLeave = _b.handleMouseLeave, handleTouchStart = _b.handleTouchStart, handleTransitionEnd = _b.handleTransitionEnd, isAutoPlaying = _b.isAutoPlaying, isLinkClicked = _b.isLinkClicked, itemsToRender = _b.itemsToRender, listRef = _b.listRef, listStyles = _b.listStyles, toggleAutoPlay = _b.toggleAutoPlay, handleFocus = _b.handleFocus, handleBlur = _b.handleBlur;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: BLOCK_NAME + "-container", onBlur: handleBlur, onFocus: handleFocus, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTransitionEnd: handleTransitionEnd },
+            react_1.default.createElement("ul", { "aria-roledescription": "\u30AB\u30EB\u30FC\u30BB\u30EB", className: BLOCK_NAME + "-list", ref: listRef, role: "group", style: listStyles }, itemsToRender.map(function (item, index) { return (react_1.default.createElement(HeroCarouselItem_1.default, { carouselItem: item, isLinkClicked: isLinkClicked, itemLinkClassName: ITEM_LINK_CLASS_NAME, key: "hero-carousel-" + index })); }))),
+        react_1.default.createElement("div", { className: BLOCK_NAME + "-controls" },
+            react_1.default.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_1.default.createElement(ChevronLeftBold_1.default, { "aria-hidden": true })),
+            react_1.default.createElement("button", { "aria-label": isAutoPlaying ? 'スライドを停止' : 'スライドを再生', className: BLOCK_NAME + "-control", type: "button", onClick: toggleAutoPlay }, isAutoPlaying ? (react_1.default.createElement(Pause_1.default, { "aria-hidden": true })) : (react_1.default.createElement(PlayFill_1.default, { "aria-hidden": true }))),
+            react_1.default.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_1.default.createElement(ChevronRightBold_1.default, { "aria-hidden": true })))));
+});
+//# sourceMappingURL=HeroCarousel.js.map

package/HeroCarousel/HeroCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarousel.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarousel.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAkC;AAClC,4EAAsD;AACtD,8EAAwD;AACxD,wDAAkC;AAClC,8DAAwC;AAExC,wEAAkD;AAClD,mEAAkE;AAMlE,IAAM,UAAU,GAAG,mBAAmB,CAAC;AACvC,IAAM,oBAAoB,GAAG,iCAAiC,CAAC;AAElD,QAAA,YAAY,GAAc,eAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EAEvE;QADC,YAAY,kBAAA;IAEZ,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IAEK,IAAA,KAgBF,yCAAmB,CAAC;QACtB,KAAK,EAAE,YAAY;QACnB,iBAAiB,EAAE,oBAAoB;KACxC,CAAC,EAlBA,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EACjB,gBAAgB,sBAAA,EAChB,eAAe,qBAAA,EACf,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAIV,CAAC;IAEH,OAAO,CACL;QACE,uCACE,SAAS,EAAK,UAAU,eAAY,EACpC,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB;YAEpC,8DACuB,gCAAO,EAC5B,SAAS,EAAK,UAAU,UAAO,EAC/B,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,IAEhB,aAAa,CAAC,GAAG,CAAC,UAAC,IAAkB,EAAE,KAAa,IAAK,OAAA,CACxD,8BAAC,0BAAgB,IACf,YAAY,EAAE,IAAI,EAClB,aAAa,EAAE,aAAa,EAC5B,iBAAiB,EAAE,oBAAoB,EACvC,GAAG,EAAE,mBAAiB,KAAO,GAC7B,CACH,EAPyD,CAOzD,CAAC,CACC,CACD;QAEN,uCAAK,SAAS,EAAK,UAAU,cAAW;YACtC,wDACa,+DAAa,EACxB,SAAS,EAAK,UAAU,iBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,yBAAe,mBAAc,IAAI,GAAI,CAC/B;YACT,wDACc,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,SAAS,EAAK,UAAU,aAAU,EAClC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,IAEtB,aAAa,CAAC,CAAC,CAAC,CACf,8BAAC,eAAK,mBAAc,IAAI,GAAI,CAC7B,CAAC,CAAC,CAAC,CACF,8BAAC,kBAAQ,mBAAc,IAAI,GAAI,CAChC,CACM;YACT,wDACa,qEAAc,EACzB,SAAS,EAAK,UAAU,iBAAY,UAAU,mBAAgB,EAC9D,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,iBAAiB;gBAE1B,8BAAC,0BAAgB,mBAAc,IAAI,GAAI,CAChC,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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.css

@@ -0,0 +1 @@
+:root{--HeroCarouselItem-onFocus-boxShadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity)}.spui-HeroCarouselItem-listItem{list-style:none;padding:0 .44em;width:100%}.spui-HeroCarouselItem-link{border:1px solid var(--color-border-low-emphasis);border-radius:12px;box-sizing:border-box;display:flex;flex-direction:column;height:12em;text-decoration:none}.spui-HeroCarouselItem-link:focus{box-shadow:var(--HeroCarouselItem-onFocus-boxShadow);outline:none}.spui-HeroCarouselItem-link:focus:not(:focus-visible){box-shadow:none}.spui-HeroCarouselItem-imageBlock{align-items:center;border-bottom:1px solid var(--color-border-low-emphasis);border-radius:12px 12px 0 0;display:flex;height:9.5em;justify-content:center;overflow:hidden}.spui-HeroCarouselItem-image{height:100%}.spui-HeroCarouselItem-titleContainer{align-items:center;box-sizing:border-box;display:flex;height:2.89em;justify-content:center;padding:0 .5em}.spui-HeroCarouselItem-title{color:var(--color-text-high-emphasis);font-size:.9375em;font-weight:700;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width:768px){.spui-HeroCarouselItem-listItem{padding:0 .75em}.spui-HeroCarouselItem-link{height:13.8em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}

package/HeroCarousel/HeroCarouselItem.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import './HeroCarouselItem.css';
+export declare type CarouselItem = {
+    imageUrl: string;
+    link: string;
+    title: string;
+};
+declare type Props = {
+    carouselItem: CarouselItem;
+    isLinkClicked: boolean;
+    itemLinkClassName: string;
+};
+export declare const HeroCarouselItem: FC<Props>;
+export default HeroCarouselItem;
+//# sourceMappingURL=HeroCarouselItem.d.ts.map

package/HeroCarousel/HeroCarouselItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarouselItem.d.ts","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,wBAAwB,CAAC;AAEhC,oBAAY,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,KAAK,CA0CtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/HeroCarousel/HeroCarouselItem.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroCarouselItem = void 0;
+var react_1 = __importStar(require("react"));
+require("./HeroCarouselItem.css");
+var BLOCK_NAME = 'spui-HeroCarouselItem';
+exports.HeroCarouselItem = react_1.default.memo(function HeroCarouselItem(_a) {
+    var carouselItem = _a.carouselItem, isLinkClicked = _a.isLinkClicked, itemLinkClassName = _a.itemLinkClassName;
+    var handleLinkClick = react_1.useCallback(function (e) {
+        if (!isLinkClicked) {
+            e.preventDefault();
+        }
+    }, [isLinkClicked]);
+    return (react_1.default.createElement("li", { className: BLOCK_NAME + "-listItem" },
+        react_1.default.createElement("a", { className: itemLinkClassName + " " + BLOCK_NAME + "-link", href: carouselItem.link, onClick: handleLinkClick },
+            react_1.default.createElement("span", { className: BLOCK_NAME + "-imageBlock" },
+                react_1.default.createElement("img", { alt: "", className: BLOCK_NAME + "-image", src: carouselItem.imageUrl })),
+            react_1.default.createElement("div", { className: BLOCK_NAME + "-titleContainer" },
+                react_1.default.createElement("p", { className: BLOCK_NAME + "-title" }, carouselItem.title)))));
+}, function (prevProps, nextProps) {
+    return 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;
+});
+exports.default = exports.HeroCarouselItem;
+//# sourceMappingURL=HeroCarouselItem.js.map

package/HeroCarousel/HeroCarouselItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroCarouselItem.js","sourceRoot":"","sources":["../../src/HeroCarousel/HeroCarouselItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAC/C,kCAAgC;AAchC,IAAM,UAAU,GAAG,uBAAuB,CAAC;AAE9B,QAAA,gBAAgB,GAAc,eAAK,CAAC,IAAI,CACnD,SAAS,gBAAgB,CAAC,EAIzB;QAHC,YAAY,kBAAA,EACZ,aAAa,mBAAA,EACb,iBAAiB,uBAAA;IAEjB,IAAM,eAAe,GAAG,mBAAW,CACjC,UAAC,CAAyC;QACxC,IAAI,CAAC,aAAa,EAAE;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,sCAAI,SAAS,EAAK,UAAU,cAAW;QACrC,qCACE,SAAS,EAAK,iBAAiB,SAAI,UAAU,UAAO,EACpD,IAAI,EAAE,YAAY,CAAC,IAAI,EACvB,OAAO,EAAE,eAAe;YAExB,wCAAM,SAAS,EAAK,UAAU,gBAAa;gBACzC,uCACE,GAAG,EAAC,EAAE,EACN,SAAS,EAAK,UAAU,WAAQ,EAChC,GAAG,EAAE,YAAY,CAAC,QAAQ,GAC1B,CACG;YACP,uCAAK,SAAS,EAAK,UAAU,oBAAiB;gBAC5C,qCAAG,SAAS,EAAK,UAAU,WAAQ,IAAG,YAAY,CAAC,KAAK,CAAK,CACzD,CACJ,CACD,CACN,CAAC;AACJ,CAAC,EACD,UAAC,SAAS,EAAE,SAAS;IACnB,OAAA,SAAS,CAAC,aAAa,KAAK,SAAS,CAAC,aAAa;QACnD,SAAS,CAAC,iBAAiB,KAAK,SAAS,CAAC,iBAAiB;QAC3D,SAAS,CAAC,YAAY,CAAC,KAAK,KAAK,SAAS,CAAC,YAAY,CAAC,KAAK;QAC7D,SAAS,CAAC,YAAY,CAAC,IAAI,KAAK,SAAS,CAAC,YAAY,CAAC,IAAI;QAC3D,SAAS,CAAC,YAAY,CAAC,QAAQ,KAAK,SAAS,CAAC,YAAY,CAAC,QAAQ;AAJnE,CAImE,CACtE,CAAC;AAEF,kBAAe,wBAAgB,CAAC"}

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.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+declare type Payload<Item> = {
+    items: Item[];
+    itemLinkClassName: string;
+};
+export declare function useAutoPlayCarousel<Item>({ items, itemLinkClassName, }: Payload<Item>): {
+    handleSlideToPrev: () => void;
+    handleSlideToNext: () => void;
+    handleMouseEnter: () => void;
+    handleMouseDown: (e: React.MouseEvent) => void;
+    handleMouseLeave: () => void;
+    handleTouchStart: (e: React.TouchEvent) => void;
+    handleTransitionEnd: () => void;
+    isAutoPlaying: boolean;
+    isLinkClicked: boolean;
+    itemsToRender: Item[];
+    listRef: import("react").RefObject<HTMLUListElement>;
+    listStyles: {
+        transition: string;
+        transform: string;
+    };
+    toggleAutoPlay: () => void;
+    handleFocus: (e: React.FocusEvent<HTMLDivElement>) => void;
+    handleBlur: () => void;
+};
+export {};
+//# sourceMappingURL=useAutoPlayCarousel.d.ts.map

package/HeroCarousel/hooks/useAutoPlayCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoPlayCarousel.d.ts","sourceRoot":"","sources":["../../../src/HeroCarousel/hooks/useAutoPlayCarousel.ts"],"names":[],"mappings":";AAOA,aAAK,OAAO,CAAC,IAAI,IAAI;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAKF,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,EACxC,KAAK,EACL,iBAAiB,GAClB,EAAE,OAAO,CAAC,IAAI,CAAC;;;;yBAsFc,gBAAgB;;0BA2Bf,gBAAgB;;;;;;;;;;;qBA4BrB,gBAAgB,CAAC,cAAc,CAAC;;EA0DzD"}