@openameba/spindle-ui 0.26.2 → 0.27.1-alpha.0

package/Breadcrumb/Breadcrumb.css

@@ -0,0 +1 @@
+.spui-Breadcrumb{background:var(--color-surface-secondary);border-radius:70px;display:inline-block;overflow:hidden;padding:0 16px}.spui-Breadcrumb-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Breadcrumb-item{align-items:center;display:flex;min-height:56px}.spui-Breadcrumb a{align-items:center;border-radius:4px;display:flex;letter-spacing:.1em;line-height:1.3;padding:4px 8px;position:relative;text-decoration:none}.spui-Breadcrumb a:not([aria-current]){color:var(--color-text-accent-primary);font-weight:700}.spui-Breadcrumb a[aria-current]{color:var(--color-text-low-emphasis);font-weight:400}.spui-Breadcrumb a:before{border-radius:4px;content:"";left:0;min-height:56px;position:absolute;top:-50%;width:100%}.spui-Breadcrumb a:hover{text-decoration:underline}.spui-Breadcrumb a:focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Breadcrumb a:focus:not(:focus-visible){box-shadow:none}.spui-Breadcrumb-chevron{color:var(--color-object-low-emphasis);height:16px;padding:0 4px;width:16px}.spui-Breadcrumb-item:last-of-type>.spui-Breadcrumb-chevron{display:none;padding:0}@media screen and (max-width:375px){.spui-Breadcrumb{padding:0 14px}.spui-Breadcrumb-item{min-height:40px}.spui-Breadcrumb a{font-size:.8125em;padding:2px 6px}.spui-Breadcrumb a:not([aria-current]):before{min-height:40px}.spui-Breadcrumb-chevron{height:12px;padding:0 2px;width:12px}}

package/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children?: React.ReactNode;
+    current?: boolean;
+}
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=BreadcrumbItem.d.ts.map

package/Breadcrumb/BreadcrumbItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,UAAU,KAAM,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,iFAe1B,CAAC"}

package/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,53 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbItem = void 0;
+var react_1 = __importStar(require("react"));
+exports.BreadcrumbItem = react_1.forwardRef(function Item(_a, ref) {
+    var children = _a.children, current = _a.current, rest = __rest(_a, ["children", "current"]);
+    if (current) {
+        return (react_1.default.createElement("a", __assign({ ref: ref, "aria-current": "page" }, rest), children));
+    }
+    return (react_1.default.createElement("a", __assign({ ref: ref }, rest), children));
+});
+//# sourceMappingURL=BreadcrumbItem.js.map

package/Breadcrumb/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbItem.js","sourceRoot":"","sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA0C;AAO7B,QAAA,cAAc,GAAG,kBAAU,CACtC,SAAS,IAAI,CAAC,EAAqC,EAAE,GAAG;IAAxC,IAAA,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA5B,uBAA8B,CAAF;IACxC,IAAI,OAAO,EAAE;QACX,OAAO,CACL,8CAAG,GAAG,EAAE,GAAG,kBAAe,MAAM,IAAK,IAAI,GACtC,QAAQ,CACP,CACL,CAAC;KACH;IACD,OAAO,CACL,8CAAG,GAAG,EAAE,GAAG,IAAM,IAAI,GAClB,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CACF,CAAC"}

package/Breadcrumb/BreadcrumbItem.mjs

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+export const BreadcrumbItem = forwardRef(function Item({ children, current, ...rest }, ref) {
+    if (current) {
+        return (React.createElement("a", Object.assign({ ref: ref, "aria-current": "page" }, rest), children));
+    }
+    return (React.createElement("a", Object.assign({ ref: ref }, rest), children));
+});

package/Breadcrumb/BreadcrumbList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+export declare const BreadcrumbList: (props: Props) => JSX.Element;
+export {};
+//# sourceMappingURL=BreadcrumbList.d.ts.map

package/Breadcrumb/BreadcrumbList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbList.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/BreadcrumbList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,eAAO,MAAM,cAAc,UAAW,KAAK,gBAuB1C,CAAC"}

package/Breadcrumb/BreadcrumbList.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbList = void 0;
+var react_1 = __importDefault(require("react"));
+var ChevronRightBold_1 = __importDefault(require("../Icon/ChevronRightBold"));
+var BLOCK_NAME = 'spui-Breadcrumb';
+exports.BreadcrumbList = function (props) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    return (react_1.default.createElement("nav", __assign({ "aria-label": "\u30D1\u30F3\u304F\u305A\u30EA\u30B9\u30C8", className: [BLOCK_NAME, className].join(' ').trim() }, rest),
+        react_1.default.createElement("ol", { className: BLOCK_NAME + "-list" }, react_1.default.Children.map(children, function (child) {
+            return react_1.default.isValidElement(child) ? (react_1.default.createElement("li", { className: BLOCK_NAME + "-item" },
+                child,
+                react_1.default.createElement(ChevronRightBold_1.default, { "aria-hidden": "true", className: BLOCK_NAME + "-chevron" }))) : null;
+        }))));
+};
+//# sourceMappingURL=BreadcrumbList.js.map

package/Breadcrumb/BreadcrumbList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbList.js","sourceRoot":"","sources":["../../src/Breadcrumb/BreadcrumbList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,8EAAwD;AAMxD,IAAM,UAAU,GAAG,iBAAiB,CAAC;AAExB,QAAA,cAAc,GAAG,UAAC,KAAY;IACjC,IAAA,QAAQ,GAAyB,KAAK,SAA9B,EAAE,SAAS,GAAc,KAAK,UAAnB,EAAK,IAAI,UAAK,KAAK,EAAxC,yBAAgC,CAAF,CAAW;IAC/C,OAAO,CACL,8DACa,4CAAS,EACpB,SAAS,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IAC/C,IAAI;QAER,sCAAI,SAAS,EAAK,UAAU,UAAO,IAChC,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;YAClC,OAAO,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACnC,sCAAI,SAAS,EAAK,UAAU,UAAO;gBAChC,KAAK;gBACN,8BAAC,0BAAgB,mBACH,MAAM,EAClB,SAAS,EAAK,UAAU,aAAU,GAClC,CACC,CACN,CAAC,CAAC,CAAC,IAAI,CAAC;QACX,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CAAC"}

package/Breadcrumb/BreadcrumbList.mjs

@@ -0,0 +1,12 @@
+import React from 'react';
+import ChevronRightBold from '../Icon/ChevronRightBold';
+const BLOCK_NAME = 'spui-Breadcrumb';
+export const BreadcrumbList = (props) => {
+    const { children, className, ...rest } = props;
+    return (React.createElement("nav", Object.assign({ "aria-label": "\u30D1\u30F3\u304F\u305A\u30EA\u30B9\u30C8", className: [BLOCK_NAME, className].join(' ').trim() }, rest),
+        React.createElement("ol", { className: `${BLOCK_NAME}-list` }, React.Children.map(children, (child) => {
+            return React.isValidElement(child) ? (React.createElement("li", { className: `${BLOCK_NAME}-item` },
+                child,
+                React.createElement(ChevronRightBold, { "aria-hidden": "true", className: `${BLOCK_NAME}-chevron` }))) : null;
+        }))));
+};

package/Breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { BreadcrumbList } from './BreadcrumbList';
+export { BreadcrumbItem } from './BreadcrumbItem';
+//# sourceMappingURL=index.d.ts.map

package/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/Breadcrumb/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbItem = exports.BreadcrumbList = void 0;
+var BreadcrumbList_1 = require("./BreadcrumbList");
+Object.defineProperty(exports, "BreadcrumbList", { enumerable: true, get: function () { return BreadcrumbList_1.BreadcrumbList; } });
+var BreadcrumbItem_1 = require("./BreadcrumbItem");
+Object.defineProperty(exports, "BreadcrumbItem", { enumerable: true, get: function () { return BreadcrumbItem_1.BreadcrumbItem; } });
+//# sourceMappingURL=index.js.map

package/Breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Breadcrumb/index.ts"],"names":[],"mappings":";;;AAAA,mDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mDAAkD;AAAzC,gHAAA,cAAc,OAAA"}

package/Breadcrumb/index.mjs

@@ -0,0 +1,2 @@
+export { BreadcrumbList } from './BreadcrumbList';
+export { BreadcrumbItem } from './BreadcrumbItem';

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,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.27.1-alpha.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.27.0...@openameba/spindle-ui@0.27.1-alpha.0) (2022-03-18)
+
+
+### Bug Fixes
+
+* **spindle-ui:** set side effect for css ([c70cd42](https://github.com/openameba/spindle/commit/c70cd42e91959e8fe921a992f2c26eac3f5e920f))
+
+
+
+
+
+# [0.27.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.3...@openameba/spindle-ui@0.27.0) (2022-03-18)
+
+
+### Features
+
+* **spindle-ui:** add Breadcrumb component ([3066aba](https://github.com/openameba/spindle/commit/3066abae0a56265437cb363315164d77ba3268a4))
+
+
+
+
+
+## [0.26.3](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.2...@openameba/spindle-ui@0.26.3) (2022-03-14)
+
+
+### Bug Fixes
+
+* **spindle-ui:** fix HeroCarousel image size ([fa5cd3c](https://github.com/openameba/spindle/commit/fa5cd3c0e4383070e217364e0f19a0599d3ce6ae))
+
+
+
+
+
 ## [0.26.2](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.26.1...@openameba/spindle-ui@0.26.2) (2022-02-25)
 
 
@@ -32,6 +65,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))
+
 
 
 
@@ -92,12 +132,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
@@ -119,12 +166,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
 
@@ -185,6 +234,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
 
 
 
@@ -240,6 +292,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

@@ -1 +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;width:17.5em}.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;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}: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:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.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:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}
+: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;width:17.5em}.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%;object-fit:cover;width: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;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}: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:12.5em;justify-content:center;overflow:hidden}.spui-HeroCarousel-list{display:flex;margin-right:.88em;padding:0 .44em;transition:transform .5s;width:17.5em}.spui-HeroCarousel-controls{align-items:center;border:1px solid var(--color-border-low-emphasis);border-radius:100px;display:flex;height:2.5em;margin:.88em auto 0;width:7.63em}.spui-HeroCarousel-control{align-items:center;background-color:transparent;border:none;display:flex;font-size:1em;height:100%;justify-content:center;padding:0;width:33.33333%}.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:14.3em}.spui-HeroCarousel-list{margin-right:1.5em;padding:0 .75em;width:20em}.spui-HeroCarousel-controls{height:2.75em;margin-top:1.25em;width:8.38em}}.spui-HeroCarousel-control>svg{color:var(--color-text-low-emphasis);height:1.13em;width:1.13em}@media screen and (min-width:768px){.spui-HeroCarousel-control>svg{height:1.25em;width:1.25em}}

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

@@ -1 +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;width:17.5em}.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;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}
+: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;width:17.5em}.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%;-o-object-fit:cover;object-fit:cover;width: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;width:20em}.spui-HeroCarouselItem-titleContainer{height:3.3em}.spui-HeroCarouselItem-title{font-size:1em}.spui-HeroCarouselItem-imageBlock{height:10.9em}}

package/HeroCarousel/HeroCarouselItem.mjs

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react';
+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;