@algolia/satellite 1.0.0-beta.134 → 1.0.0-beta.135

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 (134) hide show
  1. package/cjs/AutoComplete/AutoComplete.js +3 -1
  2. package/cjs/DatePicker/components/Modal.js +5 -4
  3. package/cjs/Dropdown/Dropdown.js +5 -4
  4. package/cjs/Dropdown/components/DropdownButtonItem.js +2 -2
  5. package/cjs/Dropdown/components/DropdownLinkItem.js +0 -1
  6. package/cjs/Dropdown/useDropdownItemProps.d.ts +9 -1
  7. package/cjs/Dropdown/useDropdownItemProps.js +16 -7
  8. package/cjs/Flag/Flags.d.ts +1 -1
  9. package/cjs/Flag/Flags.js +5 -4
  10. package/cjs/Link/ButtonLink.js +1 -10
  11. package/cjs/Modal/Modal.d.ts +1 -1
  12. package/cjs/Modal/Modal.js +3 -4
  13. package/cjs/Satellite/Satellite.d.ts +1 -0
  14. package/cjs/Satellite/Satellite.js +3 -1
  15. package/cjs/Satellite/SatelliteContext.d.ts +1 -0
  16. package/cjs/Satellite/index.d.ts +1 -0
  17. package/cjs/Satellite/index.js +14 -0
  18. package/cjs/Satellite/locale.d.ts +5 -3
  19. package/cjs/Satellite/useCreatePortal.d.ts +4 -0
  20. package/cjs/Satellite/useCreatePortal.js +29 -0
  21. package/cjs/ScrollIndicator/ScrollIndicator.js +2 -1
  22. package/cjs/Sidebar/Sidebar.d.ts +33 -12
  23. package/cjs/Sidebar/Sidebar.js +48 -38
  24. package/cjs/Sidebar/SidebarButtonLink.d.ts +14 -0
  25. package/cjs/Sidebar/SidebarButtonLink.js +110 -0
  26. package/cjs/Sidebar/SidebarContext.d.ts +7 -8
  27. package/cjs/Sidebar/SidebarContext.js +10 -11
  28. package/cjs/Sidebar/SidebarHeader.d.ts +6 -0
  29. package/cjs/Sidebar/SidebarHeader.js +29 -0
  30. package/cjs/Sidebar/SidebarHeading.d.ts +6 -0
  31. package/cjs/Sidebar/SidebarHeading.js +35 -0
  32. package/cjs/Sidebar/SidebarLink.d.ts +8 -0
  33. package/cjs/Sidebar/SidebarLink.js +58 -0
  34. package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts +8 -0
  35. package/cjs/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js +47 -0
  36. package/cjs/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts +7 -0
  37. package/cjs/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js} +14 -23
  38. package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts +23 -0
  39. package/cjs/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +120 -0
  40. package/cjs/Sidebar/SidebarLinksGroup/index.d.ts +2 -0
  41. package/cjs/Sidebar/SidebarLinksGroup/index.js +18 -0
  42. package/cjs/Sidebar/SidebarLinksGroup/types.d.ts +10 -0
  43. package/cjs/Sidebar/SidebarLinksGroup/types.js +5 -0
  44. package/cjs/Sidebar/SidebarNav.d.ts +9 -0
  45. package/cjs/Sidebar/SidebarNav.js +46 -0
  46. package/cjs/Sidebar/index.d.ts +7 -4
  47. package/cjs/Sidebar/index.js +61 -21
  48. package/cjs/Sidebar/types.d.ts +6 -2
  49. package/cjs/Tabs/Tabs.tailwind.js +8 -8
  50. package/cjs/Tabs/components/LinkTab.js +7 -9
  51. package/cjs/Tooltip/OverflowTooltipWrapper.js +5 -4
  52. package/cjs/Tooltip/TooltipWrapper.js +5 -4
  53. package/cjs/index.d.ts +0 -1
  54. package/cjs/index.js +0 -14
  55. package/cjs/styles/tailwind.config.js +1 -1
  56. package/cjs/utils/useLinkProps.d.ts +5 -2
  57. package/cjs/utils/useLinkProps.js +9 -2
  58. package/esm/AutoComplete/AutoComplete.js +3 -1
  59. package/esm/DatePicker/components/Modal.js +4 -3
  60. package/esm/Dropdown/Dropdown.js +4 -3
  61. package/esm/Dropdown/components/DropdownButtonItem.js +2 -2
  62. package/esm/Dropdown/components/DropdownLinkItem.js +0 -1
  63. package/esm/Dropdown/useDropdownItemProps.d.ts +9 -1
  64. package/esm/Dropdown/useDropdownItemProps.js +15 -7
  65. package/esm/Flag/Flags.d.ts +1 -1
  66. package/esm/Flag/Flags.js +4 -3
  67. package/esm/Link/ButtonLink.js +1 -10
  68. package/esm/Modal/Modal.d.ts +1 -1
  69. package/esm/Modal/Modal.js +4 -4
  70. package/esm/Satellite/Satellite.d.ts +1 -0
  71. package/esm/Satellite/Satellite.js +3 -1
  72. package/esm/Satellite/SatelliteContext.d.ts +1 -0
  73. package/esm/Satellite/index.d.ts +1 -0
  74. package/esm/Satellite/index.js +1 -0
  75. package/esm/Satellite/locale.d.ts +5 -3
  76. package/esm/Satellite/useCreatePortal.d.ts +4 -0
  77. package/esm/Satellite/useCreatePortal.js +16 -0
  78. package/esm/ScrollIndicator/ScrollIndicator.js +2 -1
  79. package/esm/Sidebar/Sidebar.d.ts +33 -12
  80. package/esm/Sidebar/Sidebar.js +44 -29
  81. package/esm/Sidebar/SidebarButtonLink.d.ts +14 -0
  82. package/esm/Sidebar/SidebarButtonLink.js +92 -0
  83. package/esm/Sidebar/SidebarContext.d.ts +7 -8
  84. package/esm/Sidebar/SidebarContext.js +9 -8
  85. package/esm/Sidebar/SidebarHeader.d.ts +6 -0
  86. package/esm/Sidebar/SidebarHeader.js +15 -0
  87. package/esm/Sidebar/SidebarHeading.d.ts +6 -0
  88. package/esm/Sidebar/SidebarHeading.js +20 -0
  89. package/esm/Sidebar/SidebarLink.d.ts +8 -0
  90. package/esm/Sidebar/SidebarLink.js +42 -0
  91. package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.d.ts +8 -0
  92. package/esm/Sidebar/SidebarLinksGroup/ActiveLinkIndicator.js +32 -0
  93. package/esm/Sidebar/SidebarLinksGroup/SidebarGroupLink.d.ts +7 -0
  94. package/esm/Sidebar/{components/SidebarHeader.js → SidebarLinksGroup/SidebarGroupLink.js} +13 -19
  95. package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.d.ts +23 -0
  96. package/esm/Sidebar/SidebarLinksGroup/SidebarLinksGroup.js +100 -0
  97. package/esm/Sidebar/SidebarLinksGroup/index.d.ts +2 -0
  98. package/esm/Sidebar/SidebarLinksGroup/index.js +2 -0
  99. package/esm/Sidebar/SidebarLinksGroup/types.d.ts +10 -0
  100. package/esm/Sidebar/SidebarLinksGroup/types.js +1 -0
  101. package/esm/Sidebar/SidebarNav.d.ts +9 -0
  102. package/esm/Sidebar/SidebarNav.js +31 -0
  103. package/esm/Sidebar/index.d.ts +7 -4
  104. package/esm/Sidebar/index.js +7 -4
  105. package/esm/Sidebar/types.d.ts +6 -2
  106. package/esm/Tabs/Tabs.tailwind.js +8 -8
  107. package/esm/Tabs/components/LinkTab.js +7 -9
  108. package/esm/Tooltip/OverflowTooltipWrapper.js +4 -3
  109. package/esm/Tooltip/TooltipWrapper.js +4 -3
  110. package/esm/index.d.ts +0 -1
  111. package/esm/index.js +0 -1
  112. package/esm/styles/tailwind.config.js +1 -1
  113. package/esm/utils/useLinkProps.d.ts +5 -2
  114. package/esm/utils/useLinkProps.js +9 -2
  115. package/package.json +1 -1
  116. package/satellite.min.css +1 -1
  117. package/cjs/Banner/Banner.d.ts +0 -86
  118. package/cjs/Banner/Banner.js +0 -176
  119. package/cjs/Banner/index.d.ts +0 -2
  120. package/cjs/Banner/index.js +0 -32
  121. package/cjs/Sidebar/Sidebar.tailwind.d.ts +0 -5
  122. package/cjs/Sidebar/Sidebar.tailwind.js +0 -66
  123. package/cjs/Sidebar/components/SidebarHeader.d.ts +0 -5
  124. package/cjs/Sidebar/components/SidebarLink.d.ts +0 -10
  125. package/cjs/Sidebar/components/SidebarLink.js +0 -98
  126. package/esm/Banner/Banner.d.ts +0 -86
  127. package/esm/Banner/Banner.js +0 -161
  128. package/esm/Banner/index.d.ts +0 -2
  129. package/esm/Banner/index.js +0 -2
  130. package/esm/Sidebar/Sidebar.tailwind.d.ts +0 -5
  131. package/esm/Sidebar/Sidebar.tailwind.js +0 -64
  132. package/esm/Sidebar/components/SidebarHeader.d.ts +0 -5
  133. package/esm/Sidebar/components/SidebarLink.d.ts +0 -10
  134. package/esm/Sidebar/components/SidebarLink.js +0 -78
@@ -1,176 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.Banner = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _classnames = _interopRequireDefault(require("classnames"));
13
-
14
- var _reactFeather = require("react-feather");
15
-
16
- var _Button = require("../Button");
17
-
18
- var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
19
-
20
- var _jsxRuntime = require("react/jsx-runtime");
21
-
22
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
23
-
24
- function isBannerDefaultProps(props) {
25
- return props.usageContext !== "page";
26
- }
27
-
28
- var BASE_CLASSNAME = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["relative flex text-grey-900 display-body"])));
29
- var BACKGROUND_CLASSNAMES = {
30
- grey: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))),
31
- accent: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["bg-accent-100"]))),
32
- blue: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["bg-blue-100"]))),
33
- green: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["bg-green-100"]))),
34
- orange: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["bg-orange-100"]))),
35
- red: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["bg-red-100"])))
36
- };
37
- var BORDER_CLASSNAMES = {
38
- grey: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["border-grey-500"]))),
39
- accent: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border-accent-500"]))),
40
- blue: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-blue-500"]))),
41
- green: (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["border-green-500"]))),
42
- orange: (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["border-orange-500"]))),
43
- red: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["border-red-500"])))
44
- };
45
- var ELEVATION_CLASSNAMES = {
46
- inline: "",
47
- content: "",
48
- section: (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["shadow-z100"]))),
49
- page: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["shadow-z300"])))
50
- };
51
- var ICON_VARIANTS = {
52
- grey: _reactFeather.AlertCircle,
53
- accent: _reactFeather.AlertCircle,
54
- blue: _reactFeather.AlertCircle,
55
- green: _reactFeather.CheckCircle,
56
- orange: _reactFeather.AlertTriangle,
57
- red: _reactFeather.AlertOctagon
58
- };
59
- var ICON_CLASSNAME_VARIANTS = {
60
- grey: (0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"]))),
61
- accent: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["text-accent-500"]))),
62
- blue: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["text-blue-500"]))),
63
- green: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["text-green-700"]))),
64
- orange: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-orange-500"]))),
65
- red: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["text-red-500"])))
66
- };
67
- var TITLE_CLASSNAME_VARIANTS = {
68
- grey: (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["text-grey-900"]))),
69
- accent: (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["text-accent-900"]))),
70
- blue: (0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["text-blue-900"]))),
71
- green: (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["text-green-900"]))),
72
- orange: (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["text-orange-900"]))),
73
- red: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["text-red-900"])))
74
- };
75
- /** @deprecated use the new `Alert` component instead */
76
-
77
- /**
78
- * <p className="stl-space-x-2"><span className="stl-bg-orange-200 stl-font-bold stl-text-orange-800 stl-px-2 stl-py-1.5 stl-rounded">🌇 Sunsetting</span><span>use the new `Alert` component instead</span></p>
79
- *
80
- * Banners inform users about important changes or persistent conditions. Use this component if you need
81
- * to communicate to users in a prominent way. Take in consideration 3 levels of hierarchy when deciding
82
- * on the appropriate banner to use:
83
- *
84
- * #### Page banner
85
- * - Use this banner to display critical messages about data, functionality or any other site-wide information you want to convey
86
- * - Place this banner at the top of the page and make sure it occupies the full width of the content area
87
- *
88
- * #### Section banner
89
- * - Use this banner to display a message that relates to a section of the page the user is in, e.g. billing details
90
- * - Place this banner inside the section (e.g. card, popover, modal), below the heading
91
- *
92
- * #### In-card banner
93
- * - Use this banner to display a message that relates to a specific part of the section, e.g. no events for personalization strategy
94
- * - Place this banner immediately above or below the element it relates to most
95
- *
96
- * ## Variantions
97
- * Consider the context and implied severity to choose from the following range:
98
- *
99
- * - **Accent**: `variant="accent"`
100
- * - **Informational**: `variant="gray"` & `variant="blue"`
101
- * - **Warning**: `variant="orange"`
102
- * - **Error**: `variant="red"`
103
- * - **Success**: `variant="green"`
104
- *
105
- * ## Content guidelines
106
- * #### Title
107
- * - Use simple, clear language
108
- * - Keep headings to a single sentence
109
- * - Avoid using punctuation such as periods, commas, or semicolons
110
- *
111
- * #### Body
112
- * - Be concise, keep content to 1 to 2 sentences max
113
- * - Clarify the benefit of the main task
114
- * - Explain how to resolve the issue, particularly for warning and error banners
115
- * - Avoid repeating the heading
116
- *
117
- * #### Buttons and links
118
- * - Keep them short, clear and predictable
119
- * - Start with verb that encourages action
120
- * - Avoid unnecessary words
121
- * - Link should set the expectation of where users will be taken
122
- *
123
- * #### Usability best practices
124
- * - Make sure banners appear one at the time and disappear once the issue is resolved
125
- * - Make them dismissible even if they contain critical information or an important step users need to take
126
- * - Make them concise and scannable—users shouldn't need to spend a lot of time figuring out what they need to know and do
127
- * - Use an appropriate color and icon for success, info, warning and error states
128
- */
129
-
130
- var Banner = function Banner(props) {
131
- var _props$usageContext = props.usageContext,
132
- usageContext = _props$usageContext === void 0 ? "content" : _props$usageContext,
133
- _props$variant = props.variant,
134
- variant = _props$variant === void 0 ? "grey" : _props$variant,
135
- onDismiss = props.onDismiss,
136
- className = props.className,
137
- style = props.style,
138
- children = props.children;
139
- var containerClassName = (0, _classnames["default"])(BASE_CLASSNAME, usageContext !== "inline" ? "".concat((0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["border-t-3 p-4"]))), " ").concat(BORDER_CLASSNAMES[variant]) : (0, _satellitePrefixer["default"])(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2["default"])(["py-2 px-3"]))), ELEVATION_CLASSNAMES[usageContext], ["inline", "content"].includes(usageContext) ? BACKGROUND_CLASSNAMES[variant] : (0, _satellitePrefixer["default"])(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2["default"])(["bg-white"]))), usageContext !== "page" && (0, _satellitePrefixer["default"])(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2["default"])(["rounded"]))), className);
140
- var icon = props.icon === undefined ? usageContext !== "page" : props.icon;
141
- var Icon = typeof icon === "boolean" && icon ? ICON_VARIANTS[variant] : icon;
142
- var subduedContent = Boolean(isBannerDefaultProps(props) && usageContext === "section" && props.title);
143
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
144
- className: containerClassName,
145
- style: style,
146
- children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
147
- className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteral2["default"])(["\n shrink-0\n ", "\n ", "\n "])), usageContext !== "inline" ? "mr-4" : "mr-2", isBannerDefaultProps(props) && props.title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
148
- size: "1rem"
149
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
150
- className: (0, _satellitePrefixer["default"])(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteral2["default"])(["flex flex-1 flex-col ", ""])), onDismiss && "mr-2"),
151
- children: [isBannerDefaultProps(props) && props.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
152
- className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2["default"])(["display-heading mb-1"]))), TITLE_CLASSNAME_VARIANTS[variant]),
153
- children: props.title
154
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
155
- className: (0, _satellitePrefixer["default"])(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteral2["default"])(["", " ", ""])), usageContext === "page" && "text-center", subduedContent && "text-grey-600"),
156
- children: children
157
- })]
158
- }), onDismiss && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
159
- className: (0, _satellitePrefixer["default"])(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteral2["default"])(["absolute top-2 right-2"]))),
160
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
161
- title: "Close",
162
- variant: "subtle",
163
- size: "small",
164
- icon: _reactFeather.X,
165
- onClick: function onClick(evt) {
166
- evt.stopPropagation();
167
- onDismiss();
168
- }
169
- })
170
- })]
171
- });
172
- };
173
-
174
- exports.Banner = Banner;
175
- var _default = Banner;
176
- exports["default"] = _default;
@@ -1,2 +0,0 @@
1
- export * from "./Banner";
2
- export { default } from "./Banner";
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- var _exportNames = {};
9
- Object.defineProperty(exports, "default", {
10
- enumerable: true,
11
- get: function get() {
12
- return _Banner["default"];
13
- }
14
- });
15
-
16
- var _Banner = _interopRequireWildcard(require("./Banner"));
17
-
18
- Object.keys(_Banner).forEach(function (key) {
19
- if (key === "default" || key === "__esModule") return;
20
- if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
21
- if (key in exports && exports[key] === _Banner[key]) return;
22
- Object.defineProperty(exports, key, {
23
- enumerable: true,
24
- get: function get() {
25
- return _Banner[key];
26
- }
27
- });
28
- });
29
-
30
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
-
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -1,5 +0,0 @@
1
- export = sidebarPlugin;
2
- declare const sidebarPlugin: {
3
- handler: import("tailwindcss/types/config").PluginCreator;
4
- config?: import("tailwindcss").Config | undefined;
5
- };
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- // @ts-check
4
- var plugin = require("tailwindcss/plugin");
5
-
6
- var sidebarPlugin = plugin(function (_ref) {
7
- var addComponents = _ref.addComponents,
8
- theme = _ref.theme;
9
-
10
- /**
11
- * Returns a left border built with a box-shadow
12
- * @param {string} color
13
- */
14
- var borderLeftInsetShadow = function borderLeftInsetShadow(color) {
15
- return "inset 3px 0 0 ".concat(color);
16
- };
17
-
18
- addComponents({
19
- ".sidebar": {
20
- backgroundColor: theme("colors.grey.900"),
21
- color: theme("colors.grey.200"),
22
- width: "256px"
23
- },
24
- ".sidebar-light": {
25
- backgroundColor: theme("colors.white"),
26
- boxShadow: "\n 0 0 0 1px ".concat(theme("colors.shadow.5"), ",\n 0 1px 3px 0 ").concat(theme("colors.shadow.15"), "\n ")
27
- },
28
- ".sidebar-collapsed": {
29
- width: "80px"
30
- }
31
- });
32
- addComponents({
33
- ".sidebar-link": {
34
- display: "flex",
35
- alignItems: "center",
36
- padding: "".concat(theme("spacing.2"), " ").concat(theme("spacing.6")),
37
- color: "inherit",
38
- height: "2.5rem",
39
- cursor: "pointer",
40
- transition: "background-color 100ms ease-in-out",
41
- "&, &:hover": {
42
- textDecoration: "none",
43
- outline: "none"
44
- },
45
- "&:hover, &:focus, &.sidebar-link-active": {
46
- backgroundColor: theme("colors.grey.950"),
47
- color: theme("colors.white")
48
- },
49
- "&.sidebar-link-active": {
50
- boxShadow: borderLeftInsetShadow(theme("colors.accent.500"))
51
- }
52
- },
53
- ".sidebar-link-light": {
54
- backgroundColor: "transparent",
55
- color: theme("colors.grey.600"),
56
- "&:hover, &:focus, &.sidebar-link-active": {
57
- backgroundColor: theme("colors.grey.100"),
58
- color: theme("colors.grey.900")
59
- },
60
- "&.sidebar-link-active": {
61
- boxShadow: borderLeftInsetShadow(theme("colors.accent.600"))
62
- }
63
- }
64
- });
65
- });
66
- module.exports = sidebarPlugin;
@@ -1,5 +0,0 @@
1
- import type { DetailedHTMLProps, HTMLAttributes } from "react";
2
- export interface SidebarHeaderProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
3
- }
4
- export declare const SidebarHeader: ({ className, children, ...headingProps }: SidebarHeaderProps) => JSX.Element;
5
- export default SidebarHeader;
@@ -1,10 +0,0 @@
1
- import type { AnchorHTMLAttributes, DetailedHTMLProps, FunctionComponent, ReactNode } from "react";
2
- import type { IconComponentType } from "../../types";
3
- import matchLocation from "../../utils/matchLocation";
4
- export interface SidebarLinkProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
5
- icon?: IconComponentType;
6
- active?: typeof matchLocation | boolean;
7
- children: ReactNode;
8
- }
9
- export declare const SidebarLink: FunctionComponent<SidebarLinkProps>;
10
- export default SidebarLink;
@@ -1,98 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.SidebarLink = void 0;
9
-
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
-
16
- var _classnames = _interopRequireDefault(require("classnames"));
17
-
18
- var _reactFeather = require("react-feather");
19
-
20
- var _useLocation2 = _interopRequireDefault(require("react-use/lib/useLocation"));
21
-
22
- var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
23
-
24
- var _Tooltip = require("../../Tooltip");
25
-
26
- var _matchLocation = _interopRequireDefault(require("../../utils/matchLocation"));
27
-
28
- var _useLinkProps = _interopRequireDefault(require("../../utils/useLinkProps"));
29
-
30
- var _SidebarContext = require("../SidebarContext");
31
-
32
- var _jsxRuntime = require("react/jsx-runtime");
33
-
34
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
35
-
36
- var _excluded = ["className", "children", "active", "icon"];
37
-
38
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
39
-
40
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
41
-
42
- var IdentityWrapper = function IdentityWrapper(_ref) {
43
- var children = _ref.children;
44
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
45
- children: children
46
- });
47
- };
48
-
49
- var SidebarLink = function SidebarLink(_ref2) {
50
- var className = _ref2.className,
51
- children = _ref2.children,
52
- _ref2$active = _ref2.active,
53
- active = _ref2$active === void 0 ? _matchLocation["default"] : _ref2$active,
54
- Icon = _ref2.icon,
55
- anchorProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
56
-
57
- var _useLocation = (0, _useLocation2["default"])(),
58
- _useLocation$pathname = _useLocation.pathname,
59
- pathname = _useLocation$pathname === void 0 ? "" : _useLocation$pathname;
60
-
61
- var satelliteLinkProps = (0, _useLinkProps["default"])(anchorProps);
62
-
63
- var _useSidebarContext = (0, _SidebarContext.useSidebarContext)(),
64
- variant = _useSidebarContext.variant,
65
- collapsed = _useSidebarContext.collapsed;
66
-
67
- var showActive = Boolean(anchorProps.href && typeof active === "function" ? active(anchorProps.href, {
68
- pathname: pathname
69
- }) : active);
70
- var activeIconBackground = variant === "light" ? "bg-accent-200" : "bg-grey-800";
71
- var Wrapper = collapsed ? _Tooltip.TooltipWrapper : IdentityWrapper;
72
- var isExternalLink = satelliteLinkProps.target === "_blank";
73
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
74
- wrapperClassName: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"]))),
75
- content: children,
76
- tooltipVariant: "light",
77
- placement: "right",
78
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", _objectSpread(_objectSpread(_objectSpread({}, anchorProps), satelliteLinkProps), {}, {
79
- className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["sidebar-link display-body\n ", "\n ", "\n "])), variant === "light" && "sidebar-link-light", showActive && "sidebar-link-active"), className),
80
- children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
81
- className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n shrink-0\n ml-1 mr-2 h-6 w-6\n flex items-center justify-center\n text-inherit rounded\n ", "\n "])), showActive && activeIconBackground),
82
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
83
- size: "1rem"
84
- })
85
- }), !collapsed && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
86
- className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex-1 truncate ", ""])), !Icon && "ml-2"),
87
- children: children
88
- }), !collapsed && isExternalLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFeather.ExternalLink, {
89
- className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))),
90
- size: "1em"
91
- })]
92
- }))
93
- });
94
- };
95
-
96
- exports.SidebarLink = SidebarLink;
97
- var _default = SidebarLink;
98
- exports["default"] = _default;
@@ -1,86 +0,0 @@
1
- import type { CSSProperties, FunctionComponent, ReactNode } from "react";
2
- import type { ColorVariant, IconComponentType } from "../types";
3
- export declare type BannerContextType = "page" | "section" | "content" | "inline";
4
- export interface BannerPropsBase {
5
- /** @ignore */
6
- className?: string;
7
- /** @ignore */
8
- style?: CSSProperties;
9
- /** @default grey */
10
- variant?: ColorVariant;
11
- icon?: boolean | IconComponentType;
12
- onDismiss?(): void;
13
- children: ReactNode;
14
- }
15
- export interface BannerPageProps extends BannerPropsBase {
16
- /**
17
- * Usage context description
18
- * @default page
19
- */
20
- usageContext?: "page";
21
- }
22
- export interface BannerDefaultProps extends BannerPropsBase {
23
- /**
24
- * Usage context description
25
- * @default content
26
- */
27
- usageContext?: "inline" | "content" | "section";
28
- /** Descriptive title for the `Banner` */
29
- title?: ReactNode;
30
- }
31
- export declare type BannerProps = BannerPageProps | BannerDefaultProps;
32
- /** @deprecated use the new `Alert` component instead */
33
- /**
34
- * <p className="stl-space-x-2"><span className="stl-bg-orange-200 stl-font-bold stl-text-orange-800 stl-px-2 stl-py-1.5 stl-rounded">🌇 Sunsetting</span><span>use the new `Alert` component instead</span></p>
35
- *
36
- * Banners inform users about important changes or persistent conditions. Use this component if you need
37
- * to communicate to users in a prominent way. Take in consideration 3 levels of hierarchy when deciding
38
- * on the appropriate banner to use:
39
- *
40
- * #### Page banner
41
- * - Use this banner to display critical messages about data, functionality or any other site-wide information you want to convey
42
- * - Place this banner at the top of the page and make sure it occupies the full width of the content area
43
- *
44
- * #### Section banner
45
- * - Use this banner to display a message that relates to a section of the page the user is in, e.g. billing details
46
- * - Place this banner inside the section (e.g. card, popover, modal), below the heading
47
- *
48
- * #### In-card banner
49
- * - Use this banner to display a message that relates to a specific part of the section, e.g. no events for personalization strategy
50
- * - Place this banner immediately above or below the element it relates to most
51
- *
52
- * ## Variantions
53
- * Consider the context and implied severity to choose from the following range:
54
- *
55
- * - **Accent**: `variant="accent"`
56
- * - **Informational**: `variant="gray"` & `variant="blue"`
57
- * - **Warning**: `variant="orange"`
58
- * - **Error**: `variant="red"`
59
- * - **Success**: `variant="green"`
60
- *
61
- * ## Content guidelines
62
- * #### Title
63
- * - Use simple, clear language
64
- * - Keep headings to a single sentence
65
- * - Avoid using punctuation such as periods, commas, or semicolons
66
- *
67
- * #### Body
68
- * - Be concise, keep content to 1 to 2 sentences max
69
- * - Clarify the benefit of the main task
70
- * - Explain how to resolve the issue, particularly for warning and error banners
71
- * - Avoid repeating the heading
72
- *
73
- * #### Buttons and links
74
- * - Keep them short, clear and predictable
75
- * - Start with verb that encourages action
76
- * - Avoid unnecessary words
77
- * - Link should set the expectation of where users will be taken
78
- *
79
- * #### Usability best practices
80
- * - Make sure banners appear one at the time and disappear once the issue is resolved
81
- * - Make them dismissible even if they contain critical information or an important step users need to take
82
- * - Make them concise and scannable—users shouldn't need to spend a lot of time figuring out what they need to know and do
83
- * - Use an appropriate color and icon for success, info, warning and error states
84
- */
85
- export declare const Banner: FunctionComponent<BannerProps>;
86
- export default Banner;
@@ -1,161 +0,0 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
-
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36;
4
-
5
- import cx from "classnames";
6
- import { AlertCircle, AlertOctagon, AlertTriangle, CheckCircle, X } from "react-feather";
7
- import { IconButton } from "../Button";
8
- import stl from "../styles/helpers/satellitePrefixer";
9
- import { jsx as _jsx } from "react/jsx-runtime";
10
- import { jsxs as _jsxs } from "react/jsx-runtime";
11
-
12
- function isBannerDefaultProps(props) {
13
- return props.usageContext !== "page";
14
- }
15
-
16
- var BASE_CLASSNAME = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["relative flex text-grey-900 display-body"])));
17
- var BACKGROUND_CLASSNAMES = {
18
- grey: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["bg-grey-100"]))),
19
- accent: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-accent-100"]))),
20
- blue: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["bg-blue-100"]))),
21
- green: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["bg-green-100"]))),
22
- orange: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["bg-orange-100"]))),
23
- red: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["bg-red-100"])))
24
- };
25
- var BORDER_CLASSNAMES = {
26
- grey: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["border-grey-500"]))),
27
- accent: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["border-accent-500"]))),
28
- blue: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-blue-500"]))),
29
- green: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["border-green-500"]))),
30
- orange: stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["border-orange-500"]))),
31
- red: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["border-red-500"])))
32
- };
33
- var ELEVATION_CLASSNAMES = {
34
- inline: "",
35
- content: "",
36
- section: stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["shadow-z100"]))),
37
- page: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["shadow-z300"])))
38
- };
39
- var ICON_VARIANTS = {
40
- grey: AlertCircle,
41
- accent: AlertCircle,
42
- blue: AlertCircle,
43
- green: CheckCircle,
44
- orange: AlertTriangle,
45
- red: AlertOctagon
46
- };
47
- var ICON_CLASSNAME_VARIANTS = {
48
- grey: stl(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["text-grey-500"]))),
49
- accent: stl(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["text-accent-500"]))),
50
- blue: stl(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["text-blue-500"]))),
51
- green: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["text-green-700"]))),
52
- orange: stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["text-orange-500"]))),
53
- red: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["text-red-500"])))
54
- };
55
- var TITLE_CLASSNAME_VARIANTS = {
56
- grey: stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["text-grey-900"]))),
57
- accent: stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["text-accent-900"]))),
58
- blue: stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["text-blue-900"]))),
59
- green: stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["text-green-900"]))),
60
- orange: stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["text-orange-900"]))),
61
- red: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["text-red-900"])))
62
- };
63
- /** @deprecated use the new `Alert` component instead */
64
-
65
- /**
66
- * <p className="stl-space-x-2"><span className="stl-bg-orange-200 stl-font-bold stl-text-orange-800 stl-px-2 stl-py-1.5 stl-rounded">🌇 Sunsetting</span><span>use the new `Alert` component instead</span></p>
67
- *
68
- * Banners inform users about important changes or persistent conditions. Use this component if you need
69
- * to communicate to users in a prominent way. Take in consideration 3 levels of hierarchy when deciding
70
- * on the appropriate banner to use:
71
- *
72
- * #### Page banner
73
- * - Use this banner to display critical messages about data, functionality or any other site-wide information you want to convey
74
- * - Place this banner at the top of the page and make sure it occupies the full width of the content area
75
- *
76
- * #### Section banner
77
- * - Use this banner to display a message that relates to a section of the page the user is in, e.g. billing details
78
- * - Place this banner inside the section (e.g. card, popover, modal), below the heading
79
- *
80
- * #### In-card banner
81
- * - Use this banner to display a message that relates to a specific part of the section, e.g. no events for personalization strategy
82
- * - Place this banner immediately above or below the element it relates to most
83
- *
84
- * ## Variantions
85
- * Consider the context and implied severity to choose from the following range:
86
- *
87
- * - **Accent**: `variant="accent"`
88
- * - **Informational**: `variant="gray"` & `variant="blue"`
89
- * - **Warning**: `variant="orange"`
90
- * - **Error**: `variant="red"`
91
- * - **Success**: `variant="green"`
92
- *
93
- * ## Content guidelines
94
- * #### Title
95
- * - Use simple, clear language
96
- * - Keep headings to a single sentence
97
- * - Avoid using punctuation such as periods, commas, or semicolons
98
- *
99
- * #### Body
100
- * - Be concise, keep content to 1 to 2 sentences max
101
- * - Clarify the benefit of the main task
102
- * - Explain how to resolve the issue, particularly for warning and error banners
103
- * - Avoid repeating the heading
104
- *
105
- * #### Buttons and links
106
- * - Keep them short, clear and predictable
107
- * - Start with verb that encourages action
108
- * - Avoid unnecessary words
109
- * - Link should set the expectation of where users will be taken
110
- *
111
- * #### Usability best practices
112
- * - Make sure banners appear one at the time and disappear once the issue is resolved
113
- * - Make them dismissible even if they contain critical information or an important step users need to take
114
- * - Make them concise and scannable—users shouldn't need to spend a lot of time figuring out what they need to know and do
115
- * - Use an appropriate color and icon for success, info, warning and error states
116
- */
117
-
118
- export var Banner = function Banner(props) {
119
- var _props$usageContext = props.usageContext,
120
- usageContext = _props$usageContext === void 0 ? "content" : _props$usageContext,
121
- _props$variant = props.variant,
122
- variant = _props$variant === void 0 ? "grey" : _props$variant,
123
- onDismiss = props.onDismiss,
124
- className = props.className,
125
- style = props.style,
126
- children = props.children;
127
- var containerClassName = cx(BASE_CLASSNAME, usageContext !== "inline" ? "".concat(stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["border-t-3 p-4"]))), " ").concat(BORDER_CLASSNAMES[variant]) : stl(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["py-2 px-3"]))), ELEVATION_CLASSNAMES[usageContext], ["inline", "content"].includes(usageContext) ? BACKGROUND_CLASSNAMES[variant] : stl(_templateObject30 || (_templateObject30 = _taggedTemplateLiteral(["bg-white"]))), usageContext !== "page" && stl(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["rounded"]))), className);
128
- var icon = props.icon === undefined ? usageContext !== "page" : props.icon;
129
- var Icon = typeof icon === "boolean" && icon ? ICON_VARIANTS[variant] : icon;
130
- var subduedContent = Boolean(isBannerDefaultProps(props) && usageContext === "section" && props.title);
131
- return /*#__PURE__*/_jsxs("div", {
132
- className: containerClassName,
133
- style: style,
134
- children: [Icon && /*#__PURE__*/_jsx(Icon, {
135
- className: cx(stl(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n shrink-0\n ", "\n ", "\n "])), usageContext !== "inline" ? "mr-4" : "mr-2", isBannerDefaultProps(props) && props.title ? "mt-1" : "mt-2px"), ICON_CLASSNAME_VARIANTS[variant]),
136
- size: "1rem"
137
- }), /*#__PURE__*/_jsxs("div", {
138
- className: stl(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["flex flex-1 flex-col ", ""])), onDismiss && "mr-2"),
139
- children: [isBannerDefaultProps(props) && props.title && /*#__PURE__*/_jsx("h4", {
140
- className: cx(stl(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["display-heading mb-1"]))), TITLE_CLASSNAME_VARIANTS[variant]),
141
- children: props.title
142
- }), /*#__PURE__*/_jsx("div", {
143
- className: stl(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["", " ", ""])), usageContext === "page" && "text-center", subduedContent && "text-grey-600"),
144
- children: children
145
- })]
146
- }), onDismiss && /*#__PURE__*/_jsx("span", {
147
- className: stl(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["absolute top-2 right-2"]))),
148
- children: /*#__PURE__*/_jsx(IconButton, {
149
- title: "Close",
150
- variant: "subtle",
151
- size: "small",
152
- icon: X,
153
- onClick: function onClick(evt) {
154
- evt.stopPropagation();
155
- onDismiss();
156
- }
157
- })
158
- })]
159
- });
160
- };
161
- export default Banner;