fix(ui): adjust links

packages/ui-library/src/components/button-group/index.stories.ts

@@ -111,6 +111,7 @@ export const ButtonGroup = (
 };
 
 const defaultParams: BlrButtonGroupType = {
+  theme: 'Light',
   sizeVariant: 'md',
   alignment: 'left',
 };

packages/ui-library/src/components/button-icon/index.stories.ts

@@ -286,7 +286,7 @@ Disabled.argTypes = {
 /**
  * ## Dependencies
  * ### Icon
- * The Button Icon component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon--docs) component.
+ * The Button Icon component makes use of the Icon component. For more information have a look at the [Icon](/docs/components-icon--docs) component.
  */
 export const Icon = () => {
   return html`
@@ -305,7 +305,7 @@ Icon.argTypes = {
 };
 
 /**
- * The Button Icon uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](/docs/design-system-web-components-feedback-loader--docs) component.
+ * The Button Icon uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](/docs/components-loader--docs) component.
  */
 export const Loader = () => {
   return html`

packages/ui-library/src/components/button-text/index.stories.ts

@@ -360,7 +360,7 @@ Disabled.story = {
 /**
  * ## Dependencies
  * ### Icon
- * The Button Text component can display a leading or trailing icon next to the label. For more information have a look at the [Icon](?path=/docs/design-system-web-components-ui-icon--docs) component.
+ * The Button Text component can display a leading or trailing icon next to the label. For more information have a look at the [Icon](?path=/docs/components-icon--docs) component.
  */
 
 export const Icon = () => {
@@ -389,7 +389,7 @@ Icon.argTypes = {
 };
 Icon.story = { name: ' ' };
 /**
- * The Button Text uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](?path=/docs/design-system-web-components-feedback-loader--docs) component.
+ * The Button Text uses the Loader component in its loading state to inform users that the action they have taken is in progress. For more information have a look at the [Loader](?path=/docs/components-loader--docs) component.
  */
 export const Loader = () => {
   return html`

packages/ui-library/src/components/checkbox/index.stories.ts

@@ -397,7 +397,7 @@ Readonly.story = {
 //  * ## Validation
 //  *
 //  * ### Required
-//  * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/design-system-web-components-internal-components-formlabel--docs) component in the dependencies section below.
+//  * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/components-form-label--docs) component in the dependencies section below.
 //  */
 // export const Required = () => {
 //   return html`
@@ -444,7 +444,7 @@ HasError.story = {
  * ## Dependencies
  *
  * ### Form Label
- * The Checkbox component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/design-system-web-components-internal-components-formlabel--docs) component.
+ * The Checkbox component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/components-form-label--docs) component.
  */
 
 export const FormLabel = () => {
@@ -470,7 +470,7 @@ FormLabel.story = {
 
 /**
  * ### Form Caption Group
- * The Checkbox component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component. If the Checkbox component lacks a label (hasLabel=false), the Form Caption Group should remain hidden.
+ * The Checkbox component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/components-form-caption-group--docs) component. If the Checkbox component lacks a label (hasLabel=false), the Form Caption Group should remain hidden.
  */
 export const FormCaptionGroup = () => {
   return html`

packages/ui-library/src/components/form-caption-group/index.stories.ts

@@ -74,6 +74,7 @@ BlrFormCaptionGroup.storyName = 'Form Caption Group';
 
 const args: BlrFormCaptionGroupType = {
   sizeVariant: 'sm',
+  theme: 'Light',
 };
 
 BlrFormCaptionGroup.args = args;

packages/ui-library/src/components/form-caption-group/index.test.ts

@@ -10,6 +10,7 @@ import { html } from 'lit-html';
 
 const sampleParams: BlrFormCaptionGroupType = {
   sizeVariant: 'md',
+  theme: 'Light',
 };
 
 const hintCaption = BlrFormCaptionRenderFunction({

packages/ui-library/src/components/form-caption/index.stories.ts

@@ -78,11 +78,12 @@ export default {
           - [**Size Variant**](#size-variant)
         - [**Dependencies**](#dependencies)
           - [**Icon**](#icon)
+
         The Form Caption is intended to be used when creating new components. Currently, it is used like this in the following components:
         - [**Form Caption Group**](?path=/docs/components-form-caption-group--docs)
         - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
 
-        It is not intended to use the Form Caption directly when creating new applications.
+        It is not intended to use the Form Caption directly when creating new applications. 
       </Markdown>
       `,
       },
@@ -179,7 +180,7 @@ SizeVariant.story = { name: ' ' };
 /**
  *  ## Dependencies
  *  ### Icon
- *  The Form Caption component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon-icon--docs) component.
+ *  The Form Caption component makes use of the Icon component. For more information have a look at the [Icon](/docs/components-icon--docs) component.
  */
 
 export const Icon = () => {

packages/ui-library/src/components/input-field-number/index.stories.ts

@@ -524,11 +524,11 @@ export const HasUnit = (params: BlrInputFieldNumberType) => {
 };
 
 /**
- * ## States 
- *  Apart from states like rest, hover, pressed and focus, the Input Field Number component can also be disabled or readonly. The error state is documented under [validation](#validation).
+ * ## States
+ * Apart from states like rest, hover, pressed and focus, the Input Field Number component can also be disabled or readonly. The error state is documented under [validation](#validation).
  * ### Disabled
-The Input Field Number component in the disabled state can not be interacted with. This means it can not receive focus or be selected.
-*/
+ * The Input Field Number component in the disabled state can not be interacted with. This means it can not receive focus or be selected.
+ */
 export const Disabled = (params: BlrInputFieldNumberType) => {
   return html`
     ${sharedStyles}
@@ -609,7 +609,6 @@ export const HasError = (params: BlrInputFieldNumberType) => {
  * ## Dependencies
  * ### Stepper Button
  * The Input Field Number component makes use of the Stepper Button component when `stepperVariant='split'` for increasing or decreasing the value. For more information have a look at the [Stepper Button (Not yet implemented)](?path=/docs/components-stepper-button--docs) component.
- *
  * > Since the Stepper Button component is not yet implemented in code, the underlying elements reference the design tokens from the [Stepper Button Figma Component](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-B01LER---UI-Kit?type=design&node-id=3618-108974) component directly.
  */
 export const StepperButton = (params: BlrInputFieldNumberType) => {
@@ -632,7 +631,6 @@ StepperButton.story = { name: ' ' };
 /**
  * ### Stepper Combo
  * The Input Field Number component makes use of the Stepper Combo component when `stepperVariant='horizontal | vertical'` for increasing or decreasing the value. For more information have a look at the [Stepper Combo (Not yet implemented)](?path=/docs/components-stepper-combo--docs) component.
- *
  * > Since the Stepper Combo component is not yet implemented in code, the underlying elements reference the design tokens from the [Stepper Combo Figma Component](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-B01LER---UI-Kit?type=design&node-id=10636-18946) directly.
  */
 export const StepperCombo = (params: BlrInputFieldNumberType) => {
@@ -662,7 +660,7 @@ export const StepperCombo = (params: BlrInputFieldNumberType) => {
 StepperCombo.story = { name: ' ' };
 
 /**
- * The Input Field Number component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component.
+ * The Input Field Number component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/components-form-label--docs) component.
  */
 export const FormLabel = (params: BlrInputFieldNumberType) => {
   return html`
@@ -692,7 +690,7 @@ export const FormLabel = (params: BlrInputFieldNumberType) => {
 };
 
 /**
- * The Input Field Number component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component.
+ * The Input Field Number component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/components-form-caption-group--docs) component.
  */
 export const FormCaptionGroup = (params: BlrInputFieldNumberType) => {
   return html`

packages/ui-library/src/components/input-field-text/index.stories.ts

@@ -440,7 +440,7 @@ SizeVariant.story = {
 /**
  * ## Content / Settings
  * ### Type
- * The Input Field Text component can have all the types an html input can have, except the number and the unit type, which is covered in the Input Field Number component. For more information have a look at the [Input Field Number](/docs/design-system-web-components-forms-input-field-number--docs) component.
+ * The Input Field Text component can have all the types an html input can have, except the number and the unit type, which is covered in the Input Field Number component. For more information have a look at the [Input Field Number](/docs/components-input-field-number--docs) component.
  */
 export const Type = () => {
   return html`
@@ -644,7 +644,7 @@ HasError.argTypes = {
 /**
  * ## Dependencies
  * ### Form Label
- * The Input Field Text component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component.
+ * The Input Field Text component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/components-form-label--docs) component.
  */
 export const FormLabel = () => {
   return html`
@@ -672,7 +672,7 @@ FormLabel.story = {
   name: ' ',
 };
 /**
- * The Input Field Text component can have a trailing clickable Icon / Button Icon component. This could be used for example to show or hide the input, when it is used to enter a password. For more information have a look at the [Icon](?path=/docs/design-system-web-components-ui-icon--docs) component.
+ * The Input Field Text component can have a trailing clickable Icon / Button Icon component. This could be used for example to show or hide the input, when it is used to enter a password. For more information have a look at the [Icon](?path=/docs/components-icon--docs) component.
  */
 export const Icon = () => {
   return html`
@@ -707,7 +707,7 @@ Icon.argTypes = {
   ...disabledArgTypes,
 };
 /**
- * The Form Caption Group component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component.
+ * The Form Caption Group component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/components-form-caption-group--docs) component.
  */
 export const FormCaptionGroup = () => {
   return html`

packages/ui-library/src/components/radio-group/index.stories.ts

@@ -436,7 +436,7 @@ export const HasError = () => {
 /**
  * ## Dependencies
  * ### Form Caption Group
- * The Radio Group component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component.
+ * The Radio Group component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/components-form-caption-group--docs) component.
  */
 export const FormCaptionGroup = () => {
   return html`

packages/ui-library/src/components/select/index.stories.ts

@@ -409,7 +409,7 @@ HasError.argTypes = {
  * ## Dependencies
  *
  * ### Form Label
- * The Select component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/design-system-web-components-internal-components-formlabel--docs) component.
+ * The Select component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](/docs/components-form-label--docs) component.
  */
 export const FormLabel = () => {
   return html`
@@ -439,7 +439,7 @@ FormLabel.argTypes = {
   ...disabledArgTypes,
 };
 /**
- * The Select component makes use of the Icon component. For more information have a look at the [Icon](/docs/design-system-web-components-ui-icon--docs) component.
+ * The Select component makes use of the Icon component. For more information have a look at the [Icon](/docs/components-icon--docs) component.
  */
 
 export const Icon = () => {
@@ -471,7 +471,7 @@ Icon.argTypes = {
   ...disabledArgTypes,
 };
 /**
- * The Select component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component.
+ * The Select component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](/docs/components-form-caption-group--docs) component.
  */
 export const FormCaptionGroup = () => {
   return html`

packages/ui-library/src/components/textarea/index.stories.ts

@@ -700,7 +700,7 @@ HasError.argTypes = {
 /**
  * ## Dependencies
  * ### Form Label
- * The Text Area component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component.
+ * The Text Area component can display an optional Form Label component, consisting of a label and a label appendix. For more information have a look at the internal [Form Label](?path=/docs/components-form-label--docs) component.
  */
 // States FormLabel
 export const FormLabel = () => {
@@ -738,7 +738,7 @@ FormLabel.story = {
   name: ' ',
 };
 /**
- * The Text Area component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal <a href="/docs/design-system-web-components-internal-components-formcaptiongroup--docs">Form Caption Group</a> component.
+ * The Text Area component can display an optional hint message and error message with or without icons. Both captions can be combined. For more information have a look at the internal <a href="/docs/components-form-caption-group--docs">Form Caption Group</a> component.
  */
 export const FormCaptionGroup = () => {
   return html`
@@ -779,7 +779,7 @@ FormCaptionGroup.argTypes = {
 
 // States Counter
 /**
- * The Text Area component can display an optional counter. The threshold for the warning and error message can be set individually. For more information have a look at the internal [Counter](?path=/docs/design-system-web-components-internal-components-counter--docs) component.
+ * The Text Area component can display an optional counter. The threshold for the warning and error message can be set individually. For more information have a look at the internal [Counter](?path=/docs/components-counter--docs) component.
  */
 export const Counter = () => {
   return html`

packages/ui-library/src/components/toggle-switch/index.stories.ts

@@ -413,7 +413,7 @@ Readonly.story = { name: ' ' };
 /**
  * ## Dependencies
  * ### Form Caption
- * The Toggle Switch component can display an optional hint message with or without icons. For more information have a look at the [Form Caption](/docs/design-system-web-components-internal-components-formcaptiongroup-formcaption--docs) component.
+ * The Toggle Switch component can display an optional hint message with or without icons. For more information have a look at the [Form Caption](/docs/components-form-caption--docs) component.
  */
 export const FormCaption = () => {
   return html`