@arc-ui/components 5.0.0 → 6.2.0

package/dist/index.es.js

@@ -369,6 +369,10 @@ var BrandLogo = function (_a) {
         } }, filterDataAttrs(props)), label ? React.createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
 };
 
+/**
+ * Do not edit directly
+ * Generated file
+ */
 const ArcBreakpointM = 768;
 const ArcBreakpointL = 1024;
 const iconsSelected = [
@@ -686,8 +690,8 @@ var Button = forwardRef(function (_a, ref) {
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
     return (React.createElement("span", { className: classNames({
-            "arc-ButtonIcon": true,
-            "arc-ButtonIcon--chevron": isChevron
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
         }) }, isChevron ? (React.createElement(Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "2px") })) : (React.createElement(Icon, { icon: icon }))));
 };
 
@@ -731,7 +735,7 @@ var Heading = function (_a) {
 };
 var HeadingProposition = function (_a) {
     var children = _a.children;
-    return React.createElement("span", { className: "arc-HeadingProposition" }, children);
+    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
 };
 HeadingProposition.displayName = "Heading.Proposition";
 Heading.Proposition = HeadingProposition;
@@ -889,13 +893,13 @@ var Card = function (_a) {
 var CardBlock = function (_a) {
     var _b = _a.align, align = _b === void 0 ? "left" : _b, children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d;
     return (React.createElement("div", { className: classNames({
-            "arc-CardBlock": true,
-            "arc-CardBlock--alignCenter": align === "center",
-            "arc-CardBlock--alignRight": align === "right",
-            "arc-CardBlock--fullWidth": isFullWidth,
-            "arc-CardBlock--grow": grow
+            "arc-Card-block": true,
+            "arc-Card-block--alignCenter": align === "center",
+            "arc-Card-block--alignRight": align === "right",
+            "arc-Card-block--fullWidth": isFullWidth,
+            "arc-Card-block--grow": grow
         }) },
-        React.createElement("div", { className: "arc-CardBlock-inner" }, children)));
+        React.createElement("div", { className: "arc-Card-blockInner" }, children)));
 };
 CardBlock.displayName = "Card.Block";
 Card.Block = CardBlock;
@@ -905,7 +909,7 @@ Card.Block = CardBlock;
 var CardImage = function (_a) {
     var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, src = _a.src, srcSet = _a.srcSet;
     return (React.createElement("div", { className: classNames({
-            "arc-CardImage": true
+            "arc-Card-image": true
         }) },
         React.createElement(Image, { alt: alt, fit: "cover", src: src, srcSet: srcSet, height: height })));
 };
@@ -918,13 +922,13 @@ var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, stretch = _a.stretch, target = _a.target;
     var surface = useContext(Context$3).surface;
     return (React.createElement("a", { "aria-describedby": actionId, className: classNames({
-            "arc-CardLink": true,
-            "arc-CardLink--button": isButton,
-            "arc-CardLink--onDarkSurface": surface === "dark" && fill !== "neutral",
-            "arc-CardLink--stretch": stretch
+            "arc-Card-link": true,
+            "arc-Card-link--button": isButton,
+            "arc-Card-link--onDarkSurface": surface === "dark" && fill !== "neutral",
+            "arc-Card-link--stretch": stretch
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target },
-        React.createElement("span", { className: "arc-CardLink-text" }, children),
-        isButton && (React.createElement("span", { className: "arc-CardLink-icon" },
+        React.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
             React.createElement(Icon, { icon: "btChevronRight2px", size: 8 })))));
 };
 
@@ -967,7 +971,6 @@ var FormControl = function (_a) {
             }), id: id }, elementProps, filterDataAttrs(props)),
             React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
-                " ",
                 requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
             helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
@@ -1008,7 +1011,6 @@ var Checkbox = forwardRef(function (_a, ref) {
             React.createElement("span", { className: "arc-Checkbox-box" }),
             React.createElement("span", null,
                 label,
-                " ",
                 !isRequired && requirementStatus !== "optional" ? (React.createElement("span", { className: "arc-Checkbox-labelOptional" }, "(optional)")) : null,
                 helper && React.createElement("span", { className: "arc-Checkbox-helper" }, helper))),
         errorMessage && (React.createElement("div", { id: idError, className: "arc-Checkbox-error" }, errorMessage))));
@@ -1066,24 +1068,24 @@ var Col = function (_a) {
     var _b;
     var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-Col"] = true,
-            _b[suffixModifier("arc-Col--align", align || "")] = align,
-            _b["arc-Col--".concat(span)] = typeof span !== "undefined",
-            _b["arc-Col--S".concat(spanS)] = typeof spanS !== "undefined",
-            _b["arc-Col--M".concat(spanM)] = typeof spanM !== "undefined",
-            _b["arc-Col--L".concat(spanL)] = typeof spanL !== "undefined",
-            _b["arc-Col--XL".concat(spanXL)] = typeof spanXL !== "undefined",
-            _b["arc-Col--offset"] = typeof offset !== "undefined" ||
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
                 typeof offsetS !== "undefined" ||
                 typeof offsetM !== "undefined" ||
                 typeof offsetL !== "undefined" ||
                 typeof offsetXL !== "undefined",
-            _b["arc-Col--offset".concat(offset)] = typeof offset !== "undefined",
-            _b["arc-Col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
-            _b["arc-Col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
-            _b["arc-Col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
-            _b["arc-Col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
-            _b["arc-Col--debugVisible"] = isDebugVisible,
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
 Col.displayName = "Columns.Col";
@@ -1164,9 +1166,9 @@ var GroupItem = function (_a) {
     var _b;
     var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = __rest(_a, ["children", "grow", "isDebugVisible"]);
     return (React.createElement("div", __assign({ className: classNames((_b = {},
-            _b["arc-GroupItem"] = true,
-            _b["arc-GroupItem--grow"] = grow,
-            _b["arc-GroupItem--debugVisible"] = isDebugVisible,
+            _b["arc-Group-item"] = true,
+            _b["arc-Group-item--grow"] = grow,
+            _b["arc-Group-item--debugVisible"] = isDebugVisible,
             _b)) }, filterDataAttrs(props)), children));
 };
 GroupItem.displayName = "Group.Item";
@@ -1249,9 +1251,6 @@ var RadioContext = createContext({});
 var Provider$2 = RadioContext.Provider;
 var useRadioContext = function () {
     var context = useContext(RadioContext);
-    if (!context) {
-        console.warn("Ensure to use <RadioGroup.RadioButton /> within the <RadioGroup /> or its branded version.");
-    }
     return context;
 };
 
@@ -1260,10 +1259,10 @@ var useRadioContext = function () {
  */
 var RadioButton = forwardRef(function (_a, ref) {
     var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
-    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, isChecked = _b.isChecked, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
     var surface = useContext(Context$3).surface;
     var idLabel = "".concat(id, "-label");
-    var checked = isChecked === value ? true : false;
+    var checked = checkedValue === value ? true : false;
     return (React.createElement("div", __assign({ className: classNames({
             "arc-RadioButton": true,
             "arc-RadioButton--disabled": isDisabled || groupDisabled,
@@ -1282,12 +1281,19 @@ var RadioButton = forwardRef(function (_a, ref) {
  * Use `RadioGroup` to wrap and control radio buttons and apply default values
  */
 var RadioGroup = function (_a) {
-    var children = _a.children, defaultValue = _a.defaultValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "defaultValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== RadioButton) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
     return (React.createElement(Provider$2, { value: {
             blurEvent: onBlur,
             changeEvent: onChange,
             groupDisabled: isDisabled,
-            isChecked: defaultValue,
+            checkedValue: checkedValue,
             labelSize: labelSize,
             name: name,
             size: size
@@ -1506,7 +1512,9 @@ var Panel = function (_a) {
                 // and the click is not on a SubNavItem-link.
                 // This ensures that one SubNavItem Panel per NavItem always remains open.
                 (subNavItemRef &&
-                    !e.target.classList.contains(subNavLink)) ||
+                    !e.target.classList.contains(subNavLink) &&
+                    !e.target.classList.contains("".concat(subNavLink, "Title")) &&
+                    !e.target.classList.contains("".concat(subNavLink, "SubTitle"))) ||
                 // Panel is inside a SubNavItem
                 // and the click is not inside the Panel's NavItem parent.
                 // This prevents SubNavItem Panels in sibling NavItems from being closed.
@@ -1634,12 +1642,31 @@ var NavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void
     });
 }); });
 
+/**
+ * Use `Text` to display text.
+ */
+var Text = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
+    var surface = useContext(Context$3).surface;
+    return (React.createElement("span", __assign({ className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+
 var SubNavItem = function (_a) {
     var _b, _c;
-    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, promo = _a.promo, title = _a.title, props = __rest(_a, ["children", "isDefaultItem", "href", "promo", "title"]);
-    var _e = useContext(Context$1), navItem = _e.navItem, subTitle = _e.subTitle;
+    var children = _a.children, _d = _a.isDefaultItem, isDefaultItem = _d === void 0 ? false : _d, href = _a.href, offsetXL = _a.offsetXL, promo = _a.promo, subTitle = _a.subTitle, title = _a.title, viewAllTitle = _a.viewAllTitle, props = __rest(_a, ["children", "isDefaultItem", "href", "offsetXL", "promo", "subTitle", "title", "viewAllTitle"]);
+    var navItem = useContext(Context$1).navItem;
     var subNavItem = useRef();
-    var _f = useState(false), panelOpen = _f[0], setPanelOpen = _f[1];
+    var _e = useState(false), panelOpen = _e[0], setPanelOpen = _e[1];
     var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(ArcBreakpointL, "px)"));
     useEffect(function () {
         React.Children.map(children, function (item) {
@@ -1659,52 +1686,75 @@ var SubNavItem = function (_a) {
             setPanelOpen(false);
         }
     }, [isDefaultItem, isMinWidthArcBreakpointL]);
+    var linkTitle = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkTitle" }, title),
+        subTitle ? (React.createElement("span", { className: "arc-SiteHeaderSubNavItem-linkSubTitle" }, subTitle)) : null));
     return (React.createElement("li", __assign({ className: classNames((_b = {},
             _b["arc-SiteHeaderSubNavItem"] = true,
             _b["arc-SiteHeaderSubNavItem--linkSelected"] = children && panelOpen,
-            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", href: href }, title)) : null) : (React.createElement(React.Fragment, null,
+            _b[suffixModifier("arc-SiteHeaderSubNavItem--offsetXL", offsetXL || "")] = offsetXL,
+            _b)), ref: subNavItem }, filterDataAttrs(props), { "data-default-item": isDefaultItem || null }), !children ? (href ? (React.createElement("a", { className: "arc-SiteHeaderSubNavItem-link", href: href }, linkTitle)) : null) : (React.createElement(React.Fragment, null,
         React.createElement("button", { "aria-expanded": panelOpen, className: classNames((_c = {},
                 _c["arc-SiteHeaderSubNavItem-link"] = true,
                 _c["arc-SiteHeaderSubNavItem-link--itemHasChildren"] = children,
                 _c)), onClick: function () {
                 setPanelOpen(true);
-            } }, title),
-        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement(React.Fragment, null,
-                subTitle && "".concat(subTitle, " "),
-                React.createElement("b", null, title)) }, children)))));
+            } }, linkTitle),
+        React.createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React.createElement("span", null,
+                title,
+                subTitle && (React.createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React.createElement(Panel.ViewAll, { href: href, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : (undefined) }, children)))));
 };
 
 var SubNavItemRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var children, promo, link, href, title, props;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var children, promo, link, linkTitle, viewAll, href, title, offsetXL, props;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
             case 0:
                 children = el.querySelector(".arc-SiteHeaderPanel-items");
                 promo = el.querySelector(".arc-SiteHeaderPanel-promo");
                 if (!children) return [3 /*break*/, 2];
                 return [4 /*yield*/, hydrate(children)];
             case 1:
-                children = _a.sent();
-                _a.label = 2;
+                children = _b.sent();
+                _b.label = 2;
             case 2:
                 if (!promo) return [3 /*break*/, 4];
                 return [4 /*yield*/, hydrate(promo)];
             case 3:
-                promo = _a.sent();
-                _a.label = 4;
+                promo = _b.sent();
+                _b.label = 4;
             case 4:
                 link = el.querySelector(".arc-SiteHeaderSubNavItem-link");
+                linkTitle = el.querySelector(".arc-SiteHeaderSubNavItem-linkTitle");
+                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
                 href = "";
                 title = "";
                 if (link) {
                     href = link.getAttribute("href") || /* istanbul ignore next */ "";
-                    title = link.textContent || /* istanbul ignore next */ "";
+                }
+                if (linkTitle) {
+                    title = linkTitle.textContent || /* istanbul ignore next */ "";
+                }
+                if (viewAll) {
+                    href = viewAll.getAttribute("href") || /* istanbul ignore next */ "";
+                }
+                offsetXL = undefined;
+                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL24")) {
+                    offsetXL = "24";
+                }
+                if (el.classList.contains("arc-SiteHeaderSubNavItem--offsetXL48")) {
+                    offsetXL = "48";
                 }
                 props = {
                     href: href,
                     isDefaultItem: Boolean(el.dataset.defaultItem),
+                    offsetXL: offsetXL,
                     promo: promo || undefined,
-                    title: title
+                    subTitle: ((_a = el.querySelector(".arc-SiteHeaderSubNavItem-linkSubTitle")) === null || _a === void 0 ? void 0 : _a.textContent) ||
+                        undefined,
+                    title: title,
+                    viewAllTitle: (viewAll === null || viewAll === void 0 ? void 0 : viewAll.textContent) || undefined
                 };
                 return [2 /*return*/, React.createElement(SubNavItem, __assign({}, props), children)];
         }
@@ -1771,7 +1821,7 @@ function wrap(el, wrapper) {
     wrapper.appendChild(el);
 }
 var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(void 0, void 0, void 0, function () {
-    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAll, title, props;
+    var subNavItem1, subNavItem2, subNavItem3, div1, div2, slot1, slot2, slot3, div3, link, subTitle, viewAllNodes, viewAll, title, props;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
@@ -1801,7 +1851,8 @@ var NavItemWithSubNavRehydrator = (function (el, hydrate) { return __awaiter(voi
             case 4:
                 link = el.querySelector(".arc-SiteHeaderNavItem-link");
                 subTitle = el.querySelector(".arc-SiteHeaderPanel-title");
-                viewAll = el.querySelector(".arc-SiteHeaderPanel-viewAll");
+                viewAllNodes = el.querySelectorAll(".arc-SiteHeaderPanel-viewAll");
+                viewAll = viewAllNodes[viewAllNodes.length - 1];
                 title = "";
                 if (link) {
                     title = link.textContent || /* istanbul ignore next */ "";
@@ -1968,25 +2019,6 @@ SiteHeaderRehydrator.NavItemRehydrator = NavItemRehydrator;
 SiteHeaderRehydrator.NavItemWithSubNavRehydrator = NavItemWithSubNavRehydrator;
 SiteHeaderRehydrator.SubNavItemRehydrator = SubNavItemRehydrator;
 
-/**
- * Use `Text` to display text.
- */
-var Text = function (_a) {
-    var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
-    var surface = useContext(Context$3).surface;
-    return (React.createElement("span", __assign({ className: classNames((_b = {
-                "arc-Text": true
-            },
-            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
-            _b["arc-Text--inline"] = isInline,
-            _b["arc-Text--measured"] = isMeasured,
-            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b["arc-Text--".concat(tone)] = tone !== "default",
-            _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs(props)), children));
-};
-
 /**
  * Use `TextInput` to allow custom user text entry with a keyboard.
  */