@reqquest/ui 1.0.0 → 1.1.0

package/dist/components/FieldCardRadio.svelte

@@ -0,0 +1,320 @@
+<script context="module" lang="ts">
+  import type { CardImage, TagItem } from '@txstate-mws/carbon-svelte'
+
+  export interface CardSelectItem {
+    value: any
+    title: string
+    subhead?: string
+    image?: CardImage
+    tags?: TagItem[]
+    disabled?: boolean
+    selectionLabel?: string
+  }
+</script>
+
+<script lang="ts">
+  import { FORM_CONTEXT, FORM_INHERITED_PATH, Field, type FormStore } from '@txstate-mws/svelte-forms'
+  import { Store } from '@txstate-mws/svelte-store'
+  import { createEventDispatcher, getContext } from 'svelte'
+  import { get, isNotBlank, equal } from 'txstate-utils'
+  import { Card, CardGrid, FormInlineNotification } from '@txstate-mws/carbon-svelte'
+
+  const dispatch = createEventDispatcher()
+
+  /**
+   * Path to the form field in the data structure
+   * @type {string}
+   */
+  export let path: string
+
+  /**
+   * Array of card options
+   * @type {CardSelectItem[]}
+   */
+  export let items: CardSelectItem[]
+
+  /**
+   * Set to true to treat the value as a number instead of string
+   * @type {boolean}
+   * @default false
+   */
+  export let number = false
+
+  /**
+   * Set to true to treat the value as a boolean
+   * @type {boolean}
+   * @default false
+   */
+  export let boolean = false
+
+  /**
+   * Set to true to prevent null values
+   * @type {boolean}
+   * @default false
+   */
+  export let notNull = false
+
+  /**
+   * Whether the field group is conditional
+   * @type {boolean}
+   * @default true
+   */
+  export let conditional = true
+
+  /**
+   * Default selected value
+   * @type {any}
+   * @default undefined
+   */
+  export let defaultValue: any = undefined
+
+  /**
+   * Text to display in the fieldset legend
+   * @type {string | undefined}
+   * @default undefined
+   */
+  export let legendText: string | undefined = undefined
+
+  /**
+   * When true, the field is marked as required in the UI. This is only for visual indication
+   * and does not affect validation. Validation is handled by the API that receives the data.
+   * @type {boolean}
+   * @default false
+   */
+  export let required = false
+
+  /**
+   * CSS size for the grid minimum item width (like CardGrid)
+   * @type {string}
+   * @default '20rem'
+   */
+  export let cardSize = '20rem'
+
+  /**
+   * Gap between cards in the grid
+   * @type {string}
+   * @default '16px'
+   */
+  export let gap = '16px'
+
+  /**
+   * Custom function to serialize values for form submission
+   * @type {((value: any) => string) | undefined}
+   * @default undefined
+   */
+  export let serialize: ((value: any) => string) | undefined = undefined
+
+  /**
+   * Custom function to deserialize values from form data
+   * @type {((value: string) => any) | undefined}
+   * @default undefined
+   */
+  export let deserialize: ((value: string) => any) | undefined = undefined
+
+  const store = getContext<FormStore>(FORM_CONTEXT)
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+
+  const itemStore = new Store(items)
+  $: itemStore.set(items)
+
+  let finalSerialize: ((value: any) => string) | undefined
+  let finalDeserialize: ((value: string) => any) | undefined
+
+  function onSelect (item: CardSelectItem) {
+    return () => {
+      if (item.disabled) return
+      const deserialized = item.value
+      void store.setField(finalPath, deserialized)
+      dispatch('update', deserialized)
+    }
+  }
+
+  async function reactToItems (..._: any[]) {
+    if (!finalDeserialize) return
+    if (!items.length) {
+      return await store.setField(finalPath, finalDeserialize(''), { notDirty: true })
+    }
+    const val = get($store.data, finalPath)
+    if (!items.some(o => equal(o.value, val))) {
+      await store.setField(finalPath, notNull && items.some(o => equal(o.value, defaultValue)) ? defaultValue : finalDeserialize(''), { notDirty: true })
+    }
+  }
+  $: reactToItems($itemStore, finalDeserialize).catch(console.error)
+
+  // Keyboard navigation
+  let activeIdx = 0
+  const cardElements: HTMLDivElement[] = []
+
+  function findNextEnabled (startIdx: number, direction: 1 | -1): number {
+    let idx = startIdx
+    let attempts = 0
+    while (attempts < items.length) {
+      idx = (idx + direction + items.length) % items.length
+      if (!items[idx]?.disabled) return idx
+      attempts++
+    }
+    return startIdx // All disabled, stay put
+  }
+
+  function focusCard (idx: number) {
+    if (idx >= 0 && idx < items.length && !items[idx]?.disabled) {
+      activeIdx = idx
+      cardElements[idx]?.focus()
+    }
+  }
+
+  function handleKeyDown (e: KeyboardEvent, idx: number) {
+    switch (e.key) {
+    case 'ArrowRight':
+    case 'ArrowDown':
+      e.preventDefault()
+      focusCard(findNextEnabled(idx, 1))
+      break
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      e.preventDefault()
+      focusCard(findNextEnabled(idx, -1))
+      break
+    case ' ':
+    case 'Enter':
+      e.preventDefault()
+      if (!items[idx]?.disabled) {
+        onSelect(items[idx])()
+      }
+      break
+    }
+  }
+</script>
+<!--
+  @component
+
+  A form field component that displays a grid of selectable cards (single selection).
+  Similar to FieldRadioTile but with richer card-based visuals including images and tags.
+
+  By default this component expects values to be strings. If you wish to use other types of values, you
+  must provide a `serialize` and `deserialize` function. If you set the `number` prop, an appropriate
+  serializer and deserializer will be provided by default.
+
+  If your `items` are not ready on first load (e.g. they're being loaded from an API fetch), you must
+  place this field inside an `{#if}` block until they are ready.
+-->
+<Field {path} {notNull} {conditional} {defaultValue} {boolean} {number} {serialize} {deserialize} bind:finalSerialize bind:finalDeserialize let:messages let:value let:invalid let:onBlur>
+  <div on:focusin={() => dispatch('focus')} on:focusout={() => { onBlur(); dispatch('blur') }}>
+    <fieldset class="card-select-fieldset">
+      {#if legendText}
+        <legend class="bx--label">{legendText}{#if required} <span aria-hidden="true"> *</span>{/if}</legend>
+      {/if}
+      <CardGrid {cardSize} {gap}>
+        {#each $itemStore as item, index (item.value)}
+          {@const selected = finalSerialize ? value === finalSerialize(item.value) : equal(value, item.value)}
+          <div
+            bind:this={cardElements[index]}
+            class="selectable-card"
+            class:selected
+            class:disabled={item.disabled}
+            role="radio"
+            aria-checked={selected}
+            aria-disabled={item.disabled}
+            tabindex={item.disabled ? -1 : (index === activeIdx ? 0 : -1)}
+            on:click={onSelect(item)}
+            on:keydown={e => handleKeyDown(e, index)}
+          >
+            <Card
+              title={item.title}
+              subhead={item.subhead}
+              image={item.image}
+              tags={item.tags ?? []}
+              actions={[]}
+              navigations={[]}
+            >
+              <slot {item} {selected} {index} />
+            </Card>
+            <div class="selection-indicator justify-center">
+              <span class="radio-circle" class:checked={selected}></span>
+              <span class="selection-label">{item.selectionLabel ?? 'Choose this option'}</span>
+            </div>
+          </div>
+        {/each}
+      </CardGrid>
+    </fieldset>
+  </div>
+  {#each messages as message (message)}
+    <FormInlineNotification {message} />
+  {/each}
+</Field>
+
+<style>
+  .card-select-fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .selectable-card {
+    cursor: pointer;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    outline: none;
+    transition: border-color 0.15s ease;
+  }
+
+  .selectable-card:focus-visible {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: 2px;
+  }
+
+  .selectable-card:hover:not(.disabled) {
+    border-color: var(--cds-interactive-03, #0353e9);
+  }
+
+  .selectable-card.selected {
+    border-color: var(--cds-interactive-01, #0f62fe);
+  }
+
+  .selectable-card.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .selection-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background-color: var(--cds-ui-01, #f4f4f4);
+    border-top: 1px solid var(--cds-ui-03, #e0e0e0);
+  }
+
+  .radio-circle {
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 2px solid var(--cds-icon-01, #161616);
+    border-radius: 50%;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .radio-circle.checked::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: var(--cds-interactive-01, #0f62fe);
+    border-radius: 50%;
+  }
+
+  .selection-label {
+    font-size: 0.875rem;
+    color: var(--cds-text-01, #161616);
+  }
+
+  /* Remove Card's default border when inside selectable-card */
+  .selectable-card :global(.card) {
+    border: none;
+    box-shadow: none;
+  }
+</style>

package/dist/components/IntroPanel.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { TagSet } from '@txstate-mws/carbon-svelte'
+  import type { TagItem } from '@txstate-mws/carbon-svelte'
+
+  export let title = ''
+  export let subtitle = ''
+  export let tags: TagItem[] | undefined = undefined
+</script>
+
+<section class="bg-[var(--cds-ui-01)] py-4 px-[16px] text-2xl mb-2">
+  <div class="repel">
+    <div class="max-w-lg flex flex-col flex-wrap justify-start">
+      {#if title}
+        <div class="title-block [ flex gap-[12px] ] ">
+          <h2 class="text-[1.25rem] text-[var(--cds-text-01,#1A1A1A)] font-normal leading-7">
+            {title}
+          </h2>
+          {#if tags}
+            <TagSet tags={tags} />
+          {/if}
+        </div>
+        {#if subtitle}
+          <p class="text-sm text-[var(--cds-text-02)] leading-[18px] tracking-[0.16px] pt-2">
+            {subtitle}
+          </p>
+        {/if}
+      {/if}
+      <!-- Optional content slot below title/subtitle -->
+      {#if $$slots.default}
+        <div class="mt-2">
+          <slot />
+        </div>
+      {/if}
+    </div>
+    {#if $$slots['block-end']}
+    <div class="block-end-slot">
+      <slot name="block-end" />
+    </div>
+    {/if}
+  </div>
+</section>

package/dist/components/PeriodPanel.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { ActionSet, Panel, TagSet } from '@txstate-mws/carbon-svelte'
+  import Tab from "carbon-components-svelte/src/Tabs/Tab.svelte";
+import TabContent from "carbon-components-svelte/src/Tabs/TabContent.svelte";
+import Tabs from "carbon-components-svelte/src/Tabs/Tabs.svelte";
+import Tag from "carbon-components-svelte/src/Tag/Tag.svelte";
+  import SettingsEdit from "carbon-icons-svelte/lib/SettingsEdit.svelte";
+import View from "carbon-icons-svelte/lib/View.svelte";
+  import { invalidate } from '$app/navigation'
+  import { api } from '../api'
+  import { page } from '$app/stores'
+  import type { UIRegistry } from '../registry'
+    import { groupby, pluralize } from 'txstate-utils'
+
+  export let program: any
+  export let sharedProgramRequirements: any
+  export let openModal: any
+  export let onClick: any
+  export let uiRegistry: UIRegistry
+
+  const disablePeriodProgram = (requirementKey: string) => async () => {
+    const res = await api.disablePeriodProgramRequirements($page.params.id!, requirementKey, true)
+    await invalidate('api:getPeriodConfigurations')
+  }
+
+  const enablePeriodProgram = (requirementKey: string) => async () => {
+    const res = await api.disablePeriodProgramRequirements($page.params.id!, requirementKey, false)
+    await invalidate('api:getPeriodConfigurations')
+  }
+
+  $: enabledRequirements = Object.entries(groupby(program.requirements.filter(r => r.enabled), 'type'))
+  $: disabledRequirements = program.requirements.filter(r => !r.enabled)
+
+</script>
+  <Panel title={program.title} expandable expanded>
+    {#each enabledRequirements as requrementEntries}
+    {@const type = requrementEntries[0]}
+    {@const requirements = requrementEntries[1]}
+    <Panel title='' expandable expanded>
+      <div style="display: content" slot="headerLeft">
+        <TagSet tags={[{ label: `Applicant: ${type}`, type: 'purple' }]} />
+      </div>
+      <div style="display: content" slot="headerRight">
+        <TagSet tags={[{ label: `${requirements.length} ${pluralize('requirement', requirements.length)}`, type: 'yellow' }]} />
+      </div>
+      <Tabs autoWidth>
+        <Tab label={`Enabled Requirements (${enabledRequirements.length})`} />
+        <Tab label={`Disabled Requirements (${disabledRequirements.length})`} />
+        <svelte:fragment slot='content'>
+          <TabContent>
+            {#each requirements as requirement (requirement.key)}
+              {@const reqDef = uiRegistry.getRequirement(requirement.key)}
+              <Panel title={requirement.title} expandable noPrimaryAction actions={[{ label: 'Configure requirement', onClick: onClick('requirement', requirement), disabled: reqDef?.configureComponent == null || !requirement.configuration.actions.update }, { label: 'Disable Requirement', onClick: disablePeriodProgram(requirement.key) }]}>
+                <div style="display: content" slot="headerLeft">
+                  <TagSet tags={[{ label: 'Requirement', type: 'yellow' }]} />
+                </div>
+                <!-- <Button on:click={onClick('requirement', requirement)} type="primary" size="small" icon={SettingsEdit} iconDescription="Edit Configuration" disabled={reqDef.configureComponent == null || !requirement.configuration.actions.update} />  -->
+              <div style="display: content" slot="headerRight">
+                {@const tags = sharedProgramRequirements[requirement.key]?.length > 1 ? [{ label: 'Shared', onClick: openModal(requirement.key) }] : []}
+                <TagSet tags={tags} />
+              </div>
+
+              <ul class="prompts">
+                  {#each requirement.prompts as prompt (prompt.key)}
+                  {@const promptDef = uiRegistry.getPrompt(prompt.key)}
+                  <li class="prompt justify-between">
+                    <span>
+                      <Tag type='green'>Prompt</Tag>{prompt.title}
+                    </span>
+                    <ActionSet
+                      actions={[
+                        // { label: 'View', icon: View },
+                        { label: 'settings', icon: SettingsEdit, disabled: promptDef?.configureComponent == null || !prompt.configuration.actions.update, onClick: onClick('prompt', prompt) }
+                      ]}
+                    />
+                  </li>
+                  {/each}
+                </ul>
+              </Panel>
+            {/each}
+          </TabContent>
+          <TabContent>
+            {#each disabledRequirements as requirement (requirement.key)}
+              <Panel title={requirement.title} actions={[{ label: 'Enable Requirement', onClick: enablePeriodProgram(requirement.key) }]}>
+                Requirement: {requirement.title}
+                <ul class="prompts">
+                  {#each requirement.prompts as prompt (prompt.key)}
+                    <li class="prompt">
+                      Prompt: {prompt.title}
+                    </li>
+                  {/each}
+                </ul>
+              </Panel>
+            {/each}
+          </TabContent>
+        </svelte:fragment>
+      </Tabs>
+    </Panel>
+    {/each}
+  </Panel>

package/dist/components/QuestionnairePrompt.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import Button from "carbon-components-svelte/src/Button/Button.svelte";
+    import Launch from 'carbon-icons-svelte/lib/Launch.svelte'
+
+    /**
+     * Array of external links to show above the form.
+     * There can be up to 3 external links to help applicants if there are things they need to do externally to the app request.
+     * @type {{ url: string, label: string }[]}
+     */
+    export let externalLinks: { url: string, label: string }[] = []
+
+    /**
+     * If true, the form will take the full width of its container. If false, it will be constrained to max-w-screen-md.
+     * @type {boolean}
+     */
+    export let fullWidth = false
+
+    /**
+     * Alignment of the form container. 'center' will center it and 'left' will align it to the left.
+     * @type {'left' | 'center'}
+     */
+    export let align: 'left' | 'center' = 'center'
+</script>
+{#if externalLinks.length > 0}
+    <div class="prompt-intro-links flow max-w-screen-md mx-auto px-6">
+        <ul class="flex gap-4 flex-wrap mb-4 justify-center">
+        {#each externalLinks.slice(0, 3) as link (link.url)}
+            <li><Button kind="ghost" icon={Launch} href={link.url}>{link.label}</Button></li>
+        {/each}
+        </ul>
+    </div>
+{/if}
+
+<div class="px-6 prompt-form flow" class:max-w-screen-md={!fullWidth} class:w-full={fullWidth} class:mx-auto={align === 'center'}>
+    <slot />
+</div>

package/dist/components/RenderDisplayComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import InlineNotification from "carbon-components-svelte/src/Notification/InlineNotification.svelte";
+  import type { PromptDefinition } from '../registry'
+
+  export let def: PromptDefinition | undefined
+  export let appRequestId: string
+  export let appData: Record<string, any>
+  export let prompt: { key: string, answered: boolean, moot: boolean | null, invalidated: boolean | null, invalidatedReason: string | null }
+  export let configData: Record<string, any>
+  export let gatheredConfigData: Record<string, any>
+  export let showMoot = false
+</script>
+
+<svelte:boundary onerror={e => console.error(e)}>
+  {#if showMoot && prompt.moot}
+    <em>Already disqualified.</em>
+  {:else if !prompt.answered}
+    <em>Incomplete</em>
+  {:else if !def?.displayComponent}
+    <em>No display component registered.</em>
+    <pre>{JSON.stringify(appData[prompt.key] ?? {}, null, 2)}</pre>
+  {:else}
+    <svelte:component this={def.displayComponent} {appRequestId} data={appData[prompt.key]} appRequestData={appData} {configData} {gatheredConfigData} />
+  {/if}
+  {#if prompt.invalidated && (showMoot || !prompt.moot)}
+    <InlineNotification kind="warning" title="Correction Needed" subtitle={prompt.invalidatedReason ?? undefined} class="mt-2" lowContrast hideCloseButton />
+  {/if}
+  {#snippet failed()}
+    <div class="error">
+      <div>Error Loading Component</div>
+      <p>There was an error loading the display component for this prompt.</p>
+    </div>
+  {/snippet}
+</svelte:boundary>
+
+<style>
+  .error div { font-weight: bold; }
+</style>

package/dist/components/ReviewerList.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { base } from "$app/paths"
+  import { ColumnList, FieldDate, FieldMultiselect, Pagination, type ActionItem } from "@txstate-mws/carbon-svelte"
+  import { DateTime } from "luxon"
+  import View from 'carbon-icons-svelte/lib/View.svelte'
+  import DocExport from 'carbon-icons-svelte/lib/DocumentExport.svelte'
+    import { downloadCsv } from "../csv"
+    import type { AppRequest } from "../typed-client"
+    import { pluralize } from "txstate-utils"
+
+  export let data: AppRequest[]
+  export let title: string
+  export let subtitle: string
+
+  const selectedActions = (rows: AppRequest[]): ActionItem[] => [
+    {
+      label: `Download ${rows.length} ${pluralize('application', rows.length)}`,
+      // icon: TrashCan,
+      onClick: () => { console.log(rows); downloadCsv(formatCSVData(rows)) }
+    }
+  ]
+
+  function formatCSVData (d: AppRequest[]) {
+    return d.map(d => ({
+      Id: d.id,
+      Period: d.period.name,
+      'TXST ID': d.applicant.otherInfo,
+      Name: d.applicant.fullname,
+      'Date Submitted': DateTime.fromISO(d.createdAt).toFormat('f').replace(',', ''),
+      Benefit: `"${d.applications.map(a => a.title).join(', ')}"`,
+      'Last Submitted': DateTime.fromISO(d.updatedAt).toFormat('f').replace(',', '')
+    }))
+  }
+</script>
+
+<div class="flow [ p-4 bg-gray-100 ]">
+  <h2 class="[ text-lg ]">{title}</h2>
+  <p class="[ text-gray-600 ]">{subtitle}</p>
+</div>
+
+<ColumnList
+  searchable
+  filterTitle='Request Filters'
+  {selectedActions}
+  listActions={[
+      { label: 'Download', icon: DocExport, onClick: () => { console.log(data); downloadCsv(formatCSVData(data)) } }
+  ]}
+  columns={[
+    { id: 'request', label: 'Request #', tags: (row) => [{ label: String(row.id), }] },
+    { id: 'period', label: 'Period', render: r => r.period.name },
+    { id: 'aNumber', label: 'TXST ID' },
+    { id: 'name', label: 'Name', get: 'applicant.fullname' },
+    { id: 'dateSubmitted', label: 'Date Submitted', render: r => DateTime.fromISO(r.createdAt).toFormat('f') },
+    { id: 'benefit', label: 'Benefit', render: r => r.applications.map(a => a.title).join(', ') },
+    { id: 'lastUpdated', label: 'Last Updated', render: r => DateTime.fromISO(r.updatedAt).toFormat('f') },
+  ]}
+  rows={data}
+  title="App Requests"
+
+  actions={r => [
+    {
+      label: 'View',
+      icon: View,
+     // href: `${base}/requests/${r.id}/apply`
+     href: `${base}/requests/${r.id}/approve`
+    }
+  ]}
+>
+  <svelte:fragment slot="filters">
+    <FieldMultiselect
+      path="period"
+      labelText="Period"
+      items={[]}
+      placeholder="Choose one or more"
+    />
+    <FieldDate
+    path='dateSubmitted'
+    label='Date Submitted'
+    />
+    <FieldMultiselect
+      path="test"
+      labelText="Period"
+      items={[]}
+      placeholder="Choose one or more"
+    />
+  </svelte:fragment>
+</ColumnList>
+
+<Pagination
+  totalItems={data.length}
+  pageSize={25}
+  chooseSize
+/>

package/dist/components/StatusMessageList.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { BadgeNumber } from '@txstate-mws/carbon-svelte'
+  import Accordion from "carbon-components-svelte/src/Accordion/Accordion.svelte";
+import AccordionItem from "carbon-components-svelte/src/Accordion/AccordionItem.svelte";
+
+  export let items: { id: string, message: string }[] = []
+  export let variant: 'warning' | 'error' = 'error'
+  export let accordionTitle = 'Multiple items'
+
+  $: badgeStyle = variant === 'warning'
+    ? '--badge-bg: var(--yellow-01, #F3D690); --badge-text: #6F510C'
+    : '--badge-bg: #FBE9EA; --badge-text: #a11c25'
+</script>
+
+{#if items.length === 1}
+  <div class="flex items-center">
+    <BadgeNumber value={1} class="mt-2 mr-2" style={badgeStyle} />
+    <p class="mt-2 mb-0 text-sm">{items[0].message}</p>
+  </div>
+{:else if items.length > 1}
+  <div class="flex">
+    <BadgeNumber value={items.length} class="mt-5 mr-2" style={badgeStyle} />
+    <div class="mt-2 w-full">
+      <Accordion align="start">
+        <AccordionItem title={accordionTitle}>
+          <ol class="list-decimal">
+            {#each items as item (item.id)}
+              <li>{item.message}</li>
+            {/each}
+          </ol>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  </div>
+{/if}

package/dist/components/WarningIconYellow.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import WarningAltFilled from "carbon-icons-svelte/lib/WarningAltFilled.svelte";
+  import type { ComponentProps } from 'svelte'
+
+  interface $$Props extends ComponentProps<typeof WarningAltFilled> {}
+</script>
+
+<div>
+  <WarningAltFilled {...$$restProps} />
+</div>
+
+<style>
+  div :global(svg) {
+    fill: var(--cds-support-03, rgba(239, 200, 108, 1)) !important;
+  }
+
+  div :global([data-icon-path="inner-path"]) {
+    fill: black;
+  }
+</style>