@duetds/components
Version:
This package includes Duet Core Components and related tools.
314 lines (308 loc) • 25.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-e5cda7d4.js');
const jsUtils = require('./js-utils-286cf29e.js');
const icons = require('./icons-4dd2177d.js');
const DuetChoice = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.choiceId = jsUtils.jsUtils_2("DuetChoice");
this.infoId = jsUtils.jsUtils_2("DuetInfo");
/**
* State() variables
* Inlined decorator, alphabetical order.
*/
this.isInfoOpen = false;
/**
* Theme of the definition list. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Label for the choice button.
*/
this.label = "label";
/**
* Accessible label that is shown for screen reader users in the info toggle. Not visible for normal users.
*/
this.accessibleLabel = "Lisätietoja tästä valinnasta";
/**
* Additional caption to show inside the label of the choice button.
*/
this.caption = "";
/**
* Type of the choice button. Can be one of: "checkbox", "radio"
*/
this.type = "checkbox";
/**
* Checked state of the choice button.
*/
this.checked = false;
/**
* Makes the choice button open a new section underneath it when clicked or tapped. This new section can be used to show more options related to this choice. Please note that this feature can’t be used together with the "info" functionality.
*/
this.collapsible = false;
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Icon to display to the left of the choice button label.
*/
this.icon = "";
/**
* Expands the choice button to fill 100% of the container width.
*/
this.expand = false;
/**
* Controls the padding of the component. Can be one of: "auto", "none".
*/
this.padding = "auto";
/**
* Makes the choice component disabled. This prevents users from being able to interact with the choice, and conveys its inactive state to assistive technologies.
*/
this.disabled = false;
/**
* Component event handling.
*/
this.onClick = (ev) => {
this.setFocus();
this.toggleChecked(ev);
};
this.onMouseEnter = () => {
this.labelEl.classList.add("no-hover");
};
this.onMouseLeave = () => {
this.labelEl.classList.remove("no-hover");
};
this.handleKeyDown = ev => {
// When Space or Enter is pressed
if (ev.key === "Space" || ev.keyCode === 32 || ev.key === "Enter" || ev.keyCode === 13) {
this.toggleChecked(ev);
}
};
this.onChange = (ev) => {
this.checked = ev.target.value;
};
this.onFocus = () => {
this.duetFocus.emit();
};
this.onBlur = () => {
this.duetBlur.emit();
};
/**
* Local methods
*/
this.toggleChecked = ev => {
if (!this.disabled) {
ev.stopPropagation();
ev.preventDefault();
this.isInfoOpen = false;
if (this.type === "checkbox") {
this.checked = !this.checked;
}
else if (!this.checked) {
this.checked = true;
}
}
};
this.toggleInfo = ev => {
ev.stopPropagation();
ev.preventDefault();
this.isInfoOpen = !this.isInfoOpen;
};
this.duetChange = core.createEvent(this, "duetChange", 3);
this.duetFocus = core.createEvent(this, "duetFocus", 7);
this.duetBlur = core.createEvent(this, "duetBlur", 7);
}
checkedChanged(isChecked) {
if (this.type === "radio" && isChecked) {
this.duetChange.emit({
checked: isChecked,
value: this.value,
component: "duet-choice",
});
}
else if (this.type === "checkbox") {
this.duetChange.emit({
checked: isChecked,
value: this.value,
component: "duet-choice",
});
}
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
this.hasInfo = !!this.element.querySelector("[slot='info']");
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
componentDidLoad() {
this.labelEl = this.element.querySelector(".duet-choice-label");
}
/**
* Sets focus on the specified `duet-choice`. Use this method instead of the global
* `input.focus()`.
*/
async setFocus() {
const nativeInput = this.element.querySelector("input");
if (nativeInput) {
nativeInput.focus();
}
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const identifier = this.identifier || this.choiceId;
{
return (core.h(core.Host, { class: {
horizontal: this.groupDirection === "horizontal",
"duet-m-0": this.margin === "none",
"duet-expand": this.expand,
} }, core.h("div", { class: {
"duet-choice-card": true,
"has-icon": this.icon !== "",
"has-info": this.hasInfo,
checked: this.checked,
info: this.isInfoOpen,
collapsible: this.collapsible,
"duet-p-0": this.padding === "none",
"duet-theme-turva": this.theme === "turva",
} }, core.h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, disabled: this.disabled || this.groupDisabled, id: identifier, name: this.name, value: this.value, checked: this.checked, onChange: ev => this.onChange(ev), onKeyDown: ev => this.handleKeyDown(ev) }), core.h("label", { htmlFor: identifier, class: "duet-choice-label", onClick: ev => this.onClick(ev) }, this.icon !== "" ? (core.h("span", { "aria-hidden": "true", class: {
"duet-choice-card-icon": true,
}, innerHTML: icons.duetIcons[jsUtils.jsUtils_6(this.icon)].svg })) : (""), this.label, this.caption ? (core.h("div", null, core.h("duet-spacer", { size: "xx-small" }), core.h("duet-caption", { margin: "none", selected: this.checked }, this.caption))) : (""), this.checked ? (core.h("div", { class: "duet-checkmark-container" }, core.h("div", { class: "duet-checkmark" }))) : (""), this.hasInfo ? (core.h("button", { class: "duet-choice-info-toggle", onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: ev => this.toggleInfo(ev), "aria-hidden": "true", "aria-label": this.accessibleLabel, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-controls": this.infoId }, core.h("span", { innerHTML: icons.duetIcons["messaging-info"].svg }))) : ("")), this.hasInfo && !this.collapsible ? (core.h("div", { class: "duet-choice-card-info", id: this.infoId }, core.h("slot", { name: "info" }))) : (""), this.collapsible && !this.hasInfo ? (core.h("div", { class: "duet-choice-card-collapsible" }, core.h("slot", null))) : (""))));
}
}
get element() { return core.getElement(this); }
static get watchers() { return {
"checked": ["checkedChanged"]
}; }
static get style() { return ".sc-duet-choice-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:16px!important;margin-bottom:12px!important;-webkit-tap-highlight-color:transparent;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;max-width:100%;width:auto}.sc-duet-choice-h:last-child, .sc-duet-choice-h:last-of-type{margin-right:0!important}\@media only screen and (max-width:35.9375em){.sc-duet-choice-h{width:100%}}.duet-expand.sc-duet-choice-h{width:100%!important}.duet-m-0.sc-duet-choice-h{margin:0!important}.duet-fixed.sc-duet-choice-h{width:auto!important}.sc-duet-choice-h:last-child{margin-right:0!important}.duet-choice-card.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-width:2px;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#fff;color:#00294d!important;line-height:1.1;min-width:8rem;font-weight:400;width:100%;position:relative;display:block;text-align:left}.duet-choice-card.duet-p-0.sc-duet-choice{padding:0!important}.duet-choice-card.duet-m-0.sc-duet-choice{margin:0!important}.duet-choice-card.duet-theme-turva.sc-duet-choice{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111!important}.duet-choice-label.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:.15s ease;transition:.15s ease;padding:20px 16px 20px;border-radius:4px;font-weight:600;z-index:100;width:100%;position:relative;border:2px solid #e1e3e6;display:block;text-decoration:none;cursor:pointer}.has-info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-top-right-radius:6px;border-bottom-right-radius:6px}.info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom-right-radius:0;border-bottom-left-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice, .duet-theme-turva.info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e6e6e6}.duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#909599}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover, .duet-theme-turva.info.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#757575}.duet-choice-label.sc-duet-choice:active{-webkit-transition:none!important;transition:none!important;opacity:.75}.has-icon.sc-duet-choice .duet-choice-label.sc-duet-choice{padding-left:48px}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice{padding-right:48px;border-color:#0077b3!important;background:#f3f9fc;color:#0077b3!important}.checked.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#111!important;background:#f7f7f7;color:#111!important}.checked.collapsible.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom-left-radius:0;border-bottom-right-radius:0}input.sc-duet-choice:focus{outline:0}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:focus + .duet-choice-label.sc-duet-choice{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}input[disabled].sc-duet-choice + .duet-choice-label.sc-duet-choice{cursor:not-allowed!important;background:#f5f8fa!important;border-color:#e1e3e6!important;color:#657787!important}input[disabled].sc-duet-choice + .duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#657787!important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice + .duet-choice-label.sc-duet-choice{background:#f7f7f7!important;border-color:#e6e6e6!important;color:#757575!important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice + .duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#757575!important}.checked.sc-duet-choice input[disabled].sc-duet-choice + .duet-choice-label.sc-duet-choice{border-color:#e1e3e6!important;background:#e1e3e6!important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice input[disabled].sc-duet-choice + .duet-choice-label.sc-duet-choice{border-color:#e6e6e6!important;background:#e6e6e6!important}.duet-checkmark-container.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;position:absolute;height:100%;top:0;right:0}.has-info.sc-duet-choice .duet-checkmark-container.sc-duet-choice{right:57.6px}.duet-checkmark.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-name:duet-checkmark;animation-name:duet-checkmark;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-transform:scaleX(-1) rotate(135deg) translateZ(0);transform:scaleX(-1) rotate(135deg) translateZ(0);opacity:1;height:20px;width:7.1428571429px;-webkit-transform-origin:left top;transform-origin:left top;border-right:2px solid #0077b3;border-top:2px solid #0077b3;content:\"\";left:-36px;top:30px;position:absolute}.duet-theme-turva.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#111!important}\@-webkit-keyframes duet-checkmark{0%{height:0;width:0;opacity:1}20%{height:0;width:7.1428571429px;opacity:1}40%,to{height:20px;width:7.1428571429px;opacity:1}}\@keyframes duet-checkmark{0%{height:0;width:0;opacity:1}20%{height:0;width:7.1428571429px;opacity:1}40%,to{height:20px;width:7.1428571429px;opacity:1}}svg.sc-duet-choice{fill:currentColor;pointer-events:none;width:100%;min-width:100%;height:auto}.duet-choice-card-icon.sc-duet-choice, svg.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0}.duet-choice-card-icon.sc-duet-choice{width:20px;height:20px;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%;left:16px}.duet-choice-card-collapsible.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:28px!important;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;color:#00294d;font-weight:400;border:2px solid #0077b3;border-top:0;margin-top:-2px;position:relative;z-index:200;background:#fff;display:none}.duet-theme-turva.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{color:#111;border-color:#111}.checked.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{display:block}.duet-choice-card-info.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:28px!important;-webkit-transition:.15s ease;transition:.15s ease;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px;color:#00294d;font-weight:400;font-size:.875rem;border:2px solid #e1e3e6;line-height:1.5;border-top:0;position:relative;z-index:200;background:#f5f8fa;display:none}.duet-theme-turva.sc-duet-choice .duet-choice-card-info.sc-duet-choice{background:#f7f7f7;color:#111}.info.sc-duet-choice .duet-choice-card-info.sc-duet-choice{display:block}.duet-choice-info-toggle.sc-duet-choice{-moz-appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-appearance:none;appearance:none;position:absolute;-webkit-transition:.15s ease;transition:.15s ease;border-top-right-radius:4px;border-bottom-right-radius:4px;width:57.6px;background:#fff;top:-2px;right:-2px;bottom:-2px;border:2px solid #e1e3e6;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}[disabled].sc-duet-choice + label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{pointer-events:none;border-color:#e1e3e6!important;background:#f5f8fa!important}[disabled].sc-duet-choice + label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice span.sc-duet-choice{color:#909599!important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice + label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-color:#e6e6e6!important;background:#f7f7f7!important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice + label.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice span.sc-duet-choice{color:#757575!important}.duet-choice-info-toggle.sc-duet-choice:focus{outline:none}.user-is-tabbing.sc-duet-choice-h .duet-choice-info-toggle.sc-duet-choice:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-choice-info-toggle.sc-duet-choice{border-left-color:#909599}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-choice-info-toggle.sc-duet-choice{border-left-color:#757575}.checked.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:#0077b3!important}.checked.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:#111!important}.info.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{background:#f5f8fa;border-bottom-right-radius:0}.info.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice:after{content:\"\";bottom:-4px;left:0;background:#f5f8fa;width:100%;z-index:3;position:absolute;height:4px}.info.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice, .info.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice:after{background:#f7f7f7}.duet-choice-info-toggle.sc-duet-choice span.sc-duet-choice{display:block;color:#0077b3;width:20px;height:20px}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice span.sc-duet-choice{color:#c60c30}.duet-choice-input.sc-duet-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);color:transparent;speak:none}"; }
};
const DuetChoiceGroup = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
this.errorId = jsUtils.jsUtils_2("DuetError");
this.labelId = jsUtils.jsUtils_2("DuetLabel");
this.choiceButtons = [];
/**
* Direction of the choice group. Can be one of: "vertical", "horizontal".
*/
this.direction = "vertical";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Theme of the choice group. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Display choice group in error state along with an error message.
*/
this.error = "";
/**
* Legend displayed for the choice buttons in this group.
*/
this.label = "Label";
/**
* Additional caption to show inside the label of the choice group.
*/
this.caption = "";
/**
* Enable or disable the automatic responsive behaviour of the choice group component when horizontal setting is used. Setting this option to "true" makes sure that contents are stacked vertically on mobile.
*/
this.responsive = false;
this.duetChange = core.createEvent(this, "duetChange", 3);
}
nameChanged() {
this.updateButtons();
}
valueChanged() {
this.updateButtons();
}
disabledChanged() {
this.updateButtons();
}
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
// Grab choice buttons from this component
this.choiceButtons = Array.from(this.element.querySelectorAll("duet-choice"));
if (this.choiceButtons.length === 0) {
throw new Error("[duet-choice-group] Must have at least one duet-choice child");
}
this.updateButtons();
this.choiceButtons.forEach(choiceButton => {
choiceButton.addEventListener("duetChange", e => this.selectedChoiceButtonChanged(e));
});
}
componentDidUnload() {
this.choiceButtons.forEach(choiceButton => {
choiceButton.removeEventListener("duetChange", e => this.selectedChoiceButtonChanged(e));
});
}
selectedChoiceButtonChanged(event) {
if (event && event.target) {
this.value = event.target.value;
}
else {
this.value = "Error: value missing";
}
this.duetChange.emit({
originalEvent: event,
value: this.value,
component: "duet-choice-group",
});
event.cancelBubble = true;
}
updateButtons() {
this.choiceButtons.forEach(button => {
button.name = this.name;
button.groupDisabled = this.disabled;
button.checked = button.value === this.value;
button.groupDirection = this.direction;
});
}
/**
* Forces render() update for `duet-choice-group`. Use this when e.g. changing the global language.
*/
async refresh() {
this.element.forceUpdate();
}
/**
* hostData() function
* Used to dynamically set host element attributes.
* Should be placed directly above render()
*/
hostData() {
return {
class: {
horizontal: this.direction === "horizontal",
"duet-m-0": this.margin === "none",
},
};
}
/**
* render() function
* Always the last one in the class.
*/
__stencil_render() {
return (core.h("fieldset", { "aria-labelledby": this.labelId + " " + this.errorId, class: { "duet-fieldset": true, "has-error": this.error !== "", "duet-theme-turva": this.theme === "turva" } }, core.h("legend", { id: this.labelId }, this.label, this.caption ? (core.h("div", null, core.h("duet-spacer", { size: "small" }), core.h("duet-paragraph", { margin: "none" }, this.caption))) : ("")), core.h("div", { class: { "duet-choice-group": true, "duet-no-stacking": !this.responsive } }, core.h("slot", null)), core.h("span", { class: "duet-choice-group-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error !== "" ? core.h("span", null, this.error) : "")));
}
get element() { return core.getElement(this); }
static get watchers() { return {
"name": ["nameChanged"],
"value": ["valueChanged"],
"disabled": ["disabledChanged"]
}; }
render() { return core.h(core.Host, this.hostData(), this.__stencil_render()); }
static get style() { return ":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-bottom:8px!important;width:100%}:host,:host(.horizontal) .duet-choice-group{display:block}\@media only screen and (min-width:48em){:host(.horizontal) .duet-choice-group{display:-ms-flexbox;display:flex}}:host(.horizontal) .duet-choice-group.duet-no-stacking{display:-ms-flexbox;display:flex}:host(.duet-m-0){margin:0!important}.deut-choice-group{width:100%}.deut-choice-group,fieldset{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0}fieldset{margin-top:8px}:host(.duet-m-0) fieldset{margin:0!important}legend{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0;margin:0;margin-bottom:12px!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:transparent;color:#00294d;font-weight:600;line-height:1.25;z-index:100;width:100%;position:relative;text-align:left;display:block}.duet-theme-turva legend,legend.duet-theme-turva{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-choice-group-help{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-radius:4px;font-size:.875rem;color:#657787;font-weight:400;line-height:1.25;display:block}.duet-choice-group-help span{display:block;margin-top:8px}.duet-theme-turva .duet-choice-group-help{color:#757575}.has-error .duet-choice-group-help{color:#de2362}.duet-theme-turva.has-error .duet-choice-group-help{color:#e02a0d}"; }
};
exports.duet_choice = DuetChoice;
exports.duet_choice_group = DuetChoiceGroup;