@openmrs/esm-login-app 3.2.1-pre.1039 → 3.2.1-pre.1047

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 (10) hide show
  1. package/dist/643.js +1 -1
  2. package/dist/643.js.map +1 -1
  3. package/dist/762.js +1 -1
  4. package/dist/openmrs-esm-login-app.js +1 -1
  5. package/dist/openmrs-esm-login-app.js.buildmanifest.json +5 -5
  6. package/dist/openmrs-esm-login-app.js.map +1 -1
  7. package/dist/openmrs-esm-login-app.old +1 -1
  8. package/package.json +4 -4
  9. package/src/choose-location/choose-location.resource.ts +1 -1
  10. package/src/location-picker/location-picker.component.tsx +2 -2
package/dist/643.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunk_openmrs_esm_login_app=self.webpackChunk_openmrs_esm_login_app||[]).push([[643],{2041:(e,n,t)=>{t.d(n,{h:()=>p});var i=t(6983),o=t(7657),a=t(3415);const r=`${o.fhirBaseUrl}/Location?_summary=data`;function p(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";const p=(i,o)=>{if(o&&!o?.data?.link?.some((e=>"next"===e.relation)))return null;let a=r;return n&&(a+=`&_count=${n}`),i&&(a+="&_getpagesoffset="+i*n),e&&(a+="&_tag=login location"),"string"==typeof t&&""!=t&&(a+=`&name=${t}`),a},{data:l,isValidating:c,size:s,setSize:m,error:g}=(0,a.ZP)(p,o.openmrsFetch);g&&(0,o.showNotification)({title:g.name,description:g.message,kind:"error"}),(0,i.useEffect)((()=>{m(1)}),[t,m]);const h=(0,i.useMemo)((()=>({locationData:l?[].concat(...l?.map((e=>e?.data?.entry))):null,isLoading:!l&&!g,totalResults:l?.[0]?.data?.total??null,hasMore:!!l?.length&&l?.[l.length-1]?.data?.link.some((e=>"next"===e.relation)),loadingNewData:c,setPage:m})),[l,c,m]);return h}},7643:(e,n,t)=>{t.r(n),t.d(n,{default:()=>C});var i=t(6983),o=t.n(i),a=t(9717),r=t(2680),p=t(9784),l=t(7657),c=t(487),s=t.n(c),m=t(631),g=t.n(m),h=t(2052),u=t.n(h),d=t(4010),$=t.n(d),f=t(1469),b=t.n(f),y=t(9329),v=t.n(y),_=t(3088),x={};x.styleTagTransform=v(),x.setAttributes=$(),x.insert=u().bind(null,"head"),x.domAPI=g(),x.insertStyleElement=b(),s()(_.Z,x);const A=_.Z&&_.Z.locals?_.Z.locals:void 0;var k=t(2041);const C=e=>{let{currentUser:n,loginLocations:t,onChangeLocation:c,hideWelcomeMessage:s,currentLocationUuid:m,isLoginEnabled:g}=e;const h=(0,l.useConfig)(),{chooseLocation:u}=h,{t:d}=(0,r.useTranslation)(),[$,f]=(0,i.useState)(u.numberToShow),[b,y]=(0,i.useState)((()=>{const e=window.localStorage.getItem(`userDefaultLoginLocationKey${n}`),i=t?.some((n=>n.resource.id===e));return i?e:""})()??""),[v,_]=(0,i.useState)(""),{locationData:x,isLoading:C,hasMore:B,totalResults:w,loadingNewData:z,setPage:L}=(0,k.h)(u.useLoginLocationTag,u.locationsPerRequest,v),[q,E]=(0,i.useState)(!1),D=(0,i.useRef)();(0,i.useEffect)((()=>{q&&(c(b),E(!1))}),[q,b,c]),(0,i.useEffect)((()=>{b&&window.localStorage.setItem(`userDefaultLoginLocationKey${n}`,b)}),[b,n]),(0,i.useEffect)((()=>{m&&s&&y(m)}),[m,s]),(0,i.useEffect)((()=>{q&&D.current&&(D.current.value="",_(null))}),[q]),(0,i.useEffect)((()=>{!C&&w&&u.numberToShow&&f(Math.min(u.numberToShow,w))}),[C,w,u.numberToShow]);const M=(0,a.Z)((e=>{y(""),_(e),L(1)}),300),S=(0,i.useRef)(null),T=(0,i.useCallback)((e=>{z||(S.current&&S.current.disconnect(),S.current=new IntersectionObserver((e=>{e[0].isIntersecting&&B&&L((e=>e+1))}),{threshold:1}),e&&S.current.observe(e))}),[z,B,L]);return o().createElement("div",{className:A.locationPickerContainer},o().createElement("form",{onSubmit:e=>{e.preventDefault(),E(!0)}},o().createElement("div",{className:A.locationCard},o().createElement("div",null,o().createElement("p",{className:A.welcomeTitle},d("welcome","Welcome")," ",n),o().createElement("p",{className:A.welcomeMessage},d("selectYourLocation","Select your location from the list below. Use the search bar to search for your location."))),o().createElement(p.Search,{autoFocus:!0,className:A.searchBox,labelText:d("searchForLocation","Search for a location"),id:"search-1",placeholder:d("searchForLocation","Search for a location"),onChange:e=>M(e.target.value),name:"searchForLocation"}),o().createElement("div",{className:A.searchResults,style:{height:2.875*u.numberToShow+"rem"}},C?o().createElement("div",null,o().createElement(p.RadioButtonSkeleton,{className:A.radioButtonSkeleton})):o().createElement(o().Fragment,null,o().createElement("p",{className:A.resultsCount},v?`${x?.length??0} ${1===x?.length?d("match","match"):d("matches","matches")} ${d("found","found")}`:`${d("showing","Showing")} ${$} ${d("of","of")} ${w} ${d("locations","locations")}`),o().createElement("div",{className:A.locationResultsContainer},x?.length>0&&o().createElement(p.RadioButtonGroup,{valueSelected:b,orientation:"vertical",name:b,onChange:e=>{y(e.toString())}},x.map((e=>o().createElement(p.RadioButton,{className:A.locationRadioButton,key:e.resource.id,id:e.resource.name,labelText:e.resource.name,value:e.resource.id})))),0===x?.length&&o().createElement("p",{className:A.locationNotFound},d("locationNotFound","Sorry, no matching location was found"))),B&&o().createElement("div",{className:A.loadingIcon,ref:T},o().createElement(p.Loading,{small:!0,withOverlay:!1,description:d("loading","Loading")})))),o().createElement("div",{className:A.confirmButton},o().createElement(p.Button,{kind:"primary",type:"submit",disabled:!b||!g},d("confirm","Confirm"))))))}},3088:(e,n,t)=>{t.d(n,{Z:()=>p});var i=t(9233),o=t.n(i),a=t(361),r=t.n(a)()(o());r.push([e.id,":root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79}.-esm-login__location-picker__productiveHeading01___5QiCf{font-size:.875rem;font-weight:600;line-height:1.29;letter-spacing:.16px}.-esm-login__location-picker__productiveHeading02___WaQHp{font-size:1rem;font-weight:600;line-height:1.375;letter-spacing:0}.-esm-login__location-picker__productiveHeading03___6nV-j,.-esm-login__location-picker__welcomeTitle___iI\\+4Z{font-size:1.25rem;font-weight:400;line-height:1.4;letter-spacing:0}.-esm-login__location-picker__productiveHeading04___Oqqcq{font-size:1.75rem;font-weight:400;line-height:1.29;letter-spacing:0}.-esm-login__location-picker__productiveHeading05___DiOHe{font-size:2rem;font-weight:400;line-height:1.25;letter-spacing:0}.-esm-login__location-picker__productiveHeading06___yuK1n{font-size:2rem;font-weight:300;line-height:1.199;letter-spacing:0}.-esm-login__location-picker__bodyShort01___Yu8ZO,.-esm-login__location-picker__locationNotFound___-t5pO,.-esm-login__location-picker__locationRadioButton___Gdh0u,.-esm-login__location-picker__resultsCount___KQ5mh{font-size:.875rem;font-weight:400;line-height:1.29;letter-spacing:.16px}.-esm-login__location-picker__bodyShort02___Qiqsi,.-esm-login__location-picker__searchResults___CAZcg{font-size:1rem;font-weight:400;line-height:1.375;letter-spacing:0}.-esm-login__location-picker__bodyLong01___jzOK6,.-esm-login__location-picker__welcomeMessage___Wfdzz{font-size:.875rem;font-weight:400;line-height:1.43;letter-spacing:.16px}.-esm-login__location-picker__bodyLong02___OT5\\+p{font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:0}.-esm-login__location-picker__label01___itiyC{font-size:.75rem;font-weight:400;line-height:1.34;letter-spacing:.32px}.-esm-login__location-picker__caption01___VD9WY{font-size:.75rem;font-weight:400;line-height:1.34;letter-spacing:.32px}.-esm-login__location-picker__helperText01___f9hQ3{font-size:.75rem;line-height:1.34;letter-spacing:.32px}.-esm-login__location-picker__text01___EkkDZ{color:#161616}.-esm-login__location-picker__text02___39Oi1{color:#525252}.-esm-login__location-picker__locationPickerContainer___t4nEl{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw}.-esm-login__location-picker__locationCard___p8DlF{display:flex;flex-direction:column;width:23rem;background-color:#fff;margin:0;padding:1.5rem;border:1px solid #e0e0e0}.-esm-login__location-picker__welcomeTitle___iI\\+4Z{text-transform:capitalize}.-esm-login__location-picker__searchBox___5ywPq{margin-top:1rem}.-esm-login__location-picker__welcomeMessage___Wfdzz{margin-top:.5rem;color:#525252}.-esm-login__location-picker__searchResults___CAZcg{margin:1rem 0rem;max-height:100%;overflow-y:auto}.-esm-login__location-picker__resultsCount___KQ5mh{color:#525252}.-esm-login__location-picker__locationResultsContainer___IvnTr{display:flex;overflow-y:auto;margin-top:.5rem}.-esm-login__location-picker__locationRadioButton___Gdh0u{display:flex;justify-content:flex-start;align-items:flex-start;padding:.5rem 0rem;text-align:left;width:18rem}.-esm-login__location-picker__locationNotFound___-t5pO{padding:1rem 0rem;color:#525252}.-esm-login__location-picker__confirmButton___mHNSY button{width:20rem}.-esm-login__location-picker__radioButtonSkeleton___mCTbu{margin-right:0 !important;margin-bottom:1rem}.-esm-login__location-picker__radioButtonSkeleton___mCTbu span{width:100% !important}.-esm-login__location-picker__pagination___N8tXt{background-color:#f4f4f4;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border:2px solid #e0e0e0}.-esm-login__location-picker__pagination___N8tXt>button:first-child,pagination>button:first-child:hover{border-right:2px solid #e0e0e0}.-esm-login__location-picker__pagination___N8tXt>button,.-esm-login__location-picker__pagination___N8tXt>button:hover{border-left:2px solid #e0e0e0}.-esm-login__location-picker__loadingIcon___Tgfyj{display:flex;justify-content:center;align-items:center;margin-top:1rem}","",{version:3,sources:["webpack://./../../framework/esm-styleguide/src/_vars.scss","webpack://./src/root.scss","webpack://./../../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss","webpack://./../../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss","webpack://./src/location-picker/location-picker.scss"],names:[],mappings:"AAyCA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CCtCF,0DCygBI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD1rB1B,0DCqgBI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CDtrB1B,8GCigBI,iBAqLsB,CArLtB,eAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CDlrB1B,0DC6fI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,gBAqLsB,CD9qB1B,0DCyfI,cAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,gBAqLsB,CD1qB1B,0DCqfI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CDtqB1B,sNCifI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CDlqB1B,sGC6eI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CD9pB1B,sGCyeI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD1pB1B,kDCqeI,cAqLsB,CArLtB,eAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CDtpB1B,8CCieI,gBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CDlpB1B,gDC6dI,gBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD9oB1B,mDCydI,gBAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD1oB1B,6CACE,aETU,CFYZ,6CACE,aEZU,CCjDZ,8DACE,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,kBAAA,CACA,YAAA,CACA,WAAA,CAGF,mDACE,YAAA,CACA,qBAAA,CACA,WAAA,CACA,qBD6BgB,CC5BhB,QAAA,CACA,cAAA,CACA,wBAAA,CAGF,oDAEE,yBAAA,CAGF,gDACE,eAAA,CAGF,qDAEE,gBAAA,CACA,aJxBc,CI2BhB,oDAEE,gBAAA,CACA,eAAA,CACA,eAAA,CAGF,mDAEE,aJpCc,CIuChB,+DACE,YAAA,CACA,eAAA,CACA,gBAAA,CAGF,0DACE,YAAA,CACA,0BAAA,CACA,sBAAA,CAEA,kBAAA,CACA,eAAA,CACA,WAAA,CAGF,uDAEE,iBAAA,CACA,aJ1Dc,CI6DhB,2DACE,WAAA,CAGF,0DACE,yBAAA,CACA,kBDuEa,CCpEf,+DACE,qBAAA,CAGF,iDACE,wBDvCQ,CCwCR,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,kBD2Da,CC1Db,wBAAA,CAGF,wGAEE,8BAAA,CAGF,sHAEE,6BAAA,CAGF,kDACE,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,eDyCa",sourcesContent:["$ui-01: #f4f4f4;\n$ui-02: #ffffff;\n$ui-03: #e0e0e0;\n$ui-04: #8d8d8d;\n$ui-05: #161616;\n$text-02: #525252;\n$text-03: #a8a8a8;\n$ui-background: #ffffff;\n$color-gray-30: #c6c6c6;\n$color-gray-70: #525252;\n$color-gray-100: #161616;\n$color-blue-60-2: #0f62fe;\n$color-blue-10: #edf5ff;\n$color-yellow-50: #feecae;\n$carbon--red-50: #fa4d56;\n$inverse-link: #78a9ff;\n$support-02: #24a148;\n$inverse-support-03: #f1c21b;\n$warning-background: #fff8e1;\n$openmrs-background-grey: #f4f4f4;\n$danger: #da1e28;\n$interactive-01: #0f62fe;\n$field-01: #f4f4f4;\n$grey-2: #e0e0e0;\n$labeldropdown: #c6c6c6;\n\n@mixin brand-01($property) {\n #{$property}: #005d5d;\n #{$property}: var(--brand-01);\n}\n\n@mixin brand-02($property) {\n #{$property}: #004144;\n #{$property}: var(--brand-02);\n}\n\n@mixin brand-03($property) {\n #{$property}: #007d79;\n #{$property}: var(--brand-03);\n}\n\n:root {\n --brand-01: #005d5d;\n --brand-02: #004144;\n --brand-03: #007d79;\n}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1200px;\n$breakpoint-desktop-min: 1201px;\n$breakpoint-desktop-max: 99999999px;\n\n/* These color variables will be removed in a future release */\n$brand-teal-01: #007d79;\n$brand-01: #005d5d;\n$brand-02: #004144;\n",'@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";\n@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";\n@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/layout";\n@import "~@openmrs/esm-styleguide/src/vars";\n@import "carbon-components/scss/globals/scss/typography.scss";\n\n.productiveHeading01 {\n @include carbon--type-style("productive-heading-01");\n}\n\n.productiveHeading02 {\n @include carbon--type-style("productive-heading-02");\n}\n\n.productiveHeading03 {\n @include carbon--type-style("productive-heading-03");\n}\n\n.productiveHeading04 {\n @include carbon--type-style("productive-heading-04");\n}\n\n.productiveHeading05 {\n @include carbon--type-style("productive-heading-05");\n}\n\n.productiveHeading06 {\n @include carbon--type-style("productive-heading-06");\n}\n\n.bodyShort01 {\n @include carbon--type-style("body-short-01");\n}\n\n.bodyShort02 {\n @include carbon--type-style("body-short-02");\n}\n\n.bodyLong01 {\n @include carbon--type-style("body-long-01");\n}\n\n.bodyLong02 {\n @include carbon--type-style("body-long-02");\n}\n\n.label01 {\n @include carbon--type-style("label-01");\n}\n\n.caption01 {\n @include carbon--type-style("caption-01");\n}\n\n.helperText01 {\n @include carbon--type-style("helper-text-01");\n}\n\n.text01 {\n color: $text-01;\n}\n\n.text02 {\n color: $text-02;\n}\n',"//\n// Copyright IBM Corp. 2018, 2018\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@import '../layout/breakpoint';\n@import 'font-family';\n@import 'scale';\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$caption-01: (\n font-size: carbon--type-scale(1),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$label-01: (\n font-size: carbon--type-scale(1),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$helper-text-01: (\n font-size: carbon--type-scale(1),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-01: (\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.29,\n letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-01: (\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.43,\n letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-02: (\n font-size: carbon--type-scale(3),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.375,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-02: (\n font-size: carbon--type-scale(3),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.5,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-01: (\n font-family: carbon--font-family('mono'),\n font-size: carbon--type-scale(1),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-02: (\n font-family: carbon--font-family('mono'),\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.43,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-01: (\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.29,\n letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-01: $heading-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-02: (\n font-size: carbon--type-scale(3),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.375,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-02: $heading-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-03: (\n font-size: carbon--type-scale(5),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.4,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-04: (\n font-size: carbon--type-scale(7),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.29,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-05: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.25,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-06: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('light'),\n // Extra digit needed for precision in Chrome\n line-height: 1.199,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-07: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('light'),\n line-height: 1.19,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-01: map-merge(\n $heading-01,\n (\n line-height: 1.25,\n )\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-02: map-merge(\n $heading-02,\n (\n line-height: 1.5,\n )\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-03: (\n font-size: carbon--type-scale(5),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.4,\n letter-spacing: 0,\n breakpoints: (\n xlg: (\n font-size: carbon--type-scale(5),\n line-height: 1.25,\n ),\n max: (\n font-size: carbon--type-scale(6),\n line-height: 1.334,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-04: (\n font-size: carbon--type-scale(7),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.29,\n letter-spacing: 0,\n breakpoints: (\n xlg: (\n font-size: carbon--type-scale(7),\n line-height: 1.25,\n ),\n max: (\n font-size: carbon--type-scale(8),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-05: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.25,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(9),\n font-weight: carbon--font-weight('light'),\n line-height: 1.22,\n ),\n lg: (\n font-size: carbon--type-scale(10),\n line-height: 1.19,\n ),\n xlg: (\n font-size: carbon--type-scale(11),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(13),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-06: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.25,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(9),\n line-height: 1.22,\n ),\n lg: (\n font-size: carbon--type-scale(10),\n line-height: 1.19,\n ),\n xlg: (\n font-size: carbon--type-scale(11),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(13),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-paragraph-01: (\n font-size: carbon--type-scale(6),\n font-weight: carbon--font-weight('light'),\n line-height: 1.334,\n letter-spacing: 0,\n breakpoints: (\n lg: (\n font-size: carbon--type-scale(7),\n line-height: 1.29,\n ),\n max: (\n font-size: carbon--type-scale(8),\n line-height: 1.25,\n ),\n ),\n);\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-01: (\n font-size: carbon--type-scale(5),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.3,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(5),\n ),\n lg: (\n font-size: carbon--type-scale(6),\n line-height: 1.334,\n ),\n xlg: (\n font-size: carbon--type-scale(7),\n line-height: 1.29,\n ),\n max: (\n font-size: carbon--type-scale(8),\n line-height: 1.25,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-02: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('light'),\n line-height: 1.25,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(9),\n line-height: 1.22,\n ),\n lg: (\n font-size: carbon--type-scale(10),\n line-height: 1.19,\n ),\n xlg: (\n font-size: carbon--type-scale(11),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(13),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-01: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('light'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(10),\n ),\n lg: (\n font-size: carbon--type-scale(12),\n ),\n xlg: (\n font-size: carbon--type-scale(13),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(15),\n line-height: 1.13,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-02: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(10),\n ),\n lg: (\n font-size: carbon--type-scale(12),\n ),\n xlg: (\n font-size: carbon--type-scale(13),\n line-height: 1.16,\n ),\n max: (\n font-size: carbon--type-scale(15),\n line-height: 1.13,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-03: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('light'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(14),\n line-height: 1.15,\n ),\n lg: (\n font-size: carbon--type-scale(17),\n line-height: 1.11,\n letter-spacing: -0.64px,\n ),\n xlg: (\n font-size: carbon--type-scale(20),\n line-height: 1.07,\n letter-spacing: -0.64px,\n ),\n max: (\n font-size: carbon--type-scale(23),\n line-height: 1.05,\n letter-spacing: -0.96px,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-04: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(14),\n line-height: 1.15,\n ),\n lg: (\n font-size: carbon--type-scale(17),\n line-height: 1.11,\n letter-spacing: -0.64px,\n ),\n xlg: (\n font-size: carbon--type-scale(20),\n line-height: 1.07,\n letter-spacing: -0.64px,\n ),\n max: (\n font-size: carbon--type-scale(23),\n line-height: 1.05,\n letter-spacing: -0.96px,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$tokens: (\n caption-01: $caption-01,\n label-01: $label-01,\n helper-text-01: $helper-text-01,\n body-short-01: $body-short-01,\n body-short-02: $body-short-02,\n body-long-01: $body-long-01,\n body-long-02: $body-long-02,\n code-01: $code-01,\n code-02: $code-02,\n heading-01: $heading-01,\n heading-02: $heading-02,\n productive-heading-01: $productive-heading-01,\n productive-heading-02: $productive-heading-02,\n productive-heading-03: $productive-heading-03,\n productive-heading-04: $productive-heading-04,\n productive-heading-05: $productive-heading-05,\n productive-heading-06: $productive-heading-06,\n productive-heading-07: $productive-heading-07,\n expressive-paragraph-01: $expressive-paragraph-01,\n expressive-heading-01: $expressive-heading-01,\n expressive-heading-02: $expressive-heading-02,\n expressive-heading-03: $expressive-heading-03,\n expressive-heading-04: $expressive-heading-04,\n expressive-heading-05: $expressive-heading-05,\n expressive-heading-06: $expressive-heading-06,\n quotation-01: $quotation-01,\n quotation-02: $quotation-02,\n display-01: $display-01,\n display-02: $display-02,\n display-03: $display-03,\n display-04: $display-04,\n);\n\n/// @param {Map} $map\n/// @access public\n/// @group @carbon/type\n@mixin properties($map) {\n @each $name, $value in $map {\n #{$name}: $value;\n }\n}\n\n/// @param {Number} $value - Number with units\n/// @return {Number} Without units\n/// @access public\n/// @group @carbon/type\n@function strip-unit($value) {\n @return $value / ($value * 0 + 1);\n}\n\n/// This helper includes fluid type styles for the given token value. Fluid type\n/// means that the `font-size` is computed using `calc()` in order to be\n/// determined by the screen size instead of a breakpoint. As a result, fluid\n/// styles should be used with caution in fixed width contexts.\n///\n/// In addition, we make use of %-based line-heights so that the line-height of\n/// each type style is computed correctly due to the dynamic nature of the\n/// `font-size`.\n///\n/// Most of the logic for this work comes from CSS Tricks:\n/// https://css-tricks.com/snippets/css/fluid-typography/\n///\n/// @param {Map} $type-styles - The value of a given type token\n/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) {\n // Include the initial styles for the given token by default without any\n // media query guard. This includes `font-size` as a fallback in the case\n // that a browser does not support `calc()`\n @include properties(map-remove($type-styles, breakpoints));\n // We also need to include the `sm` styles by default since they don't\n // appear in the fluid styles for tokens\n @include fluid-type-size($type-styles, sm, $breakpoints);\n\n // Finally, we need to go through all the breakpoints defined in the type\n // token and apply the properties and fluid type size for that given\n // breakpoint\n @each $name, $values in map-get($type-styles, breakpoints) {\n @include carbon--breakpoint($name) {\n @include properties($values);\n @include fluid-type-size($type-styles, $name, $breakpoints);\n }\n }\n}\n\n/// Computes the fluid `font-size` for a given type style and breakpoint\n/// @param {Map} $type-styles - The styles for a given token\n/// @param {String} $name - The name of the breakpoint to which we apply the fluid\n/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type-size(\n $type-styles,\n $name,\n $breakpoints: $carbon--grid-breakpoints\n) {\n // Get the information about the breakpoint we're currently working in. Useful\n // for getting initial width information\n $breakpoint: map-get($breakpoints, $name);\n\n // Our fluid styles are captured under the 'breakpoints' property in our type\n // styles map. These define what values to treat as `max-` variables below\n $fluid-sizes: map-get($type-styles, breakpoints);\n $fluid-breakpoint: ();\n // Special case for `sm` because the styles for small are on the type style\n // directly\n @if $name == sm {\n $fluid-breakpoint: map-remove($type-styles, breakpoints);\n } @else {\n $fluid-breakpoint: map-get($fluid-sizes, $name);\n }\n\n // Initialize our font-sizes to the default size for the type style\n $max-font-size: map-get($type-styles, font-size);\n $min-font-size: map-get($type-styles, font-size);\n @if map-has-key($fluid-breakpoint, font-size) {\n $min-font-size: map-get($fluid-breakpoint, font-size);\n }\n\n // Initialize our min and max width to the width of the current breakpoint\n $max-vw: map-get($breakpoint, width);\n $min-vw: map-get($breakpoint, width);\n\n // We can use `breakpoint-next` to see if there is another breakpoint we can\n // use to update `max-font-size` and `max-vw` with larger values\n $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints);\n $next-fluid-breakpoint-name: null;\n\n // We need to figure out what the next available fluid breakpoint is for our\n // given $type-styles. In this loop we try and iterate through breakpoints\n // until we either manually set $next-breakpoint-available to null or\n // `breakpoint-next` returns null.\n @while $next-breakpoint-available {\n @if map-has-key($fluid-sizes, $next-breakpoint-available) {\n $next-fluid-breakpoint-name: $next-breakpoint-available;\n $next-breakpoint-available: null;\n } @else {\n $next-breakpoint-available: carbon--breakpoint-next(\n $next-breakpoint-available,\n $breakpoints\n );\n }\n }\n\n // If we have found the next available fluid breakpoint name, then we know\n // that we have values that we can use to set max-font-size and max-vw as both\n // values derive from the next breakpoint\n @if $next-fluid-breakpoint-name {\n $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name);\n $max-font-size: map-get(\n map-get($fluid-sizes, $next-fluid-breakpoint-name),\n font-size\n );\n $max-vw: map-get($next-fluid-breakpoint, width);\n\n // prettier-ignore\n font-size: calc(#{$min-font-size} +\n #{strip-unit($max-font-size - $min-font-size)} *\n ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})\n );\n } @else {\n // Otherwise, just default to setting the font size found from the type\n // style or the given fluid breakpoint in the type style\n font-size: $min-font-size;\n }\n}\n\n// TODO move following variable and `custom-property` mixin into shared file for\n// both `@carbon/type` and `@carbon/themes`\n\n/// @access private\n/// @group @carbon/type\n$custom-property-prefix: 'cds' !default;\n\n/// @access private\n/// @group @carbon/type\n@mixin custom-properties($name, $value) {\n @each $property, $value in $value {\n #{$property}: var(\n --#{$custom-property-prefix}-#{$name}-#{$property},\n #{$value}\n );\n }\n}\n\n/// Helper mixin to include the styles for a given token in any selector in your\n/// project. Also includes an optional fluid option that will enable fluid\n/// styles for the token if they are defined. Fluid styles will cause the\n/// token's font-size to be computed based on the viewport size. As a result, use\n/// with caution in fixed contexts.\n/// @param {String} $name - The name of the token to get the styles for\n/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the\n/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use\n/// @access public\n/// @group @carbon/type\n@mixin carbon--type-style(\n $name,\n $fluid: false,\n $breakpoints: $carbon--grid-breakpoints\n) {\n @if not map-has-key($tokens, $name) {\n @error 'Unable to find a token with the name: `#{$name}`';\n }\n\n $token: map-get($tokens, $name);\n\n // If $fluid is set to true and the token has breakpoints defined for fluid\n // styles, delegate to the fluid-type helper for the given token\n @if $fluid == true and map-has-key($token, 'breakpoints') {\n @include fluid-type($token, $breakpoints);\n } @else {\n @if global-variable-exists('feature-flags') and\n map-get($feature-flags, 'enable-css-custom-properties')\n {\n @include custom-properties($name, $token);\n } @else {\n // Otherwise, we just include all the property declarations directly on the\n // selector\n @include properties(map-remove($token, 'breakpoints'));\n }\n }\n}\n","// Code generated by @carbon/themes. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2019\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@import './themes';\n\n/// Define theme variables from a map of tokens\n/// @access public\n/// @param {Map} $theme [$carbon--theme] - Map of theme tokens\n/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens\n/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables.\n///\n/// @example scss\n/// // Default usage\n/// @include carbon--theme();\n///\n/// // Alternate styling (not white theme)\n/// @include carbon--theme($carbon--theme--g90) {\n/// // declarations...\n/// }\n///\n/// // Inline styling\n/// @include carbon--theme($carbon--theme--g90) {\n/// .my-dark-theme {\n/// // declarations...\n/// }\n/// }\n///\n/// @group @carbon/themes\n@mixin carbon--theme(\n $theme: $carbon--theme,\n $emit-custom-properties: false,\n $emit-difference: false\n) {\n $parent-carbon-theme: $carbon--theme;\n $carbon--theme: $theme !global;\n $interactive-01: map-get($theme, 'interactive-01') !global;\n $interactive-02: map-get($theme, 'interactive-02') !global;\n $interactive-03: map-get($theme, 'interactive-03') !global;\n $interactive-04: map-get($theme, 'interactive-04') !global;\n $ui-background: map-get($theme, 'ui-background') !global;\n $ui-01: map-get($theme, 'ui-01') !global;\n $ui-02: map-get($theme, 'ui-02') !global;\n $ui-03: map-get($theme, 'ui-03') !global;\n $ui-04: map-get($theme, 'ui-04') !global;\n $ui-05: map-get($theme, 'ui-05') !global;\n $text-01: map-get($theme, 'text-01') !global;\n $text-02: map-get($theme, 'text-02') !global;\n $text-03: map-get($theme, 'text-03') !global;\n $text-04: map-get($theme, 'text-04') !global;\n $text-05: map-get($theme, 'text-05') !global;\n $text-error: map-get($theme, 'text-error') !global;\n $icon-01: map-get($theme, 'icon-01') !global;\n $icon-02: map-get($theme, 'icon-02') !global;\n $icon-03: map-get($theme, 'icon-03') !global;\n $link-01: map-get($theme, 'link-01') !global;\n $link-02: map-get($theme, 'link-02') !global;\n $inverse-link: map-get($theme, 'inverse-link') !global;\n $field-01: map-get($theme, 'field-01') !global;\n $field-02: map-get($theme, 'field-02') !global;\n $inverse-01: map-get($theme, 'inverse-01') !global;\n $inverse-02: map-get($theme, 'inverse-02') !global;\n $support-01: map-get($theme, 'support-01') !global;\n $support-02: map-get($theme, 'support-02') !global;\n $support-03: map-get($theme, 'support-03') !global;\n $support-04: map-get($theme, 'support-04') !global;\n $inverse-support-01: map-get($theme, 'inverse-support-01') !global;\n $inverse-support-02: map-get($theme, 'inverse-support-02') !global;\n $inverse-support-03: map-get($theme, 'inverse-support-03') !global;\n $inverse-support-04: map-get($theme, 'inverse-support-04') !global;\n $overlay-01: map-get($theme, 'overlay-01') !global;\n $danger-01: map-get($theme, 'danger-01') !global;\n $danger-02: map-get($theme, 'danger-02') !global;\n $focus: map-get($theme, 'focus') !global;\n $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;\n $hover-primary: map-get($theme, 'hover-primary') !global;\n $active-primary: map-get($theme, 'active-primary') !global;\n $hover-primary-text: map-get($theme, 'hover-primary-text') !global;\n $hover-secondary: map-get($theme, 'hover-secondary') !global;\n $active-secondary: map-get($theme, 'active-secondary') !global;\n $hover-tertiary: map-get($theme, 'hover-tertiary') !global;\n $active-tertiary: map-get($theme, 'active-tertiary') !global;\n $hover-ui: map-get($theme, 'hover-ui') !global;\n $hover-light-ui: map-get($theme, 'hover-light-ui') !global;\n $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;\n $active-ui: map-get($theme, 'active-ui') !global;\n $active-light-ui: map-get($theme, 'active-light-ui') !global;\n $selected-ui: map-get($theme, 'selected-ui') !global;\n $selected-light-ui: map-get($theme, 'selected-light-ui') !global;\n $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;\n $hover-danger: map-get($theme, 'hover-danger') !global;\n $active-danger: map-get($theme, 'active-danger') !global;\n $hover-row: map-get($theme, 'hover-row') !global;\n $visited-link: map-get($theme, 'visited-link') !global;\n $disabled-01: map-get($theme, 'disabled-01') !global;\n $disabled-02: map-get($theme, 'disabled-02') !global;\n $disabled-03: map-get($theme, 'disabled-03') !global;\n $highlight: map-get($theme, 'highlight') !global;\n $decorative-01: map-get($theme, 'decorative-01') !global;\n $button-separator: map-get($theme, 'button-separator') !global;\n $skeleton-01: map-get($theme, 'skeleton-01') !global;\n $skeleton-02: map-get($theme, 'skeleton-02') !global;\n $brand-01: map-get($theme, 'brand-01') !global;\n $brand-02: map-get($theme, 'brand-02') !global;\n $brand-03: map-get($theme, 'brand-03') !global;\n $active-01: map-get($theme, 'active-01') !global;\n $hover-field: map-get($theme, 'hover-field') !global;\n $danger: map-get($theme, 'danger') !global;\n $caption-01: map-get($theme, 'caption-01') !global;\n $label-01: map-get($theme, 'label-01') !global;\n $helper-text-01: map-get($theme, 'helper-text-01') !global;\n $body-short-01: map-get($theme, 'body-short-01') !global;\n $body-long-01: map-get($theme, 'body-long-01') !global;\n $body-short-02: map-get($theme, 'body-short-02') !global;\n $body-long-02: map-get($theme, 'body-long-02') !global;\n $code-01: map-get($theme, 'code-01') !global;\n $code-02: map-get($theme, 'code-02') !global;\n $heading-01: map-get($theme, 'heading-01') !global;\n $productive-heading-01: map-get($theme, 'productive-heading-01') !global;\n $heading-02: map-get($theme, 'heading-02') !global;\n $productive-heading-02: map-get($theme, 'productive-heading-02') !global;\n $productive-heading-03: map-get($theme, 'productive-heading-03') !global;\n $productive-heading-04: map-get($theme, 'productive-heading-04') !global;\n $productive-heading-05: map-get($theme, 'productive-heading-05') !global;\n $productive-heading-06: map-get($theme, 'productive-heading-06') !global;\n $productive-heading-07: map-get($theme, 'productive-heading-07') !global;\n $expressive-heading-01: map-get($theme, 'expressive-heading-01') !global;\n $expressive-heading-02: map-get($theme, 'expressive-heading-02') !global;\n $expressive-heading-03: map-get($theme, 'expressive-heading-03') !global;\n $expressive-heading-04: map-get($theme, 'expressive-heading-04') !global;\n $expressive-heading-05: map-get($theme, 'expressive-heading-05') !global;\n $expressive-heading-06: map-get($theme, 'expressive-heading-06') !global;\n $expressive-paragraph-01: map-get($theme, 'expressive-paragraph-01') !global;\n $quotation-01: map-get($theme, 'quotation-01') !global;\n $quotation-02: map-get($theme, 'quotation-02') !global;\n $display-01: map-get($theme, 'display-01') !global;\n $display-02: map-get($theme, 'display-02') !global;\n $display-03: map-get($theme, 'display-03') !global;\n $display-04: map-get($theme, 'display-04') !global;\n $spacing-01: map-get($theme, 'spacing-01') !global;\n $spacing-02: map-get($theme, 'spacing-02') !global;\n $spacing-03: map-get($theme, 'spacing-03') !global;\n $spacing-04: map-get($theme, 'spacing-04') !global;\n $spacing-05: map-get($theme, 'spacing-05') !global;\n $spacing-06: map-get($theme, 'spacing-06') !global;\n $spacing-07: map-get($theme, 'spacing-07') !global;\n $spacing-08: map-get($theme, 'spacing-08') !global;\n $spacing-09: map-get($theme, 'spacing-09') !global;\n $spacing-10: map-get($theme, 'spacing-10') !global;\n $spacing-11: map-get($theme, 'spacing-11') !global;\n $spacing-12: map-get($theme, 'spacing-12') !global;\n $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global;\n $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global;\n $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global;\n $fluid-spacing-04: map-get($theme, 'fluid-spacing-04') !global;\n $layout-01: map-get($theme, 'layout-01') !global;\n $layout-02: map-get($theme, 'layout-02') !global;\n $layout-03: map-get($theme, 'layout-03') !global;\n $layout-04: map-get($theme, 'layout-04') !global;\n $layout-05: map-get($theme, 'layout-05') !global;\n $layout-06: map-get($theme, 'layout-06') !global;\n $layout-07: map-get($theme, 'layout-07') !global;\n $container-01: map-get($theme, 'container-01') !global;\n $container-02: map-get($theme, 'container-02') !global;\n $container-03: map-get($theme, 'container-03') !global;\n $container-04: map-get($theme, 'container-04') !global;\n $container-05: map-get($theme, 'container-05') !global;\n $icon-size-01: map-get($theme, 'icon-size-01') !global;\n $icon-size-02: map-get($theme, 'icon-size-02') !global;\n\n @if global-variable-exists('feature-flags') and\n map-get($feature-flags, 'enable-css-custom-properties')\n {\n $interactive-01: var(\n --#{$custom-property-prefix}-interactive-01,\n map-get($theme, 'interactive-01')\n ) !global;\n $interactive-02: var(\n --#{$custom-property-prefix}-interactive-02,\n map-get($theme, 'interactive-02')\n ) !global;\n $interactive-03: var(\n --#{$custom-property-prefix}-interactive-03,\n map-get($theme, 'interactive-03')\n ) !global;\n $interactive-04: var(\n --#{$custom-property-prefix}-interactive-04,\n map-get($theme, 'interactive-04')\n ) !global;\n $ui-background: var(\n --#{$custom-property-prefix}-ui-background,\n map-get($theme, 'ui-background')\n ) !global;\n $ui-01: var(\n --#{$custom-property-prefix}-ui-01,\n map-get($theme, 'ui-01')\n ) !global;\n $ui-02: var(\n --#{$custom-property-prefix}-ui-02,\n map-get($theme, 'ui-02')\n ) !global;\n $ui-03: var(\n --#{$custom-property-prefix}-ui-03,\n map-get($theme, 'ui-03')\n ) !global;\n $ui-04: var(\n --#{$custom-property-prefix}-ui-04,\n map-get($theme, 'ui-04')\n ) !global;\n $ui-05: var(\n --#{$custom-property-prefix}-ui-05,\n map-get($theme, 'ui-05')\n ) !global;\n $text-01: var(\n --#{$custom-property-prefix}-text-01,\n map-get($theme, 'text-01')\n ) !global;\n $text-02: var(\n --#{$custom-property-prefix}-text-02,\n map-get($theme, 'text-02')\n ) !global;\n $text-03: var(\n --#{$custom-property-prefix}-text-03,\n map-get($theme, 'text-03')\n ) !global;\n $text-04: var(\n --#{$custom-property-prefix}-text-04,\n map-get($theme, 'text-04')\n ) !global;\n $text-05: var(\n --#{$custom-property-prefix}-text-05,\n map-get($theme, 'text-05')\n ) !global;\n $text-error: var(\n --#{$custom-property-prefix}-text-error,\n map-get($theme, 'text-error')\n ) !global;\n $icon-01: var(\n --#{$custom-property-prefix}-icon-01,\n map-get($theme, 'icon-01')\n ) !global;\n $icon-02: var(\n --#{$custom-property-prefix}-icon-02,\n map-get($theme, 'icon-02')\n ) !global;\n $icon-03: var(\n --#{$custom-property-prefix}-icon-03,\n map-get($theme, 'icon-03')\n ) !global;\n $link-01: var(\n --#{$custom-property-prefix}-link-01,\n map-get($theme, 'link-01')\n ) !global;\n $link-02: var(\n --#{$custom-property-prefix}-link-02,\n map-get($theme, 'link-02')\n ) !global;\n $inverse-link: var(\n --#{$custom-property-prefix}-inverse-link,\n map-get($theme, 'inverse-link')\n ) !global;\n $field-01: var(\n --#{$custom-property-prefix}-field-01,\n map-get($theme, 'field-01')\n ) !global;\n $field-02: var(\n --#{$custom-property-prefix}-field-02,\n map-get($theme, 'field-02')\n ) !global;\n $inverse-01: var(\n --#{$custom-property-prefix}-inverse-01,\n map-get($theme, 'inverse-01')\n ) !global;\n $inverse-02: var(\n --#{$custom-property-prefix}-inverse-02,\n map-get($theme, 'inverse-02')\n ) !global;\n $support-01: var(\n --#{$custom-property-prefix}-support-01,\n map-get($theme, 'support-01')\n ) !global;\n $support-02: var(\n --#{$custom-property-prefix}-support-02,\n map-get($theme, 'support-02')\n ) !global;\n $support-03: var(\n --#{$custom-property-prefix}-support-03,\n map-get($theme, 'support-03')\n ) !global;\n $support-04: var(\n --#{$custom-property-prefix}-support-04,\n map-get($theme, 'support-04')\n ) !global;\n $inverse-support-01: var(\n --#{$custom-property-prefix}-inverse-support-01,\n map-get($theme, 'inverse-support-01')\n ) !global;\n $inverse-support-02: var(\n --#{$custom-property-prefix}-inverse-support-02,\n map-get($theme, 'inverse-support-02')\n ) !global;\n $inverse-support-03: var(\n --#{$custom-property-prefix}-inverse-support-03,\n map-get($theme, 'inverse-support-03')\n ) !global;\n $inverse-support-04: var(\n --#{$custom-property-prefix}-inverse-support-04,\n map-get($theme, 'inverse-support-04')\n ) !global;\n $overlay-01: var(\n --#{$custom-property-prefix}-overlay-01,\n map-get($theme, 'overlay-01')\n ) !global;\n $danger-01: var(\n --#{$custom-property-prefix}-danger-01,\n map-get($theme, 'danger-01')\n ) !global;\n $danger-02: var(\n --#{$custom-property-prefix}-danger-02,\n map-get($theme, 'danger-02')\n ) !global;\n $focus: var(\n --#{$custom-property-prefix}-focus,\n map-get($theme, 'focus')\n ) !global;\n $inverse-focus-ui: var(\n --#{$custom-property-prefix}-inverse-focus-ui,\n map-get($theme, 'inverse-focus-ui')\n ) !global;\n $hover-primary: var(\n --#{$custom-property-prefix}-hover-primary,\n map-get($theme, 'hover-primary')\n ) !global;\n $active-primary: var(\n --#{$custom-property-prefix}-active-primary,\n map-get($theme, 'active-primary')\n ) !global;\n $hover-primary-text: var(\n --#{$custom-property-prefix}-hover-primary-text,\n map-get($theme, 'hover-primary-text')\n ) !global;\n $hover-secondary: var(\n --#{$custom-property-prefix}-hover-secondary,\n map-get($theme, 'hover-secondary')\n ) !global;\n $active-secondary: var(\n --#{$custom-property-prefix}-active-secondary,\n map-get($theme, 'active-secondary')\n ) !global;\n $hover-tertiary: var(\n --#{$custom-property-prefix}-hover-tertiary,\n map-get($theme, 'hover-tertiary')\n ) !global;\n $active-tertiary: var(\n --#{$custom-property-prefix}-active-tertiary,\n map-get($theme, 'active-tertiary')\n ) !global;\n $hover-ui: var(\n --#{$custom-property-prefix}-hover-ui,\n map-get($theme, 'hover-ui')\n ) !global;\n $hover-light-ui: var(\n --#{$custom-property-prefix}-hover-light-ui,\n map-get($theme, 'hover-light-ui')\n ) !global;\n $hover-selected-ui: var(\n --#{$custom-property-prefix}-hover-selected-ui,\n map-get($theme, 'hover-selected-ui')\n ) !global;\n $active-ui: var(\n --#{$custom-property-prefix}-active-ui,\n map-get($theme, 'active-ui')\n ) !global;\n $active-light-ui: var(\n --#{$custom-property-prefix}-active-light-ui,\n map-get($theme, 'active-light-ui')\n ) !global;\n $selected-ui: var(\n --#{$custom-property-prefix}-selected-ui,\n map-get($theme, 'selected-ui')\n ) !global;\n $selected-light-ui: var(\n --#{$custom-property-prefix}-selected-light-ui,\n map-get($theme, 'selected-light-ui')\n ) !global;\n $inverse-hover-ui: var(\n --#{$custom-property-prefix}-inverse-hover-ui,\n map-get($theme, 'inverse-hover-ui')\n ) !global;\n $hover-danger: var(\n --#{$custom-property-prefix}-hover-danger,\n map-get($theme, 'hover-danger')\n ) !global;\n $active-danger: var(\n --#{$custom-property-prefix}-active-danger,\n map-get($theme, 'active-danger')\n ) !global;\n $hover-row: var(\n --#{$custom-property-prefix}-hover-row,\n map-get($theme, 'hover-row')\n ) !global;\n $visited-link: var(\n --#{$custom-property-prefix}-visited-link,\n map-get($theme, 'visited-link')\n ) !global;\n $disabled-01: var(\n --#{$custom-property-prefix}-disabled-01,\n map-get($theme, 'disabled-01')\n ) !global;\n $disabled-02: var(\n --#{$custom-property-prefix}-disabled-02,\n map-get($theme, 'disabled-02')\n ) !global;\n $disabled-03: var(\n --#{$custom-property-prefix}-disabled-03,\n map-get($theme, 'disabled-03')\n ) !global;\n $highlight: var(\n --#{$custom-property-prefix}-highlight,\n map-get($theme, 'highlight')\n ) !global;\n $decorative-01: var(\n --#{$custom-property-prefix}-decorative-01,\n map-get($theme, 'decorative-01')\n ) !global;\n $button-separator: var(\n --#{$custom-property-prefix}-button-separator,\n map-get($theme, 'button-separator')\n ) !global;\n $skeleton-01: var(\n --#{$custom-property-prefix}-skeleton-01,\n map-get($theme, 'skeleton-01')\n ) !global;\n $skeleton-02: var(\n --#{$custom-property-prefix}-skeleton-02,\n map-get($theme, 'skeleton-02')\n ) !global;\n $brand-01: var(\n --#{$custom-property-prefix}-brand-01,\n map-get($theme, 'brand-01')\n ) !global;\n $brand-02: var(\n --#{$custom-property-prefix}-brand-02,\n map-get($theme, 'brand-02')\n ) !global;\n $brand-03: var(\n --#{$custom-property-prefix}-brand-03,\n map-get($theme, 'brand-03')\n ) !global;\n $active-01: var(\n --#{$custom-property-prefix}-active-01,\n map-get($theme, 'active-01')\n ) !global;\n $hover-field: var(\n --#{$custom-property-prefix}-hover-field,\n map-get($theme, 'hover-field')\n ) !global;\n $danger: var(\n --#{$custom-property-prefix}-danger,\n map-get($theme, 'danger')\n ) !global;\n $spacing-01: var(\n --#{$custom-property-prefix}-spacing-01,\n map-get($theme, 'spacing-01')\n ) !global;\n $spacing-02: var(\n --#{$custom-property-prefix}-spacing-02,\n map-get($theme, 'spacing-02')\n ) !global;\n $spacing-03: var(\n --#{$custom-property-prefix}-spacing-03,\n map-get($theme, 'spacing-03')\n ) !global;\n $spacing-04: var(\n --#{$custom-property-prefix}-spacing-04,\n map-get($theme, 'spacing-04')\n ) !global;\n $spacing-05: var(\n --#{$custom-property-prefix}-spacing-05,\n map-get($theme, 'spacing-05')\n ) !global;\n $spacing-06: var(\n --#{$custom-property-prefix}-spacing-06,\n map-get($theme, 'spacing-06')\n ) !global;\n $spacing-07: var(\n --#{$custom-property-prefix}-spacing-07,\n map-get($theme, 'spacing-07')\n ) !global;\n $spacing-08: var(\n --#{$custom-property-prefix}-spacing-08,\n map-get($theme, 'spacing-08')\n ) !global;\n $spacing-09: var(\n --#{$custom-property-prefix}-spacing-09,\n map-get($theme, 'spacing-09')\n ) !global;\n $spacing-10: var(\n --#{$custom-property-prefix}-spacing-10,\n map-get($theme, 'spacing-10')\n ) !global;\n $spacing-11: var(\n --#{$custom-property-prefix}-spacing-11,\n map-get($theme, 'spacing-11')\n ) !global;\n $spacing-12: var(\n --#{$custom-property-prefix}-spacing-12,\n map-get($theme, 'spacing-12')\n ) !global;\n $fluid-spacing-01: var(\n --#{$custom-property-prefix}-fluid-spacing-01,\n map-get($theme, 'fluid-spacing-01')\n ) !global;\n $fluid-spacing-02: var(\n --#{$custom-property-prefix}-fluid-spacing-02,\n map-get($theme, 'fluid-spacing-02')\n ) !global;\n $fluid-spacing-03: var(\n --#{$custom-property-prefix}-fluid-spacing-03,\n map-get($theme, 'fluid-spacing-03')\n ) !global;\n $fluid-spacing-04: var(\n --#{$custom-property-prefix}-fluid-spacing-04,\n map-get($theme, 'fluid-spacing-04')\n ) !global;\n $layout-01: var(\n --#{$custom-property-prefix}-layout-01,\n map-get($theme, 'layout-01')\n ) !global;\n $layout-02: var(\n --#{$custom-property-prefix}-layout-02,\n map-get($theme, 'layout-02')\n ) !global;\n $layout-03: var(\n --#{$custom-property-prefix}-layout-03,\n map-get($theme, 'layout-03')\n ) !global;\n $layout-04: var(\n --#{$custom-property-prefix}-layout-04,\n map-get($theme, 'layout-04')\n ) !global;\n $layout-05: var(\n --#{$custom-property-prefix}-layout-05,\n map-get($theme, 'layout-05')\n ) !global;\n $layout-06: var(\n --#{$custom-property-prefix}-layout-06,\n map-get($theme, 'layout-06')\n ) !global;\n $layout-07: var(\n --#{$custom-property-prefix}-layout-07,\n map-get($theme, 'layout-07')\n ) !global;\n $container-01: var(\n --#{$custom-property-prefix}-container-01,\n map-get($theme, 'container-01')\n ) !global;\n $container-02: var(\n --#{$custom-property-prefix}-container-02,\n map-get($theme, 'container-02')\n ) !global;\n $container-03: var(\n --#{$custom-property-prefix}-container-03,\n map-get($theme, 'container-03')\n ) !global;\n $container-04: var(\n --#{$custom-property-prefix}-container-04,\n map-get($theme, 'container-04')\n ) !global;\n $container-05: var(\n --#{$custom-property-prefix}-container-05,\n map-get($theme, 'container-05')\n ) !global;\n $icon-size-01: var(\n --#{$custom-property-prefix}-icon-size-01,\n map-get($theme, 'icon-size-01')\n ) !global;\n $icon-size-02: var(\n --#{$custom-property-prefix}-icon-size-02,\n map-get($theme, 'icon-size-02')\n ) !global;\n }\n @if $emit-custom-properties == true {\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-01',\n map-get($theme, 'interactive-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-02',\n map-get($theme, 'interactive-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-03',\n map-get($theme, 'interactive-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-04',\n map-get($theme, 'interactive-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'ui-background',\n $emit-difference\n )\n {\n @include custom-property(\n 'ui-background',\n map-get($theme, 'ui-background')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {\n @include custom-property('ui-01', map-get($theme, 'ui-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {\n @include custom-property('ui-02', map-get($theme, 'ui-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {\n @include custom-property('ui-03', map-get($theme, 'ui-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {\n @include custom-property('ui-04', map-get($theme, 'ui-04'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {\n @include custom-property('ui-05', map-get($theme, 'ui-05'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {\n @include custom-property('text-01', map-get($theme, 'text-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {\n @include custom-property('text-02', map-get($theme, 'text-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {\n @include custom-property('text-03', map-get($theme, 'text-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {\n @include custom-property('text-04', map-get($theme, 'text-04'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {\n @include custom-property('text-05', map-get($theme, 'text-05'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'text-error',\n $emit-difference\n )\n {\n @include custom-property('text-error', map-get($theme, 'text-error'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {\n @include custom-property('icon-01', map-get($theme, 'icon-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {\n @include custom-property('icon-02', map-get($theme, 'icon-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {\n @include custom-property('icon-03', map-get($theme, 'icon-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {\n @include custom-property('link-01', map-get($theme, 'link-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'link-02', $emit-difference) {\n @include custom-property('link-02', map-get($theme, 'link-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-link',\n $emit-difference\n )\n {\n @include custom-property('inverse-link', map-get($theme, 'inverse-link'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)\n {\n @include custom-property('field-01', map-get($theme, 'field-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)\n {\n @include custom-property('field-02', map-get($theme, 'field-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-01',\n $emit-difference\n )\n {\n @include custom-property('inverse-01', map-get($theme, 'inverse-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-02',\n $emit-difference\n )\n {\n @include custom-property('inverse-02', map-get($theme, 'inverse-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-01',\n $emit-difference\n )\n {\n @include custom-property('support-01', map-get($theme, 'support-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-02',\n $emit-difference\n )\n {\n @include custom-property('support-02', map-get($theme, 'support-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-03',\n $emit-difference\n )\n {\n @include custom-property('support-03', map-get($theme, 'support-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-04',\n $emit-difference\n )\n {\n @include custom-property('support-04', map-get($theme, 'support-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-01',\n map-get($theme, 'inverse-support-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-02',\n map-get($theme, 'inverse-support-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-03',\n map-get($theme, 'inverse-support-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-04',\n map-get($theme, 'inverse-support-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'overlay-01',\n $emit-difference\n )\n {\n @include custom-property('overlay-01', map-get($theme, 'overlay-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)\n {\n @include custom-property('danger-01', map-get($theme, 'danger-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)\n {\n @include custom-property('danger-02', map-get($theme, 'danger-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {\n @include custom-property('focus', map-get($theme, 'focus'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-focus-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-focus-ui',\n map-get($theme, 'inverse-focus-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-primary',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-primary',\n map-get($theme, 'hover-primary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-primary',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-primary',\n map-get($theme, 'active-primary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-primary-text',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-primary-text',\n map-get($theme, 'hover-primary-text')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-secondary',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-secondary',\n map-get($theme, 'hover-secondary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-secondary',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-secondary',\n map-get($theme, 'active-secondary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-tertiary',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-tertiary',\n map-get($theme, 'hover-tertiary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-tertiary',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-tertiary',\n map-get($theme, 'active-tertiary')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)\n {\n @include custom-property('hover-ui', map-get($theme, 'hover-ui'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-light-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-light-ui',\n map-get($theme, 'hover-light-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-selected-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-selected-ui',\n map-get($theme, 'hover-selected-ui')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)\n {\n @include custom-property('active-ui', map-get($theme, 'active-ui'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-light-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-light-ui',\n map-get($theme, 'active-light-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'selected-ui',\n $emit-difference\n )\n {\n @include custom-property('selected-ui', map-get($theme, 'selected-ui'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'selected-light-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'selected-light-ui',\n map-get($theme, 'selected-light-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-hover-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-hover-ui',\n map-get($theme, 'inverse-hover-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-danger',\n $emit-difference\n )\n {\n @include custom-property('hover-danger', map-get($theme, 'hover-danger'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-danger',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-danger',\n map-get($theme, 'active-danger')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)\n {\n @include custom-property('hover-row', map-get($theme, 'hover-row'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'visited-link',\n $emit-difference\n )\n {\n @include custom-property('visited-link', map-get($theme, 'visited-link'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'disabled-01',\n $emit-difference\n )\n {\n @include custom-property('disabled-01', map-get($theme, 'disabled-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'disabled-02',\n $emit-difference\n )\n {\n @include custom-property('disabled-02', map-get($theme, 'disabled-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'disabled-03',\n $emit-difference\n )\n {\n @include custom-property('disabled-03', map-get($theme, 'disabled-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)\n {\n @include custom-property('highlight', map-get($theme, 'highlight'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'decorative-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'decorative-01',\n map-get($theme, 'decorative-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'button-separator',\n $emit-difference\n )\n {\n @include custom-property(\n 'button-separator',\n map-get($theme, 'button-separator')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'skeleton-01',\n $emit-difference\n )\n {\n @include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'skeleton-02',\n $emit-difference\n )\n {\n @include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)\n {\n @include custom-property('brand-01', map-get($theme, 'brand-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)\n {\n @include custom-property('brand-02', map-get($theme, 'brand-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)\n {\n @include custom-property('brand-03', map-get($theme, 'brand-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)\n {\n @include custom-property('active-01', map-get($theme, 'active-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-field',\n $emit-difference\n )\n {\n @include custom-property('hover-field', map-get($theme, 'hover-field'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {\n @include custom-property('danger', map-get($theme, 'danger'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'caption-01',\n $emit-difference\n )\n {\n @include custom-property('caption-01', map-get($theme, 'caption-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)\n {\n @include custom-property('label-01', map-get($theme, 'label-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'helper-text-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'helper-text-01',\n map-get($theme, 'helper-text-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-short-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'body-short-01',\n map-get($theme, 'body-short-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-long-01',\n $emit-difference\n )\n {\n @include custom-property('body-long-01', map-get($theme, 'body-long-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-short-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'body-short-02',\n map-get($theme, 'body-short-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-long-02',\n $emit-difference\n )\n {\n @include custom-property('body-long-02', map-get($theme, 'body-long-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {\n @include custom-property('code-01', map-get($theme, 'code-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {\n @include custom-property('code-02', map-get($theme, 'code-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'heading-01',\n $emit-difference\n )\n {\n @include custom-property('heading-01', map-get($theme, 'heading-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-01',\n map-get($theme, 'productive-heading-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'heading-02',\n $emit-difference\n )\n {\n @include custom-property('heading-02', map-get($theme, 'heading-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-02',\n map-get($theme, 'productive-heading-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-03',\n map-get($theme, 'productive-heading-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-04',\n map-get($theme, 'productive-heading-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-05',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-05',\n map-get($theme, 'productive-heading-05')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-06',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-06',\n map-get($theme, 'productive-heading-06')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-07',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-07',\n map-get($theme, 'productive-heading-07')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-01',\n map-get($theme, 'expressive-heading-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-02',\n map-get($theme, 'expressive-heading-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-03',\n map-get($theme, 'expressive-heading-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-04',\n map-get($theme, 'expressive-heading-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-05',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-05',\n map-get($theme, 'expressive-heading-05')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-06',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-06',\n map-get($theme, 'expressive-heading-06')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-paragraph-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-paragraph-01',\n map-get($theme, 'expressive-paragraph-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'quotation-01',\n $emit-difference\n )\n {\n @include custom-property('quotation-01', map-get($theme, 'quotation-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'quotation-02',\n $emit-difference\n )\n {\n @include custom-property('quotation-02', map-get($theme, 'quotation-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-01',\n $emit-difference\n )\n {\n @include custom-property('display-01', map-get($theme, 'display-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-02',\n $emit-difference\n )\n {\n @include custom-property('display-02', map-get($theme, 'display-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-03',\n $emit-difference\n )\n {\n @include custom-property('display-03', map-get($theme, 'display-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-04',\n $emit-difference\n )\n {\n @include custom-property('display-04', map-get($theme, 'display-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-01',\n $emit-difference\n )\n {\n @include custom-property('spacing-01', map-get($theme, 'spacing-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-02',\n $emit-difference\n )\n {\n @include custom-property('spacing-02', map-get($theme, 'spacing-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-03',\n $emit-difference\n )\n {\n @include custom-property('spacing-03', map-get($theme, 'spacing-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-04',\n $emit-difference\n )\n {\n @include custom-property('spacing-04', map-get($theme, 'spacing-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-05',\n $emit-difference\n )\n {\n @include custom-property('spacing-05', map-get($theme, 'spacing-05'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-06',\n $emit-difference\n )\n {\n @include custom-property('spacing-06', map-get($theme, 'spacing-06'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-07',\n $emit-difference\n )\n {\n @include custom-property('spacing-07', map-get($theme, 'spacing-07'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-08',\n $emit-difference\n )\n {\n @include custom-property('spacing-08', map-get($theme, 'spacing-08'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-09',\n $emit-difference\n )\n {\n @include custom-property('spacing-09', map-get($theme, 'spacing-09'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-10',\n $emit-difference\n )\n {\n @include custom-property('spacing-10', map-get($theme, 'spacing-10'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-11',\n $emit-difference\n )\n {\n @include custom-property('spacing-11', map-get($theme, 'spacing-11'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-12',\n $emit-difference\n )\n {\n @include custom-property('spacing-12', map-get($theme, 'spacing-12'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-01',\n map-get($theme, 'fluid-spacing-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-02',\n map-get($theme, 'fluid-spacing-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-03',\n map-get($theme, 'fluid-spacing-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-04',\n map-get($theme, 'fluid-spacing-04')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)\n {\n @include custom-property('layout-01', map-get($theme, 'layout-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)\n {\n @include custom-property('layout-02', map-get($theme, 'layout-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)\n {\n @include custom-property('layout-03', map-get($theme, 'layout-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)\n {\n @include custom-property('layout-04', map-get($theme, 'layout-04'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)\n {\n @include custom-property('layout-05', map-get($theme, 'layout-05'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)\n {\n @include custom-property('layout-06', map-get($theme, 'layout-06'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)\n {\n @include custom-property('layout-07', map-get($theme, 'layout-07'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-01',\n $emit-difference\n )\n {\n @include custom-property('container-01', map-get($theme, 'container-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-02',\n $emit-difference\n )\n {\n @include custom-property('container-02', map-get($theme, 'container-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-03',\n $emit-difference\n )\n {\n @include custom-property('container-03', map-get($theme, 'container-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-04',\n $emit-difference\n )\n {\n @include custom-property('container-04', map-get($theme, 'container-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-05',\n $emit-difference\n )\n {\n @include custom-property('container-05', map-get($theme, 'container-05'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'icon-size-01',\n $emit-difference\n )\n {\n @include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'icon-size-02',\n $emit-difference\n )\n {\n @include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));\n }\n }\n\n @content;\n\n // Reset to default theme after apply in content\n @if $carbon--theme != $parent-carbon-theme {\n $carbon--theme: $parent-carbon-theme !global;\n\n @include carbon--theme();\n }\n}\n",'@import "../root.scss";\n\n.locationPickerContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n width: 100vw;\n}\n\n.locationCard {\n display: flex;\n flex-direction: column;\n width: 23rem;\n background-color: $ui-background;\n margin: 0;\n padding: 1.5rem;\n border: 1px solid $ui-03;\n}\n\n.welcomeTitle {\n @extend .productiveHeading03;\n text-transform: capitalize;\n}\n\n.searchBox {\n margin-top: 1rem;\n}\n\n.welcomeMessage {\n @extend .bodyLong01;\n margin-top: 0.5rem;\n color: $color-gray-70;\n}\n\n.searchResults {\n @extend .bodyShort02;\n margin: 1rem 0rem;\n max-height: 100%;\n overflow-y: auto;\n}\n\n.resultsCount {\n @extend .bodyShort01;\n color: $color-gray-70;\n}\n\n.locationResultsContainer {\n display: flex;\n overflow-y: auto;\n margin-top: 0.5rem;\n}\n\n.locationRadioButton {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n @extend .bodyShort01;\n padding: 0.5rem 0rem;\n text-align: left;\n width: 18rem;\n}\n\n.locationNotFound {\n @extend .bodyShort01;\n padding: 1rem 0rem;\n color: $color-gray-70;\n}\n\n.confirmButton button {\n width: 20rem;\n}\n\n.radioButtonSkeleton {\n margin-right: 0 !important;\n margin-bottom: $spacing-05;\n}\n\n.radioButtonSkeleton span {\n width: 100% !important;\n}\n\n.pagination {\n background-color: $ui-01;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: $spacing-05;\n border: 2px solid $ui-03;\n}\n\n.pagination > button:first-child,\npagination > button:first-child:hover {\n border-right: 2px solid $ui-03;\n}\n\n.pagination > button,\n.pagination > button:hover {\n border-left: 2px solid $ui-03;\n}\n\n.loadingIcon {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: $spacing-05;\n}\n'],sourceRoot:""}]),r.locals={productiveHeading01:"-esm-login__location-picker__productiveHeading01___5QiCf",productiveHeading02:"-esm-login__location-picker__productiveHeading02___WaQHp",productiveHeading03:"-esm-login__location-picker__productiveHeading03___6nV-j",welcomeTitle:"-esm-login__location-picker__welcomeTitle___iI+4Z",productiveHeading04:"-esm-login__location-picker__productiveHeading04___Oqqcq",productiveHeading05:"-esm-login__location-picker__productiveHeading05___DiOHe",productiveHeading06:"-esm-login__location-picker__productiveHeading06___yuK1n",bodyShort01:"-esm-login__location-picker__bodyShort01___Yu8ZO",locationNotFound:"-esm-login__location-picker__locationNotFound___-t5pO",locationRadioButton:"-esm-login__location-picker__locationRadioButton___Gdh0u",resultsCount:"-esm-login__location-picker__resultsCount___KQ5mh",bodyShort02:"-esm-login__location-picker__bodyShort02___Qiqsi",searchResults:"-esm-login__location-picker__searchResults___CAZcg",bodyLong01:"-esm-login__location-picker__bodyLong01___jzOK6",welcomeMessage:"-esm-login__location-picker__welcomeMessage___Wfdzz",bodyLong02:"-esm-login__location-picker__bodyLong02___OT5+p",label01:"-esm-login__location-picker__label01___itiyC",caption01:"-esm-login__location-picker__caption01___VD9WY",helperText01:"-esm-login__location-picker__helperText01___f9hQ3",text01:"-esm-login__location-picker__text01___EkkDZ",text02:"-esm-login__location-picker__text02___39Oi1",locationPickerContainer:"-esm-login__location-picker__locationPickerContainer___t4nEl",locationCard:"-esm-login__location-picker__locationCard___p8DlF",searchBox:"-esm-login__location-picker__searchBox___5ywPq",locationResultsContainer:"-esm-login__location-picker__locationResultsContainer___IvnTr",confirmButton:"-esm-login__location-picker__confirmButton___mHNSY",radioButtonSkeleton:"-esm-login__location-picker__radioButtonSkeleton___mCTbu",pagination:"-esm-login__location-picker__pagination___N8tXt",loadingIcon:"-esm-login__location-picker__loadingIcon___Tgfyj"};const p=r}}]);
1
+ "use strict";(self.webpackChunk_openmrs_esm_login_app=self.webpackChunk_openmrs_esm_login_app||[]).push([[643],{2041:(e,n,t)=>{t.d(n,{h:()=>p});var i=t(6983),o=t(7657),a=t(3415);const r=`${o.fhirBaseUrl}/Location?_summary=data`;function p(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";const p=(i,o)=>{if(o&&!o?.data?.link?.some((e=>"next"===e.relation)))return null;let a=r;return n&&(a+=`&_count=${n}`),i&&(a+="&_getpagesoffset="+i*n),e&&(a+="&_tag=login location"),"string"==typeof t&&""!=t&&(a+=`&name=${t}`),a},{data:l,isValidating:c,size:s,setSize:m,error:g}=(0,a.ZP)(p,o.openmrsFetch);g&&(0,o.showNotification)({title:g.name,description:g.message,kind:"error"}),(0,i.useEffect)((()=>{m(1)}),[t,m]);const h=(0,i.useMemo)((()=>({locationData:l?[].concat(...l?.map((e=>e?.data?.entry??[]))):null,isLoading:!l&&!g,totalResults:l?.[0]?.data?.total??null,hasMore:!!l?.length&&l?.[l.length-1]?.data?.link.some((e=>"next"===e.relation)),loadingNewData:c,setPage:m})),[l,c,m]);return h}},7643:(e,n,t)=>{t.r(n),t.d(n,{default:()=>C});var i=t(6983),o=t.n(i),a=t(1898),r=t(2680),p=t(9784),l=t(7657),c=t(487),s=t.n(c),m=t(631),g=t.n(m),h=t(2052),u=t.n(h),d=t(4010),$=t.n(d),f=t(1469),b=t.n(f),y=t(9329),v=t.n(y),_=t(3088),x={};x.styleTagTransform=v(),x.setAttributes=$(),x.insert=u().bind(null,"head"),x.domAPI=g(),x.insertStyleElement=b(),s()(_.Z,x);const A=_.Z&&_.Z.locals?_.Z.locals:void 0;var k=t(2041);const C=e=>{let{currentUser:n,loginLocations:t,onChangeLocation:c,hideWelcomeMessage:s,currentLocationUuid:m,isLoginEnabled:g}=e;const h=(0,l.useConfig)(),{chooseLocation:u}=h,{t:d}=(0,r.useTranslation)(),[$,f]=(0,i.useState)(u.numberToShow),[b,y]=(0,i.useState)((()=>{const e=window.localStorage.getItem(`userDefaultLoginLocationKey${n}`),i=t?.some((n=>n.resource.id===e));return i?e:""})()??""),[v,_]=(0,i.useState)(""),{locationData:x,isLoading:C,hasMore:B,totalResults:w,loadingNewData:z,setPage:L}=(0,k.h)(u.useLoginLocationTag,u.locationsPerRequest,v),[q,E]=(0,i.useState)(!1),D=(0,i.useRef)();(0,i.useEffect)((()=>{q&&(c(b),E(!1))}),[q,b,c]),(0,i.useEffect)((()=>{b&&window.localStorage.setItem(`userDefaultLoginLocationKey${n}`,b)}),[b,n]),(0,i.useEffect)((()=>{m&&s&&y(m)}),[m,s]),(0,i.useEffect)((()=>{q&&D.current&&(D.current.value="",_(null))}),[q]),(0,i.useEffect)((()=>{!C&&w&&u.numberToShow&&f(Math.min(u.numberToShow,w))}),[C,w,u.numberToShow]);const M=(0,a.Z)((e=>{y(""),_(e),L(1)}),300),S=(0,i.useRef)(null),T=(0,i.useCallback)((e=>{z||(S.current&&S.current.disconnect(),S.current=new IntersectionObserver((e=>{e[0].isIntersecting&&B&&L((e=>e+1))}),{threshold:1}),e&&S.current.observe(e))}),[z,B,L]);return o().createElement("div",{className:A.locationPickerContainer},o().createElement("form",{onSubmit:e=>{e.preventDefault(),E(!0)}},o().createElement("div",{className:A.locationCard},o().createElement("div",null,o().createElement("p",{className:A.welcomeTitle},d("welcome","Welcome")," ",n),o().createElement("p",{className:A.welcomeMessage},d("selectYourLocation","Select your location from the list below. Use the search bar to search for your location."))),o().createElement(p.Search,{autoFocus:!0,className:A.searchBox,labelText:d("searchForLocation","Search for a location"),id:"search-1",placeholder:d("searchForLocation","Search for a location"),onChange:e=>M(e.target.value),name:"searchForLocation"}),o().createElement("div",{className:A.searchResults,style:{height:2.875*u.numberToShow+"rem"}},C?o().createElement("div",null,o().createElement(p.RadioButtonSkeleton,{className:A.radioButtonSkeleton})):o().createElement(o().Fragment,null,o().createElement("p",{className:A.resultsCount},v?`${w??0} ${1===w?d("match","match"):d("matches","matches")} ${d("found","found")}`:`${d("showing","Showing")} ${$} ${d("of","of")} ${w} ${d("locations","locations")}`),o().createElement("div",{className:A.locationResultsContainer},x?.length>0&&o().createElement(p.RadioButtonGroup,{valueSelected:b,orientation:"vertical",name:b,onChange:e=>{y(e.toString())}},x.map((e=>o().createElement(p.RadioButton,{className:A.locationRadioButton,key:e.resource.id,id:e.resource.name,labelText:e.resource.name,value:e.resource.id})))),0===x?.length&&o().createElement("p",{className:A.locationNotFound},d("locationNotFound","Sorry, no matching location was found"))),B&&o().createElement("div",{className:A.loadingIcon,ref:T},o().createElement(p.Loading,{small:!0,withOverlay:!1,description:d("loading","Loading")})))),o().createElement("div",{className:A.confirmButton},o().createElement(p.Button,{kind:"primary",type:"submit",disabled:!b||!g},d("confirm","Confirm"))))))}},3088:(e,n,t)=>{t.d(n,{Z:()=>p});var i=t(9233),o=t.n(i),a=t(361),r=t.n(a)()(o());r.push([e.id,":root{--brand-01: #005d5d;--brand-02: #004144;--brand-03: #007d79}.-esm-login__location-picker__productiveHeading01___5QiCf{font-size:.875rem;font-weight:600;line-height:1.29;letter-spacing:.16px}.-esm-login__location-picker__productiveHeading02___WaQHp{font-size:1rem;font-weight:600;line-height:1.375;letter-spacing:0}.-esm-login__location-picker__productiveHeading03___6nV-j,.-esm-login__location-picker__welcomeTitle___iI\\+4Z{font-size:1.25rem;font-weight:400;line-height:1.4;letter-spacing:0}.-esm-login__location-picker__productiveHeading04___Oqqcq{font-size:1.75rem;font-weight:400;line-height:1.29;letter-spacing:0}.-esm-login__location-picker__productiveHeading05___DiOHe{font-size:2rem;font-weight:400;line-height:1.25;letter-spacing:0}.-esm-login__location-picker__productiveHeading06___yuK1n{font-size:2rem;font-weight:300;line-height:1.199;letter-spacing:0}.-esm-login__location-picker__bodyShort01___Yu8ZO,.-esm-login__location-picker__locationNotFound___-t5pO,.-esm-login__location-picker__locationRadioButton___Gdh0u,.-esm-login__location-picker__resultsCount___KQ5mh{font-size:.875rem;font-weight:400;line-height:1.29;letter-spacing:.16px}.-esm-login__location-picker__bodyShort02___Qiqsi,.-esm-login__location-picker__searchResults___CAZcg{font-size:1rem;font-weight:400;line-height:1.375;letter-spacing:0}.-esm-login__location-picker__bodyLong01___jzOK6,.-esm-login__location-picker__welcomeMessage___Wfdzz{font-size:.875rem;font-weight:400;line-height:1.43;letter-spacing:.16px}.-esm-login__location-picker__bodyLong02___OT5\\+p{font-size:1rem;font-weight:400;line-height:1.5;letter-spacing:0}.-esm-login__location-picker__label01___itiyC{font-size:.75rem;font-weight:400;line-height:1.34;letter-spacing:.32px}.-esm-login__location-picker__caption01___VD9WY{font-size:.75rem;font-weight:400;line-height:1.34;letter-spacing:.32px}.-esm-login__location-picker__helperText01___f9hQ3{font-size:.75rem;line-height:1.34;letter-spacing:.32px}.-esm-login__location-picker__text01___EkkDZ{color:#161616}.-esm-login__location-picker__text02___39Oi1{color:#525252}.-esm-login__location-picker__locationPickerContainer___t4nEl{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw}.-esm-login__location-picker__locationCard___p8DlF{display:flex;flex-direction:column;width:23rem;background-color:#fff;margin:0;padding:1.5rem;border:1px solid #e0e0e0}.-esm-login__location-picker__welcomeTitle___iI\\+4Z{text-transform:capitalize}.-esm-login__location-picker__searchBox___5ywPq{margin-top:1rem}.-esm-login__location-picker__welcomeMessage___Wfdzz{margin-top:.5rem;color:#525252}.-esm-login__location-picker__searchResults___CAZcg{margin:1rem 0rem;max-height:100%;overflow-y:auto}.-esm-login__location-picker__resultsCount___KQ5mh{color:#525252}.-esm-login__location-picker__locationResultsContainer___IvnTr{display:flex;overflow-y:auto;margin-top:.5rem}.-esm-login__location-picker__locationRadioButton___Gdh0u{display:flex;justify-content:flex-start;align-items:flex-start;padding:.5rem 0rem;text-align:left;width:18rem}.-esm-login__location-picker__locationNotFound___-t5pO{padding:1rem 0rem;color:#525252}.-esm-login__location-picker__confirmButton___mHNSY button{width:20rem}.-esm-login__location-picker__radioButtonSkeleton___mCTbu{margin-right:0 !important;margin-bottom:1rem}.-esm-login__location-picker__radioButtonSkeleton___mCTbu span{width:100% !important}.-esm-login__location-picker__pagination___N8tXt{background-color:#f4f4f4;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;border:2px solid #e0e0e0}.-esm-login__location-picker__pagination___N8tXt>button:first-child,pagination>button:first-child:hover{border-right:2px solid #e0e0e0}.-esm-login__location-picker__pagination___N8tXt>button,.-esm-login__location-picker__pagination___N8tXt>button:hover{border-left:2px solid #e0e0e0}.-esm-login__location-picker__loadingIcon___Tgfyj{display:flex;justify-content:center;align-items:center;margin-top:1rem}","",{version:3,sources:["webpack://./../../framework/esm-styleguide/src/_vars.scss","webpack://./src/root.scss","webpack://./../../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/_styles.scss","webpack://./../../../node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/_mixins.scss","webpack://./src/location-picker/location-picker.scss"],names:[],mappings:"AAyCA,MACE,mBAAA,CACA,mBAAA,CACA,mBAAA,CCtCF,0DCygBI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD1rB1B,0DCqgBI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CDtrB1B,8GCigBI,iBAqLsB,CArLtB,eAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CDlrB1B,0DC6fI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,gBAqLsB,CD9qB1B,0DCyfI,cAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,gBAqLsB,CD1qB1B,0DCqfI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CDtqB1B,sNCifI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CDlqB1B,sGC6eI,cAqLsB,CArLtB,eAqLsB,CArLtB,iBAqLsB,CArLtB,gBAqLsB,CD9pB1B,sGCyeI,iBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD1pB1B,kDCqeI,cAqLsB,CArLtB,eAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CDtpB1B,8CCieI,gBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CDlpB1B,gDC6dI,gBAqLsB,CArLtB,eAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD9oB1B,mDCydI,gBAqLsB,CArLtB,gBAqLsB,CArLtB,oBAqLsB,CD1oB1B,6CACE,aETU,CFYZ,6CACE,aEZU,CCjDZ,8DACE,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,kBAAA,CACA,YAAA,CACA,WAAA,CAGF,mDACE,YAAA,CACA,qBAAA,CACA,WAAA,CACA,qBD6BgB,CC5BhB,QAAA,CACA,cAAA,CACA,wBAAA,CAGF,oDAEE,yBAAA,CAGF,gDACE,eAAA,CAGF,qDAEE,gBAAA,CACA,aJxBc,CI2BhB,oDAEE,gBAAA,CACA,eAAA,CACA,eAAA,CAGF,mDAEE,aJpCc,CIuChB,+DACE,YAAA,CACA,eAAA,CACA,gBAAA,CAGF,0DACE,YAAA,CACA,0BAAA,CACA,sBAAA,CAEA,kBAAA,CACA,eAAA,CACA,WAAA,CAGF,uDAEE,iBAAA,CACA,aJ1Dc,CI6DhB,2DACE,WAAA,CAGF,0DACE,yBAAA,CACA,kBDuEa,CCpEf,+DACE,qBAAA,CAGF,iDACE,wBDvCQ,CCwCR,YAAA,CACA,6BAAA,CACA,kBAAA,CACA,kBD2Da,CC1Db,wBAAA,CAGF,wGAEE,8BAAA,CAGF,sHAEE,6BAAA,CAGF,kDACE,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,eDyCa",sourcesContent:["$ui-01: #f4f4f4;\n$ui-02: #ffffff;\n$ui-03: #e0e0e0;\n$ui-04: #8d8d8d;\n$ui-05: #161616;\n$text-02: #525252;\n$text-03: #a8a8a8;\n$ui-background: #ffffff;\n$color-gray-30: #c6c6c6;\n$color-gray-70: #525252;\n$color-gray-100: #161616;\n$color-blue-60-2: #0f62fe;\n$color-blue-10: #edf5ff;\n$color-yellow-50: #feecae;\n$carbon--red-50: #fa4d56;\n$inverse-link: #78a9ff;\n$support-02: #24a148;\n$inverse-support-03: #f1c21b;\n$warning-background: #fff8e1;\n$openmrs-background-grey: #f4f4f4;\n$danger: #da1e28;\n$interactive-01: #0f62fe;\n$field-01: #f4f4f4;\n$grey-2: #e0e0e0;\n$labeldropdown: #c6c6c6;\n\n@mixin brand-01($property) {\n #{$property}: #005d5d;\n #{$property}: var(--brand-01);\n}\n\n@mixin brand-02($property) {\n #{$property}: #004144;\n #{$property}: var(--brand-02);\n}\n\n@mixin brand-03($property) {\n #{$property}: #007d79;\n #{$property}: var(--brand-03);\n}\n\n:root {\n --brand-01: #005d5d;\n --brand-02: #004144;\n --brand-03: #007d79;\n}\n\n$breakpoint-phone-min: 0px;\n$breakpoint-phone-max: 600px;\n$breakpoint-tablet-min: 601px;\n$breakpoint-tablet-max: 1200px;\n$breakpoint-desktop-min: 1201px;\n$breakpoint-desktop-max: 99999999px;\n\n/* These color variables will be removed in a future release */\n$brand-teal-01: #007d79;\n$brand-01: #005d5d;\n$brand-02: #004144;\n",'@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";\n@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";\n@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/layout";\n@import "~@openmrs/esm-styleguide/src/vars";\n@import "carbon-components/scss/globals/scss/typography.scss";\n\n.productiveHeading01 {\n @include carbon--type-style("productive-heading-01");\n}\n\n.productiveHeading02 {\n @include carbon--type-style("productive-heading-02");\n}\n\n.productiveHeading03 {\n @include carbon--type-style("productive-heading-03");\n}\n\n.productiveHeading04 {\n @include carbon--type-style("productive-heading-04");\n}\n\n.productiveHeading05 {\n @include carbon--type-style("productive-heading-05");\n}\n\n.productiveHeading06 {\n @include carbon--type-style("productive-heading-06");\n}\n\n.bodyShort01 {\n @include carbon--type-style("body-short-01");\n}\n\n.bodyShort02 {\n @include carbon--type-style("body-short-02");\n}\n\n.bodyLong01 {\n @include carbon--type-style("body-long-01");\n}\n\n.bodyLong02 {\n @include carbon--type-style("body-long-02");\n}\n\n.label01 {\n @include carbon--type-style("label-01");\n}\n\n.caption01 {\n @include carbon--type-style("caption-01");\n}\n\n.helperText01 {\n @include carbon--type-style("helper-text-01");\n}\n\n.text01 {\n color: $text-01;\n}\n\n.text02 {\n color: $text-02;\n}\n',"//\n// Copyright IBM Corp. 2018, 2018\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@import '../layout/breakpoint';\n@import 'font-family';\n@import 'scale';\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$caption-01: (\n font-size: carbon--type-scale(1),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$label-01: (\n font-size: carbon--type-scale(1),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$helper-text-01: (\n font-size: carbon--type-scale(1),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-01: (\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.29,\n letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-01: (\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.43,\n letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-short-02: (\n font-size: carbon--type-scale(3),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.375,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$body-long-02: (\n font-size: carbon--type-scale(3),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.5,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-01: (\n font-family: carbon--font-family('mono'),\n font-size: carbon--type-scale(1),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.34,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$code-02: (\n font-family: carbon--font-family('mono'),\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.43,\n letter-spacing: 0.32px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-01: (\n font-size: carbon--type-scale(2),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.29,\n letter-spacing: 0.16px,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-01: $heading-01 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$heading-02: (\n font-size: carbon--type-scale(3),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.375,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-02: $heading-02 !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-03: (\n font-size: carbon--type-scale(5),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.4,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-04: (\n font-size: carbon--type-scale(7),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.29,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-05: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.25,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-06: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('light'),\n // Extra digit needed for precision in Chrome\n line-height: 1.199,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$productive-heading-07: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('light'),\n line-height: 1.19,\n letter-spacing: 0,\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-01: map-merge(\n $heading-01,\n (\n line-height: 1.25,\n )\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-02: map-merge(\n $heading-02,\n (\n line-height: 1.5,\n )\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-03: (\n font-size: carbon--type-scale(5),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.4,\n letter-spacing: 0,\n breakpoints: (\n xlg: (\n font-size: carbon--type-scale(5),\n line-height: 1.25,\n ),\n max: (\n font-size: carbon--type-scale(6),\n line-height: 1.334,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-04: (\n font-size: carbon--type-scale(7),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.29,\n letter-spacing: 0,\n breakpoints: (\n xlg: (\n font-size: carbon--type-scale(7),\n line-height: 1.25,\n ),\n max: (\n font-size: carbon--type-scale(8),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-05: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.25,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(9),\n font-weight: carbon--font-weight('light'),\n line-height: 1.22,\n ),\n lg: (\n font-size: carbon--type-scale(10),\n line-height: 1.19,\n ),\n xlg: (\n font-size: carbon--type-scale(11),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(13),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-heading-06: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.25,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(9),\n line-height: 1.22,\n ),\n lg: (\n font-size: carbon--type-scale(10),\n line-height: 1.19,\n ),\n xlg: (\n font-size: carbon--type-scale(11),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(13),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$expressive-paragraph-01: (\n font-size: carbon--type-scale(6),\n font-weight: carbon--font-weight('light'),\n line-height: 1.334,\n letter-spacing: 0,\n breakpoints: (\n lg: (\n font-size: carbon--type-scale(7),\n line-height: 1.29,\n ),\n max: (\n font-size: carbon--type-scale(8),\n line-height: 1.25,\n ),\n ),\n);\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-01: (\n font-size: carbon--type-scale(5),\n font-weight: carbon--font-weight('regular'),\n line-height: 1.3,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(5),\n ),\n lg: (\n font-size: carbon--type-scale(6),\n line-height: 1.334,\n ),\n xlg: (\n font-size: carbon--type-scale(7),\n line-height: 1.29,\n ),\n max: (\n font-size: carbon--type-scale(8),\n line-height: 1.25,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$quotation-02: (\n font-size: carbon--type-scale(8),\n font-weight: carbon--font-weight('light'),\n line-height: 1.25,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(9),\n line-height: 1.22,\n ),\n lg: (\n font-size: carbon--type-scale(10),\n line-height: 1.19,\n ),\n xlg: (\n font-size: carbon--type-scale(11),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(13),\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-01: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('light'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(10),\n ),\n lg: (\n font-size: carbon--type-scale(12),\n ),\n xlg: (\n font-size: carbon--type-scale(13),\n line-height: 1.17,\n ),\n max: (\n font-size: carbon--type-scale(15),\n line-height: 1.13,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-02: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(10),\n ),\n lg: (\n font-size: carbon--type-scale(12),\n ),\n xlg: (\n font-size: carbon--type-scale(13),\n line-height: 1.16,\n ),\n max: (\n font-size: carbon--type-scale(15),\n line-height: 1.13,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-03: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('light'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(14),\n line-height: 1.15,\n ),\n lg: (\n font-size: carbon--type-scale(17),\n line-height: 1.11,\n letter-spacing: -0.64px,\n ),\n xlg: (\n font-size: carbon--type-scale(20),\n line-height: 1.07,\n letter-spacing: -0.64px,\n ),\n max: (\n font-size: carbon--type-scale(23),\n line-height: 1.05,\n letter-spacing: -0.96px,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$display-04: (\n font-size: carbon--type-scale(10),\n font-weight: carbon--font-weight('semibold'),\n line-height: 1.19,\n letter-spacing: 0,\n breakpoints: (\n md: (\n font-size: carbon--type-scale(14),\n line-height: 1.15,\n ),\n lg: (\n font-size: carbon--type-scale(17),\n line-height: 1.11,\n letter-spacing: -0.64px,\n ),\n xlg: (\n font-size: carbon--type-scale(20),\n line-height: 1.07,\n letter-spacing: -0.64px,\n ),\n max: (\n font-size: carbon--type-scale(23),\n line-height: 1.05,\n letter-spacing: -0.96px,\n ),\n ),\n) !default;\n\n/// @type Map\n/// @access public\n/// @group @carbon/type\n$tokens: (\n caption-01: $caption-01,\n label-01: $label-01,\n helper-text-01: $helper-text-01,\n body-short-01: $body-short-01,\n body-short-02: $body-short-02,\n body-long-01: $body-long-01,\n body-long-02: $body-long-02,\n code-01: $code-01,\n code-02: $code-02,\n heading-01: $heading-01,\n heading-02: $heading-02,\n productive-heading-01: $productive-heading-01,\n productive-heading-02: $productive-heading-02,\n productive-heading-03: $productive-heading-03,\n productive-heading-04: $productive-heading-04,\n productive-heading-05: $productive-heading-05,\n productive-heading-06: $productive-heading-06,\n productive-heading-07: $productive-heading-07,\n expressive-paragraph-01: $expressive-paragraph-01,\n expressive-heading-01: $expressive-heading-01,\n expressive-heading-02: $expressive-heading-02,\n expressive-heading-03: $expressive-heading-03,\n expressive-heading-04: $expressive-heading-04,\n expressive-heading-05: $expressive-heading-05,\n expressive-heading-06: $expressive-heading-06,\n quotation-01: $quotation-01,\n quotation-02: $quotation-02,\n display-01: $display-01,\n display-02: $display-02,\n display-03: $display-03,\n display-04: $display-04,\n);\n\n/// @param {Map} $map\n/// @access public\n/// @group @carbon/type\n@mixin properties($map) {\n @each $name, $value in $map {\n #{$name}: $value;\n }\n}\n\n/// @param {Number} $value - Number with units\n/// @return {Number} Without units\n/// @access public\n/// @group @carbon/type\n@function strip-unit($value) {\n @return $value / ($value * 0 + 1);\n}\n\n/// This helper includes fluid type styles for the given token value. Fluid type\n/// means that the `font-size` is computed using `calc()` in order to be\n/// determined by the screen size instead of a breakpoint. As a result, fluid\n/// styles should be used with caution in fixed width contexts.\n///\n/// In addition, we make use of %-based line-heights so that the line-height of\n/// each type style is computed correctly due to the dynamic nature of the\n/// `font-size`.\n///\n/// Most of the logic for this work comes from CSS Tricks:\n/// https://css-tricks.com/snippets/css/fluid-typography/\n///\n/// @param {Map} $type-styles - The value of a given type token\n/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type($type-styles, $breakpoints: $carbon--grid-breakpoints) {\n // Include the initial styles for the given token by default without any\n // media query guard. This includes `font-size` as a fallback in the case\n // that a browser does not support `calc()`\n @include properties(map-remove($type-styles, breakpoints));\n // We also need to include the `sm` styles by default since they don't\n // appear in the fluid styles for tokens\n @include fluid-type-size($type-styles, sm, $breakpoints);\n\n // Finally, we need to go through all the breakpoints defined in the type\n // token and apply the properties and fluid type size for that given\n // breakpoint\n @each $name, $values in map-get($type-styles, breakpoints) {\n @include carbon--breakpoint($name) {\n @include properties($values);\n @include fluid-type-size($type-styles, $name, $breakpoints);\n }\n }\n}\n\n/// Computes the fluid `font-size` for a given type style and breakpoint\n/// @param {Map} $type-styles - The styles for a given token\n/// @param {String} $name - The name of the breakpoint to which we apply the fluid\n/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system\n/// @access public\n/// @group @carbon/type\n@mixin fluid-type-size(\n $type-styles,\n $name,\n $breakpoints: $carbon--grid-breakpoints\n) {\n // Get the information about the breakpoint we're currently working in. Useful\n // for getting initial width information\n $breakpoint: map-get($breakpoints, $name);\n\n // Our fluid styles are captured under the 'breakpoints' property in our type\n // styles map. These define what values to treat as `max-` variables below\n $fluid-sizes: map-get($type-styles, breakpoints);\n $fluid-breakpoint: ();\n // Special case for `sm` because the styles for small are on the type style\n // directly\n @if $name == sm {\n $fluid-breakpoint: map-remove($type-styles, breakpoints);\n } @else {\n $fluid-breakpoint: map-get($fluid-sizes, $name);\n }\n\n // Initialize our font-sizes to the default size for the type style\n $max-font-size: map-get($type-styles, font-size);\n $min-font-size: map-get($type-styles, font-size);\n @if map-has-key($fluid-breakpoint, font-size) {\n $min-font-size: map-get($fluid-breakpoint, font-size);\n }\n\n // Initialize our min and max width to the width of the current breakpoint\n $max-vw: map-get($breakpoint, width);\n $min-vw: map-get($breakpoint, width);\n\n // We can use `breakpoint-next` to see if there is another breakpoint we can\n // use to update `max-font-size` and `max-vw` with larger values\n $next-breakpoint-available: carbon--breakpoint-next($name, $breakpoints);\n $next-fluid-breakpoint-name: null;\n\n // We need to figure out what the next available fluid breakpoint is for our\n // given $type-styles. In this loop we try and iterate through breakpoints\n // until we either manually set $next-breakpoint-available to null or\n // `breakpoint-next` returns null.\n @while $next-breakpoint-available {\n @if map-has-key($fluid-sizes, $next-breakpoint-available) {\n $next-fluid-breakpoint-name: $next-breakpoint-available;\n $next-breakpoint-available: null;\n } @else {\n $next-breakpoint-available: carbon--breakpoint-next(\n $next-breakpoint-available,\n $breakpoints\n );\n }\n }\n\n // If we have found the next available fluid breakpoint name, then we know\n // that we have values that we can use to set max-font-size and max-vw as both\n // values derive from the next breakpoint\n @if $next-fluid-breakpoint-name {\n $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name);\n $max-font-size: map-get(\n map-get($fluid-sizes, $next-fluid-breakpoint-name),\n font-size\n );\n $max-vw: map-get($next-fluid-breakpoint, width);\n\n // prettier-ignore\n font-size: calc(#{$min-font-size} +\n #{strip-unit($max-font-size - $min-font-size)} *\n ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})\n );\n } @else {\n // Otherwise, just default to setting the font size found from the type\n // style or the given fluid breakpoint in the type style\n font-size: $min-font-size;\n }\n}\n\n// TODO move following variable and `custom-property` mixin into shared file for\n// both `@carbon/type` and `@carbon/themes`\n\n/// @access private\n/// @group @carbon/type\n$custom-property-prefix: 'cds' !default;\n\n/// @access private\n/// @group @carbon/type\n@mixin custom-properties($name, $value) {\n @each $property, $value in $value {\n #{$property}: var(\n --#{$custom-property-prefix}-#{$name}-#{$property},\n #{$value}\n );\n }\n}\n\n/// Helper mixin to include the styles for a given token in any selector in your\n/// project. Also includes an optional fluid option that will enable fluid\n/// styles for the token if they are defined. Fluid styles will cause the\n/// token's font-size to be computed based on the viewport size. As a result, use\n/// with caution in fixed contexts.\n/// @param {String} $name - The name of the token to get the styles for\n/// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the\n/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use\n/// @access public\n/// @group @carbon/type\n@mixin carbon--type-style(\n $name,\n $fluid: false,\n $breakpoints: $carbon--grid-breakpoints\n) {\n @if not map-has-key($tokens, $name) {\n @error 'Unable to find a token with the name: `#{$name}`';\n }\n\n $token: map-get($tokens, $name);\n\n // If $fluid is set to true and the token has breakpoints defined for fluid\n // styles, delegate to the fluid-type helper for the given token\n @if $fluid == true and map-has-key($token, 'breakpoints') {\n @include fluid-type($token, $breakpoints);\n } @else {\n @if global-variable-exists('feature-flags') and\n map-get($feature-flags, 'enable-css-custom-properties')\n {\n @include custom-properties($name, $token);\n } @else {\n // Otherwise, we just include all the property declarations directly on the\n // selector\n @include properties(map-remove($token, 'breakpoints'));\n }\n }\n}\n","// Code generated by @carbon/themes. DO NOT EDIT.\n//\n// Copyright IBM Corp. 2018, 2019\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@import './themes';\n\n/// Define theme variables from a map of tokens\n/// @access public\n/// @param {Map} $theme [$carbon--theme] - Map of theme tokens\n/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens\n/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables.\n///\n/// @example scss\n/// // Default usage\n/// @include carbon--theme();\n///\n/// // Alternate styling (not white theme)\n/// @include carbon--theme($carbon--theme--g90) {\n/// // declarations...\n/// }\n///\n/// // Inline styling\n/// @include carbon--theme($carbon--theme--g90) {\n/// .my-dark-theme {\n/// // declarations...\n/// }\n/// }\n///\n/// @group @carbon/themes\n@mixin carbon--theme(\n $theme: $carbon--theme,\n $emit-custom-properties: false,\n $emit-difference: false\n) {\n $parent-carbon-theme: $carbon--theme;\n $carbon--theme: $theme !global;\n $interactive-01: map-get($theme, 'interactive-01') !global;\n $interactive-02: map-get($theme, 'interactive-02') !global;\n $interactive-03: map-get($theme, 'interactive-03') !global;\n $interactive-04: map-get($theme, 'interactive-04') !global;\n $ui-background: map-get($theme, 'ui-background') !global;\n $ui-01: map-get($theme, 'ui-01') !global;\n $ui-02: map-get($theme, 'ui-02') !global;\n $ui-03: map-get($theme, 'ui-03') !global;\n $ui-04: map-get($theme, 'ui-04') !global;\n $ui-05: map-get($theme, 'ui-05') !global;\n $text-01: map-get($theme, 'text-01') !global;\n $text-02: map-get($theme, 'text-02') !global;\n $text-03: map-get($theme, 'text-03') !global;\n $text-04: map-get($theme, 'text-04') !global;\n $text-05: map-get($theme, 'text-05') !global;\n $text-error: map-get($theme, 'text-error') !global;\n $icon-01: map-get($theme, 'icon-01') !global;\n $icon-02: map-get($theme, 'icon-02') !global;\n $icon-03: map-get($theme, 'icon-03') !global;\n $link-01: map-get($theme, 'link-01') !global;\n $link-02: map-get($theme, 'link-02') !global;\n $inverse-link: map-get($theme, 'inverse-link') !global;\n $field-01: map-get($theme, 'field-01') !global;\n $field-02: map-get($theme, 'field-02') !global;\n $inverse-01: map-get($theme, 'inverse-01') !global;\n $inverse-02: map-get($theme, 'inverse-02') !global;\n $support-01: map-get($theme, 'support-01') !global;\n $support-02: map-get($theme, 'support-02') !global;\n $support-03: map-get($theme, 'support-03') !global;\n $support-04: map-get($theme, 'support-04') !global;\n $inverse-support-01: map-get($theme, 'inverse-support-01') !global;\n $inverse-support-02: map-get($theme, 'inverse-support-02') !global;\n $inverse-support-03: map-get($theme, 'inverse-support-03') !global;\n $inverse-support-04: map-get($theme, 'inverse-support-04') !global;\n $overlay-01: map-get($theme, 'overlay-01') !global;\n $danger-01: map-get($theme, 'danger-01') !global;\n $danger-02: map-get($theme, 'danger-02') !global;\n $focus: map-get($theme, 'focus') !global;\n $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;\n $hover-primary: map-get($theme, 'hover-primary') !global;\n $active-primary: map-get($theme, 'active-primary') !global;\n $hover-primary-text: map-get($theme, 'hover-primary-text') !global;\n $hover-secondary: map-get($theme, 'hover-secondary') !global;\n $active-secondary: map-get($theme, 'active-secondary') !global;\n $hover-tertiary: map-get($theme, 'hover-tertiary') !global;\n $active-tertiary: map-get($theme, 'active-tertiary') !global;\n $hover-ui: map-get($theme, 'hover-ui') !global;\n $hover-light-ui: map-get($theme, 'hover-light-ui') !global;\n $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;\n $active-ui: map-get($theme, 'active-ui') !global;\n $active-light-ui: map-get($theme, 'active-light-ui') !global;\n $selected-ui: map-get($theme, 'selected-ui') !global;\n $selected-light-ui: map-get($theme, 'selected-light-ui') !global;\n $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;\n $hover-danger: map-get($theme, 'hover-danger') !global;\n $active-danger: map-get($theme, 'active-danger') !global;\n $hover-row: map-get($theme, 'hover-row') !global;\n $visited-link: map-get($theme, 'visited-link') !global;\n $disabled-01: map-get($theme, 'disabled-01') !global;\n $disabled-02: map-get($theme, 'disabled-02') !global;\n $disabled-03: map-get($theme, 'disabled-03') !global;\n $highlight: map-get($theme, 'highlight') !global;\n $decorative-01: map-get($theme, 'decorative-01') !global;\n $button-separator: map-get($theme, 'button-separator') !global;\n $skeleton-01: map-get($theme, 'skeleton-01') !global;\n $skeleton-02: map-get($theme, 'skeleton-02') !global;\n $brand-01: map-get($theme, 'brand-01') !global;\n $brand-02: map-get($theme, 'brand-02') !global;\n $brand-03: map-get($theme, 'brand-03') !global;\n $active-01: map-get($theme, 'active-01') !global;\n $hover-field: map-get($theme, 'hover-field') !global;\n $danger: map-get($theme, 'danger') !global;\n $caption-01: map-get($theme, 'caption-01') !global;\n $label-01: map-get($theme, 'label-01') !global;\n $helper-text-01: map-get($theme, 'helper-text-01') !global;\n $body-short-01: map-get($theme, 'body-short-01') !global;\n $body-long-01: map-get($theme, 'body-long-01') !global;\n $body-short-02: map-get($theme, 'body-short-02') !global;\n $body-long-02: map-get($theme, 'body-long-02') !global;\n $code-01: map-get($theme, 'code-01') !global;\n $code-02: map-get($theme, 'code-02') !global;\n $heading-01: map-get($theme, 'heading-01') !global;\n $productive-heading-01: map-get($theme, 'productive-heading-01') !global;\n $heading-02: map-get($theme, 'heading-02') !global;\n $productive-heading-02: map-get($theme, 'productive-heading-02') !global;\n $productive-heading-03: map-get($theme, 'productive-heading-03') !global;\n $productive-heading-04: map-get($theme, 'productive-heading-04') !global;\n $productive-heading-05: map-get($theme, 'productive-heading-05') !global;\n $productive-heading-06: map-get($theme, 'productive-heading-06') !global;\n $productive-heading-07: map-get($theme, 'productive-heading-07') !global;\n $expressive-heading-01: map-get($theme, 'expressive-heading-01') !global;\n $expressive-heading-02: map-get($theme, 'expressive-heading-02') !global;\n $expressive-heading-03: map-get($theme, 'expressive-heading-03') !global;\n $expressive-heading-04: map-get($theme, 'expressive-heading-04') !global;\n $expressive-heading-05: map-get($theme, 'expressive-heading-05') !global;\n $expressive-heading-06: map-get($theme, 'expressive-heading-06') !global;\n $expressive-paragraph-01: map-get($theme, 'expressive-paragraph-01') !global;\n $quotation-01: map-get($theme, 'quotation-01') !global;\n $quotation-02: map-get($theme, 'quotation-02') !global;\n $display-01: map-get($theme, 'display-01') !global;\n $display-02: map-get($theme, 'display-02') !global;\n $display-03: map-get($theme, 'display-03') !global;\n $display-04: map-get($theme, 'display-04') !global;\n $spacing-01: map-get($theme, 'spacing-01') !global;\n $spacing-02: map-get($theme, 'spacing-02') !global;\n $spacing-03: map-get($theme, 'spacing-03') !global;\n $spacing-04: map-get($theme, 'spacing-04') !global;\n $spacing-05: map-get($theme, 'spacing-05') !global;\n $spacing-06: map-get($theme, 'spacing-06') !global;\n $spacing-07: map-get($theme, 'spacing-07') !global;\n $spacing-08: map-get($theme, 'spacing-08') !global;\n $spacing-09: map-get($theme, 'spacing-09') !global;\n $spacing-10: map-get($theme, 'spacing-10') !global;\n $spacing-11: map-get($theme, 'spacing-11') !global;\n $spacing-12: map-get($theme, 'spacing-12') !global;\n $fluid-spacing-01: map-get($theme, 'fluid-spacing-01') !global;\n $fluid-spacing-02: map-get($theme, 'fluid-spacing-02') !global;\n $fluid-spacing-03: map-get($theme, 'fluid-spacing-03') !global;\n $fluid-spacing-04: map-get($theme, 'fluid-spacing-04') !global;\n $layout-01: map-get($theme, 'layout-01') !global;\n $layout-02: map-get($theme, 'layout-02') !global;\n $layout-03: map-get($theme, 'layout-03') !global;\n $layout-04: map-get($theme, 'layout-04') !global;\n $layout-05: map-get($theme, 'layout-05') !global;\n $layout-06: map-get($theme, 'layout-06') !global;\n $layout-07: map-get($theme, 'layout-07') !global;\n $container-01: map-get($theme, 'container-01') !global;\n $container-02: map-get($theme, 'container-02') !global;\n $container-03: map-get($theme, 'container-03') !global;\n $container-04: map-get($theme, 'container-04') !global;\n $container-05: map-get($theme, 'container-05') !global;\n $icon-size-01: map-get($theme, 'icon-size-01') !global;\n $icon-size-02: map-get($theme, 'icon-size-02') !global;\n\n @if global-variable-exists('feature-flags') and\n map-get($feature-flags, 'enable-css-custom-properties')\n {\n $interactive-01: var(\n --#{$custom-property-prefix}-interactive-01,\n map-get($theme, 'interactive-01')\n ) !global;\n $interactive-02: var(\n --#{$custom-property-prefix}-interactive-02,\n map-get($theme, 'interactive-02')\n ) !global;\n $interactive-03: var(\n --#{$custom-property-prefix}-interactive-03,\n map-get($theme, 'interactive-03')\n ) !global;\n $interactive-04: var(\n --#{$custom-property-prefix}-interactive-04,\n map-get($theme, 'interactive-04')\n ) !global;\n $ui-background: var(\n --#{$custom-property-prefix}-ui-background,\n map-get($theme, 'ui-background')\n ) !global;\n $ui-01: var(\n --#{$custom-property-prefix}-ui-01,\n map-get($theme, 'ui-01')\n ) !global;\n $ui-02: var(\n --#{$custom-property-prefix}-ui-02,\n map-get($theme, 'ui-02')\n ) !global;\n $ui-03: var(\n --#{$custom-property-prefix}-ui-03,\n map-get($theme, 'ui-03')\n ) !global;\n $ui-04: var(\n --#{$custom-property-prefix}-ui-04,\n map-get($theme, 'ui-04')\n ) !global;\n $ui-05: var(\n --#{$custom-property-prefix}-ui-05,\n map-get($theme, 'ui-05')\n ) !global;\n $text-01: var(\n --#{$custom-property-prefix}-text-01,\n map-get($theme, 'text-01')\n ) !global;\n $text-02: var(\n --#{$custom-property-prefix}-text-02,\n map-get($theme, 'text-02')\n ) !global;\n $text-03: var(\n --#{$custom-property-prefix}-text-03,\n map-get($theme, 'text-03')\n ) !global;\n $text-04: var(\n --#{$custom-property-prefix}-text-04,\n map-get($theme, 'text-04')\n ) !global;\n $text-05: var(\n --#{$custom-property-prefix}-text-05,\n map-get($theme, 'text-05')\n ) !global;\n $text-error: var(\n --#{$custom-property-prefix}-text-error,\n map-get($theme, 'text-error')\n ) !global;\n $icon-01: var(\n --#{$custom-property-prefix}-icon-01,\n map-get($theme, 'icon-01')\n ) !global;\n $icon-02: var(\n --#{$custom-property-prefix}-icon-02,\n map-get($theme, 'icon-02')\n ) !global;\n $icon-03: var(\n --#{$custom-property-prefix}-icon-03,\n map-get($theme, 'icon-03')\n ) !global;\n $link-01: var(\n --#{$custom-property-prefix}-link-01,\n map-get($theme, 'link-01')\n ) !global;\n $link-02: var(\n --#{$custom-property-prefix}-link-02,\n map-get($theme, 'link-02')\n ) !global;\n $inverse-link: var(\n --#{$custom-property-prefix}-inverse-link,\n map-get($theme, 'inverse-link')\n ) !global;\n $field-01: var(\n --#{$custom-property-prefix}-field-01,\n map-get($theme, 'field-01')\n ) !global;\n $field-02: var(\n --#{$custom-property-prefix}-field-02,\n map-get($theme, 'field-02')\n ) !global;\n $inverse-01: var(\n --#{$custom-property-prefix}-inverse-01,\n map-get($theme, 'inverse-01')\n ) !global;\n $inverse-02: var(\n --#{$custom-property-prefix}-inverse-02,\n map-get($theme, 'inverse-02')\n ) !global;\n $support-01: var(\n --#{$custom-property-prefix}-support-01,\n map-get($theme, 'support-01')\n ) !global;\n $support-02: var(\n --#{$custom-property-prefix}-support-02,\n map-get($theme, 'support-02')\n ) !global;\n $support-03: var(\n --#{$custom-property-prefix}-support-03,\n map-get($theme, 'support-03')\n ) !global;\n $support-04: var(\n --#{$custom-property-prefix}-support-04,\n map-get($theme, 'support-04')\n ) !global;\n $inverse-support-01: var(\n --#{$custom-property-prefix}-inverse-support-01,\n map-get($theme, 'inverse-support-01')\n ) !global;\n $inverse-support-02: var(\n --#{$custom-property-prefix}-inverse-support-02,\n map-get($theme, 'inverse-support-02')\n ) !global;\n $inverse-support-03: var(\n --#{$custom-property-prefix}-inverse-support-03,\n map-get($theme, 'inverse-support-03')\n ) !global;\n $inverse-support-04: var(\n --#{$custom-property-prefix}-inverse-support-04,\n map-get($theme, 'inverse-support-04')\n ) !global;\n $overlay-01: var(\n --#{$custom-property-prefix}-overlay-01,\n map-get($theme, 'overlay-01')\n ) !global;\n $danger-01: var(\n --#{$custom-property-prefix}-danger-01,\n map-get($theme, 'danger-01')\n ) !global;\n $danger-02: var(\n --#{$custom-property-prefix}-danger-02,\n map-get($theme, 'danger-02')\n ) !global;\n $focus: var(\n --#{$custom-property-prefix}-focus,\n map-get($theme, 'focus')\n ) !global;\n $inverse-focus-ui: var(\n --#{$custom-property-prefix}-inverse-focus-ui,\n map-get($theme, 'inverse-focus-ui')\n ) !global;\n $hover-primary: var(\n --#{$custom-property-prefix}-hover-primary,\n map-get($theme, 'hover-primary')\n ) !global;\n $active-primary: var(\n --#{$custom-property-prefix}-active-primary,\n map-get($theme, 'active-primary')\n ) !global;\n $hover-primary-text: var(\n --#{$custom-property-prefix}-hover-primary-text,\n map-get($theme, 'hover-primary-text')\n ) !global;\n $hover-secondary: var(\n --#{$custom-property-prefix}-hover-secondary,\n map-get($theme, 'hover-secondary')\n ) !global;\n $active-secondary: var(\n --#{$custom-property-prefix}-active-secondary,\n map-get($theme, 'active-secondary')\n ) !global;\n $hover-tertiary: var(\n --#{$custom-property-prefix}-hover-tertiary,\n map-get($theme, 'hover-tertiary')\n ) !global;\n $active-tertiary: var(\n --#{$custom-property-prefix}-active-tertiary,\n map-get($theme, 'active-tertiary')\n ) !global;\n $hover-ui: var(\n --#{$custom-property-prefix}-hover-ui,\n map-get($theme, 'hover-ui')\n ) !global;\n $hover-light-ui: var(\n --#{$custom-property-prefix}-hover-light-ui,\n map-get($theme, 'hover-light-ui')\n ) !global;\n $hover-selected-ui: var(\n --#{$custom-property-prefix}-hover-selected-ui,\n map-get($theme, 'hover-selected-ui')\n ) !global;\n $active-ui: var(\n --#{$custom-property-prefix}-active-ui,\n map-get($theme, 'active-ui')\n ) !global;\n $active-light-ui: var(\n --#{$custom-property-prefix}-active-light-ui,\n map-get($theme, 'active-light-ui')\n ) !global;\n $selected-ui: var(\n --#{$custom-property-prefix}-selected-ui,\n map-get($theme, 'selected-ui')\n ) !global;\n $selected-light-ui: var(\n --#{$custom-property-prefix}-selected-light-ui,\n map-get($theme, 'selected-light-ui')\n ) !global;\n $inverse-hover-ui: var(\n --#{$custom-property-prefix}-inverse-hover-ui,\n map-get($theme, 'inverse-hover-ui')\n ) !global;\n $hover-danger: var(\n --#{$custom-property-prefix}-hover-danger,\n map-get($theme, 'hover-danger')\n ) !global;\n $active-danger: var(\n --#{$custom-property-prefix}-active-danger,\n map-get($theme, 'active-danger')\n ) !global;\n $hover-row: var(\n --#{$custom-property-prefix}-hover-row,\n map-get($theme, 'hover-row')\n ) !global;\n $visited-link: var(\n --#{$custom-property-prefix}-visited-link,\n map-get($theme, 'visited-link')\n ) !global;\n $disabled-01: var(\n --#{$custom-property-prefix}-disabled-01,\n map-get($theme, 'disabled-01')\n ) !global;\n $disabled-02: var(\n --#{$custom-property-prefix}-disabled-02,\n map-get($theme, 'disabled-02')\n ) !global;\n $disabled-03: var(\n --#{$custom-property-prefix}-disabled-03,\n map-get($theme, 'disabled-03')\n ) !global;\n $highlight: var(\n --#{$custom-property-prefix}-highlight,\n map-get($theme, 'highlight')\n ) !global;\n $decorative-01: var(\n --#{$custom-property-prefix}-decorative-01,\n map-get($theme, 'decorative-01')\n ) !global;\n $button-separator: var(\n --#{$custom-property-prefix}-button-separator,\n map-get($theme, 'button-separator')\n ) !global;\n $skeleton-01: var(\n --#{$custom-property-prefix}-skeleton-01,\n map-get($theme, 'skeleton-01')\n ) !global;\n $skeleton-02: var(\n --#{$custom-property-prefix}-skeleton-02,\n map-get($theme, 'skeleton-02')\n ) !global;\n $brand-01: var(\n --#{$custom-property-prefix}-brand-01,\n map-get($theme, 'brand-01')\n ) !global;\n $brand-02: var(\n --#{$custom-property-prefix}-brand-02,\n map-get($theme, 'brand-02')\n ) !global;\n $brand-03: var(\n --#{$custom-property-prefix}-brand-03,\n map-get($theme, 'brand-03')\n ) !global;\n $active-01: var(\n --#{$custom-property-prefix}-active-01,\n map-get($theme, 'active-01')\n ) !global;\n $hover-field: var(\n --#{$custom-property-prefix}-hover-field,\n map-get($theme, 'hover-field')\n ) !global;\n $danger: var(\n --#{$custom-property-prefix}-danger,\n map-get($theme, 'danger')\n ) !global;\n $spacing-01: var(\n --#{$custom-property-prefix}-spacing-01,\n map-get($theme, 'spacing-01')\n ) !global;\n $spacing-02: var(\n --#{$custom-property-prefix}-spacing-02,\n map-get($theme, 'spacing-02')\n ) !global;\n $spacing-03: var(\n --#{$custom-property-prefix}-spacing-03,\n map-get($theme, 'spacing-03')\n ) !global;\n $spacing-04: var(\n --#{$custom-property-prefix}-spacing-04,\n map-get($theme, 'spacing-04')\n ) !global;\n $spacing-05: var(\n --#{$custom-property-prefix}-spacing-05,\n map-get($theme, 'spacing-05')\n ) !global;\n $spacing-06: var(\n --#{$custom-property-prefix}-spacing-06,\n map-get($theme, 'spacing-06')\n ) !global;\n $spacing-07: var(\n --#{$custom-property-prefix}-spacing-07,\n map-get($theme, 'spacing-07')\n ) !global;\n $spacing-08: var(\n --#{$custom-property-prefix}-spacing-08,\n map-get($theme, 'spacing-08')\n ) !global;\n $spacing-09: var(\n --#{$custom-property-prefix}-spacing-09,\n map-get($theme, 'spacing-09')\n ) !global;\n $spacing-10: var(\n --#{$custom-property-prefix}-spacing-10,\n map-get($theme, 'spacing-10')\n ) !global;\n $spacing-11: var(\n --#{$custom-property-prefix}-spacing-11,\n map-get($theme, 'spacing-11')\n ) !global;\n $spacing-12: var(\n --#{$custom-property-prefix}-spacing-12,\n map-get($theme, 'spacing-12')\n ) !global;\n $fluid-spacing-01: var(\n --#{$custom-property-prefix}-fluid-spacing-01,\n map-get($theme, 'fluid-spacing-01')\n ) !global;\n $fluid-spacing-02: var(\n --#{$custom-property-prefix}-fluid-spacing-02,\n map-get($theme, 'fluid-spacing-02')\n ) !global;\n $fluid-spacing-03: var(\n --#{$custom-property-prefix}-fluid-spacing-03,\n map-get($theme, 'fluid-spacing-03')\n ) !global;\n $fluid-spacing-04: var(\n --#{$custom-property-prefix}-fluid-spacing-04,\n map-get($theme, 'fluid-spacing-04')\n ) !global;\n $layout-01: var(\n --#{$custom-property-prefix}-layout-01,\n map-get($theme, 'layout-01')\n ) !global;\n $layout-02: var(\n --#{$custom-property-prefix}-layout-02,\n map-get($theme, 'layout-02')\n ) !global;\n $layout-03: var(\n --#{$custom-property-prefix}-layout-03,\n map-get($theme, 'layout-03')\n ) !global;\n $layout-04: var(\n --#{$custom-property-prefix}-layout-04,\n map-get($theme, 'layout-04')\n ) !global;\n $layout-05: var(\n --#{$custom-property-prefix}-layout-05,\n map-get($theme, 'layout-05')\n ) !global;\n $layout-06: var(\n --#{$custom-property-prefix}-layout-06,\n map-get($theme, 'layout-06')\n ) !global;\n $layout-07: var(\n --#{$custom-property-prefix}-layout-07,\n map-get($theme, 'layout-07')\n ) !global;\n $container-01: var(\n --#{$custom-property-prefix}-container-01,\n map-get($theme, 'container-01')\n ) !global;\n $container-02: var(\n --#{$custom-property-prefix}-container-02,\n map-get($theme, 'container-02')\n ) !global;\n $container-03: var(\n --#{$custom-property-prefix}-container-03,\n map-get($theme, 'container-03')\n ) !global;\n $container-04: var(\n --#{$custom-property-prefix}-container-04,\n map-get($theme, 'container-04')\n ) !global;\n $container-05: var(\n --#{$custom-property-prefix}-container-05,\n map-get($theme, 'container-05')\n ) !global;\n $icon-size-01: var(\n --#{$custom-property-prefix}-icon-size-01,\n map-get($theme, 'icon-size-01')\n ) !global;\n $icon-size-02: var(\n --#{$custom-property-prefix}-icon-size-02,\n map-get($theme, 'icon-size-02')\n ) !global;\n }\n @if $emit-custom-properties == true {\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-01',\n map-get($theme, 'interactive-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-02',\n map-get($theme, 'interactive-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-03',\n map-get($theme, 'interactive-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'interactive-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'interactive-04',\n map-get($theme, 'interactive-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'ui-background',\n $emit-difference\n )\n {\n @include custom-property(\n 'ui-background',\n map-get($theme, 'ui-background')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-01', $emit-difference) {\n @include custom-property('ui-01', map-get($theme, 'ui-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-02', $emit-difference) {\n @include custom-property('ui-02', map-get($theme, 'ui-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-03', $emit-difference) {\n @include custom-property('ui-03', map-get($theme, 'ui-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-04', $emit-difference) {\n @include custom-property('ui-04', map-get($theme, 'ui-04'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'ui-05', $emit-difference) {\n @include custom-property('ui-05', map-get($theme, 'ui-05'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-01', $emit-difference) {\n @include custom-property('text-01', map-get($theme, 'text-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-02', $emit-difference) {\n @include custom-property('text-02', map-get($theme, 'text-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-03', $emit-difference) {\n @include custom-property('text-03', map-get($theme, 'text-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-04', $emit-difference) {\n @include custom-property('text-04', map-get($theme, 'text-04'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'text-05', $emit-difference) {\n @include custom-property('text-05', map-get($theme, 'text-05'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'text-error',\n $emit-difference\n )\n {\n @include custom-property('text-error', map-get($theme, 'text-error'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'icon-01', $emit-difference) {\n @include custom-property('icon-01', map-get($theme, 'icon-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'icon-02', $emit-difference) {\n @include custom-property('icon-02', map-get($theme, 'icon-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'icon-03', $emit-difference) {\n @include custom-property('icon-03', map-get($theme, 'icon-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'link-01', $emit-difference) {\n @include custom-property('link-01', map-get($theme, 'link-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'link-02', $emit-difference) {\n @include custom-property('link-02', map-get($theme, 'link-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-link',\n $emit-difference\n )\n {\n @include custom-property('inverse-link', map-get($theme, 'inverse-link'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'field-01', $emit-difference)\n {\n @include custom-property('field-01', map-get($theme, 'field-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'field-02', $emit-difference)\n {\n @include custom-property('field-02', map-get($theme, 'field-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-01',\n $emit-difference\n )\n {\n @include custom-property('inverse-01', map-get($theme, 'inverse-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-02',\n $emit-difference\n )\n {\n @include custom-property('inverse-02', map-get($theme, 'inverse-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-01',\n $emit-difference\n )\n {\n @include custom-property('support-01', map-get($theme, 'support-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-02',\n $emit-difference\n )\n {\n @include custom-property('support-02', map-get($theme, 'support-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-03',\n $emit-difference\n )\n {\n @include custom-property('support-03', map-get($theme, 'support-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'support-04',\n $emit-difference\n )\n {\n @include custom-property('support-04', map-get($theme, 'support-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-01',\n map-get($theme, 'inverse-support-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-02',\n map-get($theme, 'inverse-support-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-03',\n map-get($theme, 'inverse-support-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-support-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-support-04',\n map-get($theme, 'inverse-support-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'overlay-01',\n $emit-difference\n )\n {\n @include custom-property('overlay-01', map-get($theme, 'overlay-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)\n {\n @include custom-property('danger-01', map-get($theme, 'danger-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)\n {\n @include custom-property('danger-02', map-get($theme, 'danger-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {\n @include custom-property('focus', map-get($theme, 'focus'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-focus-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-focus-ui',\n map-get($theme, 'inverse-focus-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-primary',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-primary',\n map-get($theme, 'hover-primary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-primary',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-primary',\n map-get($theme, 'active-primary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-primary-text',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-primary-text',\n map-get($theme, 'hover-primary-text')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-secondary',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-secondary',\n map-get($theme, 'hover-secondary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-secondary',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-secondary',\n map-get($theme, 'active-secondary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-tertiary',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-tertiary',\n map-get($theme, 'hover-tertiary')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-tertiary',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-tertiary',\n map-get($theme, 'active-tertiary')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'hover-ui', $emit-difference)\n {\n @include custom-property('hover-ui', map-get($theme, 'hover-ui'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-light-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-light-ui',\n map-get($theme, 'hover-light-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-selected-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'hover-selected-ui',\n map-get($theme, 'hover-selected-ui')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)\n {\n @include custom-property('active-ui', map-get($theme, 'active-ui'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-light-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-light-ui',\n map-get($theme, 'active-light-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'selected-ui',\n $emit-difference\n )\n {\n @include custom-property('selected-ui', map-get($theme, 'selected-ui'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'selected-light-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'selected-light-ui',\n map-get($theme, 'selected-light-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'inverse-hover-ui',\n $emit-difference\n )\n {\n @include custom-property(\n 'inverse-hover-ui',\n map-get($theme, 'inverse-hover-ui')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-danger',\n $emit-difference\n )\n {\n @include custom-property('hover-danger', map-get($theme, 'hover-danger'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'active-danger',\n $emit-difference\n )\n {\n @include custom-property(\n 'active-danger',\n map-get($theme, 'active-danger')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'hover-row', $emit-difference)\n {\n @include custom-property('hover-row', map-get($theme, 'hover-row'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'visited-link',\n $emit-difference\n )\n {\n @include custom-property('visited-link', map-get($theme, 'visited-link'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'disabled-01',\n $emit-difference\n )\n {\n @include custom-property('disabled-01', map-get($theme, 'disabled-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'disabled-02',\n $emit-difference\n )\n {\n @include custom-property('disabled-02', map-get($theme, 'disabled-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'disabled-03',\n $emit-difference\n )\n {\n @include custom-property('disabled-03', map-get($theme, 'disabled-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'highlight', $emit-difference)\n {\n @include custom-property('highlight', map-get($theme, 'highlight'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'decorative-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'decorative-01',\n map-get($theme, 'decorative-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'button-separator',\n $emit-difference\n )\n {\n @include custom-property(\n 'button-separator',\n map-get($theme, 'button-separator')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'skeleton-01',\n $emit-difference\n )\n {\n @include custom-property('skeleton-01', map-get($theme, 'skeleton-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'skeleton-02',\n $emit-difference\n )\n {\n @include custom-property('skeleton-02', map-get($theme, 'skeleton-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'brand-01', $emit-difference)\n {\n @include custom-property('brand-01', map-get($theme, 'brand-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'brand-02', $emit-difference)\n {\n @include custom-property('brand-02', map-get($theme, 'brand-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'brand-03', $emit-difference)\n {\n @include custom-property('brand-03', map-get($theme, 'brand-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'active-01', $emit-difference)\n {\n @include custom-property('active-01', map-get($theme, 'active-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'hover-field',\n $emit-difference\n )\n {\n @include custom-property('hover-field', map-get($theme, 'hover-field'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {\n @include custom-property('danger', map-get($theme, 'danger'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'caption-01',\n $emit-difference\n )\n {\n @include custom-property('caption-01', map-get($theme, 'caption-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)\n {\n @include custom-property('label-01', map-get($theme, 'label-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'helper-text-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'helper-text-01',\n map-get($theme, 'helper-text-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-short-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'body-short-01',\n map-get($theme, 'body-short-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-long-01',\n $emit-difference\n )\n {\n @include custom-property('body-long-01', map-get($theme, 'body-long-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-short-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'body-short-02',\n map-get($theme, 'body-short-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'body-long-02',\n $emit-difference\n )\n {\n @include custom-property('body-long-02', map-get($theme, 'body-long-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'code-01', $emit-difference) {\n @include custom-property('code-01', map-get($theme, 'code-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'code-02', $emit-difference) {\n @include custom-property('code-02', map-get($theme, 'code-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'heading-01',\n $emit-difference\n )\n {\n @include custom-property('heading-01', map-get($theme, 'heading-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-01',\n map-get($theme, 'productive-heading-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'heading-02',\n $emit-difference\n )\n {\n @include custom-property('heading-02', map-get($theme, 'heading-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-02',\n map-get($theme, 'productive-heading-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-03',\n map-get($theme, 'productive-heading-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-04',\n map-get($theme, 'productive-heading-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-05',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-05',\n map-get($theme, 'productive-heading-05')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-06',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-06',\n map-get($theme, 'productive-heading-06')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'productive-heading-07',\n $emit-difference\n )\n {\n @include custom-property(\n 'productive-heading-07',\n map-get($theme, 'productive-heading-07')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-01',\n map-get($theme, 'expressive-heading-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-02',\n map-get($theme, 'expressive-heading-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-03',\n map-get($theme, 'expressive-heading-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-04',\n map-get($theme, 'expressive-heading-04')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-05',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-05',\n map-get($theme, 'expressive-heading-05')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-heading-06',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-heading-06',\n map-get($theme, 'expressive-heading-06')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'expressive-paragraph-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'expressive-paragraph-01',\n map-get($theme, 'expressive-paragraph-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'quotation-01',\n $emit-difference\n )\n {\n @include custom-property('quotation-01', map-get($theme, 'quotation-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'quotation-02',\n $emit-difference\n )\n {\n @include custom-property('quotation-02', map-get($theme, 'quotation-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-01',\n $emit-difference\n )\n {\n @include custom-property('display-01', map-get($theme, 'display-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-02',\n $emit-difference\n )\n {\n @include custom-property('display-02', map-get($theme, 'display-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-03',\n $emit-difference\n )\n {\n @include custom-property('display-03', map-get($theme, 'display-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'display-04',\n $emit-difference\n )\n {\n @include custom-property('display-04', map-get($theme, 'display-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-01',\n $emit-difference\n )\n {\n @include custom-property('spacing-01', map-get($theme, 'spacing-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-02',\n $emit-difference\n )\n {\n @include custom-property('spacing-02', map-get($theme, 'spacing-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-03',\n $emit-difference\n )\n {\n @include custom-property('spacing-03', map-get($theme, 'spacing-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-04',\n $emit-difference\n )\n {\n @include custom-property('spacing-04', map-get($theme, 'spacing-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-05',\n $emit-difference\n )\n {\n @include custom-property('spacing-05', map-get($theme, 'spacing-05'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-06',\n $emit-difference\n )\n {\n @include custom-property('spacing-06', map-get($theme, 'spacing-06'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-07',\n $emit-difference\n )\n {\n @include custom-property('spacing-07', map-get($theme, 'spacing-07'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-08',\n $emit-difference\n )\n {\n @include custom-property('spacing-08', map-get($theme, 'spacing-08'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-09',\n $emit-difference\n )\n {\n @include custom-property('spacing-09', map-get($theme, 'spacing-09'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-10',\n $emit-difference\n )\n {\n @include custom-property('spacing-10', map-get($theme, 'spacing-10'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-11',\n $emit-difference\n )\n {\n @include custom-property('spacing-11', map-get($theme, 'spacing-11'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'spacing-12',\n $emit-difference\n )\n {\n @include custom-property('spacing-12', map-get($theme, 'spacing-12'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-01',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-01',\n map-get($theme, 'fluid-spacing-01')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-02',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-02',\n map-get($theme, 'fluid-spacing-02')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-03',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-03',\n map-get($theme, 'fluid-spacing-03')\n );\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'fluid-spacing-04',\n $emit-difference\n )\n {\n @include custom-property(\n 'fluid-spacing-04',\n map-get($theme, 'fluid-spacing-04')\n );\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-01', $emit-difference)\n {\n @include custom-property('layout-01', map-get($theme, 'layout-01'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-02', $emit-difference)\n {\n @include custom-property('layout-02', map-get($theme, 'layout-02'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-03', $emit-difference)\n {\n @include custom-property('layout-03', map-get($theme, 'layout-03'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-04', $emit-difference)\n {\n @include custom-property('layout-04', map-get($theme, 'layout-04'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-05', $emit-difference)\n {\n @include custom-property('layout-05', map-get($theme, 'layout-05'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-06', $emit-difference)\n {\n @include custom-property('layout-06', map-get($theme, 'layout-06'));\n }\n\n @if should-emit($theme, $parent-carbon-theme, 'layout-07', $emit-difference)\n {\n @include custom-property('layout-07', map-get($theme, 'layout-07'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-01',\n $emit-difference\n )\n {\n @include custom-property('container-01', map-get($theme, 'container-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-02',\n $emit-difference\n )\n {\n @include custom-property('container-02', map-get($theme, 'container-02'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-03',\n $emit-difference\n )\n {\n @include custom-property('container-03', map-get($theme, 'container-03'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-04',\n $emit-difference\n )\n {\n @include custom-property('container-04', map-get($theme, 'container-04'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'container-05',\n $emit-difference\n )\n {\n @include custom-property('container-05', map-get($theme, 'container-05'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'icon-size-01',\n $emit-difference\n )\n {\n @include custom-property('icon-size-01', map-get($theme, 'icon-size-01'));\n }\n\n @if should-emit(\n $theme,\n $parent-carbon-theme,\n 'icon-size-02',\n $emit-difference\n )\n {\n @include custom-property('icon-size-02', map-get($theme, 'icon-size-02'));\n }\n }\n\n @content;\n\n // Reset to default theme after apply in content\n @if $carbon--theme != $parent-carbon-theme {\n $carbon--theme: $parent-carbon-theme !global;\n\n @include carbon--theme();\n }\n}\n",'@import "../root.scss";\n\n.locationPickerContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n width: 100vw;\n}\n\n.locationCard {\n display: flex;\n flex-direction: column;\n width: 23rem;\n background-color: $ui-background;\n margin: 0;\n padding: 1.5rem;\n border: 1px solid $ui-03;\n}\n\n.welcomeTitle {\n @extend .productiveHeading03;\n text-transform: capitalize;\n}\n\n.searchBox {\n margin-top: 1rem;\n}\n\n.welcomeMessage {\n @extend .bodyLong01;\n margin-top: 0.5rem;\n color: $color-gray-70;\n}\n\n.searchResults {\n @extend .bodyShort02;\n margin: 1rem 0rem;\n max-height: 100%;\n overflow-y: auto;\n}\n\n.resultsCount {\n @extend .bodyShort01;\n color: $color-gray-70;\n}\n\n.locationResultsContainer {\n display: flex;\n overflow-y: auto;\n margin-top: 0.5rem;\n}\n\n.locationRadioButton {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n @extend .bodyShort01;\n padding: 0.5rem 0rem;\n text-align: left;\n width: 18rem;\n}\n\n.locationNotFound {\n @extend .bodyShort01;\n padding: 1rem 0rem;\n color: $color-gray-70;\n}\n\n.confirmButton button {\n width: 20rem;\n}\n\n.radioButtonSkeleton {\n margin-right: 0 !important;\n margin-bottom: $spacing-05;\n}\n\n.radioButtonSkeleton span {\n width: 100% !important;\n}\n\n.pagination {\n background-color: $ui-01;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: $spacing-05;\n border: 2px solid $ui-03;\n}\n\n.pagination > button:first-child,\npagination > button:first-child:hover {\n border-right: 2px solid $ui-03;\n}\n\n.pagination > button,\n.pagination > button:hover {\n border-left: 2px solid $ui-03;\n}\n\n.loadingIcon {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: $spacing-05;\n}\n'],sourceRoot:""}]),r.locals={productiveHeading01:"-esm-login__location-picker__productiveHeading01___5QiCf",productiveHeading02:"-esm-login__location-picker__productiveHeading02___WaQHp",productiveHeading03:"-esm-login__location-picker__productiveHeading03___6nV-j",welcomeTitle:"-esm-login__location-picker__welcomeTitle___iI+4Z",productiveHeading04:"-esm-login__location-picker__productiveHeading04___Oqqcq",productiveHeading05:"-esm-login__location-picker__productiveHeading05___DiOHe",productiveHeading06:"-esm-login__location-picker__productiveHeading06___yuK1n",bodyShort01:"-esm-login__location-picker__bodyShort01___Yu8ZO",locationNotFound:"-esm-login__location-picker__locationNotFound___-t5pO",locationRadioButton:"-esm-login__location-picker__locationRadioButton___Gdh0u",resultsCount:"-esm-login__location-picker__resultsCount___KQ5mh",bodyShort02:"-esm-login__location-picker__bodyShort02___Qiqsi",searchResults:"-esm-login__location-picker__searchResults___CAZcg",bodyLong01:"-esm-login__location-picker__bodyLong01___jzOK6",welcomeMessage:"-esm-login__location-picker__welcomeMessage___Wfdzz",bodyLong02:"-esm-login__location-picker__bodyLong02___OT5+p",label01:"-esm-login__location-picker__label01___itiyC",caption01:"-esm-login__location-picker__caption01___VD9WY",helperText01:"-esm-login__location-picker__helperText01___f9hQ3",text01:"-esm-login__location-picker__text01___EkkDZ",text02:"-esm-login__location-picker__text02___39Oi1",locationPickerContainer:"-esm-login__location-picker__locationPickerContainer___t4nEl",locationCard:"-esm-login__location-picker__locationCard___p8DlF",searchBox:"-esm-login__location-picker__searchBox___5ywPq",locationResultsContainer:"-esm-login__location-picker__locationResultsContainer___IvnTr",confirmButton:"-esm-login__location-picker__confirmButton___mHNSY",radioButtonSkeleton:"-esm-login__location-picker__radioButtonSkeleton___mCTbu",pagination:"-esm-login__location-picker__pagination___N8tXt",loadingIcon:"-esm-login__location-picker__loadingIcon___Tgfyj"};const p=r}}]);
2
2
  //# sourceMappingURL=643.js.map