npm - @nanoporetech-digital/components - Versions diffs - 4.8.0 → 4.9.0 - Mend

@nanoporetech-digital/components 4.8.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/nano-components/p-c784fdac.js ADDED Viewed

@@ -0,0 +1,4 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+(()=>{"use strict";const e=(e,t)=>{const n=globalThis[t];return n!=null&&e instanceof n};const t=n=>{if(n!=null){if(e(n,"ArrayBuffer")||e(n,"MessagePort")||e(n,"ImageBitmap")||e(n,"OffscreenCanvas")){return[n]}if(typeof n==="object"){if(n.constructor===Object){n=Object.values(n)}if(Array.isArray(n)){return n.flatMap(t)}return t(n.buffer)}}return[]};const n={};const r="stencil.table.worker";const o=r+".cb";addEventListener("message",(async({data:e})=>{if(e&&e[0]===r){let s=e[1];let i=e[2];let f=e[3];let u=0;let c=f.length;let a;let l;try{for(;u<c;u++){if(Array.isArray(f[u])&&f[u][0]===o){const e=f[u][1];f[u]=(...t)=>{postMessage([o,e,t])}}}a=await n[i](...f)}catch(e){a=null;if(e instanceof Error){l={isError:true,value:{message:e.message,name:e.name,stack:e.stack}}}else{l={isError:false,value:e}}a=undefined}const p=t(a);postMessage([r,s,a,l],p)}}));var s=typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:typeof global!=="undefined"?global:typeof self!=="undefined"?self:{};var i=1/0;var f="[object Symbol]";var u=/[\\^$.*+?()[\]{}|]/g,c=RegExp(u.source);var a=typeof s=="object"&&s&&s.Object===Object&&s;var l=typeof self=="object"&&self&&self.Object===Object&&self;var p=a||l||Function("return this")();var d=Object.prototype;var h=d.toString;var w=p.Symbol;var y=w?w.prototype:undefined,g=y?y.toString:undefined;function b(e){if(typeof e=="string"){return e}if(m(e)){return g?g.call(e):""}var t=e+"";return t=="0"&&1/e==-i?"-0":t}function v(e){return!!e&&typeof e=="object"}function m(e){return typeof e=="symbol"||v(e)&&h.call(e)==f}function k(e){return e==null?"":b(e)}function $(e){e=k(e);return e&&c.test(e)?e.replace(u,"\\$&"):e}var E=$;function x(e,t){if(typeof e==="string"){return t.checkString(e)}else if(typeof e==="number"){return t.checkNumber(e)}else{return false}}function A(e,t,n,r){if(typeof e==="object"){if(Array.isArray(e)){for(const o of e){if(A(o,t,n,r)){return true}}}else{for(const o in e){n.push(o);const s=A(e[o],t,n,r);n.pop();if(s)return true}}}else if(t.type==="exists"){if(t.key.test(n.join("."))){return!!e}else{return false}}else{const o=n.join(".");for(const e of r.ignorePaths){if(e.test(o))return false}if(r.includePaths){let e=false;for(const t of r.includePaths){if(t.test(o)){e=true;break}}if(!e)return false}if(t.key){if(!t.key.test(o))return false}return x(e,t)}return false}function j(e,t,n,r){if(t.length){let o=false;for(const s of t){if(A(e,s,[],r)?!s.negate:s.negate){if(n==="OR"){return true}o=true}else if(n==="AND"){return false}}return o}return true}function N(e,t){const n=[];let r=false;let o=0;let s="";for(let i=0;i<e.length;i++){const f=e[i];if(r){if(f===s){r=false;s=""}}else if(f==='"'||f==="'"){r=true;s=f}else if(f.match(t)&&!r){n.push(e.slice(o,i).trim());o=i+1}if(i===e.length-1){n.push(e.slice(o).trim())}}return n.map((e=>{if(e.startsWith('"')&&e.endsWith('"')){return e.slice(1,-1)}if(e.startsWith("'")&&e.endsWith("'")){return e.slice(1,-1)}return e})).filter((e=>e))}const O={"<":function e(t){const n=Number(t[0]);return e=>e<n},"<=":function e(t){const n=Number(t[0]);return e=>e<=n},"=":function e(t){const n=t[0].split(",").filter((e=>e)).map(Number);return e=>{for(let t=0;t<n.length;t++){if(e===n[t]){return true}}return false}},">=":function e(t){const n=Number(t[0]);return e=>e>=n},">":function e(t){const n=Number(t[0]);return e=>e>n},"..":function e(t){const n=Number(t[0]);const r=Number(t[1]);return e=>e>=n&&e<=r}};function P(e){const{values:t,operator:n}=R(e);const r=O[n];if(!r){throw new Error(`unknown operator ${n}`)}return r(t)}function R(e){const t=/^\s*\(?\s*(?<startOperator><=|>=|<|=|>|\.\.\s*)?\s*(?<firstValue>-?\d*\.?\d+)\s*(?:(?<afterDots>\.\.)\s*(?<secondValue>-?\d*\.?\d*))?\s*\)?\s*$/.exec(e);if(!t){return{operator:"=",values:[e]}}if(!t.groups){throw new Error("unreachable")}const{startOperator:n,firstValue:r,afterDots:o,secondValue:s}=t.groups;let i=n;let f=r?[r]:[];if(n===".."){i="<="}else if(!n&&o&&!s){i=">="}else if(o){i=".."}if(s){f.push(s)}return{values:f,operator:i||"="}}const D={"<":function e(t){return e=>e<t[0]},"<=":function e(t){return e=>e<=t[0]},"=":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(`^${E(e)}$`,n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},"~":function e(t,n){const r=N(t[0],",").filter((e=>e)).map((e=>new RegExp(E(e),n)));return e=>{for(const t of r){if(t.test(e)){return true}}return false}},">=":function e(t){return e=>e>=t[0]},">":function e(t){return e=>e>t[0]},"..":function e(t){return e=>e>=t[0]&&e<=t[1]}};function _(e,t){const{values:n,operator:r}=I(e);const o=D[r];if(!o){throw new Error(`unreachable unknown operator ${r}`)}return o(n,t)}function I(e){const t=e.split("..");const n=/^\s*\(?(?<operator><=|<|=|>=|>)?\s*(?<value>\S*)\s*\)?$/.exec(t[0]);if(!n){return{operator:"~",values:[e]}}if(!n.groups){throw new Error("unreachable")}let{operator:r,value:o}=n.groups;let s=t[1]?.trim();let i=[o];if(t.length>1){r="..";if(!s){r=">="}else if(!o){i=[s];r="<="}else{i.push(s)}}return{operator:r||"~",values:i}}function S(e,t={pathAlias:{}}){const{caseSensitive:n,pathAlias:r}=t;const o=n?"":"i";let s=false;if(e.startsWith("-")){s=true;e=e.substring(1)}const i=e.indexOf(":");if(i>-1){const t=e.substring(i+1);if(i>0){const n=e.substring(0,i);if(n==="is"){return{type:"exists",negate:s,key:new RegExp(`(^|\\.)${E(t)}(\\.|$)`,o)}}else{return{type:"matches",negate:s,key:r[n]?r[n]:new RegExp(`(^|\\.)${E(n)}(\\.|$)`,o),checkNumber:P(t),checkString:_(t,o)}}}}return{type:"matches",negate:s,checkNumber:P(e),checkString:_(e,o)}}function M(e,t={pathAlias:{}}){return e.map((e=>S(e,t)))}function V(e,t){const{insensitive:n}=t;const r={};for(const[t,o]of Object.entries(e)){if(o instanceof RegExp){r[t]=o}else{r[t]=new RegExp(`(^|\\.)${E(o)}(\\.|$)`,n)}}return r}function T(e,t={}){let{index:n=false,predicate:r="AND",ignorePaths:o=[],includePaths:s,pathAlias:i={}}=t;const f=t.limit?t.limit:Infinity;const u=t.caseSensitive?"":"i";let c=t.keywords||[];const a=V(i,{insensitive:u});const l=o.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e));const p=s?s.map((e=>typeof e==="string"?new RegExp(`(^|\\.)${E(e)}(\\.|$)`,u):e)):undefined;if(typeof c==="string"){c=N(c,/[ \t\r\n]/)}const d=M(c,{caseSensitive:t.caseSensitive,pathAlias:a});let h=0;if(n){const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(n)}}return t}else{const t=[];for(let n=0;n<e.length&&h<f;n++){if(j(e[n],d,r,{ignorePaths:l,includePaths:p,pathAlias:a})){h=t.push(e[n])}}return t}}const B=new Map;function F(){return Date.now().toString(36)+Math.random().toString(36).substring(2)}async function C(e,t){const n=F();B.set(n,{rows:e,columns:W(t)});return n}async function L(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.rows=t;if(!n.rows&&!n.columns)X(e);return true}async function q(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.columns=W(t);if(!n.rows&&!n.columns)X(e);return true}async function z(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;n.searchTerm=t;if(!t||!t.length){n.filterRows=n.rows;return U(n,n.rows)}const r=n.columns.filter((e=>e.searchable!==false));n.filterRows=T(n.rows,{keywords:t,predicate:"OR",includePaths:[...r.map((e=>e.prop))],ignorePaths:["__uuid","__index"]});return U(n,n.filterRows)}function G(e,t=[]){if(!t)return e;t.forEach((t=>{if(typeof t.filter==="boolean"){e=e.filter((e=>e[t.prop]===t.filter))}else{e=T(e,{keywords:t.filter,includePaths:[t.prop],ignorePaths:["__uuid","__index"]})}}));return e}async function H(e,t){const n=B.get(e);if(!n)throw"cannot find worker with ID "+e;const r=(!t||!t.length)&&n.searchTerm?await z(e,n.searchTerm):n.searchTerm?n.filterRows:n.rows;n.filterRows=G(r,t);return K(n,n.filterRows)}function J(e){const t=e.columns.find((e=>!!e.order));if(t){const{prop:e,order:n}=t;return{prop:e,order:n}}return null}function K(e,t,n,r){if(!n&&!r){const t=J(e);if(t){({prop:n,order:r}=t)}}if(!n||!r||!t.length)return t;const o=e.columns.find((e=>e.prop===n));if(!!o.sortCompareFn&&typeof o.sortCompareFn==="function"){const e=t.slice().sort(o.sortCompareFn(n,r));return e}if(o.type==="text"&&typeof t[0][n]==="string"){const e=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;return r==="asc"?e[n].localeCompare(t[n]):t[n].localeCompare(e[n])}));return e}const s=t.slice().sort(((e,t)=>{if(!e[n])return 1;if(!t[n])return-1;if(e[n]<t[n])return r==="asc"?-1:1;if(e[n]>t[n])return r==="asc"?1:-1;return 0}));return s}async function Q(e,t,n){const r=B.get(e);if(!r)throw"cannot find worker with ID "+e;const o=r.filterRows||r.rows;return K(r,o,t,n)}function U(e,t){t=G(t);return K(e,t)}function W(e){return e.map((e=>{if(!!e.sortCompareFn){e.sortCompareFn=new Function("return "+e.sortCompareFn)()}return e}))}async function X(e){B.delete(e)}n.createWorkerStore=C;n.destroyWorkerStore=X;n.syncConfigToWorker=q;n.syncDataToWorker=L;n.workerFilter=H;n.workerSearch=z;n.workerSort=Q})();

package/dist/themes/nanopore.cn.css CHANGED Viewed

	@@ -1 +1 @@
1	- html{font-family:var(--nano-font-family);font-weight:var(--nano-font-weight, 400);color:var(--nano-text-color, #4a4a4a);font-size:var(--nano-base-font-size)}a{color:var(--nano-color-primary, #007495);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-block:16px 10px;font-weight:600;line-height:1.2}h1{margin-block-start:10px;font-size:28px}h2{margin-block-start:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{inset-block-start:-0.5em}sub{inset-block-end:-0.25em}p{font-size:1.125rem;line-height:1.4;margin-block:0 1rem}p.supporting{font-size:.875rem}.heading{font-weight:500;line-height:1.3;margin-block:0 1.5rem;margin-inline:0}.heading__highlight{color:#007495}@media print{.heading{color:#4a4a4a}}.heading--one{font-size:2.5rem}@media(min-width: 768px){.heading--one{font-size:3.25rem}}.heading--two{font-size:1.5rem}@media(min-width: 768px){.heading--two{font-size:2rem}}.heading--three{font-size:1.125rem}@media(min-width: 768px){.heading--three{font-size:1.375rem}}.heading--four{font-size:1.125rem}.heading--five{font-size:1rem}.heading--light{font-weight:200}.heading--upper{text-transform:uppercase}.heading--meta{font-size:.875rem;text-transform:uppercase;letter-spacing:1.3px;font-weight:bold;margin-block-end:1rem}.button{padding:0;border:none;background-color:rgba(0,0,0,0);font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out,box-shadow 100ms ease-in-out,border-color 100ms ease-in-out,color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0,0,0,.02)}.button::-moz-focus-inner{border:0;padding:0}.button:hover,.button:focus{text-decoration:none;color:inherit}@media print{.button{display:none}}.button:focus,.button.button--focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.button nano-icon,.button nano-spinner{--base-color-rgb: 255 255 255;margin-inline-start:.5em;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.button.button--icon-start nano-icon,.button.button--icon-start nano-spinner{margin-inline-start:0;margin-inline-end:.5em}.button:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.button:active:not(.button--disabled):not(:disabled){box-shadow:none}.button--disabled,.button:disabled{opacity:.6}.button--disabled:hover,.button:disabled:hover{cursor:default}.button--primary{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled),.button--primary.button--active{background-color:var(--nano-color-primary-shade, #00637f);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--primary.button--active.button--keyline{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:focus{color:var(--nano-color-primary-contrast, #fff)}.button--primary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--nano-color-primary, #007495);border-color:var(--nano-color-primary, #007495)}.button--primary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--primary.button--keyline:not(:focus):not(.button--focus),.button--primary.button--keyline.button--active{box-shadow:none}.button--secondary{background-color:#17bb75;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled),.button--secondary.button--active{background-color:#0b814f;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--secondary.button--active.button--keyline{background-color:#17bb75;color:#fff}.button--secondary:focus{color:#fff}.button--secondary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#17bb75;border-color:#17bb75}.button--secondary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--secondary.button--keyline:not(:focus):not(.button--focus),.button--secondary.button--keyline.button--active{box-shadow:none}.button--light{background-color:#fff;color:#007495}.button--light:hover:not(.button--disabled):not(:disabled),.button--light.button--active{background-color:#fff;color:#0c5a71}.button--light:hover:not(.button--disabled):not(:disabled).button--keyline,.button--light.button--active.button--keyline{background-color:#fff;color:#007495}.button--light:focus{color:#007495}.button--light.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#fff;border-color:#fff}.button--light.button--keyline:hover:not(.button--disabled):not(:disabled),.button--light.button--keyline:not(:focus):not(.button--focus),.button--light.button--keyline.button--active{box-shadow:none}.button--danger{background-color:#ef4135;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled),.button--danger.button--active{background-color:#be2a20;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled).button--keyline,.button--danger.button--active.button--keyline{background-color:#ef4135;color:#fff}.button--danger:focus{color:#fff}.button--danger.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#ef4135;border-color:#ef4135}.button--danger.button--keyline:hover:not(.button--disabled):not(:disabled),.button--danger.button--keyline:not(:focus):not(.button--focus),.button--danger.button--keyline.button--active{box-shadow:none}.button--warning{background-color:#f57e20;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled),.button--warning.button--active{background-color:#b95e17;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled).button--keyline,.button--warning.button--active.button--keyline{background-color:#f57e20;color:#fff}.button--warning:focus{color:#fff}.button--warning.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#f57e20;border-color:#f57e20}.button--warning.button--keyline:hover:not(.button--disabled):not(:disabled),.button--warning.button--keyline:not(:focus):not(.button--focus),.button--warning.button--keyline.button--active{box-shadow:none}.button--tertiary{background:rgba(0,0,0,0);box-shadow:none;text-decoration:underline;font-weight:400}.button--tertiary:hover:not(.button--disabled):not(:disabled),.button--tertiary:hover.button--active,.button--tertiary:focus:not(.button--disabled):not(:disabled),.button--tertiary:focus.button--active{color:#b5aea7;box-shadow:none;text-decoration:underline}.nano-color-primary{--nano-color-base: var(--nano-color-primary, #007495) ;--nano-color-base-rgb: var( --nano-color-primary-rgb, 0 116 149 ) ;--nano-color-contrast: var(--nano-color-primary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-primary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-primary-shade, #00637f) ;--nano-color-tint: var(--nano-color-primary-tint, #2689a5) ;--nano-color-tint-rgb: var( --nano-color-primary-tint-rgb, 38 137 165 ) }.nano-color-secondary{--nano-color-base: var(--nano-color-secondary, #548caf) ;--nano-color-base-rgb: var( --nano-color-secondary-rgb, 84 140 175 ) ;--nano-color-contrast: var(--nano-color-secondary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-secondary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-secondary-shade, #477795) ;--nano-color-tint: var(--nano-color-secondary-tint, #6e9dbb) ;--nano-color-tint-rgb: var( --nano-color-secondary-tint-rgb, 110 157 187 ) }.nano-color-tertiary{--nano-color-base: var(--nano-color-tertiary, #b5aea7) ;--nano-color-base-rgb: var( --nano-color-tertiary-rgb, 181 174 167 ) ;--nano-color-contrast: var(--nano-color-tertiary-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-tertiary-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-tertiary-shade, #9a948e) ;--nano-color-tint: var(--nano-color-tertiary-tint, #c0bab4) ;--nano-color-tint-rgb: var( --nano-color-tertiary-tint-rgb, 192 186 180 ) }.nano-color-success{--nano-color-base: var(--nano-color-success, #17bb75) ;--nano-color-base-rgb: var( --nano-color-success-rgb, 23 187 117 ) ;--nano-color-contrast: var(--nano-color-success-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-success-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-success-shade, #149f63) ;--nano-color-tint: var(--nano-color-success-tint, #3ac58a) ;--nano-color-tint-rgb: var( --nano-color-success-tint-rgb, 58 197 138 ) }.nano-color-warning{--nano-color-base: var(--nano-color-warning, #f57e20) ;--nano-color-base-rgb: var( --nano-color-warning-rgb, 245 126 32 ) ;--nano-color-contrast: var(--nano-color-warning-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-warning-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-warning-shade, #d06b1b) ;--nano-color-tint: var(--nano-color-warning-tint, #f79141) ;--nano-color-tint-rgb: var( --nano-color-warning-tint-rgb, 247 145 65 ) }.nano-color-danger{--nano-color-base: var(--nano-color-danger, #ef4135) ;--nano-color-base-rgb: var( --nano-color-danger-rgb, 239 65 53 ) ;--nano-color-contrast: var(--nano-color-danger-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-danger-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-danger-shade, #cb372d) ;--nano-color-tint: var(--nano-color-danger-tint, #f15e53) ;--nano-color-tint-rgb: var( --nano-color-danger-tint-rgb, 241 94 83 ) }.nano-color-light{--nano-color-base: var(--nano-color-light, #f2f7f9) ;--nano-color-base-rgb: var( --nano-color-light-rgb, 242 247 249 ) ;--nano-color-contrast: var(--nano-color-light-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-light-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-light-shade, #ced2d4) ;--nano-color-tint: var(--nano-color-light-tint, #f4f8fa) ;--nano-color-tint-rgb: var( --nano-color-light-tint-rgb, 244 248 250 ) }.nano-color-medium{--nano-color-base: var(--nano-color-medium, #005c75) ;--nano-color-base-rgb: var( --nano-color-medium-rgb, 0 92 117 ) ;--nano-color-contrast: var(--nano-color-medium-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-medium-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-medium-shade, #004e63) ;--nano-color-tint: var(--nano-color-medium-tint, #26748a) ;--nano-color-tint-rgb: var( --nano-color-medium-tint-rgb, 38 116 138 ) }.nano-color-dark{--nano-color-base: var(--nano-color-dark, #455556) ;--nano-color-base-rgb: var( --nano-color-dark-rgb, 69 85 86 ) ;--nano-color-contrast: var(--nano-color-dark-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-dark-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-dark-shade, #3b4849) ;--nano-color-tint: var(--nano-color-dark-tint, #616f6f) ;--nano-color-tint-rgb: var( --nano-color-dark-tint-rgb, 97 111 111 ) }:root{--nano-base-font-size: 16px;--nano-padding: 1rem;--nano-font-family: helvetica, arial, "Lucida Grande", sans-serif;--nano-color-white:#fff;--nano-color-white-rgb:255 255 255;--nano-color-lightblue:#90c6e7;--nano-color-lightblue-rgb:144 198 231;--nano-color-blue:#007495;--nano-color-blue-rgb:0 116 149;--nano-color-darkblue:#0c5a71;--nano-color-darkblue-rgb:12 90 113;--nano-color-darkgrey:#455556;--nano-color-darkgrey-rgb:69 85 86;--nano-color-palegrey:#b5aea7;--nano-color-palegrey-rgb:181 174 167;--nano-color-dimgrey:#918b86;--nano-color-dimgrey-rgb:145 139 134;--nano-color-lightgrey:#e4e6e8;--nano-color-lightgrey-rgb:228 230 232;--nano-color-mediumgrey:#687576;--nano-color-mediumgrey-rgb:104 117 118;--nano-color-green:#17bb75;--nano-color-green-rgb:23 187 117;--nano-color-orange:#f57e20;--nano-color-orange-rgb:245 126 32;--nano-color-paleyellow:#ede797;--nano-color-paleyellow-rgb:237 231 151;--nano-color-purple:#a53f97;--nano-color-purple-rgb:165 63 151;--nano-color-red:#ef4135;--nano-color-red-rgb:239 65 53;--nano-color-yellow:#f5cc49;--nano-color-yellow-rgb:245 204 73;--nano-color-background:#f0efed;--nano-color-background-rgb:240 239 237;--nano-color-black:#4a4a4a;--nano-color-black-rgb:74 74 74;--nano-color-celsius:#f0efed;--nano-color-celsius-rgb:240 239 237;--nano-color-offwhite:#f9f9fb;--nano-color-offwhite-rgb:249 249 251;--nano-color-darkblue--faded:#005c75;--nano-color-darkblue--faded-rgb:0 92 117;--nano-color-red--faded:#fee8de;--nano-color-red--faded-rgb:254 232 222;--nano-color-orange--faded:#feeddb;--nano-color-orange--faded-rgb:254 237 219;--nano-color-yellow--faded:#fefcf2;--nano-color-yellow--faded-rgb:254 252 242;--nano-color-green--faded:#edf5f2;--nano-color-green--faded-rgb:237 245 242;--nano-color-blue--faded:#f2f7f9;--nano-color-blue--faded-rgb:242 247 249;--nano-color-blue--darker:#245a6f;--nano-color-blue--darker-rgb:36 90 111;--nano-color-green--darker:#0b814f;--nano-color-green--darker-rgb:11 129 79;--nano-color-red--darker:#be2a20;--nano-color-red--darker-rgb:190 42 32;--nano-color-purple--darker:#772c6d;--nano-color-purple--darker-rgb:119 44 109;--nano-color-orange--darker:#b95e17;--nano-color-orange--darker-rgb:185 94 23;--nano-color-palegrey--darker:#8c8379;--nano-color-palegrey--darker-rgb:140 131 121;--nano-color-lightblue--darker:#548caf;--nano-color-lightblue--darker-rgb:84 140 175}@media(max-width: 576px){:root{--nano-base-font-size: 14px}}body{background-color:var(--nano-background-color, #f0efed)}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:rgba(181,174,167,.5);margin-block:.5em;margin-inline:0;padding:0}area[href]:not([tabindex="-1"]):focus,iframe:not([tabindex="-1"]):focus,[contentEditable=true]:not([tabindex="-1"]):focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));border-radius:3px}/# sourceMappingURL=nanopore.cn.css.map /
1	+ @font-face{font-family:MHeiPRC;src:url("../nano-assets/fonts/MHeiPRCLight_normal_normal.woff2") format("woff2"),url("../nano-assets/fonts/MHeiPRCLight_normal_normal.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:MHeiPRC;src:url("../nano-assets/fonts/MHeiPRCMedium_normal_normal.woff2") format("woff2"),url("../nano-assets/fonts/MHeiPRCMedium_normal_normal.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:MHeiPRC;src:url("../nano-assets/fonts/MHeiPRCBold_normal_normal.woff2") format("woff2"),url("../nano-assets/fonts/MHeiPRCBold_normal_normal.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:MHeiPRC;src:url("../nano-assets/fonts/MHeiPRCHeavy_normal_normal.woff2") format("woff2"),url("../nano-assets/fonts/MHeiPRCHeavy_normal_normal.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}html{font-family:var(--nano-font-family);font-weight:var(--nano-font-weight, 400);color:var(--nano-text-color, #4a4a4a);font-size:var(--nano-base-font-size)}a{color:var(--nano-color-primary, #007495);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-block:16px 10px;font-weight:600;line-height:1.2}h1{margin-block-start:10px;font-size:28px}h2{margin-block-start:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small{font-size:75%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{inset-block-start:-0.5em}sub{inset-block-end:-0.25em}p{font-size:1.125rem;line-height:1.4;margin-block:0 1rem}p.supporting{font-size:.875rem}.heading{font-weight:500;line-height:1.3;margin-block:0 1.5rem;margin-inline:0}.heading__highlight{color:#007495}@media print{.heading{color:#4a4a4a}}.heading--one{font-size:2.5rem}@media(min-width: 768px){.heading--one{font-size:3.25rem}}.heading--two{font-size:1.5rem}@media(min-width: 768px){.heading--two{font-size:2rem}}.heading--three{font-size:1.125rem}@media(min-width: 768px){.heading--three{font-size:1.375rem}}.heading--four{font-size:1.125rem}.heading--five{font-size:1rem}.heading--light{font-weight:200}.heading--upper{text-transform:uppercase}.heading--meta{font-size:.875rem;text-transform:uppercase;letter-spacing:1.3px;font-weight:bold;margin-block-end:1rem}.button{padding:0;border:none;background-color:rgba(0,0,0,0);font:inherit;-webkit-box-align:center;text-decoration:none;color:inherit;transition:background-color 100ms ease-in-out,box-shadow 100ms ease-in-out,border-color 100ms ease-in-out,color 100ms ease-in-out;padding-inline:var(--nano-btn-padding-start, 1rem) var(--nano-btn-padding-end, 1rem);padding-block:var(--nano-btn-padding-top, 0.5rem) var(--nano-btn-padding-bottom, 0.5rem);box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));display:inline-block;border-radius:var(--nano-btn-border-radius, 5px);line-height:var(--nano-btn-line-height, 1.5em);font-weight:400;cursor:pointer;background:rgba(0,0,0,.02)}.button::-moz-focus-inner{border:0;padding:0}.button:hover,.button:focus{text-decoration:none;color:inherit}@media print{.button{display:none}}.button:focus,.button.button--focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.button nano-icon,.button nano-spinner{--base-color-rgb: 255 255 255;margin-inline-start:.5em;margin-inline-end:0;font-size:var(--nano-btn-icon-size, 1em);vertical-align:middle;margin-block-start:-0.188em;display:inline-block}.button.button--icon-start nano-icon,.button.button--icon-start nano-spinner{margin-inline-start:0;margin-inline-end:.5em}.button:hover:not(.button--disabled){box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}.button:active:not(.button--disabled):not(:disabled){box-shadow:none}.button--disabled,.button:disabled{opacity:.6}.button--disabled:hover,.button:disabled:hover{cursor:default}.button--primary{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled),.button--primary.button--active{background-color:var(--nano-color-primary-shade, #00637f);color:var(--nano-color-primary-contrast, #fff)}.button--primary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--primary.button--active.button--keyline{background-color:var(--nano-color-primary, #007495);color:var(--nano-color-primary-contrast, #fff)}.button--primary:focus{color:var(--nano-color-primary-contrast, #fff)}.button--primary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:var(--nano-color-primary, #007495);border-color:var(--nano-color-primary, #007495)}.button--primary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--primary.button--keyline:not(:focus):not(.button--focus),.button--primary.button--keyline.button--active{box-shadow:none}.button--secondary{background-color:#17bb75;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled),.button--secondary.button--active{background-color:#0b814f;color:#fff}.button--secondary:hover:not(.button--disabled):not(:disabled).button--keyline,.button--secondary.button--active.button--keyline{background-color:#17bb75;color:#fff}.button--secondary:focus{color:#fff}.button--secondary.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#17bb75;border-color:#17bb75}.button--secondary.button--keyline:hover:not(.button--disabled):not(:disabled),.button--secondary.button--keyline:not(:focus):not(.button--focus),.button--secondary.button--keyline.button--active{box-shadow:none}.button--light{background-color:#fff;color:#007495}.button--light:hover:not(.button--disabled):not(:disabled),.button--light.button--active{background-color:#fff;color:#0c5a71}.button--light:hover:not(.button--disabled):not(:disabled).button--keyline,.button--light.button--active.button--keyline{background-color:#fff;color:#007495}.button--light:focus{color:#007495}.button--light.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#fff;border-color:#fff}.button--light.button--keyline:hover:not(.button--disabled):not(:disabled),.button--light.button--keyline:not(:focus):not(.button--focus),.button--light.button--keyline.button--active{box-shadow:none}.button--danger{background-color:#ef4135;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled),.button--danger.button--active{background-color:#be2a20;color:#fff}.button--danger:hover:not(.button--disabled):not(:disabled).button--keyline,.button--danger.button--active.button--keyline{background-color:#ef4135;color:#fff}.button--danger:focus{color:#fff}.button--danger.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#ef4135;border-color:#ef4135}.button--danger.button--keyline:hover:not(.button--disabled):not(:disabled),.button--danger.button--keyline:not(:focus):not(.button--focus),.button--danger.button--keyline.button--active{box-shadow:none}.button--warning{background-color:#f57e20;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled),.button--warning.button--active{background-color:#b95e17;color:#fff}.button--warning:hover:not(.button--disabled):not(:disabled).button--keyline,.button--warning.button--active.button--keyline{background-color:#f57e20;color:#fff}.button--warning:focus{color:#fff}.button--warning.button--keyline{background:rgba(0,0,0,0);border-style:var(--nano-btn-border-style, solid);border-width:var(--nano-btn-border-width, 2px);border-radius:var(--nano-btn-border-radius, 5px);padding-block:calc(var(--nano-btn-padding-top, 0.5rem) - var(--nano-btn-border-width, 2px)) calc(var(--nano-btn-padding-bottom, 0.5rem) - var(--nano-btn-border-width, 2px));color:#f57e20;border-color:#f57e20}.button--warning.button--keyline:hover:not(.button--disabled):not(:disabled),.button--warning.button--keyline:not(:focus):not(.button--focus),.button--warning.button--keyline.button--active{box-shadow:none}.button--tertiary{background:rgba(0,0,0,0);box-shadow:none;text-decoration:underline;font-weight:400}.button--tertiary:hover:not(.button--disabled):not(:disabled),.button--tertiary:hover.button--active,.button--tertiary:focus:not(.button--disabled):not(:disabled),.button--tertiary:focus.button--active{color:#b5aea7;box-shadow:none;text-decoration:underline}.nano-color-primary{--nano-color-base: var(--nano-color-primary, #007495) ;--nano-color-base-rgb: var( --nano-color-primary-rgb, 0 116 149 ) ;--nano-color-contrast: var(--nano-color-primary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-primary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-primary-shade, #00637f) ;--nano-color-tint: var(--nano-color-primary-tint, #2689a5) ;--nano-color-tint-rgb: var( --nano-color-primary-tint-rgb, 38 137 165 ) }.nano-color-secondary{--nano-color-base: var(--nano-color-secondary, #548caf) ;--nano-color-base-rgb: var( --nano-color-secondary-rgb, 84 140 175 ) ;--nano-color-contrast: var(--nano-color-secondary-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-secondary-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-secondary-shade, #477795) ;--nano-color-tint: var(--nano-color-secondary-tint, #6e9dbb) ;--nano-color-tint-rgb: var( --nano-color-secondary-tint-rgb, 110 157 187 ) }.nano-color-tertiary{--nano-color-base: var(--nano-color-tertiary, #b5aea7) ;--nano-color-base-rgb: var( --nano-color-tertiary-rgb, 181 174 167 ) ;--nano-color-contrast: var(--nano-color-tertiary-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-tertiary-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-tertiary-shade, #9a948e) ;--nano-color-tint: var(--nano-color-tertiary-tint, #c0bab4) ;--nano-color-tint-rgb: var( --nano-color-tertiary-tint-rgb, 192 186 180 ) }.nano-color-success{--nano-color-base: var(--nano-color-success, #17bb75) ;--nano-color-base-rgb: var( --nano-color-success-rgb, 23 187 117 ) ;--nano-color-contrast: var(--nano-color-success-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-success-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-success-shade, #149f63) ;--nano-color-tint: var(--nano-color-success-tint, #3ac58a) ;--nano-color-tint-rgb: var( --nano-color-success-tint-rgb, 58 197 138 ) }.nano-color-warning{--nano-color-base: var(--nano-color-warning, #f57e20) ;--nano-color-base-rgb: var( --nano-color-warning-rgb, 245 126 32 ) ;--nano-color-contrast: var(--nano-color-warning-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-warning-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-warning-shade, #d06b1b) ;--nano-color-tint: var(--nano-color-warning-tint, #f79141) ;--nano-color-tint-rgb: var( --nano-color-warning-tint-rgb, 247 145 65 ) }.nano-color-danger{--nano-color-base: var(--nano-color-danger, #ef4135) ;--nano-color-base-rgb: var( --nano-color-danger-rgb, 239 65 53 ) ;--nano-color-contrast: var(--nano-color-danger-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-danger-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-danger-shade, #cb372d) ;--nano-color-tint: var(--nano-color-danger-tint, #f15e53) ;--nano-color-tint-rgb: var( --nano-color-danger-tint-rgb, 241 94 83 ) }.nano-color-light{--nano-color-base: var(--nano-color-light, #f2f7f9) ;--nano-color-base-rgb: var( --nano-color-light-rgb, 242 247 249 ) ;--nano-color-contrast: var(--nano-color-light-contrast, #4a4a4a) ;--nano-color-contrast-rgb: var( --nano-color-light-contrast-rgb, 74 74 74 ) ;--nano-color-shade: var(--nano-color-light-shade, #ced2d4) ;--nano-color-tint: var(--nano-color-light-tint, #f4f8fa) ;--nano-color-tint-rgb: var( --nano-color-light-tint-rgb, 244 248 250 ) }.nano-color-medium{--nano-color-base: var(--nano-color-medium, #005c75) ;--nano-color-base-rgb: var( --nano-color-medium-rgb, 0 92 117 ) ;--nano-color-contrast: var(--nano-color-medium-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-medium-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-medium-shade, #004e63) ;--nano-color-tint: var(--nano-color-medium-tint, #26748a) ;--nano-color-tint-rgb: var( --nano-color-medium-tint-rgb, 38 116 138 ) }.nano-color-dark{--nano-color-base: var(--nano-color-dark, #455556) ;--nano-color-base-rgb: var( --nano-color-dark-rgb, 69 85 86 ) ;--nano-color-contrast: var(--nano-color-dark-contrast, #fff) ;--nano-color-contrast-rgb: var( --nano-color-dark-contrast-rgb, 255 255 255 ) ;--nano-color-shade: var(--nano-color-dark-shade, #3b4849) ;--nano-color-tint: var(--nano-color-dark-tint, #616f6f) ;--nano-color-tint-rgb: var( --nano-color-dark-tint-rgb, 97 111 111 ) }:root{--nano-base-font-size: 16px;--nano-padding: 1rem;--nano-font-family: MHeiPRC, helvetica, arial, "Lucida Grande", sans-serif;--nano-color-white:#fff;--nano-color-white-rgb:255 255 255;--nano-color-lightblue:#90c6e7;--nano-color-lightblue-rgb:144 198 231;--nano-color-blue:#007495;--nano-color-blue-rgb:0 116 149;--nano-color-darkblue:#0c5a71;--nano-color-darkblue-rgb:12 90 113;--nano-color-darkgrey:#455556;--nano-color-darkgrey-rgb:69 85 86;--nano-color-palegrey:#b5aea7;--nano-color-palegrey-rgb:181 174 167;--nano-color-dimgrey:#918b86;--nano-color-dimgrey-rgb:145 139 134;--nano-color-lightgrey:#e4e6e8;--nano-color-lightgrey-rgb:228 230 232;--nano-color-mediumgrey:#687576;--nano-color-mediumgrey-rgb:104 117 118;--nano-color-green:#17bb75;--nano-color-green-rgb:23 187 117;--nano-color-orange:#f57e20;--nano-color-orange-rgb:245 126 32;--nano-color-paleyellow:#ede797;--nano-color-paleyellow-rgb:237 231 151;--nano-color-purple:#a53f97;--nano-color-purple-rgb:165 63 151;--nano-color-red:#ef4135;--nano-color-red-rgb:239 65 53;--nano-color-yellow:#f5cc49;--nano-color-yellow-rgb:245 204 73;--nano-color-background:#f0efed;--nano-color-background-rgb:240 239 237;--nano-color-black:#4a4a4a;--nano-color-black-rgb:74 74 74;--nano-color-celsius:#f0efed;--nano-color-celsius-rgb:240 239 237;--nano-color-offwhite:#f9f9fb;--nano-color-offwhite-rgb:249 249 251;--nano-color-darkblue--faded:#005c75;--nano-color-darkblue--faded-rgb:0 92 117;--nano-color-red--faded:#fee8de;--nano-color-red--faded-rgb:254 232 222;--nano-color-orange--faded:#feeddb;--nano-color-orange--faded-rgb:254 237 219;--nano-color-yellow--faded:#fefcf2;--nano-color-yellow--faded-rgb:254 252 242;--nano-color-green--faded:#edf5f2;--nano-color-green--faded-rgb:237 245 242;--nano-color-blue--faded:#f2f7f9;--nano-color-blue--faded-rgb:242 247 249;--nano-color-blue--darker:#245a6f;--nano-color-blue--darker-rgb:36 90 111;--nano-color-green--darker:#0b814f;--nano-color-green--darker-rgb:11 129 79;--nano-color-red--darker:#be2a20;--nano-color-red--darker-rgb:190 42 32;--nano-color-purple--darker:#772c6d;--nano-color-purple--darker-rgb:119 44 109;--nano-color-orange--darker:#b95e17;--nano-color-orange--darker-rgb:185 94 23;--nano-color-palegrey--darker:#8c8379;--nano-color-palegrey--darker-rgb:140 131 121;--nano-color-lightblue--darker:#548caf;--nano-color-lightblue--darker-rgb:84 140 175}@media(max-width: 576px){:root{--nano-base-font-size: 14px}}body{background-color:var(--nano-background-color, #f0efed)}em,i{font-style:normal !important}hr,.horizontal-rule,.content-divider{display:block;block-size:1px;border:0;background-color:rgba(181,174,167,.5);margin-block:.5em;margin-inline:0;padding:0}area[href]:not([tabindex="-1"]):focus,iframe:not([tabindex="-1"]):focus,[contentEditable=true]:not([tabindex="-1"]):focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));border-radius:3px}/# sourceMappingURL=nanopore.cn.css.map /

package/dist/themes/nanopore.cn.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/_colours.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/nano-theme/buttons.scss","../src/global/style/utilities/css-patterns/_unstyled_input.scss","../src/global/style/utilities/css-patterns/_unstyled_anchor.scss","../src/global/style/nano-theme/_button.scss","../src/themes/nanopore.cn.scss","../src/global/style/utilities/_colours.scss","../src/global/style/nano-theme/_form.scss"],"names":[],"mappings":"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","file":"nanopore.cn.css","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/globals';\n@import 'colours';\n\n/// @prop - Font weight of all headings\n$headings-font-weight: 600 !default;\n/// @prop - Line height of all headings\n$headings-line-height: 1.2 !default;\n/// @prop - Font size of heading level 1\n$h1-font-size: 28px !default;\n/// @prop - Font size of heading level 2\n$h2-font-size: 24px !default;\n/// @prop - Font size of heading level 3\n$h3-font-size: 22px !default;\n/// @prop - Font size of heading level 4\n$h4-font-size: 20px !default;\n/// @prop - Font size of heading level 5\n$h5-font-size: 18px !default;\n/// @prop - Font size of heading level 6\n$h6-font-size: 16px !default;\n\nhtml {\n font-family: var(--nano-font-family);\n font-weight: var(--nano-font-weight, 400);\n color: $text-color;\n font-size: var(--nano-base-font-size);\n}\n\na {\n color: nano-color(primary, base);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-block: 16px 10px;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n}\n\nh1 {\n margin-block-start: 10px;\n font-size: $h1-font-size;\n}\n\nh2 {\n margin-block-start: 18px;\n font-size: $h2-font-size;\n}\n\nh3 {\n font-size: $h3-font-size;\n}\n\nh4 {\n font-size: $h4-font-size;\n}\n\nh5 {\n font-size: $h5-font-size;\n}\n\nh6 {\n font-size: $h6-font-size;\n}\n\nsmall {\n font-size: 75%;\n}\n\nsub,\nsup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n}\n\nsup {\n inset-block-start: -0.5em;\n}\n\nsub {\n inset-block-end: -0.25em;\n}\n\np {\n font-size: 1.125rem;\n line-height: 1.4;\n margin-block: 0 1rem;\n\n &.supporting {\n font-size: 0.875rem;\n }\n}\n\n.heading {\n font-weight: 500;\n line-height: 1.3;\n margin-block: 0 1.5rem;\n margin-inline: 0;\n\n &__highlight {\n color: map.get($colors, blue);\n }\n\n @media print {\n color: map.get($colors, black);\n }\n\n &--one {\n font-size: 2.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 3.25rem;\n }\n }\n\n &--two {\n font-size: 1.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 2rem;\n }\n }\n\n &--three {\n font-size: 1.125rem;\n\n @include media-breakpoint-up('md') {\n font-size: 1.375rem;\n }\n }\n\n &--four {\n font-size: 1.125rem;\n }\n\n &--five {\n font-size: 1rem;\n }\n\n &--light {\n font-weight: 200;\n }\n\n &--upper {\n text-transform: uppercase;\n }\n\n &--meta {\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 1.3px;\n font-weight: bold;\n margin-block-end: 1rem;\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/colours';\n\n$colors: (\n white: #fff,\n lightblue: #90c6e7,\n blue: darken(#0084a9, 4%),\n darkblue: #0c5a71,\n darkgrey: #455556,\n palegrey: #b5aea7,\n dimgrey: #918b86,\n lightgrey: #e4e6e8,\n mediumgrey: #687576,\n green: #17bb75,\n orange: #f57e20,\n paleyellow: #ede797,\n purple: #a53f97,\n red: #ef4135,\n yellow: #f5cc49,\n background: #f0efed,\n black: #4a4a4a,\n // Bg Colors\n celsius: #f0efed,\n offwhite: #f9f9fb,\n darkblue--faded: #005c75,\n // Faded Colors\n red--faded: #fee8de,\n orange--faded: #feeddb,\n yellow--faded: #fefcf2,\n green--faded: #edf5f2,\n blue--faded: #f2f7f9,\n // Darkened Colours\n blue--darker: #245a6f,\n green--darker: #0b814f,\n red--darker: #be2a20,\n purple--darker: #772c6d,\n orange--darker: #b95e17,\n palegrey--darker: #8c8379,\n lightblue--darker: #548caf,\n);\n\n// Text\n$dark-text-default: map.get($colors, black);\n$light-text-default: map.get($colors, white);\n\n// Theme\n$primary: map.get($colors, blue) !default;\n$secondary: map.get($colors, lightblue--darker) !default;\n$tertiary: map.get($colors, palegrey) !default;\n$success: map.get($colors, green) !default;\n$warning: map.get($colors, orange) !default;\n$danger: map.get($colors, red) !default;\n$light: map.get($colors, blue--faded) !default;\n$medium: map.get($colors, darkblue--faded) !default;\n$dark: map.get($colors, darkgrey) !default;\n\n// Theme css variables and variations\n$themes: (\n primary: (\n base: $primary,\n contrast: color-contrast($primary),\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n ),\n secondary: (\n base: $secondary,\n contrast: color-contrast($secondary),\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n ),\n tertiary: (\n base: $tertiary,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n ),\n success: (\n base: $success,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n ),\n warning: (\n base: $warning,\n contrast: color-contrast($warning),\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n ),\n danger: (\n base: $danger,\n contrast: color-contrast($danger),\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n ),\n light: (\n base: $light,\n contrast: color-contrast($light),\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n ),\n medium: (\n base: $medium,\n contrast: color-contrast($medium),\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n ),\n dark: (\n base: $dark,\n contrast: color-contrast($dark),\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n ),\n) !default;\n\n// Default Foreground and Background Colors\n// -------------------------------------------------------------------------------------------\n// Used internally to calculate the default steps\n\n$background-color-value: map.get($colors, background) !default;\n$background-color-rgb-value: color-to-rgb-list(\n $background-color-value\n) !default;\n\n$text-color-value: map.get($colors, black) !default;\n$text-color-rgb-value: color-to-rgb-list($text-color-value) !default;\n\n$text-color: var(--nano-text-color, $text-color-value) !default;\n$text-color-rgb: var(--nano-text-color-rgb, $text-color-rgb-value) !default;\n\n$background-color: var(\n --nano-background-color,\n $background-color-value\n) !default;\n$background-color-rgb: var(\n --nano-background-color-rgb,\n $background-color-rgb-value\n) !default;\n","@mixin input-cover() {\n inset-block: 0;\n inset-inline: auto;\n margin: 0;\n inline-size: 100%;\n block-size: 100%;\n border: 0;\n background: transparent;\n cursor: pointer;\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n overflow: hidden;\n pointer-events: none;\n visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $screen-breakpoints,\n $breakpoint-names: map-keys($breakpoints)\n) {\n $n: index($breakpoint-names, $name);\n\n @return if(\n $n < length($breakpoint-names),\n nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin host($hostCtx: null) {\n $root: #{&};\n\n @if $hostCtx {\n @at-root :host(#{$hostCtx}) {\n #{$root} {\n @content;\n }\n }\n }\n\n @else {\n @at-root :host {\n #{$root} {\n @content;\n }\n }\n }\n}\n\n@mixin rtl-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}[dir='rtl']) {\n #{$root} {\n @content;\n }\n }\n}\n\n@mixin ltr-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}:not([dir='rtl'])) {\n #{$root} {\n @content;\n }\n }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n @at-root #{$root + '[dir=rtl]'} {\n @content;\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl !=true or $viewBox==null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n }\n\n @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: str-replace(\n $flipped-url,\n '<polygon',\n '<polygon #{$transform}'\n );\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n@mixin background-position(\n $horizontal,\n $horizontal-amount: null,\n $vertical: null,\n $vertical-amount: null\n) {\n @if $horizontal==start or $horizontal==end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n\n @if $horizontal==start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n }\n\n @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position:\n $horizontal-ltr $horizontal-amount $vertical\n $vertical-amount;\n }\n\n @include rtl() {\n background-position:\n $horizontal-rtl $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n\n @else {\n @include multi-dir() {\n background-position:\n $horizontal $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis==start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n\n @include rtl() {\n transform-origin: right $y-axis;\n }\n }\n\n @else if $x-axis==end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n\n @include rtl() {\n transform-origin: left $y-axis;\n }\n }\n\n @else if $x-axis==left or $x-axis==right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n }\n\n @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n }\n\n @else {\n @if $extra==null {\n $extra: $transform;\n }\n\n @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x== '0' or $x==null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n }\n\n @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n\n@mixin hide-scrollbar() {\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n inline-size: 0;\n block-size: 0;\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import './colours';\n@import './button';\n\n.button {\n @include button-base;\n}\n\n.button--primary {\n @include button-standard(\n #{nano-color(primary, base)},\n #{nano-color(primary, contrast)},\n #{nano-color(primary, shade)}\n );\n}\n\n.button--secondary {\n @include button-standard(\n map.get($colors, green),\n map.get($colors, white),\n map.get($colors, green--darker)\n );\n}\n\n.button--light {\n @include button-standard(\n map.get($colors, white),\n map.get($colors, blue),\n map.get($colors, white),\n map.get($colors, darkblue)\n );\n}\n\n.button--danger {\n @include button-standard(\n map.get($colors, red),\n map.get($colors, white),\n map.get($colors, red--darker)\n );\n}\n\n.button--warning {\n @include button-standard(\n map.get($colors, orange),\n map.get($colors, white),\n map.get($colors, orange--darker)\n );\n}\n\n.button--tertiary {\n background: transparent;\n box-shadow: none;\n text-decoration: underline;\n font-weight: 400;\n\n &:hover,\n &:focus {\n &:not(.button--disabled):not(:disabled),\n &.button--active {\n color: map.get($colors, palegrey);\n box-shadow: none;\n text-decoration: underline;\n }\n }\n}\n","/// Strips browser styling from an input.\n\n@mixin unstyled-input($outline: false) {\n padding: 0;\n border: none;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n\n @if $outline == false {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n}\n","/// Displays an anchor as plain text.\n\n@mixin unstyled-anchor {\n text-decoration: none;\n color: inherit;\n\n &:hover,\n &:focus {\n text-decoration: none;\n color: inherit;\n }\n}\n","@import '../utilities/css-patterns/patterns';\n@import './layers';\n@import './form';\n\n// Border\n$btn-border-radius: var(--nano-btn-border-radius, 5px);\n$btn-border-width: var(--nano-btn-border-width, 2px);\n$btn-border-style: var(--nano-btn-border-style, solid);\n\n// Spacing\n$btn-padding-top: var(--nano-btn-padding-top, 0.5rem);\n$btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5rem);\n$btn-padding-start: var(--nano-btn-padding-start, 1rem);\n$btn-padding-end: var(--nano-btn-padding-end, 1rem);\n$btn-line-height: var(--nano-btn-line-height, 1.5em);\n\n// Misc\n$btn-icon-size: var(--nano-btn-icon-size, 1em);\n\n@mixin transition-hover {\n transition:\n background-color 100ms ease-in-out,\n box-shadow 100ms ease-in-out,\n border-color 100ms ease-in-out,\n color 100ms ease-in-out;\n}\n\n@mixin button-keyline {\n background: transparent;\n border-style: #{$btn-border-style};\n border-width: #{$btn-border-width};\n border-radius: #{$btn-border-radius};\n padding-block:\n calc(#{$btn-padding-top} - #{$btn-border-width})\n calc(#{$btn-padding-bottom} - #{$btn-border-width});\n\n &:hover:not(.button--disabled):not(:disabled),\n &:not(:focus):not(.button--focus),\n &.button--active {\n box-shadow: none;\n }\n}\n\n@mixin button-standard($bg, $font, $bg-hover: false, $font-hover: false) {\n $font-hover: if($font-hover, $font-hover, $font);\n $bg-hover: if($bg-hover, $bg-hover, $bg);\n\n background-color: $bg;\n color: $font;\n\n &:hover:not(.button--disabled):not(:disabled),\n &.button--active {\n background-color: $bg-hover;\n color: $font-hover;\n\n &.button--keyline {\n background-color: $bg;\n color: $font;\n }\n }\n\n &:focus {\n color: $font;\n }\n\n &.button--keyline {\n @include button-keyline;\n\n color: $bg;\n border-color: $bg;\n }\n}\n\n@mixin button-base {\n @include unstyled-input($outline: true);\n @include unstyled-anchor;\n @include transition-hover;\n\n padding-inline: #{$btn-padding-start} #{$btn-padding-end};\n padding-block: #{$btn-padding-top} #{$btn-padding-bottom};\n box-shadow: #{$layer-shadow-medium};\n display: inline-block;\n border-radius: #{$btn-border-radius};\n line-height: #{$btn-line-height};\n font-weight: 400;\n cursor: pointer;\n background: rgb(0 0 0 / 2%);\n\n @media print {\n display: none;\n }\n\n &:focus,\n &.button--focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n\n nano-icon,\n nano-spinner {\n --base-color-rgb: 255 255 255;\n\n margin-inline-start: 0.5em;\n margin-inline-end: 0;\n font-size: #{$btn-icon-size};\n vertical-align: middle;\n margin-block-start: -0.188em;\n display: inline-block;\n }\n\n &.button--icon-start {\n nano-icon,\n nano-spinner {\n margin-inline-start: 0;\n margin-inline-end: 0.5em;\n }\n }\n\n &:hover:not(.button--disabled) {\n box-shadow: #{$layer-shadow-large};\n }\n\n &:active:not(.button--disabled):not(:disabled) {\n box-shadow: none;\n }\n\n &--disabled,\n &:disabled {\n opacity: 0.6;\n\n &:hover {\n cursor: default;\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../global/style/utilities/globals';\n@import '../global/style/nano-theme/colours';\n@import '../global/style/nano-theme/typography';\n@import '../global/style/nano-theme/buttons';\n@import '../global/style/nano-theme/form';\n\n@each $color-name, $value in $themes {\n .nano-color-#{$color-name} {\n @include generate-color($color-name);\n }\n}\n\n:root {\n --nano-base-font-size: 16px;\n\n @include media-breakpoint-down('sm') {\n --nano-base-font-size: 14px;\n }\n\n --nano-padding: 1rem;\n --nano-font-family:\n helvetica,\n arial,\n 'Lucida Grande',\n sans-serif;\n\n @each $key, $value in $colors {\n #{'--nano-color-' + $key}: #{$value};\n #{'--nano-color-' + $key + '-rgb'}: #{color-to-rgb-list($value)};\n }\n}\n\nbody {\n background-color: $background-color;\n}\n\nhr,\n.horizontal-rule,\n.content-divider {\n display: block;\n block-size: 1px;\n border: 0;\n background-color: rgba(map.get($colors, palegrey), 0.5);\n margin-block: 0.5em;\n margin-inline: 0;\n padding: 0;\n}\n\narea[href]:not([tabindex='-1']),\niframe:not([tabindex='-1']),\n[contentEditable='true']:not([tabindex='-1']) {\n &:focus {\n outline: none;\n box-shadow: $control-focus-style;\n border-radius: 3px;\n }\n}\n","@use 'sass:math';\n\n@import 'mixins';\n\n$dark-text-default: #000 !default;\n$light-text-default: #fff !default;\n\n@function current-color($variation, $alpha: null) {\n @if not $alpha {\n @return var(--nano-color-#{$variation});\n }\n\n @else {\n @return rgb(var(--nano-color-#{$variation}-rgb) / #{$alpha});\n }\n}\n\n// Mixes a color with black to create its shade.\n// --------------------------------------------------------------------------------------------\n@function get-color-shade($color) {\n @return mix(#000, $color, 15%);\n}\n\n// Mixes a color with white to create its tint.\n// --------------------------------------------------------------------------------------------\n@function get-color-tint($color) {\n @return mix(#fff, $color, 15%);\n}\n\n// Converts a color to a comma separated hsl.\n// --------------------------------------------------------------------------------------------\n@function color-to-hsl-list($color) {\n @return #{hue($color)} #{saturation($color)} #{lightness($color)};\n}\n\n// Converts a color to a comma separated rgb.\n// --------------------------------------------------------------------------------------------\n@function color-to-rgb-list($color) {\n @return #{red($color)} #{green($color)} #{blue($color)};\n}\n\n// Calculeate brightness of a given color.\n@function brightness($color) {\n @return math.div(\n (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114),\n 255\n ) * 100%;\n}\n\n// Compares contrast of a given color to the light/dark arguments and returns whichever is most \"contrasty\"\n@function color-contrast(\n $color,\n $dark: $dark-text-default,\n $light: $light-text-default\n) {\n @if $color==null {\n @return null;\n }\n\n @else {\n $color-brightness: brightness($color);\n $light-text-brightness: brightness($light);\n $dark-text-brightness: brightness($dark);\n\n @return if(\n abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness),\n $light,\n $dark\n );\n }\n}\n\n@function nano-color($name, $variation, $alpha: null, $rgb: null) {\n $values: map-get($themes, $name);\n $value: map-get($values, $variation);\n $variable: --nano-color-#{$name}-#{$variation};\n\n @if ($variation == base) {\n $variable: --nano-color-#{$name};\n }\n\n @if ($alpha) {\n $value: color-to-rgb-list($value);\n\n @return rgb(var(#{$variable}-rgb, $value) / $alpha);\n }\n\n @if ($rgb) {\n $value: color-to-rgb-list($value);\n $variable: #{$variable}-rgb;\n }\n\n @return var(#{$variable}, $value);\n}\n\n@mixin generate-color($color-name, $important: '') {\n $value: map-get($themes, $color-name);\n\n $base: map-get($value, base);\n $contrast: map-get($value, contrast);\n $shade: map-get($value, shade);\n $tint: map-get($value, tint);\n\n --nano-color-base: var(--nano-color-#{$color-name}, #{$base}) #{$important};\n --nano-color-base-rgb:\n var(\n --nano-color-#{$color-name}-rgb,\n #{color-to-rgb-list($base)}\n )\n #{$important};\n --nano-color-contrast:\n var(--nano-color-#{$color-name}-contrast, #{$contrast})\n #{$important};\n --nano-color-contrast-rgb:\n var(\n --nano-color-#{$color-name}-contrast-rgb,\n #{color-to-rgb-list($contrast)}\n )\n #{$important};\n --nano-color-shade: var(--nano-color-#{$color-name}-shade, #{$shade}) #{$important};\n --nano-color-tint: var(--nano-color-#{$color-name}-tint, #{$tint}) #{$important};\n --nano-color-tint-rgb:\n var(\n --nano-color-#{$color-name}-tint-rgb,\n #{color-to-rgb-list($tint)}\n )\n #{$important};\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import 'colours';\n\n// Defaults\n\n$df-input-padding-top: 8px;\n$df-input-padding-bottom: 6px;\n$df-input-padding-start: 8px;\n$df-input-padding-end: 8px;\n\n$df-input-background-color: map.get($colors, white);\n$df-input-background-color--invalid: white;\n\n$df-input-text-color: $text-color-value;\n$df-input-font-size: 0.87em;\n\n$df-input-border-width: 1px;\n$df-input-border-style: solid;\n$df-input-border-radius: 0;\n\n$df-input-border-color: map.get($colors, lightgrey);\n$df-input-border--focus-color: map.get($colors, lightblue);\n$df-input-border--invalid-color: map.get($colors, lightgrey);\n$df-input-border--invalid-focus-color: map.get($colors, red);\n\n$df-clear-btn-color: rgb(0 0 0 / 30%);\n$df-clear-btn-color--invalid: lighten(map.get($colors, red), 30%);\n\n$df-label-color: 'currentcolor';\n$df-label-font-size: 1em;\n\n$df-input-help-font-size: 0.75em;\n$df-input-help-color: darken(map.get($colors, mediumgrey), 3%);\n\n$df-input-tag-bg: color-to-rgb-list(#badcf0);\n$df-input-tag-color: #455556;\n$df-input-tag-border-color: #badcf0;\n\n// Setup global / theme css variables with default fallbacks\n\n// Placeholders\n$input-placeholder-color: var(--nano-input-placeholder-color, initial);\n$input-placeholder-style: var(--nano-input-placeholder-style, initial);\n$input-placeholder-weight: var(--nano-input-placeholder-weight, initial);\n$input-placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n\n// Space around labels, help, errors and inside inputs\n$input-padding-bottom: var(\n --nano-input-padding-bottom,\n var(--nano-input-padding, $df-input-padding-bottom)\n);\n$input-padding-start: var(\n --nano-input-padding-start,\n var(--nano-input-padding, $df-input-padding-start)\n);\n$input-padding-end: var(\n --nano-input-padding-end,\n var(--nano-input-padding, $df-input-padding-end)\n);\n$input-padding-top: var(\n --nano-input-padding-top,\n var(--nano-input-padding, $df-input-padding-top)\n);\n\n// Input background\n$input-background-color: var(\n --nano-input-background-color,\n $df-input-background-color\n);\n$input-background-color--invalid: var(\n --nano-input-background-color,\n $df-input-background-color--invalid\n);\n\n// Input text\n$input-text-color: var(--nano-input-text-color, $df-input-text-color);\n$input-font-size: var(--nano-input-font-size, $df-input-font-size);\n\n// Input border\n$input-border-width: var(--nano-input-border-width, $df-input-border-width);\n$input-border-color: var(--nano-input-border-color, $df-input-border-color);\n$input-border-style: var(--nano-input-border-style, $df-input-border-style);\n$input-border-radius: var(--nano-input-border-radius, $df-input-border-radius);\n\n// Input border state variants\n$input-border--focus-color: var(\n --nano-input-border-color--focus,\n $df-input-border--focus-color\n);\n$input-border--invalid-color: var(\n --nano-input-border-color--invalid,\n $df-input-border--invalid-color\n);\n$input-border--invalid-focus-color: var(\n --nano-input-border-color--invalid,\n $df-input-border--invalid-focus-color\n);\n\n// Clear button\n$clear-btn-color: var(--nano-clear-btn-color, $df-clear-btn-color);\n$clear-btn-color--invalid: var(\n --nano-clear-btn-color--invalid,\n $df-clear-btn-color--invalid\n);\n\n// Label\n$label-color: var(--nano-input-label-color, $df-label-color);\n$label-color-invalid: var(--nano-input-label-color-invalid, $df-label-color);\n$label-font-size: var(--nano-input-label-color, $df-label-font-size);\n\n// Focus shadow / outline\n$control-focus-color: var(\n --nano-control-focus-color,\n rgba(map.get($colors, lightblue), 0.8)\n);\n$control-focus-size: 0 0 0 0.1875rem;\n$control-focus-style: var(\n --nano-control-focus-shadow,\n #{$control-focus-size + ' ' $control-focus-color}\n);\n$control-invalid-style: var(\n --nano-control-focus-shadow,\n #{$control-focus-size + ' ' $df-input-border--invalid-color}\n);\n\n// Helper / Error text\n$input-help-font-size: var(\n --nano-input-help-font-size,\n $df-input-help-font-size\n);\n$input-help-color: var(--nano-input-help-color, $df-input-help-color);\n\n// General button\n$button-bg-color: var(--nano-button-color, #{map.get($colors, celsius)});\n\n// Tags / Multi value\n$input-tag-bg: var(--nano-input-tag-bg, $df-input-tag-bg);\n$input-tag-color: var(--nano-input-tag-color, $df-input-tag-color);\n$input-tag-border-color: var(\n --nano-input-tag-color,\n $df-input-tag-border-color\n);\n\n// Select\n$select-opt-focus: var(\n --nano-select-opt-bg,\n darken(map.get($colors, blue--faded), 5%)\n);\n$select-opt-selected: var(--nano-select-opt-bg, map.get($colors, blue--faded));\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../src/global/style/nano-theme/_mheiprc.scss","../src/global/style/nano-theme/typography.scss","../src/global/style/nano-theme/_colours.scss","../src/global/style/utilities/_mixins.scss","../src/global/style/nano-theme/buttons.scss","../src/global/style/utilities/css-patterns/_unstyled_input.scss","../src/global/style/utilities/css-patterns/_unstyled_anchor.scss","../src/global/style/nano-theme/_button.scss","../src/themes/nanopore.cn.scss","../src/global/style/utilities/_colours.scss","../src/global/style/nano-theme/_form.scss"],"names":[],"mappings":"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","file":"nanopore.cn.css","sourcesContent":["@font-face {\n font-family: MHeiPRC;\n src:\n url('../nano-assets/fonts/MHeiPRCLight_normal_normal.woff2') format('woff2'),\n url('../nano-assets/fonts/MHeiPRCLight_normal_normal.woff') format('woff');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: MHeiPRC;\n src:\n url('../nano-assets/fonts/MHeiPRCMedium_normal_normal.woff2') format('woff2'),\n url('../nano-assets/fonts/MHeiPRCMedium_normal_normal.woff') format('woff');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: MHeiPRC;\n src:\n url('../nano-assets/fonts/MHeiPRCBold_normal_normal.woff2') format('woff2'),\n url('../nano-assets/fonts/MHeiPRCBold_normal_normal.woff') format('woff');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: MHeiPRC;\n src:\n url('../nano-assets/fonts/MHeiPRCHeavy_normal_normal.woff2') format('woff2'),\n url('../nano-assets/fonts/MHeiPRCHeavy_normal_normal.woff') format('woff');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/globals';\n@import 'colours';\n\n/// @prop - Font weight of all headings\n$headings-font-weight: 600 !default;\n/// @prop - Line height of all headings\n$headings-line-height: 1.2 !default;\n/// @prop - Font size of heading level 1\n$h1-font-size: 28px !default;\n/// @prop - Font size of heading level 2\n$h2-font-size: 24px !default;\n/// @prop - Font size of heading level 3\n$h3-font-size: 22px !default;\n/// @prop - Font size of heading level 4\n$h4-font-size: 20px !default;\n/// @prop - Font size of heading level 5\n$h5-font-size: 18px !default;\n/// @prop - Font size of heading level 6\n$h6-font-size: 16px !default;\n\nhtml {\n font-family: var(--nano-font-family);\n font-weight: var(--nano-font-weight, 400);\n color: $text-color;\n font-size: var(--nano-base-font-size);\n}\n\na {\n color: nano-color(primary, base);\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-block: 16px 10px;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n}\n\nh1 {\n margin-block-start: 10px;\n font-size: $h1-font-size;\n}\n\nh2 {\n margin-block-start: 18px;\n font-size: $h2-font-size;\n}\n\nh3 {\n font-size: $h3-font-size;\n}\n\nh4 {\n font-size: $h4-font-size;\n}\n\nh5 {\n font-size: $h5-font-size;\n}\n\nh6 {\n font-size: $h6-font-size;\n}\n\nsmall {\n font-size: 75%;\n}\n\nsub,\nsup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n}\n\nsup {\n inset-block-start: -0.5em;\n}\n\nsub {\n inset-block-end: -0.25em;\n}\n\np {\n font-size: 1.125rem;\n line-height: 1.4;\n margin-block: 0 1rem;\n\n &.supporting {\n font-size: 0.875rem;\n }\n}\n\n.heading {\n font-weight: 500;\n line-height: 1.3;\n margin-block: 0 1.5rem;\n margin-inline: 0;\n\n &__highlight {\n color: map.get($colors, blue);\n }\n\n @media print {\n color: map.get($colors, black);\n }\n\n &--one {\n font-size: 2.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 3.25rem;\n }\n }\n\n &--two {\n font-size: 1.5rem;\n\n @include media-breakpoint-up('md') {\n font-size: 2rem;\n }\n }\n\n &--three {\n font-size: 1.125rem;\n\n @include media-breakpoint-up('md') {\n font-size: 1.375rem;\n }\n }\n\n &--four {\n font-size: 1.125rem;\n }\n\n &--five {\n font-size: 1rem;\n }\n\n &--light {\n font-weight: 200;\n }\n\n &--upper {\n text-transform: uppercase;\n }\n\n &--meta {\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 1.3px;\n font-weight: bold;\n margin-block-end: 1rem;\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../utilities/colours';\n\n$colors: (\n white: #fff,\n lightblue: #90c6e7,\n blue: darken(#0084a9, 4%),\n darkblue: #0c5a71,\n darkgrey: #455556,\n palegrey: #b5aea7,\n dimgrey: #918b86,\n lightgrey: #e4e6e8,\n mediumgrey: #687576,\n green: #17bb75,\n orange: #f57e20,\n paleyellow: #ede797,\n purple: #a53f97,\n red: #ef4135,\n yellow: #f5cc49,\n background: #f0efed,\n black: #4a4a4a,\n // Bg Colors\n celsius: #f0efed,\n offwhite: #f9f9fb,\n darkblue--faded: #005c75,\n // Faded Colors\n red--faded: #fee8de,\n orange--faded: #feeddb,\n yellow--faded: #fefcf2,\n green--faded: #edf5f2,\n blue--faded: #f2f7f9,\n // Darkened Colours\n blue--darker: #245a6f,\n green--darker: #0b814f,\n red--darker: #be2a20,\n purple--darker: #772c6d,\n orange--darker: #b95e17,\n palegrey--darker: #8c8379,\n lightblue--darker: #548caf,\n);\n\n// Text\n$dark-text-default: map.get($colors, black);\n$light-text-default: map.get($colors, white);\n\n// Theme\n$primary: map.get($colors, blue) !default;\n$secondary: map.get($colors, lightblue--darker) !default;\n$tertiary: map.get($colors, palegrey) !default;\n$success: map.get($colors, green) !default;\n$warning: map.get($colors, orange) !default;\n$danger: map.get($colors, red) !default;\n$light: map.get($colors, blue--faded) !default;\n$medium: map.get($colors, darkblue--faded) !default;\n$dark: map.get($colors, darkgrey) !default;\n\n// Theme css variables and variations\n$themes: (\n primary: (\n base: $primary,\n contrast: color-contrast($primary),\n shade: get-color-shade($primary),\n tint: get-color-tint($primary),\n ),\n secondary: (\n base: $secondary,\n contrast: color-contrast($secondary),\n shade: get-color-shade($secondary),\n tint: get-color-tint($secondary),\n ),\n tertiary: (\n base: $tertiary,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($tertiary),\n tint: get-color-tint($tertiary),\n ),\n success: (\n base: $success,\n contrast: color-contrast($tertiary),\n shade: get-color-shade($success),\n tint: get-color-tint($success),\n ),\n warning: (\n base: $warning,\n contrast: color-contrast($warning),\n shade: get-color-shade($warning),\n tint: get-color-tint($warning),\n ),\n danger: (\n base: $danger,\n contrast: color-contrast($danger),\n shade: get-color-shade($danger),\n tint: get-color-tint($danger),\n ),\n light: (\n base: $light,\n contrast: color-contrast($light),\n shade: get-color-shade($light),\n tint: get-color-tint($light),\n ),\n medium: (\n base: $medium,\n contrast: color-contrast($medium),\n shade: get-color-shade($medium),\n tint: get-color-tint($medium),\n ),\n dark: (\n base: $dark,\n contrast: color-contrast($dark),\n shade: get-color-shade($dark),\n tint: get-color-tint($dark),\n ),\n) !default;\n\n// Default Foreground and Background Colors\n// -------------------------------------------------------------------------------------------\n// Used internally to calculate the default steps\n\n$background-color-value: map.get($colors, background) !default;\n$background-color-rgb-value: color-to-rgb-list(\n $background-color-value\n) !default;\n\n$text-color-value: map.get($colors, black) !default;\n$text-color-rgb-value: color-to-rgb-list($text-color-value) !default;\n\n$text-color: var(--nano-text-color, $text-color-value) !default;\n$text-color-rgb: var(--nano-text-color-rgb, $text-color-rgb-value) !default;\n\n$background-color: var(\n --nano-background-color,\n $background-color-value\n) !default;\n$background-color-rgb: var(\n --nano-background-color-rgb,\n $background-color-rgb-value\n) !default;\n","@mixin input-cover() {\n inset-block: 0;\n inset-inline: auto;\n margin: 0;\n inline-size: 100%;\n block-size: 100%;\n border: 0;\n background: transparent;\n cursor: pointer;\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-stretch: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n// A transition-friendly alternative to `display: none` for hiding content\n@mixin hidden {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n overflow: hidden;\n pointer-events: none;\n visibility: hidden; // prevent tab stops and screen reader discovery\n}\n\n// Hides content visually while still making it available to screen readers\n@mixin visually-hide {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n block-size: 1px;\n inline-size: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) ==null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next(\n $name,\n $breakpoints: $screen-breakpoints,\n $breakpoint-names: map-keys($breakpoints)\n) {\n $n: index($breakpoint-names, $name);\n\n @return if(\n $n < length($breakpoint-names),\n nth($breakpoint-names, $n + 1),\n null\n );\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is calculated as the minimum of the current one.\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @return if($min, breakpoint-min($name, $breakpoints), null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n }\n\n @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin host($hostCtx: null) {\n $root: #{&};\n\n @if $hostCtx {\n @at-root :host(#{$hostCtx}) {\n #{$root} {\n @content;\n }\n }\n }\n\n @else {\n @at-root :host {\n #{$root} {\n @content;\n }\n }\n }\n}\n\n@mixin rtl-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}[dir='rtl']) {\n #{$root} {\n @content;\n }\n }\n}\n\n@mixin ltr-host($hostCtx: '') {\n $root: #{&};\n\n @at-root :host(#{$hostCtx}:not([dir='rtl'])) {\n #{$root} {\n @content;\n }\n }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n @at-root #{$root + '[dir=rtl]'} {\n @content;\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl !=true or $viewBox==null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n }\n\n @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: str-replace(\n $flipped-url,\n '<polygon',\n '<polygon #{$transform}'\n );\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n@mixin background-position(\n $horizontal,\n $horizontal-amount: null,\n $vertical: null,\n $vertical-amount: null\n) {\n @if $horizontal==start or $horizontal==end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n\n @if $horizontal==start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n }\n\n @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position:\n $horizontal-ltr $horizontal-amount $vertical\n $vertical-amount;\n }\n\n @include rtl() {\n background-position:\n $horizontal-rtl $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n\n @else {\n @include multi-dir() {\n background-position:\n $horizontal $horizontal-amount $vertical\n $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis==start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n\n @include rtl() {\n transform-origin: right $y-axis;\n }\n }\n\n @else if $x-axis==end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n\n @include rtl() {\n transform-origin: left $y-axis;\n }\n }\n\n @else if $x-axis==left or $x-axis==right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n }\n\n @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n }\n\n @else {\n @if $extra==null {\n $extra: $transform;\n }\n\n @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x== '0' or $x==null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n }\n\n @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n\n@mixin hide-scrollbar() {\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n &::-webkit-scrollbar {\n inline-size: 0;\n block-size: 0;\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import './colours';\n@import './button';\n\n.button {\n @include button-base;\n}\n\n.button--primary {\n @include button-standard(\n #{nano-color(primary, base)},\n #{nano-color(primary, contrast)},\n #{nano-color(primary, shade)}\n );\n}\n\n.button--secondary {\n @include button-standard(\n map.get($colors, green),\n map.get($colors, white),\n map.get($colors, green--darker)\n );\n}\n\n.button--light {\n @include button-standard(\n map.get($colors, white),\n map.get($colors, blue),\n map.get($colors, white),\n map.get($colors, darkblue)\n );\n}\n\n.button--danger {\n @include button-standard(\n map.get($colors, red),\n map.get($colors, white),\n map.get($colors, red--darker)\n );\n}\n\n.button--warning {\n @include button-standard(\n map.get($colors, orange),\n map.get($colors, white),\n map.get($colors, orange--darker)\n );\n}\n\n.button--tertiary {\n background: transparent;\n box-shadow: none;\n text-decoration: underline;\n font-weight: 400;\n\n &:hover,\n &:focus {\n &:not(.button--disabled):not(:disabled),\n &.button--active {\n color: map.get($colors, palegrey);\n box-shadow: none;\n text-decoration: underline;\n }\n }\n}\n","/// Strips browser styling from an input.\n\n@mixin unstyled-input($outline: false) {\n padding: 0;\n border: none;\n background-color: transparent;\n font: inherit;\n -webkit-box-align: center;\n\n @if $outline == false {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n}\n","/// Displays an anchor as plain text.\n\n@mixin unstyled-anchor {\n text-decoration: none;\n color: inherit;\n\n &:hover,\n &:focus {\n text-decoration: none;\n color: inherit;\n }\n}\n","@import '../utilities/css-patterns/patterns';\n@import './layers';\n@import './form';\n\n// Border\n$btn-border-radius: var(--nano-btn-border-radius, 5px);\n$btn-border-width: var(--nano-btn-border-width, 2px);\n$btn-border-style: var(--nano-btn-border-style, solid);\n\n// Spacing\n$btn-padding-top: var(--nano-btn-padding-top, 0.5rem);\n$btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5rem);\n$btn-padding-start: var(--nano-btn-padding-start, 1rem);\n$btn-padding-end: var(--nano-btn-padding-end, 1rem);\n$btn-line-height: var(--nano-btn-line-height, 1.5em);\n\n// Misc\n$btn-icon-size: var(--nano-btn-icon-size, 1em);\n\n@mixin transition-hover {\n transition:\n background-color 100ms ease-in-out,\n box-shadow 100ms ease-in-out,\n border-color 100ms ease-in-out,\n color 100ms ease-in-out;\n}\n\n@mixin button-keyline {\n background: transparent;\n border-style: #{$btn-border-style};\n border-width: #{$btn-border-width};\n border-radius: #{$btn-border-radius};\n padding-block:\n calc(#{$btn-padding-top} - #{$btn-border-width})\n calc(#{$btn-padding-bottom} - #{$btn-border-width});\n\n &:hover:not(.button--disabled):not(:disabled),\n &:not(:focus):not(.button--focus),\n &.button--active {\n box-shadow: none;\n }\n}\n\n@mixin button-standard($bg, $font, $bg-hover: false, $font-hover: false) {\n $font-hover: if($font-hover, $font-hover, $font);\n $bg-hover: if($bg-hover, $bg-hover, $bg);\n\n background-color: $bg;\n color: $font;\n\n &:hover:not(.button--disabled):not(:disabled),\n &.button--active {\n background-color: $bg-hover;\n color: $font-hover;\n\n &.button--keyline {\n background-color: $bg;\n color: $font;\n }\n }\n\n &:focus {\n color: $font;\n }\n\n &.button--keyline {\n @include button-keyline;\n\n color: $bg;\n border-color: $bg;\n }\n}\n\n@mixin button-base {\n @include unstyled-input($outline: true);\n @include unstyled-anchor;\n @include transition-hover;\n\n padding-inline: #{$btn-padding-start} #{$btn-padding-end};\n padding-block: #{$btn-padding-top} #{$btn-padding-bottom};\n box-shadow: #{$layer-shadow-medium};\n display: inline-block;\n border-radius: #{$btn-border-radius};\n line-height: #{$btn-line-height};\n font-weight: 400;\n cursor: pointer;\n background: rgb(0 0 0 / 2%);\n\n @media print {\n display: none;\n }\n\n &:focus,\n &.button--focus {\n outline: none;\n box-shadow: #{$control-focus-style};\n }\n\n nano-icon,\n nano-spinner {\n --base-color-rgb: 255 255 255;\n\n margin-inline-start: 0.5em;\n margin-inline-end: 0;\n font-size: #{$btn-icon-size};\n vertical-align: middle;\n margin-block-start: -0.188em;\n display: inline-block;\n }\n\n &.button--icon-start {\n nano-icon,\n nano-spinner {\n margin-inline-start: 0;\n margin-inline-end: 0.5em;\n }\n }\n\n &:hover:not(.button--disabled) {\n box-shadow: #{$layer-shadow-large};\n }\n\n &:active:not(.button--disabled):not(:disabled) {\n box-shadow: none;\n }\n\n &--disabled,\n &:disabled {\n opacity: 0.6;\n\n &:hover {\n cursor: default;\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../global/style/utilities/globals';\n@import '../global/style/nano-theme/mheiprc';\n@import '../global/style/nano-theme/colours';\n@import '../global/style/nano-theme/typography';\n@import '../global/style/nano-theme/buttons';\n@import '../global/style/nano-theme/form';\n\n@each $color-name, $value in $themes {\n .nano-color-#{$color-name} {\n @include generate-color($color-name);\n }\n}\n\n:root {\n --nano-base-font-size: 16px;\n\n @include media-breakpoint-down('sm') {\n --nano-base-font-size: 14px;\n }\n\n --nano-padding: 1rem;\n --nano-font-family: MHeiPRC, helvetica, arial, 'Lucida Grande', sans-serif;\n\n @each $key, $value in $colors {\n #{'--nano-color-' + $key}: #{$value};\n #{'--nano-color-' + $key + '-rgb'}: #{color-to-rgb-list($value)};\n }\n}\n\nbody {\n background-color: $background-color;\n}\n\n// no italics in chinese\nem, i {\n font-style: normal !important;\n}\n\nhr,\n.horizontal-rule,\n.content-divider {\n display: block;\n block-size: 1px;\n border: 0;\n background-color: rgba(map.get($colors, palegrey), 0.5);\n margin-block: 0.5em;\n margin-inline: 0;\n padding: 0;\n}\n\narea[href]:not([tabindex='-1']),\niframe:not([tabindex='-1']),\n[contentEditable='true']:not([tabindex='-1']) {\n &:focus {\n outline: none;\n box-shadow: $control-focus-style;\n border-radius: 3px;\n }\n}\n","@use 'sass:math';\n\n@import 'mixins';\n\n$dark-text-default: #000 !default;\n$light-text-default: #fff !default;\n\n@function current-color($variation, $alpha: null) {\n @if not $alpha {\n @return var(--nano-color-#{$variation});\n }\n\n @else {\n @return rgb(var(--nano-color-#{$variation}-rgb) / #{$alpha});\n }\n}\n\n// Mixes a color with black to create its shade.\n// --------------------------------------------------------------------------------------------\n@function get-color-shade($color) {\n @return mix(#000, $color, 15%);\n}\n\n// Mixes a color with white to create its tint.\n// --------------------------------------------------------------------------------------------\n@function get-color-tint($color) {\n @return mix(#fff, $color, 15%);\n}\n\n// Converts a color to a comma separated hsl.\n// --------------------------------------------------------------------------------------------\n@function color-to-hsl-list($color) {\n @return #{hue($color)} #{saturation($color)} #{lightness($color)};\n}\n\n// Converts a color to a comma separated rgb.\n// --------------------------------------------------------------------------------------------\n@function color-to-rgb-list($color) {\n @return #{red($color)} #{green($color)} #{blue($color)};\n}\n\n// Calculeate brightness of a given color.\n@function brightness($color) {\n @return math.div(\n (red($color) * 0.299) + (green($color) * 0.587) + (blue($color) * 0.114),\n 255\n ) * 100%;\n}\n\n// Compares contrast of a given color to the light/dark arguments and returns whichever is most \"contrasty\"\n@function color-contrast(\n $color,\n $dark: $dark-text-default,\n $light: $light-text-default\n) {\n @if $color==null {\n @return null;\n }\n\n @else {\n $color-brightness: brightness($color);\n $light-text-brightness: brightness($light);\n $dark-text-brightness: brightness($dark);\n\n @return if(\n abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness),\n $light,\n $dark\n );\n }\n}\n\n@function nano-color($name, $variation, $alpha: null, $rgb: null) {\n $values: map-get($themes, $name);\n $value: map-get($values, $variation);\n $variable: --nano-color-#{$name}-#{$variation};\n\n @if ($variation == base) {\n $variable: --nano-color-#{$name};\n }\n\n @if ($alpha) {\n $value: color-to-rgb-list($value);\n\n @return rgb(var(#{$variable}-rgb, $value) / $alpha);\n }\n\n @if ($rgb) {\n $value: color-to-rgb-list($value);\n $variable: #{$variable}-rgb;\n }\n\n @return var(#{$variable}, $value);\n}\n\n@mixin generate-color($color-name, $important: '') {\n $value: map-get($themes, $color-name);\n\n $base: map-get($value, base);\n $contrast: map-get($value, contrast);\n $shade: map-get($value, shade);\n $tint: map-get($value, tint);\n\n --nano-color-base: var(--nano-color-#{$color-name}, #{$base}) #{$important};\n --nano-color-base-rgb:\n var(\n --nano-color-#{$color-name}-rgb,\n #{color-to-rgb-list($base)}\n )\n #{$important};\n --nano-color-contrast:\n var(--nano-color-#{$color-name}-contrast, #{$contrast})\n #{$important};\n --nano-color-contrast-rgb:\n var(\n --nano-color-#{$color-name}-contrast-rgb,\n #{color-to-rgb-list($contrast)}\n )\n #{$important};\n --nano-color-shade: var(--nano-color-#{$color-name}-shade, #{$shade}) #{$important};\n --nano-color-tint: var(--nano-color-#{$color-name}-tint, #{$tint}) #{$important};\n --nano-color-tint-rgb:\n var(\n --nano-color-#{$color-name}-tint-rgb,\n #{color-to-rgb-list($tint)}\n )\n #{$important};\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import 'colours';\n\n// Defaults\n\n$df-input-padding-top: 8px;\n$df-input-padding-bottom: 6px;\n$df-input-padding-start: 8px;\n$df-input-padding-end: 8px;\n\n$df-input-background-color: map.get($colors, white);\n$df-input-background-color--invalid: white;\n\n$df-input-text-color: $text-color-value;\n$df-input-font-size: 0.87em;\n\n$df-input-border-width: 1px;\n$df-input-border-style: solid;\n$df-input-border-radius: 0;\n\n$df-input-border-color: map.get($colors, lightgrey);\n$df-input-border--focus-color: map.get($colors, lightblue);\n$df-input-border--invalid-color: map.get($colors, lightgrey);\n$df-input-border--invalid-focus-color: map.get($colors, red);\n\n$df-clear-btn-color: rgb(0 0 0 / 30%);\n$df-clear-btn-color--invalid: lighten(map.get($colors, red), 30%);\n\n$df-label-color: 'currentcolor';\n$df-label-font-size: 1em;\n\n$df-input-help-font-size: 0.75em;\n$df-input-help-color: darken(map.get($colors, mediumgrey), 3%);\n\n$df-input-tag-bg: color-to-rgb-list(#badcf0);\n$df-input-tag-color: #455556;\n$df-input-tag-border-color: #badcf0;\n\n// Setup global / theme css variables with default fallbacks\n\n// Placeholders\n$input-placeholder-color: var(--nano-input-placeholder-color, initial);\n$input-placeholder-style: var(--nano-input-placeholder-style, initial);\n$input-placeholder-weight: var(--nano-input-placeholder-weight, initial);\n$input-placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n\n// Space around labels, help, errors and inside inputs\n$input-padding-bottom: var(\n --nano-input-padding-bottom,\n var(--nano-input-padding, $df-input-padding-bottom)\n);\n$input-padding-start: var(\n --nano-input-padding-start,\n var(--nano-input-padding, $df-input-padding-start)\n);\n$input-padding-end: var(\n --nano-input-padding-end,\n var(--nano-input-padding, $df-input-padding-end)\n);\n$input-padding-top: var(\n --nano-input-padding-top,\n var(--nano-input-padding, $df-input-padding-top)\n);\n\n// Input background\n$input-background-color: var(\n --nano-input-background-color,\n $df-input-background-color\n);\n$input-background-color--invalid: var(\n --nano-input-background-color,\n $df-input-background-color--invalid\n);\n\n// Input text\n$input-text-color: var(--nano-input-text-color, $df-input-text-color);\n$input-font-size: var(--nano-input-font-size, $df-input-font-size);\n\n// Input border\n$input-border-width: var(--nano-input-border-width, $df-input-border-width);\n$input-border-color: var(--nano-input-border-color, $df-input-border-color);\n$input-border-style: var(--nano-input-border-style, $df-input-border-style);\n$input-border-radius: var(--nano-input-border-radius, $df-input-border-radius);\n\n// Input border state variants\n$input-border--focus-color: var(\n --nano-input-border-color--focus,\n $df-input-border--focus-color\n);\n$input-border--invalid-color: var(\n --nano-input-border-color--invalid,\n $df-input-border--invalid-color\n);\n$input-border--invalid-focus-color: var(\n --nano-input-border-color--invalid,\n $df-input-border--invalid-focus-color\n);\n\n// Clear button\n$clear-btn-color: var(--nano-clear-btn-color, $df-clear-btn-color);\n$clear-btn-color--invalid: var(\n --nano-clear-btn-color--invalid,\n $df-clear-btn-color--invalid\n);\n\n// Label\n$label-color: var(--nano-input-label-color, $df-label-color);\n$label-color-invalid: var(--nano-input-label-color-invalid, $df-label-color);\n$label-font-size: var(--nano-input-label-color, $df-label-font-size);\n\n// Focus shadow / outline\n$control-focus-color: var(\n --nano-control-focus-color,\n rgba(map.get($colors, lightblue), 0.8)\n);\n$control-focus-size: 0 0 0 0.1875rem;\n$control-focus-style: var(\n --nano-control-focus-shadow,\n #{$control-focus-size + ' ' $control-focus-color}\n);\n$control-invalid-style: var(\n --nano-control-focus-shadow,\n #{$control-focus-size + ' ' $df-input-border--invalid-color}\n);\n\n// Helper / Error text\n$input-help-font-size: var(\n --nano-input-help-font-size,\n $df-input-help-font-size\n);\n$input-help-color: var(--nano-input-help-color, $df-input-help-color);\n\n// General button\n$button-bg-color: var(--nano-button-color, #{map.get($colors, celsius)});\n\n// Tags / Multi value\n$input-tag-bg: var(--nano-input-tag-bg, $df-input-tag-bg);\n$input-tag-color: var(--nano-input-tag-color, $df-input-tag-color);\n$input-tag-border-color: var(\n --nano-input-tag-color,\n $df-input-tag-border-color\n);\n\n// Select\n$select-opt-focus: var(\n --nano-select-opt-bg,\n darken(map.get($colors, blue--faded), 5%)\n);\n$select-opt-selected: var(--nano-select-opt-bg, map.get($colors, blue--faded));\n"]}

package/dist/types/components/table/table-interface.d.ts CHANGED Viewed

@@ -119,7 +119,7 @@ export declare namespace TableTypes {
   /** A data property */
   type Prop = keyof RowData;
   /** Valid column data types */
-  type ColumnType = 'text' | 'string' | 'number' | 'date' | 'unknown';
+  type ColumnType = 'text' | 'string' | 'number' | 'date' | 'boolean' | 'unknown';
   /**
    * A table column's configuration
    */

package/dist/types/components/table/table.worker.d.ts CHANGED Viewed

@@ -2,9 +2,6 @@ import type { TableTypes } from '../../interface';
 export declare function createWorkerStore(rows: TableTypes.NanoTable['rows'], columns: Partial<TableTypes.ColumnConfig>[]): Promise<string>;
 export declare function syncDataToWorker(workerId: string, rows: TableTypes.NanoTable['rows']): Promise<boolean>;
 export declare function syncConfigToWorker(workerId: string, columns: Partial<TableTypes.ColumnConfig>[]): Promise<boolean>;
-/** Sorting is the last thing we do - don't cache this, there's no point */
-export declare function workerSort(workerId: string, prop: TableTypes.Prop, order: TableTypes.Order): Promise<TableTypes.RowGeneric[]>;
-export declare function workerFilter(workerId: string, filters: TableTypes.Filter[]): Promise<TableTypes.RowGeneric[]>;
 /** SEARCH */
 /**
  * A general text search across all table columns.
@@ -14,6 +11,9 @@ export declare function workerFilter(workerId: string, filters: TableTypes.Filte
  * @returns the searched for data rows - with col filters / sorts also applied
  */
 export declare function workerSearch(workerId: string, term: string): Promise<TableTypes.RowGeneric[]>;
+export declare function workerFilter(workerId: string, filters: TableTypes.Filter[]): Promise<TableTypes.RowGeneric[]>;
+/** Sorting is the last thing we do - don't cache this, there's no point */
+export declare function workerSort(workerId: string, prop: TableTypes.Prop, order: TableTypes.Order): Promise<TableTypes.RowGeneric[]>;
 /**
  * Clean up
  * @param workerId

package/docs-json.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-06-06T13:44:00",
+  "timestamp": "2023-06-08T10:46:04",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.23.0",