@phillips/seldon 1.26.0 → 1.26.1

package/dist/components/Social/Social.js

@@ -1,10 +1,13 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import r from "../../node_modules/classnames/index.js";
-import { px as o } from "../../utils/index.js";
-const n = ({ className: s, children: l, id: a, titleText: c = "Follow on Social" }) => /* @__PURE__ */ i("div", { "data-testid": a || "social", className: r(`${o}-social`, s), children: [
-  /* @__PURE__ */ e("h3", { className: `${o}-social__header`, children: c }),
-  l
-] });
+import { jsxs as r, jsx as c } from "react/jsx-runtime";
+import i from "../../node_modules/classnames/index.js";
+import { getCommonProps as n } from "../../utils/index.js";
+const h = ({ className: a, children: m, titleText: e = "Follow on Social", ...o }) => {
+  const { className: s, ...l } = n(o, "Social");
+  return /* @__PURE__ */ r("div", { ...l, className: i(s, a), ...o, children: [
+    /* @__PURE__ */ c("h3", { className: `${s}__header`, children: e }),
+    m
+  ] });
+};
 export {
-  n as default
+  h as default
 };

package/dist/components/SplitPanel/SplitPanel.d.ts

@@ -15,5 +15,5 @@ export interface SplitPanelProps extends React.HTMLAttributes<HTMLElement> {
  *
  * [Figma Link](https://www.figma.com/file/Hp2FyltbOmRxTuw9kSwBAd/EPIC-About-Us?type=design&node-id=635-34713&mode=design&t=wKZW1vKP8WePUjrH-0)
  */
-declare const SplitPanel: ({ children, className, element: Element, hasBorder, id, ...props }: SplitPanelProps) => import("react/jsx-runtime").JSX.Element;
+declare const SplitPanel: ({ children, className, element: Element, hasBorder, ...props }: SplitPanelProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitPanel;

package/dist/components/SplitPanel/SplitPanel.js

@@ -1,23 +1,24 @@
-import { jsx as o } from "react/jsx-runtime";
-import m from "../../node_modules/classnames/index.js";
-import { px as t } from "../../utils/index.js";
-const f = ({
-  children: s,
-  className: l,
-  element: a = "section",
-  hasBorder: p = !0,
-  id: e,
-  ...r
-}) => /* @__PURE__ */ o(
-  a,
-  {
-    "data-testid": e || "split-panel",
-    id: e,
-    className: m(`${t}-split-panel`, l, { [`${t}-split-panel--borderless`]: !p }),
-    ...r,
-    children: s
-  }
-);
+import { jsx as l } from "react/jsx-runtime";
+import n from "../../node_modules/classnames/index.js";
+import { getCommonProps as c } from "../../utils/index.js";
+const P = ({
+  children: o,
+  className: m,
+  element: t = "section",
+  hasBorder: a = !0,
+  ...e
+}) => {
+  const { className: s, ...r } = c(e, "SplitPanel");
+  return /* @__PURE__ */ l(
+    t,
+    {
+      ...r,
+      className: n(s, m, { [`${s}--borderless`]: !a }),
+      ...e,
+      children: o
+    }
+  );
+};
 export {
-  f as default
+  P as default
 };

package/dist/components/Subscribe/Subscribe.d.ts

@@ -55,5 +55,5 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-subscribe--overview)
  */
-declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, id, inputLabelText, inputPlaceholder, title, loadingText, invalidText, successText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, successText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Subscribe;

package/dist/components/Subscribe/Subscribe.js

@@ -1,60 +1,49 @@
-import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import { jsxs as $, jsx as o } from "react/jsx-runtime";
 import y from "../../node_modules/classnames/index.js";
-import { px as s } from "../../utils/index.js";
+import { getCommonProps as C } from "../../utils/index.js";
 import v from "../Input/Input.js";
 import w from "../Button/Button.js";
-import { SubscriptionState as j } from "./types.js";
+import { SubscriptionState as S } from "./types.js";
 const D = ({
-  blurb: o,
-  buttonText: a = "Sign Up",
-  buttonProps: l,
-  className: r,
-  element: c = "form",
-  id: i,
-  inputLabelText: m = "Email*",
-  inputPlaceholder: u = "example@email.com",
-  title: d = "Subscribe to Newsletter",
-  loadingText: b = "Loading...",
-  invalidText: n = "",
-  successText: p,
-  subscriptionState: e = j.Default,
-  ...f
+  blurb: t,
+  buttonText: i = "Sign Up",
+  buttonProps: m,
+  className: n,
+  element: r = "form",
+  inputLabelText: c = "Email*",
+  inputPlaceholder: d = "example@email.com",
+  title: u = "Subscribe to Newsletter",
+  loadingText: p = "Loading...",
+  invalidText: a = "",
+  successText: f,
+  subscriptionState: e = S.Default,
+  ...l
 }) => {
-  const x = e === "invalid", _ = e === "loading", h = e === "success", $ = e !== "default" ? {
-    invalid: n,
-    success: p,
-    loading: b
-  }[e] : "", g = h || _;
-  return /* @__PURE__ */ N(
-    c,
-    {
-      "data-testid": i || "subscribe-form",
-      id: i,
-      className: y(`${s}-subscribe`, r),
-      noValidate: !0,
-      ...f,
-      children: [
-        /* @__PURE__ */ t("h3", { className: `${s}-subscribe__title`, children: d }),
-        o ? /* @__PURE__ */ t("p", { className: `${s}-subscribe__blurb`, children: o }) : null,
-        /* @__PURE__ */ t(
-          v,
-          {
-            className: `${s}-subscribe__input`,
-            type: "email",
-            name: "email",
-            placeholder: u,
-            labelText: m,
-            invalid: x,
-            invalidText: n,
-            warn: g,
-            warnText: $,
-            required: !0
-          }
-        ),
-        /* @__PURE__ */ t(w, { className: `${s}-subscribe__button ${r}`, buttonType: "secondary", type: "submit", ...l, children: a })
-      ]
-    }
-  );
+  const { className: s, ...b } = C(l, "Subscribe"), _ = e === "invalid", x = e === "loading", N = e === "success", g = e !== "default" ? {
+    invalid: a,
+    success: f,
+    loading: p
+  }[e] : "", h = N || x;
+  return /* @__PURE__ */ $(r, { ...b, className: y(s, n), noValidate: !0, ...l, children: [
+    /* @__PURE__ */ o("h3", { className: `${s}__title`, children: u }),
+    t ? /* @__PURE__ */ o("p", { className: `${s}__blurb`, children: t }) : null,
+    /* @__PURE__ */ o(
+      v,
+      {
+        className: `${s}__input`,
+        type: "email",
+        name: "email",
+        placeholder: d,
+        labelText: c,
+        invalid: _,
+        invalidText: a,
+        warn: h,
+        warnText: g,
+        required: !0
+      }
+    ),
+    /* @__PURE__ */ o(w, { className: `${s}__button ${n}`, buttonType: "secondary", type: "submit", ...m, children: i })
+  ] });
 };
 export {
   D as default

package/dist/components/Text/Text.d.ts

@@ -19,5 +19,5 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-text--overview)
  */
-declare const Text: ({ children, id, element: CustomElement, variant, className, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+declare const Text: ({ children, className, element: CustomElement, variant, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
 export default Text;

package/dist/components/Text/Text.js

@@ -1,28 +1,20 @@
 import { jsx as l } from "react/jsx-runtime";
-import { px as p } from "../../utils/index.js";
-import f from "../../node_modules/classnames/index.js";
-import { TextVariants as c } from "./types.js";
-import { determineDefaultTextElement as d, determineTextClassName as i } from "./utils.js";
-const $ = ({
-  children: m,
-  id: t,
-  element: s,
-  variant: e = c.body2,
-  className: o,
-  ...a
-}) => {
-  const r = t ? `text-${t}` : "text", n = `${p}-text`, x = s || d(e);
+import { getCommonProps as c } from "../../utils/index.js";
+import { TextVariants as f } from "./types.js";
+import { determineDefaultTextElement as i, determineTextClassName as p } from "./utils.js";
+import x from "../../node_modules/classnames/index.js";
+const b = ({ children: t, className: o, element: s, variant: e = f.body2, ...m }) => {
+  const r = s || i(e), { className: a, ...n } = c(m, "Text");
   return /* @__PURE__ */ l(
-    x,
+    r,
     {
-      ...a,
-      "data-testid": r,
-      id: t,
-      className: f(n, i(e), o),
-      children: m
+      ...n,
+      className: x(a, o, p(e)),
+      ...m,
+      children: t
     }
   );
 };
 export {
-  $ as default
+  b as default
 };

package/dist/components/ViewingsList/ViewingsList.d.ts

@@ -26,7 +26,7 @@ export interface I18nObject {
     viewingHours1Label?: string;
     viewingHours2Label?: string;
 }
-export interface ViewingsListProps {
+export interface ViewingsListProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * String for Viewing cards that gets nuber appended. EX: 'Title {x}`
      */
@@ -60,5 +60,5 @@ export interface ViewingsListProps {
      */
     onSave: (e: React.MouseEvent<HTMLElement>) => boolean;
 }
-declare const ViewingsList: ({ cardTitle, id, i18n, onAdd, onDelete, onSave, title, viewings, }: ViewingsListProps) => import("react/jsx-runtime").JSX.Element;
+declare const ViewingsList: ({ cardTitle, className, i18n, onAdd, onDelete, onSave, title, viewings, ...props }: ViewingsListProps) => import("react/jsx-runtime").JSX.Element;
 export default ViewingsList;

package/dist/components/ViewingsList/ViewingsList.js

@@ -1,54 +1,52 @@
-import { jsxs as B, jsx as l } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import * as d from "react";
-import p from "../../node_modules/classnames/index.js";
-import { px as $ } from "../../utils/index.js";
-import M from "./ViewingsListCard.js";
+import { createElement as L } from "react";
+import S from "../../node_modules/classnames/index.js";
+import { getCommonProps as M } from "../../utils/index.js";
+import P from "./ViewingsListCard.js";
 import R from "../Button/Button.js";
-const S = () => Math.floor(Math.random() * 100) + Date.now(), z = ({
-  cardTitle: O = "Viewing Details",
-  id: f,
-  i18n: r = {},
-  onAdd: m,
+const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
+  cardTitle: C = "Viewing Details",
+  className: N,
+  i18n: f = {},
+  onAdd: r,
   onDelete: e,
-  onSave: D,
-  title: x,
-  viewings: i
+  onSave: O,
+  title: D,
+  viewings: c,
+  ...i
 }) => {
-  const [a, h] = d.useState(i), [c, o] = d.useState(""), [s, u] = d.useState();
+  const [a, h] = d.useState(c), [m, n] = d.useState(""), [o, u] = d.useState(), { className: p, ...E } = M(i, "ViewingsList");
   d.useEffect(() => {
-    h(i);
-  }, [i]);
-  const { addViewingsBtnLabel: C = "ADD VIEWINGS" } = r, E = () => {
-    const t = `${S()}${a ? "-" + a.length : ""}`;
-    o(t), u(t), m && m(t);
-  }, N = (t) => {
-    o(""), typeof e == "function" && e(t);
-  }, y = (t) => {
-    o(t), u(a == null ? void 0 : a.find((n) => n.id === t));
-  }, b = (t) => {
-    D(t) && o("");
-  }, j = () => {
-    typeof s == "string" ? typeof e == "function" && e(s) : c === (s == null ? void 0 : s.id) && h((t) => t == null ? void 0 : t.map((n) => n.id === s.id ? s : n)), o("");
+    h(c);
+  }, [c]);
+  const { addViewingsBtnLabel: y = "ADD VIEWINGS" } = f, b = () => {
+    const t = `${$()}${a ? "-" + a.length : ""}`;
+    n(t), u(t), r && r(t);
+  }, V = (t) => {
+    n(""), typeof e == "function" && e(t);
+  }, k = (t) => {
+    n(t), u(a == null ? void 0 : a.find((s) => s.id === t));
+  }, x = (t) => {
+    O(t) && n("");
+  }, B = () => {
+    typeof o == "string" ? typeof e == "function" && e(o) : m === (o == null ? void 0 : o.id) && h((t) => t == null ? void 0 : t.map((s) => s.id === o.id ? o : s)), n("");
   };
-  return /* @__PURE__ */ B("div", { className: p(`${$}-viewings-list`), id: f, children: [
-    /* @__PURE__ */ l("h2", { className: p(`${$}-viewings-list__title`), children: x }),
-    a == null ? void 0 : a.map((t, n) => /* @__PURE__ */ l(
-      M,
-      {
-        ...t,
-        ...r,
-        cardTitle: t.location ? `${O} ${n + 1}` : void 0,
-        editState: c === t.id,
-        onCancel: j,
-        onDelete: N,
-        onEdit: () => y(t.id),
-        onSave: b
-      },
-      `${t.id}`
-    )),
-    /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${f || S()}`, size: "sm", onClick: E, children: C })
-  ] }, c);
+  return /* @__PURE__ */ L("div", { ...E, className: S(p, N), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: D }), a == null ? void 0 : a.map((t, s) => /* @__PURE__ */ l(
+    P,
+    {
+      ...t,
+      ...f,
+      cardTitle: t.location ? `${C} ${s + 1}` : void 0,
+      editState: m === t.id,
+      onCancel: B,
+      onDelete: V,
+      onEdit: () => k(t.id),
+      onSave: x
+    },
+    `${t.id}`
+  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || $()}`, size: "sm", onClick: b, children: y }));
 };
 export {
-  z as default
+  G as default
 };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export * from './utils';
+export { default as Page } from './pages/Page';
 export { default as Button, type ButtonProps } from './components/Button/Button';
 export { default as IconButton } from './components/IconButton/IconButton';
 export { default as ErrorBoundary, type ErrorBoundaryProps } from './components/ErrorBoundary/ErrorBoundary';
@@ -22,5 +24,3 @@ export { default as ViewingsList, type ViewingsListProps } from './components/Vi
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './components/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
-export * from './utils';
-export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,62 +1,63 @@
-import { default as r } from "./components/Button/Button.js";
-import { default as a } from "./components/IconButton/IconButton.js";
-import { default as s } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as l } from "./components/Footer/Footer.js";
-import { Grid as m } from "./components/Grid/Grid.js";
-import { default as x } from "./components/Header/Header.js";
-import { default as n } from "./components/HeroBanner/HeroBanner.js";
-import { default as L } from "./components/Input/Input.js";
-import { default as c } from "./components/Link/Link.js";
-import { LinkVariants as B } from "./components/Link/utils.js";
-import { default as P } from "./components/LinkBlock/LinkBlock.js";
-import { default as b } from "./components/LinkList/LinkList.js";
-import { default as G } from "./components/Row/Row.js";
-import { default as H } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as y } from "./components/GridItem/types.js";
-import { default as A } from "./components/Select/Select.js";
-import { default as E } from "./components/SplitPanel/SplitPanel.js";
-import { default as M } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as R } from "./components/Subscribe/types.js";
-import { default as h } from "./components/Social/Social.js";
-import { default as q } from "./components/ViewingsList/ViewingsList.js";
-import { default as D } from "./components/Modal/Modal.js";
-import { default as K } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as U } from "./components/Text/types.js";
-import { default as X } from "./components/Text/Text.js";
-import { PaddingTokens as _, defaultYear as $, emailValidation as ee, generatePaddingClassName as te, noOp as re, px as oe, useNormalizedInputProps as ae } from "./utils/index.js";
-import { default as se } from "./pages/Page.js";
+import { PaddingTokens as t, defaultYear as r, emailValidation as a, generatePaddingClassName as f, getCommonProps as s, noOp as p, px as d, useNormalizedInputProps as l } from "./utils/index.js";
+import { default as u } from "./pages/Page.js";
+import { default as i } from "./components/Button/Button.js";
+import { default as g } from "./components/IconButton/IconButton.js";
+import { default as S } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as k } from "./components/Footer/Footer.js";
+import { Grid as B } from "./components/Grid/Grid.js";
+import { default as V } from "./components/Header/Header.js";
+import { default as w } from "./components/HeroBanner/HeroBanner.js";
+import { default as T } from "./components/Input/Input.js";
+import { default as H } from "./components/Link/Link.js";
+import { LinkVariants as y } from "./components/Link/utils.js";
+import { default as A } from "./components/LinkBlock/LinkBlock.js";
+import { default as F } from "./components/LinkList/LinkList.js";
+import { default as O } from "./components/Row/Row.js";
+import { default as Y } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as j } from "./components/GridItem/types.js";
+import { default as v } from "./components/Select/Select.js";
+import { default as J } from "./components/SplitPanel/SplitPanel.js";
+import { default as Q } from "./components/Subscribe/Subscribe.js";
+import { SubscriptionState as W } from "./components/Subscribe/types.js";
+import { default as Z } from "./components/Social/Social.js";
+import { default as $ } from "./components/ViewingsList/ViewingsList.js";
+import { default as oe } from "./components/Modal/Modal.js";
+import { default as re } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as fe } from "./components/Text/types.js";
+import { default as pe } from "./components/Text/Text.js";
 export {
-  r as Button,
-  s as ErrorBoundary,
-  l as Footer,
-  m as Grid,
-  H as GridItem,
-  y as GridItemAlign,
-  x as Header,
-  n as HeroBanner,
-  a as IconButton,
-  L as Input,
-  c as Link,
-  P as LinkBlock,
-  b as LinkList,
-  B as LinkVariants,
-  D as Modal,
-  _ as PaddingTokens,
-  se as Page,
-  G as Row,
-  A as Select,
-  h as Social,
-  E as SplitPanel,
-  K as StatefulViewingsList,
-  M as Subscribe,
-  R as SubscriptionState,
-  X as Text,
-  U as TextVariants,
-  q as ViewingsList,
-  $ as defaultYear,
-  ee as emailValidation,
-  te as generatePaddingClassName,
-  re as noOp,
-  oe as px,
-  ae as useNormalizedInputProps
+  i as Button,
+  S as ErrorBoundary,
+  k as Footer,
+  B as Grid,
+  Y as GridItem,
+  j as GridItemAlign,
+  V as Header,
+  w as HeroBanner,
+  g as IconButton,
+  T as Input,
+  H as Link,
+  A as LinkBlock,
+  F as LinkList,
+  y as LinkVariants,
+  oe as Modal,
+  t as PaddingTokens,
+  u as Page,
+  O as Row,
+  v as Select,
+  Z as Social,
+  J as SplitPanel,
+  re as StatefulViewingsList,
+  Q as Subscribe,
+  W as SubscriptionState,
+  pe as Text,
+  fe as TextVariants,
+  $ as ViewingsList,
+  r as defaultYear,
+  a as emailValidation,
+  f as generatePaddingClassName,
+  s as getCommonProps,
+  p as noOp,
+  d as px,
+  l as useNormalizedInputProps
 };

package/dist/node_modules/change-case/dist/index.js

@@ -0,0 +1,64 @@
+const x = /([\p{Ll}\d])(\p{Lu})/gu, P = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu, _ = /(\d)\p{Ll}|(\p{L})\d/u, R = /[^\p{L}\d]+/giu, h = "$1\0$2", L = "";
+function E(r) {
+  let e = r.trim();
+  e = e.replace(x, h).replace(P, h), e = e.replace(R, "\0");
+  let l = 0, c = e.length;
+  for (; e.charAt(l) === "\0"; )
+    l++;
+  if (l === c)
+    return [];
+  for (; e.charAt(c - 1) === "\0"; )
+    c--;
+  return e.slice(l, c).split(/\0/g);
+}
+function o(r) {
+  var l;
+  const e = E(r);
+  for (let c = 0; c < e.length; c++) {
+    const a = e[c], t = _.exec(a);
+    if (t) {
+      const s = t.index + ((l = t[1]) != null ? l : t[2]).length;
+      e.splice(c, 1, a.slice(0, s), a.slice(s));
+    }
+  }
+  return e;
+}
+function A(r, e) {
+  var t;
+  const [l, c, a] = w(r, e);
+  return l + c.map(C(e == null ? void 0 : e.locale)).join((t = e == null ? void 0 : e.delimiter) != null ? t : " ") + a;
+}
+function S(r, e) {
+  return A(r, { delimiter: "-", ...e });
+}
+function C(r) {
+  return r === !1 ? (e) => e.toLowerCase() : (e) => e.toLocaleLowerCase(r);
+}
+function w(r, e = {}) {
+  var i, f, u;
+  const l = (i = e.split) != null ? i : e.separateNumbers ? o : E, c = (f = e.prefixCharacters) != null ? f : L, a = (u = e.suffixCharacters) != null ? u : L;
+  let t = 0, s = r.length;
+  for (; t < r.length; ) {
+    const n = r.charAt(t);
+    if (!c.includes(n))
+      break;
+    t++;
+  }
+  for (; s > t; ) {
+    const n = s - 1, d = r.charAt(n);
+    if (!a.includes(d))
+      break;
+    s = n;
+  }
+  return [
+    r.slice(0, t),
+    l(r.slice(t, s)),
+    r.slice(s)
+  ];
+}
+export {
+  S as kebabCase,
+  A as noCase,
+  E as split,
+  o as splitSeparateNumbers
+};

package/dist/scss/components/Grid/_grid.scss

@@ -2,11 +2,9 @@
 @import '../../utils';
 
 .#{$px}-grid {
-  &__container {
-    @include gridContainer(false);
-  }
+  @include gridContainer(false);
 
-  &__container--has-margins {
+  &--has-margins {
     margin: 0 $spacing-md;
 
     @media (min-width: 1401px) {

package/dist/scss/styles.scss

@@ -7,11 +7,12 @@
 @import './typography';
 @import './sharedClasses';
 
+// 📑 Pages
+@import 'pages/page';
+
 // ⚛️ Components
 @import 'components/Button/button';
 @import 'components/IconButton/iconButton';
-
-// @import 'components/DatePicker/datePicker';
 @import 'components/Footer/footer';
 @import 'components/Grid/grid';
 @import 'components/Header/header';
@@ -29,6 +30,3 @@
 @import 'components/LinkList/linkList';
 @import 'components/Text/text';
 @import 'components/Modal/modal';
-
-// 📑 Pages
-@import 'pages/page';

package/dist/utils/index.d.ts

@@ -1,5 +1,14 @@
 import * as React from 'react';
 export declare const px = "phillips";
+/**
+ * Returns standard props values incorporating the component name into the class name and data-testid
+ */
+export declare const getCommonProps: ({ id, ...props }: {
+    id?: string | undefined;
+}, componentName: string) => {
+    'data-testid': string;
+    className: string;
+};
 export declare enum PaddingTokens {
     xs = "xs",
     sm = "sm",
@@ -8,16 +17,6 @@ export declare enum PaddingTokens {
     xl = "xl"
 }
 export declare const noOp: () => void;
-export interface CommonProps {
-    /**
-     * Optional className to be applied to the outer most element
-     */
-    className?: string;
-    /**
-     * A custom `id`
-     */
-    id?: string;
-}
 export interface InputProps {
     /**
      * Specify whether the `<input>` should be disabled