@phila/phila-ui-callout 0.0.25 → 1.0.0-beta.5

package/dist/Callout.vue.d.ts

@@ -8,14 +8,10 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<CalloutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    dismiss: () => any;
-}, string, import('vue').PublicProps, Readonly<CalloutProps> & Readonly<{
-    onDismiss?: (() => any) | undefined;
-}>, {
+declare const __VLS_component: import('vue').DefineComponent<CalloutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CalloutProps> & Readonly<{}>, {
+    title: string;
     message: string;
-    type: "info" | "warning" | "error";
-    dismissible: boolean;
+    type: "info" | "warning" | "error" | "success";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/Callout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.vue.d.ts","sourceRoot":"","sources":["../src/Callout.vue"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA2B5C,iBAAS,cAAc;WA8DT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;wFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Callout.vue.d.ts","sourceRoot":"","sources":["../src/Callout.vue"],"names":[],"mappings":"AA4IA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAoD5C,iBAAS,cAAc;WA4FT,OAAO,IAA6B;;yBAVpB,GAAG;;;;EAehC;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;wFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+.callout[data-v-cfe04aa4]{font-family:var(--Body-Default-font-body-default-family);line-height:var(--Body-Default-font-body-default-lineheight);padding:var(--spacing-m);border-radius:var(--border-radius-l)}.callout--success[data-v-cfe04aa4]{background:var(--Schemes-Success-Container)}.callout--success .callout-icon[data-v-cfe04aa4]{color:var(--Schemes-On-Success-Container)}.callout--warning[data-v-cfe04aa4]{background:var(--Schemes-Alert-Container)}.callout--info[data-v-cfe04aa4]{background:var(--Schemes-Info-Container)}.callout--error[data-v-cfe04aa4]{background:var(--Schemes-Error-Container)}.callout--error .callout-icon[data-v-cfe04aa4]{color:var(--Schemes-On-Error-Container)}.callout-header[data-v-cfe04aa4]{cursor:pointer;width:100%;display:flex;justify-content:space-between;background:none;border:none}.callout-header-left[data-v-cfe04aa4]{display:flex;gap:var(--spacing-xs)}.callout-title[data-v-cfe04aa4]{font-weight:600;font-size:var(--Heading-H5-font-heading-5-size)}.callout--chevron[data-v-cfe04aa4]{position:relative;float:right}.callout--content[data-v-cfe04aa4]{font-size:var(--Body-Default-font-body-default-size);padding-top:var(--spacing-xs);padding-left:var(--spacing-m);padding-right:var(--spacing-m)}

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import { BaseProps } from '@phila/phila-ui-core';
 export { default as Callout } from './Callout.vue';
 export interface CalloutProps extends BaseProps {
+    title?: string;
     message?: string;
-    type?: "info" | "warning" | "error";
-    icon?: string;
-    dismissible?: boolean;
+    type?: "info" | "warning" | "error" | "success";
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CACjD"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),l=require("@phila/phila-ui-core"),d=["disabled"],u=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{}},setup(n){const t=n,a=o=>"href"in o&&o.href!==void 0||"to"in o&&o.to!==void 0,s=e.computed(()=>l.cn("phila-button",`phila-button--${t.variant}`,t.size&&`is-${t.size}`,t.iconOnly&&"icon-button",t.iconOnly&&t.variant==="standard"&&"icon-button--standard",t.className)),i=e.computed(()=>a(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:s.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:s.value}:{}),r=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(o,c)=>a(t)?(e.openBlock(),e.createBlock(e.unref(l.BaseLink),e.mergeProps({key:0},{...i.value,...o.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(l.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:t.disabled,class:s.value},o.$attrs),[e.createVNode(e.unref(l.ActionContent),e.normalizeProps(e.guardReactiveProps(r.value)),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,d))}});var m={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]},f=m;const p={class:"content"},v=e.defineComponent({__name:"Callout",props:{message:{default:""},type:{default:"info"},icon:{},dismissible:{type:Boolean,default:!1},className:{}},emits:["dismiss"],setup(n,{emit:t}){const a=e.useSlots(),s=n,i=t,r=e.computed(()=>l.cn(s.className));return(o,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["callout",r.value])},[e.createElementVNode("div",p,[e.unref(a).default?e.renderSlot(o.$slots,"default",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(s.message),1)],64))]),s.dismissible?(e.openBlock(),e.createBlock(e.unref(u),{key:0,variant:"standard",size:"extra-small","icon-only":"",icon:e.unref(f),"aria-label":"Dismiss",onClick:c[0]||(c[0]=e.withModifiers(()=>i("dismiss"),["prevent"]))},null,8,["icon"])):e.createCommentVNode("",!0)],2))}}),y=(n,t)=>{const a=n.__vccOpts||n;for(const[s,i]of t)a[s]=i;return a},k=y(v,[["__scopeId","data-v-df7d37eb"]]);exports.Callout=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),l=require("@phila/phila-ui-core");var f={prefix:"fas",iconName:"chevron-up",icon:[448,512,[],"f077","M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"]},u={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]},m={prefix:"fas",iconName:"circle-check",icon:[512,512,[61533,"check-circle"],"f058","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"]},d={prefix:"fas",iconName:"chevron-down",icon:[448,512,[],"f078","M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"]},p={prefix:"fas",iconName:"triangle-exclamation",icon:[512,512,[9888,"exclamation-triangle","warning"],"f071","M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]},v={prefix:"fas",iconName:"circle-info",icon:[512,512,["info-circle"],"f05a","M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]};const _={class:"callout-header-left"},z={class:"callout-title"},g={key:0,class:"callout--content"},h=e.defineComponent({__name:"Callout",props:{title:{default:""},message:{default:""},type:{default:"info"},className:{}},setup(t){const o=e.useSlots(),c=t,a=e.ref(!1),n=()=>{a.value=!a.value},i=e.computed(()=>l.cn("callout",`callout--${c.type}`,c.className)),r=e.computed(()=>{switch(c.type){case"success":return m;case"warning":return p;case"error":return u;default:return v}});return(s,x)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.value)},[e.createElementVNode("button",{type:"button",class:"callout-header",onClick:n},[e.createElementVNode("div",_,[e.createVNode(e.unref(l.Icon),{"icon-definition":r.value,decorative:"",inline:"",size:"small",class:"callout-icon"},null,8,["icon-definition"]),e.createElementVNode("span",z,e.toDisplayString(c.title),1)]),e.createVNode(e.unref(l.Icon),{"icon-definition":a.value?e.unref(f):e.unref(d),decorative:"",inline:"",size:"small"},null,8,["icon-definition"])]),a.value?(e.openBlock(),e.createElementBlock("div",g,[e.unref(o).default?e.renderSlot(s.$slots,"default",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(c.message),1)],64))])):e.createCommentVNode("",!0)],2))}}),N=(t,o)=>{const c=t.__vccOpts||t;for(const[a,n]of o)c[a]=n;return c},k=N(h,[["__scopeId","data-v-cfe04aa4"]]);exports.Callout=k;

package/dist/index.mjs

@@ -1,126 +1,94 @@
-import { defineComponent as h, computed as c, createBlock as x, createElementBlock as m, openBlock as l, unref as i, mergeProps as y, withCtx as u, createVNode as b, normalizeProps as _, guardReactiveProps as g, renderSlot as f, createTextVNode as p, toDisplayString as v, useSlots as C, normalizeClass as z, createElementVNode as B, createCommentVNode as $, Fragment as L, withModifiers as O } from "vue";
-import { cn as N, BaseLink as D, ActionContent as k } from "@phila/phila-ui-core";
-import './index.css';const R = ["disabled"], P = /* @__PURE__ */ h({
-  inheritAttrs: !1,
-  __name: "PhlButton",
-  props: {
-    href: {},
-    to: {},
-    target: {},
-    rel: {},
-    disabled: { type: Boolean, default: !1 },
-    clickTarget: {},
-    variant: { default: "primary" },
-    size: { default: "medium" },
-    iconOnly: { type: Boolean, default: !1 },
-    iconRight: { type: Boolean },
-    text: {},
-    className: {},
-    iconDefinition: {},
-    iconClass: {},
-    src: {},
-    svgRaw: {}
-  },
-  setup(o) {
-    const e = o, a = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, s = c(() => N(
-      "phila-button",
-      `phila-button--${e.variant}`,
-      e.size && `is-${e.size}`,
-      e.iconOnly && "icon-button",
-      e.iconOnly && e.variant === "standard" && "icon-button--standard",
-      e.className
-    )), n = c(() => a(e) ? "to" in e && e.to !== void 0 ? {
-      to: e.to,
-      disabled: e.disabled,
-      className: s.value
-    } : {
-      href: e.href,
-      target: e.target,
-      rel: e.rel,
-      disabled: e.disabled,
-      className: s.value
-    } : {}), r = c(
-      () => ({
-        iconDefinition: e.iconDefinition,
-        iconClass: e.iconClass,
-        src: e.src,
-        iconRight: e.iconRight,
-        iconOnly: e.iconOnly,
-        text: e.text,
-        size: e.size
-      })
-    );
-    return (t, d) => a(e) ? (l(), x(i(D), y({ key: 0 }, { ...n.value, ...t.$attrs }, { role: "button" }), {
-      default: u(() => [
-        b(i(k), _(g(r.value)), {
-          default: u(() => [
-            f(t.$slots, "default", {}, () => [
-              p(v(e.text), 1)
-            ])
-          ]),
-          _: 3
-        }, 16)
-      ]),
-      _: 3
-    }, 16)) : (l(), m("button", y({
-      key: 1,
-      type: "button",
-      disabled: e.disabled,
-      class: s.value
-    }, t.$attrs), [
-      b(i(k), _(g(r.value)), {
-        default: u(() => [
-          f(t.$slots, "default", {}, () => [
-            p(v(e.text), 1)
-          ])
-        ]),
-        _: 3
-      }, 16)
-    ], 16, R));
-  }
-});
-var V = {
+import { defineComponent as _, useSlots as z, ref as x, computed as r, createElementBlock as n, openBlock as i, normalizeClass as h, createElementVNode as s, createCommentVNode as g, createVNode as f, unref as a, toDisplayString as u, renderSlot as C, Fragment as N, createTextVNode as k } from "vue";
+import { cn as y, Icon as m } from "@phila/phila-ui-core";
+import './index.css';var M = {
+  prefix: "fas",
+  iconName: "chevron-up",
+  icon: [448, 512, [], "f077", "M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"]
+}, w = {
+  prefix: "fas",
+  iconName: "circle-exclamation",
+  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
+}, L = {
   prefix: "fas",
-  iconName: "xmark",
-  icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, w = V;
-const S = { class: "content" }, T = /* @__PURE__ */ h({
+  iconName: "circle-check",
+  icon: [512, 512, [61533, "check-circle"], "f058", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"]
+}, E = {
+  prefix: "fas",
+  iconName: "chevron-down",
+  icon: [448, 512, [], "f078", "M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"]
+}, S = {
+  prefix: "fas",
+  iconName: "triangle-exclamation",
+  icon: [512, 512, [9888, "exclamation-triangle", "warning"], "f071", "M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
+}, V = {
+  prefix: "fas",
+  iconName: "circle-info",
+  icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
+};
+const I = { class: "callout-header-left" }, b = { class: "callout-title" }, B = {
+  key: 0,
+  class: "callout--content"
+}, D = /* @__PURE__ */ _({
   __name: "Callout",
   props: {
+    title: { default: "" },
     message: { default: "" },
     type: { default: "info" },
-    icon: {},
-    dismissible: { type: Boolean, default: !1 },
     className: {}
   },
-  emits: ["dismiss"],
-  setup(o, { emit: e }) {
-    const a = C(), s = o, n = e, r = c(() => N(s.className));
-    return (t, d) => (l(), m("div", {
-      class: z(["callout", r.value])
+  setup(o) {
+    const t = z(), e = o, c = x(!1), l = () => {
+      c.value = !c.value;
+    }, d = r(() => y("callout", `callout--${e.type}`, e.className)), p = r(() => {
+      switch (e.type) {
+        case "success":
+          return L;
+        case "warning":
+          return S;
+        case "error":
+          return w;
+        default:
+          return V;
+      }
+    });
+    return (v, T) => (i(), n("div", {
+      class: h(d.value)
     }, [
-      B("div", S, [
-        i(a).default ? f(t.$slots, "default", { key: 0 }, void 0, !0) : (l(), m(L, { key: 1 }, [
-          p(v(s.message), 1)
-        ], 64))
+      s("button", {
+        type: "button",
+        class: "callout-header",
+        onClick: l
+      }, [
+        s("div", I, [
+          f(a(m), {
+            "icon-definition": p.value,
+            decorative: "",
+            inline: "",
+            size: "small",
+            class: "callout-icon"
+          }, null, 8, ["icon-definition"]),
+          s("span", b, u(e.title), 1)
+        ]),
+        f(a(m), {
+          "icon-definition": c.value ? a(M) : a(E),
+          decorative: "",
+          inline: "",
+          size: "small"
+        }, null, 8, ["icon-definition"])
       ]),
-      s.dismissible ? (l(), x(i(P), {
-        key: 0,
-        variant: "standard",
-        size: "extra-small",
-        "icon-only": "",
-        icon: i(w),
-        "aria-label": "Dismiss",
-        onClick: d[0] || (d[0] = O(() => n("dismiss"), ["prevent"]))
-      }, null, 8, ["icon"])) : $("", !0)
+      c.value ? (i(), n("div", B, [
+        a(t).default ? C(v.$slots, "default", { key: 0 }, void 0, !0) : (i(), n(N, { key: 1 }, [
+          k(u(e.message), 1)
+        ], 64))
+      ])) : g("", !0)
     ], 2));
   }
-}), A = (o, e) => {
-  const a = o.__vccOpts || o;
-  for (const [s, n] of e)
-    a[s] = n;
-  return a;
-}, F = /* @__PURE__ */ A(T, [["__scopeId", "data-v-df7d37eb"]]);
+}), O = (o, t) => {
+  const e = o.__vccOpts || o;
+  for (const [c, l] of t)
+    e[c] = l;
+  return e;
+}, U = /* @__PURE__ */ O(D, [["__scopeId", "data-v-cfe04aa4"]]);
 export {
-  F as Callout
+  U as Callout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-callout",
-  "version": "0.0.25",
+  "version": "1.0.0-beta.5",
   "type": "module",
   "description": "A vue component for displaying important messages and warnings.",
   "main": "./dist/index.js",
@@ -30,8 +30,8 @@
     "@fortawesome/pro-solid-svg-icons": "^7.1.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.4.0",
-    "@phila/phila-ui-button": "2.2.3"
+    "@phila/phila-ui-core": "3.0.0-beta.4",
+    "@phila/phila-ui-button": "2.2.3-beta.5"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",