@digigov/ui 2.0.0-264e5fff → 2.0.0-290ada95

package/src/app/Footer/doc.mdx

@@ -7,23 +7,23 @@ title: Footer
 
 ## How to use
 
-<code src="@digigov/ui/app/Footer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Footer/__stories__/Default.tsx" />
 
 ### Footer with logos
 
-<code src="@digigov/ui/app/Footer/__stories__/FooterWithLogo.tsx" />
+<code src="@digigov/ui/src/app/Footer/__stories__/FooterWithLogo.tsx" />
 
 ### Footer with secondary navigation
 
-<code src="@digigov/ui/app/Footer/__stories__/FooterWithSecondaryNavigation.tsx" />
+<code src="@digigov/ui/src/app/Footer/__stories__/FooterWithSecondaryNavigation.tsx" />
 
 ### Footer with links to meta information
 
-<code src="@digigov/ui/app/Footer/__stories__/FooterWithLink.tsx" />
+<code src="@digigov/ui/src/app/Footer/__stories__/FooterWithLink.tsx" />
 
 ### All inclusive footer
 
-<code src="@digigov/ui/app/Footer/__stories__/FooterAllInclusive.tsx" />
+<code src="@digigov/ui/src/app/Footer/__stories__/FooterAllInclusive.tsx" />
 
 ## API
 

package/src/app/Header/doc.mdx

@@ -7,19 +7,19 @@ title: Header
 
 ## How to use
 
-<code src="@digigov/ui/app/Header/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Header/__stories__/Default.tsx" />
 
 ### With service name
 
-<code src="@digigov/ui/app/Header/__stories__/WithServiceName.tsx" />
+<code src="@digigov/ui/src/app/Header/__stories__/WithServiceName.tsx" />
 
 ### With service logo and service name
 
-<code src="@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo.tsx" />
+<code src="@digigov/ui/src/app/Header/__stories__/WithServiceNameAndLogo.tsx" />
 
 ### With responsive navigation
 
-<code src="@digigov/ui/app/Header/__stories__/WithNavigation.tsx" />
+<code src="@digigov/ui/src/app/Header/__stories__/WithNavigation.tsx" />
 
 ## API
 

package/src/app/Loader/doc.mdx

@@ -10,21 +10,21 @@ Loading spinner is used for notifying users that their action is being processed
 ## How to use
 
 
-<code src="@digigov/ui/app/Loader/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Loader/__stories__/Default.tsx" />
 
 
 ### Secondary color
 
-<code src="@digigov/ui/app/Loader/__stories__/Secondary.tsx" />
+<code src="@digigov/ui/src/app/Loader/__stories__/Secondary.tsx" />
 
 
 ### Different sizes
 
-<code src="@digigov/ui/app/Loader/__stories__/Sizes.tsx" />
+<code src="@digigov/ui/src/app/Loader/__stories__/Sizes.tsx" />
 
 ### Full page loader
 
-<code src="@digigov/ui/app/Loader/__stories__/FullPageLoader.tsx" />
+<code src="@digigov/ui/src/app/Loader/__stories__/FullPageLoader.tsx" />
 
 
 ## API

package/src/app/Masthead/doc.mdx

@@ -9,19 +9,19 @@ The Masthead component is a set of features or layout that marks the page and de
 
 ## How to use
 
-<code src="@digigov/ui/app/Masthead/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Masthead/__stories__/Default.tsx" />
 
 ### With secondary color
 
-<code src="@digigov/ui/app/Masthead/__stories__/Secondary.tsx" />
+<code src="@digigov/ui/src/app/Masthead/__stories__/Secondary.tsx" />
 
 ### With logo
 
-<code src="@digigov/ui/app/Masthead/__stories__/WithLogo.tsx" />
+<code src="@digigov/ui/src/app/Masthead/__stories__/WithLogo.tsx" />
 
 ### With elements
 
-<code src="@digigov/ui/app/Masthead/__stories__/WithElements.tsx" />
+<code src="@digigov/ui/src/app/Masthead/__stories__/WithElements.tsx" />
 
 ## API
 

package/src/app/Modal/doc.mdx

@@ -11,16 +11,16 @@ Modal is a dialog box/popup window which contains information or an action and i
 
 ### As a Dialog
 
-<code src="@digigov/ui/app/Modal/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Modal/__stories__/Default.tsx" />
 
 
 ### As an Alert Dialog
 
-<code src="@digigov/ui/app/Modal/__stories__/AlertDialog.tsx" />
+<code src="@digigov/ui/src/app/Modal/__stories__/AlertDialog.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/app/Modal/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/app/Modal/__stories__/Dense.tsx" />
 
 ## Accessibility
 

package/src/app/NotFound/doc.mdx

@@ -7,7 +7,7 @@ title: NotFound
 
 ## How to use
 
-<code src="@digigov/ui/app/NotFound/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/NotFound/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/Panel/doc.mdx

@@ -10,7 +10,7 @@ Panels are similar to cards, but they don't include media.
 
 ## How to use
 
-<code src="@digigov/ui/app/Panel/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Panel/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/PhaseBannerHeader/doc.mdx

@@ -9,7 +9,7 @@ Phase banner lets users know the service is still being worked on, and encourage
 
 ## How to use
 
-<code src="@digigov/ui/app/PhaseBannerHeader/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/PhaseBannerHeader/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/QrCodeViewer/doc.mdx

@@ -9,11 +9,11 @@ QR codes are frequently used to track information and allow the users to access
 
 ## How to use
 
-<code src="@digigov/ui/app/QrCodeViewer/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/QrCodeViewer/__stories__/Default.tsx" />
 
 ### Custom QrCodeViewer
 
-<code src="@digigov/ui/app/QrCodeViewer/__stories__/Custom.tsx" />
+<code src="@digigov/ui/src/app/QrCodeViewer/__stories__/Custom.tsx" />
 
 ## API
 

package/src/app/Skeleton/doc.mdx

@@ -9,31 +9,31 @@ Use Skeleton component while a page is loading.
 
 ## How to use
 
-<code src="@digigov/ui/app/Skeleton/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/Default.tsx" />
 
 ### Button
 
-<code src="@digigov/ui/app/Skeleton/__stories__/Button.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/Button.tsx" />
 
 ### Circular
 
-<code src="@digigov/ui/app/Skeleton/__stories__/Circular.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/Circular.tsx" />
 
 ### Rectangular
 
-<code src="@digigov/ui/app/Skeleton/__stories__/Rectangular.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/Rectangular.tsx" />
 
 ### Specific width and height
 
-<code src="@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx" />
 
 ### Under Typography
 
-<code src="@digigov/ui/app/Skeleton/__stories__/UnderTypography.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/UnderTypography.tsx" />
 
 ### No Animation
 
-<code src="@digigov/ui/app/Skeleton/__stories__/NoAnimation.tsx" />
+<code src="@digigov/ui/src/app/Skeleton/__stories__/NoAnimation.tsx" />
 
 ## API
 

package/src/content/Accordion/doc.mdx

@@ -12,13 +12,13 @@ The accordion component lets users show and hide sections of related content on
 ## How to use
 
 
-<code src="@digigov/ui/content/Accordion/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Accordion/__stories__/Default.tsx" />
 
 ### With Hints
 
 Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<code src="@digigov/ui/content/Accordion/__stories__/WithHints.tsx" />
+<code src="@digigov/ui/src/content/Accordion/__stories__/WithHints.tsx" />
 
 ## Accessibility
 

package/src/content/Blockquote/doc.mdx

@@ -11,11 +11,11 @@ The Blockquote component lets users show and hide sections of related content on
 
 ## How to use
 
-<code src="@digigov/ui/content/Blockquote/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Blockquote/__stories__/Default.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/content/Blockquote/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/Blockquote/__stories__/Dense.tsx" />
 
 ## API
 

package/src/content/Card/doc.mdx

@@ -10,59 +10,59 @@ When used correctly, Cards can help users to scan through vast amounts of inform
 
 ## How to use
 
-<code src="@digigov/ui/content/Card/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/Default.tsx" />
 
 ### With gray border color
 
-<code src="@digigov/ui/content/Card/__stories__/WithGrayBorder.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithGrayBorder.tsx" />
 
 ### With dark border color
 
-<code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithDarkBorder.tsx" />
 
 ### With top border
 
 You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey.
 
-<code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithDarkBorder.tsx" />
 
 ### With grey top border
 
-<code src="@digigov/ui/content/Card/__stories__/WithGrayTopBorder.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithGrayTopBorder.tsx" />
 
 ### With dark top border
 
-<code src="@digigov/ui/content/Card/__stories__/WithDarkTopBorder.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithDarkTopBorder.tsx" />
 
 ### With divider
 
-<code src="@digigov/ui/content/Card/__stories__/WithDivider.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithDivider.tsx" />
 
 ### With actions
 
-<code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithGroupButton.tsx" />
 
 ### With title link
 
 Cards can be used without an action button, but with a clickable title.
 
-<code src="@digigov/ui/content/Card/__stories__/WithLink.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithLink.tsx" />
 
 ### With clickable content
 
 You can expand the clickable area of the link to fill Card's content.
 
-<code src="@digigov/ui/content/Card/__stories__/WithClickableContent.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithClickableContent.tsx" />
 
 ### With button or link
 
 Cards also provides styles for actionable elements such as Buttons or Links.
 
-<code src="@digigov/ui/content/Card/__stories__/WithClickableLink.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithClickableLink.tsx" />
 
 ### With a group of actions
 
-<code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
+<code src="@digigov/ui/src/content/Card/__stories__/WithGroupButton.tsx" />
 
 ## API
 

package/src/content/Chip/doc.mdx

@@ -9,26 +9,26 @@ The Chip component can be used to represent small blocks of information.
 
 ## How to use
 
-<code src="@digigov/ui/content/Chip/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Chip/__stories__/Default.tsx" />
 
 ### Clickable Chip
 
-<code src="@digigov/ui/content/Chip/__stories__/ClickableChip.tsx" />
+<code src="@digigov/ui/src/content/Chip/__stories__/ClickableChip.tsx" />
 
 ### Clickable and Deletable
 
-<code src="@digigov/ui/content/Chip/__stories__/ClickableDeletableChip.tsx" />
+<code src="@digigov/ui/src/content/Chip/__stories__/ClickableDeletableChip.tsx" />
 
 ### Deletable Chip
 
-<code src="@digigov/ui/content/Chip/__stories__/DeletableChip.tsx" />
+<code src="@digigov/ui/src/content/Chip/__stories__/DeletableChip.tsx" />
 
 ### Group of Chips
 
-<code src="@digigov/ui/content/Chip/__stories__/GroupOfChips.tsx" />
+<code src="@digigov/ui/src/content/Chip/__stories__/GroupOfChips.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["Chip", "ChipContainer", "ChipHeading", "ChipKeyValue"]} />
+<ComponentProps componentName={["Chip", "ChipContainer", "ChipHeading", "ChipKeyValue"]} />

package/src/content/Details/doc.mdx

@@ -9,7 +9,7 @@ The details component is a short link that shows more detailed help text when a
 
 ## How to use
 
-<code src="@digigov/ui/content/Details/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Details/__stories__/Default.tsx" />
 
 ## Accessibility
 
@@ -20,4 +20,4 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["Details", "DetailsSummary", "DetailsContent"]} />
+<ComponentProps componentName={["Details", "DetailsSummary", "DetailsContent"]} />

package/src/content/List/doc.mdx

@@ -7,19 +7,19 @@ title: List
 
 ## How to use
 
-<code src="@digigov/ui/content/List/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/List/__stories__/Default.tsx" />
 
 ### With bullets
 
-<code src="@digigov/ui/content/List/__stories__/BulletList.tsx" />
+<code src="@digigov/ui/src/content/List/__stories__/BulletList.tsx" />
 
 ### With numbers
 
-<code src="@digigov/ui/content/List/__stories__/NumberedList.tsx" />
+<code src="@digigov/ui/src/content/List/__stories__/NumberedList.tsx" />
 
 ### With extra space
 
-<code src="@digigov/ui/content/List/__stories__/WithExtraSpace.tsx" />
+<code src="@digigov/ui/src/content/List/__stories__/WithExtraSpace.tsx" />
 
 ## API
 

package/src/content/SafeHTML/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { type JSX, useMemo } from 'react';
 import DomPurify from 'dompurify';
 
 const defaultTags = [
@@ -33,8 +33,32 @@ if (typeof window !== 'undefined') {
         elementClassNameMapping[node.tagName.toLowerCase()]
       );
     }
-    // set all elements owning target to target=_blank
-    if ('target' in node) {
+    // Anchor tag check for external links
+    if (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href')) {
+      const href = node.getAttribute('href');
+
+      if (href && href.startsWith('#')) {
+        return;
+      }
+
+      if (
+        href &&
+        (href.startsWith('http://') ||
+          href.startsWith('https://') ||
+          href.startsWith('//'))
+      ) {
+        const url = new URL(href, window.location.href);
+        const isInternal = url.origin === window.location.origin;
+
+        if (!isInternal) {
+          node.setAttribute('target', '_blank');
+          node.setAttribute('rel', 'noopener noreferrer');
+        }
+      }
+      // Relative paths are internal, do nothing
+    }
+    // For other elements with target attribute, set to _blank
+    else if (node.hasAttribute('target')) {
       node.setAttribute('target', '_blank');
       node.setAttribute('rel', 'noopener');
     }
@@ -50,8 +74,13 @@ export const getClosingTags = (htmlString) => {
   for (const tag of tags) {
     if (tag.startsWith('</') && tag.endsWith('>')) {
       const tagName = tag.replace('</', '<');
-      // @ts-ignore
-      const openingTag = stack.findLastIndex((element) => element === tagName);
+      let openingTag = -1;
+      for (let i = stack.length - 1; i >= 0; i--) {
+        if (stack[i] === tagName) {
+          openingTag = i;
+          break;
+        }
+      }
       if (openingTag !== -1) {
         stack.splice(openingTag, 1);
       }
@@ -65,7 +94,7 @@ export const getClosingTags = (htmlString) => {
 export interface SafeHTMLProps {
   content: string;
   tags?: string[];
-  Tag?: string;
+  Tag?: keyof JSX.IntrinsicElements;
   style?: React.CSSProperties;
 }
 
@@ -85,10 +114,9 @@ export const SafeHTML = ({
       ALLOWED_TAGS: tags,
       ADD_ATTR: ['target'],
     });
-  }, [content]);
+  }, [content, tags]);
   return (
     <Tag
-      // @ts-ignore
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}

package/src/content/StepNav/doc.mdx

@@ -9,15 +9,15 @@ StepNav is a component that displays number of steps required to complete a proc
 
 ## How to use
 
-<code src="@digigov/ui/content/StepNav/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/StepNav/__stories__/Default.tsx" />
 
 ### With hints
 
-<code src="@digigov/ui/content/StepNav/__stories__/WithHints.tsx" />
+<code src="@digigov/ui/src/content/StepNav/__stories__/WithHints.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/content/StepNav/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/StepNav/__stories__/Dense.tsx" />
 
 ## API
 
@@ -36,4 +36,4 @@ See below for a complete reference to all of the props  available to the compone
     "StepNavAccordionHeadingTitle",
     "StepNavAccordionHeadingText",
     "StepNavAccordionContent"
-  ]} />
+  ]} />

package/src/content/SummaryList/doc.mdx

@@ -9,7 +9,7 @@ Use the summary list to summarize information, for example, a user’s responses
 
 ## How to use
 
-<code src="@digigov/ui/content/SummaryList/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/SummaryList/__stories__/Default.tsx" />
 
 ### With actions
 
@@ -17,13 +17,13 @@ Assistive technology users, like those who use a screen reader, may hear the lin
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<code src="@digigov/ui/content/SummaryList/__stories__/WithActions.tsx" />
+<code src="@digigov/ui/src/content/SummaryList/__stories__/WithActions.tsx" />
 
 ### Without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<code src="@digigov/ui/content/SummaryList/__stories__/WithoutBorders.tsx" />
+<code src="@digigov/ui/src/content/SummaryList/__stories__/WithoutBorders.tsx" />
 
 ## API
 

package/src/content/Table/doc.mdx

@@ -7,57 +7,57 @@ title: Table
 
 ## How to use
 
-<code src="@digigov/ui/content/Table/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/Default.tsx" />
 
 ### With dark header
 
-<code src="@digigov/ui/content/Table/__stories__/DarkVariant.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/DarkVariant.tsx" />
 
 ### With captions
 
 Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
 
-<code src="@digigov/ui/content/Table/__stories__/TableCaptions.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/TableCaptions.tsx" />
 
 ### With numeric values
 
-<code src="@digigov/ui/content/Table/__stories__/NumericDataType.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/NumericDataType.tsx" />
 
 ### With zebra rows
 
-<code src="@digigov/ui/content/Table/__stories__/ZebraProp.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/ZebraProp.tsx" />
 
 ### With primary or secondary colored rows
 
 The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
 
-<code src="@digigov/ui/content/Table/__stories__/RowColors.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/RowColors.tsx" />
 
 ### With vertical lines
 
-<code src="@digigov/ui/content/Table/__stories__/VerticalBorders.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/VerticalBorders.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/content/Table/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/Dense.tsx" />
 
 ### Custom column widths
 
-<code src="@digigov/ui/content/Table/__stories__/DefinedWidth.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/DefinedWidth.tsx" />
 
 ### Without data (empty table)
 
-<code src="@digigov/ui/content/Table/__stories__/NoData.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/NoData.tsx" />
 
 ### With loader
 
-<code src="@digigov/ui/content/Table/__stories__/WithLoader.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/WithLoader.tsx" />
 
 ### With stack style
 
 Use this prop when you want to display a more user friendly table for small screens.
 
-<code src="@digigov/ui/content/Table/__stories__/Stacked.tsx" />
+<code src="@digigov/ui/src/content/Table/__stories__/Stacked.tsx" />
 
 ## Accessibility
 

package/src/content/TaskList/doc.mdx

@@ -9,11 +9,11 @@ TaskList is a component that displays number of steps required to complete a pro
 
 ## How to use
 
-<code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/TaskList/__stories__/Default.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/TaskList/__stories__/Dense.tsx" />
 
 ## API
 

package/src/content/Timeline/doc.mdx

@@ -11,11 +11,11 @@ User can better understand what has happened and also understand what the next s
 
 ## How to use
 
-<code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/content/Timeline/__stories__/Default.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/content/Timeline/__stories__/Dense.tsx" />
 
 ## API
 

package/src/feedback/CopyToClipboard/doc.mdx

@@ -7,15 +7,15 @@ title: CopyToClipboard
 
 ## How to use
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Default.tsx" />
 
 ### As banner
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Banner.tsx" />
 
 ### With dense style
 
-<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+<code src="@digigov/ui/src/feedback/CopyToClipboard/__stories__/Dense.tsx" />
 
 ## API