@openameba/spindle-ui 2.9.1 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/Form/Checkbox/Checkbox.d.ts +8 -0
  3. package/Form/Checkbox/Checkbox.d.ts.map +1 -0
  4. package/Form/Checkbox/Checkbox.figma.d.ts.map +1 -0
  5. package/Form/{Checkbox.figma.js → Checkbox/Checkbox.figma.js} +3 -2
  6. package/Form/Checkbox/Checkbox.figma.js.map +1 -0
  7. package/Form/{Checkbox.figma.mjs → Checkbox/Checkbox.figma.mjs} +2 -1
  8. package/Form/Checkbox/Checkbox.js +79 -0
  9. package/Form/Checkbox/Checkbox.js.map +1 -0
  10. package/Form/Checkbox/Checkbox.mjs +16 -0
  11. package/Form/Checkbox.css +1 -1
  12. package/Form/Checkbox.d.ts +1 -6
  13. package/Form/Checkbox.d.ts.map +1 -1
  14. package/Form/Checkbox.js +4 -70
  15. package/Form/Checkbox.js.map +1 -1
  16. package/Form/Checkbox.mjs +3 -11
  17. package/Form/DropDown/DropDown.d.ts +9 -0
  18. package/Form/DropDown/DropDown.d.ts.map +1 -0
  19. package/Form/DropDown/DropDown.js +101 -0
  20. package/Form/DropDown/DropDown.js.map +1 -0
  21. package/Form/DropDown/DropDown.mjs +38 -0
  22. package/Form/DropDown.d.ts +1 -8
  23. package/Form/DropDown.d.ts.map +1 -1
  24. package/Form/DropDown.js +4 -97
  25. package/Form/DropDown.js.map +1 -1
  26. package/Form/DropDown.mjs +3 -38
  27. package/Form/InlineDropDown/InlineDropDown.d.ts +10 -0
  28. package/Form/InlineDropDown/InlineDropDown.d.ts.map +1 -0
  29. package/Form/InlineDropDown/InlineDropDown.js +93 -0
  30. package/Form/InlineDropDown/InlineDropDown.js.map +1 -0
  31. package/Form/InlineDropDown/InlineDropDown.mjs +30 -0
  32. package/Form/InlineDropDown.d.ts +1 -9
  33. package/Form/InlineDropDown.d.ts.map +1 -1
  34. package/Form/InlineDropDown.js +4 -89
  35. package/Form/InlineDropDown.js.map +1 -1
  36. package/Form/InlineDropDown.mjs +3 -30
  37. package/Form/InputLabel/InputLabel.d.ts +8 -0
  38. package/Form/InputLabel/InputLabel.d.ts.map +1 -0
  39. package/Form/InputLabel/InputLabel.js +36 -0
  40. package/Form/InputLabel/InputLabel.js.map +1 -0
  41. package/Form/InputLabel/InputLabel.mjs +5 -0
  42. package/Form/InputLabel.d.ts +1 -7
  43. package/Form/InputLabel.d.ts.map +1 -1
  44. package/Form/InputLabel.js +4 -32
  45. package/Form/InputLabel.js.map +1 -1
  46. package/Form/InputLabel.mjs +3 -5
  47. package/Form/InvalidMessage/InvalidMessage.d.ts +8 -0
  48. package/Form/InvalidMessage/InvalidMessage.d.ts.map +1 -0
  49. package/Form/InvalidMessage/InvalidMessage.js +40 -0
  50. package/Form/InvalidMessage/InvalidMessage.js.map +1 -0
  51. package/Form/InvalidMessage/InvalidMessage.mjs +9 -0
  52. package/Form/InvalidMessage.d.ts +1 -7
  53. package/Form/InvalidMessage.d.ts.map +1 -1
  54. package/Form/InvalidMessage.js +4 -36
  55. package/Form/InvalidMessage.js.map +1 -1
  56. package/Form/InvalidMessage.mjs +3 -9
  57. package/Form/Radio/Radio.d.ts +8 -0
  58. package/Form/Radio/Radio.d.ts.map +1 -0
  59. package/Form/Radio/Radio.figma.d.ts.map +1 -0
  60. package/Form/Radio/Radio.figma.js.map +1 -0
  61. package/Form/Radio/Radio.js +74 -0
  62. package/Form/Radio/Radio.js.map +1 -0
  63. package/Form/Radio/Radio.mjs +11 -0
  64. package/Form/Radio.d.ts +1 -7
  65. package/Form/Radio.d.ts.map +1 -1
  66. package/Form/Radio.js +4 -70
  67. package/Form/Radio.js.map +1 -1
  68. package/Form/Radio.mjs +3 -11
  69. package/Form/TextArea/TextArea.d.ts +9 -0
  70. package/Form/TextArea/TextArea.d.ts.map +1 -0
  71. package/Form/TextArea/TextArea.js +65 -0
  72. package/Form/TextArea/TextArea.js.map +1 -0
  73. package/Form/TextArea/TextArea.mjs +5 -0
  74. package/Form/TextArea.d.ts +1 -8
  75. package/Form/TextArea.d.ts.map +1 -1
  76. package/Form/TextArea.js +4 -61
  77. package/Form/TextArea.js.map +1 -1
  78. package/Form/TextArea.mjs +3 -5
  79. package/Form/TextField/TextField.d.ts +10 -0
  80. package/Form/TextField/TextField.d.ts.map +1 -0
  81. package/Form/TextField/TextField.js +69 -0
  82. package/Form/TextField/TextField.js.map +1 -0
  83. package/Form/TextField/TextField.mjs +9 -0
  84. package/Form/TextField.d.ts +1 -9
  85. package/Form/TextField.d.ts.map +1 -1
  86. package/Form/TextField.js +4 -65
  87. package/Form/TextField.js.map +1 -1
  88. package/Form/TextField.mjs +3 -9
  89. package/Form/ToggleSwitch/ToggleSwitch.d.ts +7 -0
  90. package/Form/ToggleSwitch/ToggleSwitch.d.ts.map +1 -0
  91. package/Form/ToggleSwitch/ToggleSwitch.figma.d.ts.map +1 -0
  92. package/Form/ToggleSwitch/ToggleSwitch.figma.js.map +1 -0
  93. package/Form/ToggleSwitch/ToggleSwitch.js +71 -0
  94. package/Form/ToggleSwitch/ToggleSwitch.js.map +1 -0
  95. package/Form/ToggleSwitch/ToggleSwitch.mjs +11 -0
  96. package/Form/ToggleSwitch.d.ts +1 -6
  97. package/Form/ToggleSwitch.d.ts.map +1 -1
  98. package/Form/ToggleSwitch.js +4 -67
  99. package/Form/ToggleSwitch.js.map +1 -1
  100. package/Form/ToggleSwitch.mjs +3 -11
  101. package/Form/index.css +1 -1
  102. package/HeroCarousel/HeroCarousel.d.ts +1 -0
  103. package/HeroCarousel/HeroCarousel.d.ts.map +1 -1
  104. package/HeroCarousel/HeroCarousel.js +4 -3
  105. package/HeroCarousel/HeroCarousel.js.map +1 -1
  106. package/HeroCarousel/HeroCarousel.mjs +2 -1
  107. package/Modal/AppealModal/AppealModal.d.ts +23 -0
  108. package/Modal/AppealModal/AppealModal.d.ts.map +1 -0
  109. package/Modal/AppealModal/AppealModal.js +156 -0
  110. package/Modal/AppealModal/AppealModal.js.map +1 -0
  111. package/Modal/AppealModal/AppealModal.mjs +87 -0
  112. package/Modal/AppealModal.d.ts +1 -22
  113. package/Modal/AppealModal.d.ts.map +1 -1
  114. package/Modal/AppealModal.js +4 -152
  115. package/Modal/AppealModal.js.map +1 -1
  116. package/Modal/AppealModal.mjs +3 -87
  117. package/Modal/SemiModal/SemiModal.d.ts +27 -0
  118. package/Modal/SemiModal/SemiModal.d.ts.map +1 -0
  119. package/Modal/SemiModal/SemiModal.js +145 -0
  120. package/Modal/SemiModal/SemiModal.js.map +1 -0
  121. package/Modal/SemiModal/SemiModal.mjs +76 -0
  122. package/Modal/SemiModal.d.ts +1 -26
  123. package/Modal/SemiModal.d.ts.map +1 -1
  124. package/Modal/SemiModal.js +4 -141
  125. package/Modal/SemiModal.js.map +1 -1
  126. package/Modal/SemiModal.mjs +3 -76
  127. package/index.css +1 -1
  128. package/package.json +5 -5
  129. package/Form/Checkbox.figma.d.ts.map +0 -1
  130. package/Form/Checkbox.figma.js.map +0 -1
  131. package/Form/Radio.figma.d.ts.map +0 -1
  132. package/Form/Radio.figma.js.map +0 -1
  133. package/Form/ToggleSwitch.figma.d.ts.map +0 -1
  134. package/Form/ToggleSwitch.figma.js.map +0 -1
  135. /package/Form/{Checkbox.figma.d.ts → Checkbox/Checkbox.figma.d.ts} +0 -0
  136. /package/Form/{Radio.figma.d.ts → Radio/Radio.figma.d.ts} +0 -0
  137. /package/Form/{Radio.figma.js → Radio/Radio.figma.js} +0 -0
  138. /package/Form/{Radio.figma.mjs → Radio/Radio.figma.mjs} +0 -0
  139. /package/Form/{ToggleSwitch.figma.d.ts → ToggleSwitch/ToggleSwitch.figma.d.ts} +0 -0
  140. /package/Form/{ToggleSwitch.figma.js → ToggleSwitch/ToggleSwitch.figma.js} +0 -0
  141. /package/Form/{ToggleSwitch.figma.mjs → ToggleSwitch/ToggleSwitch.figma.mjs} +0 -0
@@ -1,27 +1,2 @@
1
- import React, { ReactNode } from 'react';
2
- type Size = 'large' | 'medium' | 'small';
3
- type Type = 'sheet' | 'popup';
4
- interface SemiModalProps extends Omit<React.DialogHTMLAttributes<HTMLElement>, 'className'> {
5
- children?: React.ReactNode;
6
- type?: Type;
7
- size?: Size;
8
- onCancel?: (event: React.BaseSyntheticEvent) => void;
9
- onClose?: (event: React.BaseSyntheticEvent) => void;
10
- }
11
- export declare const SemiModal: {
12
- Frame: React.ForwardRefExoticComponent<SemiModalProps & React.RefAttributes<HTMLDialogElement>>;
13
- Header: ({ children, ...rest }: React.ComponentProps<"header"> & {
14
- children: ReactNode;
15
- }) => React.JSX.Element;
16
- HeaderTitle: ({ children, ...rest }: React.ComponentProps<"p">) => React.JSX.Element;
17
- Contents: ({ children, ...rest }: React.ComponentProps<"div"> & {
18
- children: ReactNode;
19
- }) => React.JSX.Element;
20
- Footer: ({ children, ...rest }: React.ComponentProps<"div">) => React.JSX.Element;
21
- StyleOnly: ({ className, children, size, type, ...rest }: React.ComponentProps<"div"> & {
22
- size?: Size;
23
- type?: Type;
24
- }) => React.JSX.Element;
25
- };
26
- export {};
1
+ export { SemiModal } from './SemiModal/SemiModal';
27
2
  //# sourceMappingURL=SemiModal.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAqB,MAAM,OAAO,CAAC;AAKxE,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9B,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AA8ID,eAAO,MAAM,SAAS;;oCAvEnB,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;yCAiBf,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;sCAWlE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;oCAQjB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;8DAc/D,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;CA4B5D,CAAC"}
1
+ {"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC"}
@@ -1,145 +1,8 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
- if (k2 === undefined) k2 = k;
15
- var desc = Object.getOwnPropertyDescriptor(m, k);
16
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
- desc = { enumerable: true, get: function() { return m[k]; } };
18
- }
19
- Object.defineProperty(o, k2, desc);
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
- Object.defineProperty(o, "default", { enumerable: true, value: v });
26
- }) : function(o, v) {
27
- o["default"] = v;
28
- });
29
- var __importStar = (this && this.__importStar) || (function () {
30
- var ownKeys = function(o) {
31
- ownKeys = Object.getOwnPropertyNames || function (o) {
32
- var ar = [];
33
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
- return ar;
35
- };
36
- return ownKeys(o);
37
- };
38
- return function (mod) {
39
- if (mod && mod.__esModule) return mod;
40
- var result = {};
41
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
- __setModuleDefault(result, mod);
43
- return result;
44
- };
45
- })();
46
- var __rest = (this && this.__rest) || function (s, e) {
47
- var t = {};
48
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
49
- t[p] = s[p];
50
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
51
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
52
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
53
- t[p[i]] = s[p[i]];
54
- }
55
- return t;
56
- };
57
- var __importDefault = (this && this.__importDefault) || function (mod) {
58
- return (mod && mod.__esModule) ? mod : { "default": mod };
59
- };
60
2
  Object.defineProperty(exports, "__esModule", { value: true });
61
3
  exports.SemiModal = void 0;
62
- var react_1 = __importStar(require("react"));
63
- var use_callback_ref_1 = require("use-callback-ref");
64
- var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
65
- var IconButton_1 = require("../IconButton");
66
- var BLOCK_NAME = 'spui-SemiModal';
67
- var Frame = (0, react_1.forwardRef)(function SemiModal(_a, ref) {
68
- var children = _a.children, open = _a.open, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.type, type = _c === void 0 ? 'popup' : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "open", "size", "type", "onClose"]);
69
- var dialogEl = (0, react_1.useRef)(null);
70
- // 閉じるアイコンを押した時
71
- var handleFormSubmit = function (event) {
72
- event.preventDefault(); // To be closed with the open prop
73
- onClose === null || onClose === void 0 ? void 0 : onClose(event);
74
- };
75
- // backdropを押した時
76
- var handleDialogClick = function (event) {
77
- // Detect backdrop click
78
- if (event.target === dialogEl.current) {
79
- onClose === null || onClose === void 0 ? void 0 : onClose(event);
80
- }
81
- };
82
- //EscKeyを押したとき
83
- var handleDialogClose = function (event) {
84
- // Detect escape key type
85
- if (event.target === dialogEl.current) {
86
- onClose === null || onClose === void 0 ? void 0 : onClose(event);
87
- }
88
- };
89
- (0, react_1.useEffect)(function () {
90
- var _a, _b, _c, _d;
91
- if (!dialogEl.current) {
92
- return;
93
- }
94
- if (open) {
95
- (_b = (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.showModal) === null || _b === void 0 ? void 0 : _b.call(_a);
96
- }
97
- else {
98
- (_d = (_c = dialogEl.current) === null || _c === void 0 ? void 0 : _c.close) === null || _d === void 0 ? void 0 : _d.call(_c);
99
- }
100
- }, [open, dialogEl]);
101
- return (react_1.default.createElement("dialog", __assign({ role: "dialog", className: BLOCK_NAME, ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size }, rest),
102
- react_1.default.createElement("form", { className: "".concat(BLOCK_NAME, "-frame"), method: "dialog", onSubmit: handleFormSubmit }, children)));
103
- });
104
- var Header = function (_a) {
105
- var children = _a.children, rest = __rest(_a, ["children"]);
106
- return (react_1.default.createElement("header", __assign({ role: "heading", className: "".concat(BLOCK_NAME, "-header") }, rest),
107
- children,
108
- react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeIconButton") },
109
- react_1.default.createElement(IconButton_1.IconButton, { style: { width: '100%', height: '100%' }, "aria-label": "\u9589\u3058\u308B", variant: "neutral" },
110
- react_1.default.createElement(CrossBold_1.default, { "aria-hidden": "true", className: "".concat(BLOCK_NAME, "-closeIcon") })))));
111
- };
112
- var HeaderTitle = function (_a) {
113
- var children = _a.children, rest = __rest(_a, ["children"]);
114
- return (react_1.default.createElement("p", __assign({ className: "".concat(BLOCK_NAME, "-headerTitle") }, rest), children));
115
- };
116
- var Contents = function (_a) {
117
- var children = _a.children, rest = __rest(_a, ["children"]);
118
- return (react_1.default.createElement("div", __assign({ className: "".concat(BLOCK_NAME, "-contents") }, rest), children));
119
- };
120
- var Footer = function (_a) {
121
- var children = _a.children, rest = __rest(_a, ["children"]);
122
- return (react_1.default.createElement("div", __assign({ className: "".concat(BLOCK_NAME, "-footer") }, rest), children));
123
- };
124
- var StyleOnly = function (_a) {
125
- var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.type, type = _c === void 0 ? 'popup' : _c, rest = __rest(_a, ["className", "children", "size", "type"]);
126
- return (react_1.default.createElement("div", __assign({ className: [
127
- BLOCK_NAME,
128
- "".concat(BLOCK_NAME, "--styleOnly"),
129
- "".concat(BLOCK_NAME, "--").concat(size),
130
- className,
131
- ]
132
- .filter(Boolean)
133
- .join(' ')
134
- .trim() }, rest, { "data-type": type, "data-size": size }),
135
- react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-frame") }, children)));
136
- };
137
- exports.SemiModal = {
138
- Frame: Frame,
139
- Header: Header,
140
- HeaderTitle: HeaderTitle,
141
- Contents: Contents,
142
- Footer: Footer,
143
- StyleOnly: StyleOnly,
144
- };
4
+ // Re-export for backward compatibility after directory structure refactoring
5
+ // TODO: Remove this file in a future major version
6
+ var SemiModal_1 = require("./SemiModal/SemiModal");
7
+ Object.defineProperty(exports, "SemiModal", { enumerable: true, get: function () { return SemiModal_1.SemiModal; } });
145
8
  //# sourceMappingURL=SemiModal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":";;;AAAA,6EAA6E;AAC7E,mDAAmD;AACnD,mDAAkD;AAAzC,sGAAA,SAAS,OAAA"}
@@ -1,76 +1,3 @@
1
- import React, { forwardRef, useEffect, useRef } from 'react';
2
- import { useMergeRefs } from 'use-callback-ref';
3
- import CrossBold from "../Icon/CrossBold.mjs";
4
- import { IconButton } from "../IconButton/index.mjs";
5
- const BLOCK_NAME = 'spui-SemiModal';
6
- const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', type = 'popup', onClose, ...rest }, ref) {
7
- const dialogEl = useRef(null);
8
- // 閉じるアイコンを押した時
9
- const handleFormSubmit = (event) => {
10
- event.preventDefault(); // To be closed with the open prop
11
- onClose?.(event);
12
- };
13
- // backdropを押した時
14
- const handleDialogClick = (event) => {
15
- // Detect backdrop click
16
- if (event.target === dialogEl.current) {
17
- onClose?.(event);
18
- }
19
- };
20
- //EscKeyを押したとき
21
- const handleDialogClose = (event) => {
22
- // Detect escape key type
23
- if (event.target === dialogEl.current) {
24
- onClose?.(event);
25
- }
26
- };
27
- useEffect(() => {
28
- if (!dialogEl.current) {
29
- return;
30
- }
31
- if (open) {
32
- dialogEl.current?.showModal?.();
33
- }
34
- else {
35
- dialogEl.current?.close?.();
36
- }
37
- }, [open, dialogEl]);
38
- return (React.createElement("dialog", { role: "dialog", className: BLOCK_NAME, ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
39
- React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit }, children)));
40
- });
41
- const Header = ({ children, ...rest }) => {
42
- return (React.createElement("header", { role: "heading", className: `${BLOCK_NAME}-header`, ...rest },
43
- children,
44
- React.createElement("div", { className: `${BLOCK_NAME}-closeIconButton` },
45
- React.createElement(IconButton, { style: { width: '100%', height: '100%' }, "aria-label": "\u9589\u3058\u308B", variant: "neutral" },
46
- React.createElement(CrossBold, { "aria-hidden": "true", className: `${BLOCK_NAME}-closeIcon` })))));
47
- };
48
- const HeaderTitle = ({ children, ...rest }) => {
49
- return (React.createElement("p", { className: `${BLOCK_NAME}-headerTitle`, ...rest }, children));
50
- };
51
- const Contents = ({ children, ...rest }) => {
52
- return (React.createElement("div", { className: `${BLOCK_NAME}-contents`, ...rest }, children));
53
- };
54
- const Footer = ({ children, ...rest }) => {
55
- return (React.createElement("div", { className: `${BLOCK_NAME}-footer`, ...rest }, children));
56
- };
57
- const StyleOnly = ({ className, children, size = 'medium', type = 'popup', ...rest }) => {
58
- return (React.createElement("div", { className: [
59
- BLOCK_NAME,
60
- `${BLOCK_NAME}--styleOnly`,
61
- `${BLOCK_NAME}--${size}`,
62
- className,
63
- ]
64
- .filter(Boolean)
65
- .join(' ')
66
- .trim(), ...rest, "data-type": type, "data-size": size },
67
- React.createElement("div", { className: `${BLOCK_NAME}-frame` }, children)));
68
- };
69
- export const SemiModal = {
70
- Frame,
71
- Header,
72
- HeaderTitle,
73
- Contents,
74
- Footer,
75
- StyleOnly,
76
- };
1
+ // Re-export for backward compatibility after directory structure refactoring
2
+ // TODO: Remove this file in a future major version
3
+ export { SemiModal } from "./SemiModal/SemiModal.mjs";
package/index.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --color-active-lighted-button
11
11
  );--Button--lighted-onHover-backgroundColor:var(--color-hover-lighted-button);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(
12
12
  --color-active-neutral-button
13
- );--Button--neutral-onHover-backgroundColor:var(--color-hover-neutral-button);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--color-active-danger-button);--Button--danger-onHover-backgroundColor:var(--color-hover-danger-button)}.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{outline:2px solid var(--Button-onFocus-outlineColor);outline-offset:1px}.spui-Button:focus:not(:focus-visible){outline:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding:8px 16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding:8px 16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding:6px 10px}.spui-Button--small:is(.spui-Button--outlined,.spui-Button--danger){padding-bottom:5px;padding-top:5px}@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)}.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)}.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)}.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)}.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)}.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--iconstart .spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button--iconstart .spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button--iconstart .spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-Button--iconend{flex-direction:row-reverse}.spui-Button--iconend .spui-Button-icon--large{font-size:1.125em;margin-left:6px}.spui-Button--iconend .spui-Button-icon--medium{font-size:1.143em;margin-left:4px}.spui-Button--iconend .spui-Button-icon--small{font-size:1.077em;margin-left:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);opacity:0;padding:24px;position:fixed;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1);width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8);opacity:0;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1)}.spui-Dialog[open]{opacity:1}.spui-Dialog[open]::backdrop{opacity:1}@starting-style{.spui-Dialog[open]{opacity:0}.spui-Dialog[open]::backdrop{opacity:0}}.spui-Dialog:not([open]),.spui-Dialog:not([open])::backdrop{transition-duration:.15s}@media (prefers-reduced-motion:reduce){.spui-Dialog,.spui-Dialog::backdrop{transition-duration:1ms}}html:has(.spui-Dialog:modal){overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}.spui-Dialog--styleOnly{opacity:1;position:static}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}:root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual,.spui-DropDown-label:user-invalid .spui-DropDown-icon,.spui-DropDown-label:user-invalid .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}:root{--Radio-backGroundColor:var(--color-surface-primary)}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-label:focus-within:has(.spui-Radio-text:not(:empty)){box-shadow:0 0 0 2px var(--Radio-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Radio-label:focus-within:has(.spui-Radio-input:not(:focus-visible)){box-shadow:none}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;flex-shrink:0;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;height:24px;inset:-2px;position:absolute;width:24px}.spui-Radio-label:has(:not(.spui-Radio-text)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-label:has(.spui-Radio-text):has(:not(.spui-Radio-text:empty)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error,.spui-TextArea:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error,.spui-TextField:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;inset:-2px;position:absolute}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}.spui-ButtonSwitch{align-items:stretch;display:flex;flex-direction:row}.spui-ButtonSwitch-button{align-items:center;background-color:var(--color-surface-tertiary);border:none;border-radius:0;color:var(--color-text-medium-emphasis);display:inline-flex;flex:1;font-size:.8125em;gap:4px;justify-content:center;line-height:1.3;padding:8px 4px;position:relative;text-align:center;text-decoration:none;transition:font-weight .35s ease,color .35s ease,background-color .15s ease;white-space:nowrap}.spui-ButtonSwitch-button:hover{background-color:var(--color-hover-neutral-button)}.spui-ButtonSwitch-button[aria-pressed=true]{background-color:var(--color-surface-accent-primary);font-weight:700}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-icon{color:var(--color-object-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-label{color:var(--color-text-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true]:hover{background-color:var(--color-hover-contained-button)}.spui-ButtonSwitch-button:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:2px}.spui-ButtonSwitch-button:first-child{border-bottom-left-radius:6px;border-top-left-radius:6px}.spui-ButtonSwitch-button:last-child{border-bottom-right-radius:6px;border-top-right-radius:6px}.spui-ButtonSwitch-button+.spui-ButtonSwitch-button:after{background-color:var(--color-border-low-emphasis);content:"";height:100%;left:-.5px;position:absolute;top:0;width:1px}.spui-ButtonSwitch-icon{flex-shrink:0}.spui-ButtonSwitch-label{margin:0;white-space:break-spaces}.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{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarouselItem-link:focus:not(:focus-visible){outline: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}}.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{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarousel-control:focus:not(:focus-visible){outline: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{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
13
+ );--Button--neutral-onHover-backgroundColor:var(--color-hover-neutral-button);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--color-active-danger-button);--Button--danger-onHover-backgroundColor:var(--color-hover-danger-button)}.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{outline:2px solid var(--Button-onFocus-outlineColor);outline-offset:1px}.spui-Button:focus:not(:focus-visible){outline:none}.spui-Button--fullWidth{width:100%}.spui-Button--large{border-radius:3em;font-size:1em;min-height:48px;padding:8px 16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding:8px 16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding:6px 10px}.spui-Button--small:is(.spui-Button--outlined,.spui-Button--danger){padding-bottom:5px;padding-top:5px}@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)}.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)}.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)}.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)}.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)}.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--iconstart .spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button--iconstart .spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button--iconstart .spui-Button-icon--small{font-size:1.23em;margin-right:2px}.spui-Button--iconend{flex-direction:row-reverse}.spui-Button--iconend .spui-Button-icon--large{font-size:1.125em;margin-left:6px}.spui-Button--iconend .spui-Button-icon--medium{font-size:1.143em;margin-left:4px}.spui-Button--iconend .spui-Button-icon--small{font-size:1.077em;margin-left:2px}.spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}.spui-Dialog{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);color:var(--color-text-medium-emphasis);opacity:0;padding:24px;position:fixed;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1);width:352px}@media screen and (max-width:472px){.spui-Dialog{width:calc(100% - 120px)}}.spui-Dialog::backdrop{background:rgba(0,0,0,.8);opacity:0;transition:display allow-discrete .35s,overlay allow-discrete .35s,opacity .35s cubic-bezier(0,0,0,1)}.spui-Dialog[open]{opacity:1}.spui-Dialog[open]::backdrop{opacity:1}@starting-style{.spui-Dialog[open]{opacity:0}.spui-Dialog[open]::backdrop{opacity:0}}.spui-Dialog:not([open]),.spui-Dialog:not([open])::backdrop{transition-duration:.15s}@media (prefers-reduced-motion:reduce){.spui-Dialog,.spui-Dialog::backdrop{transition-duration:1ms}}html:has(.spui-Dialog:modal){overflow:hidden}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-primary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-Dialog :is(.spui-Button,.spui-LinkButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-Dialog-title{color:var(--color-text-high-emphasis);font-size:1.25em;font-weight:700;line-height:1.4;margin:0;padding:0;text-align:center}.spui-Dialog-body{color:var(--color-text-medium-emphasis);font-size:.875em;line-height:1.6;margin:16px 0 0;overflow-wrap:break-word;text-align:center}.spui-Dialog-buttonGroup{align-items:center;justify-content:center;margin:32px 0 0;text-align:center}.spui-Dialog-buttonGroup :is(.spui-Button,.spui-SubtleButton){max-width:240px}.spui-Dialog--styleOnly{opacity:1;position:static}@media screen and (min-width:768px){.spui-Dialog{padding:36px;width:328px}}:root{--Checkbox-backGroundColor:var(--color-surface-primary)}.spui-Checkbox-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-text:not(:empty)){box-shadow:0 0 0 2px var(--Checkbox-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Checkbox-label:focus-within:has(.spui-Checkbox-input:not(:focus-visible)){box-shadow:none}.spui-Checkbox-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Checkbox-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:4px;box-sizing:border-box;color:transparent;display:inline-flex;font-size:.875em;height:18px;justify-content:center;width:18px}.spui-Checkbox-label--inverse .spui-Checkbox-icon{border:1px solid var(--color-border-low-emphasis-inverse)}.spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Checkbox-input:disabled+.spui-Checkbox-icon{opacity:.3}.spui-Checkbox-label--inverse .spui-Checkbox-input:checked+.spui-Checkbox-icon{background-color:var(--color-surface-primary);border:1px solid var(--color-surface-primary);color:var(--color-object-accent-primary)}.spui-Checkbox-outline{border-radius:2px;height:22px;inset:-2px;position:absolute;width:22px}.spui-Checkbox-label:has(:not(.spui-Checkbox-text)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Checkbox-label:has(.spui-Checkbox-text):has(:not(.spui-Checkbox-text:empty)) .spui-Checkbox-input:focus-visible~.spui-Checkbox-outline{box-shadow:none}.spui-Checkbox-text:not(:empty){margin-left:8px}.spui-Checkbox-input:checked~.spui-Checkbox-text{color:var(--color-object-accent-primary)}.spui-Checkbox-input:disabled~.spui-Checkbox-text{color:var(--color-text-disabled)}.spui-DropDown-label{display:inline-block;position:relative}.spui-DropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;opacity:0;outline:none}.spui-DropDown-select,.spui-DropDown-visual{box-sizing:border-box;font-size:1em;min-height:40px;padding:.5em calc(40px + 1em) .5em 1em}.spui-DropDown-visual{align-items:center;background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;color:var(--color-text-disabled);display:flex;height:100%;left:0;position:absolute;top:0;width:100%}.spui-DropDown-label.is-active .spui-DropDown-visual{color:var(--color-text-high-emphasis)}.spui-DropDown-icon{align-items:center;background-color:var(--color-surface-secondary);border:1px solid var(--color-border-medium-emphasis);border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-low-emphasis);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:40px}.spui-DropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-DropDown-select:focus~.spui-DropDown-outline{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-DropDown-select:focus:not(:focus-visible)~.spui-DropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-DropDown-label.is-error .spui-DropDown-icon,.spui-DropDown-label.is-error .spui-DropDown-visual,.spui-DropDown-label:user-invalid .spui-DropDown-icon,.spui-DropDown-label:user-invalid .spui-DropDown-visual{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-InlineDropDown-label{display:inline-block;position:relative}.spui-InlineDropDown-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;font-size:1em;margin:0;opacity:0;outline:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select--medium{min-height:40px}.spui-InlineDropDown-select--small{min-height:32px}.spui-InlineDropDown-text,.spui-InlineDropDown-visual{border-radius:8px;display:flex}.spui-InlineDropDown-text{align-items:center;box-sizing:border-box;color:var(--color-text-medium-emphasis);font-weight:700;height:100%;left:0;padding:.5em 0}.spui-InlineDropDown-text--medium{font-size:.875em;min-height:40px}.spui-InlineDropDown-text--small{font-size:.8125em;min-height:32px}.spui-InlineDropDown-icon{align-items:center;background-color:transparent;border-bottom-right-radius:8px;border-top-right-radius:8px;box-sizing:border-box;color:var(--color-object-medium-emphasis);display:flex;justify-content:center;margin-left:4px}.spui-InlineDropDown-icon--medium{font-size:.875em}.spui-InlineDropDown-icon--small{font-size:.8125em}.spui-InlineDropDown-outline{border-radius:8px;display:inline-block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.spui-InlineDropDown-select:focus~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-InlineDropDown-select:focus:not(:focus-visible)~.spui-InlineDropDown-outline{border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-InputLabel{color:var(--color-text-medium-emphasis);display:block;font-size:.875em;font-weight:700;line-height:1.4}.spui-InputLabel:empty{display:none}.spui-InvalidMessage{color:var(--color-text-caution);display:flex;font-size:.75em;font-weight:700;line-height:1.4;margin:8px 0 0;min-height:1.1em;transition:height .3s}.spui-InvalidMessage[hidden]{display:none}.spui-InvalidMessage-icon{font-size:1.33em;line-height:1;margin-right:.25em}.spui-InvalidMessage-body{position:relative;top:1px}:root{--Radio-backGroundColor:var(--color-surface-primary)}.spui-Radio-label{align-items:center;border-radius:2px;color:var(--color-text-low-emphasis);display:inline-flex;font-size:1em;font-weight:700;line-height:1;position:relative}.spui-Radio-label:focus-within:has(.spui-Radio-text:not(:empty)){box-shadow:0 0 0 2px var(--Radio-backGroundColor),0 0 0 4px var(--color-focus-clarity)}.spui-Radio-label:focus-within:has(.spui-Radio-input:not(:focus-visible)){box-shadow:none}.spui-Radio-input{clip:rect(1px,1px,1px,1px);height:1px;margin-top:0;overflow:hidden;position:absolute;width:1px}.spui-Radio-icon{align-items:center;border:1px solid var(--color-border-medium-emphasis);border-radius:50%;box-sizing:border-box;color:transparent;display:inline-flex;flex-shrink:0;font-size:.875em;height:20px;justify-content:center;vertical-align:top;width:20px}.spui-Radio-input:checked+.spui-Radio-icon{background-color:var(--color-object-accent-primary);border:1px solid var(--color-object-accent-primary);color:var(--color-text-high-emphasis-inverse)}.spui-Radio-input:disabled+.spui-Radio-icon{opacity:.3}.spui-Radio-outline{border-radius:50%;height:24px;inset:-2px;position:absolute;width:24px}.spui-Radio-label:has(:not(.spui-Radio-text)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-Radio-label:has(.spui-Radio-text):has(:not(.spui-Radio-text:empty)) .spui-Radio-input:focus-visible~.spui-Radio-outline{box-shadow:none}.spui-Radio-text:not(:empty){margin-left:8px}.spui-Radio-input:checked~.spui-Radio-text{color:var(--color-object-accent-primary)}.spui-Radio-input:disabled~.spui-Radio-text{color:var(--color-text-disabled)}.spui-TextArea{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;line-height:1.4;margin:0;min-height:92px;outline:none;padding:12px 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextArea{transition:box-shadow .1ms}}.spui-TextArea::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextArea::placeholder{color:var(--color-text-disabled)}.spui-TextArea:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextArea:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextArea.is-error,.spui-TextArea:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField{background-color:var(--color-surface-primary);border:1px solid var(--color-border-medium-emphasis);border-radius:8px;box-sizing:border-box;color:var(--color-text-high-emphasis);font-size:1em;margin:0;outline:none;padding:0 16px;transition:box-shadow .3s;width:100%}@media (prefers-reduced-motion:reduce){.spui-TextField{transition:box-shadow .1ms}}.spui-TextField::-moz-placeholder{color:var(--color-text-disabled)}.spui-TextField::placeholder{color:var(--color-text-disabled)}.spui-TextField:focus{border-color:var(--color-border-high-emphasis);box-shadow:0 0 0 3px var(--color-focus-ambiguous)}.spui-TextField:focus:not(:focus-visible){border-color:var(--color-border-medium-emphasis);box-shadow:none}.spui-TextField.is-error,.spui-TextField:user-invalid{background-color:var(--color-surface-caution-light);border-color:var(--color-border-caution)}.spui-TextField--large{min-height:48px}.spui-TextField--medium{min-height:40px}.spui-ToggleSwitch{display:inline-block;height:32px;position:relative;width:52px}.spui-ToggleSwitch-input{opacity:0;outline:none}.spui-ToggleSwitch-input:disabled~.spui-ToggleSwitch-visual{opacity:.3}.spui-ToggleSwitch-visual{background-color:var(--color-surface-quaternary);border-radius:16px;box-sizing:border-box;display:inline-block;height:100%;left:0;position:absolute;top:0;width:100%}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual{background-color:var(--color-surface-accent-primary)}.spui-ToggleSwitch-visual:before{background-color:var(--color-object-high-emphasis-inverse);border:1px solid var(--color-border-low-emphasis);border-radius:100%;box-sizing:border-box;content:"";display:inline-block;height:24px;left:4px;position:absolute;top:4px;transition:transform .3s ease-out;width:24px}.spui-ToggleSwitch-input:checked~.spui-ToggleSwitch-visual:before{transform:translate(20px)}.spui-ToggleSwitch-outline{border-radius:16px;inset:-2px;position:absolute}.spui-ToggleSwitch-input:focus~.spui-ToggleSwitch-outline{box-shadow:0 0 0 2px var(--color-focus-clarity)}.spui-ToggleSwitch-input:focus:not(:focus-visible)~.spui-ToggleSwitch-outline{box-shadow:none}.spui-ButtonSwitch{align-items:stretch;display:flex;flex-direction:row}.spui-ButtonSwitch-button{align-items:center;background-color:var(--color-surface-tertiary);border:none;border-radius:0;color:var(--color-text-medium-emphasis);display:inline-flex;flex:1;font-size:.8125em;gap:4px;justify-content:center;line-height:1.3;padding:8px 4px;position:relative;text-align:center;text-decoration:none;transition:font-weight .35s ease,color .35s ease,background-color .15s ease;white-space:nowrap}.spui-ButtonSwitch-button:hover{background-color:var(--color-hover-neutral-button)}.spui-ButtonSwitch-button[aria-pressed=true]{background-color:var(--color-surface-accent-primary);font-weight:700}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-icon{color:var(--color-object-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true] .spui-ButtonSwitch-label{color:var(--color-text-high-emphasis-inverse)}.spui-ButtonSwitch-button[aria-pressed=true]:hover{background-color:var(--color-hover-contained-button)}.spui-ButtonSwitch-button:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:2px}.spui-ButtonSwitch-button:first-child{border-bottom-left-radius:6px;border-top-left-radius:6px}.spui-ButtonSwitch-button:last-child{border-bottom-right-radius:6px;border-top-right-radius:6px}.spui-ButtonSwitch-button+.spui-ButtonSwitch-button:after{background-color:var(--color-border-low-emphasis);content:"";height:100%;left:-.5px;position:absolute;top:0;width:1px}.spui-ButtonSwitch-icon{flex-shrink:0}.spui-ButtonSwitch-label{margin:0;white-space:break-spaces}.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{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarouselItem-link:focus:not(:focus-visible){outline: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}}.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{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-HeroCarousel-control:focus:not(:focus-visible){outline: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{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
14
14
  --color-surface-accent-primary-light
15
15
  );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--LinkButton-tapHighlightColor:var(--gray-5-alpha);--LinkButton-onFocus-outlineColor:var(--color-focus-clarity);--LinkButton--contained-backgroundColor:var(--color-surface-accent-primary);--LinkButton--contained-color:var(--color-text-high-emphasis-inverse);--LinkButton--contained-onActive-backgroundColor:var(--primary-green-100);--LinkButton--contained-onHover-backgroundColor:var(--primary-green-100);--LinkButton--outlined-borderColor:var(--color-border-accent-primary);--LinkButton--outlined-color:var(--color-text-accent-primary);--LinkButton--outlined-onActive-backgroundColor:var(--primary-green-5);--LinkButton--outlined-onHover-backgroundColor:var(--primary-green-5);--LinkButton--lighted-backgroundColor:var(
16
16
  --color-surface-accent-primary-light
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openameba/spindle-ui",
3
- "version": "2.9.1",
3
+ "version": "2.11.0",
4
4
  "main": "./index.js",
5
5
  "module": "./index.mjs",
6
6
  "types": "./index.d.ts",
@@ -60,7 +60,7 @@
60
60
  }
61
61
  },
62
62
  "dependencies": {
63
- "@openameba/spindle-hooks": "^1.7.1",
63
+ "@openameba/spindle-hooks": "^1.9.0",
64
64
  "ameba-color-palette.css": "^4.17.0",
65
65
  "use-callback-ref": "^1.3.3"
66
66
  },
@@ -79,14 +79,14 @@
79
79
  "@testing-library/react": "16.3.0",
80
80
  "@testing-library/user-event": "14.6.1",
81
81
  "@types/jest": "30.0.0",
82
- "@types/react": "18.3.25",
82
+ "@types/react": "18.3.26",
83
83
  "autoprefixer": "10.4.21",
84
84
  "bundlewatch": "0.4.1",
85
85
  "cssnano": "7.1.1",
86
86
  "dialog-polyfill": "0.5.6",
87
87
  "dotenv": "17.2.3",
88
88
  "figma-api": "1.12.0",
89
- "firebase-tools": "14.18.0",
89
+ "firebase-tools": "14.19.1",
90
90
  "jest": "30.2.0",
91
91
  "jest-environment-jsdom": "30.2.0",
92
92
  "postcss": "8.5.6",
@@ -107,5 +107,5 @@
107
107
  "stylelint-prettier": "^5.0.0",
108
108
  "stylelint-selector-bem-pattern": "^4.0.0"
109
109
  },
110
- "gitHead": "e12ad11c5d9f3279c954982b28c2b21aa0809589"
110
+ "gitHead": "538456800c20b6b1f5cc7e4ee02f7022107a19ae"
111
111
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.figma.d.ts","sourceRoot":"","sources":["../../src/Form/Checkbox.figma.tsx"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.figma.js","sourceRoot":"","sources":["../../src/Form/Checkbox.figma.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,uCAAsC;AACtC,qEAAwC;AAExC,sBAAK,CAAC,OAAO,CACX,mBAAQ,EACR,uGAAuG,EACvG;IACE,OAAO,EAAE;QACP,wDAAwD;QACxD,mDAAmD;KACpD;IACD,KAAK,EAAE;QACL,MAAM,EAAE,sBAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC/B,KAAK,EAAE,sBAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QAClC,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,sBAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1B,EAAE,EAAE,sBAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACtB,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,UAAC,EAAkC;YAAhC,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,EAAE,QAAA,EAAE,KAAK,WAAA;QAAO,OAAA,CAC/C,8BAAC,mBAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,gBACA,KAAK,EACjB,OAAO,EAAE,MAAM,GACL,CACb;IARgD,CAQhD;CACF,CACF,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Radio.figma.d.ts","sourceRoot":"","sources":["../../src/Form/Radio.figma.tsx"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Radio.figma.js","sourceRoot":"","sources":["../../src/Form/Radio.figma.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,iCAAgC;AAChC,qEAAwC;AAExC,sBAAK,CAAC,OAAO,CACX,aAAK,EACL,uGAAuG,EACvG;IACE,OAAO,EAAE;QACP,qDAAqD;QACrD,gDAAgD;KACjD;IACD,KAAK,EAAE;QACL,MAAM,EAAE,sBAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC/B,KAAK,EAAE,sBAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QAClC,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,sBAAK,CAAC,MAAM,CAAC,MAAM,CAAC;QAC1B,EAAE,EAAE,sBAAK,CAAC,MAAM,CAAC,IAAI,CAAC;KACvB;IACD,OAAO,EAAE,UAAC,EAA2B;YAAzB,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,EAAE,QAAA;QAAO,OAAA,CACxC,8BAAC,aAAK,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,gBAAc,KAAK,EAAE,OAAO,EAAE,MAAM,GAAU,CACxE;IAFyC,CAEzC;CACF,CACF,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggleSwitch.figma.d.ts","sourceRoot":"","sources":["../../src/Form/ToggleSwitch.figma.tsx"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ToggleSwitch.figma.js","sourceRoot":"","sources":["../../src/Form/ToggleSwitch.figma.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,+CAA8C;AAC9C,qEAAwC;AAExC,sBAAK,CAAC,OAAO,CACX,2BAAY,EACZ,uGAAuG,EACvG;IACE,OAAO,EAAE;QACP,4DAA4D;QAC5D,uDAAuD;KACxD;IACD,KAAK,EAAE;QACL,MAAM,EAAE,sBAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC/B,EAAE,EAAE,sBAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACtB,KAAK,EAAE,sBAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KAC7B;IACD,OAAO,EAAE,UAAC,EAAqB;YAAnB,MAAM,YAAA,EAAE,EAAE,QAAA,EAAE,KAAK,WAAA;QAAO,OAAA,CAClC,8BAAC,2BAAY,IAAC,EAAE,EAAE,EAAE,gBAAc,KAAK,EAAE,OAAO,EAAE,MAAM,GAAiB,CAC1E;IAFmC,CAEnC;CACF,CACF,CAAC"}
File without changes
File without changes