@happyvertical/smrt-content 0.34.6 → 0.34.8

package/dist/svelte/components/ContentGovernancePolicyEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Form, Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentReviewPolicyData } from '../../mock-smrt-client';
@@ -42,46 +43,49 @@ function handleSubmit() {
 }
 </script>
 
-<form class="governance-editor" onsubmit={(event) => {
-  event.preventDefault();
-  handleSubmit();
-}}>
-  <label>
-    Key
-    <input type="text" bind:value={draft.key} required />
-  </label>
-  <label>
-    Label
-    <input type="text" bind:value={draft.label} />
-  </label>
-  <label>
-    Kind
-    <select bind:value={draft.kind}>
-      <option value="facts">Facts</option>
-      <option value="safety">Safety</option>
-      <option value="custom">Custom</option>
-    </select>
-  </label>
-  <label>
-    Instructions
-    <textarea rows="4" bind:value={draft.instructions}></textarea>
-  </label>
-  <label class="checkbox">
-    <input type="checkbox" bind:checked={draft.enabled} />
-    Enabled
-  </label>
-  <div class="actions">
-    <Button variant="primary" type="submit">{t(M['content.governance_policy_editor.save_policy'])}</Button>
-    {#if onCancel}
-      <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
-        Cancel
-      </Button>
-    {/if}
-  </div>
-</form>
+<div class="governance-editor-shell">
+  <Form class="governance-editor" onsubmit={(event) => {
+    event.preventDefault();
+    handleSubmit();
+  }}>
+    <label>
+      Key
+      <Input type="text" bind:value={draft.key} required />
+    </label>
+    <label>
+      Label
+      <Input type="text" bind:value={draft.label} />
+    </label>
+    <label>
+      Kind
+      <Select bind:value={draft.kind}>
+        <option value="facts">Facts</option>
+        <option value="safety">Safety</option>
+        <option value="custom">Custom</option>
+      </Select>
+    </label>
+    <label>
+      Instructions
+      <Textarea rows={4} bind:value={draft.instructions}></Textarea>
+    </label>
+    <label class="checkbox">
+      <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+      <input type="checkbox" bind:checked={draft.enabled} />
+      Enabled
+    </label>
+    <div class="actions">
+      <Button variant="primary" type="submit">{t(M['content.governance_policy_editor.save_policy'])}</Button>
+      {#if onCancel}
+        <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
+          Cancel
+        </Button>
+      {/if}
+    </div>
+  </Form>
+</div>
 
 <style>
-  .governance-editor {
+  .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
   }
@@ -92,12 +96,6 @@ function handleSubmit() {
     font-size: var(--smrt-typography-label-large-size, 0.9rem);
   }
 
-  input,
-  select,
-  textarea {
-    width: 100%;
-  }
-
   .checkbox {
     display: flex;
     align-items: center;

package/dist/svelte/components/ContentGovernancePolicyEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAkFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAsFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}

package/dist/svelte/components/ContentGovernanceProfileEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Form, Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type {
@@ -82,72 +83,76 @@ function handleSubmit() {
 }
 </script>
 
-<form class="governance-editor" onsubmit={(event) => {
-  event.preventDefault();
-  handleSubmit();
-}}>
-  <label>
-    Key
-    <input type="text" bind:value={draft.key} required />
-  </label>
-  <label>
-    Label
-    <input type="text" bind:value={draft.label} />
-  </label>
-  <label>
-    Description
-    <textarea rows="2" bind:value={draft.description}></textarea>
-  </label>
-  <label class="checkbox">
-    <input type="checkbox" bind:checked={draft.enabled} />
-    Enabled
-  </label>
-
-  <div class="requirements">
-    <div class="requirements__header">
-      <strong>Requirements</strong>
-      <Button variant="secondary" type="button" onclick={addRequirement}>
-        {t(M['content.governance_profile_editor.add_requirement'])}
-      </Button>
+<div class="governance-editor-shell">
+  <Form class="governance-editor" onsubmit={(event) => {
+    event.preventDefault();
+    handleSubmit();
+  }}>
+    <label>
+      Key
+      <Input type="text" bind:value={draft.key} required />
+    </label>
+    <label>
+      Label
+      <Input type="text" bind:value={draft.label} />
+    </label>
+    <label>
+      Description
+      <Textarea rows={2} bind:value={draft.description}></Textarea>
+    </label>
+    <label class="checkbox">
+      <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+      <input type="checkbox" bind:checked={draft.enabled} />
+      Enabled
+    </label>
+
+    <div class="requirements">
+      <div class="requirements__header">
+        <strong>Requirements</strong>
+        <Button variant="secondary" type="button" onclick={addRequirement}>
+          {t(M['content.governance_profile_editor.add_requirement'])}
+        </Button>
+      </div>
+
+      {#each draft.requirements as requirement, index (`${requirement.policyKey}-${index}`)}
+        <div class="requirement-row">
+          <label>
+            Policy
+            <Select bind:value={requirement.policyKey}>
+              {#each policies as policy (policy.key)}
+                <option value={policy.key}>{policy.label}</option>
+              {/each}
+            </Select>
+          </label>
+          <label>
+            Label
+            <Input type="text" bind:value={requirement.label} />
+          </label>
+          <label class="checkbox">
+            <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+            <input type="checkbox" bind:checked={requirement.blocking} />
+            Blocking
+          </label>
+          <Button variant="danger" type="button" onclick={() => removeRequirement(index)}>
+            Remove
+          </Button>
+        </div>
+      {/each}
     </div>
 
-    {#each draft.requirements as requirement, index (`${requirement.policyKey}-${index}`)}
-      <div class="requirement-row">
-        <label>
-          Policy
-          <select bind:value={requirement.policyKey}>
-            {#each policies as policy (policy.key)}
-              <option value={policy.key}>{policy.label}</option>
-            {/each}
-          </select>
-        </label>
-        <label>
-          Label
-          <input type="text" bind:value={requirement.label} />
-        </label>
-        <label class="checkbox">
-          <input type="checkbox" bind:checked={requirement.blocking} />
-          Blocking
-        </label>
-        <Button variant="danger" type="button" onclick={() => removeRequirement(index)}>
-          Remove
+    <div class="actions">
+      <Button variant="primary" type="submit">{t(M['content.governance_profile_editor.save_profile'])}</Button>
+      {#if onCancel}
+        <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
+          Cancel
         </Button>
-      </div>
-    {/each}
-  </div>
-
-  <div class="actions">
-    <Button variant="primary" type="submit">{t(M['content.governance_profile_editor.save_profile'])}</Button>
-    {#if onCancel}
-      <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
-        Cancel
-      </Button>
-    {/if}
-  </div>
-</form>
+      {/if}
+    </div>
+  </Form>
+</div>
 
 <style>
-  .governance-editor {
+  .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
   }
@@ -158,12 +163,6 @@ function handleSubmit() {
     font-size: var(--smrt-typography-label-large-size, 0.9rem);
   }
 
-  input,
-  select,
-  textarea {
-    width: 100%;
-  }
-
   .checkbox {
     display: flex;
     align-items: center;

package/dist/svelte/components/ContentGovernanceProfileEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernanceProfileEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceProfileEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,4BAA4B,CAAC,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAgJD,QAAA,MAAM,8BAA8B,2CAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}
+{"version":3,"file":"ContentGovernanceProfileEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceProfileEditor.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,4BAA4B,CAAC,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqJD,QAAA,MAAM,8BAA8B,2CAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}

package/dist/svelte/components/ContentList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
@@ -152,23 +153,23 @@ function cancelDelete() {
   
   <div class="content-controls">
     <div class="search-filters">
-      <input type="text" placeholder={t(M['content.content_list.search_placeholder'])} bind:value={searchTerm} />
-      
+      <Input type="text" placeholder={t(M['content.content_list.search_placeholder'])} bind:value={searchTerm} />
+
       {#if !type}
-        <select bind:value={selectedType}>
+        <Select bind:value={selectedType}>
           <option value="All Types">{t(M['content.content_list.all_types'])}</option>
           <option value="Articles">Articles</option>
           <option value="Documents">Documents</option>
           <option value="Mirrors">Mirrors</option>
-        </select>
+        </Select>
       {/if}
-      
-      <select bind:value={selectedStatus}>
+
+      <Select bind:value={selectedStatus}>
         <option value="All Statuses">{t(M['content.content_list.all_statuses'])}</option>
         <option value="Published">Published</option>
         <option value="Draft">Draft</option>
         <option value="Archived">Archived</option>
-      </select>
+      </Select>
       
       {#if controls}
         {@render controls()}
@@ -439,8 +440,8 @@ function cancelDelete() {
     align-items: center;
   }
 
-  .search-filters input,
-  .search-filters select {
+  .search-filters :global(.input),
+  .search-filters :global(.select) {
     padding: 0.5rem 0.9rem;
     border: 1px solid var(--smrt-color-outline);
     border-radius: 0.5rem;
@@ -450,13 +451,6 @@ function cancelDelete() {
     color: var(--smrt-color-on-surface);
   }
 
-  .search-filters input:focus,
-  .search-filters select:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--smrt-color-primary) 20%, transparent);
-  }
-
   .actions-group {
     display: flex;
     gap: 0.75rem;
@@ -926,8 +920,8 @@ function cancelDelete() {
       width: 100%;
     }
 
-    .search-filters input,
-    .search-filters select,
+    .search-filters :global(.input),
+    .search-filters :global(.select),
     .add-button {
       width: 100%;
     }

package/dist/svelte/components/ContentList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA6WF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA8WF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/ContentMetadataFields.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Input, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.editor.js';
 
@@ -33,7 +34,7 @@ function updateTags(value: string) {
 <div class="content-metadata-fields">
   <label>
     <span>Author</span>
-    <input
+    <Input
       type="text"
       value={data.author || ''}
       oninput={(event) => updateField('author', event.currentTarget.value)}
@@ -41,15 +42,15 @@ function updateTags(value: string) {
   </label>
   <label>
     <span>Description</span>
-    <textarea
-      rows="4"
+    <Textarea
+      rows={4}
       value={data.description || ''}
       oninput={(event) => updateField('description', event.currentTarget.value)}
-    ></textarea>
+    ></Textarea>
   </label>
   <label>
     <span>Tags</span>
-    <input
+    <Input
       type="text"
       value={tagsValue}
       placeholder={t(M['content.content_metadata_fields.tags_placeholder'])}
@@ -58,7 +59,7 @@ function updateTags(value: string) {
   </label>
   <label>
     <span>URL</span>
-    <input
+    <Input
       type="url"
       value={data.url || ''}
       oninput={(event) => updateField('url', event.currentTarget.value)}
@@ -66,7 +67,7 @@ function updateTags(value: string) {
   </label>
   <label>
     <span>{t(M['content.content_metadata_fields.file_key'])}</span>
-    <input
+    <Input
       type="text"
       value={data.fileKey || ''}
       oninput={(event) => updateField('fileKey', event.currentTarget.value)}
@@ -88,20 +89,4 @@ function updateTags(value: string) {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  input,
-  textarea {
-    width: 100%;
-    box-sizing: border-box;
-    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
-    border-radius: 0.5rem;
-    background: var(--smrt-color-surface-container-low);
-    color: var(--smrt-color-on-surface);
-    font: inherit;
-    padding: 0.75rem 0.875rem;
-  }
-
-  textarea {
-    min-height: 7rem;
-    resize: vertical;
-  }
 </style>

package/dist/svelte/components/ContentMetadataFields.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAwDD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ContentMetadataFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentMetadataFields.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAyDD,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/ContentReferencesPanel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Input } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
@@ -114,7 +115,7 @@ function removeReference(id: string) {
   {/if}
 
   <div class="reference-input-row">
-    <input
+    <Input
       type="text"
       aria-label={t(M['content.content_references_panel.add_reference_by_id_or_url'])}
       placeholder={t(M['content.content_references_panel.reference_id_or_url_placeholder'])}
@@ -207,19 +208,14 @@ function removeReference(id: string) {
     gap: 0.65rem;
   }
 
-  input,
   .content-references-panel :global(.reference-button) {
     min-height: 2.5rem;
     border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
     border-radius: 0.5rem;
-    background: var(--smrt-color-surface-container-low);
+    background: var(--smrt-color-surface-container);
     color: var(--smrt-color-on-surface);
     font: inherit;
     padding: 0.55rem 0.875rem;
-  }
-
-  .content-references-panel :global(.reference-button) {
-    background: var(--smrt-color-surface-container);
     cursor: pointer;
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
@@ -227,4 +223,12 @@ function removeReference(id: string) {
   .content-references-panel :global(.reference-button:hover) {
     background: var(--smrt-color-surface-container-high);
   }
+
+  /* Match the Input primitive's height/radius to the sibling reference-button so
+     the two grid columns of .reference-input-row align (the primitive's base
+     .input has no min-height). */
+  .content-references-panel :global(.input) {
+    min-height: 2.5rem;
+    border-radius: 0.5rem;
+  }
 </style>

package/dist/svelte/components/ContentReferencesPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentReferencesPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReferencesPanel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuHD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ContentReferencesPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentReferencesPanel.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAIrE,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxD;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwHD,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ContentStatusFields.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../i18n.editor.js';
 
@@ -19,33 +20,33 @@ function updateField(key: string, value: unknown) {
 <div class="content-status-fields">
   <label>
     <span>Type</span>
-    <select value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
+    <Select value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
       <option value="article">Article</option>
       <option value="document">Document</option>
       <option value="mirror">Mirror</option>
       <option value="video-segment">{t(M['content.content_status_fields.video_segment'])}</option>
-    </select>
+    </Select>
   </label>
   <label>
     <span>State</span>
-    <select value={data.state || 'active'} onchange={(event) => updateField('state', event.currentTarget.value)}>
+    <Select value={data.state || 'active'} onchange={(event) => updateField('state', event.currentTarget.value)}>
       <option value="active">Active</option>
       <option value="highlighted">Highlighted</option>
       <option value="deprecated">Deprecated</option>
-    </select>
+    </Select>
   </label>
   <label>
     <span>Status</span>
-    <select value={data.status || 'draft'} onchange={(event) => updateField('status', event.currentTarget.value)}>
+    <Select value={data.status || 'draft'} onchange={(event) => updateField('status', event.currentTarget.value)}>
       <option value="draft">Draft</option>
       <option value="review">Review</option>
       <option value="published">Published</option>
       <option value="archived">Archived</option>
-    </select>
+    </Select>
   </label>
   <label>
     <span>Published</span>
-    <input
+    <Input
       type="datetime-local"
       value={data.publish_date || ''}
       onchange={(event) => updateField('publish_date', event.currentTarget.value)}
@@ -70,16 +71,4 @@ function updateField(key: string, value: unknown) {
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
-  select,
-  input {
-    min-height: 2.5rem;
-    border: 1px solid color-mix(in srgb, var(--smrt-color-outline) 50%, transparent);
-    border-radius: 0.5rem;
-    background: var(--smrt-color-surface-container-low);
-    color: var(--smrt-color-on-surface);
-    font: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    font-weight: var(--smrt-typography-weight-medium, 500);
-    padding: 0.55rem 0.75rem;
-  }
 </style>

package/dist/svelte/components/ContentStatusFields.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAoDD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentStatusFields.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentStatusFields.svelte.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAqDD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ContentTitleField.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Input } from '@happyvertical/smrt-ui/forms';
+
 export interface Props {
   value?: string;
   placeholder?: string;
@@ -14,17 +16,19 @@ let {
 }: Props = $props();
 </script>
 
-<input
-  class="content-title-field"
-  type="text"
-  {placeholder}
-  {required}
-  value={value || ''}
-  oninput={(event) => onChange?.(event.currentTarget.value)}
-/>
+<div class="content-title-field-shell">
+  <Input
+    class="content-title-field"
+    type="text"
+    {placeholder}
+    {required}
+    value={value || ''}
+    oninput={(event) => onChange?.(event.currentTarget.value)}
+  />
+</div>
 
 <style>
-  .content-title-field {
+  .content-title-field-shell :global(.content-title-field) {
     width: 100%;
     box-sizing: border-box;
     border: 0;
@@ -39,15 +43,15 @@ let {
     padding: 0;
   }
 
-  .content-title-field::placeholder {
+  .content-title-field-shell :global(.content-title-field)::placeholder {
     color: color-mix(in srgb, var(--smrt-color-on-surface-variant) 70%, transparent);
   }
 
-  .content-title-field:focus {
+  .content-title-field-shell :global(.content-title-field):focus {
     outline: none;
   }
 
-  .content-title-field:focus-visible {
+  .content-title-field-shell :global(.content-title-field):focus-visible {
     outline: 2px solid var(--smrt-color-primary, #005ac1);
     outline-offset: 0.35rem;
   }

package/dist/svelte/components/ContentTitleField.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAkBD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ContentTitleField.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentTitleField.svelte.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAqBD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}