@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/FormView.js

@@ -0,0 +1,354 @@
+import { jsxs as c, jsx as r, Fragment as g } from "react/jsx-runtime";
+import W from "react";
+import { P as e } from "./index-Ds9PUTwb.js";
+import { n as y } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import M from "./FlexGrid.js";
+import Y from "./FlexGridItem.js";
+import b from "./Button.js";
+import x from "./IconButton.js";
+import U from "./TextInput.js";
+import q from "./CheckBoxInput.js";
+import H from "./RadioGroup.js";
+import J from "./NumberInput.js";
+import K from "./DecimalInput.js";
+import L from "./PasswordInput.js";
+import Q from "./TextAreaInput.js";
+import X from "./TimeInput.js";
+import Z from "./ColorInput.js";
+import z from "./FileInput.js";
+import ee from "./RangeSlider.js";
+import { d as re, c as te, b as oe } from "./utils-DEke8iwo.js";
+import ae from "./FormField.js";
+import { u as ne } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const ie = y.div`
+  display: flex;
+  justify-content: space-between;
+`, le = y.form`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: ${(d) => re(
+  d.theme,
+  "Popover",
+  d.color,
+  "enabled",
+  "boxShadow"
+)};
+  border-radius: ${(d) => te(d.theme, d.borderRadius)};
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  padding: 12px;
+  background-color: ${(d) => oe(d.theme, "Popover", "default", "enabled", "bg")};
+`, de = (d, a, l, n, i, o) => {
+  var m;
+  switch (d || "") {
+    case "text":
+      return /* @__PURE__ */ r(
+        U,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ r(
+        q,
+        {
+          color: i,
+          size: o,
+          name: l,
+          ...a
+        }
+      );
+    case "radioGroup":
+      return /* @__PURE__ */ r(
+        H,
+        {
+          color: i,
+          size: o,
+          value: n,
+          radioProps: a.radioProps,
+          name: l,
+          items: [
+            ...(m = a.items) == null ? void 0 : m.map((s) => ({ value: s.value, label: s.label }))
+          ]
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ r(
+        J,
+        {
+          color: i,
+          size: o,
+          name: l,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "decimal":
+      return /* @__PURE__ */ r(
+        K,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "file":
+      return /* @__PURE__ */ r(
+        z,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "password":
+      return /* @__PURE__ */ r(
+        L,
+        {
+          name: l,
+          color: i,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "textArea":
+      return /* @__PURE__ */ r(
+        Q,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "time":
+      return /* @__PURE__ */ r(
+        X,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "color":
+      return /* @__PURE__ */ r(
+        Z,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    case "range":
+      return /* @__PURE__ */ r(
+        ee,
+        {
+          name: l,
+          color: i,
+          size: o,
+          ...a,
+          defaultValue: n
+        }
+      );
+    default:
+      return n;
+  }
+}, h = W.forwardRef((d, a) => {
+  const {
+    __TYPE__: l = "FORM_VIEW",
+    goToPreviousView: n,
+    id: i,
+    data: o,
+    fields: m = [],
+    errors: s = {},
+    flexGridProps: T,
+    goBackText: k = "Go back",
+    backActive: v = !0,
+    nextActive: I = !0,
+    previousActive: V = !0,
+    editActive: se,
+    disableGoBack: w = !1,
+    disableNext: _ = !1,
+    disablePrevious: B = !1,
+    disableEdit: ce,
+    disableDiscard: C = !1,
+    disableSave: A = !1,
+    discardText: F = "Discard",
+    saveText: G = "Save",
+    //------------------
+    goToNext: R = () => {
+    },
+    goToPrevious: S = () => {
+    },
+    onEdit: me = () => {
+    },
+    goBack: N = () => {
+    },
+    onSubmit: E = () => {
+    },
+    onDiscard: P = () => {
+    },
+    //------------------
+    className: ue = "",
+    style: fe = {},
+    color: f = "primary",
+    size: p = "small",
+    children: j,
+    ...D
+  } = d, O = ne(), $ = (t, u) => {
+    n && n(), N(t, u);
+  };
+  return /* @__PURE__ */ c(
+    le,
+    {
+      ref: a,
+      theme: O,
+      color: f,
+      borderRadius: "regular",
+      ...D,
+      children: [
+        v && /* @__PURE__ */ r(
+          b,
+          {
+            leadingIcon: "arrow-circle-left",
+            text: k,
+            btnType: "outline",
+            style: { width: "fit-content" },
+            onClick: (t) => $(t, o),
+            disabled: w,
+            type: "button"
+          },
+          0
+        ),
+        /* @__PURE__ */ r(g, { children: j || /* @__PURE__ */ r(M, { spacing: 10, ...T, children: m.map((t, u) => /* @__PURE__ */ r(Y, { ...t, children: /* @__PURE__ */ r(
+          ae,
+          {
+            label: t.label,
+            text: s[t.accessor],
+            color: s[t.accessor] ? "danger" : f,
+            size: p,
+            children: t.type == "custom" ? t.element : de(
+              t.type,
+              t.inputProps,
+              t.accessor,
+              o[t.accessor],
+              s[t.accessor] ? "danger" : f,
+              p
+            )
+          },
+          u
+        ) }, u)) }) }),
+        /* @__PURE__ */ c(ie, { children: [
+          /* @__PURE__ */ c("div", { children: [
+            I && /* @__PURE__ */ c(g, { children: [
+              /* @__PURE__ */ r(
+                x,
+                {
+                  btnType: "outline",
+                  icon: "angle-left",
+                  disabled: B,
+                  onClick: (t) => S(o, t),
+                  type: "button"
+                }
+              ),
+              "  "
+            ] }),
+            V && /* @__PURE__ */ r(
+              x,
+              {
+                btnType: "outline",
+                icon: "angle-right",
+                disabled: _,
+                onClick: (t) => R(o, t),
+                type: "button"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("div", { children: [
+            /* @__PURE__ */ r(
+              b,
+              {
+                leadingIcon: "eraser",
+                btnType: "outline",
+                color: "warning",
+                text: F,
+                disabled: C,
+                onClick: P,
+                type: "button"
+              }
+            ),
+            "  ",
+            /* @__PURE__ */ r(
+              b,
+              {
+                leadingIcon: "floppy-disk",
+                btnType: "tinted",
+                color: "success",
+                text: G,
+                disabled: A,
+                onClick: E
+              }
+            )
+          ] })
+        ] })
+      ]
+    },
+    i
+  );
+});
+h.propTypes = {
+  __TYPE__: e.string,
+  goBackText: e.string,
+  fields: e.array,
+  data: e.object,
+  errors: e.object,
+  backActive: e.bool,
+  nextActive: e.bool,
+  disableGoBack: e.bool,
+  disableNext: e.bool,
+  disablePrevious: e.bool,
+  previousActive: e.bool,
+  editActive: e.bool,
+  flexGridProps: e.any,
+  disableDiscard: e.bool,
+  disableSave: e.bool,
+  discardText: e.string,
+  saveText: e.string,
+  //-----------------------------------------------------------
+  goToNext: e.func,
+  goToPrevious: e.func,
+  onEdit: e.func,
+  goBack: e.func,
+  onSubmit: e.func,
+  //------------------------------------------------------------
+  className: e.string,
+  style: e.object,
+  color: e.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "danger",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  size: e.oneOf(["small", "medium", "large"])
+};
+h.displayName = "FORM_VIEW";
+export {
+  h as default
+};

package/dist/Grid.cjs

@@ -0,0 +1,13 @@
+"use strict";const w=require("react/jsx-runtime"),j=require("react"),t=require("./index-DXnSjbfJ.cjs"),G=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),I=G.newStyled.div`
+  display: ${e=>e.inline?"inline-grid":"grid"};
+  row-gap: ${e=>e.rowGap?e.rowGap:e.gap?e.gap:0};
+  column-gap: ${e=>e.columnGap?e.columnGap:e.gap?e.gap:0};
+  ${e=>e.gridTemplate&&`grid-template: ${e.gridTemplate};`}
+  ${e=>e.templateRows&&`grid-template-rows: ${e.templateRows};`}
+  ${e=>e.templateColumns&&`grid-template-columns: ${e.templateColumns};`}
+  ${e=>e.justifyItems&&`justify-items: ${e.justifyItems};`} 
+  ${e=>e.alignItems&&`align-items: ${e.alignItems};`} 
+  ${e=>e.justifyContent&&`justify-content: ${e.justifyContent};`} 
+  ${e=>e.templateAreas&&`grid-template-areas: ${e.templateAreas};`} 
+
+`,s=j.forwardRef((e,n)=>{const{inline:a=!1,template:r,templateColumns:i,templateRows:l,gap:o,rowGap:p,columnGap:m,justifyItems:y,alignItems:c,justifyContent:g,templateAreas:u,children:d,className:f="",style:T={},...$}=e;var P={inline:a,template:r,templateColumns:i,templateRows:l,gap:o,rowGap:p,columnGap:m,justifyItems:y,alignItems:c,justifyContent:g,templateAreas:u};return w.jsx(I,{ref:n,...P,className:f,style:T,...$,children:d})});s.defaultProps={inline:!1,style:{},className:""};s.propTypes={inline:t.PropTypes.bool,template:t.PropTypes.string,templateColumns:t.PropTypes.string,templateRows:t.PropTypes.string,gap:t.PropTypes.string,rowGap:t.PropTypes.string,columnGap:t.PropTypes.string,justifyItems:t.PropTypes.oneOf(["start","end","center","stretch"]),alignItems:t.PropTypes.oneOf(["start","end","center","stretch"]),placeItems:t.PropTypes.oneOf(["start","end","center","stretch"]),justifyContent:t.PropTypes.oneOf(["start","end","center","stretch","space-between","space-evenly"]),templateAreas:t.PropTypes.string,style:t.PropTypes.object,className:t.PropTypes.string};module.exports=s;

package/dist/Grid.js

@@ -0,0 +1,62 @@
+import { jsx as G } from "react/jsx-runtime";
+import I from "react";
+import { P as e } from "./index-Ds9PUTwb.js";
+import { n as C } from "./emotion-styled.browser.esm-BZSYYThs.js";
+const R = C.div`
+  display: ${(t) => t.inline ? "inline-grid" : "grid"};
+  row-gap: ${(t) => t.rowGap ? t.rowGap : t.gap ? t.gap : 0};
+  column-gap: ${(t) => t.columnGap ? t.columnGap : t.gap ? t.gap : 0};
+  ${(t) => t.gridTemplate && `grid-template: ${t.gridTemplate};`}
+  ${(t) => t.templateRows && `grid-template-rows: ${t.templateRows};`}
+  ${(t) => t.templateColumns && `grid-template-columns: ${t.templateColumns};`}
+  ${(t) => t.justifyItems && `justify-items: ${t.justifyItems};`} 
+  ${(t) => t.alignItems && `align-items: ${t.alignItems};`} 
+  ${(t) => t.justifyContent && `justify-content: ${t.justifyContent};`} 
+  ${(t) => t.templateAreas && `grid-template-areas: ${t.templateAreas};`} 
+
+`, a = I.forwardRef((t, s) => {
+  const {
+    inline: n = !1,
+    template: l,
+    templateColumns: i,
+    templateRows: m,
+    gap: r,
+    rowGap: o,
+    columnGap: g,
+    justifyItems: c,
+    alignItems: p,
+    justifyContent: f,
+    templateAreas: d,
+    children: u,
+    className: y = "",
+    style: $ = {},
+    ...w
+  } = t;
+  var j = { inline: n, template: l, templateColumns: i, templateRows: m, gap: r, rowGap: o, columnGap: g, justifyItems: c, alignItems: p, justifyContent: f, templateAreas: d };
+  return /* @__PURE__ */ G(R, { ref: s, ...j, className: y, style: $, ...w, children: u });
+});
+a.defaultProps = {
+  inline: !1,
+  style: {},
+  className: ""
+};
+a.propTypes = {
+  inline: e.bool,
+  template: e.string,
+  templateColumns: e.string,
+  templateRows: e.string,
+  gap: e.string,
+  rowGap: e.string,
+  columnGap: e.string,
+  justifyItems: e.oneOf(["start", "end", "center", "stretch"]),
+  alignItems: e.oneOf(["start", "end", "center", "stretch"]),
+  placeItems: e.oneOf(["start", "end", "center", "stretch"]),
+  justifyContent: e.oneOf(["start", "end", "center", "stretch", "space-between", "space-evenly"]),
+  templateAreas: e.string,
+  //-------------
+  style: e.object,
+  className: e.string
+};
+export {
+  a as default
+};

package/dist/GridItem.cjs

@@ -0,0 +1,15 @@
+"use strict";const f=require("react/jsx-runtime"),p=require("react"),t=require("./index-DXnSjbfJ.cjs"),T=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),P=T.newStyled.div`
+  display: ${e=>e.inline?"inline-grid":"grid"};
+  row-gap: ${e=>e.rowGap?e.rowGap:e.gap?e.gap:0};
+  column-gap: ${e=>e.columnGap?e.columnGap:e.gap?e.gap:0};
+  ${e=>e.gridTemplate&&`grid-template: ${e.gridTemplate};`}
+  ${e=>e.templateRows&&`grid-template-rows: ${e.templateRows};`}
+  ${e=>e.templateColumns&&`grid-template-columns: ${e.templateColumns};`}
+  ${e=>e.justifySelf&&`justify-self: ${e.justifySelf};`} 
+  ${e=>e.alignSelf&&`align-self: ${e.alignSelf};`} 
+  ${e=>e.area&&`grid-area: ${e.area};`} 
+  ${e=>e.colStart&&`grid-column-start: ${e.colStart};`} 
+  ${e=>(e.colEnd||e.colSpan)&&`grid-column-end: span ${e.colEnd||e.colSpan};`} 
+  ${e=>e.rowStart&&`grid-row-start: ${e.rowStart};`} 
+  ${e=>(e.rowEnd||e.rowSpan)&&`grid-row-end: span ${e.rowEnd||e.rowSpan};`} 
+`,r=p.forwardRef((e,a)=>{const{colStart:n,colEnd:l,rowStart:o,rowEnd:i,colSpan:s,rowSpan:c,justifySelf:d,alignSelf:m,area:S,className:g="",style:u={},children:w,...y}=e;var $={colStart:n,colEnd:l,rowStart:o,rowEnd:i,colSpan:s,rowSpan:c,justifySelf:d,alignSelf:m,area:S};return f.jsx(P,{ref:a,...$,className:g,style:u,...y,children:w})});r.propTypes={colStart:t.PropTypes.number,colEnd:t.PropTypes.number,rowStart:t.PropTypes.number,rowEnd:t.PropTypes.number,colSpan:t.PropTypes.number,rowSpan:t.PropTypes.number,justifySelf:t.PropTypes.oneOf(["start","end","center","stretch"]),alignSelf:t.PropTypes.oneOf(["start","end","center","stretch"]),area:t.PropTypes.string,style:t.PropTypes.object,className:t.PropTypes.string};module.exports=r;

package/dist/GridItem.js

@@ -0,0 +1,72 @@
+import { jsx as s } from "react/jsx-runtime";
+import y from "react";
+import { P as t } from "./index-Ds9PUTwb.js";
+import { n as E } from "./emotion-styled.browser.esm-BZSYYThs.js";
+const b = E.div`
+  display: ${(e) => e.inline ? "inline-grid" : "grid"};
+  row-gap: ${(e) => e.rowGap ? e.rowGap : e.gap ? e.gap : 0};
+  column-gap: ${(e) => e.columnGap ? e.columnGap : e.gap ? e.gap : 0};
+  ${(e) => e.gridTemplate && `grid-template: ${e.gridTemplate};`}
+  ${(e) => e.templateRows && `grid-template-rows: ${e.templateRows};`}
+  ${(e) => e.templateColumns && `grid-template-columns: ${e.templateColumns};`}
+  ${(e) => e.justifySelf && `justify-self: ${e.justifySelf};`} 
+  ${(e) => e.alignSelf && `align-self: ${e.alignSelf};`} 
+  ${(e) => e.area && `grid-area: ${e.area};`} 
+  ${(e) => e.colStart && `grid-column-start: ${e.colStart};`} 
+  ${(e) => (e.colEnd || e.colSpan) && `grid-column-end: span ${e.colEnd || e.colSpan};`} 
+  ${(e) => e.rowStart && `grid-row-start: ${e.rowStart};`} 
+  ${(e) => (e.rowEnd || e.rowSpan) && `grid-row-end: span ${e.rowEnd || e.rowSpan};`} 
+`, j = y.forwardRef((e, a) => {
+  const {
+    colStart: r,
+    colEnd: n,
+    rowStart: l,
+    rowEnd: o,
+    colSpan: i,
+    rowSpan: m,
+    justifySelf: d,
+    alignSelf: c,
+    area: g,
+    className: S = "",
+    style: f = {},
+    children: $,
+    ...u
+  } = e;
+  var w = { colStart: r, colEnd: n, rowStart: l, rowEnd: o, colSpan: i, rowSpan: m, justifySelf: d, alignSelf: c, area: g };
+  return /* @__PURE__ */ s(b, { ref: a, ...w, className: S, style: f, ...u, children: $ });
+});
+j.propTypes = {
+  /**
+   * start the element at the columnStart column position
+   */
+  colStart: t.number,
+  /**
+   * end the element at the columnEnd column position
+   */
+  colEnd: t.number,
+  /**
+   * start the element at the rowStart row position
+   */
+  rowStart: t.number,
+  /**
+   * end the element at the rowStart row position
+   */
+  rowEnd: t.number,
+  /**
+   * span specific amount of columns
+   */
+  colSpan: t.number,
+  /**
+   * span specific amount of rows
+   */
+  rowSpan: t.number,
+  justifySelf: t.oneOf(["start", "end", "center", "stretch"]),
+  alignSelf: t.oneOf(["start", "end", "center", "stretch"]),
+  area: t.string,
+  //-------------
+  style: t.object,
+  className: t.string
+};
+export {
+  j as default
+};

package/dist/Header.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("react/jsx-runtime"),o=require("react"),a=require("./index-DXnSjbfJ.cjs"),e=o.forwardRef((r,s)=>{const{children:t,__TYPE__:c="Header",...n}=r;return i.jsx("header",{ref:s,...n,children:t})});e.propTypes={__TYPE__:a.PropTypes.string};e.displayName="Header";module.exports=e;

package/dist/Header.js

@@ -0,0 +1,18 @@
+import { jsx as p } from "react/jsx-runtime";
+import s from "react";
+import { P as _ } from "./index-Ds9PUTwb.js";
+const r = s.forwardRef((e, a) => {
+  const { children: o, __TYPE__: d = "Header", ...t } = e;
+  return /* @__PURE__ */ p("header", { ref: a, ...t, children: o });
+});
+r.propTypes = {
+  /**
+   * Do not override this property.
+   * Should only be used as indicator for type if you are passing custom component.
+   */
+  __TYPE__: _.string
+};
+r.displayName = "Header";
+export {
+  r as default
+};

package/dist/Icon.cjs

@@ -0,0 +1,8 @@
+"use strict";const n=require("react/jsx-runtime"),z=require("react");;/* empty css                       */const s=require("./index-DXnSjbfJ.cjs"),P=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),o=require("./utils-hdRGTsQ7.cjs"),b=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),I=P.newStyled.span`
+  box-sizing: border-box;
+  ${e=>e.sizeInUnits&&e.sizeInUnits!=""?`font-size: ${e.sizeInUnits}`:o.getComponentTypographyCss(e.theme,"Icon",e.size,"enabled")};
+  ${e=>e.color&&`color: ${o.getColorRgbaValue(e.theme,"Icon",e.color,"enabled","icon")}`};
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`,t=z.forwardRef((e,r)=>{const{id:h="",icon:i="",iconStyle:c="solid",tooltip:l="",sizeInUnits:a="",size:y="small",color:m,className:u="",style:d={},...p}=e,g={theme:b.useTheme(),size:y,color:m,sizeInUnits:a},f=()=>{var T=c==="solid"?"fas":"far";return`${T} fa-${i} fa-fw`};return n.jsx(I,{ref:r,...g,tooltip:l,className:u,style:d,...p,children:n.jsx("i",{"data-control":!!e["data-control"],className:f()})})});t.propTypes={id:s.PropTypes.string,icon:s.PropTypes.string,iconStyle:s.PropTypes.oneOf(["solid","regular"]),tooltip:s.PropTypes.string,className:s.PropTypes.string,style:s.PropTypes.object,size:s.PropTypes.oneOf(["small","medium","large"]),sizeInUnits:s.PropTypes.string,color:s.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=t;

package/dist/Icon.js

@@ -0,0 +1,59 @@
+import { jsx as t } from "react/jsx-runtime";
+import z from "react";
+/* empty css                     */
+import { P as o } from "./index-Ds9PUTwb.js";
+import { n as p } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { a as I, b } from "./utils-DEke8iwo.js";
+import { u as h } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const $ = p.span`
+  box-sizing: border-box;
+  ${(e) => e.sizeInUnits && e.sizeInUnits != "" ? `font-size: ${e.sizeInUnits}` : I(e.theme, "Icon", e.size, "enabled")};
+  ${(e) => e.color && `color: ${b(e.theme, "Icon", e.color, "enabled", "icon")}`};
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`, x = z.forwardRef((e, n) => {
+  const {
+    id: U = "",
+    icon: s = "",
+    iconStyle: i = "solid",
+    tooltip: r = "",
+    sizeInUnits: a = "",
+    size: l = "small",
+    color: c,
+    className: m = "",
+    style: f = {},
+    ...d
+  } = e, g = { theme: h(), size: l, color: c, sizeInUnits: a }, y = () => {
+    var u = i === "solid" ? "fas" : "far";
+    return `${u} fa-${s} fa-fw`;
+  };
+  return /* @__PURE__ */ t($, { ref: n, ...g, tooltip: r, className: m, style: f, ...d, children: /* @__PURE__ */ t("i", { "data-control": !!e["data-control"], className: y() }) });
+});
+x.propTypes = {
+  id: o.string,
+  icon: o.string,
+  iconStyle: o.oneOf(["solid", "regular"]),
+  tooltip: o.string,
+  //----------------
+  className: o.string,
+  style: o.object,
+  size: o.oneOf(["small", "medium", "large"]),
+  /**
+    Size in one of the css units (px, rem, em, ... ), sizeInUnits overrides size property
+   */
+  sizeInUnits: o.string,
+  color: o.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  x as default
+};