@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/button/Button.module.css

@@ -125,12 +125,16 @@
  * content.
  */
 .prokodo-Button {
-  display: inline-block;
-  border-radius: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pk-space-sm);
+  border-radius: var(--pk-button-radius);
   border-width: 0;
-  padding: 0.875rem 1.5rem;
-  background-color: var(--color-grey-50);
-  box-shadow: var(--elevation-1);
+  padding: var(--pk-button-padding-y) var(--pk-button-padding-x);
+  background-color: var(--pk-button-bg, var(--pk-color-brand, #1E90FF));
+  color: var(--pk-button-fg, var(--pk-color-fg, #111));
+  box-shadow: var(--pk-button-shadow);
   cursor: pointer;
   background: var(--gradient-background-inherit);
   font-weight: 400 !important;
@@ -143,9 +147,6 @@
   text-align: left !important;
   text-decoration: none !important;
 }
-html[data-theme=dark] .prokodo-Button {
-  background-color: var(--color-grey-100);
-}
 .prokodo-Button:hover {
   box-shadow: none;
 }
@@ -153,126 +154,117 @@ html[data-theme=dark] .prokodo-Button {
   outline: 3px solid #1E90FF;
   outline-offset: 4px;
   border-radius: 1.5rem;
-  border-radius: 1.5rem;
-}
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: #000000;
+  border-radius: var(--pk-button-radius);
 }
 .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
-  color: #000000;
 }
-html[data-theme=dark] .prokodo-Button--has-bg-primary {
-  color: #FFFFFF;
-}
-html[data-theme=dark] .prokodo-Button--has-bg-inherit {
-  color: var(--color-grey-900);
-  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
-  background-color: var(--color-grey-300);
+.prokodo-Button--has-bg-inherit {
+  background: linear-gradient(112deg, var(--pk-color-surface-raised) 0%, var(--pk-color-border) 100%);
+  background-color: var(--pk-color-surface-raised);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
-  color: #000000;
-}
-html[data-theme=dark] .prokodo-Button--has-bg-secondary {
-  color: #FFFFFF;
 }
-.prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
+.prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
-  color: #FFFFFF;
-}
-html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
-  color: var(--color-grey-700);
+  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
-  color: #000000;
-}
-html[data-theme=dark] .prokodo-Button--has-bg-success {
-  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
-  color: #000000;
-}
-html[data-theme=dark] .prokodo-Button--has-bg-warning {
-  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
+}
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-text-primary, .prokodo-Button--has-variant-outlined--has-outline-primary {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-brand) 18%, transparent);
 }
-html[data-theme=dark] .prokodo-Button--has-bg-error {
-  color: #FFFFFF;
+.prokodo-Button--has-bg-secondary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-accent) 18%, transparent);
+}
+.prokodo-Button--has-bg-success, .prokodo-Button--has-text-success, .prokodo-Button--has-variant-outlined--has-outline-success {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+}
+.prokodo-Button--has-bg-warning, .prokodo-Button--has-text-warning, .prokodo-Button--has-variant-outlined--has-outline-warning {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+}
+.prokodo-Button--has-bg-error, .prokodo-Button--has-text-error, .prokodo-Button--has-variant-outlined--has-outline-error {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+}
+.prokodo-Button--has-bg-info, .prokodo-Button--has-text-info, .prokodo-Button--has-variant-outlined--has-outline-info, .prokodo-Button--has-bg-inherit, .prokodo-Button--has-text-inherit, .prokodo-Button--has-variant-outlined--has-outline-inherit {
+  box-shadow: 0 4px 20px color-mix(in srgb, var(--pk-color-fg) 10%, transparent);
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
-  background-color: var(--color-grey-50);
-  padding: 0.75rem 1rem;
-  transition: background-color 0.3s ease-in-out;
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  padding: var(--pk-space-md) var(--pk-space-lg);
+  transition: background-color var(--pk-timing-normal) ease-in-out, color var(--pk-timing-fast) ease-in-out;
 }
 .prokodo-Button--has-text-inherit:hover, .prokodo-Button--has-text-primary:hover, .prokodo-Button--has-text-secondary:hover, .prokodo-Button--has-text-info:hover, .prokodo-Button--has-text-success:hover, .prokodo-Button--has-text-warning:hover, .prokodo-Button--has-text-error:hover {
-  color: #FFFFFF;
+  color: var(--pk-palette-white);
 }
 .prokodo-Button--has-text-inherit {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-text-inherit:hover {
-  background-color: var(--color-grey-500);
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Button--has-text-primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-Button--has-text-primary:hover {
-  background-color: var(--color-primary-500);
+  background-color: var(--pk-color-brand);
 }
 .prokodo-Button--has-text-secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-Button--has-text-secondary:hover {
-  background-color: var(--color-secondary-500);
+  background-color: var(--pk-color-accent);
+  color: var(--pk-palette-black);
 }
-.prokodo-Button--is-disabled, .prokodo-Button--has-text-info {
-  color: var(--color-grey-700);
+.prokodo-Button--has-text-info {
+  color: var(--pk-color-fg);
 }
-.prokodo-Button--is-disabled:hover, .prokodo-Button--has-text-info:hover {
-  background-color: var(--color-grey-100);
+.prokodo-Button--has-text-info:hover {
+  background-color: var(--pk-color-muted);
 }
 .prokodo-Button--has-text-success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-Button--has-text-success:hover {
-  background-color: var(--color-success);
+  background-color: var(--pk-color-success);
 }
 .prokodo-Button--has-text-warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-Button--has-text-warning:hover {
-  background-color: var(--color-warning);
+  background-color: var(--pk-color-warning);
+  color: var(--pk-palette-black);
 }
 .prokodo-Button--has-text-error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-Button--has-text-error:hover {
-  background-color: var(--color-error);
+  background-color: var(--pk-color-error);
 }
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   border-radius: inherit;
-  padding: 2px;
+  padding: var(--pk-border-width);
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
           mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
@@ -280,124 +272,86 @@ html[data-theme=dark] .prokodo-Button--has-bg-error {
   z-index: 0;
   background: var(--gradient-border-4);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined {
-  background: none;
-}
 .prokodo-Button--has-variant-outlined--has-outline-inherit {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-inherit::before {
   background: var(--gradient-border-8);
 }
 .prokodo-Button--has-variant-outlined--has-outline-primary {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-primary::before {
   background: var(--gradient-border-4);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
-  color: var(--color-primary-500);
-}
 .prokodo-Button--has-variant-outlined--has-outline-secondary {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-secondary::before {
   background: var(--gradient-border-2);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
-  color: var(--color-secondary-500);
-}
 .prokodo-Button--has-variant-outlined--has-outline-info {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-info::before {
   background: var(--gradient-border-info);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
-  color: #FFFFFF;
-}
 .prokodo-Button--has-variant-outlined--has-outline-success {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-success::before {
   background: var(--gradient-border-success);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
-  color: var(--color-success);
-}
 .prokodo-Button--has-variant-outlined--has-outline-warning {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-warning::before {
   background: var(--gradient-border-warning);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
-  color: var(--color-warning);
-}
 .prokodo-Button--has-variant-outlined--has-outline-error {
-  color: var(--color-black);
+  color: var(--pk-color-fg);
 }
 .prokodo-Button--has-variant-outlined--has-outline-error::before {
   background: var(--gradient-border-error);
 }
-html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
-  color: var(--color-error);
-}
-.prokodo-Button--has-image, .prokodo-Button--has-icon {
-  display: flex;
-  align-items: center;
-}
 .prokodo-Button--icon-only {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   border-radius: 10000px;
-  padding: 0.75rem;
+  padding: var(--pk-space-md);
 }
 .prokodo-Button--has-fullWidth {
-  display: flex;
-  justify-content: center;
   width: 100%;
 }
+.prokodo-Button--is-loading {
+  cursor: progress;
+  pointer-events: none;
+}
 .prokodo-Button--is-disabled {
   cursor: default;
   box-shadow: none;
-  color: var(--color-grey-500);
-  background: var(--color-grey-100);
-  background-color: var(--color-grey-100);
-}
-.prokodo-Button--is-disabled::before {
-  background: var(--gradient-border-8);
-}
-.prokodo-Button--is-disabled:hover {
-  color: var(--color-grey-500);
-  background: var(--color-grey-100);
-  background-color: var(--color-grey-100);
-}
-html[data-theme=dark] .prokodo-Button--is-disabled {
-  color: var(--color-grey-600);
-  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
-  background-color: var(--color-grey-300);
-}
-html[data-theme=dark] .prokodo-Button--is-disabled::before {
-  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
+  opacity: 0.45;
+  pointer-events: none;
 }
 .prokodo-Button__title {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: var(--pk-space-xs);
 }
 .prokodo-Button__image {
-  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 .prokodo-Button__icon {
-  margin-right: 0.5rem;
-}
-.prokodo-Button__icon--icon-only {
-  margin-right: 0;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 .prokodo-Button__link {
-  display: table;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
   width: 100%;
   color: inherit;
   font-weight: 400;
@@ -410,9 +364,6 @@ html[data-theme=dark] .prokodo-Button--is-disabled::before {
   text-align: left;
   text-decoration: none;
 }
-.prokodo-Button__link--icon-only {
-  display: contents;
-}
 .prokodo-Button__link:hover {
   text-decoration: none;
 }
@@ -420,9 +371,6 @@ html[data-theme=dark] .prokodo-Button--is-disabled::before {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 2rem;
+  gap: var(--pk-space-sm);
   width: 100%;
-}
-.prokodo-Button__content--icon-only {
-  border-radius: 2000rem;
 }

package/dist/components/button/Button.module.scss.js

@@ -1,40 +1,36 @@
 const styles = {
   "prokodo-Button": "prokodo-Button",
+  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
+  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
   "prokodo-Button--has-bg-primary": "prokodo-Button--has-bg-primary",
+  "prokodo-Button--has-bg-inherit": "prokodo-Button--has-bg-inherit",
   "prokodo-Button--has-bg-secondary": "prokodo-Button--has-bg-secondary",
   "prokodo-Button--has-bg-success": "prokodo-Button--has-bg-success",
   "prokodo-Button--has-bg-warning": "prokodo-Button--has-bg-warning",
-  "prokodo-Button--has-bg-info": "prokodo-Button--has-bg-info",
-  "prokodo-Button--has-bg-error": "prokodo-Button--has-bg-error",
-  "prokodo-Button--has-bg-inherit": "prokodo-Button--has-bg-inherit",
-  "prokodo-Button--is-disabled": "prokodo-Button--is-disabled",
-  "prokodo-Button--has-text-inherit": "prokodo-Button--has-text-inherit",
   "prokodo-Button--has-text-primary": "prokodo-Button--has-text-primary",
-  "prokodo-Button--has-text-secondary": "prokodo-Button--has-text-secondary",
-  "prokodo-Button--has-text-info": "prokodo-Button--has-text-info",
-  "prokodo-Button--has-text-success": "prokodo-Button--has-text-success",
-  "prokodo-Button--has-text-warning": "prokodo-Button--has-text-warning",
-  "prokodo-Button--has-text-error": "prokodo-Button--has-text-error",
-  "prokodo-Button--has-variant-outlined": "prokodo-Button--has-variant-outlined",
-  "prokodo-Button--has-variant-outlined--has-outline-inherit": "prokodo-Button--has-variant-outlined--has-outline-inherit",
   "prokodo-Button--has-variant-outlined--has-outline-primary": "prokodo-Button--has-variant-outlined--has-outline-primary",
+  "prokodo-Button--has-text-secondary": "prokodo-Button--has-text-secondary",
   "prokodo-Button--has-variant-outlined--has-outline-secondary": "prokodo-Button--has-variant-outlined--has-outline-secondary",
-  "prokodo-Button--has-variant-outlined--has-outline-info": "prokodo-Button--has-variant-outlined--has-outline-info",
+  "prokodo-Button--has-text-success": "prokodo-Button--has-text-success",
   "prokodo-Button--has-variant-outlined--has-outline-success": "prokodo-Button--has-variant-outlined--has-outline-success",
+  "prokodo-Button--has-text-warning": "prokodo-Button--has-text-warning",
   "prokodo-Button--has-variant-outlined--has-outline-warning": "prokodo-Button--has-variant-outlined--has-outline-warning",
+  "prokodo-Button--has-text-error": "prokodo-Button--has-text-error",
   "prokodo-Button--has-variant-outlined--has-outline-error": "prokodo-Button--has-variant-outlined--has-outline-error",
-  "prokodo-Button--has-image": "prokodo-Button--has-image",
-  "prokodo-Button--has-icon": "prokodo-Button--has-icon",
+  "prokodo-Button--has-text-info": "prokodo-Button--has-text-info",
+  "prokodo-Button--has-variant-outlined--has-outline-info": "prokodo-Button--has-variant-outlined--has-outline-info",
+  "prokodo-Button--has-text-inherit": "prokodo-Button--has-text-inherit",
+  "prokodo-Button--has-variant-outlined--has-outline-inherit": "prokodo-Button--has-variant-outlined--has-outline-inherit",
+  "prokodo-Button--has-variant-outlined": "prokodo-Button--has-variant-outlined",
   "prokodo-Button--icon-only": "prokodo-Button--icon-only",
   "prokodo-Button--has-fullWidth": "prokodo-Button--has-fullWidth",
+  "prokodo-Button--is-loading": "prokodo-Button--is-loading",
+  "prokodo-Button--is-disabled": "prokodo-Button--is-disabled",
   "prokodo-Button__title": "prokodo-Button__title",
   "prokodo-Button__image": "prokodo-Button__image",
   "prokodo-Button__icon": "prokodo-Button__icon",
-  "prokodo-Button__icon--icon-only": "prokodo-Button__icon--icon-only",
   "prokodo-Button__link": "prokodo-Button__link",
-  "prokodo-Button__link--icon-only": "prokodo-Button__link--icon-only",
-  "prokodo-Button__content": "prokodo-Button__content",
-  "prokodo-Button__content--icon-only": "prokodo-Button__content--icon-only"
+  "prokodo-Button__content": "prokodo-Button__content"
 };
 export {
   styles as default

package/dist/components/button/Button.view.js

@@ -6,6 +6,7 @@ import { isString } from "../../helpers/validations.js";
 import styles from "./Button.module.scss.js";
 import { Image } from "../image/Image.js";
 import { Icon } from "../icon/Icon.js";
+import { Loading } from "../loading/Loading.js";
 const bem = create(styles, "Button");
 const ButtonView = /* @__PURE__ */ __name(({
   buttonRef,
@@ -27,8 +28,9 @@ const ButtonView = /* @__PURE__ */ __name(({
   const iconName = iconProps == null ? void 0 : iconProps.name;
   const iconMod = { "icon-only": isIconOnly };
   const { title } = rest;
+  const spinnerColor = variant !== "contained" ? color : void 0;
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    (image == null ? void 0 : image.src) !== void 0 && /* istanbul ignore next */
+    !loading && (image == null ? void 0 : image.src) !== void 0 && /* istanbul ignore next */
     /* @__PURE__ */ jsx(
       Image,
       {
@@ -38,7 +40,8 @@ const ButtonView = /* @__PURE__ */ __name(({
         className: bem("image", void 0, image == null ? void 0 : image.className)
       }
     ),
-    iconName && /* @__PURE__ */ jsx(Icon, { className: bem("icon", iconMod), ...iconProps }),
+    !loading && iconName && /* @__PURE__ */ jsx(Icon, { className: bem("icon", iconMod), ...iconProps }),
+    loading && /* @__PURE__ */ jsx(Loading, { ariaLabel: "Loading", color: spinnerColor, size: "xs" }),
     title
   ] });
   const variantNode = isOutlined ? /* @__PURE__ */ jsx("div", { className: bem("content", iconMod, contentClassName), children: inner }) : inner;
@@ -57,6 +60,7 @@ const ButtonView = /* @__PURE__ */ __name(({
         [`has-variant-${variant}--has-outline-${color}`]: variant === "outlined",
         [`has-text-${color}`]: variant === "text",
         "is-disabled": Boolean(disabled),
+        "is-loading": Boolean(loading),
         ...iconMod
       },
       className

package/dist/components/calendly/Calendly.css

@@ -0,0 +1,132 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Calendly__widget {
+  display: block;
+  min-width: 320px;
+  height: var(--pk-calendly-height, 700px);
+  width: 100%;
+}