@openameba/spindle-ui 0.58.4 → 0.58.6

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 (17) hide show
  1. package/.scaffdog/component.md +0 -2
  2. package/CHANGELOG.md +12 -0
  3. package/CONTRIBUTING.md +2 -3
  4. package/Dialog/DialogExample.d.ts.map +1 -1
  5. package/Dialog/DialogExample.js +2 -2
  6. package/Dialog/DialogExample.js.map +1 -1
  7. package/Dialog/DialogExample.mjs +2 -2
  8. package/InlineNotification/InlineNotification.css +1 -1
  9. package/InlineNotification/InlineNotification.d.ts +1 -1
  10. package/InlineNotification/InlineNotification.d.ts.map +1 -1
  11. package/InlineNotification/InlineNotification.js +3 -3
  12. package/InlineNotification/InlineNotification.js.map +1 -1
  13. package/InlineNotification/InlineNotification.mjs +2 -2
  14. package/Modal/AppealModal.js +1 -1
  15. package/Modal/AppealModal.mjs +1 -1
  16. package/README.md +2 -8
  17. package/package.json +2 -2
package/.scaffdog/component.md CHANGED
@@ -45,8 +45,6 @@ import { {{ inputs.name | pascal }} } from ‘./{{ inputs.name | pascal }}‘;
45
45
 
46
46
  <Meta title=“{{ inputs.name | pascal }}” component={ {{ inputs.name | pascal }} } />
47
47
 
48
- ![stability-wip](https://img.shields.io/badge/stability-work_in_progress-lightgrey.svg)
49
-
50
48
  <Source
51
49
  language=‘javascript’
52
50
  code={`import { {{ inputs.name | pascal }} } from ‘@openameba/spindle-ui’`}
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.58.6](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.58.5...@openameba/spindle-ui@0.58.6) (2023-03-31)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **spindle-ui:** import components related to InlineNotification ([39f8896](https://github.com/openameba/spindle/commit/39f88961f1c82f499ebe7a62b39edde9836dbfd2))
11
+
12
+ ## [0.58.5](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.58.4...@openameba/spindle-ui@0.58.5) (2023-03-09)
13
+
14
+ ### Bug Fixes
15
+
16
+ - **spindle-ui:** wider acceptance of props ([a82e7f5](https://github.com/openameba/spindle/commit/a82e7f5a4bd995b5c6bfce7eb35d42077716ad78))
17
+
6
18
  ## [0.58.4](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@0.58.3...@openameba/spindle-ui@0.58.4) (2023-03-03)
7
19
 
8
20
  ### Bug Fixes
package/CONTRIBUTING.md CHANGED
@@ -14,6 +14,5 @@ Amebaとして提供される成果物は、それらに則って開発される
14
14
  2. Design Docの作成。SpindleではコンポーネントごとにDesign Docを作成し、該当コンポーネントに関わる事柄を整理します。コンポーネント名・概要・使用するデザイントークン・アクセシビリティ対応項目などを記載します。Design Docの雛形はNotionにありますので確認してみてください。
15
15
  3. Design Docのレビュー。ある程度Design DocができあがったらSpindleチームやWebチームでレビューをします。この段階でのDesign Docはレビュー用途で使用するので完璧に仕上げる必要はありません！
16
16
  4. コンポーネント作成。コンポーネントに関する動作やスタイルを実装します。Storybookやテストの作成も忘れずお願いします！また、コンポーネント設計に困った場合には、すでに作成されているコンポーネントを見たり、[Spindle UIのDesign Doc](/packages/spindle-ui/docs/design-doc.md)を見たりしてみてください。
17
- 5. コンポーネントStabilityの決定。Spindle UIではコンポーネントごとにStabilityを決め、どうゆう利用が想定されているか明記しています。[定められたStability](/packages/spindle-ui#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E4%B8%80%E8%A6%A7)の中から選択肢、Storybookの冒頭に記載します。
18
- 6. Pull Requestの作成。ここまでできたら後はGitHub上でやりとりし、リリースまで進めます。Pull Requestやリリースに関しては[Contributing to Spindle](/CONTRIBUTING.md)を参照してください。
19
-
17
+ 5. Pull Requestの作成。ここまでできたら後はGitHub上でやりとりし、リリースまで進めます。Pull Requestやリリースに関しては[Contributing to Spindle](/CONTRIBUTING.md)を参照してください。
18
+ 6. コンポーネントがリリースされたら[Spindleサイトのコンポーネントステータス](https://spindle.ameba.design/components/status/)を更新します
package/Dialog/DialogExample.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogExample.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAMA,OAAO,0CAA0C,CAAC;AAUlD,wBAAgB,aAAa,gBAyC5B;AAED,wBAAgB,SAAS,gBAYxB;AAED,wBAAgB,SAAS,gBAexB;AAED,wBAAgB,YAAY,gBAe3B;AAED,wBAAgB,4BAA4B,gBAa3C"}
1
+ {"version":3,"file":"DialogExample.d.ts","sourceRoot":"","sources":["../../src/Dialog/DialogExample.tsx"],"names":[],"mappings":";AAMA,OAAO,0CAA0C,CAAC;AAUlD,wBAAgB,aAAa,gBA0C5B;AAED,wBAAgB,SAAS,gBAYxB;AAED,wBAAgB,SAAS,gBAexB;AAED,wBAAgB,YAAY,gBAe3B;AAED,wBAAgB,4BAA4B,gBAa3C"}
package/Dialog/DialogExample.js CHANGED
@@ -48,7 +48,7 @@ function DialogExample() {
48
48
  var handleDialogClose = function () { return setOpen(false); };
49
49
  useDialogpolyfill(dialogRef);
50
50
  return (react_1.default.createElement(react_1.default.Fragment, null,
51
- react_1.default.createElement(Button_1.Button, { "aria-haspopup": "true", onClick: handleOpenButtonClick, size: "medium" }, "Open Dialog"),
51
+ react_1.default.createElement(Button_1.Button, { "aria-haspopup": "true", onClick: handleOpenButtonClick, size: "medium", variant: "neutral" }, "\u958B\u304F"),
52
52
  react_1.default.createElement(Dialog_1.Dialog.Frame, { "aria-describedby": "dialog-description", "aria-labelledby": "dialog-title", ref: dialogRef, open: open, onCancel: handleDialogCancel, onClose: handleDialogClose },
53
53
  react_1.default.createElement(Dialog_1.Dialog.Title, { id: "dialog-title" }, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
54
54
  react_1.default.createElement(Dialog_1.Dialog.Body, { id: "dialog-description" }, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
@@ -88,7 +88,7 @@ function ButtonColumnWithSubtleButton() {
88
88
  react_1.default.createElement(Dialog_1.Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
89
89
  react_1.default.createElement(Dialog_1.Dialog.ButtonGroup, { direction: "column" },
90
90
  react_1.default.createElement(Button_1.Button, { layout: "fullWidth", size: "medium", type: "button" }, "Spindle\u3092\u30D5\u30A9\u30ED\u30FC\u3059\u308B"),
91
- react_1.default.createElement(SubtleButton_1.SubtleButton, { size: "medium" }, "\u9589\u3058\u308B"))));
91
+ react_1.default.createElement(SubtleButton_1.SubtleButton, { size: "medium" }, "\u3068\u3058\u308B"))));
92
92
  }
93
93
  exports.ButtonColumnWithSubtleButton = ButtonColumnWithSubtleButton;
94
94
  //# sourceMappingURL=DialogExample.js.map
package/Dialog/DialogExample.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../src/Dialog/DialogExample.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DialogExample.js","sourceRoot":"","sources":["../../src/Dialog/DialogExample.tsx"],"names":[],"mappings":"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"}
package/Dialog/DialogExample.mjs CHANGED
@@ -19,7 +19,7 @@ export function DialogExample() {
19
19
  const handleDialogClose = () => setOpen(false);
20
20
  useDialogpolyfill(dialogRef);
21
21
  return (React.createElement(React.Fragment, null,
22
- React.createElement(Button, { "aria-haspopup": "true", onClick: handleOpenButtonClick, size: "medium" }, "Open Dialog"),
22
+ React.createElement(Button, { "aria-haspopup": "true", onClick: handleOpenButtonClick, size: "medium", variant: "neutral" }, "\u958B\u304F"),
23
23
  React.createElement(Dialog.Frame, { "aria-describedby": "dialog-description", "aria-labelledby": "dialog-title", ref: dialogRef, open: open, onCancel: handleDialogCancel, onClose: handleDialogClose },
24
24
  React.createElement(Dialog.Title, { id: "dialog-title" }, "\u30BF\u30A4\u30C8\u30EB\u3067\u3059\u3088"),
25
25
  React.createElement(Dialog.Body, { id: "dialog-description" }, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
@@ -55,5 +55,5 @@ export function ButtonColumnWithSubtleButton() {
55
55
  React.createElement(Dialog.Body, null, "\u3053\u3053\u306B\u672C\u6587\u304C\u5165\u308A\u307E\u3059\u3088"),
56
56
  React.createElement(Dialog.ButtonGroup, { direction: "column" },
57
57
  React.createElement(Button, { layout: "fullWidth", size: "medium", type: "button" }, "Spindle\u3092\u30D5\u30A9\u30ED\u30FC\u3059\u308B"),
58
- React.createElement(SubtleButton, { size: "medium" }, "\u9589\u3058\u308B"))));
58
+ React.createElement(SubtleButton, { size: "medium" }, "\u3068\u3058\u308B"))));
59
59
  }
package/InlineNotification/InlineNotification.css CHANGED
@@ -1 +1 @@
1
- :root{--InlineNotification--neutral-backgroundColor:var(--white-20-alpha);--InlineNotification--neutral-color:var(--color-text-high-emphasis-inverse);--InlineNotification--neutral-onHover-backgroundColor:var(--white-30-alpha);--InlineNotification--neutral-onActive-backgroundColor:var(--white-30-alpha);--InlineNotification--outlined-onHover-backgroundColor:var(--white-50-alpha);--InlineNotification--outlined-onActive-backgroundColor:var(--white-50-alpha);--InlineNotification--contained-backgroundColor:var(--color-surface-primary);--InlineNotification--contained-color:var(--color-text-accent-primary);--InlineNotification--contained-onHover-backgroundColor:var(--white-70-alpha);--InlineNotification--contained-onActive-backgroundColor:var(--white-70-alpha);--InlineNotification--danger-borderColor:var(--color-border-high-emphasis-inverse);--InlineNotification--danger-color:var(--color-text-high-emphasis-inverse);--InlineNotification--danger-onHover-backgroundColor:var(--white-50-alpha);--InlineNotification--danger-onActive-backgroundColor:var(--white-50-alpha)}.spui-InlineNotification{border-radius:12px;width:100%}.spui-InlineNotification--full{border-radius:0}.spui-InlineNotification-content{align-items:center;display:flex;padding:8px 12px}.spui-InlineNotification-icon{align-items:center;display:flex;font-size:1.375em;justify-content:center;margin-right:8px;padding:5px 0}.spui-InlineNotification-avatar{flex:none;height:36px;margin-right:8px;position:relative;width:36px}.spui-InlineNotification-avatar:before{border:1px solid var(--color-border-low-emphasis);border-radius:50%;box-sizing:border-box;content:"";height:100%;position:absolute;width:100%}.spui-InlineNotification-avatarInner{border-radius:50%;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.spui-InlineNotification-text{flex:1;font-size:.875em;font-weight:700;line-height:1.4;margin:0;min-width:0;overflow-wrap:break-word}.spui-InlineNotification-iconButton{margin-left:16px;padding:5px 0}.spui-InlineNotification-textButton{flex:none;font-size:.75em;margin-left:16px}.spui-InlineNotification-button{flex:none;margin-left:16px;padding:2px 0}.spui-InlineNotification-icon~.spui-InlineNotification-button{padding:5px 0}.spui-InlineNotification--information{background-color:var(--color-surface-tertiary)}.spui-InlineNotification--information .spui-InlineNotification-icon{color:var(--color-object-medium-emphasis)}.spui-InlineNotification--information .spui-InlineNotification-text{color:var(--color-text-medium-emphasis)}.spui-InlineNotification--information .spui-InlineNotification-iconButton{--IconButton--neutral-backgroundColor:transparent}.spui-InlineNotification--information .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-medium-emphasis)}.spui-InlineNotification--information~.spui-InlineNotification--emphasized{background-color:var(--color-surface-accent-neutral-high-emphasis)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-icon{color:var(--color-object-high-emphasis-inverse)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-text{color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-iconButton{--IconButton--neutral-color:var(--InlineNotification--neutral-color);--IconButton--neutral-onHover-backgroundColor:var(--InlineNotification--neutral-onHover-backgroundColor);--IconButton--neutral-onActive-backgroundColor:var(--InlineNotification--neutral-onActive-backgroundColor)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-button{--Button--neutral-backgroundColor:var(--InlineNotification--neutral-backgroundColor);--Button--neutral-color:var(--InlineNotification--neutral-color);--Button--neutral-onHover-backgroundColor:var(--InlineNotification--neutral-onHover-backgroundColor);--Button--neutral-onActive-backgroundColor:var(--InlineNotification--neutral-onActive-backgroundColor)}.spui-InlineNotification--confirmation{background-color:var(--color-surface-accent-primary-light)}.spui-InlineNotification--confirmation .spui-InlineNotification-icon{color:var(--color-object-accent-primary)}.spui-InlineNotification--confirmation .spui-InlineNotification-text{color:var(--color-text-accent-primary)}.spui-InlineNotification--confirmation .spui-InlineNotification-iconButton{--IconButton--outlined-borderColor:none;--IconButton--outlined-onHover-backgroundColor:var(--InlineNotification--outlined-onHover-backgroundColor);--IconButton--outlined-onActive-backgroundColor:var(--InlineNotification--outlined-onActive-backgroundColor)}.spui-InlineNotification--confirmation .spui-InlineNotification-button{--Button--outlined-onHover-backgroundColor:var(--InlineNotification--outlined-onHover-backgroundColor);--Button--outlined-onActive-backgroundColor:var(--InlineNotification--outlined-onActive-backgroundColor)}.spui-InlineNotification--confirmation~.spui-InlineNotification--emphasized{background-color:var(--color-surface-accent-primary)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-icon{color:var(--color-object-high-emphasis-inverse)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-text{color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-button{--Button--contained-backgroundColor:var(--InlineNotification--contained-backgroundColor);--Button--contained-color:var(--InlineNotification--contained-color);--Button--contained-onHover-backgroundColor:var(--InlineNotification--contained-onHover-backgroundColor);--Button--contained-onActive-backgroundColor:var(--InlineNotification--contained-onActive-backgroundColor)}.spui-InlineNotification--error{background-color:var(--color-surface-caution-light)}.spui-InlineNotification--error .spui-InlineNotification-icon{color:var(--color-object-caution)}.spui-InlineNotification--error .spui-InlineNotification-text{color:var(--color-text-caution)}.spui-InlineNotification--error .spui-InlineNotification-iconButton{--IconButton--danger-borderColor:none}.spui-InlineNotification--error .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-caution)}.spui-InlineNotification--error~.spui-InlineNotification--emphasized{background-color:var(--color-surface-caution)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-icon{color:var(--color-object-high-emphasis-inverse)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-text{color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-iconButton{--IconButton--danger-color:var(--InlineNotification--danger-color);--IconButton--danger-onHover-backgroundColor:var(--InlineNotification--danger-onHover-backgroundColor);--IconButton--danger-onActive-backgroundColor:var(--InlineNotification--danger-onActive-backgroundColor)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-button{--Button--danger-color:var(--InlineNotification--danger-color);--Button--danger-borderColor:var(--InlineNotification--danger-borderColor);--Button--danger-onHover-backgroundColor:var(--InlineNotification--danger-onHover-backgroundColor);--Button--danger-onActive-backgroundColor:var(--InlineNotification--danger-onActive-backgroundColor)}
1
+ :root{--Button-tapHighlightColor:var(--gray-5-alpha);--Button-onFocus-outlineColor:var(--color-focus-clarity);--Button--contained-backgroundColor:var(--color-surface-accent-primary);--Button--contained-color:var(--color-text-high-emphasis-inverse);--Button--contained-onActive-backgroundColor:var(--primary-green-100);--Button--contained-onHover-backgroundColor:var(--primary-green-100);--Button--outlined-borderColor:var(--color-border-accent-primary);--Button--outlined-color:var(--color-text-accent-primary);--Button--outlined-onActive-backgroundColor:var(--primary-green-5);--Button--outlined-onHover-backgroundColor:var(--primary-green-5);--Button--lighted-backgroundColor:var(--color-surface-accent-primary-light);--Button--lighted-color:var(--color-text-accent-primary);--Button--lighted-onActive-backgroundColor:var(--primary-green-10);--Button--lighted-onHover-backgroundColor:var(--primary-green-10);--Button--neutral-backgroundColor:var(--color-surface-tertiary);--Button--neutral-color:var(--color-text-medium-emphasis);--Button--neutral-onActive-backgroundColor:var(--gray-20-alpha);--Button--neutral-onHover-backgroundColor:var(--gray-20-alpha);--Button--danger-borderColor:var(--color-border-caution);--Button--danger-color:var(--color-text-caution);--Button--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--Button--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-Button{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;margin:0;-webkit-tap-highlight-color:var(--Button-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-Button:disabled{opacity:.3}.spui-Button:focus{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-left:16px;padding-right:16px}.spui-Button--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-Button--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-Button--large,.spui-Button--medium,.spui-Button--small{height:1px}}.spui-Button--contained{background-color:var(--Button--contained-backgroundColor);border:none;color:var(--Button--contained-color);padding-bottom:8px;padding-top:8px}.spui-Button--contained:active{background-color:var(--Button--contained-onActive-backgroundColor)}@media (hover:hover){.spui-Button--contained:not([disabled]):hover{background-color:var(--Button--contained-onHover-backgroundColor)}}.spui-Button--outlined{background-color:transparent;border:2px solid var(--Button--outlined-borderColor);color:var(--Button--outlined-color);padding-bottom:6px;padding-top:6px}.spui-Button--outlined:active{background-color:var(--Button--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-Button--outlined:not([disabled]):hover{background-color:var(--Button--outlined-onHover-backgroundColor)}}.spui-Button--lighted{background-color:var(--Button--lighted-backgroundColor);border:none;color:var(--Button--lighted-color);padding-bottom:8px;padding-top:8px}.spui-Button--lighted:active{background-color:var(--Button--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-Button--lighted:not([disabled]):hover{background-color:var(--Button--lighted-onHover-backgroundColor)}}.spui-Button--neutral{background-color:var(--Button--neutral-backgroundColor);border:none;color:var(--Button--neutral-color);padding-bottom:8px;padding-top:8px}.spui-Button--neutral:active{background-color:var(--Button--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-Button--neutral:not([disabled]):hover{background-color:var(--Button--neutral-onHover-backgroundColor)}}.spui-Button--danger{background-color:transparent;border:2px solid var(--Button--danger-borderColor);color:var(--Button--danger-color);padding-bottom:6px;padding-top:6px}.spui-Button--danger:active{background-color:var(--Button--danger-onActive-backgroundColor)}@media (hover:hover){.spui-Button--danger:not([disabled]):hover{background-color:var(--Button--danger-onHover-backgroundColor)}}.spui-Button-icon{line-height:0}.spui-Button-icon--large{font-size:1.375em;margin-right:6px}.spui-Button-icon--medium{font-size:1.429em;margin-right:4px}.spui-Button-icon--small{font-size:1.23em;margin-right:2px}:root{--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(--color-surface-accent-primary-light);--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(--color-surface-accent-primary-light);--LinkButton--lighted-color:var(--color-text-accent-primary);--LinkButton--lighted-onActive-backgroundColor:var(--primary-green-10);--LinkButton--lighted-onHover-backgroundColor:var(--primary-green-10);--LinkButton--neutral-backgroundColor:var(--color-surface-tertiary);--LinkButton--neutral-color:var(--color-text-medium-emphasis);--LinkButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--LinkButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--LinkButton--danger-borderColor:var(--color-border-caution);--LinkButton--danger-color:var(--color-text-caution);--LinkButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--LinkButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-LinkButton{align-items:center;box-sizing:border-box;display:inline-flex;font-family:inherit;font-weight:700;justify-content:center;line-height:1.3;-webkit-tap-highlight-color:var(--LinkButton-tapHighlightColor);text-align:center;text-decoration:none;transition:background-color .3s}.spui-LinkButton:focus{outline:2px solid var(--LinkButton-onFocus-outlineColor);outline-offset:1px}.spui-LinkButton:focus:not(:focus-visible){outline:none}.spui-LinkButton--fullWidth{width:100%}.spui-LinkButton--large{border-radius:3em;font-size:1em;min-height:48px;padding-left:16px;padding-right:16px}.spui-LinkButton--medium{border-radius:2.85714em;font-size:.875em;min-height:40px;padding-left:16px;padding-right:16px}.spui-LinkButton--small{border-radius:2.46154em;font-size:.8125em;min-height:32px;padding-left:10px;padding-right:10px}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.spui-LinkButton--large,.spui-LinkButton--medium,.spui-LinkButton--small{height:1px}}.spui-LinkButton--contained{background-color:var(--LinkButton--contained-backgroundColor);border:none;color:var(--LinkButton--contained-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--contained:active{background-color:var(--LinkButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--contained:hover{background-color:var(--LinkButton--contained-onHover-backgroundColor)}}.spui-LinkButton--outlined{background-color:transparent;border:2px solid var(--LinkButton--outlined-borderColor);color:var(--LinkButton--outlined-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--outlined:active{background-color:var(--LinkButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--outlined:hover{background-color:var(--LinkButton--outlined-onHover-backgroundColor)}}.spui-LinkButton--lighted{background-color:var(--LinkButton--lighted-backgroundColor);border:none;color:var(--LinkButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--lighted:active{background-color:var(--LinkButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--lighted:hover{background-color:var(--LinkButton--lighted-onHover-backgroundColor)}}.spui-LinkButton--neutral{background-color:var(--LinkButton--neutral-backgroundColor);border:none;color:var(--LinkButton--neutral-color);padding-bottom:8px;padding-top:8px}.spui-LinkButton--neutral:active{background-color:var(--LinkButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--neutral:hover{background-color:var(--LinkButton--neutral-onHover-backgroundColor)}}.spui-LinkButton--danger{background-color:transparent;border:2px solid var(--LinkButton--danger-borderColor);color:var(--LinkButton--danger-color);padding-bottom:6px;padding-top:6px}.spui-LinkButton--danger:active{background-color:var(--LinkButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-LinkButton--danger:hover{background-color:var(--LinkButton--danger-onHover-backgroundColor)}}.spui-LinkButton-icon{line-height:0}.spui-LinkButton-icon--large{font-size:1.375em;margin-right:6px}.spui-LinkButton-icon--medium{font-size:1.429em;margin-right:4px}.spui-LinkButton-icon--small{font-size:1.23em;margin-right:2px}:root{--TextLink-tapHighlightColor:var(--white-60-alpha);--TextLink-onFocus-outlineColor:var(--color-focus-clarity);--TextLink-color:var(--color-text-accent-primary);--TextLink-icon-color:var(--color-object-accent-primary);--TextLink-fontWeight:bold;--TextLink--subtle-color:var(--color-text-low-emphasis);--TextLink--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextLink{border-radius:4px;color:var(--TextLink-color);font-family:inherit;font-weight:var(--TextLink-fontWeight);line-height:1.3;-webkit-tap-highlight-color:var(--TextLink-tapHighlightColor)}.spui-TextLink:focus{outline:2px solid var(--TextLink-onFocus-outlineColor);outline-offset:1px}.spui-TextLink:focus:not(:focus-visible){outline:none}.spui-TextLink--subtle{color:var(--TextLink--subtle-color)}.spui-TextLink--hasIcon{align-items:center;display:inline-flex}.spui-TextLink-icon{line-height:0}.spui-TextLink--iconstart .spui-TextLink-icon{margin-right:4px}.spui-TextLink--iconend{flex-direction:row-reverse}.spui-TextLink--iconend .spui-TextLink-icon{margin-left:4px}.spui-TextLink{text-decoration:underline}.spui-TextLink--hasIcon,.spui-TextLink--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextLink:hover{text-decoration:none}:is(.spui-TextLink--hasIcon,.spui-TextLink--underlinehover):hover{text-decoration:underline}}:root{--TextButton-tapHighlightColor:var(--white-60-alpha);--TextButton-onFocus-outlineColor:var(--color-focus-clarity);--TextButton-color:var(--color-text-accent-primary);--TextButton-icon-color:var(--color-object-accent-primary);--TextButton-fontWeight:bold;--TextButton--subtle-color:var(--color-text-low-emphasis);--TextButton--subtle-icon-color:var(--color-object-low-emphasis)}.spui-TextButton{background:none;border:none;border-radius:4px;color:var(--TextButton-color);font-family:inherit;font-size:1em;font-weight:var(--TextButton-fontWeight);line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--TextButton-tapHighlightColor)}.spui-TextButton:focus{outline:2px solid var(--TextButton-onFocus-outlineColor);outline-offset:1px}.spui-TextButton:focus:not(:focus-visible){outline:none}.spui-TextButton--subtle{color:var(--TextButton--subtle-color)}.spui-TextButton--hasIcon{align-items:center;display:inline-flex}.spui-TextButton-icon{line-height:0}.spui-TextButton--iconstart .spui-TextButton-icon{margin-right:4px}.spui-TextButton--iconend{flex-direction:row-reverse}.spui-TextButton--iconend .spui-TextButton-icon{margin-left:4px}.spui-TextButton{text-decoration:underline}.spui-TextButton--hasIcon,.spui-TextButton--underlinehover{text-decoration:none}@media (hover:hover){.spui-TextButton:hover{text-decoration:none}:is(.spui-TextButton--hasIcon,.spui-TextButton--underlinehover):hover{text-decoration:underline}}:root{--InlineNotification--neutral-backgroundColor:var(--white-20-alpha);--InlineNotification--neutral-color:var(--color-text-high-emphasis-inverse);--InlineNotification--neutral-onHover-backgroundColor:var(--white-30-alpha);--InlineNotification--neutral-onActive-backgroundColor:var(--white-30-alpha);--InlineNotification--outlined-onHover-backgroundColor:var(--white-50-alpha);--InlineNotification--outlined-onActive-backgroundColor:var(--white-50-alpha);--InlineNotification--contained-backgroundColor:var(--color-surface-primary);--InlineNotification--contained-color:var(--color-text-accent-primary);--InlineNotification--contained-onHover-backgroundColor:var(--white-70-alpha);--InlineNotification--contained-onActive-backgroundColor:var(--white-70-alpha);--InlineNotification--danger-borderColor:var(--color-border-high-emphasis-inverse);--InlineNotification--danger-color:var(--color-text-high-emphasis-inverse);--InlineNotification--danger-onHover-backgroundColor:var(--white-50-alpha);--InlineNotification--danger-onActive-backgroundColor:var(--white-50-alpha)}.spui-InlineNotification{border-radius:12px;width:100%}.spui-InlineNotification--full{border-radius:0}.spui-InlineNotification-content{align-items:center;display:flex;padding:8px 12px}.spui-InlineNotification-icon{align-items:center;display:flex;font-size:1.375em;justify-content:center;margin-right:8px;padding:5px 0}.spui-InlineNotification-avatar{flex:none;height:36px;margin-right:8px;position:relative;width:36px}.spui-InlineNotification-avatar:before{border:1px solid var(--color-border-low-emphasis);border-radius:50%;box-sizing:border-box;content:"";height:100%;position:absolute;width:100%}.spui-InlineNotification-avatarInner{border-radius:50%;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.spui-InlineNotification-text{flex:1;font-size:.875em;font-weight:700;line-height:1.4;margin:0;min-width:0;overflow-wrap:break-word}.spui-InlineNotification-iconButton{margin-left:16px;padding:5px 0}.spui-InlineNotification-textButton{flex:none;font-size:.75em;margin-left:16px}.spui-InlineNotification-button{flex:none;margin-left:16px;padding:2px 0}.spui-InlineNotification-icon~.spui-InlineNotification-button{padding:5px 0}.spui-InlineNotification--information{background-color:var(--color-surface-tertiary)}.spui-InlineNotification--information .spui-InlineNotification-icon{color:var(--color-object-medium-emphasis)}.spui-InlineNotification--information .spui-InlineNotification-text{color:var(--color-text-medium-emphasis)}.spui-InlineNotification--information .spui-InlineNotification-iconButton{--IconButton--neutral-backgroundColor:transparent}.spui-InlineNotification--information .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-medium-emphasis)}.spui-InlineNotification--information~.spui-InlineNotification--emphasized{background-color:var(--color-surface-accent-neutral-high-emphasis)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-icon{color:var(--color-object-high-emphasis-inverse)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-text{color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-iconButton{--IconButton--neutral-color:var(--InlineNotification--neutral-color);--IconButton--neutral-onHover-backgroundColor:var(--InlineNotification--neutral-onHover-backgroundColor);--IconButton--neutral-onActive-backgroundColor:var(--InlineNotification--neutral-onActive-backgroundColor)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--information.spui-InlineNotification--emphasized .spui-InlineNotification-button{--Button--neutral-backgroundColor:var(--InlineNotification--neutral-backgroundColor);--Button--neutral-color:var(--InlineNotification--neutral-color);--Button--neutral-onHover-backgroundColor:var(--InlineNotification--neutral-onHover-backgroundColor);--Button--neutral-onActive-backgroundColor:var(--InlineNotification--neutral-onActive-backgroundColor)}.spui-InlineNotification--confirmation{background-color:var(--color-surface-accent-primary-light)}.spui-InlineNotification--confirmation .spui-InlineNotification-icon{color:var(--color-object-accent-primary)}.spui-InlineNotification--confirmation .spui-InlineNotification-text{color:var(--color-text-accent-primary)}.spui-InlineNotification--confirmation .spui-InlineNotification-iconButton{--IconButton--outlined-borderColor:none;--IconButton--outlined-onHover-backgroundColor:var(--InlineNotification--outlined-onHover-backgroundColor);--IconButton--outlined-onActive-backgroundColor:var(--InlineNotification--outlined-onActive-backgroundColor)}.spui-InlineNotification--confirmation .spui-InlineNotification-button{--Button--outlined-onHover-backgroundColor:var(--InlineNotification--outlined-onHover-backgroundColor);--Button--outlined-onActive-backgroundColor:var(--InlineNotification--outlined-onActive-backgroundColor)}.spui-InlineNotification--confirmation~.spui-InlineNotification--emphasized{background-color:var(--color-surface-accent-primary)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-icon{color:var(--color-object-high-emphasis-inverse)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-text{color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--confirmation.spui-InlineNotification--emphasized .spui-InlineNotification-button{--Button--contained-backgroundColor:var(--InlineNotification--contained-backgroundColor);--Button--contained-color:var(--InlineNotification--contained-color);--Button--contained-onHover-backgroundColor:var(--InlineNotification--contained-onHover-backgroundColor);--Button--contained-onActive-backgroundColor:var(--InlineNotification--contained-onActive-backgroundColor)}.spui-InlineNotification--error{background-color:var(--color-surface-caution-light)}.spui-InlineNotification--error .spui-InlineNotification-icon{color:var(--color-object-caution)}.spui-InlineNotification--error .spui-InlineNotification-text{color:var(--color-text-caution)}.spui-InlineNotification--error .spui-InlineNotification-iconButton{--IconButton--danger-borderColor:none}.spui-InlineNotification--error .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-caution)}.spui-InlineNotification--error~.spui-InlineNotification--emphasized{background-color:var(--color-surface-caution)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-icon{color:var(--color-object-high-emphasis-inverse)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-text{color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-iconButton{--IconButton--danger-color:var(--InlineNotification--danger-color);--IconButton--danger-onHover-backgroundColor:var(--InlineNotification--danger-onHover-backgroundColor);--IconButton--danger-onActive-backgroundColor:var(--InlineNotification--danger-onActive-backgroundColor)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-textButton{--TextButton-color:var(--color-text-high-emphasis-inverse)}.spui-InlineNotification--error.spui-InlineNotification--emphasized .spui-InlineNotification-button{--Button--danger-color:var(--InlineNotification--danger-color);--Button--danger-borderColor:var(--InlineNotification--danger-borderColor);--Button--danger-onHover-backgroundColor:var(--InlineNotification--danger-onHover-backgroundColor);--Button--danger-onActive-backgroundColor:var(--InlineNotification--danger-onActive-backgroundColor)}
package/InlineNotification/InlineNotification.d.ts CHANGED
@@ -7,7 +7,7 @@ declare type Props = {
7
7
  emphasis?: boolean;
8
8
  layout?: Layout;
9
9
  visible?: boolean;
10
- };
10
+ } & Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
11
11
  export declare const InlineNotification: {
12
12
  Frame: React.FC<Props>;
13
13
  Icon: React.FC<{
package/InlineNotification/InlineNotification.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineNotification.d.ts","sourceRoot":"","sources":["../../src/InlineNotification/InlineNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAIT,YAAY,EAGb,MAAM,OAAO,CAAC;AAKf,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AACxD,aAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/B,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2IF,eAAO,MAAM,kBAAkB;;;kBA1DnB,SAAS;;;aAEG,MAAM;;;;kBAMlB,SAAS;;;kBAGP,SAAS;;;kBAmBT,SAAS;;;kBAWU,SAAS;;CAyBzC,CAAC"}
1
+ {"version":3,"file":"InlineNotification.d.ts","sourceRoot":"","sources":["../../src/InlineNotification/InlineNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAIT,YAAY,EAGb,MAAM,OAAO,CAAC;AAKf,aAAK,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AACxD,aAAK,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/B,aAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAAC;AA6I5D,eAAO,MAAM,kBAAkB;;;kBA1DnB,SAAS;;;aAEG,MAAM;;;;kBAMlB,SAAS;;;kBAGP,SAAS;;;kBAmBT,SAAS;;;kBAWU,SAAS;;CAyBzC,CAAC"}
package/InlineNotification/InlineNotification.js CHANGED
@@ -67,15 +67,15 @@ var computedButtonVariant = function (variant, emphasis) {
67
67
  }
68
68
  };
69
69
  var Frame = function (_a) {
70
- var children = _a.children, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, _c = _a.emphasis, emphasis = _c === void 0 ? DEFAULT_EMPHASIS : _c, _d = _a.layout, layout = _d === void 0 ? DEFAULT_LAYOUT : _d, _e = _a.visible, visible = _e === void 0 ? DEFAULT_VISIBLE : _e;
71
- return (react_1.default.createElement("div", { className: [
70
+ var children = _a.children, _b = _a.variant, variant = _b === void 0 ? DEFAULT_VARIANT : _b, _c = _a.emphasis, emphasis = _c === void 0 ? DEFAULT_EMPHASIS : _c, _d = _a.layout, layout = _d === void 0 ? DEFAULT_LAYOUT : _d, _e = _a.visible, visible = _e === void 0 ? DEFAULT_VISIBLE : _e, rest = __rest(_a, ["children", "variant", "emphasis", "layout", "visible"]);
71
+ return (react_1.default.createElement("div", __assign({ className: [
72
72
  "".concat(BLOCK_NAME),
73
73
  "".concat(BLOCK_NAME, "--").concat(variant),
74
74
  emphasis && "".concat(BLOCK_NAME, "--emphasized"),
75
75
  layout === 'full' && "".concat(BLOCK_NAME, "--full"),
76
76
  ]
77
77
  .filter(Boolean)
78
- .join(' '), hidden: !visible },
78
+ .join(' '), hidden: !visible }, rest),
79
79
  react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-content") }, react_1.Children.map(children, function (child) {
80
80
  return child ? (0, react_1.cloneElement)(child, { variant: variant, emphasis: emphasis }) : child;
81
81
  }))));
package/InlineNotification/InlineNotification.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InlineNotification.js","sourceRoot":"","sources":["../../src/InlineNotification/InlineNotification.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"InlineNotification.js","sourceRoot":"","sources":["../../src/InlineNotification/InlineNotification.tsx"],"names":[],"mappings":"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"}
package/InlineNotification/InlineNotification.mjs CHANGED
@@ -18,7 +18,7 @@ const computedButtonVariant = (variant, emphasis) => {
18
18
  return 'neutral';
19
19
  }
20
20
  };
21
- const Frame = ({ children, variant = DEFAULT_VARIANT, emphasis = DEFAULT_EMPHASIS, layout = DEFAULT_LAYOUT, visible = DEFAULT_VISIBLE, }) => {
21
+ const Frame = ({ children, variant = DEFAULT_VARIANT, emphasis = DEFAULT_EMPHASIS, layout = DEFAULT_LAYOUT, visible = DEFAULT_VISIBLE, ...rest }) => {
22
22
  return (React.createElement("div", { className: [
23
23
  `${BLOCK_NAME}`,
24
24
  `${BLOCK_NAME}--${variant}`,
@@ -26,7 +26,7 @@ const Frame = ({ children, variant = DEFAULT_VARIANT, emphasis = DEFAULT_EMPHASI
26
26
  layout === 'full' && `${BLOCK_NAME}--full`,
27
27
  ]
28
28
  .filter(Boolean)
29
- .join(' '), hidden: !visible },
29
+ .join(' '), hidden: !visible, ...rest },
30
30
  React.createElement("div", { className: `${BLOCK_NAME}-content` }, Children.map(children, (child) => child ? cloneElement(child, { variant, emphasis }) : child))));
31
31
  };
32
32
  const convertInternalChildProps = (props) => {
package/Modal/AppealModal.js CHANGED
@@ -140,7 +140,7 @@ var StyleOnly = function (_a) {
140
140
  react_1.default.createElement(Icon_1.CrossBold, { "aria-hidden": "true" }))),
141
141
  children,
142
142
  react_1.default.createElement("div", { className: "".concat(BLOCK_NAME, "-closeTextButton") },
143
- react_1.default.createElement(SubtleButton_1.SubtleButton, null, "\u9589\u3058\u308B")))));
143
+ react_1.default.createElement(SubtleButton_1.SubtleButton, null, "\u3068\u3058\u308B")))));
144
144
  };
145
145
  var Title = function (_a) {
146
146
  var children = _a.children, rest = __rest(_a, ["children"]);
package/Modal/AppealModal.mjs CHANGED
@@ -84,7 +84,7 @@ const StyleOnly = ({ className, children, size = 'large', ...rest }) => {
84
84
  React.createElement(CrossBold, { "aria-hidden": "true" }))),
85
85
  children,
86
86
  React.createElement("div", { className: `${BLOCK_NAME}-closeTextButton` },
87
- React.createElement(SubtleButton, null, "\u9589\u3058\u308B")))));
87
+ React.createElement(SubtleButton, null, "\u3068\u3058\u308B")))));
88
88
  };
89
89
  const Title = ({ children, ...rest }) => {
90
90
  return (React.createElement("p", { className: `${BLOCK_NAME}-title`, ...rest }, children));
package/README.md CHANGED
@@ -46,13 +46,7 @@ Spindle UIはmodule版の配信もしています。利用する際には、[導
46
46
  > **_NOTE:_** アイコン利用時は[Spindle IconsのReactコンポーネント](/packages/spindle-icons#react)を読み、注意点を確認してください。
47
47
 
48
48
  ## コンポーネント一覧
49
- 利用可能なコンポーネントは、[Storybook](https://ameba-spindle.web.app/)で公開されています。各コンポーネントの開発状況は[Stoybook Doc](https://ameba-spindle.web.app/?path=/docs/button--large)のStability Budgeで以下のように表されています。
50
-
51
- - ![stability-stable](https://img.shields.io/badge/stability-stable-green.svg) 想定された機能が実装、テストされており本番環境で利用できます
52
- - ![stability-unstable](https://img.shields.io/badge/stability-unstable-yellow.svg) 足りていない機能や不安定な動作があり、まだ完全ではないですが、本番環境で利用できます
53
- - ![stability-wip](https://img.shields.io/badge/stability-work_in_progress-lightgrey.svg) 開発中のため、本番環境での利用はしない方がよいでしょう
54
- - ![stability-experimental](https://img.shields.io/badge/stability-experimental-orange.svg) 実験的な機能で大きな変更や削除される可能性があります
55
- - ![stability-deprecated](https://img.shields.io/badge/stability-deprecated-red.svg) 廃止される予定のため、できるだけはやく利用を停止してください
49
+ 利用可能なコンポーネントは、[Storybook](https://ameba-spindle.web.app/)で公開されています。各コンポーネントの開発状況は[Spindleサイトのコンポーネントステータスページ](https://spindle.ameba.design/components/status/)をご覧ください。
56
50
 
57
51
  ## サンプルアプリケーション
58
52
  Spindle UIは様々なパターンのアプリケーションで利用できます。詳細は各サンプルコードを閲覧してください。
@@ -135,7 +129,7 @@ yarn generate
135
129
  ```
136
130
 
137
131
  ## ライセンス
138
- Spindle UIはMITライセンスで公開されています。ただし、アイコンは[Spindle Icons](../spindle-icons/)に準じて、Creative Commons BY-NC-ND 4.0ライセンスで公開されています。
132
+ Spindle UIはMITライセンスで公開されています。ただし、アイコンは[Spindle Icons](https://github.com/openameba/spindle/tree/main/packages/spindle-icons#%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9)に準じて、Creative Commons BY-NC-ND 4.0ライセンスで公開されています。
139
133
 
140
134
  ## 関連ドキュメント
141
135
  - [Design Doc](docs/design-doc.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openameba/spindle-ui",
3
- "version": "0.58.4",
3
+ "version": "0.58.6",
4
4
  "main": "./index.js",
5
5
  "module": "./index.mjs",
6
6
  "types": "./index.d.ts",
@@ -97,5 +97,5 @@
97
97
  "ts-jest": "29.0.5",
98
98
  "webpack": "^5.73.0"
99
99
  },
100
- "gitHead": "fa466edb90f1f38a5a4ce316c38cd9c0a4f2b78b"
100
+ "gitHead": "81622684beb9ab5ac0cfe404c104d353fd807e98"
101
101
  }