@midas-ds/components 1.1.0 → 1.3.0

package/package.json

@@ -14,8 +14,9 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "1.1.0",
-  "main": "./index.js",
+  "version": "1.3.0",
+  "main": "./index.cjs",
+  "module": "./index.js",
   "types": "./index.d.ts",
   "type": "module",
   "files": [
@@ -29,7 +30,24 @@
     "url": "https://github.com/migrationsverket/midas"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./theme": {
+      "types": "./theme/index.d.ts",
+      "import": "./theme.js",
+      "require": "./theme.cjs"
+    }
+  },
+  "dependencies": {
+    "@react-stately/toast": "3.0.0-beta.7",
+    "react-aria": "3.37.0",
+    "react-aria-components": "^1.6.0",
+    "react-stately": "3.35.0"
   }
 }

package/table/Table.d.ts

@@ -1,11 +1,10 @@
 import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
-export interface TableProps<T> extends AriaTableProps {
+export interface TableProps extends AriaTableProps {
     narrow?: boolean;
     striped?: boolean;
-    rows: T[];
 }
-export declare const Table: <T extends object>({ narrow, striped, ...rest }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const TableHeader: <T extends object>({ columns, children }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ narrow, striped, className, ...rest }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ columns, children, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Row: <T extends object>({ id, columns, children, ...rest }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Column: ({ children, ...rest }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Cell: ({ ...rest }: CellProps) => import("react/jsx-runtime").JSX.Element;

package/textfield/TextField.d.ts

@@ -1,16 +1,27 @@
-import { default as React, ReactNode } from 'react';
 import { TextFieldProps as AriaTextFieldProps, ValidationResult } from 'react-aria-components';
+import * as React from 'react';
 export interface TextFieldProps extends AriaTextFieldProps {
-    children?: ReactNode;
+    children?: React.ReactNode;
+    /** Specify label displayed above the TextField*/
     label?: string;
+    /** Specify description displayed below the label */
     description?: string;
+    /** Custom error messages */
     errorMessage?: string | ((validation: ValidationResult) => string) | undefined;
-    validationType?: 'ssn' | RegExp;
+    /** Enable validations or add your own regex */
+    validationType?: 'ssn' | 'dossnr' | RegExp;
+    /** Set number of characters that are allowed before the TextField is put in an invalid state */
     maxCharacters?: number;
+    /**
+     * Whether to show the character counter or not
+     * @default
+     * false
+     */
     showCounter?: boolean;
 }
 export declare const TextField: React.FC<TextFieldProps>;
 type InputWrapperProps = Pick<TextFieldProps, 'label' | 'description' | 'errorMessage' | 'children'>;
-export declare const InputWrapper: ({ label, description, errorMessage, children }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ label, description, errorMessage, children, }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ssnRegEx: RegExp;
+export declare const dossNrRegEx: RegExp;
 export {};

package/theme.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./tokens-BskyMDHv.cjs"),s={...o.tokens};exports.accessibility=o.accessibility;exports.baseColors=o.baseColors;exports.borderRadius=o.borderRadius;exports.borderWidths=o.borderWidths;exports.boxShadow=o.boxShadow;exports.breakpoints=o.breakpoints;exports.buttonColors=o.buttonColors;exports.font=o.font;exports.fontSizes=o.fontSizes;exports.fontWeights=o.fontWeights;exports.inputColor=o.inputColor;exports.midasColors=o.midasColors;exports.midasTransitions=o.midasTransitions;exports.signalColors=o.signalColors;exports.theme=s;

package/theme.js

@@ -0,0 +1,20 @@
+import { t as s } from "./tokens-CjXmpXTi.js";
+import { j as r, b as e, c as n, d as b, l as d, h as l, a as m, k as f, e as h, f as p, i as C, m as c, g, s as k } from "./tokens-CjXmpXTi.js";
+const a = { ...s };
+export {
+  r as accessibility,
+  e as baseColors,
+  n as borderRadius,
+  b as borderWidths,
+  d as boxShadow,
+  l as breakpoints,
+  m as buttonColors,
+  f as font,
+  h as fontSizes,
+  p as fontWeights,
+  C as inputColor,
+  c as midasColors,
+  g as midasTransitions,
+  k as signalColors,
+  a as theme
+};

package/tokens-BskyMDHv.cjs

@@ -0,0 +1 @@
+"use strict";const e={white:"#ffffff",black:"#000000",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray130:"#5d5d5d",gray150:"#1f1f1f",red10:"#f7e9e7",red20:"#f1d4d1",red30:"#e9beba",red40:"#e2a8a4",red50:"#d9918e",red60:"#d37a7a",red70:"#cc6467",red80:"#c54c56",red90:"#be3345",red100:"#b90835",red130:"#8b1327",red150:"#641018",blue10:"#eaf2f6",blue20:"#d5e5ed",blue30:"#c0d7e4",blue40:"#abcbdb",blue50:"#94bcd1",blue60:"#82b0c9",blue70:"#6ca3c0",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue130:"#25607f",blue150:"#143c50"},o={outline:"#303030",primaryBackground:e.blue150,primaryText:"#303030",primaryHover:e.blue130,primaryFocus:e.black,primaryActive:"#4289ae",secondaryBackground:e.gray130,secondaryText:e.white,secondaryHover:"#303030",secondaryActive:"#303030"},i={inputText:e.gray150},r={signalGreen10:"#d5f2d9",signalGreen100:"#008d3c",signalBlue10:e.blue10,signalBlue100:"#0066cc",signalYellow10:"#fff8e1",signalYellow100:"#f1c21b",signalRed10:"#ffdfdf",signalRed100:"#e62323",signalRed130:"#b31b1b",signalRed150:"#801313"},a={sRadius:" 0.125rem",mRadius:" 0.25rem"},t={xsWidth:" 0.0625rem",sWidth:" 0.125rem",mWidth:" 0.25rem"},d={lightWeight:"300",regularWeight:"400",mediumWeight:"500",semiBoldWeight:"600",boldWeight:"700",blackWeight:"900"},n={desktopSize:"1rem",mobileSize:"1rem",largeSize:"1.5rem",inputNormalSize:"0.875rem",inputMessageSize:"0.75rem",inputLabelSize:"1rem",inputDescriptionSize:"0.875rem"},s={logoPrimary:e.red100,logoSecondary:e.white,textPrimary:e.gray150,textSecondary:e.white,textTertiary:e.red100,link:e.blue130,linkVisited:"#663366",backgroundPrimary:e.white,backgroundSecondary:e.gray10,backgroundFooter1:e.red100,backgroundFooter2:e.red130,backgroundInfo:e.blue10,backgroundImportant:r.signalYellow10,borderPrimary:e.black,borderSecondary:e.gray60,borderFocusOuter:e.black,borderFocusInner:e.white,iconPrimary:e.black,iconInverted:e.white},c={slowTransition:"500ms",normalTransition:"300ms",fastTransition:"250ms"},l={smBreakpoint:"(max-width: 767px)",mdBreakpoint:"(min-width: 768px)",lgBreakpoint:"(min-width: 1200px)",xlBreakpoint:"(min-width: 1440px)"},b={forcedColorsMode:"(forced-colors: active)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},g={display:'"Inter", sans-serif'},u={focus:"0 0 0 2px white, 0 0 0 4px black"},m=Object.freeze(Object.defineProperty({__proto__:null,accessibility:b,baseColors:e,borderRadius:a,borderWidths:t,boxShadow:u,breakpoints:l,buttonColors:o,font:g,fontSizes:n,fontWeights:d,inputColor:i,midasColors:s,midasTransitions:c,signalColors:r},Symbol.toStringTag,{value:"Module"}));exports.accessibility=b;exports.baseColors=e;exports.borderRadius=a;exports.borderWidths=t;exports.boxShadow=u;exports.breakpoints=l;exports.buttonColors=o;exports.font=g;exports.fontSizes=n;exports.fontWeights=d;exports.inputColor=i;exports.midasColors=s;exports.midasTransitions=c;exports.signalColors=r;exports.tokens=m;

package/Breadcrumbs.css

@@ -1 +0,0 @@
-._container_k9jic_4{padding-inline-start:0;font-family:Inter,sans-serif;display:flex;flex-flow:row wrap;gap:.25rem;list-style:none;margin:0}._container_k9jic_4 li:not(:last-child):after{color:#1f1f1f;content:"/";alt:" ";padding:0 5px}._container_k9jic_4 li[data-current=true] a{cursor:default}

package/Button-DL6nqUco.js

@@ -1,182 +0,0 @@
-import { n as I, e as x, o as E, a as w, c as F, b as N, d as O, k as y } from "./useFocusRing-9PXyKy2A.js";
-import L, { createContext as A, useRef as S, useEffect as V } from "react";
-import { $ as M } from "./Hidden-CVlUgUJM.js";
-import { $ as R } from "./useFocusable-CcEBZe40.js";
-function k(n, e) {
-  let {
-    elementType: t = "button",
-    isDisabled: d,
-    onPress: i,
-    onPressStart: a,
-    onPressEnd: r,
-    onPressUp: v,
-    onPressChange: l,
-    preventFocusOnPress: $,
-    allowFocusWhenDisabled: g,
-    // @ts-ignore
-    onClick: c,
-    href: h,
-    target: P,
-    rel: u,
-    type: f = "button"
-  } = n, o;
-  t === "button" ? o = {
-    type: f,
-    disabled: d
-  } : o = {
-    role: "button",
-    tabIndex: d ? void 0 : 0,
-    href: t === "a" && !d ? h : void 0,
-    target: t === "a" ? P : void 0,
-    type: t === "input" ? f : void 0,
-    disabled: t === "input" ? d : void 0,
-    "aria-disabled": !d || t === "input" ? void 0 : d,
-    rel: t === "a" ? u : void 0
-  };
-  let { pressProps: b, isPressed: p } = I({
-    onPressStart: a,
-    onPressEnd: r,
-    onPressChange: l,
-    onPress: i,
-    onPressUp: v,
-    isDisabled: d,
-    preventFocusOnPress: $,
-    ref: e
-  }), { focusableProps: m } = R(n, e);
-  g && (m.tabIndex = d ? -1 : m.tabIndex);
-  let _ = x(m, b, E(n, {
-    labelable: !0
-  }));
-  return {
-    isPressed: p,
-    buttonProps: x(o, _, {
-      "aria-haspopup": n["aria-haspopup"],
-      "aria-expanded": n["aria-expanded"],
-      "aria-controls": n["aria-controls"],
-      "aria-pressed": n["aria-pressed"],
-      onClick: (D) => {
-        c && (c(D), console.warn("onClick is deprecated, please use onPress"));
-      }
-    })
-  };
-}
-const T = 7e3;
-let s = null;
-function C(n, e = "assertive", t = T) {
-  s ? s.announce(n, e, t) : (s = new H(), (typeof IS_REACT_ACT_ENVIRONMENT == "boolean" ? IS_REACT_ACT_ENVIRONMENT : typeof jest < "u") ? s.announce(n, e, t) : setTimeout(() => {
-    s != null && s.isAttached() && (s == null || s.announce(n, e, t));
-  }, 100));
-}
-function z(n) {
-  s && s.clear(n);
-}
-class H {
-  isAttached() {
-    var e;
-    return (e = this.node) === null || e === void 0 ? void 0 : e.isConnected;
-  }
-  createLog(e) {
-    let t = document.createElement("div");
-    return t.setAttribute("role", "log"), t.setAttribute("aria-live", e), t.setAttribute("aria-relevant", "additions"), t;
-  }
-  destroy() {
-    this.node && (document.body.removeChild(this.node), this.node = null);
-  }
-  announce(e, t = "assertive", d = T) {
-    var i, a;
-    if (!this.node) return;
-    let r = document.createElement("div");
-    typeof e == "object" ? (r.setAttribute("role", "img"), r.setAttribute("aria-labelledby", e["aria-labelledby"])) : r.textContent = e, t === "assertive" ? (i = this.assertiveLog) === null || i === void 0 || i.appendChild(r) : (a = this.politeLog) === null || a === void 0 || a.appendChild(r), e !== "" && setTimeout(() => {
-      r.remove();
-    }, d);
-  }
-  clear(e) {
-    this.node && ((!e || e === "assertive") && this.assertiveLog && (this.assertiveLog.innerHTML = ""), (!e || e === "polite") && this.politeLog && (this.politeLog.innerHTML = ""));
-  }
-  constructor() {
-    this.node = null, this.assertiveLog = null, this.politeLog = null, typeof document < "u" && (this.node = document.createElement("div"), this.node.dataset.liveAnnouncer = "true", Object.assign(this.node.style, {
-      border: 0,
-      clip: "rect(0 0 0 0)",
-      clipPath: "inset(50%)",
-      height: "1px",
-      margin: "-1px",
-      overflow: "hidden",
-      padding: 0,
-      position: "absolute",
-      width: "1px",
-      whiteSpace: "nowrap"
-    }), this.assertiveLog = this.createLog("assertive"), this.node.appendChild(this.assertiveLog), this.politeLog = this.createLog("polite"), this.node.appendChild(this.politeLog), document.body.prepend(this.node));
-  }
-}
-const U = /* @__PURE__ */ A(null), j = /* @__PURE__ */ new Set([
-  "form",
-  "formAction",
-  "formEncType",
-  "formMethod",
-  "formNoValidate",
-  "formTarget",
-  "name",
-  "value"
-]), B = /* @__PURE__ */ A({}), J = /* @__PURE__ */ M(function(e, t) {
-  [e, t] = w(e, t, B), e = K(e);
-  let d = e, { isPending: i } = d, { buttonProps: a, isPressed: r } = k(e, t), { focusProps: v, isFocused: l, isFocusVisible: $ } = F(e), { hoverProps: g, isHovered: c } = N({
-    ...e,
-    isDisabled: e.isDisabled || i
-  }), h = {
-    isHovered: c,
-    isPressed: (d.isPressed || r) && !i,
-    isFocused: l,
-    isFocusVisible: $,
-    isDisabled: e.isDisabled || !1,
-    isPending: i ?? !1
-  }, P = O({
-    ...e,
-    values: h,
-    defaultClassName: "react-aria-Button"
-  }), u = y(a.id), f = y(), o = a["aria-labelledby"];
-  i && (o ? o = `${o} ${f}` : a["aria-label"] && (o = `${u} ${f}`));
-  let b = S(i);
-  return V(() => {
-    let p = {
-      "aria-labelledby": o || u
-    };
-    (!b.current && l && i || b.current && l && !i) && C(p, "assertive"), b.current = i;
-  }, [
-    i,
-    l,
-    o,
-    u
-  ]), /* @__PURE__ */ L.createElement("button", {
-    ...E(e, {
-      propNames: j
-    }),
-    ...x(a, v, g),
-    ...P,
-    type: a.type === "submit" && i ? "button" : a.type,
-    id: u,
-    ref: t,
-    "aria-labelledby": o,
-    slot: e.slot || void 0,
-    "aria-disabled": i ? "true" : a["aria-disabled"],
-    "data-disabled": e.isDisabled || void 0,
-    "data-pressed": h.isPressed || void 0,
-    "data-hovered": c || void 0,
-    "data-focused": l || void 0,
-    "data-pending": i || void 0,
-    "data-focus-visible": $ || void 0
-  }, /* @__PURE__ */ L.createElement(U.Provider, {
-    value: {
-      id: f
-    }
-  }, P.children));
-});
-function K(n) {
-  return n.isPending && (n.onPress = void 0, n.onPressStart = void 0, n.onPressEnd = void 0, n.onPressChange = void 0, n.onPressUp = void 0, n.onKeyDown = void 0, n.onKeyUp = void 0, n.onClick = void 0, n.href = void 0), n;
-}
-export {
-  J as $,
-  B as a,
-  C as b,
-  k as c,
-  z as d
-};

package/Button.css

@@ -1 +0,0 @@
-._button_1tedv_4{font-family:Inter,sans-serif;font-size:1rem;font-weight:500;padding:.8125rem 1.9375rem;background-color:#143c50;border:solid 1px transparent;color:#fff;cursor:pointer;opacity:1;outline:none;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem}._button_1tedv_4[data-focus-visible],._button_1tedv_4:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}._button_1tedv_4:hover{background-color:#25607f}._button_1tedv_4[data-pressed]{background-color:#4289ad;outline:none}._primary_1tedv_36[data-disabled]{color:#bfbfbf;pointer-events:none;background-color:#f2f2f2}._secondary_1tedv_42{color:#143c50;background-color:#fff;border-color:#143c50;opacity:1}._secondary_1tedv_42:hover{color:#143c50;background-color:#f2f2f2}._secondary_1tedv_42[data-disabled]{color:#bfbfbf;pointer-events:none;background-color:#fff;border-color:#bfbfbf}._secondary_1tedv_42[data-pressed]{background-color:#e6e6e6;border-color:#143c50}._tertiary_1tedv_66{color:#143c50;background-color:transparent;padding:.8125rem .9375rem;opacity:1}._tertiary_1tedv_66:hover{color:#143c50;background-color:#f2f2f2}._tertiary_1tedv_66[data-disabled]{color:#bfbfbf;pointer-events:none;background-color:#fff}._tertiary_1tedv_66[data-pressed]{background-color:#e6e6e6}._iconBtn_1tedv_88{background-color:transparent;padding:.875rem;color:#000;display:flex;align-items:center}._iconBtn_1tedv_88:hover{background-color:#0000001a}._iconBtn_1tedv_88[data-disabled]{color:#bfbfbf;pointer-events:none}._iconBtn_1tedv_88[data-pressed]{background-color:#e6e6e6}._danger_1tedv_109{color:#fff;background-color:#e62323;opacity:1}._danger_1tedv_109:hover{color:#fff;background-color:#b31b1b}._danger_1tedv_109[data-disabled]{color:#bfbfbf;pointer-events:none;background-color:#f2f2f2}._danger_1tedv_109[data-pressed]{background-color:#801313;outline:none}._iconRight_1tedv_131{flex-direction:row-reverse}._fullwidth_1tedv_135{width:100%}._small_1tedv_139{min-height:1.5rem;font-size:.75rem;padding:.25rem .5rem}

package/ButtonGroup.css

@@ -1 +0,0 @@
-._buttonGroup_5pd8y_4{display:flex;flex-flow:row wrap;gap:.5rem}@media (max-width: 767px){._buttonGroup_5pd8y_4>*{width:100%}}

package/Card.css

@@ -1 +0,0 @@
-._card_vbecj_4{position:relative;font-family:Inter,sans-serif;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:1rem;padding:2rem 1.5rem;border-bottom:1px solid #000000;background-color:#fff;transition:transform .25s ease-in-out,background-color .25s ease-in-out}._card_vbecj_4:hover{background-color:#e6e6e6}._card_vbecj_4:active{background-color:#f2f2f2}._card_vbecj_4:focus-visible{outline:2px solid #000000;outline-offset:-2px}._content_vbecj_33{display:flex;flex-direction:column;gap:.5rem}._heading_vbecj_39{margin:0;font-size:1.5rem;line-height:2rem;font-weight:500;color:#1f1f1f}._image_vbecj_47{height:auto;width:100%;object-fit:cover;max-width:100%;vertical-align:middle;aspect-ratio:4/3}._background_vbecj_56{background-color:#d5e5ed}._text_vbecj_60{margin-block-start:0;color:#000;margin:0;padding:0}