@rijkshuisstijl-community/web-components 1.0.1-alpha.16 → 1.0.1-alpha.17

package/dist/index.mjs

@@ -3093,7 +3093,7 @@ HTMLHeading.displayName = 'HTMLHeading';
 var _excluded$1i = ["appearance", "className", "level"];
 function ownKeys$1j(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Heading$1 = /*#__PURE__*/reactExports.forwardRef(function (_ref, ref) {
+var Heading$2 = /*#__PURE__*/reactExports.forwardRef(function (_ref, ref) {
   var appearance = _ref.appearance,
     className = _ref.className,
     level = _ref.level,
@@ -3107,7 +3107,7 @@ var Heading$1 = /*#__PURE__*/reactExports.forwardRef(function (_ref, ref) {
     ref: ref
   }));
 });
-Heading$1.displayName = 'Heading';
+Heading$2.displayName = 'Heading';
 
 var _excluded$1h = ["id", "label", "className", "headingLevel", "expanded", "disabled", "section", "children", "buttonRef", "onActivate", "onButtonBlur", "onButtonFocus", "icon", "appearance"],
   _excluded2$7 = ["children", "group", "headingLevel", "heading"];
@@ -3266,7 +3266,7 @@ var Accordion = /*#__PURE__*/reactExports.forwardRef(function (_ref2, ref) {
     props = _objectWithoutProperties(_ref2, _excluded2$7);
   var headingId = reactExports.useId();
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-    children: [!!heading && typeof headingLevel === 'number' && jsxRuntimeExports.jsx(Heading$1, {
+    children: [!!heading && typeof headingLevel === 'number' && jsxRuntimeExports.jsx(Heading$2, {
       level: headingLevel,
       children: heading
     }), jsxRuntimeExports.jsx("div", _objectSpread$1i(_objectSpread$1i({
@@ -3629,7 +3629,7 @@ var BreadcrumbNav = /*#__PURE__*/reactExports.forwardRef(function (_ref2, ref) {
       'utrecht-breadcrumb-nav--arrows': appearance === 'arrows'
     }, className),
     "aria-labelledby": headingId,
-    children: [label && jsxRuntimeExports.jsx(Heading$1, {
+    children: [label && jsxRuntimeExports.jsx(Heading$2, {
       id: headingId,
       className: "utrecht-breadcrumb-nav__heading",
       level: headingLevel,
@@ -5561,6 +5561,23 @@ var UnorderedListItem = /*#__PURE__*/reactExports.forwardRef(function (_ref, ref
 });
 UnorderedListItem.displayName = 'UnorderedListItem';
 
+var _excluded = ["level", "appearance", "children", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Heading$1 = /*#__PURE__*/reactExports.forwardRef(function Heading(props, forwardedRef) {
+  var level = props.level,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? "level-".concat(level) : _props$appearance,
+    children = props.children,
+    className = props.className,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var type = "h".concat(level);
+  return /*#__PURE__*/reactExports.createElement(type, _objectSpread({
+    className: clsx$9('nl-heading', "nl-heading--".concat(appearance), className),
+    ref: forwardedRef
+  }, restProps), children);
+});
+
 /**
  * @license @tabler/icons-react v3.28.1 - MIT
  *
@@ -6395,24 +6412,24 @@ var IconVolume = createReactComponent("outline", "volume", "IconVolume", [["path
 
 var IconX = createReactComponent("outline", "x", "IconX", [["path", { "d": "M18 6l-12 12", "key": "svg-0" }], ["path", { "d": "M6 6l12 12", "key": "svg-1" }]]);
 
-var _excluded = ["level", "appearance", "children", "className"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Heading = /*#__PURE__*/reactExports.forwardRef(function Heading(props, forwardedRef) {
-  var level = props.level,
-    _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? "level-".concat(level) : _props$appearance,
-    children = props.children,
-    className = props.className,
-    restProps = _objectWithoutProperties(props, _excluded);
-  var type = "h".concat(level);
-  return /*#__PURE__*/reactExports.createElement(type, _objectSpread({
-    className: clsx$9('nl-heading', "nl-heading--".concat(appearance), className),
-    ref: forwardedRef
-  }, restProps), children);
-});
-
 ButtonGroup.displayName = 'ActionGroup';
+const Heading = ({
+  children,
+  level,
+  appearanceLevel = level,
+  className,
+  ref,
+  ...restProps
+}) => {
+  return jsxRuntimeExports.jsx(Heading$1, {
+    appearance: `level-${appearanceLevel}`,
+    className: clsx$9('rhc-heading', className),
+    level: level,
+    ref: ref,
+    ...restProps,
+    children: children
+  });
+};
 
 const DutchMapIcon = () => jsxRuntimeExports.jsx("svg", {
   viewBox: "0 0 48 57",
@@ -6529,7 +6546,8 @@ const Alert = ({
   ref,
   type,
   heading,
-  headingLevel,
+  headingLevel = 3,
+  headingAppearanceLevel = 5,
   textContent,
   children,
   ...restProps
@@ -6551,8 +6569,8 @@ const Alert = ({
       })
     }), jsxRuntimeExports.jsxs("div", {
       children: [heading && jsxRuntimeExports.jsx(Heading, {
-        appearance: "level-5",
-        level: headingLevel || 3,
+        appearanceLevel: headingAppearanceLevel,
+        level: headingLevel,
         children: heading
       }), jsxRuntimeExports.jsx(Paragraph, {
         children: textContent
@@ -7005,16 +7023,10 @@ Fieldset.displayName = 'Fieldset';
 const FieldsetOnly = reactExports.forwardRef(({ className, children, disabled, invalid, ...restProps }, ref) => (jsxRuntimeExports.jsx("fieldset", { ...restProps, ref: ref, "aria-invalid": invalid || undefined, disabled: disabled, className: clsx('utrecht-form-fieldset', 'utrecht-form-fieldset--html-fieldset', disabled && 'utrecht-form-fieldset--disabled', invalid && 'utrecht-form-fieldset--invalid', className), children: children })));
 FieldsetOnly.displayName = 'Fieldset';
 
-const MAX_APPEARANCE_LEVEL = 'level-6';
-const getValidAppearanceLevel = level => {
-  const levelNumber = parseInt(level.replace('level-', ''), 2);
-  const maxNumber = parseInt(MAX_APPEARANCE_LEVEL.replace('level-', ''), 2);
-  return levelNumber > maxNumber ? MAX_APPEARANCE_LEVEL : level;
-};
 const Footer = /*#__PURE__*/reactExports.forwardRef(({
   className,
   heading,
-  appearanceLevel = 'level-2',
+  appearanceLevel = 2,
   columns,
   children,
   background,
@@ -7028,19 +7040,19 @@ const Footer = /*#__PURE__*/reactExports.forwardRef(({
     children: [heading && jsxRuntimeExports.jsx("div", {
       className: "rhc-page-footer__title",
       children: jsxRuntimeExports.jsx(Heading, {
-        appearance: getValidAppearanceLevel(appearanceLevel),
+        appearanceLevel: appearanceLevel,
         level: heading ? 2 : 3,
         children: heading
       })
     }, 'heading'), jsxRuntimeExports.jsxs(ColumnLayout, {
       children: [columns?.map(({
         heading: columnHeading,
-        appearanceLevel: columnAppearanceLevel = 'level-3',
+        appearanceLevel: columnAppearanceLevel = 3,
         children
       }, index) => jsxRuntimeExports.jsxs("div", {
         className: "rhc-page-footer__section",
         children: [jsxRuntimeExports.jsx(Heading, {
-          appearance: getValidAppearanceLevel(columnAppearanceLevel),
+          appearanceLevel: columnAppearanceLevel,
           level: heading ? 3 : 2,
           children: columnHeading
         }), children]
@@ -7398,6 +7410,7 @@ const Hero = /*#__PURE__*/reactExports.forwardRef(({
   heading,
   subHeading,
   headingLevel = 3,
+  headingAppearanceLevel = 3,
   borderRadiusCorner,
   aspectRatio = '16 / 9',
   ...restProps
@@ -7414,7 +7427,7 @@ const Hero = /*#__PURE__*/reactExports.forwardRef(({
       className: clsx$9('rhc-hero__message'),
       children: jsxRuntimeExports.jsxs(HeadingGroup, {
         children: [jsxRuntimeExports.jsx(Heading, {
-          appearance: "level-3",
+          appearanceLevel: headingAppearanceLevel,
           className: "rhc-hero__heading",
           level: headingLevel,
           children: heading