npm - @primer/react-brand - Versions diffs - 0.72.0-rc.b7be5b38 → 0.72.0-rc.f273f08b - Mend

@primer/react-brand 0.72.0-rc.b7be5b38 → 0.72.0-rc.f273f08b

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

package/docs/index.md CHANGED Viewed

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.72.0-rc.b7be5b38)
+# Primer Brand docs (v0.72.0-rc.f273f08b)
-These docs are bundled with `@primer/react-brand@0.72.0-rc.b7be5b38` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.72.0-rc.f273f08b` 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/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";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement \| React.ReactNode \| Icon\n\nexport type TextInputProps = {\n /*\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n Removes border\n /\n invisible?: boolean\n /\n Applies non-interactive text to start of input.\n /\n leadingText?: string\n /\n Applies non-interactive iconography to start of input.\n /\n leadingVisual?: VisualType\n /\n Applies monospace styling.\n /\n monospace?: boolean\n /\n Applies alternative sizing to the input\n /\n size?: FormInputSizes\n /\n Applies non-interactive text to end of input.\n /\n trailingText?: string\n /\n Applies non-interactive iconography to end of input.\n /\n trailingVisual?: VisualType\n /\n Constrains the input type to single line inputs.\n /\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'search' \| 'tel' \| 'url' \| 'date' \| 'time' \| 'datetime-local'\n /\n Applies a required attribute to the input\n /\n required?: boolean\n /\n \n */\n validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'type'> &\n BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n {\n className,\n disabled,\n fullWidth = false,\n invisible = false,\n leadingText,\n leadingVisual: LeadingVisual,\n monospace,\n placeholder,\n size = 'medium',\n trailingText,\n trailingVisual: TrailingVisual,\n validationStatus,\n ...rest\n }: TextInputProps,\n ref,\n) => {\n const uniqueId = useId()\n\n const showLeadingText = leadingText && !LeadingVisual\n const showLeadingVisual = LeadingVisual && !leadingText\n const showTrailingText = trailingText && !TrailingVisual\n const showTrailingVisual = TrailingVisual && !trailingText\n\n const leadingTextId = `${uniqueId}-leading-text`\n const leadingVisualId = `${uniqueId}-leading-visual`\n const trailingVisualId = `${uniqueId}-trailing-visual`\n const trailingTextId = `${uniqueId}-trailing-text`\n\n const describedBy = useMemo(() => {\n const elements = [\n {condition: showLeadingText, id: leadingTextId},\n {condition: showLeadingVisual, id: leadingVisualId},\n {condition: showTrailingVisual, id: trailingVisualId},\n {condition: showTrailingText, id: trailingTextId},\n ]\n\n return elements\n .filter(({condition}) => condition)\n .map(({id}) => id)\n .join(' ')\n }, [\n showLeadingText,\n showLeadingVisual,\n showTrailingVisual,\n showTrailingText,\n leadingTextId,\n leadingVisualId,\n trailingVisualId,\n trailingTextId,\n ])\n\n return (\n <span\n className={clsx(\n styles['TextInput-wrapper'],\n styles[`TextInput-wrapper--${size}`],\n fullWidth && styles['TextInput-wrapper--fullWidth'],\n invisible && styles['TextInput-wrapper--invisible'],\n disabled && styles['TextInput-wrapper--disabled'],\n monospace && styles['TextInput-wrapper--monospace'],\n validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n )}\n >\n {showLeadingText && (\n <span\n className={clsx(\n styles['TextInput-leading-text'],\n styles[`TextInput-leading-text--${size}`],\n disabled && styles['TextInput-leading-text--disabled'],\n validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n )}\n >\n <Text\n size={size === 'large' ? '200' : '100'}\n as=\"span\"\n className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n id={leadingTextId}\n >\n {leadingText}\n </Text>\n </span>\n )}\n {showLeadingVisual && (\n <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n {LeadingVisual &&\n React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n ? React.cloneElement(LeadingVisual, {\n className: clsx(\n styles['TextInput-leading-visual-icon'],\n styles[`TextInput-leading-visual-icon--${size}`],\n ),\n width: size === 'large' ? 20 : 16,\n height: size === 'large' ? 20 : 16,\n id: leadingVisualId,\n })\n : null}\n </span>\n )}\n <input\n type=\"text\"\n ref={ref}\n className={clsx(\n styles.TextInput,\n 'TextInput',\n styles[`TextInput--${size}`],\n fullWidth && styles['TextInput--fullWidth'],\n LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n validationStatus && styles[`TextInput--${validationStatus}`],\n leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n className,\n )}\n placeholder={placeholder}\n disabled={disabled}\n aria-invalid={validationStatus === 'error'}\n aria-describedby={describedBy \|\| undefined}\n {...rest}\n />\n {showTrailingVisual && (\n <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n {TrailingVisual &&\n React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n ? React.cloneElement(TrailingVisual, {\n className: clsx(\n styles['TextInput-trailing-visual-icon'],\n styles[`TextInput-trailing-visual-icon--${size}`],\n ),\n width: size === 'large' ? 20 : 16,\n height: size === 'large' ? 20 : 16,\n id: trailingVisualId,\n })\n : null}\n </span>\n )}\n {showTrailingText && (\n <span\n className={clsx(\n styles['TextInput-trailing-text'],\n styles[`TextInput-trailing-text--${size}`],\n disabled && styles['TextInput-trailing-text--disabled'],\n validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n )}\n >\n <Text\n size={size === 'large' ? '200' : '100'}\n as=\"span\"\n className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n id={trailingTextId}\n >\n {trailingText}\n </Text>\n </span>\n )}\n </span>\n )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"~~;;;;;;AA6NA~~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"}
1	+ {"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/forms/TextInput/TextInput.tsx"],"sourcesContent":["import React, {forwardRef, useMemo} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormInputSizes, FormValidationStatus} from '../form-types'\nimport {Text} from '../../Text'\n\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css'\nimport styles from './TextInput.module.css'\nimport type {Icon} from '@primer/octicons-react'\n\ntype VisualType = React.ReactElement \| React.ReactNode \| Icon\n\nexport type TextInputProps = {\n /*\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n Removes border\n /\n invisible?: boolean\n /\n Applies non-interactive text to start of input.\n /\n leadingText?: string\n /\n Applies non-interactive iconography to start of input.\n /\n leadingVisual?: VisualType\n /\n Applies monospace styling.\n /\n monospace?: boolean\n /\n Applies alternative sizing to the input\n /\n size?: FormInputSizes\n /\n Applies non-interactive text to end of input.\n /\n trailingText?: string\n /\n Applies non-interactive iconography to end of input.\n /\n trailingVisual?: VisualType\n /\n Constrains the input type to single line inputs.\n /\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'search' \| 'tel' \| 'url' \| 'date' \| 'time' \| 'datetime-local'\n /\n Applies a required attribute to the input\n /\n required?: boolean\n /\n \n */\n validationStatus?: FormValidationStatus\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'type'> &\n BaseProps<HTMLInputElement>\n\nconst TextInputInternal = (\n {\n className,\n disabled,\n fullWidth = false,\n invisible = false,\n leadingText,\n leadingVisual: LeadingVisual,\n monospace,\n placeholder,\n size = 'medium',\n trailingText,\n trailingVisual: TrailingVisual,\n validationStatus,\n ...rest\n }: TextInputProps,\n ref,\n) => {\n const uniqueId = useId()\n\n const showLeadingText = leadingText && !LeadingVisual\n const showLeadingVisual = LeadingVisual && !leadingText\n const showTrailingText = trailingText && !TrailingVisual\n const showTrailingVisual = TrailingVisual && !trailingText\n\n const leadingTextId = `${uniqueId}-leading-text`\n const leadingVisualId = `${uniqueId}-leading-visual`\n const trailingVisualId = `${uniqueId}-trailing-visual`\n const trailingTextId = `${uniqueId}-trailing-text`\n\n const describedBy = useMemo(() => {\n const elements = [\n {condition: showLeadingText, id: leadingTextId},\n {condition: showLeadingVisual, id: leadingVisualId},\n {condition: showTrailingVisual, id: trailingVisualId},\n {condition: showTrailingText, id: trailingTextId},\n ]\n\n return elements\n .filter(({condition}) => condition)\n .map(({id}) => id)\n .join(' ')\n }, [\n showLeadingText,\n showLeadingVisual,\n showTrailingVisual,\n showTrailingText,\n leadingTextId,\n leadingVisualId,\n trailingVisualId,\n trailingTextId,\n ])\n\n return (\n <span\n className={clsx(\n styles['TextInput-wrapper'],\n styles[`TextInput-wrapper--${size}`],\n fullWidth && styles['TextInput-wrapper--fullWidth'],\n invisible && styles['TextInput-wrapper--invisible'],\n disabled && styles['TextInput-wrapper--disabled'],\n monospace && styles['TextInput-wrapper--monospace'],\n validationStatus && styles[`TextInput-wrapper--${validationStatus}`],\n )}\n >\n {showLeadingText && (\n <span\n className={clsx(\n styles['TextInput-leading-text'],\n styles[`TextInput-leading-text--${size}`],\n disabled && styles['TextInput-leading-text--disabled'],\n validationStatus && styles[`TextInput-leading-text--${validationStatus}`],\n )}\n >\n <Text\n size={size === 'large' ? '200' : '100'}\n as=\"span\"\n className={clsx(styles['TextInput-leading-text-inner'], styles[`TextInput-leading-text-inner--${size}`])}\n id={leadingTextId}\n >\n {leadingText}\n </Text>\n </span>\n )}\n {showLeadingVisual && (\n <span className={clsx(styles['TextInput-leading-visual'], styles[`TextInput-leading-visual--${size}`])}>\n {LeadingVisual &&\n React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(LeadingVisual)\n ? React.cloneElement(LeadingVisual, {\n className: clsx(\n styles['TextInput-leading-visual-icon'],\n styles[`TextInput-leading-visual-icon--${size}`],\n ),\n width: size === 'large' ? 20 : 16,\n height: size === 'large' ? 20 : 16,\n id: leadingVisualId,\n })\n : null}\n </span>\n )}\n <input\n type=\"text\"\n ref={ref}\n className={clsx(\n styles.TextInput,\n 'TextInput',\n styles[`TextInput--${size}`],\n fullWidth && styles['TextInput--fullWidth'],\n LeadingVisual && styles[`TextInput--has-leading-visual--${size}`],\n TrailingVisual && styles[`TextInput--has-trailing-visual--${size}`],\n validationStatus && styles[`TextInput--${validationStatus}`],\n leadingText && !LeadingVisual && styles['TextInput--has-leading-text'],\n trailingText && !TrailingVisual && styles['TextInput--has-trailing-text'],\n className,\n )}\n placeholder={placeholder}\n disabled={disabled}\n aria-invalid={validationStatus === 'error'}\n aria-describedby={describedBy \|\| undefined}\n {...rest}\n />\n {showTrailingVisual && (\n <span className={clsx(styles['TextInput-trailing-visual'], styles[`TextInput-trailing-visual--${size}`])}>\n {TrailingVisual &&\n React.isValidElement<{className?: string; width?: number; height?: number; id?: string}>(TrailingVisual)\n ? React.cloneElement(TrailingVisual, {\n className: clsx(\n styles['TextInput-trailing-visual-icon'],\n styles[`TextInput-trailing-visual-icon--${size}`],\n ),\n width: size === 'large' ? 20 : 16,\n height: size === 'large' ? 20 : 16,\n id: trailingVisualId,\n })\n : null}\n </span>\n )}\n {showTrailingText && (\n <span\n className={clsx(\n styles['TextInput-trailing-text'],\n styles[`TextInput-trailing-text--${size}`],\n disabled && styles['TextInput-trailing-text--disabled'],\n validationStatus && styles[`TextInput-trailing-text--${validationStatus}`],\n )}\n >\n <Text\n size={size === 'large' ? '200' : '100'}\n as=\"span\"\n className={clsx(styles['TextInput-trailing-text-inner'], styles[`TextInput-trailing-text-inner--${size}`])}\n id={trailingTextId}\n >\n {trailingText}\n </Text>\n </span>\n )}\n </span>\n )\n}\n\nexport const TextInput = forwardRef(TextInputInternal)\n\nTextInput.displayName = 'TextInput'\n"],"mappings":"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"}

package/esm/forms/Textarea/Textarea.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 declare const DEFAULT_TEXTAREA_ROWS = 7;
 export declare const DEFAULT_TEXTAREA_COLS = 30;
 export declare const DEFAULT_TEXTAREA_RESIZE = "both";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.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~~,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,GACjE,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAiEhC,eAAO,MAAM,QAAQ,4FAAwB,CAAA"}
1	+ {"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/forms/Textarea/Textarea.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,eAAO,MAAM,qBAAqB,IAAI,CAAA;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAA;AACvC,eAAO,MAAM,uBAAuB,SAAS,CAAA;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAA;CACrD,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,GACjE,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAiEhC,eAAO,MAAM,QAAQ,4FAAwB,CAAA"}

package/esm/forms/Textarea/Textarea.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 "./Textarea.module.js";
 import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.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 './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n /*\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n Removes border\n /\n invisible?: boolean\n /\n Applies monospace styling.\n /\n monospace?: boolean\n /\n Applies alternative sizing to the input\n /\n size?: FormInputSizes\n /\n Applies a required attribute to the input\n /\n required?: boolean\n /\n \n /\n validationStatus?: FormValidationStatus\n /\n Allows resizing of the textarea\n */\n resize?: 'none' \| 'both' \| 'horizontal' \| 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n root: 'Textarea',\n get outerContainer() {\n return `${this.root}-outer-container`\n },\n}\n\nconst _Textarea = (\n {\n children,\n className,\n cols = DEFAULT_TEXTAREA_COLS,\n disabled,\n fullWidth = false,\n invisible = false,\n monospace,\n placeholder,\n size = 'medium',\n validationStatus,\n required,\n resize = DEFAULT_TEXTAREA_RESIZE,\n rows = DEFAULT_TEXTAREA_ROWS,\n ...rest\n }: TextareaProps,\n ref,\n) => {\n return (\n <span\n className={clsx(\n styles['Textarea-wrapper'],\n fullWidth && styles['Textarea-wrapper--fullWidth'],\n invisible && styles['Textarea-wrapper--invisible'],\n disabled && styles['Textarea-wrapper--disabled'],\n monospace && styles['Textarea-wrapper--monospace'],\n validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n )}\n data-testid={testIds.outerContainer}\n >\n <textarea\n ref={ref}\n className={clsx(\n styles.Textarea,\n 'Textarea',\n styles[`Textarea--${size}`],\n styles[`Textarea-resize--${resize}`],\n fullWidth && styles['Textarea--fullWidth'],\n validationStatus && styles[`Textarea--${validationStatus}`],\n className,\n )}\n placeholder={placeholder}\n disabled={disabled}\n aria-invalid={validationStatus === 'error'}\n required={required}\n rows={rows}\n cols={cols}\n {...rest}\n >\n {children}\n </textarea>\n </span>\n )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":"~~;;;;;AAQA~~,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EA0DY,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,KACjD;CACD,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,EACD;EACY;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;EACQ,CAAA;CACN,CAAA,CAIkC;AAE7C,EAAS,cAAc"}
1	+ {"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/forms/Textarea/Textarea.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 './Textarea.module.css'\n\nexport const DEFAULT_TEXTAREA_ROWS = 7\nexport const DEFAULT_TEXTAREA_COLS = 30\nexport const DEFAULT_TEXTAREA_RESIZE = 'both'\n\nexport type TextareaProps = {\n /*\n Applies full width styling.\n /\n fullWidth?: boolean\n /\n Removes border\n /\n invisible?: boolean\n /\n Applies monospace styling.\n /\n monospace?: boolean\n /\n Applies alternative sizing to the input\n /\n size?: FormInputSizes\n /\n Applies a required attribute to the input\n /\n required?: boolean\n /\n \n /\n validationStatus?: FormValidationStatus\n /\n Allows resizing of the textarea\n */\n resize?: 'none' \| 'both' \| 'horizontal' \| 'vertical'\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &\n BaseProps<HTMLTextAreaElement>\n\nconst testIds = {\n root: 'Textarea',\n get outerContainer() {\n return `${this.root}-outer-container`\n },\n}\n\nconst _Textarea = (\n {\n children,\n className,\n cols = DEFAULT_TEXTAREA_COLS,\n disabled,\n fullWidth = false,\n invisible = false,\n monospace,\n placeholder,\n size = 'medium',\n validationStatus,\n required,\n resize = DEFAULT_TEXTAREA_RESIZE,\n rows = DEFAULT_TEXTAREA_ROWS,\n ...rest\n }: TextareaProps,\n ref,\n) => {\n return (\n <span\n className={clsx(\n styles['Textarea-wrapper'],\n fullWidth && styles['Textarea-wrapper--fullWidth'],\n invisible && styles['Textarea-wrapper--invisible'],\n disabled && styles['Textarea-wrapper--disabled'],\n monospace && styles['Textarea-wrapper--monospace'],\n validationStatus && styles[`Textarea-wrapper--${validationStatus}`],\n )}\n data-testid={testIds.outerContainer}\n >\n <textarea\n ref={ref}\n className={clsx(\n styles.Textarea,\n 'Textarea',\n styles[`Textarea--${size}`],\n styles[`Textarea-resize--${resize}`],\n fullWidth && styles['Textarea--fullWidth'],\n validationStatus && styles[`Textarea--${validationStatus}`],\n className,\n )}\n placeholder={placeholder}\n disabled={disabled}\n aria-invalid={validationStatus === 'error'}\n required={required}\n rows={rows}\n cols={cols}\n {...rest}\n >\n {children}\n </textarea>\n </span>\n )\n}\n\nexport const Textarea = forwardRef(_Textarea)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;;AASA,IAAa,IAAwB,GACxB,IAAwB,IACxB,IAA0B,QAkCjC,IAAU;CACd,MAAM;CACN,IAAI,iBAAiB;AACnB,SAAO,GAAG,KAAK,KAAK;;CAEvB,EA0DY,IAAW,GAvDtB,EACE,aACA,cACA,UAAA,IACA,aACA,eAAY,IACZ,eAAY,IACZ,cACA,gBACA,UAAO,UACP,qBACA,aACA,YAAS,GACT,UAAA,GACA,GAAG,KAEL,MAGE,kBAAC,QAAD;CACE,WAAW,EACT,EAAO,qBACP,KAAa,EAAO,gCACpB,KAAa,EAAO,gCACpB,KAAY,EAAO,+BACnB,KAAa,EAAO,gCACpB,KAAoB,EAAO,qBAAqB,KACjD;CACD,eAAa,EAAQ;WAErB,kBAAC,YAAD;EACO;EACL,WAAW,EACT,EAAO,UACP,YACA,EAAO,aAAa,MACpB,EAAO,oBAAoB,MAC3B,KAAa,EAAO,wBACpB,KAAoB,EAAO,aAAa,MACxC,EACD;EACY;EACH;EACV,gBAAc,MAAqB;EACzB;EACJ;EACA;EACN,GAAI;EAEH;EACQ,CAAA;CACN,CAAA,CAIkC;AAE7C,EAAS,cAAc"}

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

@@ -1,7 +1,3 @@
-/**
- * Shared form (control) design tokens
- */
-import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css';
 export * from './Checkbox';
 export * from './Textarea';
 export * from './TextInput';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA~~;;GAEG;AACH~~,~~OAAO,2GAA2G,CAAA;AAElH,~~cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA"}

package/esm/packages/design-tokens/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes-C05YPRXo.css ADDED Viewed

@@ -0,0 +1 @@

+ :root,[data-color-mode=light]{--brand-control-color-border-default:var(--base-color-scale-gray-4);--brand-control-color-border-disabled:var(--base-color-scale-gray-2);--brand-control-color-canvas-disabled:var(--base-color-scale-gray-1);--brand-control-color-fg-default:var(--brand-color-text-default);--brand-control-color-fg-disabled:var(--base-color-scale-gray-4);--brand-control-color-focus:var(--base-color-scale-blue-6);--brand-control-checkbox-bg-default:var(--base-color-scale-white-0);--brand-control-checkbox-bg-hover:var(--brand-color-canvas-subtle);--brand-control-checkbox-bg-checked:var(--base-color-scale-green-6);--brand-control-checkbox-bg-checked-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%);--brand-control-checkbox-bg-indeterminate:var(--base-color-scale-green-6);--brand-control-checkbox-bg-indeterminate-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%);--brand-control-checkbox-bg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #fff 65%);--brand-control-checkbox-fg-checked:var(--base-color-scale-white-0);--brand-control-checkbox-fg-checked-disabled:var(--base-color-scale-white-0);--brand-control-checkbox-border-default:var(--base-color-scale-gray-4);--brand-control-checkbox-border-hover:var(--base-color-scale-gray-4);--brand-control-checkbox-border-checked:var(--base-color-scale-green-6);--brand-control-checkbox-border-checked-hover:var(--brand-color-text-emphasized);--brand-control-checkbox-border-indeterminate:var(--base-color-scale-green-6);--brand-control-checkbox-border-indeterminate-hover:var(--brand-color-text-emphasized);--brand-control-checkbox-border-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #fff 65%);--brand-control-checkbox-border-unchecked-disabled:var(--base-color-scale-gray-1);--brand-control-radio-bg-default:var(--base-color-scale-white-0);--brand-control-radio-bg-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-checked:var(--base-color-scale-white-0);--brand-control-radio-bg-checked-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-disabled:var(--brand-color-canvas-default);--brand-control-radio-border-default:var(--brand-control-color-border-default);--brand-control-radio-border-hover:var(--base-color-scale-gray-4);--brand-control-radio-border-checked:var(--brand-control-color-border-default);--brand-control-radio-border-checked-hover:var(--brand-control-color-border-default);--brand-control-radio-border-disabled:var(--base-color-scale-gray-4);--brand-control-radio-dot-default:var(--base-color-scale-black-0);--brand-control-radio-dot-checked:var(--base-color-scale-green-6);--brand-control-radio-dot-checked-hover:color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%)}[data-color-mode=dark]{--brand-control-color-border-default:var(--base-color-scale-gray-4);--brand-control-color-border-disabled:var(--base-color-scale-gray-5);--brand-control-color-canvas-disabled:var(--base-color-scale-gray-8);--brand-control-color-fg-default:var(--brand-color-text-default);--brand-control-color-fg-disabled:var(--base-color-scale-gray-5);--brand-control-color-focus:var(--base-color-scale-blue-2);--brand-control-checkbox-bg-default:var(--base-color-scale-gray-7);--brand-control-checkbox-bg-hover:var(--brand-color-canvas-subtle);--brand-control-checkbox-bg-checked:var(--base-color-scale-green-5);--brand-control-checkbox-bg-checked-hover:#309a4d;--brand-control-checkbox-bg-indeterminate:var(--base-color-scale-green-5);--brand-control-checkbox-bg-indeterminate-hover:#309a4d;--brand-control-checkbox-bg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);--brand-control-checkbox-fg-checked:var(--base-color-scale-white-0);--brand-control-checkbox-fg-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-5), #000 20%);--brand-control-checkbox-border-default:var(--base-color-scale-gray-4);--brand-control-checkbox-border-hover:var(--base-color-scale-gray-5);--brand-control-checkbox-border-checked:#077726;--brand-control-checkbox-border-checked-hover:#0000001f;--brand-control-checkbox-border-indeterminate:#077726;--brand-control-checkbox-border-indeterminate-hover:#0000001f;--brand-control-checkbox-border-checked-disabled:color-mix(in srgb, var(--base-color-scale-green-6), #000 35%);--brand-control-checkbox-border-unchecked-disabled:var(--base-color-scale-gray-5);--brand-control-radio-bg-default:var(--base-color-scale-black-0);--brand-control-radio-bg-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-checked:var(--base-color-scale-black-0);--brand-control-radio-bg-checked-hover:var(--brand-color-canvas-subtle);--brand-control-radio-bg-disabled:var(--brand-color-canvas-default);--brand-control-radio-border-default:var(--base-color-scale-gray-4);--brand-control-radio-border-hover:var(--base-color-scale-gray-5);--brand-control-radio-border-checked:var(--base-color-scale-gray-4);--brand-control-radio-border-checked-hover:var(--base-color-scale-gray-4);--brand-control-radio-border-disabled:var(--base-color-scale-gray-5);--brand-control-radio-dot-default:var(--base-color-scale-white-0);--brand-control-radio-dot-checked:var(--base-color-scale-green-5);--brand-control-radio-dot-checked-hover:#309a4d}