@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/CheckboxGroup/CheckboxGroup.styles.js

@@ -1,4 +1,4 @@
-import { c as a } from "../../cva-JiDXAa83.js";
+import { c as a } from "../../cva-3iuaj0TL.js";
 const i = a({
   base: {
     display: "flex",

package/dist/components/CheckboxMark/CheckboxMark.d.ts

@@ -0,0 +1,19 @@
+import { IressStyledProps } from '../../types';
+export interface IressCheckboxMarkProps extends IressStyledProps<'svg'> {
+    /**
+     * Checked status of the checkbox mark
+     */
+    checked?: boolean;
+    /**
+     * Indeterminate status of the checkbox mark
+     */
+    indeterminate?: boolean;
+    /**
+     * Size of the checkbox mark
+     */
+    size?: 'sm';
+}
+export declare const IressCheckboxMark: {
+    ({ checked, className, indeterminate, size, ...restProps }: IressCheckboxMarkProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/CheckboxMark/CheckboxMark.js

@@ -1,52 +1,38 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { c as o } from "../../css-fGu_jDvv.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-import { checkboxMark as x } from "./CheckboxMark.styles.js";
-import { s as k } from "../../is-valid-prop-Ce0wiweq.js";
-import { GlobalCSSClass as f } from "../../enums.js";
-const d = ({
-  checked: r,
-  className: a,
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { c as r } from "../../css-DVJ-ALYD.js";
+import { c as k } from "../../cx-DN21T1EH.js";
+import { checkboxMark as n } from "./CheckboxMark.styles.js";
+import { s as x } from "../../is-valid-prop-C5D641yn.js";
+import { GlobalCSSClass as h } from "../../enums.js";
+const M = ({
+  checked: o,
+  className: e,
   indeterminate: t,
   size: c,
   ...m
 }) => {
-  const s = x.raw({ checked: r, indeterminate: t, size: c }), [l, i] = k(m);
-  return /* @__PURE__ */ n(
+  const s = n.raw({ checked: o, indeterminate: t, size: c }), [p, l] = x(m);
+  return /* @__PURE__ */ i(
     "svg",
     {
-      className: p(
-        a,
-        o(s.root, l),
-        f.CheckboxMark
+      className: k(
+        e,
+        r(s.root, p),
+        h.CheckboxMark
       ),
-      "data-checked": r ? "true" : "false",
-      ...i,
+      "data-checked": o ? "true" : "false",
+      ...l,
       version: "1.1",
-      viewBox: "0 0 200 200",
+      viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ e(
-          "line",
-          {
-            className: o(s.indeterminateMark),
-            x1: "30",
-            y1: "100",
-            x2: "170",
-            y2: "100"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "polyline",
-          {
-            className: o(s.checkedMark),
-            points: "30 95 80 142 170 50"
-          }
-        )
+        /* @__PURE__ */ a("path", { d: "M5 10H15", className: r(s.indeterminateMark) }),
+        /* @__PURE__ */ a("path", { d: "M5 10L8.5 13.5L16 6", className: r(s.checkedMark) })
       ]
     }
   );
 };
+M.displayName = "IressCheckboxMark";
 export {
-  d as IressCheckboxMark
+  M as IressCheckboxMark
 };

package/dist/components/CheckboxMark/CheckboxMark.styles.js

@@ -1,17 +1,15 @@
-import { s as r } from "../../sva-OmxClA9g.js";
+import { s as r } from "../../sva-CsHRIRDW.js";
 const e = r({
   slots: ["root", "indeterminateMark", "checkedMark"],
   base: {
     root: {
       display: "inline-flex",
       position: "relative",
-      width: "[calc(1.5 * {sizes.typography.base})]",
-      minWidth: "[calc(1.5 * {sizes.typography.base})]",
-      height: "[calc(1.5 * {sizes.typography.base})]",
-      borderWidth: "1px",
-      borderStyle: "solid",
-      borderColor: "colour.neutral.70",
-      borderRadius: "radius.025",
+      width: "[1.4em]",
+      minWidth: "[1.4em]",
+      height: "[1.4em]",
+      border: "input",
+      borderRadius: "radius.system.form",
       bg: "colour.neutral.10",
       transitionProperty: "[all]",
       transitionDuration: "0.2s",
@@ -24,13 +22,17 @@ const e = r({
     indeterminateMark: {
       stroke: "colour.primary.onFill",
       fill: "[transparent]",
-      strokeWidth: 22,
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       display: "none"
     },
     checkedMark: {
-      stroke: "colour.neutral.10",
+      stroke: "colour.primary.onFill",
       fill: "[transparent]",
-      strokeWidth: 22,
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       display: "none"
     }
   },

package/dist/components/Col/Col.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { IressStyledProps, ResponsiveProp } from '../../types';
+import { IressCSSProps } from '../../interfaces';
+import { UtilityValues } from '../../styled-system/types/prop-type';
+export interface IressColProps extends IressStyledProps {
+    /**
+     * Individual alignment of column
+     */
+    alignSelf?: IressCSSProps['alignSelf'];
+    /**
+     * Any content you would like to be contained in a column.
+     */
+    children?: ReactNode;
+    /**
+     * Number of columns to offset.
+     */
+    offset?: ResponsiveProp<UtilityValues['offset'] | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11>;
+    /**
+     * Number of columns to span.
+     * @default auto
+     */
+    span?: ResponsiveProp<UtilityValues['span'] | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+}
+export declare const IressCol: {
+    ({ className, ...restProps }: IressColProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Col/Col.js

@@ -1,9 +1,10 @@
 import { jsx as m } from "react/jsx-runtime";
-import { s as r } from "../../factory-oPXoMw9H.js";
-import { col as t } from "./Col.styles.js";
-import { c as l } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as p } from "../../enums.js";
-const a = r("div", t), n = ({ className: o, ...s }) => /* @__PURE__ */ m(a, { ...s, className: l(o, p.Col) });
+import { s as r } from "../../factory-CcYfm2kB.js";
+import { col as l } from "./Col.styles.js";
+import { c as t } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as a } from "../../enums.js";
+const p = r("div", l), e = ({ className: o, ...s }) => /* @__PURE__ */ m(p, { ...s, className: t(o, a.Col) });
+e.displayName = "IressCol";
 export {
-  n as IressCol
+  e as IressCol
 };

package/dist/components/Col/Col.styles.d.ts

@@ -0,0 +1 @@
+export declare const col: import('../../styled-system/types').RecipeRuntimeFn<{}>;

package/dist/components/Col/Col.styles.js

@@ -1,28 +1,13 @@
-import { c as a } from "../../cva-JiDXAa83.js";
-const t = a({
+import { c as a } from "../../cva-3iuaj0TL.js";
+const r = a({
   base: {
     display: "block",
     boxSizing: "border-box",
     span: "auto"
   },
-  variants: {
-    alignSelf: {
-      start: {
-        alignSelf: "start"
-      },
-      end: {
-        alignSelf: "end"
-      },
-      center: {
-        alignSelf: "center"
-      },
-      stretch: {
-        alignSelf: "stretch"
-      }
-    }
-  },
+  variants: {},
   defaultVariants: {}
 });
 export {
-  t as col
+  r as col
 };

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,16 @@
+import { IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressContainerProps extends IressStyledProps {
+    /**
+     * Content to be contained, usually used with `IressRow` and `IressCol`.
+     */
+    children?: ReactNode;
+    /**
+     * Container stretches to fill the width of the browser window if true.
+     */
+    fluid?: boolean;
+}
+export declare const IressContainer: {
+    ({ className, ...restProps }: IressContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Container/Container.js

@@ -1,18 +1,19 @@
 import { jsx as s } from "react/jsx-runtime";
-import { s as t } from "../../factory-oPXoMw9H.js";
+import { s as t } from "../../factory-CcYfm2kB.js";
 import { container as m } from "./Container.styles.js";
-import { c as n } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as a } from "../../enums.js";
-const i = t("div", m), C = ({
+import { c as a } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as n } from "../../enums.js";
+const e = t("div", m), i = ({
   className: o,
   ...r
 }) => /* @__PURE__ */ s(
-  i,
+  e,
   {
     ...r,
-    className: n(o, a.Container)
+    className: a(o, n.Container)
   }
 );
+i.displayName = "IressContainer";
 export {
-  C as IressContainer
+  i as IressContainer
 };

package/dist/components/Container/Container.styles.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The atomic recipe is a function that takes a variant and returns a class name object. It can be used to create a component without JSX (eg. as a utility class).
+ *
+ * [Learn more](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva)
+ */
+export declare const container: import('../../styled-system/types').RecipeRuntimeFn<{
+    /**
+     * Container stretches to fill the width of the browser window if true.
+     */
+    fluid: {
+        true: {
+            maxWidth: "12/12";
+        };
+        false: {
+            xs: {
+                maxWidth: "container.xs";
+            };
+            sm: {
+                maxWidth: "container.sm";
+            };
+            md: {
+                maxWidth: "container.md";
+                px: "spacing.6";
+            };
+            lg: {
+                maxWidth: "container.lg";
+                px: "spacing.6";
+            };
+            xl: {
+                maxWidth: "container.xl";
+                px: "spacing.8";
+            };
+            xxl: {
+                maxWidth: "container.xxl";
+                px: "spacing.8";
+            };
+        };
+    };
+}>;

package/dist/components/Container/Container.styles.js

@@ -1,11 +1,10 @@
-import { c as a } from "../../cva-JiDXAa83.js";
-const n = a({
+import { c as a } from "../../cva-3iuaj0TL.js";
+const t = a({
   base: {
     borderRadius: "radius.system.layout",
-    paddingBlock: void 0,
-    paddingInline: "spacing.4",
-    marginInline: "auto",
-    width: "[100%]"
+    px: "spacing.4",
+    mx: "auto",
+    width: "12/12"
   },
   variants: {
     /**
@@ -13,7 +12,7 @@ const n = a({
      */
     fluid: {
       true: {
-        maxWidth: "[100%]"
+        maxWidth: "12/12"
       },
       false: {
         xs: {
@@ -23,16 +22,20 @@ const n = a({
           maxWidth: "container.sm"
         },
         md: {
-          maxWidth: "container.md"
+          maxWidth: "container.md",
+          px: "spacing.6"
         },
         lg: {
-          maxWidth: "container.lg"
+          maxWidth: "container.lg",
+          px: "spacing.6"
         },
         xl: {
-          maxWidth: "container.xl"
+          maxWidth: "container.xl",
+          px: "spacing.8"
         },
         xxl: {
-          maxWidth: "container.xxl"
+          maxWidth: "container.xxl",
+          px: "spacing.8"
         }
       }
     }
@@ -42,5 +45,5 @@ const n = a({
   }
 });
 export {
-  n as container
+  t as container
 };

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,11 @@
+import { IressStyledProps } from '../../types';
+export interface IressDividerProps extends IressStyledProps<'hr'> {
+    /**
+     * Change to a vertical divider.
+     */
+    vertical?: boolean;
+}
+export declare const IressDivider: {
+    ({ className, stretch, vertical, ...restProps }: IressDividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Divider/Divider.js

@@ -1,30 +1,35 @@
 import { jsx as m } from "react/jsx-runtime";
-import { c as p } from "../../css-fGu_jDvv.js";
-import { c as e } from "../../cx-DN21T1EH.js";
-import { divider as a } from "./Divider.styles.js";
-import { s as c } from "../../is-valid-prop-Ce0wiweq.js";
-import { GlobalCSSClass as l } from "../../enums.js";
-const P = ({
-  className: r,
-  vertical: s,
-  ...o
+import { c as p } from "../../css-DVJ-ALYD.js";
+import { c as a } from "../../cx-DN21T1EH.js";
+import { divider as c } from "./Divider.styles.js";
+import { s as l } from "../../is-valid-prop-C5D641yn.js";
+import { GlobalCSSClass as d } from "../../enums.js";
+const f = ({
+  className: s,
+  stretch: o,
+  vertical: r,
+  ...i
 }) => {
-  const [i, t] = c(o);
+  const [t, e] = l(i);
   return /* @__PURE__ */ m(
     "hr",
     {
-      className: e(
-        r,
+      className: a(
+        s,
         p({
-          ...a.raw({ vertical: !!s }),
-          ...i
+          ...c.raw({
+            vertical: !!r,
+            verticalStretch: !!o && r
+          }),
+          ...t
         }),
-        l.Divider
+        d.Divider
       ),
-      ...t
+      ...e
     }
   );
 };
+f.displayName = "IressDivider";
 export {
-  P as IressDivider
+  f as IressDivider
 };

package/dist/components/Divider/Divider.styles.d.ts

@@ -0,0 +1,23 @@
+export declare const divider: import('../../styled-system/types').RecipeRuntimeFn<{
+    vertical: {
+        true: {
+            display: "inline-block";
+            alignSelf: "stretch";
+            borderInlineStartWidth: "1px";
+            borderInlineStartStyle: "solid";
+            minHeight: "[1em]";
+            verticalAlign: "middle";
+        };
+        false: {
+            display: "block";
+            borderBlockStartWidth: "1px";
+            borderBlockStartStyle: "solid";
+        };
+    };
+    verticalStretch: {
+        true: {
+            height: "[100%]";
+            alignSelf: "center";
+        };
+    };
+}>;

package/dist/components/Divider/Divider.styles.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../cva-JiDXAa83.js";
-const t = r({
+import { c as r } from "../../cva-3iuaj0TL.js";
+const e = r({
   base: {
     display: "block",
     color: "colour.neutral.30",
@@ -13,7 +13,6 @@ const t = r({
         alignSelf: "stretch",
         borderInlineStartWidth: "1px",
         borderInlineStartStyle: "solid",
-        height: "auto",
         minHeight: "[1em]",
         verticalAlign: "middle"
       },
@@ -22,12 +21,27 @@ const t = r({
         borderBlockStartWidth: "1px",
         borderBlockStartStyle: "solid"
       }
+    },
+    verticalStretch: {
+      true: {
+        height: "[100%]",
+        alignSelf: "center"
+      }
     }
   },
+  compoundVariants: [
+    {
+      vertical: !0,
+      verticalStretch: !1,
+      css: {
+        height: "auto"
+      }
+    }
+  ],
   defaultVariants: {
     vertical: !1
   }
 });
 export {
-  t as divider
+  e as divider
 };

package/dist/components/Expander/Expander.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { IressTextProps } from '../Text';
+import { IressCustomiseSlot } from '../../interfaces';
+export interface IressExpanderProps extends Omit<IressTextProps<'div'>, 'element' | 'onChange'> {
+    /**
+     * The element used to activate the expandable container.
+     */
+    activator: ReactNode;
+    /**
+     * This allows you to customise the content styling specifically, which is the floating element.
+     * It accepts an object with any of the styling properties available on `IressCSSProps`, as well as `className` and `style`.
+     */
+    activatorStyle?: IressCustomiseSlot;
+    /**
+     * Contents that will be expanded/collapsed when the expander is activated.
+     */
+    children?: ReactNode;
+    /**
+     * Emitted when the open state changes.
+     */
+    onChange?: (newValue: boolean) => void;
+    /**
+     * Controls the display mode of the activator element. Can be Section, Heading or Link.
+     */
+    mode?: 'section' | 'link';
+    /**
+     * When true the expandable container will be visible and the activator will display as open.
+     */
+    open?: boolean;
+}
+export declare const IressExpander: {
+    ({ activator, activatorStyle, children, className, "data-testid": testid, onChange, id: idProp, mode, noGutter, open, ...restProps }: IressExpanderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};