@midas-ds/components 15.4.0 → 15.4.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 15.4.1 (2025-12-10)
+
+### 🩹 Fixes
+
+- **components:** externalize dependecies ([5e95894058](https://github.com/migrationsverket/midas/commit/5e95894058))
+
 ## 15.4.0 (2025-12-08)
 
 ### 🚀 Features

package/accordion/index.js

@@ -1,4 +1,4 @@
-import { a as r, A as a } from "../chunks/AccordionItem-BCoomT4-.js";
+import { a as r, A as a } from "../chunks/AccordionItem-69q6FXXl.js";
 export {
   r as Accordion,
   a as AccordionItem

package/badge/index.js

@@ -1,4 +1,4 @@
-import { B as o, a as r } from "../chunks/BadgeContainer-BJAC-kV0.js";
+import { B as o, a as r } from "../chunks/BadgeContainer-CKVsfTlF.js";
 export {
   o as Badge,
   r as BadgeContainer

package/breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { B as e } from "../chunks/Breadcrumbs-CnuqEeOL.js";
+import { B as e } from "../chunks/Breadcrumbs-By2bMbQd.js";
 export {
   e as Breadcrumbs
 };

package/button/index.js

@@ -1,5 +1,5 @@
-import { B as r } from "../chunks/Button-CHs1wv7n.js";
-import { B as p } from "../chunks/ButtonGroup-B6mr4JGY.js";
+import { B as r } from "../chunks/Button-BMf7mX0N.js";
+import { B as p } from "../chunks/ButtonGroup-Dr6HOBo2.js";
 export {
   r as Button,
   p as ButtonGroup

package/calendar/index.js

@@ -1,4 +1,4 @@
-import { C as r, R as n } from "../chunks/RangeCalendar-CIxwICEf.js";
+import { C as r, R as n } from "../chunks/RangeCalendar-CnquULdq.js";
 export {
   r as Calendar,
   n as RangeCalendar

package/card/index.js

@@ -1,4 +1,4 @@
-import { C, d, c as s, a as e, e as t, f as n, b as o } from "../chunks/Card-D58EJCcV.js";
+import { C, d, c as s, a as e, e as t, f as n, b as o } from "../chunks/Card-ia98VoKL.js";
 export {
   C as Card,
   d as CardActionArea,

package/character-counter/index.js

@@ -1,4 +1,4 @@
-import { C as e } from "../chunks/CharacterCounter-CzCvDmNP.js";
+import { C as e } from "../chunks/CharacterCounter-DeuE2det.js";
 export {
   e as CharacterCounter
 };

package/checkbox/index.js

@@ -1,5 +1,5 @@
-import { C as e } from "../chunks/Checkbox-CogzFDe3.js";
-import { C } from "../chunks/CheckboxGroup-BLx25gqn.js";
+import { C as e } from "../chunks/Checkbox-ClhO-AzB.js";
+import { C } from "../chunks/CheckboxGroup-C3FOm8N8.js";
 export {
   e as Checkbox,
   C as CheckboxGroup

package/chunks/{AccordionItem-BCoomT4-.js → AccordionItem-69q6FXXl.js}

@@ -1,15 +1,15 @@
-import { jsx as n, jsxs as l } from "react/jsx-runtime";
-import { c as _ } from "./clsx-CuNqTHjr.js";
-import { a6 as v, a7 as I, a8 as N } from "./react-aria-components-mIKW9wOa.js";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { DisclosureGroup as I, Disclosure as x, DisclosurePanel as N } from "react-aria-components";
 import { i as B } from "./icon-map-Ckc-nEUA.js";
-import { createContext as $, useContext as b, useEffect as w } from "react";
-import { B as A } from "./Button-CHs1wv7n.js";
-import { H as M } from "./Heading-DIw3iLMN.js";
-import { C as T } from "./chevron-down-DgT-uSF9.js";
-import '../assets/AccordionItem.css';const k = "_root_17bdp_1", j = "_contained_17bdp_5", d = {
-  root: k,
+import { createContext as w, useContext as A, useEffect as M } from "react";
+import { B as T } from "./Button-BMf7mX0N.js";
+import { H as k } from "./Heading-D8tNNJkt.js";
+import { C as D } from "./chevron-down-DgT-uSF9.js";
+import '../assets/AccordionItem.css';const b = "_root_17bdp_1", j = "_contained_17bdp_5", _ = {
+  root: b,
   contained: j
-}, u = $(void 0), oe = ({
+}, f = w(void 0), oe = ({
   variant: o,
   children: c,
   className: r,
@@ -18,32 +18,32 @@ import '../assets/AccordionItem.css';const k = "_root_17bdp_1", j = "_contained_
   ...a
 }) => {
   const s = i || o === "contained";
-  return /* @__PURE__ */ n(u.Provider, { value: { isContained: s, size: t }, children: /* @__PURE__ */ n(
-    v,
+  return /* @__PURE__ */ n(f.Provider, { value: { isContained: s, size: t }, children: /* @__PURE__ */ n(
+    I,
     {
-      className: _(
-        d.root,
-        s ? d.contained : d.uncontained,
+      className: d(
+        _.root,
+        s ? _.contained : _.uncontained,
         r
       ),
       ...a,
       children: c
     }
   ) });
-}, z = "_item_1em4f_1", H = "_contained_1em4f_18", y = "_medium_1em4f_28", D = "_success_1em4f_33", E = "_warning_1em4f_39", P = "_info_1em4f_45", R = "_important_1em4f_51", S = "_triggerButton_1em4f_62", W = "_triggerText_1em4f_66", q = "_trigger_1em4f_62", F = "_triggerMainContent_1em4f_77", G = "_chevronIcon_1em4f_94", J = "_statusIcon_1em4f_100", K = "_panel_1em4f_122", L = "_content_1em4f_130", O = "_hasBackground_1em4f_135", Q = "_header_1em4f_139", e = {
+}, z = "_item_1em4f_1", H = "_contained_1em4f_18", P = "_medium_1em4f_28", y = "_success_1em4f_33", E = "_warning_1em4f_39", G = "_info_1em4f_45", R = "_important_1em4f_51", S = "_triggerButton_1em4f_62", W = "_triggerText_1em4f_66", $ = "_trigger_1em4f_62", q = "_triggerMainContent_1em4f_77", F = "_chevronIcon_1em4f_94", J = "_statusIcon_1em4f_100", K = "_panel_1em4f_122", L = "_content_1em4f_130", O = "_hasBackground_1em4f_135", Q = "_header_1em4f_139", e = {
   item: z,
   contained: H,
-  medium: y,
-  success: D,
+  medium: P,
+  success: y,
   warning: E,
-  info: P,
+  info: G,
   important: R,
   triggerButton: S,
   triggerText: W,
-  trigger: q,
-  triggerMainContent: F,
+  trigger: $,
+  triggerMainContent: q,
   "	": "_	_1em4f_1",
-  chevronIcon: G,
+  chevronIcon: F,
   statusIcon: J,
   panel: K,
   content: L,
@@ -60,47 +60,47 @@ import '../assets/AccordionItem.css';const k = "_root_17bdp_1", j = "_contained_
   isContained: h,
   ...p
 }) => {
-  const f = b(u), m = h ?? f?.isContained ?? !1, x = typeof o == "object";
-  w(() => {
+  const g = A(f), m = h ?? g?.isContained ?? !1, C = typeof o == "object";
+  M(() => {
     t && !m && console.warn(
       "AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency."
     );
   }, [t, m]);
-  const g = t ? B[t] : null, C = g ? /* @__PURE__ */ n(
-    g,
+  const l = t ? B[t] : null, v = l ? /* @__PURE__ */ n(
+    l,
     {
       size: 20,
       className: e.statusIcon
     }
   ) : null;
-  return /* @__PURE__ */ l(
-    I,
+  return /* @__PURE__ */ u(
+    x,
     {
       ...p,
-      className: _(
+      className: d(
         e.item,
         t && e[t],
-        (s === "medium" || f?.size === "medium") && e.medium,
+        (s === "medium" || g?.size === "medium") && e.medium,
         m && e.contained,
         r
       ),
       children: [
-        /* @__PURE__ */ n("div", { className: e.trigger, children: /* @__PURE__ */ l(
-          A,
+        /* @__PURE__ */ n("div", { className: e.trigger, children: /* @__PURE__ */ u(
+          T,
           {
             className: e.triggerButton,
             slot: "trigger",
             variant: "icon",
             children: [
               /* @__PURE__ */ n(
-                T,
+                D,
                 {
                   size: 20,
                   className: e.chevronIcon
                 }
               ),
-              /* @__PURE__ */ n("div", { className: e.triggerMainContent, children: x ? o : /* @__PURE__ */ n(
-                M,
+              /* @__PURE__ */ n("div", { className: e.triggerMainContent, children: C ? o : /* @__PURE__ */ n(
+                k,
                 {
                   level: 3,
                   elementType: i,
@@ -108,14 +108,14 @@ import '../assets/AccordionItem.css';const k = "_root_17bdp_1", j = "_contained_
                   children: o
                 }
               ) }),
-              C
+              v
             ]
           }
         ) }),
         /* @__PURE__ */ n(N, { className: e.panel, children: /* @__PURE__ */ n(
           "div",
           {
-            className: _(
+            className: d(
               e.content,
               a && e.hasBackground
             ),

package/chunks/{BadgeContainer-BJAC-kV0.js → BadgeContainer-CKVsfTlF.js}

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import * as i from "react";
-import { c as t } from "./clsx-CuNqTHjr.js";
+import { c as t } from "./clsx-AexbMWKp.js";
 import '../assets/BadgeContainer.css';const d = "_badge_6i93e_1", c = "_hasChildren_6i93e_10", C = "_badgeContainer_6i93e_19", s = {
   badge: d,
   hasChildren: c,

package/chunks/Breadcrumbs-By2bMbQd.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Breadcrumbs as t, Breadcrumb as i } from "react-aria-components";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { L as p } from "./Link-yTNUNv3C.js";
+import '../assets/Breadcrumbs.css';const l = "_container_1k7pu_1", u = {
+  container: l
+}, h = ({
+  items: c,
+  className: a,
+  ...s
+}) => /* @__PURE__ */ r(
+  t,
+  {
+    className: d(u.container, a),
+    ...s,
+    children: c.map(({ title: o, href: e, isDisabled: n }, m) => /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
+      p,
+      {
+        href: e,
+        isDisabled: n,
+        children: o
+      }
+    ) }, o.toLocaleLowerCase() + m))
+  }
+);
+export {
+  h as B
+};

package/chunks/Button-BMf7mX0N.js

@@ -0,0 +1,46 @@
+import { jsx as e, jsxs as c, Fragment as l } from "react/jsx-runtime";
+import { B as r } from "./Button.module-Cm0H98vy.js";
+import { Button as u } from "react-aria-components";
+import { c as p } from "./clsx-AexbMWKp.js";
+import { S as g } from "./Spinner-Pll5zpx8.js";
+const S = ({
+  variant: i = "primary",
+  fullwidth: o,
+  className: m,
+  iconPlacement: s,
+  size: d = "large",
+  icon: n,
+  iconSize: a,
+  ...t
+}) => /* @__PURE__ */ e(
+  u,
+  {
+    className: p(
+      r.button,
+      i === "primary" && r.primary,
+      i === "secondary" && r.secondary,
+      i === "tertiary" && r.tertiary,
+      i === "danger" && r.danger,
+      i === "icon" && r.iconBtn,
+      o && r.fullwidth,
+      d === "medium" && r.medium,
+      s === "right" && r.iconRight,
+      m
+    ),
+    ...t,
+    children: /* @__PURE__ */ c(l, { children: [
+      n && !t.isPending && /* @__PURE__ */ e(
+        n,
+        {
+          "aria-hidden": !0,
+          size: a ?? 20
+        }
+      ),
+      t.isPending && /* @__PURE__ */ e(g, { small: !0 }),
+      t.children
+    ] })
+  }
+);
+export {
+  S as B
+};

package/chunks/{ButtonGroup-B6mr4JGY.js → ButtonGroup-Dr6HOBo2.js}

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { c as a } from "./clsx-CuNqTHjr.js";
+import { c as a } from "./clsx-AexbMWKp.js";
 import '../assets/ButtonGroup.css';const n = "_buttonGroup_o1hqg_1", p = {
   buttonGroup: n
 }, b = ({

package/chunks/Card-ia98VoKL.js

@@ -0,0 +1,130 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { c } from "./clsx-AexbMWKp.js";
+import * as i from "react";
+import { H as m } from "./Heading-D8tNNJkt.js";
+import { Button as _, Link as C } from "react-aria-components";
+import { A as x } from "./arrow-right-DNeP8Eqv.js";
+import '../assets/Card.css';const A = "_card_1x9yi_1", h = "_horizontal_1x9yi_11", u = "_cardLink_1x9yi_16", I = "_cardContent_1x9yi_21", z = "_cardActions_1x9yi_40", k = "_cardActionArea_1x9yi_50", p = "_cardImage_1x9yi_83", y = "_cardLinkIcon_1x9yi_115", n = {
+  card: A,
+  horizontal: h,
+  cardLink: u,
+  cardContent: I,
+  cardActions: z,
+  cardActionArea: k,
+  cardImage: p,
+  cardLinkIcon: y
+}, e = i.createContext({
+  horizontal: void 0,
+  titleId: void 0
+}), j = ({
+  horizontal: a,
+  className: o,
+  children: t,
+  ...s
+}) => {
+  const d = `card-title-${i.useId()}`;
+  return /* @__PURE__ */ r(e.Provider, { value: { horizontal: a, titleId: d }, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ...s,
+      className: c(
+        n.card,
+        a && n.horizontal,
+        o
+      ),
+      children: t
+    }
+  ) });
+}, H = ({
+  children: a,
+  ...o
+}) => {
+  const { horizontal: t } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...o,
+      className: c(n.cardContent, t && n.horizontal),
+      children: a
+    }
+  );
+}, R = ({
+  elementType: a = "h2",
+  children: o
+}) => {
+  const { horizontal: t, titleId: s } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      level: t ? 5 : 3,
+      elementType: a,
+      isExpressive: t,
+      className: c(n.cardTitle, t && n.horizontal),
+      id: s,
+      children: o
+    }
+  );
+}, T = ({
+  children: a,
+  ...o
+}) => {
+  const { horizontal: t } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...o,
+      className: c(n.cardActions, t && n.horizontal),
+      children: a
+    }
+  );
+}, w = ({ children: a, className: o, ...t }) => {
+  const { titleId: s } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    _,
+    {
+      ...t,
+      "aria-labelledby": s,
+      className: c(n.cardActionArea, o),
+      children: a
+    }
+  );
+}, B = ({
+  as: a = "img",
+  className: o,
+  ...t
+}) => /* @__PURE__ */ r(
+  a,
+  {
+    ...t,
+    className: c(n.cardImage, o)
+  }
+), E = ({
+  children: a,
+  as: o,
+  ...t
+}) => /* @__PURE__ */ l(
+  o || C,
+  {
+    ...t,
+    className: c(n.cardLink, t.className),
+    children: [
+      a,
+      /* @__PURE__ */ r(
+        x,
+        {
+          className: n.cardLinkIcon,
+          size: 24
+        }
+      )
+    ]
+  }
+);
+export {
+  j as C,
+  H as a,
+  R as b,
+  T as c,
+  w as d,
+  B as e,
+  E as f
+};

package/chunks/CharacterCounter-DeuE2det.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as i from "react";
+import { useContextProps as d, InputContext as h } from "react-aria-components";
+import '../assets/CharacterCounter.css';const m = "_characterCounter_1f0mh_1", u = {
+  characterCounter: m
+}, f = i.forwardRef((t, a) => {
+  [t] = d(t, a, h);
+  const { maxLength: e, value: n, isLonely: c } = t, { length: r } = n?.toString() ?? "", o = e !== void 0;
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: u.characterCounter,
+      "data-exceeded": o && r > e || void 0,
+      "data-lonely": c || void 0,
+      children: o ? `${r} / ${e}` : r
+    }
+  );
+});
+export {
+  f as C
+};

package/chunks/Checkbox-ClhO-AzB.js

@@ -0,0 +1,122 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import f from "react";
+import { mergeProps as u, VisuallyHidden as k, useCheckboxGroupItem as C, useCheckbox as R, useHover as _, usePress as I, useFocusRing as P } from "react-aria";
+import { useContextProps as g, CheckboxContext as G, useSlottedContext as y, FormContext as w } from "react-aria-components";
+import { a as h } from "./clsx-AexbMWKp.js";
+import { variables as m } from "@midas-ds/theme";
+import { c as B } from "./createLucideIcon-D4r5Phnh.js";
+import { C as F } from "./check-BxlvVsvD.js";
+import { useToggleState as L } from "@react-stately/toggle";
+import '../assets/Checkbox.css';const N = [["path", { d: "M5 12h14", key: "1ays0h" }]], S = B("minus", N), D = f.createContext(null), H = "_checkboxInner_19c98_1", O = "_checkbox_19c98_1", j = "_checkboxGroup_19c98_143", q = "_checkboxList_19c98_154", x = {
+  checkboxInner: H,
+  checkbox: O,
+  checkboxGroup: j,
+  checkboxList: q
+}, b = i.forwardRef((e, o) => {
+  const { hoverProps: c, isHovered: s } = e.hoverResult, { pressProps: n, isPressed: a } = e.pressResult, { isFocused: r, isFocusVisible: d, focusProps: l } = e.focusRingAria;
+  return /* @__PURE__ */ v(
+    "label",
+    {
+      ref: o,
+      ...u(c, n, e.labelProps),
+      slot: e.slot || void 0,
+      className: h(x.checkbox, e.className),
+      "data-hovered": s || void 0,
+      "data-selected": e.isSelected || void 0,
+      "data-indeterminate": e.isIndeterminate || void 0,
+      "data-pressed": a || void 0,
+      "data-disabled": e.isDisabled || void 0,
+      "data-readonly": e.isReadOnly || void 0,
+      "data-invalid": e.isInvalid || void 0,
+      "data-focused": r || void 0,
+      "data-focus-visible": d || void 0,
+      "data-required": e.isRequired || void 0,
+      children: [
+        /* @__PURE__ */ t("div", { className: h(x.checkboxInner), children: e.isIndeterminate ? /* @__PURE__ */ t(
+          S,
+          {
+            size: 14,
+            color: m.iconOnColor
+          }
+        ) : /* @__PURE__ */ t(
+          F,
+          {
+            size: 14,
+            color: m.iconOnColor
+          }
+        ) }),
+        /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
+          "input",
+          {
+            ...u(e.inputProps, l),
+            ref: e.inputRef
+          }
+        ) }),
+        e.children
+      ]
+    }
+  );
+}), z = i.forwardRef((e, o) => {
+  const c = C(
+    {
+      ...e,
+      value: e.value || ""
+    },
+    e.state,
+    e.inputRef
+  );
+  return /* @__PURE__ */ t(
+    b,
+    {
+      ...e,
+      ...c,
+      ref: o
+    }
+  );
+}), A = i.forwardRef((e, o) => {
+  const c = R(e, L(e), e.inputRef);
+  return /* @__PURE__ */ t(
+    b,
+    {
+      ...e,
+      ...c,
+      ref: o
+    }
+  );
+}), X = i.forwardRef(
+  (e, o) => {
+    [e, o] = g(e, o, G);
+    const c = y(w), s = e.validationBehavior ?? c?.validationBehavior ?? "native", n = i.useContext(D), a = i.useRef(null), r = _(e), d = I({
+      ref: o,
+      isDisabled: e.isDisabled
+    }), l = P();
+    return n ? /* @__PURE__ */ t(
+      z,
+      {
+        ...e,
+        state: n,
+        inputRef: a,
+        hoverResult: r,
+        pressResult: d,
+        focusRingAria: l,
+        validationBehavior: s
+      }
+    ) : /* @__PURE__ */ t(
+      A,
+      {
+        ...e,
+        inputRef: a,
+        hoverResult: r,
+        pressResult: d,
+        focusRingAria: l,
+        validationBehavior: s
+      }
+    );
+  }
+);
+export {
+  X as C,
+  D as a,
+  x as s
+};

package/chunks/CheckboxGroup-C3FOm8N8.js

@@ -0,0 +1,84 @@
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { useCheckboxGroup as C } from "react-aria";
+import { useCheckboxGroupState as v } from "react-stately";
+import { a as k, L as S } from "./Label-D6WuwdAj.js";
+import { T as y } from "./Text-TWzJxnto.js";
+import * as r from "react";
+import { C as d, s as u, a as g } from "./Checkbox-ClhO-AzB.js";
+import { FieldErrorContext as A } from "react-aria-components";
+import { F as P } from "./FieldError-C0HRIcAx.js";
+import { u as V } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
+const F = (e, { value: t }) => {
+  const a = r.Children.toArray(e).filter(
+    (l) => r.isValidElement(l) && l.type === d
+  ), c = r.Children.count(a), n = r.Children.toArray(e).filter((l) => r.isValidElement(l)).filter((l) => !!l && l.type === d).map((l) => l.props.value), s = t.length === 0, i = t.length === c;
+  return {
+    allSelected: i,
+    someSelected: !s && !i,
+    checkboxValues: n
+  };
+}, b = ({ state: e, errorMessage: t }) => /* @__PURE__ */ o(A.Provider, { value: e.displayValidation, children: /* @__PURE__ */ o(P, { children: t }) }), G = { selectAll: "Select all" }, L = { selectAll: "Välj alla" }, E = {
+  en: G,
+  sv: L
+};
+function W(e) {
+  const t = v(e), a = V(E), { groupProps: c, labelProps: n, descriptionProps: s } = C(
+    e,
+    t
+  ), { allSelected: i, someSelected: m, checkboxValues: l } = F(
+    e.children,
+    t
+  ), x = (f) => {
+    t.setValue(f ? l : []);
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ...c,
+      className: u.checkboxGroup,
+      "data-readonly": e.isReadOnly || void 0,
+      "data-disabled": e.isDisabled || void 0,
+      children: [
+        /* @__PURE__ */ o(k, { popover: e.popover, children: e.label && /* @__PURE__ */ o(S, { ...n, children: e.label }) }),
+        e.description && /* @__PURE__ */ o(
+          y,
+          {
+            slot: "description",
+            ...s,
+            children: e.description
+          }
+        ),
+        e.errorPosition === "top" && /* @__PURE__ */ o(
+          b,
+          {
+            ...e,
+            state: t
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: u.checkboxList, children: [
+          e.showSelectAll && /* @__PURE__ */ o(
+            d,
+            {
+              isSelected: i,
+              isIndeterminate: m,
+              isReadOnly: e.isReadOnly,
+              onChange: x,
+              children: e.selectAllLabel || a.format("selectAll")
+            }
+          ),
+          /* @__PURE__ */ o(g.Provider, { value: t, children: e.children })
+        ] }),
+        e.errorPosition === "bottom" && /* @__PURE__ */ o(
+          b,
+          {
+            ...e,
+            state: t
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  W as C
+};