@mrfylke/contact-form 0.1.3

package/lib/ContactFormRoot.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type ContactFormConfig } from './modules/config';
+import { type ContactFormTranslationsOverride, Language } from './translations';
+export type ContactFormRootProps = {
+    /** Main configuration object (theme, icons, api, org, features) */
+    config: ContactFormConfig;
+    /**
+     * Optional raw Accept-Language header string from the server.
+     * If provided, this takes precedence over initialLanguage.
+     */
+    acceptLanguageHeader?: string;
+    /**
+     * Optional initial language for purely client-side usage.
+     * Will be converted to a basic Accept-Language style string internally.
+     */
+    initialLanguage?: Language;
+    /**
+     * Optional: force a specific theme mode (light or dark).
+     * When set, dark mode toggle is effectively disabled and the chosen
+     * variant is always used.
+     */
+    forceTheme?: 'light' | 'dark';
+    /**
+     * Optional additional translation overrides that will be merged on top of config.translations.
+     * Config translations are required; this allows additional overrides at the root level if needed.
+     */
+    translationsOverride?: ContactFormTranslationsOverride;
+    /** App content to render inside the provider stack */
+    children?: ReactNode;
+};
+/**
+ * High-level entrypoint that wires configuration, theme, and language
+ * providers together. Renders children inside the provider stack so
+ * consumers can pass their routes/layout as children.
+ */
+export declare function ContactFormRoot({ config, acceptLanguageHeader, initialLanguage, forceTheme, translationsOverride, children, }: ContactFormRootProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContactFormRoot.d.ts.map

package/lib/ContactFormRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactFormRoot.d.ts","sourceRoot":"","sources":["../src/ContactFormRoot.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5C,OAAO,EACH,KAAK,iBAAiB,EAEzB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAEH,KAAK,+BAA+B,EACpC,QAAQ,EACX,MAAM,gBAAgB,CAAC;AAQxB,MAAM,MAAM,oBAAoB,GAAG;IAC/B,mEAAmE;IACnE,MAAM,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,+BAA+B,CAAC;IACvD,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EACI,MAAM,EACN,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,oBAAoB,EACpB,QAAQ,GACX,EAAE,oBAAoB,2CAuBtD"}

package/lib/ContactFormRoot.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContactFormRoot = ContactFormRoot;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const config_1 = require("./modules/config");
+const theme_1 = require("./modules/theme");
+const translations_1 = require("./translations");
+/** Syncs theme (light/dark) to document for CSS [data-theme] selectors */
+function ThemeSync({ children }) {
+    (0, theme_1.useHtmlDarkMode)();
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+/**
+ * High-level entrypoint that wires configuration, theme, and language
+ * providers together. Renders children inside the provider stack so
+ * consumers can pass their routes/layout as children.
+ */
+function ContactFormRoot({ config, acceptLanguageHeader, initialLanguage, forceTheme, translationsOverride, children, }) {
+    const header = acceptLanguageHeader ?? deriveHeaderFromInitialLanguage(initialLanguage);
+    // Merge config translations (required) with optional root-level override (override takes precedence)
+    const mergedTranslations = translationsOverride
+        ? deepMerge(config.translations, translationsOverride)
+        : config.translations;
+    return ((0, jsx_runtime_1.jsx)(config_1.ContactFormConfigProvider, { config: config, children: (0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { forceTheme: forceTheme, children: (0, jsx_runtime_1.jsx)(ThemeSync, { children: (0, jsx_runtime_1.jsx)(translations_1.AppLanguageProvider, { serverAcceptLanguage: header ?? 'no,en;q=0.9', overrides: mergedTranslations, children: children }) }) }) }));
+}
+function deriveHeaderFromInitialLanguage(language) {
+    if (!language) {
+        return undefined;
+    }
+    // Very small helper to build a reasonable Accept-Language style string
+    // based on the enum values we already expose.
+    switch (language) {
+        case translations_1.Language.English:
+            return 'en-US,no;q=0.9';
+        case translations_1.Language.Nynorsk:
+            return 'nn,no;q=0.9';
+        case translations_1.Language.Norwegian:
+        default:
+            return 'no,en;q=0.9';
+    }
+}
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key in source) {
+        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+            result[key] = deepMerge((result[key] || {}), source[key]);
+        }
+        else if (source[key] !== undefined) {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}

package/lib/commoneEvents.d.ts

@@ -0,0 +1,16 @@
+import { TransportModeType } from './types';
+import { Line } from '.';
+export declare const commonEvents: {
+    type: "VALIDATE";
+} | {
+    type: "ON_INPUT_CHANGE";
+    inputName: "address" | "attachments" | "bankAccountNumber" | "city" | "date" | "email" | "firstName" | "feedback" | "IBAN" | "lastName" | "phoneNumber" | "postalCode" | "SWIFT" | "toStop" | "fromStop" | "plannedDepartureTime";
+    value: any;
+} | {
+    type: "ON_TRANSPORTMODE_CHANGE";
+    value: TransportModeType;
+} | {
+    type: "ON_LINE_CHANGE";
+    value: Line | undefined;
+};
+//# sourceMappingURL=commoneEvents.d.ts.map

package/lib/commoneEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"commoneEvents.d.ts","sourceRoot":"","sources":["../src/commoneEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,GAAG,CAAC;AAEvB,eAAO,MAAM,YAAY,EACnB;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IACF,IAAI,EAAE,iBAAiB,CAAC;IACxB,SAAS,EACH,SAAS,GACT,aAAa,GACb,mBAAmB,GACnB,MAAM,GACN,MAAM,GACN,OAAO,GACP,WAAW,GACX,UAAU,GACV,MAAM,GACN,UAAU,GACV,aAAa,GACb,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,UAAU,GACV,sBAAsB,CAAC;IAC7B,KAAK,EAAE,GAAG,CAAC;CACd,GACK;IACF,IAAI,EAAE,yBAAyB,CAAC;IAChC,KAAK,EAAE,iBAAiB,CAAC;CAC5B,GACK;IACF,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,CAAC"}

package/lib/commoneEvents.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonEvents = void 0;
+exports.commonEvents = {};

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

@@ -0,0 +1,17 @@
+import React, { MouseEventHandler } from 'react';
+import { ButtonBaseProps } from './utils';
+export type ButtonProps = {
+    /** Action when clicked */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify testID for easier access when using cypress
+     */
+    testID?: string;
+    /**
+     * Pass properties to button element directly
+     */
+    buttonProps?: React.JSX.IntrinsicElements['button'];
+} & ButtonBaseProps;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,EAEH,eAAe,EAGlB,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,WAAW,GAAG;IACtB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;CACvD,GAAG,eAAe,CAAC;AAEpB,eAAO,MAAM,MAAM,uFAqBlB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/button/button.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("./utils");
+exports.Button = react_1.default.forwardRef(function Button({ onClick, testID, buttonProps, ...props }, ref) {
+    const className = (0, utils_1.getBaseButtonClassName)(props);
+    const buttonStyle = (0, utils_1.getButtonStyle)(props);
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", onClick: onClick, className: className, disabled: props.disabled || props.state === 'loading', "aria-disabled": props.disabled || props.state === 'loading', "data-testid": testID, style: buttonStyle, ...buttonProps, children: (0, jsx_runtime_1.jsx)(utils_1.ButtonBase, { ...props }) }));
+});
+exports.default = exports.Button;

package/lib/components/button/button.module.css

@@ -0,0 +1,399 @@
+/* Button */
+.button {
+    composes: typo-body__m from '@atb-as/theme/lib/generated/typography.module.css';
+    cursor: pointer;
+    text-align: left;
+    border: 0;
+    text-decoration: none;
+    align-items: center;
+
+    display: flex;
+
+    flex-wrap: nowrap;
+    gap: token('spacing.small');
+
+    background: transparent;
+    color: currentColor;
+
+    transition: all 100ms ease-in;
+}
+
+.button--display_inline {
+    display: inline-flex;
+}
+
+.button--disabled,
+.button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.button--state_loading {
+    cursor: not-allowed;
+}
+
+.button__text {
+    display: block;
+    flex: 1;
+}
+
+.button--transparent,
+.button--transparent:visited {
+}
+
+.button--transparent:hover {
+    color: token('color.foreground.dynamic.secondary');
+}
+
+.button--transparent:active {
+    background-color: token('color.interactive.0.active.background');
+    color: token('color.interactive.0.active.foreground.primary');
+}
+
+.button--transparent:disabled,
+.button--transparent.button--disabled {
+    opacity: 0.6;
+}
+
+.button--transparent:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.outline.background');
+}
+
+.button--transparent--underline,
+.button--transparent--underline:visited {
+    text-decoration: underline;
+}
+
+.button--transparent--underline:hover {
+    color: token('color.foreground.dynamic.secondary');
+}
+
+.button--transparent--underline:active {
+    background-color: token('color.interactive.0.active.background');
+    color: token('color.interactive.0.active.foreground.primary');
+}
+
+.button--transparent--underline:disabled,
+.button--transparent--underline.button--disabled {
+    opacity: 0.6;
+}
+
+.button--transparent--underline:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.outline.background');
+}
+
+/* Primary */
+.button--primary,
+.button--primary:visited {
+    color: token('color.foreground.inverse.primary');
+    background-color: token('color.interactive.0.default.background');
+}
+
+.button--primary:not(:disabled):hover,
+.button--primary:not(:disabled):active,
+.button--primary.button--state_active {
+    color: token('color.foreground.dynamic.primary');
+    background-color: token('color.interactive.0.active.background');
+}
+
+.button--primary:disabled,
+.button--primary.button--disabled {
+    opacity: 0.2;
+}
+
+/* Secondary */
+.button--secondary,
+.button--secondary:visited {
+    color: token('color.foreground.dynamic.primary');
+    border: 2px solid token('color.foreground.dynamic.primary');
+}
+
+.button--secondary:not(:disabled):hover,
+.button--secondary:not(:disabled):active,
+.button--secondary.button--state_active {
+    background-color: token('color.interactive.0.active.background');
+    border: 2px solid token('color.interactive.0.outline.background');
+}
+
+.button--secondary:disabled,
+.button--secondary.button--disabled {
+    opacity: 0.2;
+}
+
+/* Interactive button 0 */
+.button--interactive_0,
+.button--interactive_0:visited {
+    background-color: token('color.interactive.0.default.background');
+    color: token('color.interactive.0.default.foreground.primary');
+}
+
+.button--interactive_0:hover {
+    background-color: token('color.interactive.0.hover.background');
+    color: token('color.interactive.0.hover.foreground.primary');
+}
+
+.button--interactive_0:active {
+    background-color: token('color.interactive.0.active.background');
+    color: token('color.interactive.0.active.foreground.primary');
+}
+
+.button--interactive_0:disabled,
+.button--interactive_0.button--disabled {
+    background-color: token('color.interactive.0.disabled.background');
+    color: token('color.interactive.0.disabled.foreground.primary');
+}
+
+.button--interactive_0:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.0.outline.background');
+}
+
+/* Interactive button 0 bordered */
+.button--interactive_0--bordered,
+.button--interactive_0--bordered:visited {
+    background-color: token('color.interactive.0.default.background');
+    color: token('color.interactive.0.default.foreground.primary');
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.0.default.foreground.primary');
+}
+
+.button--interactive_0--bordered:hover {
+    background-color: token('color.interactive.0.hover.background');
+    color: token('color.interactive.0.hover.foreground.primary');
+}
+
+.button--interactive_0--bordered:active {
+    background-color: token('color.interactive.0.active.background');
+    color: token('color.interactive.0.active.foreground.primary');
+}
+
+.button--interactive_0--bordered:disabled,
+.button--interactive_0--bordered.button--disabled {
+    background-color: token('color.interactive.0.disabled.background');
+    color: token('color.interactive.0.disabled.foreground.primary');
+}
+
+.button--interactive_0--bordered:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.0.outline.background');
+}
+
+.button--interactive_0--bordered-light-outline,
+.button--interactive_0--bordered-light-outline:visited {
+    background-color: token('color.interactive.0.default.background');
+    color: token('color.interactive.0.default.foreground.primary');
+    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.0.default.foreground.primary');
+}
+
+.button--interactive_0--bordered-light-outline:hover {
+    background-color: token('color.interactive.0.hover.background');
+    color: token('color.interactive.0.hover.foreground.primary');
+}
+
+.button--interactive_0--bordered-light-outline:active {
+    background-color: token('color.interactive.1.hover.background');
+    color: token('color.interactive.1.active.foreground.primary');
+}
+
+.button--interactive_0--bordered-light-outline:disabled,
+.button--interactive_0--bordered-light-outline.button--disabled {
+    background-color: token('color.interactive.0.disabled.background');
+    color: token('color.interactive.0.disabled.foreground.primary');
+}
+
+.button--interactive_0--bordered-light-outline:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.0.active.background');
+}
+
+/* Interactive button 1 */
+
+.button--interactive_1,
+.button--interactive_1:visited {
+    background-color: token('color.interactive.1.default.background');
+    color: token('color.interactive.1.default.foreground.primary');
+}
+
+.button--interactive_1:hover {
+    background-color: token('color.interactive.1.hover.background');
+    color: token('color.interactive.1.hover.foreground.primary');
+}
+
+.button--interactive_1:active {
+    background-color: token('color.interactive.1.active.background');
+    color: token('color.interactive.1.active.foreground.primary');
+}
+
+.button--interactive_1:disabled,
+.button--interactive_1.button--disabled {
+    background-color: token('color.interactive.1.disabled.background');
+    color: token('color.interactive.1.disabled.foreground.primary');
+}
+
+.button--interactive_1:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.outline.background');
+}
+
+/* Interactive button 2 */
+
+.button--interactive_2,
+.button--interactive_2:visited {
+    background-color: token('color.interactive.2.default.background');
+    color: token('color.interactive.2.default.foreground.primary');
+}
+
+.button--interactive_2:hover {
+    background-color: token('color.interactive.2.hover.background');
+    color: token('color.interactive.2.hover.foreground.primary');
+}
+
+.button--interactive_2:active {
+    background-color: token('color.interactive.2.active.background');
+    color: token('color.interactive.2.active.foreground.primary');
+}
+
+.button--interactive_2:disabled,
+.button--interactive_2.button--disabled {
+    background-color: token('color.interactive.2.disabled.background');
+    color: token('color.interactive.2.disabled.foreground.primary');
+}
+
+.button--interactive_2:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.2.outline.background');
+}
+
+/* Interactive button 2 alternative */
+
+.button--interactive_2--light-outline,
+.button--interactive_2--light-outline:visited {
+    background-color: token('color.interactive.2.default.background');
+    color: token('color.interactive.2.default.foreground.primary');
+}
+
+.button--interactive_2--light-outline:hover {
+    background-color: token('color.interactive.2.hover.background');
+    color: token('color.interactive.2.hover.foreground.primary');
+}
+
+.button--interactive_2--light-outline:active {
+    background-color: token('color.interactive.2.active.background');
+    color: token('color.interactive.2.active.foreground.primary');
+}
+
+.button--interactive_2--light-outline:disabled,
+.button--interactive_2--light-outline.button--disabled {
+    background-color: token('color.interactive.2.disabled.background');
+    color: token('color.interactive.2.disabled.foreground.primary');
+}
+
+.button--interactive_2--light-outline:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.1.active.background');
+}
+
+/* Interactive button 3 */
+
+.button--interactive_3,
+.button--interactive_3:visited {
+    background-color: token('color.interactive.3.default.background');
+    color: token('color.interactive.3.default.foreground.primary');
+}
+
+.button--interactive_3:hover {
+    background-color: token('color.interactive.3.hover.background');
+    color: token('color.interactive.3.hover.foreground.primary');
+}
+
+.button--interactive_3:active {
+    background-color: token('color.interactive.3.active.background');
+    color: token('color.interactive.3.active.foreground.primary');
+}
+
+.button--interactive_3:disabled,
+.button--interactive_3.button--disabled {
+    background-color: token('color.interactive.3.disabled.background');
+    color: token('color.interactive.3.disabled.foreground.primary');
+}
+
+.button--interactive_3:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.3.outline.background');
+}
+
+/* Interactive button, destructive */
+
+.button--destructive,
+.button--destructive:visited {
+    background-color: var(
+            --interactive-interactive_destructive-default-background
+    );
+    color: token('color.interactive.destructive.default.foreground.primary');
+}
+
+.button--destructive:hover {
+    background-color: token('color.interactive.destructive.hover.background');
+    color: token('color.interactive.destructive.hover.foreground.primary');
+}
+
+.button--destructive:active {
+    background-color: token('color.interactive.destructive.active.background');
+    color: token('color.interactive.destructive.active.foreground.primary');
+}
+
+.button--destructive:disabled,
+.button--destructive.button--disabled {
+    background-color: token('color.interactive.destructive.disabled.background');
+    color: token('color.interactive.destructive.disabled.foreground.primary');
+}
+
+.button--destructive:focus {
+    outline: 0;
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.destructive.outline.background');
+}
+
+.button--size_medium {
+    padding: token('spacing.xLarge');
+}
+
+.button--size_small {
+    padding: token('spacing.medium');
+}
+
+.button--size_compact {
+    padding: 0;
+}
+
+.button--size_pill {
+    padding: token('spacing.xSmall') token('spacing.medium');
+}
+
+.button--radius_top-bottom {
+    border-radius: token('border.radius.regular');
+}
+
+.button--radius_top {
+    border-top-left-radius: token('border.radius.regular');
+    border-top-right-radius: token('border.radius.regular');
+}
+
+.button--radius_bottom {
+    border-bottom-left-radius: token('border.radius.regular');
+    border-bottom-right-radius: token('border.radius.regular');
+}
+
+.button--radius_top-bottom.button--radiusSize_circular {
+    border-radius: token('border.radius.circle');
+}
+
+.button--radius_top.button--radiusSize_circular {
+    border-top-left-radius: token('border.radius.circle');
+    border-top-right-radius: token('border.radius.circle');
+}
+
+.button--radius_bottom.button--radiusSize_circular {
+    border-bottom-left-radius: token('border.radius.circle');
+    border-bottom-right-radius: token('border.radius.circle');
+}

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

@@ -0,0 +1,5 @@
+export { default as ButtonLink } from './link';
+export type { ButtonLinkProps } from './link';
+export { default as Button } from './button';
+export type { ButtonProps } from './button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,QAAQ,CAAC;AAC7C,YAAY,EAAC,eAAe,EAAC,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAC;AAC3C,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC"}

package/lib/components/button/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.ButtonLink = void 0;
+var link_1 = require("./link");
+Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function () { return __importDefault(link_1).default; } });
+var button_1 = require("./button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ButtonBaseProps } from './utils';
+import { UrlObject } from 'url';
+export type ButtonLinkProps = {
+    /**
+     * Link or UrlObject passed to next/link
+     */
+    href: string | UrlObject;
+    /**
+     * Optional additional onClick if you want to
+     * enrich click actions with JavaScript function
+     */
+    onClick?: React.JSX.IntrinsicElements['a']['onClick'];
+    /**
+     * Specify properties to underlying a tag
+     */
+    aProps?: React.JSX.IntrinsicElements['a'];
+    /**
+     * If we should do shallow routing or not.
+     * Shallow routing will not trigger server side props
+     * @default false
+     */
+    shallow?: boolean;
+} & ButtonBaseProps;
+export declare function ButtonLink({ href, onClick, testID, aProps, shallow, ...props }: ButtonLinkProps): import("react/jsx-runtime").JSX.Element;
+export default ButtonLink;
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/button/link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEH,eAAe,EAGlB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAC,SAAS,EAAC,MAAM,KAAK,CAAC;AAE9B,MAAM,MAAM,eAAe,GAAG;IAC1B;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAC1C;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,eAAe,CAAC;AAEpB,wBAAgB,UAAU,CAAC,EACI,IAAI,EACJ,OAAO,EACP,MAAM,EACN,MAAW,EACX,OAAe,EACf,GAAG,KAAK,EACX,EAAE,eAAe,2CAkC5C;AAED,eAAe,UAAU,CAAC"}

package/lib/components/button/link.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonLink = ButtonLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = __importDefault(require("next/link"));
+const utils_1 = require("./utils");
+function ButtonLink({ href, onClick, testID, aProps = {}, shallow = false, ...props }) {
+    const className = (0, utils_1.getBaseButtonClassName)(props);
+    const extraProps = props.state == 'active' ? { 'aria-current': true } : {};
+    const buttonStyle = (0, utils_1.getButtonStyle)(props);
+    if (props.disabled || props.state == 'loading') {
+        return ((0, jsx_runtime_1.jsx)("a", { className: className, role: "link", "aria-disabled": true, "data-testid": testID, ...extraProps, ...aProps, children: (0, jsx_runtime_1.jsx)(utils_1.ButtonBase, { ...props }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(link_1.default, { href: href, shallow: shallow, className: className, onClick: onClick, ...extraProps, ...aProps, style: buttonStyle, "data-testid": testID, children: (0, jsx_runtime_1.jsx)(utils_1.ButtonBase, { ...props }) }));
+}
+exports.default = ButtonLink;