@mrfylke/contact-form 0.1.3

package/lib/components/button/utils.d.ts

@@ -0,0 +1,69 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ContrastColor } from '@atb-as/theme';
+export type ButtonModes = 'interactive_0' | 'interactive_0--bordered' | 'interactive_0--bordered-light-outline' | 'interactive_1' | 'interactive_2' | 'interactive_2--light-outline' | 'interactive_3' | 'destructive' | 'transparent' | 'primary' | 'secondary' | 'transparent--underline';
+export type RadiusMode = 'top' | 'bottom' | 'top-bottom' | 'none';
+type ButtonModeAwareProps = {
+    mode?: Exclude<ButtonModes, 'secondary'>;
+    backgroundColor?: never;
+} | {
+    mode: 'secondary';
+    backgroundColor: ContrastColor;
+};
+export type ButtonBaseProps = {
+    /**
+     * Button text content
+     */
+    title?: string;
+    /**
+     * Button mode
+     * @default interactive_2
+     */
+    mode?: ButtonModes;
+    /**
+     * If button is disabled or not
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Button padding size
+     * @default 'small'
+     */
+    size?: 'medium' | 'small' | 'pill' | 'compact';
+    /**
+     * Set button state
+     * @default 'none'
+     */
+    state?: 'none' | 'active' | 'loading';
+    /**
+     * Set where to have border radius on button
+     * @default 'top-bottom'
+     */
+    radius?: RadiusMode;
+    /**
+     * Radius of border
+     * @default 'regular'
+     */
+    radiusSize?: 'regular' | 'circular';
+    /**
+     * Whether the button is inline or block.
+     * @default 'block'
+     */
+    display?: 'block' | 'inline';
+    className?: string;
+    testID?: string;
+    /**
+     * Specify icon to right, left, or both.
+     * @see MonoIcon,
+     * @default undefined
+     */
+    icon?: Partial<{
+        left: ReactNode;
+        right: ReactNode;
+    }>;
+} & ButtonModeAwareProps;
+export declare function getButtonStyle(props: ButtonBaseProps): CSSProperties;
+export declare function getButtonStyleForColor(color: ContrastColor): CSSProperties;
+export declare function getBaseButtonClassName({ mode, size, state, radius, radiusSize, display, disabled, className, }: ButtonBaseProps): string;
+declare function ButtonBase({ title, icon, state }: ButtonBaseProps): import("react/jsx-runtime").JSX.Element;
+export { ButtonBase };
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/button/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/button/utils.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAG5C,MAAM,MAAM,WAAW,GACjB,eAAe,GACf,yBAAyB,GACzB,uCAAuC,GACvC,eAAe,GACf,eAAe,GACf,8BAA8B,GAC9B,eAAe,GACf,aAAa,GACb,aAAa,GACb,SAAS,GACT,WAAW,GACX,wBAAwB,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,MAAM,CAAC;AAElE,KAAK,oBAAoB,GACnB;IACF,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACzC,eAAe,CAAC,EAAE,KAAK,CAAC;CAC3B,GACK;IACF,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,EAAE,aAAa,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IAEtC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAEpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;QACX,IAAI,EAAE,SAAS,CAAC;QAChB,KAAK,EAAE,SAAS,CAAC;KACpB,CAAC,CAAC;CACN,GAAG,oBAAoB,CAAC;AAEzB,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,GAAG,aAAa,CAGpE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,aAAa,GAAG,aAAa,CAK1E;AAED,wBAAgB,sBAAsB,CAAC,EACI,IAAsB,EACtB,IAAc,EACd,KAAc,EACd,MAAqB,EACrB,UAAsB,EACtB,OAAiB,EACjB,QAAgB,EAChB,SAAqB,GACxB,EAAE,eAAe,UAaxD;AAED,iBAAS,UAAU,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,EAAE,eAAe,2CAaxD;AAED,OAAO,EAAC,UAAU,EAAC,CAAC"}

package/lib/components/button/utils.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getButtonStyle = getButtonStyle;
+exports.getButtonStyleForColor = getButtonStyleForColor;
+exports.getBaseButtonClassName = getBaseButtonClassName;
+exports.ButtonBase = ButtonBase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_module_css_1 = __importDefault(require("./button.module.css"));
+const loading_1 = require("../loading");
+const css_1 = require("../../utils/css");
+function getButtonStyle(props) {
+    const backgroundColor = props.mode === 'secondary' && props.backgroundColor;
+    return backgroundColor ? getButtonStyleForColor(backgroundColor) : {};
+}
+function getButtonStyleForColor(color) {
+    return {
+        borderColor: color.foreground.primary,
+        color: color.foreground.primary,
+    };
+}
+function getBaseButtonClassName({ mode = 'interactive_2', size = 'small', state = 'none', radius = 'top-bottom', radiusSize = 'regular', display = 'block', disabled = false, className = undefined, }) {
+    return (0, css_1.and)(button_module_css_1.default.button, button_module_css_1.default[`button--${mode}`], disabled && button_module_css_1.default[`button--disabled`], button_module_css_1.default[`button--size_${size}`], button_module_css_1.default[`button--state_${state}`], button_module_css_1.default[`button--radius_${radius}`], button_module_css_1.default[`button--radius_${radius}`], button_module_css_1.default[`button--display_${display}`], button_module_css_1.default[`button--radiusSize_${radiusSize}`], className);
+}
+function ButtonBase({ title, icon, state }) {
+    const loadingIcon = state == 'loading' ? (0, jsx_runtime_1.jsx)(loading_1.LoadingIcon, {}) : null;
+    const hasLeftIcon = Boolean(icon?.left);
+    const loadingIconLeft = hasLeftIcon ? loadingIcon : null;
+    const loadingIconRight = !hasLeftIcon ? loadingIcon : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loadingIconLeft ?? icon?.left ?? null, title && (0, jsx_runtime_1.jsx)("span", { className: button_module_css_1.default.button__text, children: title }), loadingIconRight ?? icon?.right ?? null] }));
+}

package/lib/components/checkbox/checkbox.d.ts

@@ -0,0 +1,13 @@
+export type CheckboxProps = {
+    onChange: (checked: boolean) => void;
+    error?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    label: string;
+    description?: string;
+    checked?: boolean;
+    expand?: boolean;
+    onClick?: () => void;
+};
+export default function Checkbox({ onChange, error, disabled, readonly, label, description, checked, expand, onClick, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/lib/components/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GAAG;IACxB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EACI,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,OAAe,EACf,MAAc,EACd,OAAO,GACV,EAAE,aAAa,2CAyChD"}

package/lib/components/checkbox/checkbox.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Checkbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const checkbox_module_css_1 = __importDefault(require("./checkbox.module.css"));
+const react_1 = require("react");
+const error_message_1 = require("../error-message");
+const css_1 = require("../../utils/css");
+const icon_1 = require("../icon");
+function Checkbox({ onChange, error, disabled = false, readonly = false, label, description, checked = false, expand = false, onClick, }) {
+    const id = (0, react_1.useId)();
+    const className = (0, css_1.andIf)({
+        [checkbox_module_css_1.default.checkbox]: true,
+        [checkbox_module_css_1.default['checkbox--error']]: !!error,
+        [checkbox_module_css_1.default['checkbox--disabled']]: disabled,
+        [checkbox_module_css_1.default['checkbox--readonly']]: readonly,
+        [checkbox_module_css_1.default['checkbox--expand']]: expand,
+    });
+    return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: `checkbox-${id}`, className: className, children: [(0, jsx_runtime_1.jsxs)("span", { className: checkbox_module_css_1.default.checkbox__content, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: `checkbox-${id}`, readOnly: readonly, onChange: (e) => onChange(e.target.checked), className: checkbox_module_css_1.default.checkbox__checkbox, checked: checked, "aria-invalid": !!error, "aria-describedby": error ? `error-checkbox-${id}` : undefined, onClick: onClick, "data-testid": "onlyStopPlacesCheckbox" }), (0, jsx_runtime_1.jsx)(icon_1.CheckBoxIcon, { checked: checked, className: checkbox_module_css_1.default.checkbox__icon, role: "none" }), (0, jsx_runtime_1.jsxs)("dl", { children: [(0, jsx_runtime_1.jsx)("dt", { className: checkbox_module_css_1.default.checkbox__label, children: label }), description && ((0, jsx_runtime_1.jsx)("dd", { className: checkbox_module_css_1.default.checkbox__description, children: description }))] })] }), !!error && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: error, id: `error-checkbox-${id}` })] }));
+}

package/lib/components/checkbox/checkbox.module.css

@@ -0,0 +1,96 @@
+@value typo-body__s from "@atb-as/theme/lib/generated/typography.module.css";
+
+@value typo-body__m from "@atb-as/theme/lib/generated/typography.module.css";
+
+/* Checkbox */
+.checkbox {
+    display: block;
+    transition: border 150ms ease-in-out,
+    background-color 100ms ease;
+    cursor: pointer;
+    padding: token('spacing.medium');
+    border-radius: token('border.radius.small');
+}
+
+.checkbox:not(.checkbox--readonly) {
+    background-color: token('color.interactive.2.default.background');
+    color: token('color.interactive.2.default.foreground.primary');
+}
+
+.checkbox:not(.checkbox--readonly):hover {
+    background-color: token('color.interactive.2.hover.background');
+    color: token('color.interactive.2.hover.foreground.primary');
+}
+
+.checkbox:not(.checkbox--readonly):active {
+    background-color: token('color.interactive.2.active.background');
+    color: token('color.interactive.2.active.foreground.primary');
+}
+
+.checkbox:not(.checkbox--readonly):disabled {
+    background-color: token('color.interactive.2.disabled.background');
+    color: token('color.interactive.2.disabled.foreground.primary');
+}
+
+.checkbox:not(.checkbox--readonly):focus-within {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+}
+
+.checkbox--expand {
+    display: flex;
+    flex: 1;
+    flex-grow: 1;
+}
+
+.checkbox--disabled {
+    cursor: not-allowed;
+}
+
+.checkbox--disabled > * {
+    opacity: 0.2;
+}
+
+.checkbox--error {
+    border-color: token('color.status.error.primary.background');
+}
+
+.checkbox__checkbox {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+}
+
+.checkbox__checkbox:focus {
+    outline: 0;
+}
+
+.checkbox__checkbox[readonly] {
+    color: token('color.foreground.dynamic.secondary');
+}
+
+:global(.dark) .checkbox__checkbox::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+}
+
+.checkbox__content {
+    display: flex;
+    gap: token('spacing.medium');
+}
+
+.checkbox__label {
+    flex: 1;
+}
+
+.checkbox__description {
+    flex: 1;
+    opacity: 0.6;
+    margin-top: token('spacing.small');
+    composes: typo-body__s from '@atb-as/theme/lib/generated/typography.module.css';
+}
+
+.checkbox__checkbox:not(:checked) + .checkbox__icon {
+    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+    border-radius: token('border.radius.small');
+}

package/lib/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,QAAQ,EAAC,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC"}

package/lib/components/checkbox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });

package/lib/components/error-message/error-message.d.ts

@@ -0,0 +1,6 @@
+export type ErrorMessageProps = {
+    message: string;
+    id?: string;
+};
+export default function ErrorMessage({ message, id }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=error-message.d.ts.map

package/lib/components/error-message/error-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-message.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/error-message.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAC,OAAO,EAAE,EAAE,EAAC,EAAE,iBAAiB,2CAOpE"}

package/lib/components/error-message/error-message.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ErrorMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const error_message_module_css_1 = __importDefault(require("./error-message.module.css"));
+const icon_1 = require("../icon");
+const typography_1 = require("../typography");
+function ErrorMessage({ message, id }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: error_message_module_css_1.default.errorMessage, id: id, children: [(0, jsx_runtime_1.jsx)(icon_1.ColorIcon, { icon: "status/Error" }), (0, jsx_runtime_1.jsx)(typography_1.Typo.span, { textType: "body__s", children: message })] }));
+}

package/lib/components/error-message/error-message.module.css

@@ -0,0 +1,6 @@
+/* error message */
+
+.errorMessage {
+    display: flex;
+    gap: token('spacing.small');
+}

package/lib/components/error-message/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ErrorMessage } from './error-message';
+export type { ErrorMessageProps } from './error-message';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/error-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,YAAY,EAAC,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAC"}

package/lib/components/error-message/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+var error_message_1 = require("./error-message");
+Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(error_message_1).default; } });

package/lib/components/external-link-page.d.ts

@@ -0,0 +1,14 @@
+export type ExternalLinkPageProps = {
+    /** External URL to link to */
+    url: string;
+    /** Optional title override. Defaults to a generic "external link" message. */
+    title?: string;
+    /** Optional description override. */
+    description?: string;
+};
+/**
+ * Component for rendering a page that links to an external website.
+ * Used when a contact page is configured with an externalUrl in pagesOverrides.
+ */
+export declare function ExternalLinkPage({ url, title, description }: ExternalLinkPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=external-link-page.d.ts.map

package/lib/components/external-link-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-link-page.d.ts","sourceRoot":"","sources":["../../src/components/external-link-page.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,qBAAqB,GAAG;IAChC,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CAkClF"}

package/lib/components/external-link-page.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalLinkPage = ExternalLinkPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const translations_1 = require("../translations");
+const typography_1 = require("./typography");
+const button_1 = require("./button");
+const icon_1 = require("./icon");
+const external_link_page_module_css_1 = __importDefault(require("./external-link-page.module.css"));
+/**
+ * Component for rendering a page that links to an external website.
+ * Used when a contact page is configured with an externalUrl in pagesOverrides.
+ */
+function ExternalLinkPage({ url, title, description }) {
+    const { t } = (0, translations_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: external_link_page_module_css_1.default.externalLinkPage, children: (0, jsx_runtime_1.jsxs)("div", { className: external_link_page_module_css_1.default.externalLinkPage__content, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typo.h2, { textType: "heading__2xl", className: external_link_page_module_css_1.default.externalLinkPage__title, children: title })), description && ((0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__m", className: external_link_page_module_css_1.default.externalLinkPage__description, children: description })), (0, jsx_runtime_1.jsx)(button_1.ButtonLink, { href: url, title: title || t({
+                        [translations_1.Language.Norwegian]: 'Gå til ekstern side',
+                        [translations_1.Language.English]: 'Go to external site',
+                        [translations_1.Language.Nynorsk]: 'Gå til ekstern side',
+                    }), mode: "interactive_0--bordered", icon: { right: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: "navigation/ArrowRight" }) }, aProps: {
+                        target: '_blank',
+                        rel: 'noreferrer',
+                    }, className: external_link_page_module_css_1.default.externalLinkPage__button })] }) }));
+}

package/lib/components/external-link-page.module.css

@@ -0,0 +1,29 @@
+.externalLinkPage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    padding: var(--spacer-large);
+}
+
+.externalLinkPage__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacer-medium);
+    max-width: 600px;
+    text-align: center;
+}
+
+.externalLinkPage__title {
+    margin-bottom: var(--spacer-small);
+}
+
+.externalLinkPage__description {
+    margin-bottom: var(--spacer-medium);
+}
+
+.externalLinkPage__button {
+    margin-top: var(--spacer-medium);
+}

package/lib/components/form/date-selector.d.ts

@@ -0,0 +1,11 @@
+import { TranslatedString } from "../../translations";
+export type DateSelectorProps = {
+    id: string;
+    label: string;
+    value?: string;
+    isRequired?: boolean;
+    errorMessage?: TranslatedString;
+    onChange: (value: string) => void;
+};
+export default function DateSelector({ id, label, value, isRequired, errorMessage, onChange, }: DateSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date-selector.d.ts.map

package/lib/components/form/date-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-selector.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAC,gBAAgB,EAAiB,MAAM,oBAAoB,CAAC;AAIpE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACI,EAAE,EACF,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,QAAQ,GACX,EAAE,iBAAiB,2CAuExD"}

package/lib/components/form/date-selector.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DateSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const date_1 = require("@internationalized/date");
+const react_aria_components_1 = require("react-aria-components");
+const form_component_label_1 = __importDefault(require("./form-component-label"));
+const translations_1 = require("../../translations");
+const icon_1 = require("../icon");
+const error_message_1 = require("../error-message");
+function DateSelector({ id, label, value, isRequired, errorMessage, onChange, }) {
+    const { t } = (0, translations_1.useTranslation)();
+    const zonedDateTime = value
+        ? (0, date_1.fromDate)(new Date(value || ''), 'Europe/Oslo')
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.dateSelectorContainer, children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.DatePicker, { id: `date_selector__${id}`, granularity: "day", value: zonedDateTime, onChange: (e) => e && onChange(e.toString().slice(0, 10)), className: form_module_css_1.default.dateSelector, shouldForceLeadingZeros: true, "aria-label": label, "aria-labelledby": `label-${id}`, children: [(0, jsx_runtime_1.jsx)(form_component_label_1.default, { label: label, htmlFor: `date-selector-${id}`, isRequired: isRequired }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: form_module_css_1.default.calendarSelectorGroup, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.DateInput, { className: form_module_css_1.default.dateSelectorInput, children: (segment) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.DateSegment, { segment: segment, className: form_module_css_1.default.dateSelectorSegment })) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: form_module_css_1.default.calendarButton, children: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: "time/Date" }) })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: form_module_css_1.default.calendarDialog, placement: "bottom right", children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Calendar, { children: [(0, jsx_runtime_1.jsxs)("header", { className: form_module_css_1.default.calendarDialog__header, children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { slot: "previous", className: form_module_css_1.default.calendarDialog__headerButtons, children: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: "navigation/ArrowLeft" }) }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { className: form_module_css_1.default.calendarDialog__title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { slot: "next", className: form_module_css_1.default.calendarDialog__headerButtons, children: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: "navigation/ArrowRight" }) })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.CalendarGrid, { className: form_module_css_1.default.calendarGrid, children: (date) => ((0, jsx_runtime_1.jsx)(react_aria_components_1.CalendarCell, { date: date, className: form_module_css_1.default.calendarGrid__cell })) })] }) }) })] }), (0, jsx_runtime_1.jsx)("input", { id: `date_selector__${id}`, type: "hidden", value: value ?? '' }), errorMessage && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: t(errorMessage) })] }));
+}

package/lib/components/form/description-modal.d.ts

@@ -0,0 +1,13 @@
+type DescriptionModalProps = {
+    title: string;
+    modalContent: {
+        description?: string;
+        instruction?: string;
+        bulletPoints?: string[];
+    };
+    isModalOpen: boolean;
+    closeModal: () => void;
+};
+declare const DescriptionModal: ({ title, modalContent, isModalOpen, closeModal, }: DescriptionModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DescriptionModal;
+//# sourceMappingURL=description-modal.d.ts.map

package/lib/components/form/description-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-modal.d.ts","sourceRoot":"","sources":["../../../src/components/form/description-modal.tsx"],"names":[],"mappings":"AASA,KAAK,qBAAqB,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE;QACV,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;KAC3B,CAAC;IACF,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,GAAI,mDAKG,qBAAqB,mDA4FjD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/form/description-modal.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_module_css_1 = __importDefault(require("./form.module.css"));
+const framer_motion_1 = require("framer-motion");
+const focus_1 = require("@react-aria/focus");
+const react_1 = require("react");
+const translations_1 = require("../../translations");
+const typography_1 = require("../typography");
+const button_1 = require("../button");
+const icon_1 = require("../icon");
+const DescriptionModal = ({ title, modalContent, isModalOpen, closeModal, }) => {
+    const { t } = (0, translations_1.useTranslation)();
+    const modalRef = (0, react_1.useRef)(null);
+    const { description, instruction, bulletPoints } = modalContent;
+    const handleEscapeOrClickOutside = (0, react_1.useCallback)((event) => {
+        if (event instanceof KeyboardEvent && event.key === 'Escape') {
+            closeModal();
+        }
+        else if (event instanceof MouseEvent &&
+            modalRef.current &&
+            !modalRef.current.contains(event.target)) {
+            closeModal();
+        }
+    }, [closeModal]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', handleEscapeOrClickOutside);
+        document.addEventListener('mousedown', handleEscapeOrClickOutside);
+        return () => {
+            document.removeEventListener('keydown', handleEscapeOrClickOutside);
+            document.removeEventListener('mousedown', handleEscapeOrClickOutside);
+        };
+    }, [handleEscapeOrClickOutside]);
+    if (!isModalOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: form_module_css_1.default.modal_wrapper, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { ease: 'easeInOut', duration: 0.15 }, children: (0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: modalRef, initial: { opacity: 0, y: -30 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 0 }, transition: { ease: 'backOut', delay: 0.1, duration: 0.15 }, children: (0, jsx_runtime_1.jsxs)("dialog", { "aria-modal": "true", "aria-labelledby": "title", tabIndex: 0, className: form_module_css_1.default.modal_content, children: [(0, jsx_runtime_1.jsxs)("div", { className: form_module_css_1.default.modal_header, children: [(0, jsx_runtime_1.jsx)(typography_1.Typo.h2, { id: "title", textType: "body__m", autoFocus: true, children: title }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: form_module_css_1.default.iconButton, onClick: closeModal, icon: { right: (0, jsx_runtime_1.jsx)(icon_1.MonoIcon, { icon: 'actions/Close' }) }, buttonProps: {
+                                        'aria-label': t(translations_1.PageText.Contact.components.modal.close()),
+                                    } })] }), description && (0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__m", children: description }), bulletPoints && ((0, jsx_runtime_1.jsx)("ul", { className: form_module_css_1.default.modal__rules_list, children: bulletPoints.map((desc, index) => ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__m", children: desc }, index) }, index))) })), instruction && ((0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__m__strong", children: instruction }))] }) }) }) }));
+};
+exports.default = DescriptionModal;

package/lib/components/form/field-wrapper-with-error/index.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { TranslatedString } from "../../../translations";
+export type FieldWrapperWithErrorProps = PropsWithChildren<{
+    errorMessage?: TranslatedString;
+}>;
+export declare const FieldWrapperWithError: ({ errorMessage, children, }: FieldWrapperWithErrorProps) => import("react/jsx-runtime").JSX.Element;
+export default FieldWrapperWithError;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/field-wrapper-with-error/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/field-wrapper-with-error/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EAAC,gBAAgB,EAAiB,MAAM,uBAAuB,CAAC;AAGvE,MAAM,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;IACvD,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC,CAAC,CAAC;AAEH,eAAO,MAAM,qBAAqB,GAAI,6BAGG,0BAA0B,4CASlE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/components/form/field-wrapper-with-error/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldWrapperWithError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const translations_1 = require("../../../translations");
+const error_message_1 = require("../../error-message");
+const FieldWrapperWithError = ({ errorMessage, children, }) => {
+    const { t } = (0, translations_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [children, errorMessage && (0, jsx_runtime_1.jsx)(error_message_1.ErrorMessage, { message: t(errorMessage) })] }));
+};
+exports.FieldWrapperWithError = FieldWrapperWithError;
+exports.default = exports.FieldWrapperWithError;

package/lib/components/form/fieldset/fieldset.module.css

@@ -0,0 +1,26 @@
+.fieldset {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: token('spacing.large');
+    border: none;
+    border-radius: token('border.radius.regular');
+    color: token('color.background.neutral.0.foreground.primary');
+    background-color: token('color.background.neutral.0.background');
+    gap: token('spacing.xSmall');
+}
+
+.fieldset > * + * {
+    margin-top: token('spacing.xLarge');
+}
+
+.legend {
+    position: absolute;
+    top: token('spacing.medium');
+}
+
+.required::after {
+    content: '*';
+    color: token('color.status.error.primary.background');
+    margin-left: token('spacing.small');
+}

package/lib/components/form/fieldset/index.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export type FieldsetProps = PropsWithChildren<{
+    title?: string;
+    isRequired?: boolean;
+}>;
+export declare const Fieldset: ({ title, isRequired, children, }: FieldsetProps) => import("react/jsx-runtime").JSX.Element;
+export default Fieldset;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/fieldset/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGxC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH,eAAO,MAAM,QAAQ,GAAI,kCAIG,aAAa,4CAkBxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/form/fieldset/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fieldset = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const typography_1 = require("../../typography");
+const fieldset_module_css_1 = __importDefault(require("./fieldset.module.css"));
+const css_1 = require("../../../utils/css");
+const Fieldset = ({ title, isRequired = false, children, }) => {
+    return ((0, jsx_runtime_1.jsxs)("fieldset", { className: fieldset_module_css_1.default.fieldset, children: [title && ((0, jsx_runtime_1.jsx)("legend", { className: fieldset_module_css_1.default.legend, children: (0, jsx_runtime_1.jsx)(typography_1.Typo.h3, { textType: "heading__m", className: (0, css_1.andIf)({
+                        [fieldset_module_css_1.default.required]: isRequired,
+                    }), children: title }) })), children] }));
+};
+exports.Fieldset = Fieldset;
+exports.default = exports.Fieldset;

package/lib/components/form/file-input.d.ts

@@ -0,0 +1,10 @@
+export type FileInputProps = {
+    id: string;
+    iconLabel: string;
+    label?: string;
+    isRequired?: boolean;
+    errorMessage?: string;
+    onChange?: (files: File[]) => void;
+} & Omit<React.JSX.IntrinsicElements['input'], 'onChange'>;
+export default function FileInput({ id, onChange, iconLabel, label, isRequired, name, errorMessage, }: FileInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-input.d.ts.map

package/lib/components/form/file-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.d.ts","sourceRoot":"","sources":["../../../src/components/form/file-input.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,cAAc,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;AAI3D,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EACI,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,IAAI,EACJ,YAAY,GACf,EAAE,cAAc,2CA+GlD"}