@amsterdam/design-system-react 2.1.0 → 2.2.0

package/dist/Avatar/Avatar.d.ts

@@ -8,7 +8,7 @@ type AvatarColor = (typeof avatarColors)[number];
 export type AvatarProps = {
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
@@ -19,7 +19,7 @@ export type AvatarProps = {
 export declare const Avatar: import("react").ForwardRefExoticComponent<{
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;

package/dist/Card/Card.d.ts

@@ -12,7 +12,7 @@ export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttribu
 } & import("react").RefAttributes<HTMLElement>> & {
     Heading: import("react").ForwardRefExoticComponent<{
         color?: "inverse";
-        level: 2 | 1 | 3 | 4;
+        level: 1 | 2 | 3 | 4;
         size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
     } & HTMLAttributes<HTMLHeadingElement> & {
         children?: import("react").ReactNode | undefined;

package/dist/Card/CardHeading.d.ts

@@ -4,7 +4,7 @@
  */
 export declare const CardHeading: import("react").ForwardRefExoticComponent<{
     color?: "inverse";
-    level: 2 | 1 | 3 | 4;
+    level: 1 | 2 | 3 | 4;
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
 } & import("react").HTMLAttributes<HTMLHeadingElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Checkbox/Checkbox.d.ts

@@ -27,6 +27,6 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/DateInput/DateInput.d.ts

@@ -19,5 +19,5 @@ export declare const DateInput: import("react").ForwardRefExoticComponent<{
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/FieldSet/FieldSet.d.ts

@@ -5,6 +5,11 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { HintProps } from '../Hint';
 export type FieldSetProps = {
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
     /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
@@ -19,6 +24,11 @@ export type FieldSetProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
 export declare const FieldSet: import("react").ForwardRefExoticComponent<{
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
     /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
@@ -30,6 +40,7 @@ export declare const FieldSet: import("react").ForwardRefExoticComponent<{
     legendIsPageHeading?: boolean;
 } & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/FieldSet/FieldSet.js

@@ -5,8 +5,8 @@ import { Hint } from '../Hint';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
-export const FieldSet = forwardRef(({ children, className, hint, invalid, legend, legendIsPageHeading, optional, ...restProps }, ref) => {
-    const legendContent = (_jsxs(_Fragment, { children: [legend, " ", _jsx(Hint, { hint: hint, optional: optional })] }));
-    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsx("legend", { className: "ams-field-set__legend", children: legendIsPageHeading ? _jsx("h1", { className: "ams-field-set__heading", children: legendContent }) : legendContent }), children] }));
+export const FieldSet = forwardRef(({ children, className, hint, inFieldSet, invalid, legend, legendIsPageHeading, optional, ...restProps }, ref) => {
+    const legendContent = (_jsxs(_Fragment, { children: [legend, " ", _jsx(Hint, { hint: hint, inFieldSet: inFieldSet, optional: optional })] }));
+    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsx("legend", { className: clsx('ams-field-set__legend', inFieldSet && 'ams-field-set__legend--in-fieldset'), children: legendIsPageHeading ? _jsx("h1", { className: "ams-field-set__heading", children: legendContent }) : legendContent }), children] }));
 });
 FieldSet.displayName = 'FieldSet';

package/dist/Hint/Hint.d.ts

@@ -6,6 +6,7 @@ import type { HTMLAttributes, PropsWithChildren } from 'react';
 type HintAndOptionalProps = {
     /** Show a custom hint text. */
     hint?: string;
+    inFieldSet?: boolean;
     /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
     optional?: boolean;
 };

package/dist/Hint/Hint.js

@@ -10,8 +10,8 @@ const getHintText = ({ hint, optional }) => {
     }
     return null;
 };
-export const Hint = forwardRef(({ className, hint, optional, ...restProps }, ref) => {
+export const Hint = forwardRef(({ className, hint, inFieldSet, optional, ...restProps }, ref) => {
     const hintText = getHintText({ hint, optional });
-    return (hintText && (_jsxs("span", { ...restProps, className: clsx('ams-hint', className), ref: ref, children: ["(", hintText, ")"] })));
+    return (hintText && (_jsxs("span", { ...restProps, className: clsx('ams-hint', inFieldSet && 'ams-hint--in-fieldset', className), ref: ref, children: ["(", hintText, ")"] })));
 });
 Hint.displayName = 'Hint';

package/dist/Image/Image.js

@@ -5,5 +5,5 @@ import { generateAspectRatioClass } from './generateAspectRatioClass';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
-export const Image = forwardRef(({ aspectRatio, className, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref, width: 600 })));
+export const Image = forwardRef(({ aspectRatio, className, width, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref, width: width ?? 600 })));
 Image.displayName = 'Image';

package/dist/Label/Label.d.ts

@@ -6,6 +6,11 @@
 import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
 import type { HintProps } from '../Hint';
 export type LabelProps = {
+    /**
+     * Whether the label is nested inside a fieldset.
+     * This will show the label in a lighter style.
+     */
+    inFieldSet?: boolean;
     /**
      * Render a level 1 heading around the label.
      * Set this if the Field is the only content of the page.
@@ -16,6 +21,11 @@ export type LabelProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
 export declare const Label: import("react").ForwardRefExoticComponent<{
+    /**
+     * Whether the label is nested inside a fieldset.
+     * This will show the label in a lighter style.
+     */
+    inFieldSet?: boolean;
     /**
      * Render a level 1 heading around the label.
      * Set this if the Field is the only content of the page.
@@ -23,6 +33,7 @@ export declare const Label: import("react").ForwardRefExoticComponent<{
     isPageHeading?: boolean;
 } & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & import("react").HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Label/Label.js

@@ -5,8 +5,8 @@ import { Hint } from '../Hint';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
-export const Label = forwardRef(({ children, className, hint, isPageHeading, optional, ...restProps }, ref) => {
-    const labelElement = (_jsxs("label", { ...restProps, className: clsx('ams-label', className), ref: ref, children: [children, " ", _jsx(Hint, { hint: hint, optional: optional })] }));
+export const Label = forwardRef(({ children, className, hint, inFieldSet, isPageHeading, optional, ...restProps }, ref) => {
+    const labelElement = (_jsxs("label", { ...restProps, className: clsx('ams-label', inFieldSet && 'ams-label--in-fieldset', className), ref: ref, children: [children, " ", _jsx(Hint, { hint: hint, inFieldSet: inFieldSet, optional: optional })] }));
     return isPageHeading ? _jsx("h1", { className: "ams-label__heading", children: labelElement }) : labelElement;
 });
 Label.displayName = 'Label';

package/dist/LinkList/LinkList.d.ts

@@ -11,7 +11,7 @@ export declare const LinkList: import("react").ForwardRefExoticComponent<HTMLAtt
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLUListElement>> & {
     Link: import("react").ForwardRefExoticComponent<{
-        color?: "contrast" | "inverse";
+        color?: "inverse" | "contrast";
         icon?: import("..").IconProps["svg"];
         size?: "small" | "large";
     } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {

package/dist/Menu/MenuLink.d.ts

@@ -10,7 +10,7 @@ export type MenuLinkProps = {
      * @deprecated The menu has a dark background now, so this is no longer needed.
      */
     color?: 'contrast' | 'inverse';
-    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    /** The icon to display for the menu icon. Use the filled variant. */
     icon: IconProps['svg'];
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export declare const MenuLink: import("react").ForwardRefExoticComponent<{
@@ -19,7 +19,7 @@ export declare const MenuLink: import("react").ForwardRefExoticComponent<{
      * @deprecated The menu has a dark background now, so this is no longer needed.
      */
     color?: "contrast" | "inverse";
-    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    /** The icon to display for the menu icon. Use the filled variant. */
     icon: IconProps["svg"];
 } & AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;

package/dist/Page/Page.d.ts

@@ -3,10 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export type PageProps = {
+    withMenu?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
  */
-export declare const Page: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+export declare const Page: import("react").ForwardRefExoticComponent<{
+    withMenu?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Page/Page.js

@@ -4,5 +4,5 @@ import { forwardRef } from 'react';
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
  */
-export const Page = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page', className), ref: ref, children: children })));
+export const Page = forwardRef(({ children, className, withMenu, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page', withMenu && 'ams-page--with-menu', className), ref: ref, children: children })));
 Page.displayName = 'Page';

package/dist/PageHeader/PageHeader.d.ts

@@ -54,6 +54,7 @@ export declare const PageHeader: import("react").ForwardRefExoticComponent<{
     GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
     MenuLink: import("react").ForwardRefExoticComponent<{
         fixed?: boolean;
+        icon?: import("../Icon").IconProps["svg"];
     } & AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeaderMenuIcon.js

@@ -1,2 +1,2 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const PageHeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("line", { className: "ams-page-header__menu-icon-top", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-middle", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-page-header__menu-icon-bottom", x1: "0", x2: "100%", y1: "50%", y2: "50%" })] }));
+export const PageHeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { className: "ams-page-header__menu-icon-top", d: "M1 5h22v2H1z" }), _jsx("path", { className: "ams-page-header__menu-icon-middle", d: "M1 11h22v2H1z" }), _jsx("path", { className: "ams-page-header__menu-icon-bottom", d: "M1 17h22v2H1z" })] }));

package/dist/PageHeader/PageHeaderMenuLink.d.ts

@@ -3,11 +3,18 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+import type { IconProps } from '../Icon';
 export type PageHeaderMenuLinkProps = {
+    /** Whether the link appears in the Page Header on narrow windows. */
     fixed?: boolean;
+    /** An icon to display at the end of the label. */
+    icon?: IconProps['svg'];
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export declare const PageHeaderMenuLink: import("react").ForwardRefExoticComponent<{
+    /** Whether the link appears in the Page Header on narrow windows. */
     fixed?: boolean;
+    /** An icon to display at the end of the label. */
+    icon?: IconProps["svg"];
 } & AnchorHTMLAttributes<HTMLAnchorElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/PageHeader/PageHeaderMenuLink.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: children }) })));
+import { Icon } from '../Icon';
+export const PageHeaderMenuLink = forwardRef(({ children, className, fixed, icon, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'), children: _jsxs("a", { ...restProps, className: clsx('ams-page-header__menu-link', className), ref: ref, children: [children, icon && _jsx(Icon, { svg: icon })] }) })));
 PageHeaderMenuLink.displayName = 'PageHeader.MenuLink';

package/dist/PasswordInput/PasswordInput.d.ts

@@ -13,4 +13,4 @@ export type PasswordInputProps = {
 export declare const PasswordInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid" | "autoCapitalize" | "spellCheck" | "autoCorrect"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Radio/Radio.d.ts

@@ -23,6 +23,6 @@ export declare const Radio: import("react").ForwardRefExoticComponent<{
     icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/SearchField/SearchField.d.ts

@@ -14,7 +14,6 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         children?: import("react").ReactNode;
         className?: string | undefined | undefined;
         color?: string | undefined | undefined;
-        type?: "submit" | "reset" | "button" | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -280,6 +279,7 @@ export declare const SearchField: import("react").ForwardRefExoticComponent<HTML
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
         form?: string | undefined | undefined;
         value?: string | number | readonly string[] | undefined;
+        type?: "submit" | "reset" | "button" | undefined | undefined;
         disabled?: boolean | undefined | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined | undefined;

package/dist/TimeInput/TimeInput.d.ts

@@ -13,4 +13,4 @@ export type TimeInputProps = {
 export declare const TimeInput: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-invalid"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/index.cjs.js

@@ -706,7 +706,7 @@ var generateAspectRatioClass = function generateAspectRatioClass(aspectRatio) {
   return aspectRatio && "ams-aspect-ratio-".concat(aspectRatio.replace(':', '-'));
 };
 
-var _excluded$1j = ["aspectRatio", "className"];
+var _excluded$1j = ["aspectRatio", "className", "width"];
 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; }
 /**
@@ -715,11 +715,12 @@ function _objectSpread$1s(e) { for (var r = 1; r < arguments.length; r++) { var
 var Image = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var aspectRatio = _ref.aspectRatio,
     className = _ref.className,
+    width = _ref.width,
     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
+    width: width !== null && width !== void 0 ? width : 600
   }));
 });
 Image.displayName = 'Image';
@@ -1106,7 +1107,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Field.displayName = 'Field';
 
-var _excluded$14 = ["className", "hint", "optional"];
+var _excluded$14 = ["className", "hint", "inFieldSet", "optional"];
 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; }
 var getHintText = function getHintText(_ref) {
@@ -1122,6 +1123,7 @@ var getHintText = function getHintText(_ref) {
 var Hint = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
     hint = _ref2.hint,
+    inFieldSet = _ref2.inFieldSet,
     optional = _ref2.optional,
     restProps = _objectWithoutProperties(_ref2, _excluded$14);
   var hintText = getHintText({
@@ -1129,14 +1131,14 @@ var Hint = /*#__PURE__*/react.forwardRef(function (_ref2, ref) {
     optional: optional
   });
   return hintText && jsxRuntime.jsxs("span", _objectSpread$1c(_objectSpread$1c({}, restProps), {}, {
-    className: clsx.clsx('ams-hint', className),
+    className: clsx.clsx('ams-hint', inFieldSet && 'ams-hint--in-fieldset', className),
     ref: ref,
     children: ["(", hintText, ")"]
   }));
 });
 Hint.displayName = 'Hint';
 
-var _excluded$13 = ["children", "className", "hint", "invalid", "legend", "legendIsPageHeading", "optional"];
+var _excluded$13 = ["children", "className", "hint", "inFieldSet", "invalid", "legend", "legendIsPageHeading", "optional"];
 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; }
 /**
@@ -1146,6 +1148,7 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     hint = _ref.hint,
+    inFieldSet = _ref.inFieldSet,
     invalid = _ref.invalid,
     legend = _ref.legend,
     legendIsPageHeading = _ref.legendIsPageHeading,
@@ -1154,6 +1157,7 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var legendContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [legend, " ", jsxRuntime.jsx(Hint, {
       hint: hint,
+      inFieldSet: inFieldSet,
       optional: optional
     })]
   });
@@ -1161,7 +1165,7 @@ var FieldSet = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
     className: clsx.clsx('ams-field-set', invalid && 'ams-field-set--invalid', className),
     ref: ref,
     children: [jsxRuntime.jsx("legend", {
-      className: "ams-field-set__legend",
+      className: clsx.clsx('ams-field-set__legend', inFieldSet && 'ams-field-set__legend--in-fieldset'),
       children: legendIsPageHeading ? jsxRuntime.jsx("h1", {
         className: "ams-field-set__heading",
         children: legendContent
@@ -1863,7 +1867,7 @@ var InvalidFormAlert = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 InvalidFormAlert.displayName = 'InvalidFormAlert';
 
-var _excluded$O = ["children", "className", "hint", "isPageHeading", "optional"];
+var _excluded$O = ["children", "className", "hint", "inFieldSet", "isPageHeading", "optional"];
 function ownKeys$W(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$W(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$W(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$W(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -1873,14 +1877,16 @@ var Label = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     hint = _ref.hint,
+    inFieldSet = _ref.inFieldSet,
     isPageHeading = _ref.isPageHeading,
     optional = _ref.optional,
     restProps = _objectWithoutProperties(_ref, _excluded$O);
   var labelElement = jsxRuntime.jsxs("label", _objectSpread$W(_objectSpread$W({}, restProps), {}, {
-    className: clsx.clsx('ams-label', className),
+    className: clsx.clsx('ams-label', inFieldSet && 'ams-label--in-fieldset', className),
     ref: ref,
     children: [children, " ", jsxRuntime.jsx(Hint, {
       hint: hint,
+      inFieldSet: inFieldSet,
       optional: optional
     })]
   }));
@@ -2278,7 +2284,7 @@ var Overlap = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
 });
 Overlap.displayName = 'Overlap';
 
-var _excluded$F = ["children", "className"];
+var _excluded$F = ["children", "className", "withMenu"];
 function ownKeys$H(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$H(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$H(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$H(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -2287,9 +2293,10 @@ function _objectSpread$H(e) { for (var r = 1; r < arguments.length; r++) { var t
 var Page = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
+    withMenu = _ref.withMenu,
     restProps = _objectWithoutProperties(_ref, _excluded$F);
   return jsxRuntime.jsx("div", _objectSpread$H(_objectSpread$H({}, restProps), {}, {
-    className: clsx.clsx('ams-page', className),
+    className: clsx.clsx('ams-page', withMenu && 'ams-page--with-menu', className),
     ref: ref,
     children: children
   }));
@@ -2421,42 +2428,36 @@ var PageHeaderMenuIcon = function PageHeaderMenuIcon(props) {
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), {}, {
-    children: [jsxRuntime.jsx("line", {
+    children: [jsxRuntime.jsx("path", {
       className: "ams-page-header__menu-icon-top",
-      x1: "0",
-      x2: "100%",
-      y1: "50%",
-      y2: "50%"
-    }), jsxRuntime.jsx("line", {
+      d: "M1 5h22v2H1z"
+    }), jsxRuntime.jsx("path", {
       className: "ams-page-header__menu-icon-middle",
-      x1: "0",
-      x2: "100%",
-      y1: "50%",
-      y2: "50%"
-    }), jsxRuntime.jsx("line", {
+      d: "M1 11h22v2H1z"
+    }), jsxRuntime.jsx("path", {
       className: "ams-page-header__menu-icon-bottom",
-      x1: "0",
-      x2: "100%",
-      y1: "50%",
-      y2: "50%"
+      d: "M1 17h22v2H1z"
     })]
   }));
 };
 
-var _excluded$z = ["children", "className", "fixed"];
+var _excluded$z = ["children", "className", "fixed", "icon"];
 function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PageHeaderMenuLink = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     fixed = _ref.fixed,
+    icon = _ref.icon,
     restProps = _objectWithoutProperties(_ref, _excluded$z);
   return jsxRuntime.jsx("li", {
     className: clsx.clsx('ams-page-header__menu-item', fixed && 'ams-page-header__menu-item--fixed'),
-    children: jsxRuntime.jsx("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
+    children: jsxRuntime.jsxs("a", _objectSpread$A(_objectSpread$A({}, restProps), {}, {
       className: clsx.clsx('ams-page-header__menu-link', className),
       ref: ref,
-      children: children
+      children: [children, icon && jsxRuntime.jsx(Icon, {
+        svg: icon
+      })]
     }))
   });
 });

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}