@amsterdam/design-system-react/dist/index.cjs.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var clsx = require('clsx');
var react = require('react');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var designSystemReactIcons = require('@amsterdam/design-system-react-icons');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
var KeyboardKeys = {
  ArrowDown: 'ArrowDown',
  ArrowLeft: 'ArrowLeft',
  ArrowRight: 'ArrowRight',
  ArrowUp: 'ArrowUp',
  End: 'End',
  Home: 'Home'
};
var FOCUSABLE_ELEMENTS = ['a[href]:not([disabled])', 'button:not([disabled])', 'textarea:not([disabled])', 'input[type="text"]:not([disabled])', 'input[type="radio"]:not([disabled])', 'input[type="checkbox"]:not([disabled])', 'select:not([disabled])'];
var useKeyboardFocus = function useKeyboardFocus(ref, options) {
  var _options$directChildr = options.directChildrenOnly,
    directChildrenOnly = _options$directChildr === void 0 ? false : _options$directChildr,
    _options$focusableEle = options.focusableElements,
    focusableElements = _options$focusableEle === void 0 ? FOCUSABLE_ELEMENTS : _options$focusableEle,
    _options$horizontally = options.horizontally,
    horizontally = _options$horizontally === void 0 ? false : _options$horizontally,
    _options$rotating = options.rotating,
    rotating = _options$rotating === void 0 ? false : _options$rotating;
  var nextKey = horizontally ? KeyboardKeys.ArrowRight : KeyboardKeys.ArrowDown;
  var prevKey = horizontally ? KeyboardKeys.ArrowLeft : KeyboardKeys.ArrowUp;
  var keyDown = function keyDown(e) {
    if (!ref.current) return;
    var element = ref.current;
    var _document = document,
      activeElement = _document.activeElement;
    var directChildSelector = directChildrenOnly ? ':scope > ' : '';
    var focusableEls = Array.from(element.querySelectorAll("".concat(directChildSelector).concat(focusableElements.join(", ".concat(directChildSelector)))));
    var getIndex = function getIndex(el) {
      return el && focusableEls.includes(el) ? focusableEls.indexOf(el) : -1;
    };
    var targetElement;
    switch (e.key) {
      case KeyboardKeys.End:
        targetElement = focusableEls[focusableEls.length - 1];
        break;
      case KeyboardKeys.Home:
        targetElement = focusableEls[0];
        break;
      case nextKey:
        targetElement = focusableEls[getIndex(activeElement) + 1] || (rotating ? focusableEls[0] : undefined);
        break;
      case prevKey:
        targetElement = focusableEls[getIndex(activeElement) - 1] || (rotating ? focusableEls[focusableEls.length - 1] : undefined);
        break;
    }
    if (targetElement instanceof HTMLElement) {
      targetElement.focus();
      e.preventDefault();
    }
  };
  return {
    keyDown: keyDown
  };
};

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
var defaultValues$2 = {
  // Level 2 is set here, but it is never used.
  // headingLevel is a required prop in Accordion, which always overwrites it.
  headingLevel: 2
};
var AccordionContext = /*#__PURE__*/react.createContext(defaultValues$2);

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
function getHeadingTag(level) {
  switch (level) {
    case 2:
      return 'h2';
    case 3:
      return 'h3';
    case 4:
      return 'h4';
    // Ensure valid HTML with invalid input outside of TypeScript.
    default:
      return 'h1';
  }
}

var _excluded$1C = ["children", "className", "color", "level", "size"];
function ownKeys$1L(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$1L(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1L(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1L(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
 */
var Heading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    color = _ref.color,
    level = _ref.level,
    size = _ref.size,
    restProps = _objectWithoutProperties(_ref, _excluded$1C);
  var Tag = getHeadingTag(level);
  var visualLevel = size ? size.slice(-1) : level;
  return jsxRuntime.jsx(Tag, _objectSpread$1L(_objectSpread$1L({
    className: clsx.clsx('ams-heading', "ams-heading--".concat(visualLevel), color && "ams-heading--".concat(color), className),
    ref: ref
  }, restProps), {}, {
    children: children
  }));
});
Heading.displayName = 'Heading';

var _excluded$1B = ["className", "color", "size", "square", "svg"];
function ownKeys$1K(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$1K(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1K(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1K(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
 * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
 */
var Icon = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var className = _ref.className,
    color = _ref.color,
    size = _ref.size,
    square = _ref.square,
    svg = _ref.svg,
    restProps = _objectWithoutProperties(_ref, _excluded$1B);
  return jsxRuntime.jsx("span", _objectSpread$1K(_objectSpread$1K({
    className: clsx.clsx('ams-icon', color && "ams-icon--".concat(color), size && "ams-icon--".concat(size), square && 'ams-icon--square', className),
    hidden // The icon is only shown when the CSS loads, so we hide it by default.
    : true,
    ref: ref
  }, restProps), {}, {
    children: typeof svg === 'function' ? svg() : svg
  }));
});
Icon.displayName = 'Icon';

var _excluded$1A = ["children", "className", "expanded", "label"];
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), true).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; }
// The 'ams-accordion__header' class is @deprecated and will be removed in a future release.
var AccordionSection = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    _ref$expanded = _ref.expanded,
    expanded = _ref$expanded === void 0 ? false : _ref$expanded,
    label = _ref.label,
    restProps = _objectWithoutProperties(_ref, _excluded$1A);
  var _useContext = react.useContext(AccordionContext),
    headingLevel = _useContext.headingLevel,
    sectionAs = _useContext.sectionAs;
  var _useState = react.useState(expanded),
    _useState2 = _slicedToArray(_useState, 2),
    isExpanded = _useState2[0],
    setIsExpanded = _useState2[1];
  var SectionTag = sectionAs || 'section';
  var id = react.useId();
  var iconSize = "heading-".concat(headingLevel);
  var buttonId = "button-".concat(id);
  var panelId = "panel-".concat(id);
  return jsxRuntime.jsxs("div", _objectSpread$1J(_objectSpread$1J({
    className: clsx.clsx('ams-accordion__section', className),
    ref: ref
  }, restProps), {}, {
    children: [jsxRuntime.jsx(Heading, {
      className: "ams-accordion__header",
      level: headingLevel,
      children: jsxRuntime.jsxs("button", {
        "aria-controls": panelId,
        "aria-expanded": isExpanded,
        className: "ams-accordion__button",
        id: buttonId,
        onClick: function onClick() {
          return setIsExpanded(!isExpanded);
        },
        type: "button",
        children: [jsxRuntime.jsx(Icon, {
          className: "ams-accordion__icon",
          size: iconSize,
          svg: designSystemReactIcons.ChevronDownIcon
        }), label]
      })
    }), jsxRuntime.jsx(SectionTag, {
      "aria-labelledby": buttonId,
      className: clsx.clsx('ams-accordion__panel', {
        'ams-accordion__panel--expanded': isExpanded
      }),
      id: panelId,
      children: children
    })]
  }));
});
AccordionSection.displayName = 'Accordion.Section';

var AccordionRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    headingLevel = _ref.headingLevel,
    _ref$sectionAs = _ref.sectionAs,
    sectionAs = _ref$sectionAs === void 0 ? 'section' : _ref$sectionAs;
  var innerRef = react.useRef(null);
  // use a passed ref if it's there, otherwise use innerRef
  react.useImperativeHandle(ref, function () {
    return innerRef.current;
  });
  var _useKeyboardFocus = useKeyboardFocus(innerRef, {
      focusableElements: ['.ams-accordion__button:not([disabled])'],
      rotating: true
    }),
    keyDown = _useKeyboardFocus.keyDown;
  return jsxRuntime.jsx(AccordionContext.Provider, {
    value: {
      headingLevel: headingLevel,
      sectionAs: sectionAs
    },
    children: jsxRuntime.jsx("div", {
      className: clsx.clsx('ams-accordion', className),
      onKeyDown: keyDown,
      ref: innerRef,
      children: children
    })
  });
});
AccordionRoot.displayName = 'Accordion';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
 */
var Accordion = Object.assign(AccordionRoot, {
  Section: AccordionSection
});

var _excluded$1z = ["children", "className"];
function ownKeys$1I(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$1I(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1I(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1I(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
 */
var ActionGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1z);
  return jsxRuntime.jsx("div", _objectSpread$1I(_objectSpread$1I({}, restProps), {}, {
    className: clsx.clsx('ams-action-group', className),
    ref: ref,
    role: "group",
    children: children
  }));
});
ActionGroup.displayName = 'ActionGroup';

var _excluded$1y = ["className", "color", "label", "size", "svg", "type"];
function ownKeys$1H(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$1H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1H(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
 */
var IconButton = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var className = _ref.className,
    color = _ref.color,
    label = _ref.label,
    size = _ref.size,
    _ref$svg = _ref.svg,
    svg = _ref$svg === void 0 ? designSystemReactIcons.CloseIcon : _ref$svg,
    type = _ref.type,
    restProps = _objectWithoutProperties(_ref, _excluded$1y);
  return jsxRuntime.jsxs("button", _objectSpread$1H(_objectSpread$1H({}, restProps), {}, {
    className: clsx.clsx('ams-icon-button', color && "ams-icon-button--".concat(color), className),
    ref: ref,
    type: type || 'button',
    children: [jsxRuntime.jsx("span", {
      className: "ams-visually-hidden",
      children: label
    }), jsxRuntime.jsx(Icon, {
      size: size,
      square: true,
      svg: svg
    })]
  }));
});
IconButton.displayName = 'IconButton';

var _excluded$1x = ["align", "alignVertical", "as", "children", "className", "gap", "wrap"];
function ownKeys$1G(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$1G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1G(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
 */
var Row = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var align = _ref.align,
    alignVertical = _ref.alignVertical,
    _ref$as = _ref.as,
    Tag = _ref$as === void 0 ? 'div' : _ref$as,
    children = _ref.children,
    className = _ref.className,
    gap = _ref.gap,
    wrap = _ref.wrap,
    restProps = _objectWithoutProperties(_ref, _excluded$1x);
  return jsxRuntime.jsx(Tag, _objectSpread$1G(_objectSpread$1G({}, restProps), {}, {
    className: clsx.clsx('ams-row', align && "ams-row--align-".concat(align), alignVertical && "ams-row--align-vertical-".concat(alignVertical), gap && "ams-row--gap-".concat(gap), wrap && 'ams-row--wrap', className),
    ref: ref,
    children: children
  }));
});
Row.displayName = 'Row';

var _excluded$1w = ["children", "className", "closeable", "closeButtonLabel", "heading", "headingId", "headingLevel", "onClose", "severity"];
function ownKeys$1F(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$1F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1F(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iconSvgBySeverity = {
  error: designSystemReactIcons.ErrorFillIcon,
  success: designSystemReactIcons.SuccessFillIcon,
  warning: designSystemReactIcons.WarningFillIcon
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
 */
var Alert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    closeable = _ref.closeable,
    _ref$closeButtonLabel = _ref.closeButtonLabel,
    closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Sluiten' : _ref$closeButtonLabel,
    heading = _ref.heading,
    _ref$headingId = _ref.headingId,
    headingId = _ref$headingId === void 0 ? 'ams-alert-heading' : _ref$headingId,
    headingLevel = _ref.headingLevel,
    onClose = _ref.onClose,
    severity = _ref.severity,
    restProps = _objectWithoutProperties(_ref, _excluded$1w);
  var SeverityIcon = severity ? iconSvgBySeverity[severity] : designSystemReactIcons.InfoFillIcon;
  return jsxRuntime.jsxs("section", _objectSpread$1F(_objectSpread$1F({}, restProps), {}, {
    "aria-labelledby": headingId || undefined,
    className: clsx.clsx('ams-alert', severity && "ams-alert--".concat(severity), className),
    ref: ref,
    children: [jsxRuntime.jsx("div", {
      className: "ams-alert__severity-indicator",
      children: jsxRuntime.jsx(Icon, {
        color: "inverse",
        size: "heading-3",
        svg: SeverityIcon
      })
    }), jsxRuntime.jsxs("div", {
      className: "ams-alert__content",
      children: [jsxRuntime.jsxs(Row, {
        align: "between",
        alignVertical: "start",
        children: [jsxRuntime.jsx(Heading, {
          id: headingId || undefined,
          level: headingLevel,
          size: "level-3",
          children: heading
        }), closeable && jsxRuntime.jsx(IconButton, {
          label: closeButtonLabel,
          onClick: onClose,
          size: "heading-3"
        })]
      }), children]
    })]
  }));
});
Alert.displayName = 'Alert';

var _excluded$1v = ["className", "color", "imageSrc", "label"];
function ownKeys$1E(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$1E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1E(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var AvatarContent = function AvatarContent(_ref) {
  var imageSrc = _ref.imageSrc,
    initials = _ref.initials;
  if (imageSrc) {
    return jsxRuntime.jsx("img", {
      alt: "",
      src: imageSrc
    });
  }
  if (initials.length) {
    return jsxRuntime.jsx("span", {
      "aria-hidden": true,
      children: initials
    });
  }
  return jsxRuntime.jsx(Icon, {
    size: "small",
    svg: designSystemReactIcons.PersonFillIcon
  });
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-avatar--docs Avatar docs at Amsterdam Design System}
 */
var Avatar = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
  var className = _ref2.className,
    color = _ref2.color,
    imageSrc = _ref2.imageSrc,
    label = _ref2.label,
    restProps = _objectWithoutProperties(_ref2, _excluded$1v);
  var initials = label.slice(0, 2).toUpperCase();
  var a11yLabel = initials.length === 0 ? 'Gebruiker' : "Initialen gebruiker: ".concat(initials);
  return jsxRuntime.jsxs("span", _objectSpread$1E(_objectSpread$1E({}, restProps), {}, {
    className: clsx.clsx('ams-avatar', color && "ams-avatar--".concat(color), imageSrc && 'ams-avatar--has-image', className),
    ref: ref,
    children: [jsxRuntime.jsx("span", {
      className: "ams-visually-hidden",
      children: a11yLabel
    }), jsxRuntime.jsx(AvatarContent, {
      imageSrc: imageSrc,
      initials: initials
    })]
  }));
});
Avatar.displayName = 'Avatar';

var _excluded$1u = ["className", "color", "label"];
function ownKeys$1D(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$1D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1D(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
 */
var Badge = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var className = _ref.className,
    color = _ref.color,
    label = _ref.label,
    restProps = _objectWithoutProperties(_ref, _excluded$1u);
  return jsxRuntime.jsx("span", _objectSpread$1D(_objectSpread$1D({}, restProps), {}, {
    className: clsx.clsx('ams-badge', color && "ams-badge--".concat(color), className),
    ref: ref,
    children: label
  }));
});
Badge.displayName = 'Badge';

var _excluded$1t = ["children", "className", "color"];
function ownKeys$1C(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$1C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1C(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
 */
var Blockquote = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    color = _ref.color,
    restProps = _objectWithoutProperties(_ref, _excluded$1t);
  return jsxRuntime.jsx("blockquote", _objectSpread$1C(_objectSpread$1C({}, restProps), {}, {
    className: clsx.clsx('ams-blockquote', color && "ams-blockquote--".concat(color), className),
    ref: ref,
    children: children
  }));
});
Blockquote.displayName = 'Blockquote';

var _excluded$1s = ["children", "className"];
function ownKeys$1B(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$1B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1B(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreadcrumbLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1s);
  return jsxRuntime.jsx("li", {
    className: "ams-breadcrumb__item",
    children: jsxRuntime.jsx("a", _objectSpread$1B(_objectSpread$1B({}, restProps), {}, {
      className: clsx.clsx('ams-breadcrumb__link', className),
      ref: ref,
      children: children
    }))
  });
});
BreadcrumbLink.displayName = 'Breadcrumb.Link';

var _excluded$1r = ["children", "className"];
function ownKeys$1A(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$1A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1A(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreadcrumbRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1r);
  return jsxRuntime.jsx("nav", _objectSpread$1A(_objectSpread$1A({}, restProps), {}, {
    className: clsx.clsx('ams-breadcrumb', className),
    ref: ref,
    children: jsxRuntime.jsx("ol", {
      className: "ams-breadcrumb__list",
      children: children
    })
  }));
});
BreadcrumbRoot.displayName = 'Breadcrumb';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-breadcrumb--docs Breadcrumb docs at Amsterdam Design System}
 */
var Breadcrumb = Object.assign(BreadcrumbRoot, {
  Link: BreadcrumbLink
});

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
var paddingClasses = function paddingClasses(componentName, paddingBottom, paddingTop, paddingVertical) {
  var classes = [];
  if (paddingVertical) {
    return ["ams-".concat(componentName, "--padding-vertical--").concat(paddingVertical)];
  }
  if (paddingBottom) {
    classes.push("ams-".concat(componentName, "--padding-bottom--").concat(paddingBottom));
  }
  if (paddingTop) {
    classes.push("ams-".concat(componentName, "--padding-top--").concat(paddingTop));
  }
  return classes;
};

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
var addGridClass = function addGridClass(prefix, value) {
  if (value === 'all' || typeof value === 'number') {
    return ["".concat(prefix).concat(value)];
  } else if (value) {
    var narrow = value.narrow,
      medium = value.medium,
      wide = value.wide;
    return ["".concat(prefix).concat(narrow), "".concat(prefix).concat(medium, "-medium"), "".concat(prefix).concat(wide, "-wide")];
  }
  return [];
};
var gridCellClasses = function gridCellClasses(colSpan, colStart) {
  return [].concat(_toConsumableArray(addGridClass('ams-grid__cell--span-', colSpan)), _toConsumableArray(addGridClass('ams-grid__cell--start-', colStart)));
};

var breakoutCellClasses = function breakoutCellClasses(colSpan, colStart, rowSpan, rowStart) {
  return [].concat(_toConsumableArray(addGridClass('ams-breakout__cell--col-span-', colSpan)), _toConsumableArray(addGridClass('ams-breakout__cell--col-start-', colStart)), _toConsumableArray(addGridClass('ams-breakout__cell--row-span-', rowSpan)), _toConsumableArray(addGridClass('ams-breakout__cell--row-start-', rowStart)));
};

var _excluded$1q = ["as", "children", "className", "colSpan", "colStart", "has", "rowSpan", "rowStart"];
function ownKeys$1z(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$1z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1z(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreakoutCell = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var _ref$as = _ref.as,
    Tag = _ref$as === void 0 ? 'div' : _ref$as,
    children = _ref.children,
    className = _ref.className,
    colSpan = _ref.colSpan,
    colStart = _ref.colStart,
    has = _ref.has,
    rowSpan = _ref.rowSpan,
    rowStart = _ref.rowStart,
    restProps = _objectWithoutProperties(_ref, _excluded$1q);
  return jsxRuntime.jsx(Tag, _objectSpread$1z(_objectSpread$1z({}, restProps), {}, {
    className: clsx.clsx('ams-breakout__cell', breakoutCellClasses(colSpan, colStart, rowSpan, rowStart), has && "ams-breakout__cell--has-".concat(has), className),
    ref: ref,
    children: children
  }));
});
BreakoutCell.displayName = 'Breakout.Cell';

var _excluded$1p = ["children", "className", "gapVertical", "paddingBottom", "paddingTop", "paddingVertical"];
function ownKeys$1y(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$1y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1y(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BreakoutRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    gapVertical = _ref.gapVertical,
    paddingBottom = _ref.paddingBottom,
    paddingTop = _ref.paddingTop,
    paddingVertical = _ref.paddingVertical,
    restProps = _objectWithoutProperties(_ref, _excluded$1p);
  return jsxRuntime.jsx("div", _objectSpread$1y(_objectSpread$1y({}, restProps), {}, {
    className: clsx.clsx('ams-breakout', gapVertical && "ams-breakout--gap-vertical--".concat(gapVertical), paddingClasses('breakout', paddingBottom, paddingTop, paddingVertical), className),
    ref: ref,
    children: children
  }));
});
BreakoutRoot.displayName = 'Breakout';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
 */
var Breakout = Object.assign(BreakoutRoot, {
  Cell: BreakoutCell
});

var _excluded$1o = ["children", "className", "disabled", "icon", "iconBefore", "iconOnly", "type", "variant"];
function ownKeys$1x(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$1x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1x(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
 */
var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    disabled = _ref.disabled,
    icon = _ref.icon,
    iconBefore = _ref.iconBefore,
    iconOnly = _ref.iconOnly,
    type = _ref.type,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
    restProps = _objectWithoutProperties(_ref, _excluded$1o);
  return jsxRuntime.jsxs("button", _objectSpread$1x(_objectSpread$1x({}, restProps), {}, {
    className: clsx.clsx('ams-button', "ams-button--".concat(variant), icon && iconOnly && "ams-button--icon-only", className),
    disabled: disabled,
    ref: ref,
    type: type || 'button',
    children: [icon && (iconBefore || iconOnly) && jsxRuntime.jsx(Icon, {
      square: iconOnly,
      svg: icon
    }), icon && iconOnly ? jsxRuntime.jsx("span", {
      className: "ams-visually-hidden",
      children: children
    }) : children, icon && !iconBefore && !iconOnly && jsxRuntime.jsx(Icon, {
      svg: icon
    })]
  }));
});
Button.displayName = 'Button';

var _excluded$1n = ["children", "className"];
function ownKeys$1w(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$1w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1w(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs CallToActionLink docs at Amsterdam Design System}
 */
var CallToActionLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1n);
  return jsxRuntime.jsx("a", _objectSpread$1w(_objectSpread$1w({}, restProps), {}, {
    className: clsx.clsx('ams-call-to-action-link', className),
    ref: ref,
    children: children
  }));
});
CallToActionLink.displayName = 'CallToActionLink';

var _excluded$1m = ["children", "className", "size"];
function ownKeys$1v(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$1v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1v(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CardHeading = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'level-3' : _ref$size,
    restProps = _objectWithoutProperties(_ref, _excluded$1m);
  return jsxRuntime.jsx(Heading, _objectSpread$1v(_objectSpread$1v({}, restProps), {}, {
    className: clsx.clsx('ams-card__heading', className),
    ref: ref,
    size: size,
    children: children
  }));
});
CardHeading.displayName = 'Card.Heading';

var _excluded$1l = ["children", "className", "color", "size"];
function ownKeys$1u(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$1u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1u(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
 */
var Paragraph = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    color = _ref.color,
    size = _ref.size,
    restProps = _objectWithoutProperties(_ref, _excluded$1l);
  return jsxRuntime.jsx("p", _objectSpread$1u(_objectSpread$1u({
    className: clsx.clsx('ams-paragraph', color && "ams-paragraph--".concat(color), size && "ams-paragraph--".concat(size), className),
    ref: ref
  }, restProps), {}, {
    children: children
  }));
});
Paragraph.displayName = 'Paragraph';

var _excluded$1k = ["children", "className", "tagline"];
function ownKeys$1t(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$1t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1t(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CardHeadingGroup = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    tagline = _ref.tagline,
    restProps = _objectWithoutProperties(_ref, _excluded$1k);
  return jsxRuntime.jsxs("hgroup", _objectSpread$1t(_objectSpread$1t({}, restProps), {}, {
    className: clsx.clsx('ams-card__heading-group', className),
    ref: ref,
    children: [children, jsxRuntime.jsx(Paragraph, {
      size: "small",
      children: tagline
    })]
  }));
});
CardHeadingGroup.displayName = 'Card.HeadingGroup';

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
var generateAspectRatioClass = function generateAspectRatioClass(aspectRatio) {
  return aspectRatio && "ams-aspect-ratio-".concat(aspectRatio.replace(':', '-'));
};

var _excluded$1j = ["aspectRatio", "className"];
function ownKeys$1s(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$1s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1s(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
 */
var Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var aspectRatio = _ref.aspectRatio,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1j);
  return jsxRuntime.jsx("img", _objectSpread$1s(_objectSpread$1s({}, restProps), {}, {
    className: clsx.clsx('ams-image', generateAspectRatioClass(aspectRatio), className),
    ref: ref,
    width: 600
  }));
});
Image.displayName = 'Image';

var _excluded$1i = ["className"];
function ownKeys$1r(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$1r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1r(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CardImage = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1i);
  return jsxRuntime.jsx(Image, _objectSpread$1r(_objectSpread$1r({}, restProps), {}, {
    className: clsx.clsx('ams-card__image', className),
    ref: ref
  }));
});
CardImage.displayName = 'Card.Image';

var _excluded$1h = ["children", "className"];
function ownKeys$1q(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$1q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1q(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CardLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1h);
  return jsxRuntime.jsx("a", _objectSpread$1q(_objectSpread$1q({}, restProps), {}, {
    className: clsx.clsx('ams-card__link', className),
    ref: ref,
    children: children
  }));
});
CardLink.displayName = 'Card.Link';

var _excluded$1g = ["children", "className"];
function ownKeys$1p(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$1p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CardRoot = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    restProps = _objectWithoutProperties(_ref, _excluded$1g);
  return jsxRuntime.jsx("article", _objectSpread$1p(_objectSpread$1p({}, restProps), {}, {
    className: clsx.clsx('ams-card', className),
    ref: ref,
    children: children
  }));
});
CardRoot.displayName = 'Card';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-card--docs Card docs at Amsterdam Design System}
 */
var Card = Object.assign(CardRoot, {
  Heading: CardHeading,
  HeadingGroup: CardHeadingGroup,
  Image: CardImage,
  Link: CardLink
});

var _excluded$1f = ["className", "length", "maxLength"];
function ownKeys$1o(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$1o(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1o(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
 */
var CharacterCount = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var className = _ref.className,
    length = _ref.length,
    maxLength = _ref.maxLength,
    restProps = _objectWithoutProperties(_ref, _excluded$1f);
  return jsxRuntime.jsx("div", _objectSpread$1o(_objectSpread$1o({}, restProps), {}, {
    className: clsx.clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className),
    ref: ref,
    role: "status",
    children: "".concat(length, " van ").concat(maxLength, " tekens")
  }));
});
CharacterCount.displayName = 'CharacterCount';

function ownKeys$1n(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$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1n(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1n(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var SvgCheckbox = function SvgCheckbox(props) {
  return jsxRuntime.jsxs("svg", _objectSpread$1n(_objectSpread$1n({
    "aria-hidden": "true",
    focusable: "false",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg"
  }, props), {}, {
    children: [jsxRuntime.jsx("rect", {
      className: "ams-checkbox__rectangle",
      fill: "none",
      height: "22",
      stroke: "black",
      strokeWidth: "2",
      width: "22",
      x: "1",
      y: "1"
    }), jsxRuntime.jsx("rect", {
      className: "ams-checkbox__hover-indicator",
      fill: "none",
      height: "20",
      stroke: "black",
      strokeWidth: "1",
      width: "20",
      x: "2",
      y: "2"
    }), jsxRuntime.jsx("path", {
      className: "ams-checkbox__checked-indicator",
      d: "M3.251 13.017L8.554 18.761L20.749 5.239",
      fill: "none",
      stroke: "black",
      strokeWidth: "3"
    }), jsxRuntime.jsx("line", {
      className: "ams-checkbox__indeterminate-indicator",
      fill: "none",
      stroke: "black",
      strokeWidth: "3",
      x1: "4",
      x2: "20",
      y1: "12",
      y2: "12"
    })]
  }));
};

var _excluded$1e = ["children", "className", "icon", "id", "indeterminate", "invalid"];
function ownKeys$1m(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$1m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1m(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
 */
var Checkbox = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    _ref$icon = _ref.icon,
    icon = _ref$icon === void 0 ? SvgCheckbox : _ref$icon,
    id = _ref.id,
    indeterminate = _ref.indeterminate,
    invalid = _ref.invalid,
    restProps = _objectWithoutProperties(_ref, _excluded$1e);
  var inputId = id || react.useId();
  var innerRef = react.useRef(null);
  // use a passed ref if it's there, otherwise use innerRef
  react.useImperativeHandle(ref, function () {
    return innerRef.current;
  });
  // set input to indeterminate
  react.useEffect(function () {
    if (innerRef.current) {
      innerRef.current.indeterminate = Boolean(indeterminate);
    }
  }, [innerRef, indeterminate]);
  return (
    // This div is here because NVDA doesn't match the input to the label
    // without a containing element
    jsxRuntime.jsxs("div", {
      className: clsx.clsx('ams-checkbox', className),
      children: [jsxRuntime.jsx("input", _objectSpread$1m(_objectSpread$1m({}, restProps), {}, {
        "aria-invalid": invalid || undefined,
        className: "ams-checkbox__input",
        id: inputId,
        ref: innerRef,
        type: "checkbox"
      })), jsxRuntime.jsxs("label", {
        className: "ams-checkbox__label",
        htmlFor: inputId,
        children: [jsxRuntime.jsx("span", {
          className: "ams-checkbox__icon-container",
          hidden: true,