npm - @primer/react-brand - Versions diffs - 0.72.0-rc.44ea78b6 → 0.72.0-rc.6b1c0843 - Mend

@primer/react-brand 0.72.0-rc.44ea78b6 → 0.72.0-rc.6b1c0843

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 (418) hide show

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.72.0-rc.44ea78b6)
+# Primer Brand docs (v0.72.0-rc.6b1c0843)
-These docs are bundled with `@primer/react-brand@0.72.0-rc.44ea78b6` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.0-rc.6b1c0843` and match your installed version.
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Hero/Hero.module-DjsgFkIQ.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__Hero-module__Hero___It6gj{flex-direction:column;display:flex}.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-narrow-padding)}.Primer_Brand__Hero-module__Hero--align-start___ouSp3{text-align:left;align-items:flex-start}.Primer_Brand__Hero-module__Hero--align-center___6FMoH{text-align:center;place-items:center}.Primer_Brand__Hero-module__Hero-grid___gXNGW{--brand-Grid-spacing-margin:0}.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{width:100%;max-width:1280px;padding:var(--base-size-32);background-color:var(--brand-Hero-bgColor-gridlineGridInner);margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V,.Primer_Brand__Hero-module__Hero-grid--inline-end___o8Dtq{--brand-Grid-spacing-row:var(--base-size-40)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--contained___vfiGA{padding:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-grid--block-end___jU6_V{--brand-Grid-spacing-row:var(--base-size-80)}}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-actions___RUotq{justify-content:center}.Primer_Brand__Hero-module__Hero--align-center___6FMoH .Primer_Brand__Hero-module__Hero-content___lpGj0{flex-direction:column;align-items:center;display:flex}.Primer_Brand__Hero-module__Hero-image___GC10l{border-radius:var(--brand-borderRadius-medium);width:100%}.Primer_Brand__Hero-module__Hero-image___GC10l>img{border-radius:inherit}.Primer_Brand__Hero-module__Hero-mediaContainer___DWFUR{flex:1;width:100%;height:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageContainer--bg-subtle___RFNq3{background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-32);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{justify-content:center;width:100%;display:flex}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);padding:var(--base-size-32) var(--base-size-32) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{background-color:var(--brand-color-canvas-subtle);align-items:stretch;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-imageContainer--inline-bordered___g8hqZ{min-height:calc(600px - var(--base-size-24))}.Primer_Brand__Hero-module__Hero-imageWrapper--bg-subtle___8xPH_{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero-imageContainer--inline-bg-padded___Y_hah{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero-media-item--block-end___RrUWM{border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI{border-radius:var(--brand-borderRadius-medium)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{width:100%;max-width:1280px;margin-inline:auto}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{min-height:440px}}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--bordered-inline___e_HR8{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh.Primer_Brand__Hero-module__Hero--image-pos-inline___fwJAZ{border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-32);flex-direction:column;justify-content:center;display:flex}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-contentColumn--bordered-inline___2Dfrd{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline___TD4jr:not(.Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk),.Primer_Brand__Hero-module__Hero-media-item--inline___3XHJG{border-radius:0}.Primer_Brand__Hero-module__Hero--variant-gridline___B_Xwh .Primer_Brand__Hero-module__Hero-media--pos-inline-padded___Uq4Xk{align-self:center;max-width:100%;height:auto}.Primer_Brand__Hero-module__Hero-video___Ne5zN{width:100%}.Primer_Brand__Hero-module__Hero-media-item___Ia3pn{border-radius:var(--brand-borderRadius-large);width:100%}.Primer_Brand__Hero-module__Hero-label___XJftM{text-transform:uppercase;letter-spacing:1px;align-items:center;margin-block-end:calc(var(--base-size-16) - var(--base-size-2));display:flex}.Primer_Brand__Hero-module__Hero-heading___HMve3{max-width:924px;margin:0}.Primer_Brand__Hero-module__Hero-heading___HMve3 b{color:var(--brand-color-accent-primary);font-style:normal;font-weight:inherit}.Primer_Brand__Hero-module__Hero-heading--fullWidth___sJlnY{max-width:none;max-width:initial}.Primer_Brand__Hero-module__Hero-text-column--inline-gridline___gGhfi{height:100%}.Primer_Brand__Hero-module__Hero-description___7raSC{margin:var(--base-size-24) 0 0;max-width:600px}.Primer_Brand__Hero-module__Hero--variant-inline-gridline___Jwjqy .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:auto;padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:center;gap:var(--base-size-8) var(--base-size-16);flex-wrap:wrap;margin-block-start:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{align-items:stretch;gap:var(--base-size-8) var(--base-size-12)}.Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-32)}.Primer_Brand__Hero-module__Hero-eyebrow___mlxSE{margin-block-end:var(--base-size-32)}@media screen and (width>=34rem){.Primer_Brand__Hero-module__Hero--variant-default___lNgHw{padding:var(--brand-Hero-regular-padding)}}.Primer_Brand__Hero-module__Hero-video-poster-button___mtbvt{cursor:pointer;background:0 0;border:none;width:100%;height:100%;padding:0;font-size:0;line-height:0;display:block;position:relative}.Primer_Brand__Hero-module__Hero-video-poster-image___ZP3Q5{width:100%;height:auto;display:block}.Primer_Brand__Hero-module__Hero-video-poster-icon___PfT4p{width:var(--base-size-96);height:var(--base-size-96);z-index:1;color:var(--base-color-scale-white-0);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Primer_Brand__Hero-module__Hero-video-poster-header___13M9x{padding:var(--base-size-16) var(--base-size-24);align-items:center;gap:var(--base-size-16);height:var(--base-size-80);background:linear-gradient(#000000b3 60%,#0000);display:flex;position:absolute;inset:0 0 auto}.Primer_Brand__Hero-module__Hero-video-header-poster-icon___tlEff,.Primer_Brand__Hero-module__Hero-video-poster-text___4R755{color:var(--base-color-scale-white-0)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3{width:100%;container-type:inline-size}.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{--brand-Grid-spacing-row:0;gap:0;width:100%;max-width:1280px;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero-grid--expressive___Lq5SC{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-36);padding-inline:var(--base-size-20);border-block-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);align-items:center;padding-block-end:var(--base-size-28);display:flex}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-32);padding-inline:var(--base-size-20);padding-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-description___7raSC{margin-block-start:0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-28)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-24)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero-expressive-header-column___iq2TT{padding:var(--base-size-64);border-block-end:none;border-inline-end:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline-end:var(--base-size-64)}.Primer_Brand__Hero-module__Hero-expressive-body-column___Beyq_{padding:var(--base-size-64);flex-direction:column;justify-content:flex-end;padding-inline-start:var(--base-size-64);display:flex}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-actions___RUotq{margin-block-start:var(--base-size-24)}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-trailing____cadc{margin-block-start:var(--base-size-20)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper___CscCA{border-block:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);background-color:var(--brand-color-canvas-subtle);width:100%}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{width:100%;max-width:1280px;padding:var(--base-size-32) var(--base-size-32) 0;margin-inline:auto}@container (width>=1280px){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--with-gridline___fixm4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-32)}@media screen and (width>=63.25rem){.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner___jk8Wg{padding:var(--base-size-64) var(--base-size-64) 0}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-imageWrapper-inner--padded___cN4al{padding:var(--base-size-64)}}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media___rM3qR{max-width:1176px;margin-inline:auto;display:block;overflow:hidden}.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-media--pos-block-end___6QShk,.Primer_Brand__Hero-module__Hero--variant-gridline-expressive___yVRY3 .Primer_Brand__Hero-module__Hero-image___GC10l:not(.Primer_Brand__Hero-module__Hero-media--pos-block-end-padded___VdZlI){border-radius:var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0}

package/esm/Hero/Hero.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './Hero.module-DqG5f0MT.css';var e = {
+import './Hero.module-DjsgFkIQ.css';var e = {
 	Hero: "Primer_Brand__Hero-module__Hero___It6gj",
 	"Hero--variant-default": "Primer_Brand__Hero-module__Hero--variant-default___lNgHw",
 	"Hero--align-start": "Primer_Brand__Hero-module__Hero--align-start___ouSp3",

package/esm/Hero/Hero.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-28);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-36);\n padding-inline: var(--base-size-20);\n padding-block-end: var(--base-size-28);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-inline: var(--base-size-20);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-28);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-20);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Hero.module.js","names":[],"sources":["../../src/Hero/Hero.module.css"],"sourcesContent":[".Hero {\n display: flex;\n flex-direction: column;\n}\n\n.Hero--variant-default {\n padding: var(--brand-Hero-narrow-padding);\n}\n\n.Hero--align-start {\n align-items: flex-start;\n text-align: left;\n}\n\n.Hero--align-center {\n justify-items: center;\n align-items: center;\n text-align: center;\n}\n\n.Hero-grid {\n --brand-Grid-spacing-margin: 0;\n}\n\n.Hero-grid--contained {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32);\n background-color: var(--brand-Hero-bgColor-gridlineGridInner); /* Unset by default - users can override if needed /\n}\n\n/ Prevents double-borders. We only apply the inline borders when the parent container is wide enough to show the full width. /\n@container (min-width: 1280px) {\n .Hero-grid--contained {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero-grid--block-end,\n.Hero-grid--inline-end {\n --brand-Grid-spacing-row: var(--base-size-40);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--contained {\n padding: var(--base-size-64);\n }\n\n .Hero-grid--block-end {\n --brand-Grid-spacing-row: var(--base-size-80);\n }\n}\n\n.Hero--align-center .Hero-actions {\n justify-content: center;\n}\n\n.Hero--align-center .Hero-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.Hero-image {\n border-radius: var(--brand-borderRadius-medium);\n width: 100%;\n}\n\n.Hero-image > img {\n border-radius: inherit;\n}\n\n.Hero-mediaContainer {\n width: 100%;\n height: 100%;\n display: flex;\n flex: 1;\n}\n\n.Hero-imageContainer--bg-subtle {\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-32);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.Hero-imageWrapper {\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.Hero-imageWrapper--bg-subtle {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n.Hero-imageContainer--inline-bordered {\n background-color: var(--brand-color-canvas-subtle);\n display: flex;\n align-items: stretch;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-imageContainer--inline-bordered {\n min-height: calc(600px - var(--base-size-24));\n }\n\n .Hero-imageWrapper--bg-subtle {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero-imageContainer--inline-bg-padded {\n padding: var(--base-size-64);\n }\n}\n\n.Hero--variant-gridline {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Shared media styles for images and videos /\n.Hero--variant-gridline .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline .Hero-media--pos-block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n/ Applied directly to video/iframe elements for block-end position /\n.Hero-media-item--block-end {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n.Hero-media--pos-block-end-padded {\n border-radius: var(--brand-borderRadius-medium);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ GridLine variant with inline (side-by-side) layout /\n.Hero-grid--bordered-inline {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-grid--bordered-inline {\n min-height: 440px;\n }\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--bordered-inline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline.Hero--image-pos-inline {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n/ Text column styling for gridline inline positions /\n.Hero-contentColumn--bordered-inline {\n padding: var(--base-size-32);\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero-contentColumn--bordered-inline {\n padding: var(--base-size-64);\n }\n}\n\n/ Media styling for gridline inline positions /\n\n/ Edge-to-edge inline media (no padding) - remove border radius /\n.Hero--variant-gridline .Hero-media--pos-inline:not(.Hero-media--pos-inline-padded) {\n border-radius: 0;\n}\n\n/ Applied directly to video/iframe elements for inline position /\n.Hero-media-item--inline {\n border-radius: 0;\n}\n\n/ Padded inline media - constrain size and center /\n.Hero--variant-gridline .Hero-media--pos-inline-padded {\n max-width: 100%;\n height: auto;\n align-self: center;\n}\n\n/ Image column styling now handled by .Hero-imageContainer--inline-bordered /\n\n.Hero-video {\n width: 100%;\n}\n\n/ Base styles for video/iframe media elements /\n.Hero-media-item {\n width: 100%;\n border-radius: var(--brand-borderRadius-large);\n}\n\n.Hero-label {\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-block-end: calc(var(--base-size-16) - var(--base-size-2));\n display: flex;\n align-items: center;\n}\n\n.Hero-heading {\n margin: 0;\n max-width: 924px;\n}\n\n.Hero-heading b {\n color: var(--brand-color-accent-primary);\n font-style: normal;\n font-weight: inherit;\n}\n\n.Hero-heading--fullWidth {\n max-width: unset;\n}\n\n.Hero-text-column--inline-gridline {\n height: 100%;\n}\n\n.Hero-description {\n margin: var(--base-size-24) 0 0;\n max-width: 600px;\n}\n\n.Hero--variant-inline-gridline .Hero-description {\n padding-block-start: var(--base-size-24);\n margin-block-start: auto;\n}\n\n.Hero-actions {\n margin-block-start: var(--base-size-28);\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--base-size-8) var(--base-size-16);\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n align-items: stretch;\n gap: var(--base-size-8) var(--base-size-12);\n}\n\n.Hero-trailing {\n margin-block-start: var(--base-size-32);\n}\n\n.Hero-eyebrow {\n margin-block-end: var(--base-size-32);\n}\n\n/ Small breakpoint and up /\n@media screen and (min-width: 34rem) {\n .Hero--variant-default {\n padding: var(--brand-Hero-regular-padding);\n }\n}\n\n.Hero-video-poster-button {\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n display: block;\n height: 100%;\n position: relative;\n line-height: 0;\n font-size: 0;\n width: 100%;\n}\n\n.Hero-video-poster-image {\n display: block;\n height: auto;\n width: 100%;\n}\n\n.Hero-video-poster-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--base-size-96);\n height: var(--base-size-96);\n z-index: 1;\n color: var(--base-color-scale-white-0);\n}\n\n.Hero-video-poster-header {\n position: absolute;\n inset: 0 0 auto;\n padding: var(--base-size-16) var(--base-size-24);\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0));\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n height: var(--base-size-80);\n}\n\n.Hero-video-header-poster-icon,\n.Hero-video-poster-text {\n color: var(--base-color-scale-white-0);\n}\n\n/ ========================================\n Gridline-Expressive Variant\n ======================================== /\n\n.Hero--variant-gridline-expressive {\n container-type: inline-size;\n width: 100%;\n}\n\n/ Grid container for expressive variant /\n.Hero-grid--expressive {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n gap: 0;\n --brand-Grid-spacing-row: 0;\n}\n\n@container (min-width: 1280px) {\n .Hero-grid--expressive {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n/ Header column (eyebrow, heading) /\n.Hero-expressive-header-column {\n padding: var(--base-size-36);\n padding-inline: var(--base-size-20);\n padding-block-end: var(--base-size-28);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n display: flex;\n align-items: center;\n}\n\n/ Body column (description, actions, trailing) /\n.Hero-expressive-body-column {\n padding: var(--base-size-32);\n padding-inline: var(--base-size-20);\n padding-block-start: var(--base-size-24);\n}\n\n.Hero--variant-gridline-expressive .Hero-description {\n margin-block-start: 0;\n}\n\n.Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-28);\n}\n\n.Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-24);\n}\n\n/ Desktop: Side-by-side layout with vertical divider /\n@media screen and (min-width: 63.25rem) {\n .Hero-expressive-header-column {\n padding: var(--base-size-64);\n padding-inline-end: var(--base-size-64);\n border-block-end: none;\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .Hero-expressive-body-column {\n padding: var(--base-size-64);\n padding-inline-start: var(--base-size-64);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n }\n\n .Hero--variant-gridline-expressive .Hero-actions {\n margin-block-start: var(--base-size-24);\n }\n\n .Hero--variant-gridline-expressive .Hero-trailing {\n margin-block-start: var(--base-size-20);\n }\n}\n\n/ Media wrapper styles for gridline-expressive (same as gridline) /\n.Hero--variant-gridline-expressive .Hero-imageWrapper {\n border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n background-color: var(--brand-color-canvas-subtle);\n width: 100%;\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n width: 100%;\n max-width: 1280px;\n margin-inline: auto;\n padding: var(--base-size-32) var(--base-size-32) 0;\n}\n\n@container (min-width: 1280px) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--with-gridline {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-32);\n}\n\n@media screen and (min-width: 63.25rem) {\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner {\n padding: var(--base-size-64) var(--base-size-64) 0;\n }\n\n .Hero--variant-gridline-expressive .Hero-imageWrapper-inner--padded {\n padding: var(--base-size-64);\n }\n}\n\n/ Shared media styles for gridline-expressive */\n.Hero--variant-gridline-expressive .Hero-media {\n max-width: 1176px;\n margin-inline: auto;\n display: block;\n overflow: hidden;\n}\n\n.Hero--variant-gridline-expressive .Hero-media--pos-block-end,\n.Hero--variant-gridline-expressive .Hero-image:not(.Hero-media--pos-block-end-padded) {\n border-radius: var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0;\n}\n"],"mappings":""}

package/esm/NavList/NavList.module-zvpwnkzz.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__NavList-module__NavList___tuR_C{--brand-NavList-label-indent-level-2:0px;--brand-NavList-label-indent-level-3:var(--base-size-16);--brand-NavList-label-indent-level-4:var(--base-size-32);--brand-NavList-label-indent-level-5:var(--base-size-48);--brand-NavList-item-paddingInlineStart-base:var(--base-size-24);--brand-NavList-control-paddingInlineStart:var(--base-size-8);--brand-NavList-label-paddingInlineStart:var(--base-size-6);box-sizing:border-box;font-family:var(--brand-fontStack-sansSerif);color:var(--brand-color-text-default);width:100%;padding-inline-start:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__list___gwquf,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{margin:0;padding:0;list-style:none}.Primer_Brand__NavList-module__NavList__list___gwquf{flex-direction:column;gap:0;display:flex}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl,.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{--brand-NavList-item-paddingInlineStart-base:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a .Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ{--brand-NavList-item-paddingInlineStart-base:0px;--brand-NavList-label-paddingInlineStart:var(--base-size-8)}.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__group___Jnwkd{position:relative}.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__item___HTVCC+.Primer_Brand__NavList-module__NavList__group___Jnwkd,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__item___HTVCC,.Primer_Brand__NavList-module__NavList__list___gwquf:not(.Primer_Brand__NavList-module__NavList__list--flat___xvRQl)>.Primer_Brand__NavList-module__NavList__group___Jnwkd+.Primer_Brand__NavList-module__NavList__group___Jnwkd{background-image:repeating-linear-gradient(to right, var(--brand-color-border-muted) 0 var(--base-size-2), transparent var(--base-size-2) var(--base-size-4));background-repeat:no-repeat;background-size:100% var(--brand-borderWidth-thin);background-position:0 0}.Primer_Brand__NavList-module__NavList__groupTitle___r47_e{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16);color:var(--brand-color-text-default);font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200);margin:0}.Primer_Brand__NavList-module__NavList__groupList___Mtk4a{flex-direction:column;gap:0;padding-block-end:var(--base-size-16);display:flex}.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{align-items:center;gap:var(--base-size-8);min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-block:calc(var(--base-size-8) + var(--base-size-2));padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-2)}.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-3)}.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-4)}.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N{--brand-NavList-item-label-indent:var(--brand-NavList-label-indent-level-5)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{min-height:var(--base-size-32);padding-block:0;padding-inline-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding-inline-start:calc(var(--brand-NavList-item-paddingInlineStart-base) + var(--brand-NavList-item-label-indent))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{padding-inline-start:var(--brand-NavList-control-paddingInlineStart)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--brand-NavList-label-paddingInlineStart)}.Primer_Brand__NavList-module__NavList__link___k0zio{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-medium);min-width:0;color:var(--brand-color-text-muted);font-size:var(--brand-text-size-100);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-100);letter-spacing:var(--brand-text-letterSpacing-100);transition:background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default), color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);flex:auto;padding:0;display:flex;position:relative;-webkit-text-decoration:none!important;text-decoration:none!important}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{box-sizing:border-box;width:100%;color:var(--brand-color-text-muted);cursor:pointer;text-align:start;background:0 0;border:0;font-family:inherit;position:relative}.Primer_Brand__NavList-module__NavList__link___k0zio:hover{color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:hover{color:var(--brand-color-text-default);background-color:#0000}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:var(--base-size-32);order:2}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled){color:var(--brand-color-text-default)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__link___k0zio:focus-visible,.Primer_Brand__NavList-module__NavList__subNav___Q4xI7 .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:focus-visible{outline-offset:calc(-1 * var(--base-size-2))}.Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){color:var(--brand-color-text-default);background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]):before{content:"";inset-block:var(--base-size-8);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);position:absolute;inset-inline-start:0}.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):before{content:"";block-size:var(--base-size-16);width:var(--base-size-4);border-radius:var(--base-size-2);background-color:var(--brand-NavList-activeIndicator-color);z-index:1;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:calc(-1 * var(--base-size-8))}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:before{inset-inline-start:var(--base-size-4)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]{padding-inline-start:var(--base-size-12)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{padding-inline-start:var(--base-size-2)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){padding-inline-start:0}.Primer_Brand__NavList-module__NavList__link--disabled___Eg304{color:var(--brand-color-text-disabled);pointer-events:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:disabled{color:var(--brand-color-text-disabled);cursor:not-allowed}.Primer_Brand__NavList-module__NavList__label___ogBmt{word-break:break-word;min-width:0}.Primer_Brand__NavList-module__NavList__labelArea___c4ORu{align-items:center;gap:var(--base-size-8);border-radius:var(--brand-borderRadius-small);flex:auto;min-width:0;display:flex}.Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq,.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{color:inherit;flex:none;display:inline-flex}.Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI{margin-inline-start:auto;margin-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform-origin:50%;transition:transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);flex:none}.Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:rotate(-180deg)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7{opacity:0;max-height:0;transform:translateY(calc(-1 * var(--base-size-8)));visibility:hidden;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear var(--brand-animation-duration-fast);flex-direction:column;gap:0;margin:0;padding:0;display:flex;overflow:hidden}.Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8{max-height:none;max-height:var(--brand-NavList-subNav-height,none);opacity:1;visibility:visible;transition:max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;transform:translateY(0)}.Primer_Brand__NavList-module__NavList__subNav___Q4xI7[aria-hidden=true] .Primer_Brand__NavList-module__NavList__subNav___Q4xI7{visibility:hidden}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR{padding:var(--base-size-24) var(--base-size-16) var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--expanded___pH_PL{padding-block-end:var(--base-size-16)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);font-weight:var(--brand-text-weight-500);line-height:var(--brand-text-lineHeight-200);order:1}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{color:var(--brand-color-text-default);min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small);padding-inline-start:0;padding-inline-end:var(--base-size-6)}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc>*{z-index:1;position:relative}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):hover:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc:not(:disabled):active:after,.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n.Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false]:not(:disabled):after{content:"";z-index:0;border-radius:var(--brand-borderRadius-small);background-color:var(--brand-color-canvas-subtle);pointer-events:none;position:absolute;inset-block:0;inset-inline:0}.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:2;margin-inline-start:auto}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{order:1}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc{min-height:var(--base-size-32);margin-block:calc(-1 * var(--base-size-8));border-radius:var(--brand-borderRadius-small)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{position:absolute;inset-block-start:50%;inset-inline-start:calc(-1 * var(--brand-NavList-control-paddingInlineStart));transform:translateY(-50%)}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=true] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{transform:translateY(-50%)rotate(-180deg)}.Primer_Brand__NavList-module__NavList__item___HTVCC:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n).Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__accordionButton___F5tOc[aria-expanded=false] .Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF{inset-inline-start:calc(-1 * var(--base-size-16))}.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-2___kXyLx>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-4___k3h0P>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio,.Primer_Brand__NavList-module__NavList__item___HTVCC.Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100);order:2}.Primer_Brand__NavList-module__NavList__list--flat___xvRQl>.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{font-size:var(--brand-text-size-200);line-height:var(--brand-text-lineHeight-200);letter-spacing:var(--brand-text-letterSpacing-200)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio{min-height:var(--base-size-32);border-radius:var(--brand-borderRadius-small)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{min-height:calc(var(--base-size-32) - var(--brand-borderWidth-thin));margin-block-end:var(--brand-borderWidth-thin)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]){background-color:#0000}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover .Primer_Brand__NavList-module__NavList__labelArea___c4ORu,.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n) .Primer_Brand__NavList-module__NavList__link___k0zio[aria-current]:not([aria-current=false]) .Primer_Brand__NavList-module__NavList__labelArea___c4ORu{background-color:var(--brand-color-canvas-subtle)}.Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ:not(.Primer_Brand__NavList-module__NavList__item--level-1___gWx1n)>.Primer_Brand__NavList-module__NavList__itemContent___bYaVR .Primer_Brand__NavList-module__NavList__link___k0zio:hover{background-color:#0000}[data-color-mode=dark] .Primer_Brand__NavList-module__NavList___tuR_C{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-reduced-motion:reduce){.Primer_Brand__NavList-module__NavList___tuR_C,.Primer_Brand__NavList-module__NavList___tuR_C:before,.Primer_Brand__NavList-module__NavList___tuR_C:after,.Primer_Brand__NavList-module__NavList___tuR_C *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/NavList/NavList.module.js CHANGED Viewed

@@ -1,30 +1,30 @@
-import './NavList.module-CZFnt8br.css';var e = {
+import './NavList.module-zvpwnkzz.css';var e = {
 	NavList: "Primer_Brand__NavList-module__NavList___tuR_C",
 	NavList__list: "Primer_Brand__NavList-module__NavList__list___gwquf",
 	NavList__subNav: "Primer_Brand__NavList-module__NavList__subNav___Q4xI7",
 	NavList__groupList: "Primer_Brand__NavList-module__NavList__groupList___Mtk4a",
 	"NavList__list--flat": "Primer_Brand__NavList-module__NavList__list--flat___xvRQl",
+	"NavList__item--leaf": "Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ",
 	NavList__item: "Primer_Brand__NavList-module__NavList__item___HTVCC",
 	NavList__group: "Primer_Brand__NavList-module__NavList__group___Jnwkd",
 	NavList__groupTitle: "Primer_Brand__NavList-module__NavList__groupTitle___r47_e",
 	NavList__itemContent: "Primer_Brand__NavList-module__NavList__itemContent___bYaVR",
+	"NavList__item--level-2": "Primer_Brand__NavList-module__NavList__item--level-2___kXyLx",
+	"NavList__item--level-3": "Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ",
+	"NavList__item--level-4": "Primer_Brand__NavList-module__NavList__item--level-4___k3h0P",
+	"NavList__item--level-5": "Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N",
+	"NavList__item--level-1": "Primer_Brand__NavList-module__NavList__item--level-1___gWx1n",
 	NavList__link: "Primer_Brand__NavList-module__NavList__link___k0zio",
 	NavList__accordionButton: "Primer_Brand__NavList-module__NavList__accordionButton___F5tOc",
-	"NavList__item--level-1": "Primer_Brand__NavList-module__NavList__item--level-1___gWx1n",
 	NavList__labelArea: "Primer_Brand__NavList-module__NavList__labelArea___c4ORu",
 	"NavList__item--has-current-descendant": "Primer_Brand__NavList-module__NavList__item--has-current-descendant___JG7dQ",
-	"NavList__item--leaf": "Primer_Brand__NavList-module__NavList__item--leaf___YFNSZ",
 	"NavList__link--disabled": "Primer_Brand__NavList-module__NavList__link--disabled___Eg304",
 	NavList__label: "Primer_Brand__NavList-module__NavList__label___ogBmt",
 	NavList__leadingVisual: "Primer_Brand__NavList-module__NavList__leadingVisual___KqRaq",
 	NavList__trailingVisual: "Primer_Brand__NavList-module__NavList__trailingVisual___BrZXI",
 	NavList__toggleIcon: "Primer_Brand__NavList-module__NavList__toggleIcon___nlJbF",
 	"NavList__subNav--expanded": "Primer_Brand__NavList-module__NavList__subNav--expanded___ap3X8",
-	"NavList__item--expanded": "Primer_Brand__NavList-module__NavList__item--expanded___pH_PL",
-	"NavList__item--level-2": "Primer_Brand__NavList-module__NavList__item--level-2___kXyLx",
-	"NavList__item--level-3": "Primer_Brand__NavList-module__NavList__item--level-3___Z5uiQ",
-	"NavList__item--level-4": "Primer_Brand__NavList-module__NavList__item--level-4___k3h0P",
-	"NavList__item--level-5": "Primer_Brand__NavList-module__NavList__item--level-5___4mJ4N"
+	"NavList__item--expanded": "Primer_Brand__NavList-module__NavList__item--expanded___pH_PL"
 };
 //#endregion
 export { e as default };

package/esm/NavList/NavList.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavList.module.js","names":[],"sources":["../../src/NavList/NavList.module.css"],"sourcesContent":[".NavList {\n box-sizing: border-box;\n font-family: var(--brand-fontStack-sansSerif);\n color: var(--brand-color-text-default);\n padding-inline-start: var(--base-size-16);\n width: 100%;\n}\n\n.NavList__list,\n.NavList__subNav,\n.NavList__groupList {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.NavList__list {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.NavList__list--flat,\n.NavList__groupList {\n --brand-NavList-alignedLabel-paddingInlineStart: var(--base-size-2);\n}\n\n.NavList__groupList {\n --brand-NavList-item-paddingInlineStart-level-2: var(--base-size-2);\n}\n\n.NavList__item,\n.NavList__group {\n position: relative;\n}\n\n.NavList__list:not(.NavList__list--flat) > :is(.NavList__item, .NavList__group) + :is(.NavList__item, .NavList__group) {\n background-image: repeating-linear-gradient(\n to right,\n var(--brand-color-border-muted) 0 var(--base-size-2),\n transparent var(--base-size-2) var(--base-size-4)\n );\n background-repeat: no-repeat;\n background-size: 100% var(--brand-borderWidth-thin);\n background-position: top left;\n}\n\n.NavList__groupTitle {\n margin: 0;\n padding: var(--base-size-24) var(--base-size-16) var(--base-size-16);\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-200);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: var(--brand-text-letterSpacing-200);\n}\n\n.NavList__groupList {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-block-end: var(--base-size-16);\n}\n\n.NavList__itemContent {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n min-width: 0;\n}\n\n.NavList__link {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n flex: 1 1 auto;\n min-width: 0;\n border-radius: var(--brand-borderRadius-medium);\n padding: 0;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-decoration: none !important; /* dotcom override /\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.NavList__accordionButton {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n border: 0;\n background: transparent;\n color: var(--brand-color-text-muted);\n cursor: pointer;\n font-family: inherit;\n text-align: start;\n}\n\n.NavList__link:hover {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__accordionButton:hover {\n color: var(--brand-color-text-default);\n background-color: transparent;\n}\n\n.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent .NavList__accordionButton .NavList__labelArea {\n order: 2;\n min-height: var(--base-size-32);\n padding-inline-start: var(--base-size-6);\n}\n\n.NavList__item:not(.NavList__item--level-1)\n > .NavList__itemContent\n .NavList__accordionButton:not(:disabled):hover\n .NavList__labelArea {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--has-current-descendant > .NavList__itemContent .NavList__accordionButton:not(:disabled) {\n color: var(--brand-color-text-default);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']:not(:disabled)\n .NavList__labelArea {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n:is(.NavList__link, .NavList__accordionButton):focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.NavList__subNav :is(.NavList__link, .NavList__accordionButton):focus-visible {\n outline-offset: calc(-1 var(--base-size-2));\n}\n\n.NavList__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n padding-inline-start: var(--base-size-6);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false'])::before {\n content: '';\n position: absolute;\n inset-block: var(--base-size-8);\n inset-inline-start: 0;\n width: var(--base-size-4);\n border-radius: var(--base-size-2);\n background-color: var(--brand-NavList-activeIndicator-color);\n}\n\n.NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']:not(:disabled)::before {\n content: '';\n position: absolute;\n inset-block-start: 50%;\n block-size: var(--base-size-16);\n width: var(--base-size-4);\n border-radius: var(--base-size-2);\n background-color: var(--brand-NavList-activeIndicator-color);\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.NavList__item--level-1.NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']::before {\n inset-inline-start: calc(-1 * var(--base-size-8));\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']::before {\n inset-inline-start: var(--base-size-4);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false'] {\n padding-inline-start: var(--base-size-12);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']\n .NavList__labelArea {\n padding-inline-start: var(--base-size-2);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__link[aria-current]:not([aria-current='false']) {\n padding-inline-start: 0;\n}\n\n.NavList__link--disabled {\n color: var(--brand-color-text-disabled);\n pointer-events: none;\n}\n\n.NavList__accordionButton:disabled {\n color: var(--brand-color-text-disabled);\n cursor: not-allowed;\n}\n\n.NavList__label {\n min-width: 0;\n word-break: break-word;\n}\n\n.NavList__labelArea {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n gap: var(--base-size-8);\n min-width: 0;\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__leadingVisual,\n.NavList__trailingVisual {\n display: inline-flex;\n flex: none;\n color: inherit;\n}\n\n.NavList__trailingVisual {\n margin-inline-start: auto;\n margin-inline-end: var(--base-size-6);\n}\n\n.NavList__toggleIcon {\n flex: none;\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.NavList__accordionButton[aria-expanded='true'] .NavList__toggleIcon {\n transform: rotate(-180deg);\n}\n\n.NavList__subNav {\n display: flex;\n flex-direction: column;\n gap: 0;\n margin: 0;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n transform: translateY(calc(-1 * var(--base-size-8)));\n visibility: hidden;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n visibility 0s linear var(--brand-animation-duration-fast);\n}\n\n.NavList__subNav--expanded {\n max-height: var(--brand-NavList-subNav-height, none);\n opacity: 1;\n transform: translateY(0);\n visibility: visible;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;\n}\n\n.NavList__subNav[aria-hidden='true'] .NavList__subNav {\n visibility: hidden;\n}\n\n.NavList__item--level-1 > .NavList__itemContent {\n padding: var(--base-size-24) var(--base-size-16) var(--base-size-16);\n}\n\n.NavList__item--level-1.NavList__item--expanded {\n padding-block-end: var(--base-size-16);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__link {\n order: 1;\n font-size: var(--brand-text-size-200);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton {\n color: var(--brand-color-text-default);\n min-height: var(--base-size-32);\n margin-block: calc(-1 * var(--base-size-8));\n padding-inline-start: 0;\n padding-inline-end: var(--base-size-6);\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton > * {\n position: relative;\n z-index: 1;\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton:not(:disabled):is(:hover, :active)::after,\n.NavList__item--level-1.NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']:not(:disabled)::after {\n content: '';\n position: absolute;\n z-index: 0;\n inset-block: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n border-radius: var(--brand-borderRadius-small);\n background-color: var(--brand-color-canvas-subtle);\n pointer-events: none;\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__toggleIcon {\n order: 2;\n margin-inline-start: auto;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4) > .NavList__itemContent {\n padding-block: calc(var(--base-size-8) + var(--base-size-2));\n padding-inline-end: var(--base-size-16);\n}\n\n.NavList__item--level-2 > .NavList__itemContent {\n padding-inline-start: var(--brand-NavList-item-paddingInlineStart-level-2, var(--base-size-24));\n}\n\n.NavList__item--level-3 > .NavList__itemContent {\n padding-inline-start: var(--base-size-40);\n}\n\n.NavList__item--level-4 > .NavList__itemContent {\n padding-inline-start: calc(var(--base-size-48) + var(--base-size-8));\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent {\n min-height: var(--base-size-32);\n padding-block: 0;\n padding-inline: var(--base-size-16);\n}\n\n.NavList__item--leaf.NavList__item--level-2 > .NavList__itemContent {\n padding-inline-start: var(--brand-NavList-alignedLabel-paddingInlineStart, var(--base-size-24));\n}\n\n.NavList__item--leaf.NavList__item--level-3 > .NavList__itemContent {\n padding-inline-start: var(--base-size-40);\n}\n\n.NavList__item--leaf.NavList__item--level-4 > .NavList__itemContent {\n padding-inline-start: calc(var(--base-size-48) + var(--base-size-8));\n}\n\n.NavList__item--leaf.NavList__item--level-5 > .NavList__itemContent {\n padding-inline-start: calc(var(--base-size-64) + var(--base-size-8));\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__toggleIcon {\n order: 1;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__accordionButton {\n min-height: var(--base-size-32);\n margin-block: calc(-1 * var(--base-size-8));\n padding-inline-start: var(--base-size-8);\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__toggleIcon {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: calc(-1 * var(--base-size-8));\n transform: translateY(-50%);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='true']\n .NavList__toggleIcon {\n transform: translateY(-50%) rotate(-180deg);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']\n .NavList__toggleIcon {\n inset-inline-start: calc(-1 * var(--base-size-16));\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4, .NavList__item--level-5)\n > .NavList__itemContent\n .NavList__link {\n order: 2;\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.NavList__list--flat > .NavList__item--leaf > .NavList__itemContent .NavList__link {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: var(--brand-text-letterSpacing-200);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link {\n min-height: var(--base-size-32);\n padding-inline-start: var(--base-size-8);\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__labelArea {\n min-height: calc(var(--base-size-32) - var(--brand-borderWidth-thin));\n margin-block-end: var(--brand-borderWidth-thin);\n padding-inline-start: var(--base-size-6);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false']) {\n background-color: transparent;\n padding-inline-start: var(--base-size-8);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover .NavList__labelArea,\n.NavList__item--leaf:not(.NavList__item--level-1)\n .NavList__link[aria-current]:not([aria-current='false'])\n .NavList__labelArea {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover {\n background-color: transparent;\n padding-inline-start: var(--base-size-8);\n}\n\n[data-color-mode='dark'] .NavList {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .NavList,\n .NavList::before,\n .NavList::after,\n .NavList * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"NavList.module.js","names":[],"sources":["../../src/NavList/NavList.module.css"],"sourcesContent":[".NavList {\n --brand-NavList-label-indent-level-2: 0px;\n --brand-NavList-label-indent-level-3: var(--base-size-16);\n --brand-NavList-label-indent-level-4: var(--base-size-32);\n --brand-NavList-label-indent-level-5: var(--base-size-48);\n --brand-NavList-item-paddingInlineStart-base: var(--base-size-24);\n --brand-NavList-control-paddingInlineStart: var(--base-size-8);\n --brand-NavList-label-paddingInlineStart: var(--base-size-6);\n\n box-sizing: border-box;\n font-family: var(--brand-fontStack-sansSerif);\n color: var(--brand-color-text-default);\n padding-inline-start: var(--base-size-16);\n width: 100%;\n}\n\n.NavList__list,\n.NavList__subNav,\n.NavList__groupList {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.NavList__list {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.NavList__list--flat,\n.NavList__groupList {\n --brand-NavList-item-paddingInlineStart-base: var(--base-size-2);\n}\n\n.NavList__groupList .NavList__subNav .NavList__item--leaf {\n --brand-NavList-item-paddingInlineStart-base: 0px;\n --brand-NavList-label-paddingInlineStart: var(--base-size-8);\n}\n\n.NavList__item,\n.NavList__group {\n position: relative;\n}\n\n.NavList__list:not(.NavList__list--flat) > :is(.NavList__item, .NavList__group) + :is(.NavList__item, .NavList__group) {\n background-image: repeating-linear-gradient(\n to right,\n var(--brand-color-border-muted) 0 var(--base-size-2),\n transparent var(--base-size-2) var(--base-size-4)\n );\n background-repeat: no-repeat;\n background-size: 100% var(--brand-borderWidth-thin);\n background-position: top left;\n}\n\n.NavList__groupTitle {\n margin: 0;\n padding: var(--base-size-24) var(--base-size-16) var(--base-size-16);\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-200);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: var(--brand-text-letterSpacing-200);\n}\n\n.NavList__groupList {\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-block-end: var(--base-size-16);\n}\n\n.NavList__itemContent {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n min-width: 0;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4) > .NavList__itemContent {\n padding-block: calc(var(--base-size-8) + var(--base-size-2));\n padding-inline-end: var(--base-size-16);\n}\n\n.NavList__item--level-2 {\n --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-2);\n}\n\n.NavList__item--level-3 {\n --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-3);\n}\n\n.NavList__item--level-4 {\n --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-4);\n}\n\n.NavList__item--level-5 {\n --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-5);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent {\n min-height: var(--base-size-32);\n padding-block: 0;\n padding-inline-end: var(--base-size-16);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4, .NavList__item--level-5)\n > .NavList__itemContent {\n padding-inline-start: calc(\n var(--brand-NavList-item-paddingInlineStart-base) + var(--brand-NavList-item-label-indent)\n );\n}\n\n.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent :is(.NavList__link, .NavList__accordionButton) {\n padding-inline-start: var(--brand-NavList-control-paddingInlineStart);\n}\n\n.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent .NavList__labelArea {\n padding-inline-start: var(--brand-NavList-label-paddingInlineStart);\n}\n\n.NavList__link {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n flex: 1 1 auto;\n min-width: 0;\n border-radius: var(--brand-borderRadius-medium);\n padding: 0;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-100);\n letter-spacing: var(--brand-text-letterSpacing-100);\n text-decoration: none !important; /* dotcom override /\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.NavList__accordionButton {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n border: 0;\n background: transparent;\n color: var(--brand-color-text-muted);\n cursor: pointer;\n font-family: inherit;\n text-align: start;\n}\n\n.NavList__link:hover {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__accordionButton:hover {\n color: var(--brand-color-text-default);\n background-color: transparent;\n}\n\n.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent .NavList__accordionButton .NavList__labelArea {\n order: 2;\n min-height: var(--base-size-32);\n}\n\n.NavList__item:not(.NavList__item--level-1)\n > .NavList__itemContent\n .NavList__accordionButton:not(:disabled):hover\n .NavList__labelArea {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--has-current-descendant > .NavList__itemContent .NavList__accordionButton:not(:disabled) {\n color: var(--brand-color-text-default);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']:not(:disabled)\n .NavList__labelArea {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n:is(.NavList__link, .NavList__accordionButton):focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.NavList__subNav :is(.NavList__link, .NavList__accordionButton):focus-visible {\n outline-offset: calc(-1 var(--base-size-2));\n}\n\n.NavList__link[aria-current]:not([aria-current='false']) {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false'])::before {\n content: '';\n position: absolute;\n inset-block: var(--base-size-8);\n inset-inline-start: 0;\n width: var(--base-size-4);\n border-radius: var(--base-size-2);\n background-color: var(--brand-NavList-activeIndicator-color);\n}\n\n.NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']:not(:disabled)::before {\n content: '';\n position: absolute;\n inset-block-start: 50%;\n block-size: var(--base-size-16);\n width: var(--base-size-4);\n border-radius: var(--base-size-2);\n background-color: var(--brand-NavList-activeIndicator-color);\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.NavList__item--level-1.NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']::before {\n inset-inline-start: calc(-1 * var(--base-size-8));\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']::before {\n inset-inline-start: var(--base-size-4);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false'] {\n padding-inline-start: var(--base-size-12);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']\n .NavList__labelArea {\n padding-inline-start: var(--base-size-2);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__link[aria-current]:not([aria-current='false']) {\n padding-inline-start: 0;\n}\n\n.NavList__link--disabled {\n color: var(--brand-color-text-disabled);\n pointer-events: none;\n}\n\n.NavList__accordionButton:disabled {\n color: var(--brand-color-text-disabled);\n cursor: not-allowed;\n}\n\n.NavList__label {\n min-width: 0;\n word-break: break-word;\n}\n\n.NavList__labelArea {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n gap: var(--base-size-8);\n min-width: 0;\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__leadingVisual,\n.NavList__trailingVisual {\n display: inline-flex;\n flex: none;\n color: inherit;\n}\n\n.NavList__trailingVisual {\n margin-inline-start: auto;\n margin-inline-end: var(--base-size-6);\n}\n\n.NavList__toggleIcon {\n flex: none;\n transform-origin: 50% 50%;\n transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.NavList__accordionButton[aria-expanded='true'] .NavList__toggleIcon {\n transform: rotate(-180deg);\n}\n\n.NavList__subNav {\n display: flex;\n flex-direction: column;\n gap: 0;\n margin: 0;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n padding: 0;\n transform: translateY(calc(-1 * var(--base-size-8)));\n visibility: hidden;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n visibility 0s linear var(--brand-animation-duration-fast);\n}\n\n.NavList__subNav--expanded {\n max-height: var(--brand-NavList-subNav-height, none);\n opacity: 1;\n transform: translateY(0);\n visibility: visible;\n transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),\n transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide), visibility 0s linear 0s;\n}\n\n.NavList__subNav[aria-hidden='true'] .NavList__subNav {\n visibility: hidden;\n}\n\n.NavList__item--level-1 > .NavList__itemContent {\n padding: var(--base-size-24) var(--base-size-16) var(--base-size-16);\n}\n\n.NavList__item--level-1.NavList__item--expanded {\n padding-block-end: var(--base-size-16);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__link {\n order: 1;\n font-size: var(--brand-text-size-200);\n font-weight: var(--brand-text-weight-500);\n line-height: var(--brand-text-lineHeight-200);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton {\n color: var(--brand-color-text-default);\n min-height: var(--base-size-32);\n margin-block: calc(-1 * var(--base-size-8));\n padding-inline-start: 0;\n padding-inline-end: var(--base-size-6);\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton > * {\n position: relative;\n z-index: 1;\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__accordionButton:not(:disabled):is(:hover, :active)::after,\n.NavList__item--level-1.NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']:not(:disabled)::after {\n content: '';\n position: absolute;\n z-index: 0;\n inset-block: 0;\n inset-inline-start: 0;\n inset-inline-end: 0;\n border-radius: var(--brand-borderRadius-small);\n background-color: var(--brand-color-canvas-subtle);\n pointer-events: none;\n}\n\n.NavList__item--level-1 > .NavList__itemContent .NavList__toggleIcon {\n order: 2;\n margin-inline-start: auto;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__toggleIcon {\n order: 1;\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__accordionButton {\n min-height: var(--base-size-32);\n margin-block: calc(-1 * var(--base-size-8));\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__toggleIcon {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: calc(-1 * var(--brand-NavList-control-paddingInlineStart));\n transform: translateY(-50%);\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='true']\n .NavList__toggleIcon {\n transform: translateY(-50%) rotate(-180deg);\n}\n\n.NavList__item:not(.NavList__item--level-1).NavList__item--has-current-descendant\n > .NavList__itemContent\n .NavList__accordionButton[aria-expanded='false']\n .NavList__toggleIcon {\n inset-inline-start: calc(-1 * var(--base-size-16));\n}\n\n.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4, .NavList__item--level-5)\n > .NavList__itemContent\n .NavList__link {\n order: 2;\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.NavList__list--flat > .NavList__item--leaf > .NavList__itemContent .NavList__link {\n font-size: var(--brand-text-size-200);\n line-height: var(--brand-text-lineHeight-200);\n letter-spacing: var(--brand-text-letterSpacing-200);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link {\n min-height: var(--base-size-32);\n border-radius: var(--brand-borderRadius-small);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__labelArea {\n min-height: calc(var(--base-size-32) - var(--brand-borderWidth-thin));\n margin-block-end: var(--brand-borderWidth-thin);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false']) {\n background-color: transparent;\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover .NavList__labelArea,\n.NavList__item--leaf:not(.NavList__item--level-1)\n .NavList__link[aria-current]:not([aria-current='false'])\n .NavList__labelArea {\n background-color: var(--brand-color-canvas-subtle);\n}\n\n.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover {\n background-color: transparent;\n}\n\n[data-color-mode='dark'] .NavList {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .NavList,\n .NavList::before,\n .NavList::after,\n .NavList * {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/forms/Checkbox/Checkbox.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type CheckboxProps = {
     /**
      * Apply indeterminate visual appearance to the checkbox

package/esm/forms/Checkbox/Checkbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;~~AAMvD~~,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}
1	+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvD,OAAO,2GAA2G,CAAA;AAIlH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}

package/esm/forms/Checkbox/Checkbox.js CHANGED Viewed

@@ -2,6 +2,7 @@ import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
 import r from "../../hooks/useIsomorphicLayoutEffect.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import i from "./Checkbox.module.js";
 import { forwardRef as a, useCallback as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/esm/forms/Checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n /*\n Apply indeterminate visual appearance to the checkbox\n /\n indeterminate?: boolean\n /\n Apply inactive visual appearance to the checkbox\n /\n disabled?: boolean\n /\n Indicates whether the checkbox must be checked\n /\n required?: boolean\n /\n Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n /\n validationStatus?: FormValidationStatus\n /\n A unique value that is never shown to the user.\n * Used during form submission and to identify which checkbox inputs are selected\n */\n value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n {\n checked,\n className,\n indeterminate,\n disabled,\n id,\n onChange,\n required,\n validationStatus,\n value,\n ...rest\n }: CheckboxProps,\n ref,\n): ReactElement => {\n const inputRef = useProvidedRefOrCreate<HTMLInputElement \| null>(ref \|\| null)\n const uniqueId = useId(id)\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate \|\| false\n }\n }, [indeterminate, checked, inputRef])\n\n const onClick = useCallback(() => {\n if (!disabled && inputRef.current) {\n inputRef.current.click()\n }\n }, [disabled, inputRef])\n\n return (\n <span className={styles['Checkbox-wrapper']}>\n <input\n id={uniqueId}\n aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n aria-required={required ? 'true' : 'false'}\n aria-checked={indeterminate ? 'mixed' : checked}\n checked={indeterminate ? false : checked}\n className={clsx(styles['Checkbox-input'])}\n disabled={disabled}\n name={value}\n onChange={onChange}\n ref={inputRef}\n required={required}\n type=\"checkbox\"\n value={value}\n {...rest}\n />\n <span\n className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n onClick={onClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n {indeterminate ? (\n <svg\n className={clsx(styles['Checkbox-checkmark'])}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n >\n <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n </svg>\n ) : (\n <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n <path\n className={clsx(styles['Checkbox-checkmark-path'])}\n fill=\"none\"\n stroke=\"#000\"\n strokeWidth=\"13\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"10\"\n d=\"M12.1 52.1l24.4 24.4 53-53\"\n />\n </svg>\n )}\n </span>\n </span>\n )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":"~~;;;;;;;AAwHA~~,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}
1	+ {"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n /*\n Apply indeterminate visual appearance to the checkbox\n /\n indeterminate?: boolean\n /\n Apply inactive visual appearance to the checkbox\n /\n disabled?: boolean\n /\n Indicates whether the checkbox must be checked\n /\n required?: boolean\n /\n Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n /\n validationStatus?: FormValidationStatus\n /\n A unique value that is never shown to the user.\n * Used during form submission and to identify which checkbox inputs are selected\n */\n value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n {\n checked,\n className,\n indeterminate,\n disabled,\n id,\n onChange,\n required,\n validationStatus,\n value,\n ...rest\n }: CheckboxProps,\n ref,\n): ReactElement => {\n const inputRef = useProvidedRefOrCreate<HTMLInputElement \| null>(ref \|\| null)\n const uniqueId = useId(id)\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate \|\| false\n }\n }, [indeterminate, checked, inputRef])\n\n const onClick = useCallback(() => {\n if (!disabled && inputRef.current) {\n inputRef.current.click()\n }\n }, [disabled, inputRef])\n\n return (\n <span className={styles['Checkbox-wrapper']}>\n <input\n id={uniqueId}\n aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n aria-required={required ? 'true' : 'false'}\n aria-checked={indeterminate ? 'mixed' : checked}\n checked={indeterminate ? false : checked}\n className={clsx(styles['Checkbox-input'])}\n disabled={disabled}\n name={value}\n onChange={onChange}\n ref={inputRef}\n required={required}\n type=\"checkbox\"\n value={value}\n {...rest}\n />\n <span\n className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n onClick={onClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n {indeterminate ? (\n <svg\n className={clsx(styles['Checkbox-checkmark'])}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n >\n <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n </svg>\n ) : (\n <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n <path\n className={clsx(styles['Checkbox-checkmark-path'])}\n fill=\"none\"\n stroke=\"#000\"\n strokeWidth=\"13\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeMiterlimit=\"10\"\n d=\"M12.1 52.1l24.4 24.4 53-53\"\n />\n </svg>\n )}\n </span>\n </span>\n )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;;AAyHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}

package/esm/forms/FormControl/FormControl.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormValidationStatus, FormInputSizes } from '../';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type FormControlProps = BaseProps<HTMLElement> & {
     /**
      * Apply a decorative border to the form control.

package/esm/forms/FormControl/FormControl.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;~~AAW7D~~,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}
1	+ {"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAS7D,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}

package/esm/forms/FormControl/FormControl.js CHANGED Viewed

@@ -2,6 +2,7 @@ import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
 import { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import { Checkbox as a } from "../Checkbox/Checkbox.js";
 import { Textarea as o } from "../Textarea/Textarea.js";
 import { TextInput as s } from "../TextInput/TextInput.js";

package/esm/forms/FormControl/FormControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n /*\n Apply a decorative border to the form control.\n /\n hasBorder?: boolean\n /\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n A unique identifier for the form control.\n * This is used to associate the form control with its associated label.\n * If an id is not provided, a unique id will be generated.\n /\n id?: string\n /\n Applies required styling to the label and input.\n /\n required?: boolean\n /\n Alternative sizes for inputs and labels.\n /\n size?: FormInputSizes\n /\n Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n /\n validationStatus?: FormValidationStatus\n}\n\n/\n The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n /\n\nconst Root = ({\n children,\n className,\n hasBorder,\n fullWidth,\n id,\n required,\n size = 'medium',\n validationStatus,\n ...rest\n}: PropsWithChildren<FormControlProps>) => {\n const uniqueId = useId(id)\n const childrenArr = React.Children.toArray(children)\n\n const isInlineControl = childrenArr.some(\n child => React.isValidElement(child) && (child.type === Checkbox \|\| child.type === Radio),\n )\n\n const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n const containsValidation = childrenArr.some(\n child => React.isValidElement(child) && child.type === FormControlValidation,\n )\n\n return (\n <section\n id={`FormControl--${uniqueId}`}\n className={clsx(\n styles.FormControl,\n fullWidth && styles[`FormControl--fullWidth`],\n isInlineControl && styles['FormControl--checkbox'],\n hasBorder && styles['FormControl--border'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child\n\n const describedBy =\n [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n .filter(Boolean)\n .join(' ') \|\| undefined\n\n if (child.type === TextInput) {\n const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Textarea) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Select) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Checkbox) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n return React.cloneElement(element, {\n className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Radio) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n id: uniqueId,\n name: element.props.name,\n required: element.props.required \|\| required,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === FormControlLabel) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n htmlFor: uniqueId,\n children: element.props.children,\n required,\n validationStatus,\n size,\n showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n })\n }\n\n if (child.type === FormControlValidation) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n validationStatus,\n id: `${uniqueId}-validation`,\n })\n }\n\n if (child.type === FormControlHint) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n return React.cloneElement(element, {\n id: `${uniqueId}-hint`,\n })\n }\n\n return child\n })}\n </section>\n )\n}\n\ntype FormControlLabelProps = {\n htmlFor?: string\n required?: boolean\n showRequiredIndicator?: boolean\n size?: FormInputSizes\n validationStatus?: FormValidationStatus\n visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n children,\n className,\n htmlFor,\n required,\n showRequiredIndicator = true,\n size = 'medium',\n validationStatus,\n visuallyHidden,\n ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n return (\n <label\n htmlFor={htmlFor}\n className={clsx(\n styles['FormControl-label'],\n validationStatus && styles[`FormControl-label--${validationStatus}`],\n styles[`FormControl-label--${size}`],\n visuallyHidden && styles['FormControl-label--visually-hidden'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n return React.cloneElement(child, {\n className: clsx(styles['FormControl--visible'], child.props.className),\n })\n }\n return child\n })}\n\n {required && showRequiredIndicator && (\n <span className={styles['FormControl-label-required']} aria-hidden>\n {' '}\n \n </span>\n )}\n </label>\n )\n}\n\ntype FormControlValidationProps = {\n children: string\n validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n return (\n <Text\n as=\"span\"\n size=\"100\"\n className={clsx(\n styles['FormControl-validation'],\n validationStatus && styles['FormControl-validation--animate-in'],\n validationStatus && styles[`FormControl-validation--${validationStatus}`],\n className,\n )}\n {...props}\n >\n {validationStatus === 'error' && (\n <span className={styles['FormControl-validation-error-icon']}>\n <AlertFillIcon />\n </span>\n )}\n {validationStatus === 'success' && (\n <span className={styles['FormControl-validation-success-icon']}>\n <CheckCircleFillIcon />\n </span>\n )}\n {children}\n </Text>\n )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/*\n FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n Label: FormControlLabel,\n Validation: FormControlValidation,\n Hint: FormControlHint,\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n /*\n Apply a decorative border to the form control.\n /\n hasBorder?: boolean\n /\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n A unique identifier for the form control.\n * This is used to associate the form control with its associated label.\n * If an id is not provided, a unique id will be generated.\n /\n id?: string\n /\n Applies required styling to the label and input.\n /\n required?: boolean\n /\n Alternative sizes for inputs and labels.\n /\n size?: FormInputSizes\n /\n Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n /\n validationStatus?: FormValidationStatus\n}\n\n/\n The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n /\n\nconst Root = ({\n children,\n className,\n hasBorder,\n fullWidth,\n id,\n required,\n size = 'medium',\n validationStatus,\n ...rest\n}: PropsWithChildren<FormControlProps>) => {\n const uniqueId = useId(id)\n const childrenArr = React.Children.toArray(children)\n\n const isInlineControl = childrenArr.some(\n child => React.isValidElement(child) && (child.type === Checkbox \|\| child.type === Radio),\n )\n\n const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n const containsValidation = childrenArr.some(\n child => React.isValidElement(child) && child.type === FormControlValidation,\n )\n\n return (\n <section\n id={`FormControl--${uniqueId}`}\n className={clsx(\n styles.FormControl,\n fullWidth && styles[`FormControl--fullWidth`],\n isInlineControl && styles['FormControl--checkbox'],\n hasBorder && styles['FormControl--border'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (!React.isValidElement(child)) return child\n\n const describedBy =\n [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n .filter(Boolean)\n .join(' ') \|\| undefined\n\n if (child.type === TextInput) {\n const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Textarea) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Select) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n return React.cloneElement(element, {\n className: clsx(element.props.className),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n fullWidth,\n size,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Checkbox) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n return React.cloneElement(element, {\n className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n id: uniqueId,\n name: element.props.name \|\| uniqueId,\n required: element.props.required \|\| required,\n validationStatus: element.props.validationStatus \|\| validationStatus,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === Radio) {\n const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n id: uniqueId,\n name: element.props.name,\n required: element.props.required \|\| required,\n 'aria-describedby': describedBy,\n })\n }\n\n if (child.type === FormControlLabel) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n htmlFor: uniqueId,\n children: element.props.children,\n required,\n validationStatus,\n size,\n showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n })\n }\n\n if (child.type === FormControlValidation) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n return React.cloneElement(element, {\n className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n validationStatus,\n id: `${uniqueId}-validation`,\n })\n }\n\n if (child.type === FormControlHint) {\n const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n return React.cloneElement(element, {\n id: `${uniqueId}-hint`,\n })\n }\n\n return child\n })}\n </section>\n )\n}\n\ntype FormControlLabelProps = {\n htmlFor?: string\n required?: boolean\n showRequiredIndicator?: boolean\n size?: FormInputSizes\n validationStatus?: FormValidationStatus\n visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n children,\n className,\n htmlFor,\n required,\n showRequiredIndicator = true,\n size = 'medium',\n validationStatus,\n visuallyHidden,\n ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n return (\n <label\n htmlFor={htmlFor}\n className={clsx(\n styles['FormControl-label'],\n validationStatus && styles[`FormControl-label--${validationStatus}`],\n styles[`FormControl-label--${size}`],\n visuallyHidden && styles['FormControl-label--visually-hidden'],\n className,\n )}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n return React.cloneElement(child, {\n className: clsx(styles['FormControl--visible'], child.props.className),\n })\n }\n return child\n })}\n\n {required && showRequiredIndicator && (\n <span className={styles['FormControl-label-required']} aria-hidden>\n {' '}\n \n </span>\n )}\n </label>\n )\n}\n\ntype FormControlValidationProps = {\n children: string\n validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n return (\n <Text\n as=\"span\"\n size=\"100\"\n className={clsx(\n styles['FormControl-validation'],\n validationStatus && styles['FormControl-validation--animate-in'],\n validationStatus && styles[`FormControl-validation--${validationStatus}`],\n className,\n )}\n {...props}\n >\n {validationStatus === 'error' && (\n <span className={styles['FormControl-validation-error-icon']}>\n <AlertFillIcon />\n </span>\n )}\n {validationStatus === 'success' && (\n <span className={styles['FormControl-validation-success-icon']}>\n <CheckCircleFillIcon />\n </span>\n )}\n {children}\n </Text>\n )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/*\n FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n Label: FormControlLabel,\n Validation: FormControlValidation,\n Hint: FormControlHint,\n})\n"],"mappings":"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"}

package/esm/forms/Radio/Radio.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes } from 'react';
 import type { BaseProps } from '../../component-helpers';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type RadioProps = {
     /**
      * Apply inactive visual appearance to the Radio

package/esm/forms/Radio/Radio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;~~AAItD~~,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}
1	+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/forms/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAKjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAEtD,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsC7B,eAAO,MAAM,KAAK,yFAA4B,CAAA"}

package/esm/forms/Radio/Radio.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import r from "./Radio.module.js";
 import { forwardRef as i, useCallback as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";

package/esm/forms/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","names":[],"sources":["../../../src/forms/Radio/Radio.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport type {BaseProps} from '../../component-helpers'\n\nimport styles from './Radio.module.css'\n\nexport type RadioProps = {\n /*\n Apply inactive visual appearance to the Radio\n /\n disabled?: boolean\n /\n Indicates whether the Radio must be checked\n /\n required?: boolean\n /\n A unique value that is never shown to the user.\n * Used during form submission and to identify which Radio inputs are selected\n */\n value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n BaseProps<HTMLInputElement>\n\nconst RadioInternal = (\n {checked, className, disabled, id, onChange, required, value, ...rest}: RadioProps,\n ref,\n): ReactElement => {\n const inputRef = useProvidedRefOrCreate<HTMLInputElement \| null>(ref \|\| null)\n const uniqueId = useId(id)\n\n const onClick = useCallback(() => {\n if (!disabled && inputRef.current) {\n inputRef.current.click()\n }\n }, [disabled, inputRef])\n\n return (\n <span className={styles['Radio-wrapper']}>\n <input\n id={uniqueId}\n aria-checked={checked ? 'true' : 'false'}\n checked={checked}\n className={clsx(styles['Radio-input'])}\n disabled={disabled}\n name={value}\n onChange={onChange}\n ref={inputRef}\n required={required}\n type=\"radio\"\n value={value}\n {...rest}\n />\n <span className={clsx(styles.Radio, className)} onClick={onClick} tabIndex={-1} aria-hidden=\"true\">\n <span className={styles['Radio-dot']} />\n </span>\n </span>\n )\n}\n\nexport const Radio = forwardRef(RadioInternal)\n"],"mappings":"~~;;;;;;AA8DA~~,IAAa,IAAQ,GAnCnB,EAAC,YAAS,cAAW,aAAU,OAAI,aAAU,aAAU,UAAO,GAAG,KACjE,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG,EAEpB,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,eAAe;GAC5B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,EAAU;GAAW;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,cAAgB,CAAA;GACnC,CAAA,CACF;;EAImC"}
1	+ {"version":3,"file":"Radio.js","names":[],"sources":["../../../src/forms/Radio/Radio.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nimport type {BaseProps} from '../../component-helpers'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Radio.module.css'\n\nexport type RadioProps = {\n /*\n Apply inactive visual appearance to the Radio\n /\n disabled?: boolean\n /\n Indicates whether the Radio must be checked\n /\n required?: boolean\n /\n A unique value that is never shown to the user.\n * Used during form submission and to identify which Radio inputs are selected\n */\n value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n BaseProps<HTMLInputElement>\n\nconst RadioInternal = (\n {checked, className, disabled, id, onChange, required, value, ...rest}: RadioProps,\n ref,\n): ReactElement => {\n const inputRef = useProvidedRefOrCreate<HTMLInputElement \| null>(ref \|\| null)\n const uniqueId = useId(id)\n\n const onClick = useCallback(() => {\n if (!disabled && inputRef.current) {\n inputRef.current.click()\n }\n }, [disabled, inputRef])\n\n return (\n <span className={styles['Radio-wrapper']}>\n <input\n id={uniqueId}\n aria-checked={checked ? 'true' : 'false'}\n checked={checked}\n className={clsx(styles['Radio-input'])}\n disabled={disabled}\n name={value}\n onChange={onChange}\n ref={inputRef}\n required={required}\n type=\"radio\"\n value={value}\n {...rest}\n />\n <span className={clsx(styles.Radio, className)} onClick={onClick} tabIndex={-1} aria-hidden=\"true\">\n <span className={styles['Radio-dot']} />\n </span>\n </span>\n )\n}\n\nexport const Radio = forwardRef(RadioInternal)\n"],"mappings":";;;;;;;AA+DA,IAAa,IAAQ,GAnCnB,EAAC,YAAS,cAAW,aAAU,OAAI,aAAU,aAAU,UAAO,GAAG,KACjE,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG,EAEpB,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,IAAU,SAAS;GACxB;GACT,WAAW,EAAK,EAAO,eAAe;GAC5B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAO,OAAO,EAAU;GAAW;GAAS,UAAU;GAAI,eAAY;aAC1F,kBAAC,QAAD,EAAM,WAAW,EAAO,cAAgB,CAAA;GACnC,CAAA,CACF;;EAImC"}

package/esm/forms/Select/Select.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export type SelectProps = {
     /**
      * Applies full width styling.

package/esm/forms/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;~~AAIvE~~,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC5D,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAmD9B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAU/D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAUjE;;GAEG;AACH,eAAO,MAAM,MAAM;2CA9ByB,WAAW;6CAmBT,aAAa;CAczD,CAAA"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAEvE,OAAO,2GAA2G,CAAA;AAGlH,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GAC5D,SAAS,CAAC,iBAAiB,CAAC,CAAA;AAmD9B,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAU/D,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAUjE;;GAEG;AACH,eAAO,MAAM,MAAM;2CA9ByB,WAAW;6CAmBT,aAAa;CAczD,CAAA"}

package/esm/forms/Select/Select.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import t from "./Select.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/esm/forms/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","names":[],"sources":["../../../src/forms/Select/Select.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport styles from './Select.module.css'\n\nexport type SelectProps = {\n /*\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n Applies a required attribute to the input\n /\n required?: boolean\n /\n Applies alternative sizing to the input\n /\n size?: FormInputSizes\n /\n Placeholder text to display when no value is selected\n /\n placeholder?: string\n /\n \n /\n validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> &\n BaseProps<HTMLSelectElement>\n\nconst _SelectRoot = (\n {\n children,\n className,\n disabled,\n fullWidth = false,\n placeholder,\n size = 'medium',\n validationStatus,\n ...rest\n }: SelectProps,\n ref,\n) => {\n return (\n <span\n className={clsx(\n styles['Select-wrapper'],\n styles[`Select-wrapper--${size}`],\n fullWidth && styles['Select-wrapper--fullWidth'],\n validationStatus && styles[`Select--${validationStatus}`],\n disabled && styles[`Select-wrapper--disabled`],\n )}\n >\n <select\n aria-invalid={validationStatus === 'error'}\n className={clsx(\n styles.Select,\n styles[`Select--${size}`],\n 'Select',\n fullWidth && styles['Select--fullWidth'],\n className,\n )}\n disabled={disabled}\n ref={ref}\n {...rest}\n >\n {placeholder && (\n <option value=\"\" disabled={disabled}>\n {placeholder}\n </option>\n )}\n {children}\n </select>\n </span>\n )\n}\n\nconst SelectRoot = forwardRef(_SelectRoot)\n\nexport type OptionProps = {\n value: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>\n\nconst Option = ({children, value, ...rest}: OptionProps) => {\n return (\n <option value={value} {...rest}>\n {children}\n </option>\n )\n}\n\nexport type OptGroupProps = {\n /\n Specifies that an option-group should be disabled\n /\n disabled?: string\n /\n Specifies a label for an option-group\n /\n label: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>\n\nconst OptGroup = ({children, label, ...rest}: OptGroupProps) => {\n return (\n <optgroup label={label} {...rest}>\n {children}\n </optgroup>\n )\n}\n\n/\n Select\n */\nexport const Select = Object.assign(SelectRoot, {\n Option,\n OptGroup,\n})\n"],"mappings":"~~;;;;AA+EA~~,IAAM,IAAa,GA9CjB,EACE,aACA,cACA,aACA,eAAY,IACZ,gBACA,UAAO,UACP,qBACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,mBACP,EAAO,mBAAmB,MAC1B,KAAa,EAAO,8BACpB,KAAoB,EAAO,WAAW,MACtC,KAAY,EAAO,4BACpB;WAED,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,EACD;EACS;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;GACM,CAAA,EAEV,EACM;;CACJ,CAAA,CAI+B,EAoC7B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;EACM,CAAA;CA4BX,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;EACQ,CAAA;CAUd,CAAC"}
1	+ {"version":3,"file":"Select.js","names":[],"sources":["../../../src/forms/Select/Select.tsx"],"sourcesContent":["import React, {forwardRef} from 'react'\nimport {clsx} from 'clsx'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './Select.module.css'\n\nexport type SelectProps = {\n /*\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n Applies a required attribute to the input\n /\n required?: boolean\n /\n Applies alternative sizing to the input\n /\n size?: FormInputSizes\n /\n Placeholder text to display when no value is selected\n /\n placeholder?: string\n /\n \n /\n validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'> &\n BaseProps<HTMLSelectElement>\n\nconst _SelectRoot = (\n {\n children,\n className,\n disabled,\n fullWidth = false,\n placeholder,\n size = 'medium',\n validationStatus,\n ...rest\n }: SelectProps,\n ref,\n) => {\n return (\n <span\n className={clsx(\n styles['Select-wrapper'],\n styles[`Select-wrapper--${size}`],\n fullWidth && styles['Select-wrapper--fullWidth'],\n validationStatus && styles[`Select--${validationStatus}`],\n disabled && styles[`Select-wrapper--disabled`],\n )}\n >\n <select\n aria-invalid={validationStatus === 'error'}\n className={clsx(\n styles.Select,\n styles[`Select--${size}`],\n 'Select',\n fullWidth && styles['Select--fullWidth'],\n className,\n )}\n disabled={disabled}\n ref={ref}\n {...rest}\n >\n {placeholder && (\n <option value=\"\" disabled={disabled}>\n {placeholder}\n </option>\n )}\n {children}\n </select>\n </span>\n )\n}\n\nconst SelectRoot = forwardRef(_SelectRoot)\n\nexport type OptionProps = {\n value: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptionElement>>\n\nconst Option = ({children, value, ...rest}: OptionProps) => {\n return (\n <option value={value} {...rest}>\n {children}\n </option>\n )\n}\n\nexport type OptGroupProps = {\n /\n Specifies that an option-group should be disabled\n /\n disabled?: string\n /\n Specifies a label for an option-group\n /\n label: string\n} & React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>\n\nconst OptGroup = ({children, label, ...rest}: OptGroupProps) => {\n return (\n <optgroup label={label} {...rest}>\n {children}\n </optgroup>\n )\n}\n\n/\n Select\n */\nexport const Select = Object.assign(SelectRoot, {\n Option,\n OptGroup,\n})\n"],"mappings":";;;;;AAgFA,IAAM,IAAa,GA9CjB,EACE,aACA,cACA,aACA,eAAY,IACZ,gBACA,UAAO,UACP,qBACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,mBACP,EAAO,mBAAmB,MAC1B,KAAa,EAAO,8BACpB,KAAoB,EAAO,WAAW,MACtC,KAAY,EAAO,4BACpB;WAED,kBAAC,UAAD;EACE,gBAAc,MAAqB;EACnC,WAAW,EACT,EAAO,QACP,EAAO,WAAW,MAClB,UACA,KAAa,EAAO,sBACpB,EACD;EACS;EACL;EACL,GAAI;YAXN,CAaG,KACC,kBAAC,UAAD;GAAQ,OAAM;GAAa;aACxB;GACM,CAAA,EAEV,EACM;;CACJ,CAAA,CAI+B,EAoC7B,IAAS,OAAO,OAAO,GAAY;CAC9C,SA/Bc,EAAC,aAAU,UAAO,GAAG,QAEjC,kBAAC,UAAD;EAAe;EAAO,GAAI;EACvB;EACM,CAAA;CA4BX,WAbgB,EAAC,aAAU,UAAO,GAAG,QAEnC,kBAAC,YAAD;EAAiB;EAAO,GAAI;EACzB;EACQ,CAAA;CAUd,CAAC"}

package/esm/forms/TextInput/TextInput.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { BaseProps } from '../../component-helpers';
 import type { FormInputSizes, FormValidationStatus } from '../form-types';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 import type { Icon } from '@primer/octicons-react';
 type VisualType = React.ReactElement | React.ReactNode | Icon;
 export type TextInputProps = {

package/esm/forms/TextInput/TextInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;~~AAIvE~~,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}
1	+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/forms/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,cAAc,EAAE,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAGvE,OAAO,2GAA2G,CAAA;AAElH,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAEhD,KAAK,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;AAE7D,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAA;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC/G;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GACpE,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAkK7B,eAAO,MAAM,SAAS,6FAAgC,CAAA"}

package/esm/forms/TextInput/TextInput.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import e from "../../node_modules/clsx/dist/clsx.js";
 import { useId as t } from "../../hooks/useId.js";
 import { Text as n } from "../../Text/Text.js";
+import '../../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css';/* empty css                                                                                                        */
 import r from "./TextInput.module.js";
 import i, { forwardRef as a, useMemo as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";