@companycam/slab-web 1.16.2-beta.3 → 1.16.2-beta.4

package/index.js

@@ -576,7 +576,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[oo]+=1);const wv=W.span`
   flex-direction: column;
   gap: var(--cc_size_spacing_s);
   margin-block-start: var(--cc_size_spacing_m);
-`,Up=({image:e,ccMargin:n,color:t="info",iconName:r,message:i="",primaryAction:o,secondaryAction:a,title:c,...d})=>{var p,m,v,y;return E.jsxs(g1,{$ccMargin:n,...d,children:[e!=null&&e.src?E.jsx(v1,{style:e.imageContainerStyle,children:E.jsx(_1,{src:e.src,alt:e.alt})}):null,r?E.jsx(y1,{className:`mdi mdi-${r}`,$iconColor:t,"aria-hidden":"true"}):null,E.jsxs(m1,{children:[c?E.jsx(Mt,{as:"h3",family:"heading",size:"xl",weight:"800",ccMargin:"none none xs",children:c}):null,i?E.jsx(Mt,{as:"p",color:"subtle",children:i}):null]}),o||a?E.jsxs(b1,{children:[o?E.jsx(Ni,{...o,"data-testid":o["data-testid"],color:t==="destroy"?"destroy":"primary",icon:{name:(p=o.icon)==null?void 0:p.name,position:(m=o.icon)==null?void 0:m.position},children:o.label}):null,a?E.jsx(Ni,{...a,"data-testid":a["data-testid"],color:"subtle",icon:{name:(v=a.icon)==null?void 0:v.name,position:(y=a.icon)==null?void 0:y.position},children:a.label}):null]}):null]})},w1=W(Ni)`
+`;function Up({image:e,ccMargin:n,color:t="info",iconName:r,message:i="",primaryAction:o,secondaryAction:a,title:c,...d}){var p,m,v,y;return E.jsxs(g1,{$ccMargin:n,...d,children:[e!=null&&e.src?E.jsx(v1,{style:e.imageContainerStyle,children:E.jsx(_1,{src:e.src,alt:e.alt})}):null,r?E.jsx(y1,{className:`mdi mdi-${r}`,$iconColor:t,"aria-hidden":"true"}):null,E.jsxs(m1,{children:[c?E.jsx(Mt,{as:"h3",family:"heading",size:"xl",weight:"800",ccMargin:"none none xs",children:c}):null,i?E.jsx(Mt,{as:"p",color:"subtle",children:i}):null]}),o||a?E.jsxs(b1,{children:[o?E.jsx(Ni,{...o,"data-testid":o["data-testid"],color:t==="destroy"?"destroy":"primary",icon:{name:(p=o.icon)==null?void 0:p.name,position:(m=o.icon)==null?void 0:m.position},children:o.label}):null,a?E.jsx(Ni,{...a,"data-testid":a["data-testid"],color:"subtle",icon:{name:(v=a.icon)==null?void 0:v.name,position:(y=a.icon)==null?void 0:y.position},children:a.label}):null]}):null]})}const w1=W(Ni)`
   padding: 0 0.25ch; /* If you change this value, update TableColumnSortButton to match */
   border: none;
   height: auto;

package/index.mjs

@@ -5198,7 +5198,8 @@ const Os = Wn(dh), E1 = {
   flex-direction: column;
   gap: var(--cc_size_spacing_s);
   margin-block-start: var(--cc_size_spacing_m);
-`, A1 = ({
+`;
+function A1({
   image: e,
   ccMargin: n,
   color: t = "info",
@@ -5208,7 +5209,7 @@ const Os = Wn(dh), E1 = {
   secondaryAction: a,
   title: c,
   ...d
-}) => {
+}) {
   var p, m, v, y;
   return /* @__PURE__ */ he($1, { $ccMargin: n, ...d, children: [
     e != null && e.src ? /* @__PURE__ */ O(P1, { style: e.imageContainerStyle, children: /* @__PURE__ */ O(T1, { src: e.src, alt: e.alt }) }) : null,
@@ -5263,7 +5264,8 @@ const Os = Wn(dh), E1 = {
       ) : null
     ] }) : null
   ] });
-}, F1 = W(Os)`
+}
+const F1 = W(Os)`
   padding: 0 0.25ch; /* If you change this value, update TableColumnSortButton to match */
   border: none;
   height: auto;

package/lib/Billboard/Billboard.d.ts

@@ -6,12 +6,13 @@ export type BillboardImage = {
     alt: string;
     imageContainerStyle?: CSSProperties;
 };
-type Action = Omit<ButtonProps, 'children'> & {
+type Action<C extends React.ElementType = 'button'> = ButtonProps<C> & {
     label: string;
     'data-testid'?: string;
+    children?: 'never';
 };
 type HTMLDivProps = ComponentPropsWithRef<'div'>;
-export type BillboardProps = HTMLDivProps & {
+export type BillboardProps<PrimaryActionButtonComponent extends React.ElementType = 'button', SecondaryActionButtonComponent extends React.ElementType = 'button'> = HTMLDivProps & {
     color?: BillboardIconColor;
     /** Add margin with spacing design tokens: `ccMargin="none xl l s"` */
     ccMargin?: string;
@@ -20,9 +21,9 @@ export type BillboardProps = HTMLDivProps & {
     /** Body text below the title */
     message?: string;
     /** Top button. [Button](../?path=/docs/button--docs) props. */
-    primaryAction?: Action;
+    primaryAction?: Action<PrimaryActionButtonComponent>;
     /** Bottom button - always `subtle`. [Button](../?path=/docs/button--docs) props. */
-    secondaryAction?: Action;
+    secondaryAction?: Action<SecondaryActionButtonComponent>;
     /** Heading text */
     title?: string;
     /** Image source, alt text, image container style */
@@ -35,5 +36,5 @@ export type BillboardProps = HTMLDivProps & {
  * - If the `message` is long enough, set a `max-width` by extending Billboard as a `styled-component`: `const StyledBillboard = styled(Billboard)({ maxWidth: '400px'; margin: 0 auto; });`
  * - Target the `image.imageContainerStyle` prop to style the image container to best accommodate your image's aspect ratio.
  */
-export declare const Billboard: ({ image, ccMargin, color, iconName, message, primaryAction, secondaryAction, title, ...props }: BillboardProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Billboard<PrimaryActionButtonComponent extends React.ElementType = 'button', SecondaryActionButtonComponent extends React.ElementType = 'button'>({ image, ccMargin, color, iconName, message, primaryAction, secondaryAction, title, ...props }: BillboardProps<PrimaryActionButtonComponent, SecondaryActionButtonComponent>): import("react/jsx-runtime").JSX.Element;
 export default Billboard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companycam/slab-web",
-  "version": "1.16.2-beta.3",
+  "version": "1.16.2-beta.4",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {