Add au-kaleidos-css package to local workspace

app/styles/app.scss

@@ -180,7 +180,8 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
 @import 'custom-application/loader';
 
 // Components (from npm package)
-@import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
+// @import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
+@import "au-kaleidos-css/auk-standalone";
 
 // Styleguide
 @import "custom-application/styleguide/_br-prototype-wrapper";

app/styles/au-kaleidos-css/_auk-accordion.scss

@@ -0,0 +1,12 @@
+/* ==========================================================================
+  auk-accordion
+  ========================================================================== */
+
+.auk-accordion__content {
+  display: none;
+  transition: max-height 0.3s cubiauk-bezier(0, 1.05, 0, 1), overflow 0s 0s;
+}
+
+.auk-accordion--is-active .auk-accordion__content {
+  display: block;
+}

app/styles/au-kaleidos-css/_auk-alert-stack.scss

@@ -0,0 +1,18 @@
+/* ==========================================================================
+  auk-alert-stack
+  ---
+  Create a global stack for alerts. You can add an element to the stack.
+   ========================================================================== */
+
+.auk-alert-stack {
+  position: fixed;
+  right: 2.4rem;
+  bottom: 2.4rem;
+  display: flex;
+  flex-direction: column-reverse;
+
+  .auk-alert {
+    min-width: 40rem;
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+  }
+}

app/styles/au-kaleidos-css/_auk-alert.scss

@@ -0,0 +1,61 @@
+/* ==========================================================================
+  auk-alert
+  ========================================================================== */
+
+.auk-alert {
+  padding: 1.6rem;
+  margin: 0 0 1.6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.auk-alert {
+  .auk-badge {
+    flex-shrink: 0;
+  }
+}
+
+.auk-alert__body {
+  display: flex;
+  align-items: center;
+  & > *:not(:last-child) {
+    margin-right: 2rem;
+  }
+}
+
+.auk-alert__text {
+  .auk-alert__title {
+    font-weight: 500;
+    margin-bottom: .2rem;
+  }
+  .auk-alert__message {
+    margin-bottom: 0;
+  }
+}
+
+/* Skins
+   ========================================================================== */
+
+.auk-alert--default {
+  background: $au-gray-100;
+  .auk-badge--default {
+    background-color: #FFFFFF;
+  }
+}
+
+.auk-alert--success {
+  background: $au-green-100;
+}
+
+.auk-alert--error {
+  background: $au-red-100;
+}
+
+.auk-alert--warning {
+  background: $au-yellow-100;
+}
+
+.auk-alert--loading {
+  background: $au-gray-100;
+}

app/styles/au-kaleidos-css/_auk-app-title.scss

@@ -0,0 +1,8 @@
+/* ==========================================================================
+  auk-app-title
+   ========================================================================== */
+
+.auk-app-title {
+  font-size: 1.7rem;
+  font-weight: 500;
+}

app/styles/au-kaleidos-css/_auk-badge.scss

@@ -0,0 +1,54 @@
+/* ==========================================================================
+  auk-badge
+  (Avatar)
+  ========================================================================== */
+
+.auk-badge {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+/* Sizes
+   ========================================================================== */
+
+.auk-badge--small {
+  width: 2rem;
+  height: 2rem;
+  .auk-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+}
+
+/* Skins
+   ========================================================================== */
+
+.auk-badge--default {
+  background: $au-gray-200;
+  color: #666;
+}
+
+.auk-badge--white {
+  background: #FFF;
+  color: #666;
+}
+
+.auk-badge--success {
+  background: $au-green-500;
+  color: #FFF;
+}
+
+.auk-badge--error {
+  background: #DB3434;
+  color: #FFF;
+}
+
+.auk-badge--warning {
+  background: $au-yellow-400;
+  color: #000;
+}

app/styles/au-kaleidos-css/_auk-box.scss

@@ -0,0 +1,8 @@
+/* ==========================================================================
+  auk-box
+   ========================================================================== */
+
+.auk-box {
+  background-color: $au-gray-100;
+  padding: 1.2rem;
+}

app/styles/au-kaleidos-css/_auk-brand.scss

@@ -0,0 +1,65 @@
+/* ==========================================================================
+  auk-brand
+   ========================================================================== */
+
+.auk-brand {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  position: relative;
+  top: 0.3rem;
+}
+
+.auk-brand--link {
+  &:focus {
+    outline: none;
+  }
+}
+
+.auk-brand__logo {
+  position: relative;
+  width: 4.9rem;
+  height: 4.9rem;
+  padding-left: .75rem;
+  overflow: hidden;
+  background-color: $au-yellow-300;
+
+  svg {
+    height: 100%;
+    width: 56%;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    right: -.1rem;
+    bottom: -.3rem;
+    border-top: 9rem solid #FFF;
+    border-left: 3.07818rem solid
+    transparent;
+  }
+
+  /* Gray border
+  &::after {
+    content: "";
+    top: -.2rem;
+    right: 17%;
+    transform: rotate(-19deg);
+    width: .1rem;
+    height: calc(100% + .4rem);
+    background-color: $au-gray-300;
+    display: block;
+    position: absolute;
+  }*/
+}
+
+.auk-brand__logotype {
+  font-size: 2.1rem;
+  line-height: 1;
+  position: relative;
+  font-weight: 500;
+  color: $au-gray-1000;
+  margin-left: .6rem;
+  transition: color 125ms cubiauk-bezier(.19,1,.22,1);
+}

app/styles/au-kaleidos-css/_auk-breadcrumb.scss

@@ -0,0 +1,12 @@
+/* ==========================================================================
+  auk-breadcrumb
+   ========================================================================== */
+
+.auk-breadcrumb {
+  color: $au-gray-600;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

app/styles/au-kaleidos-css/_auk-button-link.scss

@@ -0,0 +1,78 @@
+/* ==========================================================================
+  auk-button-link
+   ========================================================================== */
+
+.auk-button-link {
+  // Reset default button
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+
+  // Reset default link
+  text-decoration: none;
+
+  // Build styles
+  font-family: flanders-sans,  sans-serif;
+  font-size: 1.6rem;
+  color: $au-blue-700;
+  display: flex;
+  &:hover,
+  &:active {
+    color: $au-blue-600;
+  }
+  &:focus {
+    outline: 0;
+    border-color: $au-yellow-400;
+    box-shadow: inset 0 0 0 0.2rem $au-yellow-400;
+  }
+}
+
+.auk-button-link[disabled] {
+  color: $au-gray-400;
+  text-decoration: none;
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
+.auk-button-link--muted {
+  color: $au-gray-600;
+  &:hover,
+  &:active {
+    color: $au-gray-800;
+  }
+}
+
+.auk-button-link--block {
+  display: flex;
+  width: 100%;
+}
+
+.auk-button-link--padded-y {
+  padding: 0.6rem 0;
+}
+
+.auk-button-link--padded {
+  padding: 0.6rem;
+}
+
+.auk-button-link {
+  .auk-icon + .auk-button__label,
+  .auk-button__label + .auk-icon {
+    margin-left: .5rem;
+  }
+}
+
+.auk-button-link--icon {
+  padding: .8rem;
+}
+
+.auk-button-link .auk-icon {
+  width: 1.8rem;
+  height: 1.8rem;
+  position: relative;
+  line-height: 0;
+}

app/styles/au-kaleidos-css/_auk-button-loading.scss

@@ -0,0 +1,20 @@
+/* ==========================================================================
+  auk-button-loading
+   ========================================================================== */
+
+.auk-button-loading {
+  font-family: flanders-sans, sans-serif;
+  background: $au-gray-200;
+  font-size: 1.6rem;
+  border: none;
+  appearance: none;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+  padding: 1rem 1.2rem;
+}
+
+.auk-button-loading svg path {
+  fill: currentColor;
+}

app/styles/au-kaleidos-css/_auk-button-toolbar.scss

@@ -0,0 +1,14 @@
+/* ==========================================================================
+  auk-button-toolbar
+   ========================================================================== */
+
+.auk-button-toolbar {
+  display: flex;
+  align-items: center;
+}
+
+.auk-button-toolbar {
+  .auk-button + .auk-button {
+    margin-left: 1rem;
+  }
+}