@qld-gov-au/qgds-bootstrap5 2.0.1 → 2.0.2

package/src/components/bs5/icons/stories/storyFlexContainer.html

@@ -0,0 +1,18 @@
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-xxl qld-icon-alert-information"></span>Icon XXL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-xl qld-icon-alert-information"></span>Icon XL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-lg qld-icon-alert-information"></span>Icon LG
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-md qld-icon-alert-information"></span>Icon XXL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-sm qld-icon-alert-information"></span>Icon XXL
+</div>
+<div class="d-flex align-items-center">
+  <span class="qld-icon qld-icon-xs qld-icon-alert-information"></span>Icon XXL
+</div>

package/src/components/bs5/icons/stories/storyInlineWithText.html

@@ -0,0 +1,18 @@
+<p>
+  <span
+    class="qld-icon is-inline qld-icon-xxl qld-icon-alert-information"
+  ></span
+  >Lorem ipsum dolor sit amet,
+  <span class="qld-icon is-inline qld-icon-xl qld-icon-alert-information"></span
+  >consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua.
+  <span class="qld-icon is-inline qld-icon-lg qld-icon-alert-information"></span
+  >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+  aliquip ex ea commodo consequat.
+  <span class="qld-icon is-inline qld-icon-md qld-icon-alert-information"></span
+  >Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+  eu fugiat nulla pariatur.
+  <span class="qld-icon is-inline qld-icon-xs qld-icon-alert-information"></span
+  >Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum.
+</p>

package/src/components/bs5/icons/stories/storySizes.html

@@ -0,0 +1,89 @@
+<div class="row align-items-end text-start">
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xxl qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre><strong class="mt-2">XXL:</strong> 64x64</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xl qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XL:</strong> 48x48</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-lg qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>LG:</strong> 32x32</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-md qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>MD:</strong> 24x24</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-sm qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>SM:</strong> 20x20</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xs qld-icon-design"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XS:</strong> 16x16</pre>
+  </div>
+</div>
+
+<div class="row align-items-end text-start">
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xxl qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XXL:</strong> 64x64</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xl qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XL:</strong> 48x48</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-lg qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>LG:</strong> 32x32</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-md qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>MD:</strong> 24x24</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-sm qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>SM:</strong> 20x20</pre>
+  </div>
+  <div class="col d-flex flex-column flex-grow-0 align-items-start">
+    <span
+      class="qld-icon qld-icon-xs qld-icon-alert-cancel"
+      aria-hidden="true"
+    ></span>
+    <pre class="mt-2"><strong>XS:</strong> 16x16</pre>
+  </div>
+</div>

package/src/components/bs5/image/Image.mdx

@@ -5,10 +5,7 @@ import * as ImageStories from "./image.stories";
 
 # Image
 
-<Canvas>
-  {/* Explicitly reference a specific story to avoid ambiguity */}
-  <Story of={ImageStories.FixedRatio} />
-</Canvas>
+<Canvas of={ImageStories.DefaultImage} />
 
 ## Design resources
 

package/src/components/bs5/inpageAlert/InpageAlert.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./inpageAlert.data.json";
 
 # In-page alert
 
-<Canvas>
-  <Story of={AlertStories.Success} />
-</Canvas>
+<Canvas of={AlertStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/inpagenav/Inpagenav.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as InpagenavStories from "./inpagenav.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as InpagenavStories from "./inpagenav.stories";
 
 <Meta of={InpagenavStories} />
 
 # Pagination
-<Canvas>
-  <Story of={InpagenavStories.Default} />
-</Canvas>
+
+<Canvas of={InpagenavStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/link/link.mdx

@@ -5,9 +5,7 @@ import * as linkStories from "./link.stories";
 
 # Icon Link
 
-<Canvas>
-  <Story of={linkStories.Default} />
-</Canvas>
+<Canvas of={linkStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/link/link.scss

@@ -2,20 +2,12 @@
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
 
-  --#{$prefix}icon-background-color: var(--#{$prefix}light-action-secondary);
-  --#{$prefix}icon-background-color-hover: var(
-    --#{$prefix}light-action-secondary-hover
-  );
   --#{$prefix}link-color: var(--#{$prefix}light-link);
   --#{$prefix}link-text-decoration-color: var(--#{$prefix}light-link);
   --#{$prefix}link-gap: 0.5rem;
 
   .dark &,
   .dark-alt & {
-    --#{$prefix}icon-background-color: var(--#{$prefix}dark-action-secondary);
-    --#{$prefix}icon-background-color-hover: var(
-      --#{$prefix}dark-action-secondary-hover
-    );
     --#{$prefix}link-color: var(--#{$prefix}dark-link);
     --#{$prefix}link-text-decoration-color: var(--#{$prefix}dark-link);
     &:visited {
@@ -38,13 +30,12 @@
   width: fit-content;
 
   &:hover {
+    --#{$prefix}icon-color: var(--#{$prefix}action-icon-hover-color);
+
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);
     text-decoration-color: var(
       --#{$prefix}color-default-color-light-underline-default
     );
-    .qld-icon {
-      background-color: var(--#{$prefix}icon-background-color-hover);
-    }
   }
 
   &:visited {
@@ -61,10 +52,6 @@
     outline-offset: 2px;
     border-radius: 4px;
   }
-
-  .qld-icon {
-    background-color: var(--#{$prefix}icon-background-color);
-  }
 }
 
 .link-list {

package/src/components/bs5/linkColumns/linkColumns.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./linkColumns.data.json";
 
 # LinkColumns
 
-<Canvas>
-  <Story of={linkColumnsStories.Default} />
-</Canvas>
+<Canvas of={linkColumnsStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/logo/Logo.mdx

@@ -5,6 +5,4 @@ import stories from "./logo.stories";
 
 # Logo
 
-<Canvas>
-  <Story of={stories.Default} />
-</Canvas>
+<Canvas of={stories.Default} />

package/src/components/bs5/pageLayout/ThemeShowcase.stories.js

@@ -0,0 +1,249 @@
+export default {
+  title: "5. Templates/Theme Showcase",
+  render: (args) => {
+    return args.content;
+  },
+  argTypes: {
+    themeClass: {
+      control: { type: 'select' },
+      options: ['', 'default', 'light', 'alt', 'dark', 'dark-alt'],
+      description: 'Theme class to apply to the content area',
+    },
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story: 'This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.',
+      },
+    },
+  },
+};
+
+/**
+ * Default Theme
+ * The default theme uses the base color scheme without additional background styling
+ */
+export const DefaultTheme = {
+  args: {
+    content: `
+      <div class="default p-4 mb-4 border">
+        <h2>Default Theme</h2>
+        <p>This demonstrates the default theme palette. It provides a clean, neutral appearance suitable for most content.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Background Utilities</h3>
+        <div class="row g-3">
+          <div class="col-md-4">
+            <div class="bg-default p-3 rounded">
+              <strong>.bg-default</strong><br>
+              Background using default theme color
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="bg-light p-3 rounded">
+              <strong>.bg-light</strong><br>
+              Background using light theme color
+            </div>
+          </div>
+          <div class="col-md-4">
+            <div class="bg-light-alt p-3 rounded">
+              <strong>.bg-light-alt</strong><br>
+              Background using light alt color
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Light Theme
+ * The light theme provides a bright, clean appearance
+ */
+export const LightTheme = {
+  args: {
+    content: `
+      <div class="light p-4 mb-4 border">
+        <h2>Light Theme</h2>
+        <p>This demonstrates the light theme palette. It provides enhanced readability with a light background.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Theme Features</h3>
+        <ul>
+          <li>Automatic color and background-color application</li>
+          <li>Optimized contrast ratios</li>
+          <li>Consistent styling across components</li>
+        </ul>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Alt Theme
+ * The alt theme provides an alternative light styling
+ */
+export const AltTheme = {
+  args: {
+    content: `
+      <div class="alt p-4 mb-4 border">
+        <h2>Alt Theme</h2>
+        <p>This demonstrates the alt theme palette. It provides a subtle alternative to the standard light theme.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <blockquote class="blockquote mt-4">
+          <p>"The alt theme provides visual variety while maintaining accessibility standards."</p>
+          <footer class="blockquote-footer">QLD Design System</footer>
+        </blockquote>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Dark Theme
+ * The dark theme provides a bold, high-contrast appearance
+ */
+export const DarkTheme = {
+  args: {
+    content: `
+      <div class="dark p-4 mb-4 border">
+        <h2>Dark Theme</h2>
+        <p>This demonstrates the dark theme palette. It provides excellent contrast and a modern appearance.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <div class="alert alert-info mt-4">
+          <h4 class="alert-heading">Dark Theme Benefits</h4>
+          <p class="mb-0">Reduces eye strain in low-light conditions and provides a sophisticated appearance.</p>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Dark Alt Theme
+ * The dark alt theme provides an alternative dark styling
+ */
+export const DarkAltTheme = {
+  args: {
+    content: `
+      <div class="dark-alt p-4 mb-4 border">
+        <h2>Dark Alt Theme</h2>
+        <p>This demonstrates the dark alt theme palette. It provides a variation of the dark theme with different background styling.</p>
+        <a href="#" class="btn btn-primary me-2">Primary Button</a>
+        <a href="#" class="btn btn-secondary">Secondary Button</a>
+        
+        <h3 class="mt-4">Dark Utility Examples</h3>
+        <div class="row g-3">
+          <div class="col-md-6">
+            <div class="bg-dark p-3 rounded text-white">
+              <strong>.bg-dark</strong><br>
+              Dark background utility
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="bg-dark-alt p-3 rounded text-white">
+              <strong>.bg-dark-alt</strong><br>
+              Dark alt background utility
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};
+
+/**
+ * Theme Comparison
+ * Shows all themes in a single view for comparison
+ */
+export const ThemeComparison = {
+  args: {
+    content: `
+      <div class="mb-4">
+        <h2>Theme Palette Comparison</h2>
+        <p>Compare all available theme classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
+      </div>
+      
+      <div class="row g-4">
+        <div class="col-lg-6">
+          <div class="default p-3 border">
+            <h3>Default Theme</h3>
+            <p>Base theme with neutral styling.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="light p-3 border">
+            <h3>Light Theme</h3>
+            <p>Clean, bright appearance.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="alt p-3 border">
+            <h3>Alt Theme</h3>
+            <p>Alternative light styling.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-lg-6">
+          <div class="dark p-3 border">
+            <h3>Dark Theme</h3>
+            <p>High contrast, modern look.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+        
+        <div class="col-12">
+          <div class="dark-alt p-3 border">
+            <h3>Dark Alt Theme</h3>
+            <p>Alternative dark styling with different background treatment.</p>
+            <a href="#" class="btn btn-sm btn-primary">Button</a>
+          </div>
+        </div>
+      </div>
+      
+      <div class="mt-5">
+        <h3>Background Utility Classes</h3>
+        <p>These utilities can be used independently of theme classes for specific background styling:</p>
+        <div class="row g-3">
+          <div class="col-md-3">
+            <div class="bg-default p-2 text-center rounded">.bg-default</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light p-2 text-center rounded">.bg-light</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-alt p-2 text-center rounded">.bg-light-alt</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-dark p-2 text-center rounded text-white">.bg-dark</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-dark-alt p-2 text-center rounded text-white">.bg-dark-alt</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-default-shade p-2 text-center rounded">.bg-default-shade</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-shade p-2 text-center rounded">.bg-light-shade</div>
+          </div>
+          <div class="col-md-3">
+            <div class="bg-light-alt-shade p-2 text-center rounded">.bg-light-alt-shade</div>
+          </div>
+        </div>
+      </div>
+    `,
+  },
+};

package/src/components/bs5/pagination/Pagination.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as PaginationStories from "./pagination.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as PaginationStories from "./pagination.stories";
 
 <Meta of={PaginationStories} />
 
 # Pagination
-<Canvas>
-  <Story of={PaginationStories.Default} />
-</Canvas>
+
+<Canvas of={PaginationStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx

@@ -6,9 +6,7 @@ import defaultdata from "./promotionalPanel.data.json";
 
 # Promotional Panel
 
-<Canvas>
-  <Story of={promotionalPanelStories.Default} />
-</Canvas>
+<Canvas of={promotionalPanelStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/quickexit/quickexit.hbs

@@ -5,7 +5,7 @@
     <div class="qld-quick-exit-inner container-fluid {{#if hasIconInfo}} has-icon-info{{/if}}{{#if hasTooltip}} has-tooltip{{/if}}">
       <div class="qg-quick-exit__tips">
         {{#if hasIconInfo}}
-          <span class="qld-icon icon-info"></span>
+          <span class="icon-info"></span>
         {{/if}}
         <p class="qld-quick-exit-tip-title">{{{exitMessage}}}</p>
         <a href="{{browseSafelyOnlineURL}}" class="qld-quick-exit-tip-link">

package/src/components/bs5/quickexit/quickexit.scss

@@ -1,3 +1,4 @@
+@use "../../../css/mixins" as m;
 // ----------------------------------------------------------------------------------------------------------------------
 // Header - palettes and second hand variables:
 @import "./colours";
@@ -58,8 +59,10 @@
       position: absolute;
     }
     .qld-tooltip-wrapper:after {
-      border-block-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
-      border-inline-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-block-end: var(--#{$prefix}tooltip-arrow) solid
+        var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-start: var(--#{$prefix}tooltip-arrow) solid
+        var(--#{$prefix}quick-exit-tooltip-bg);
       border-inline-end: var(--#{$prefix}tooltip-arrow) solid transparent;
       border-block-start: var(--#{$prefix}tooltip-arrow) solid transparent;
       inset-block-end: calc(var(--#{$prefix}tooltip-arrow) * -1);
@@ -75,7 +78,8 @@
       &:focus-within {
         outline-offset: var(--#{$prefix}quick-exit-text-outline-offset);
         box-shadow: none;
-        outline: var(--#{$prefix}quick-exit-text-outline) solid var(--#{$prefix}quick-exit-tooltip-btn-focus);
+        outline: var(--#{$prefix}quick-exit-text-outline) solid
+          var(--#{$prefix}quick-exit-tooltip-btn-focus);
         border-radius: 0;
       }
     }
@@ -84,9 +88,13 @@
       font-weight: 500;
       text-decoration-line: underline;
       text-decoration-style: solid;
-      text-underline-offset: calc(var(--#{$prefix}quick-exit-text-outline-offset) * 2);
+      text-underline-offset: calc(
+        var(--#{$prefix}quick-exit-text-outline-offset) * 2
+      );
       &:hover {
-        text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
       }
     }
     .qld-tooltip-prompt {
@@ -117,6 +125,7 @@
       border-color: var(--#{$prefix}quick-exit-button-bg-colour);
       background-color: var(--#{$prefix}quick-exit-button-bg-colour);
       color: var(--#{$prefix}quick-exit-button-text-colour);
+      display: inline-block;
       &:hover {
         border-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
         background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
@@ -129,7 +138,9 @@
       }
       &:hover,
       &:focus {
-        text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
       }
     }
     .qg-quick-exit__tips {
@@ -143,9 +154,9 @@
   .icon-info {
     position: absolute;
     inset-inline-start: 0;
-    background-repeat: no-repeat;
     margin-block-start: 4px;
-    background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+    @include m.make-icon("alert-information");
+    --#{$prefix}icon-color: #{$qld-dark-action-secondary};
   }
   @include media-breakpoint-up(lg) {
     -webkit-box-pack: justify;
@@ -188,8 +199,10 @@
       .qld-tooltip-wrapper:after {
         border-block-end: var(--#{$prefix}tooltip-arrow) solid transparent;
         border-inline-start: var(--#{$prefix}tooltip-arrow) solid transparent;
-        border-inline-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
-        border-block-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        border-inline-end: var(--#{$prefix}tooltip-arrow) solid
+          var(--#{$prefix}quick-exit-tooltip-bg);
+        border-block-start: var(--#{$prefix}tooltip-arrow) solid
+          var(--#{$prefix}quick-exit-tooltip-bg);
         inset-block-end: auto;
         inset-inline-start: 25px;
         inset-block-start: calc(var(--#{$prefix}tooltip-arrow) * -1);

package/src/components/bs5/searchInput/SearchInput.mdx

@@ -1,12 +1,12 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SearchInputStories from "./searchInput.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as SearchInputStories from "./searchInput.stories";
 
 <Meta of={SearchInputStories} />
 
 # Search Input
-<Canvas>
-  <Story of={SearchInputStories.Default} />
-</Canvas>
+
+<Canvas of={SearchInputStories.Default} />
 
 ## Design resources
+
 - [Component library (Figma)]https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)./searchInput.stories

package/src/components/bs5/sidenav/Sidenav.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SidenavStories from "./sidenav.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as SidenavStories from "./sidenav.stories";
 
 <Meta of={SidenavStories} />
 
 # Side navigation
-<Canvas>
-  <Story of={SidenavStories.Default} />
-</Canvas>
+
+<Canvas of={SidenavStories.Default} />
 
 ## Design resources