lion-make 0.1.0

package/dist/lion-make.umd.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Q=require("react");var X={exports:{}},A={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Se;function ur(){if(Se)return A;Se=1;var i=Q,l=Symbol.for("react.element"),o=Symbol.for("react.fragment"),f=Object.prototype.hasOwnProperty,h=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,m={key:!0,ref:!0,__self:!0,__source:!0};function d(b,p,S){var y,T={},k=null,B=null;S!==void 0&&(k=""+S),p.key!==void 0&&(k=""+p.key),p.ref!==void 0&&(B=p.ref);for(y in p)f.call(p,y)&&!m.hasOwnProperty(y)&&(T[y]=p[y]);if(b&&b.defaultProps)for(y in p=b.defaultProps,p)T[y]===void 0&&(T[y]=p[y]);return{$$typeof:l,type:b,key:k,ref:B,props:T,_owner:h.current}}return A.Fragment=o,A.jsx=d,A.jsxs=d,A}var $={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Te;function dr(){return Te||(Te=1,process.env.NODE_ENV!=="production"&&function(){var i=Q,l=Symbol.for("react.element"),o=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),d=Symbol.for("react.provider"),b=Symbol.for("react.context"),p=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),T=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),B=Symbol.for("react.offscreen"),Z=Symbol.iterator,Ce="@@iterator";function ke(e){if(e===null||typeof e!="object")return null;var r=Z&&e[Z]||e[Ce];return typeof r=="function"?r:null}var P=i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function j(e){{for(var r=arguments.length,a=new Array(r>1?r-1:0),t=1;t<r;t++)a[t-1]=arguments[t];we("error",e,a)}}function we(e,r,a){{var t=P.ReactDebugCurrentFrame,u=t.getStackAddendum();u!==""&&(r+="%s",a=a.concat([u]));var v=a.map(function(c){return String(c)});v.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,v)}}var Oe=!1,Pe=!1,Ne=!1,Fe=!1,De=!1,ee;ee=Symbol.for("react.module.reference");function ze(e){return!!(typeof e=="string"||typeof e=="function"||e===f||e===m||De||e===h||e===S||e===y||Fe||e===B||Oe||Pe||Ne||typeof e=="object"&&e!==null&&(e.$$typeof===k||e.$$typeof===T||e.$$typeof===d||e.$$typeof===b||e.$$typeof===p||e.$$typeof===ee||e.getModuleId!==void 0))}function Ae(e,r,a){var t=e.displayName;if(t)return t;var u=r.displayName||r.name||"";return u!==""?a+"("+u+")":a}function re(e){return e.displayName||"Context"}function C(e){if(e==null)return null;if(typeof e.tag=="number"&&j("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case f:return"Fragment";case o:return"Portal";case m:return"Profiler";case h:return"StrictMode";case S:return"Suspense";case y:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case b:var r=e;return re(r)+".Consumer";case d:var a=e;return re(a._context)+".Provider";case p:return Ae(e,e.render,"ForwardRef");case T:var t=e.displayName||null;return t!==null?t:C(e.type)||"Memo";case k:{var u=e,v=u._payload,c=u._init;try{return C(c(v))}catch{return null}}}return null}var w=Object.assign,D=0,ae,ne,te,oe,ie,le,se;function ce(){}ce.__reactDisabledLog=!0;function $e(){{if(D===0){ae=console.log,ne=console.info,te=console.warn,oe=console.error,ie=console.group,le=console.groupCollapsed,se=console.groupEnd;var e={configurable:!0,enumerable:!0,value:ce,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}D++}}function Be(){{if(D--,D===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:w({},e,{value:ae}),info:w({},e,{value:ne}),warn:w({},e,{value:te}),error:w({},e,{value:oe}),group:w({},e,{value:ie}),groupCollapsed:w({},e,{value:le}),groupEnd:w({},e,{value:se})})}D<0&&j("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var L=P.ReactCurrentDispatcher,U;function W(e,r,a){{if(U===void 0)try{throw Error()}catch(u){var t=u.stack.trim().match(/\n( *(at )?)/);U=t&&t[1]||""}return`
+`+U+e}}var V=!1,I;{var We=typeof WeakMap=="function"?WeakMap:Map;I=new We}function ue(e,r){if(!e||V)return"";{var a=I.get(e);if(a!==void 0)return a}var t;V=!0;var u=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var v;v=L.current,L.current=null,$e();try{if(r){var c=function(){throw Error()};if(Object.defineProperty(c.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(c,[])}catch(R){t=R}Reflect.construct(e,[],c)}else{try{c.call()}catch(R){t=R}e.call(c.prototype)}}else{try{throw Error()}catch(R){t=R}e()}}catch(R){if(R&&t&&typeof R.stack=="string"){for(var s=R.stack.split(`
+`),x=t.stack.split(`
+`),g=s.length-1,_=x.length-1;g>=1&&_>=0&&s[g]!==x[_];)_--;for(;g>=1&&_>=0;g--,_--)if(s[g]!==x[_]){if(g!==1||_!==1)do if(g--,_--,_<0||s[g]!==x[_]){var E=`
+`+s[g].replace(" at new "," at ");return e.displayName&&E.includes("<anonymous>")&&(E=E.replace("<anonymous>",e.displayName)),typeof e=="function"&&I.set(e,E),E}while(g>=1&&_>=0);break}}}finally{V=!1,L.current=v,Be(),Error.prepareStackTrace=u}var F=e?e.displayName||e.name:"",O=F?W(F):"";return typeof e=="function"&&I.set(e,O),O}function Ie(e,r,a){return ue(e,!1)}function Ye(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function Y(e,r,a){if(e==null)return"";if(typeof e=="function")return ue(e,Ye(e));if(typeof e=="string")return W(e);switch(e){case S:return W("Suspense");case y:return W("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case p:return Ie(e.render);case T:return Y(e.type,r,a);case k:{var t=e,u=t._payload,v=t._init;try{return Y(v(u),r,a)}catch{}}}return""}var z=Object.prototype.hasOwnProperty,de={},fe=P.ReactDebugCurrentFrame;function M(e){if(e){var r=e._owner,a=Y(e.type,e._source,r?r.type:null);fe.setExtraStackFrame(a)}else fe.setExtraStackFrame(null)}function Me(e,r,a,t,u){{var v=Function.call.bind(z);for(var c in e)if(v(e,c)){var s=void 0;try{if(typeof e[c]!="function"){var x=Error((t||"React class")+": "+a+" type `"+c+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[c]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw x.name="Invariant Violation",x}s=e[c](r,c,t,a,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(g){s=g}s&&!(s instanceof Error)&&(M(u),j("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",t||"React class",a,c,typeof s),M(null)),s instanceof Error&&!(s.message in de)&&(de[s.message]=!0,M(u),j("Failed %s type: %s",a,s.message),M(null))}}}var Le=Array.isArray;function q(e){return Le(e)}function Ue(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,a=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a}}function Ve(e){try{return ve(e),!1}catch{return!0}}function ve(e){return""+e}function he(e){if(Ve(e))return j("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ue(e)),ve(e)}var pe=P.ReactCurrentOwner,qe={key:!0,ref:!0,__self:!0,__source:!0},me,ge;function He(e){if(z.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function Ge(e){if(z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function Je(e,r){typeof e.ref=="string"&&pe.current}function Ke(e,r){{var a=function(){me||(me=!0,j("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}}function Xe(e,r){{var a=function(){ge||(ge=!0,j("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};a.isReactWarning=!0,Object.defineProperty(e,"ref",{get:a,configurable:!0})}}var Qe=function(e,r,a,t,u,v,c){var s={$$typeof:l,type:e,key:r,ref:a,props:c,_owner:v};return s._store={},Object.defineProperty(s._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(s,"_self",{configurable:!1,enumerable:!1,writable:!1,value:t}),Object.defineProperty(s,"_source",{configurable:!1,enumerable:!1,writable:!1,value:u}),Object.freeze&&(Object.freeze(s.props),Object.freeze(s)),s};function Ze(e,r,a,t,u){{var v,c={},s=null,x=null;a!==void 0&&(he(a),s=""+a),Ge(r)&&(he(r.key),s=""+r.key),He(r)&&(x=r.ref,Je(r,u));for(v in r)z.call(r,v)&&!qe.hasOwnProperty(v)&&(c[v]=r[v]);if(e&&e.defaultProps){var g=e.defaultProps;for(v in g)c[v]===void 0&&(c[v]=g[v])}if(s||x){var _=typeof e=="function"?e.displayName||e.name||"Unknown":e;s&&Ke(c,_),x&&Xe(c,_)}return Qe(e,s,x,u,t,pe.current,c)}}var H=P.ReactCurrentOwner,_e=P.ReactDebugCurrentFrame;function N(e){if(e){var r=e._owner,a=Y(e.type,e._source,r?r.type:null);_e.setExtraStackFrame(a)}else _e.setExtraStackFrame(null)}var G;G=!1;function J(e){return typeof e=="object"&&e!==null&&e.$$typeof===l}function be(){{if(H.current){var e=C(H.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function er(e){return""}var ye={};function rr(e){{var r=be();if(!r){var a=typeof e=="string"?e:e.displayName||e.name;a&&(r=`
+
+Check the top-level render call using <`+a+">.")}return r}}function je(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var a=rr(r);if(ye[a])return;ye[a]=!0;var t="";e&&e._owner&&e._owner!==H.current&&(t=" It was passed a child from "+C(e._owner.type)+"."),N(e),j('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',a,t),N(null)}}function xe(e,r){{if(typeof e!="object")return;if(q(e))for(var a=0;a<e.length;a++){var t=e[a];J(t)&&je(t,r)}else if(J(e))e._store&&(e._store.validated=!0);else if(e){var u=ke(e);if(typeof u=="function"&&u!==e.entries)for(var v=u.call(e),c;!(c=v.next()).done;)J(c.value)&&je(c.value,r)}}}function ar(e){{var r=e.type;if(r==null||typeof r=="string")return;var a;if(typeof r=="function")a=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===p||r.$$typeof===T))a=r.propTypes;else return;if(a){var t=C(r);Me(a,e.props,"prop",t,e)}else if(r.PropTypes!==void 0&&!G){G=!0;var u=C(r);j("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",u||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&j("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function nr(e){{for(var r=Object.keys(e.props),a=0;a<r.length;a++){var t=r[a];if(t!=="children"&&t!=="key"){N(e),j("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",t),N(null);break}}e.ref!==null&&(N(e),j("Invalid attribute `ref` supplied to `React.Fragment`."),N(null))}}var Re={};function Ee(e,r,a,t,u,v){{var c=ze(e);if(!c){var s="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(s+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var x=er();x?s+=x:s+=be();var g;e===null?g="null":q(e)?g="array":e!==void 0&&e.$$typeof===l?(g="<"+(C(e.type)||"Unknown")+" />",s=" Did you accidentally export a JSX literal instead of a component?"):g=typeof e,j("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",g,s)}var _=Ze(e,r,a,u,v);if(_==null)return _;if(c){var E=r.children;if(E!==void 0)if(t)if(q(E)){for(var F=0;F<E.length;F++)xe(E[F],e);Object.freeze&&Object.freeze(E)}else j("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else xe(E,e)}if(z.call(r,"key")){var O=C(e),R=Object.keys(r).filter(function(cr){return cr!=="key"}),K=R.length>0?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}";if(!Re[O+K]){var sr=R.length>0?"{"+R.join(": ..., ")+": ...}":"{}";j(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,K,O,sr,O),Re[O+K]=!0}}return e===f?nr(_):ar(_),_}}function tr(e,r,a){return Ee(e,r,a,!0)}function or(e,r,a){return Ee(e,r,a,!1)}var ir=or,lr=tr;$.Fragment=f,$.jsx=ir,$.jsxs=lr}()),$}process.env.NODE_ENV==="production"?X.exports=ur():X.exports=dr();var n=X.exports;const fr=({children:i,className:l})=>n.jsx("div",{"data-template":"forehead",className:["lion-page","lion-page--forehead",l].filter(Boolean).join(" "),style:{maxWidth:"var(--max-width, 1600px)",margin:"0 auto"},children:i}),vr=({children:i,className:l})=>n.jsx("div",{"data-template":"sideburn",className:["lion-page","lion-page--sideburn",l].filter(Boolean).join(" "),style:{maxWidth:"var(--max-width, 1600px)",margin:"0 auto"},children:i}),hr=({zone:i,children:l,className:o})=>n.jsx("section",{"data-zone":i,className:["lion-section",`lion-section--${i}`,o].filter(Boolean).join(" "),children:l}),pr=({type:i="single",children:l,className:o})=>n.jsx("div",{"data-container-type":i,className:["lion-container",`lion-container--${i}`,o].filter(Boolean).join(" "),children:l}),mr=({links:i,className:l})=>n.jsx("nav",{"data-zone":"anklet",className:["lion-anklet",l].filter(Boolean).join(" "),"aria-label":"Quick links",children:n.jsx("ul",{className:"lion-anklet__list",children:i.map(o=>n.jsx("li",{className:"lion-anklet__item",children:n.jsx("a",{href:o.href,className:"lion-anklet__link",children:o.label})},o.href))})}),gr=({logoSrc:i,logoAlt:l,selectedState:o,onStateChange:f,className:h})=>n.jsxs("div",{"data-zone":"header","data-content-type":"corporate-universal-header",className:["lion-corporate-header",h].filter(Boolean).join(" "),style:{backgroundColor:"var(--color-blue-dark)"},children:[n.jsx("img",{src:i,alt:l,className:"lion-corporate-header__logo"}),f&&n.jsx("select",{className:"lion-corporate-header__state-selector",value:o,onChange:m=>f(m.target.value),"aria-label":"Select state"})]}),_r=({logoSrc:i,logoAlt:l,underwriterInfo:o,ctas:f=[],className:h})=>n.jsxs("header",{"data-zone":"header","data-content-type":"global-header-bar",className:["lion-global-header",h].filter(Boolean).join(" "),style:{backgroundColor:"var(--color-white)"},children:[n.jsx("img",{src:i,alt:l,className:"lion-global-header__logo"}),o&&n.jsx("span",{className:"lion-global-header__underwriter",children:o}),f.length>0&&n.jsx("nav",{className:"lion-global-header__ctas","aria-label":"Header actions",children:f.map(m=>n.jsx("a",{href:m.href,className:`lion-global-header__cta lion-global-header__cta--${m.type??"link"}`,children:m.label},m.href))})]}),br=({variant:i,heading:l,subheading:o,imageSrc:f,imageAlt:h,ctaLabel:m,ctaHref:d,className:b})=>n.jsxs("div",{"data-zone":"hero","data-content-type":`hero-${i}`,className:["lion-hero",`lion-hero--${i}`,b].filter(Boolean).join(" "),children:[n.jsxs("div",{className:"lion-hero__content",children:[n.jsx("h1",{className:"lion-hero__heading",style:{fontSize:"var(--h1-font-size)",lineHeight:"var(--h1-line-height)"},children:l}),o&&n.jsx("p",{className:"lion-hero__subheading",style:{fontSize:"var(--font-size-base)"},children:o}),m&&d&&n.jsx("a",{href:d,className:"lion-hero__cta",style:{color:"var(--color-white)",backgroundColor:"var(--color-brand)"},children:m})]}),f&&n.jsx("div",{className:"lion-hero__image-wrapper",children:n.jsx("img",{src:f,alt:h??"",className:"lion-hero__image"})})]}),yr=({type:i,label:l,href:o,phone:f,variant:h="primary",opensInNewTab:m=!1,className:d})=>{const b=m?"_blank":void 0,p=m?"noopener noreferrer":void 0,S=i==="phone"?`tel:${f}`:o;return n.jsx("a",{"data-zone":"general","data-content-type":"cta",href:S,target:b,rel:p,className:["lion-cta",`lion-cta--${i}`,`lion-cta--${h}`,d].filter(Boolean).join(" "),style:{fontFamily:"var(--font-family-sans-serif)",fontWeight:"var(--font-weight-600)",borderRadius:"var(--border-radius-base)",padding:"var(--padding-base-vertical) var(--padding-base-horizontal)",backgroundColor:h==="primary"?"var(--color-brand)":"transparent",color:h==="primary"?"var(--color-white)":"var(--color-link)",borderWidth:h==="secondary"?"var(--border-width-base)":void 0,borderStyle:h==="secondary"?"solid":void 0,borderColor:h==="secondary"?"var(--color-brand)":void 0},children:l})},jr=({heading:i,body:l,ctaLabel:o,ctaHref:f,className:h})=>n.jsxs("div",{"data-zone":"general","data-content-type":"callout",className:["lion-callout",h].filter(Boolean).join(" "),style:{backgroundColor:"var(--color-teal-tint)",borderRadius:"var(--border-radius-base)",padding:"var(--padding-edge)"},children:[n.jsx("h2",{className:"lion-callout__heading",style:{fontSize:"var(--h2-font-size)",fontWeight:"var(--font-weight-700)"},children:i}),n.jsx("p",{className:"lion-callout__body",style:{fontSize:"var(--font-size-base)",color:"var(--color-text)"},children:l}),o&&f&&n.jsx("a",{href:f,className:"lion-callout__cta",style:{color:"var(--color-link)"},children:o})]}),xr=({items:i,className:l})=>n.jsx("ul",{"data-zone":"general","data-content-type":"rtbs",className:["lion-rtbs",l].filter(Boolean).join(" "),style:{listStyle:"none",padding:0,margin:0},children:i.map((o,f)=>n.jsxs("li",{className:"lion-rtbs__item",children:[o.illustrationSrc&&n.jsx("img",{src:o.illustrationSrc,alt:o.illustrationAlt??"",className:"lion-rtbs__illustration"}),n.jsx("h3",{className:"lion-rtbs__heading",style:{fontSize:"var(--h3-font-size)",fontWeight:"var(--font-weight-600)"},children:o.heading}),n.jsx("p",{className:"lion-rtbs__body",style:{fontSize:"var(--font-size-base)",color:"var(--color-text)"},children:o.body})]},f))}),Rr=["Risk-free","No Obligation","Protected Privacy"],Er=({tags:i=Rr,className:l})=>n.jsx("ul",{"data-zone":"general","data-content-type":"confidence-tags",className:["lion-confidence-tags",l].filter(Boolean).join(" "),style:{listStyle:"none",padding:0,margin:0,display:"flex",gap:"var(--Grid-gutter-size)"},children:i.map(o=>n.jsx("li",{className:"lion-confidence-tags__tag",style:{fontSize:"var(--h5-font-size)",fontWeight:"var(--font-weight-600)",color:"var(--color-brand)",borderRadius:"var(--border-radius-small)",padding:"var(--padding-small-vertical) var(--padding-small-horizontal)",backgroundColor:"var(--color-teal-opaque)"},children:o},o))}),Sr=({fields:i,submitLabel:l="Submit",onSubmit:o,mediaCode:f,className:h})=>{const m=d=>{if(d.preventDefault(),!o)return;const b=new FormData(d.currentTarget),p={};b.forEach((S,y)=>{p[y]=S}),o(p)};return n.jsxs("form",{"data-zone":"general","data-content-type":"lead-form","data-media-code":f,className:["lion-lead-form",h].filter(Boolean).join(" "),onSubmit:m,children:[i.map(d=>{var b;return n.jsxs("div",{className:"lion-lead-form__field",children:[n.jsxs("label",{htmlFor:d.name,className:"lion-lead-form__label",style:{fontWeight:"var(--font-weight-600)"},children:[d.label,d.required&&n.jsx("span",{"aria-hidden":"true",children:" *"})]}),d.type==="select"?n.jsx("select",{id:d.name,name:d.name,required:d.required,className:"lion-lead-form__select",children:(b=d.options)==null?void 0:b.map(p=>n.jsx("option",{value:p,children:p},p))}):n.jsx("input",{id:d.name,name:d.name,type:d.type,required:d.required,className:"lion-lead-form__input"})]},d.name)}),n.jsx("button",{type:"submit",className:"lion-lead-form__submit",style:{backgroundColor:"var(--color-brand)",color:"var(--color-white)",fontWeight:"var(--font-weight-600)",borderRadius:"var(--border-radius-base)",padding:"var(--padding-base-vertical) var(--padding-base-horizontal)"},children:l})]})},Tr=({html:i,className:l})=>n.jsx("div",{"data-zone":"general","data-content-type":"rich-text",className:["lion-rich-text",l].filter(Boolean).join(" "),style:{fontFamily:"var(--font-family-sans-serif)",fontSize:"var(--font-size-base)",lineHeight:"var(--line-height-base)",color:"var(--color-text)"},dangerouslySetInnerHTML:{__html:i}}),Cr=({text:i,itemNumber:l,className:o})=>n.jsxs("div",{"data-zone":"footer","data-content-type":"disclaimer",className:["lion-disclaimer",o].filter(Boolean).join(" "),style:{fontSize:"var(--h6-font-size)",color:"var(--color-gray-dark)",lineHeight:"var(--h6-line-height)"},children:[n.jsx("p",{className:"lion-disclaimer__text",children:i}),l&&n.jsx("span",{className:"lion-disclaimer__item-number","aria-label":"Item number",children:l})]}),kr=({triggerLabel:i,content:l,materialId:o,className:f})=>{const[h,m]=Q.useState(!1);return n.jsxs("div",{"data-zone":"footer","data-content-type":"disclosure","data-material-id":o,className:["lion-disclosure",f].filter(Boolean).join(" "),children:[n.jsx("button",{type:"button",className:"lion-disclosure__trigger","aria-expanded":h,onClick:()=>m(d=>!d),style:{fontFamily:"var(--font-family-sans-serif)",fontSize:"var(--h6-font-size)",color:"var(--color-link)",background:"none",border:"none",cursor:"pointer",padding:0},children:i}),h&&n.jsxs("div",{className:"lion-disclosure__content",style:{fontSize:"var(--h6-font-size)",color:"var(--color-gray-dark)",marginTop:"var(--padding-small-vertical)"},children:[l,o&&n.jsxs("span",{className:"lion-disclosure__material-id","aria-label":"Material ID",children:[" ","(",o,")"]})]})]})},wr=({itemNumber:i,materialId:l,text:o,className:f})=>n.jsxs("div",{"data-zone":"footer","data-content-type":"compliance-block",className:["lion-compliance",f].filter(Boolean).join(" "),style:{fontSize:"var(--h6-font-size)",color:"var(--color-gray-dark)",lineHeight:"var(--h6-line-height)"},children:[o&&n.jsx("p",{className:"lion-compliance__text",children:o}),n.jsxs("dl",{className:"lion-compliance__ids",children:[i&&n.jsxs(n.Fragment,{children:[n.jsx("dt",{className:"lion-compliance__label",children:"Item #"}),n.jsx("dd",{className:"lion-compliance__value",children:i})]}),l&&n.jsxs(n.Fragment,{children:[n.jsx("dt",{className:"lion-compliance__label",children:"Material ID"}),n.jsx("dd",{className:"lion-compliance__value",children:l})]})]})]});exports.Anklet=mr;exports.CTA=yr;exports.CallOut=jr;exports.ComplianceBlock=wr;exports.ConfidenceTags=Er;exports.Container=pr;exports.CorporateUniversalHeader=gr;exports.Disclaimer=Cr;exports.Disclosure=kr;exports.GlobalHeaderBar=_r;exports.Hero=br;exports.LeadForm=Sr;exports.PageForehead=fr;exports.PageSideburn=vr;exports.RTBs=xr;exports.RichText=Tr;exports.Section=hr;

package/guidelines/Guidelines.md

@@ -0,0 +1,68 @@
+# lion-make Design System
+
+This is a zone-based design system modeled on the Mondrian CMS layout model. It is not a free-composition component library — it is a rules-enforced system where **content types can only exist in their designated zone**. Think SAP Fiori Elements or WordPress Gutenberg with strict block restrictions.
+
+## The #1 Principle: Zone Lock
+
+Every page is divided into fixed zones. Each zone accepts only its designated content types. This is non-negotiable.
+
+```
+PAGE
+├── Header zone          → Header content types only
+│   ├── Corporate Universal Header subsection
+│   ├── Global Header Bar subsection
+│   └── Navigation subsections
+├── Hero zone            → Hero content types only
+├── General Content zone → General content types only
+│   ├── Primary Column   (both templates)
+│   ├── Sideburn         (Sideburn template only)
+│   └── Outro            (Sideburn template only)
+├── Anklet               → Quick-links only (fixed structure)
+└── Footer zone          → Footer content types only
+    ├── Disclaimer subsection
+    ├── Disclosure subsection
+    └── Compliance subsection
+```
+
+**Placing a Hero content type outside the Hero zone is invalid. The same applies to every zone.**
+
+## Vocabulary
+
+| Term | Definition |
+|---|---|
+| **Template** | Page-level layout choice: Forehead (single column) or Sideburn (8+4 column). Permanent after creation. |
+| **Zone** | A fixed section of the page (Header, Hero, Primary Column, Sideburn, Outro, Anklet, Footer). |
+| **Container** | Holds components within a zone. Types: `single`, `category`, `quick-spacer`, `location-lookup`. |
+| **Component** | A reusable group of variations. Shared across pages — edits propagate everywhere. |
+| **Variation** | The actual content instance inside a Component, targeted by a facet. Only one displays at a time. |
+| **Facet** | A targeting trigger (e.g., state, county) that determines which Variation is shown. One value per variation. |
+| **Content Type** | A predefined design pattern that determines the structure and display of a Variation. |
+
+## Templates
+
+Two templates are available:
+
+- **Forehead** — Single centered column. Available on all platforms. Zones: Header, Hero, Primary Column (full-width), Anklet, Footer.
+- **Sideburn** — 8-col primary + 4-col sidebar. DLP-specific. Zones: Header, Hero, Primary Column, Sideburn, Outro, Anklet, Footer.
+
+Template selection is permanent. Changing a template requires reimporting all components.
+
+## Reading Order
+
+1. **[setup.md](./setup.md)** — Install the package, import tokens, set up fonts.
+2. **[foundations/overview.md](./foundations/overview.md)** — Design tokens: colors, typography, spacing, breakpoints, z-index.
+3. **[composition/overview.md](./composition/overview.md)** — Templates, zones, container hierarchy, constraints.
+4. **[content-types/overview.md](./content-types/overview.md)** — Content type catalog organized by zone.
+
+## Key References
+
+- **Zone placement table (the law):** [composition/zones.md](./composition/zones.md)
+- **Hard constraints:** [composition/constraints.md](./composition/constraints.md)
+- **Template selection:** [composition/templates.md](./composition/templates.md)
+
+## Design Philosophy
+
+- Pages are structured, not freeform. The zone model prevents layout inconsistency at scale.
+- Components are reusable by design. A shared component updated once reflects everywhere.
+- Variations are audience-targeted. One component, multiple variations, one displayed at a time.
+- Content types are the vocabulary. Only use defined content types — do not invent ad-hoc structures.

package/guidelines/composition/constraints.md

@@ -0,0 +1,49 @@
+# Constraints
+
+Hard rules that apply across the entire design system. These are non-negotiable.
+
+## Template Constraints
+
+- **Template choice is permanent.** Once a page is created with the Forehead or Sideburn template, it cannot be changed without reimporting all components.
+- **The Sideburn and Outro zones do not exist in the Forehead template.** Do not design Sideburn or Outro content for a Forehead page.
+- **Platform cannot be changed after page creation.** Set the platform correctly at the start.
+
+## Zone Constraints
+
+- Content types are zone-locked. A Hero content type placed outside the Hero zone is invalid — do not do it.
+- The Anklet zone has a fixed structure (quick-links list). It does not accept arbitrary content types.
+- Header subsections (Corporate Universal Header, Global Header Bar, Navigation) each accept only their designated component. Do not mix subsection types.
+- Footer subsections (Disclaimer, Disclosure, Compliance) are for legal content only. Do not place marketing content in the Footer zone.
+
+## Container Constraints
+
+- Not all container types are available in every zone.
+  - `quick-spacer` and `location-lookup` containers have restricted zone availability.
+  - Use `single` as the safe default in any zone.
+  - Use `category` for preset responsive vertical spacing.
+- Container type determines layout, not content. The content type is set at the Variation level.
+
+## Component and Variation Constraints
+
+- A Component is reusable across multiple pages. Editing a shared component propagates changes to all pages that use it — edit shared components deliberately.
+- Only one Variation displays per Component at a time. Variations are targeted by facets.
+- A facet can have only one value per variation (e.g., a variation can target one state, not multiple).
+- A Variation must have a Content Type assigned. Untyped variations are invalid.
+
+## Facet Constraints
+
+- Facets are targeting triggers (e.g., state, county). Only one facet value per variation.
+- The most common facet is `state`. Other facets like `county` are supported but less common.
+- When no facet matches, no variation displays from that Component. Plan a default (untagged) variation where needed.
+
+## Content Type Constraints
+
+- Content types are predefined. You cannot create ad-hoc content structures outside the defined types.
+- Some content types are platform-specific. Verify platform compatibility before using.
+- A content type placed in the wrong zone is a design error — the system will not render it correctly.
+
+## Cross-references
+
+- Full zone map: [zones.md](./zones.md)
+- Template selection: [templates.md](./templates.md)
+- Hierarchy details: [hierarchy.md](./hierarchy.md)

package/guidelines/composition/hierarchy.md

@@ -0,0 +1,72 @@
+# Component Hierarchy
+
+Within any zone, content is organized using the Container → Component → Variation model.
+
+## The Hierarchy
+
+```
+Zone (Section)
+└── Container
+    └── Component
+        └── Variation  ←  one displays at a time (facet-targeted)
+            └── Content Type (the design pattern for this variation)
+```
+
+## Containers
+
+A Container holds components and defines how they are arranged within the zone.
+
+**Container types:**
+
+| Type | Use |
+|---|---|
+| `single` | Hosts one component. Most commonly used. Safe default in any zone. |
+| `category` | Provides preset responsive vertical spacing. |
+| `quick-spacer` | Adds vertical whitespace with no content. |
+| `location-lookup` | Enables location-specific content. Broker Portal only. |
+
+Not all container types are available in every zone. `single` and `category` are the universally safe choices.
+
+```tsx
+import { Container } from 'lion-make'
+<Container type="single">...</Container>
+```
+
+## Components
+
+A Component is a reusable group of variations. It is not a visual element — it is an organizational wrapper.
+
+**Key properties:**
+- A Component can be shared across multiple pages.
+- Editing a shared Component propagates the change to all pages that use it.
+- A Component has a unique Component ID that can be used for anchor links.
+- A Component does not carry a status — its Variations do.
+
+**When to share vs. create new:** If the same content should appear identically on multiple pages, share the Component. If the content will diverge, create a new Component per page.
+
+## Variations
+
+A Variation is the actual content inside a Component. It is what users see.
+
+**Key properties:**
+- A Component can have multiple Variations, but only one displays at a time.
+- Display is controlled by a **facet** — a targeting trigger.
+- The most common facet is `state`. Other facets include `county`.
+- A Variation must have an assigned Content Type.
+
+**Facet rules:**
+- A facet can have only one value per variation (e.g., one state, not multiple).
+- When no facet matches, no Variation displays from that Component. Plan a default (un-faceted) Variation for fallback.
+
+## Status Model
+
+| Status | Description |
+|---|---|
+| Draft | The only status that permits editing. |
+| In Review | First reviewer has started evaluation. |
+| Approved | Accepted by both BA and Designer reviewers. |
+| Denied | Rejected — requires revision and resubmission. |
+| Pending | Awaiting reviewer action. |
+| Published | Live. Cannot be edited directly (must transition back to Draft). |
+| Scheduled | Set to publish at a future date/time. |
+| Archived | Retired but retrievable. |

package/guidelines/composition/overview.md

@@ -0,0 +1,22 @@
+# Composition Overview
+
+This section documents the structural rules of the design system: how pages are built, how zones relate to templates, and how the Container → Component → Variation hierarchy works.
+
+## Files in This Section
+
+| File | What it covers |
+|---|---|
+| [templates.md](./templates.md) | Forehead vs Sideburn templates — when to choose each, what zones they unlock |
+| [zones.md](./zones.md) | **The law file** — full zone placement table, zone rules, zone-to-template mapping |
+| [hierarchy.md](./hierarchy.md) | Container → Component → Variation model, facets, shared components |
+| [constraints.md](./constraints.md) | Hard rules: template permanence, zone lock, facet limits, container restrictions |
+
+## The Three Structural Questions
+
+When building any page, answer these three in order:
+
+1. **Which template?** Forehead (single column) or Sideburn (8+4 column). This choice is permanent.
+2. **Which zone?** Every piece of content belongs to exactly one zone. Check [zones.md](./zones.md).
+3. **Which content type?** Each zone has a specific set of allowed content types. Check [content-types/overview.md](../content-types/overview.md).
+
+Never skip question 2 or assume a content type can go anywhere. Zone placement is the system's primary constraint.

package/guidelines/composition/templates.md

@@ -0,0 +1,46 @@
+# Templates
+
+Two templates are available. The template determines which zones exist on the page.
+
+## Forehead
+
+A single centered column. Available on all platforms.
+
+**Zones unlocked:** Header, Hero, Primary Column (full-width), Anklet, Footer.
+
+**When to use:** Most pages. Standard content pages, landing pages, product pages.
+
+```tsx
+import { PageForehead } from 'lion-make'
+<PageForehead>...</PageForehead>
+```
+
+## Sideburn
+
+An 8-col primary column with a 4-col sidebar. DLP (dedicated landing pages) only.
+
+**Zones unlocked:** Header, Hero, Primary Column (8-col), Sideburn (4-col), Outro, Anklet, Footer.
+
+**When to use:** Pages that require a persistent sidebar — quote widgets, contextual navigation, or supplementary content alongside a primary column.
+
+```tsx
+import { PageSideburn } from 'lion-make'
+<PageSideburn>...</PageSideburn>
+```
+
+## Permanence Rule
+
+**Template choice is permanent.** Once a page is created with a template, it cannot be switched without reimporting all components. Choose the correct template before building content.
+
+- If you need a sidebar at any point on the page → use Sideburn from the start.
+- If no sidebar is needed → use Forehead.
+- If you are unsure → use Forehead. It is easier to migrate from Forehead to Sideburn than the reverse.
+
+## What Changes Between Templates
+
+| Aspect | Forehead | Sideburn |
+|---|---|---|
+| Primary Column width | Full-width | 8 of 12 columns |
+| Sideburn zone | Not available | 4 of 12 columns |
+| Outro zone | Not available | Available |
+| Platform restriction | All platforms | DLP only |

package/guidelines/composition/zones.md

@@ -0,0 +1,60 @@
+# Zone Map
+
+This is the authoritative placement table for the lion-make design system. Every content type must be placed in its designated zone. Placing a content type in the wrong zone is invalid.
+
+## Zone Placement Table
+
+| Zone | Template | Subsections | Allowed Content Types |
+|---|---|---|---|
+| **Header** | Both | Corporate Universal Header, Global Header Bar, Navigation (Underwriter, Product, Top Nav) | Header content types only |
+| **Hero** | Both | — | Hero content types only |
+| **Primary Column** | Both | — | General content types |
+| **Sideburn** | Sideburn only | — | General content types (subset) |
+| **Outro** | Sideburn only | — | General content types (subset) |
+| **Anklet** | Both | — | Quick links only (fixed structure) |
+| **Footer** | Both | Disclaimer, Disclosure, Compliance | Footer content types only |
+
+## Zone Rules
+
+- A **header content type** can only be placed in the Header zone.
+- A **hero content type** can only be placed in the Hero zone.
+- A **general content type** can only be placed in the Primary Column, Sideburn, or Outro zones.
+- The **Anklet** zone accepts only the Anklet quick-links structure — no other content types.
+- A **footer content type** can only be placed in the Footer zone.
+- The **Sideburn** and **Outro** zones only exist in the Sideburn template. They are not available in the Forehead template.
+
+## Template-to-Zone Availability
+
+| Zone | Forehead Template | Sideburn Template |
+|---|---|---|
+| Header | Yes | Yes |
+| Hero | Yes | Yes |
+| Primary Column | Yes (full-width) | Yes (8-col) |
+| Sideburn | No | Yes (4-col) |
+| Outro | No | Yes |
+| Anklet | Yes | Yes |
+| Footer | Yes | Yes |
+
+## Component Hierarchy Within a Zone
+
+Every zone follows the same internal structure:
+
+```
+Zone (Section)
+└── Container (type: single | category | quick-spacer | location-lookup)
+    └── Component (reusable, shared across pages)
+        └── Variation (facet-targeted; only one displays at a time)
+            └── Content Type (the actual content)
+```
+
+Not all container types are available in every zone. Use `single` as the safe default.
+
+## Cross-references
+
+- Template rules and permanence: [templates.md](./templates.md)
+- Cross-cutting hard constraints: [constraints.md](./constraints.md)
+- Container and variation details: [hierarchy.md](./hierarchy.md)
+- Header content types: [../content-types/header/overview.md](../content-types/header/overview.md)
+- Hero content types: [../content-types/hero/overview.md](../content-types/hero/overview.md)
+- General content types: [../content-types/general/overview.md](../content-types/general/overview.md)
+- Footer content types: [../content-types/footer/overview.md](../content-types/footer/overview.md)

package/guidelines/content-types/footer/compliance-block.md

@@ -0,0 +1,38 @@
+# Compliance Block
+
+**Zone:** Footer only — Compliance subsection.
+
+## Description
+
+Displays compliance tracking identifiers and required legal copy. Every regulated page must include the appropriate Item Number and/or Material ID.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `itemNumber` | `string` | No | Unique identifier for compliance tracking (non-Medicare products) |
+| `materialId` | `string` | No | Compliance tracking number (Medicare Advantage / PDP) |
+| `text` | `string` | No | Additional compliance copy |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { ComplianceBlock } from 'lion-make'
+
+<ComplianceBlock
+  itemNumber="ICC20-TERM"
+  materialId="M28354"
+  text="Not connected with or endorsed by the U.S. Government or the federal Medicare program."
+/>
+```
+
+## Design Tokens
+
+- Font size: `var(--h6-font-size)` (1.4rem)
+- Color: `var(--color-gray-dark)`
+- Line height: `var(--h6-line-height)`
+
+## Compliance Note
+
+At least one of `itemNumber` or `materialId` must be present on any regulated page. The Compliance Block should always be the last element in the Footer zone.

package/guidelines/content-types/footer/disclaimer.md

@@ -0,0 +1,32 @@
+# Disclaimer
+
+**Zone:** Footer only — Disclaimer subsection.
+
+## Description
+
+Static legal text displayed in the footer. Always visible — not toggleable. Appears above Disclosure items.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `text` | `string` | Yes | Legal disclaimer text |
+| `itemNumber` | `string` | No | Compliance tracking item number |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Disclaimer } from 'lion-make'
+
+<Disclaimer
+  text="Products underwritten by Mutual of Omaha Insurance Company, Omaha, Nebraska 68175."
+  itemNumber="ICC20-TERM"
+/>
+```
+
+## Design Tokens
+
+- Font size: `var(--h6-font-size)` (1.4rem)
+- Color: `var(--color-gray-dark)`
+- Line height: `var(--h6-line-height)`

package/guidelines/content-types/footer/disclosure.md

@@ -0,0 +1,39 @@
+# Disclosure
+
+**Zone:** Footer only — Disclosure subsection.
+
+## Description
+
+Toggleable legal product information. Hidden by default; the user expands it by clicking the trigger label. Used for policy details, exclusions, and product-specific legal copy. Required for Medicare Advantage and PDP products (requires Material ID).
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `triggerLabel` | `string` | Yes | The label users click to expand the disclosure |
+| `content` | `string` | Yes | The full legal disclosure text (shown when expanded) |
+| `materialId` | `string` | No | Compliance tracking number (Medicare Advantage / PDP) |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { Disclosure } from 'lion-make'
+
+<Disclosure
+  triggerLabel="Policy Disclosure"
+  content="This policy has exclusions, limitations, reductions of benefits, and terms under which the policy may be continued in force or discontinued."
+  materialId="M28354"
+/>
+```
+
+## Design Tokens
+
+- Trigger font size: `var(--h6-font-size)`
+- Trigger color: `var(--color-link)`
+- Content color: `var(--color-gray-dark)`
+- Content margin-top: `var(--padding-small-vertical)`
+
+## Compliance Note
+
+Material ID is required for Medicare Advantage and PDP plans. If materialId is omitted on a regulated product, that is a compliance error — not a UI error.

package/guidelines/content-types/footer/overview.md

@@ -0,0 +1,38 @@
+# Footer Zone Content Types
+
+**Zone rule:** These content types can only be placed in the Footer zone. Never use them in Header, Hero, or General zones.
+
+The Footer zone is divided into subsections for legal content: Disclaimer, Disclosure, and Compliance. Each subsection accepts specific content types.
+
+## Footer Subsections
+
+| Subsection | Content type | Component | Description |
+|---|---|---|---|
+| Disclaimer | Disclaimer | `Disclaimer` | Static legal text, displayed above disclosures |
+| Disclosure | Disclosure | `Disclosure` | Toggleable legal product information |
+| Compliance | Compliance Block | `ComplianceBlock` | Item numbers and material IDs for compliance tracking |
+
+## Placement Example
+
+```tsx
+import { Section, Disclaimer, Disclosure, ComplianceBlock } from 'lion-make'
+
+<Section zone="footer">
+  <Disclaimer
+    text="Products underwritten by Mutual of Omaha Insurance Company, Omaha, Nebraska."
+    itemNumber="ICC20-TERM"
+  />
+  <Disclosure
+    triggerLabel="Important Disclosure"
+    content="This policy has exclusions, limitations, and reductions of benefits..."
+    materialId="M28354"
+  />
+  <ComplianceBlock itemNumber="ICC20-TERM" materialId="M28354" />
+</Section>
+```
+
+## Files in This Section
+
+- [disclaimer.md](./disclaimer.md)
+- [disclosure.md](./disclosure.md)
+- [compliance-block.md](./compliance-block.md)

package/guidelines/content-types/general/callout.md

@@ -0,0 +1,40 @@
+# Call-Out
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+A highlighted block that reiterates the primary CTA or offers a secondary one. Used to draw attention to a key action or message within the body of the page.
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `heading` | `string` | Yes | Call-out headline |
+| `body` | `string` | Yes | Supporting copy |
+| `ctaLabel` | `string` | No | Link label |
+| `ctaHref` | `string` | No | Link destination |
+| `className` | `string` | No | Additional CSS class |
+
+## Usage
+
+```tsx
+import { CallOut } from 'lion-make'
+
+<CallOut
+  heading="Not sure where to start?"
+  body="Our team can help you find the right plan for your situation."
+  ctaLabel="Talk to someone"
+  ctaHref="/contact"
+/>
+```
+
+## Design Tokens
+
+- Background: `var(--color-teal-tint)`
+- Border radius: `var(--border-radius-base)`
+- Padding: `var(--padding-edge)`
+- Heading font-size: `var(--h2-font-size)`
+- Heading font-weight: `var(--font-weight-700)`
+- Body color: `var(--color-text)`
+- Link color: `var(--color-link)`

package/guidelines/content-types/general/confidence-tags.md

@@ -0,0 +1,39 @@
+# Confidence Tags
+
+**Zone:** General — Primary Column, Sideburn, Outro.
+
+## Description
+
+Small badge trio that states trust signals near conversion points. Defaults to the canonical three: "Risk-free", "No Obligation", "Protected Privacy". Place near CTAs and lead forms to reduce friction.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|---|---|---|---|---|
+| `tags` | `string[]` | No | `['Risk-free', 'No Obligation', 'Protected Privacy']` | Badge labels |
+| `className` | `string` | No | — | Additional CSS class |
+
+## Usage
+
+```tsx
+import { ConfidenceTags } from 'lion-make'
+
+// Default (canonical three)
+<ConfidenceTags />
+
+// Custom
+<ConfidenceTags tags={['Cancel anytime', 'No hidden fees', 'Secure checkout']} />
+```
+
+## Placement Rule
+
+Always place immediately above or below the primary CTA. Never use as a standalone section — it is a supporting element.
+
+## Design Tokens
+
+- Font size: `var(--h5-font-size)`
+- Font weight: `var(--font-weight-600)`
+- Color: `var(--color-brand)`
+- Background: `var(--color-teal-opaque)` (`rgba(3, 160, 173, 0.08)`)
+- Border radius: `var(--border-radius-small)`
+- Padding: `var(--padding-small-vertical)` `var(--padding-small-horizontal)`