@openedx/paragon 22.3.2 → 23.0.0-alpha.1

package/dist/Form/_input-group.scss

@@ -0,0 +1,188 @@
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+
+  > .form-control,
+  > .form-control-plaintext,
+  > .custom-select,
+  > .custom-file {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    margin-bottom: 0;
+
+    + .form-control,
+    + .custom-select,
+    + .custom-file {
+      margin-left: calc(var(--pgn-size-form-input-width-border) * -1);
+    }
+  }
+
+  > .form-control:focus,
+  > .custom-select:focus,
+  > .custom-file .custom-file-input:focus ~ .custom-file-label {
+    z-index: 3;
+  }
+
+  > .custom-file .custom-file-input:focus {
+    z-index: 4;
+  }
+
+  > .form-control,
+  > .custom-select {
+    &:not(:first-child) {
+      @include border-left-radius(0);
+    }
+  }
+
+  > .custom-file {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) .custom-file-label,
+    &:not(:last-child) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+
+    &:not(:first-child) .custom-file-label {
+      @include border-left-radius(0);
+    }
+  }
+
+  &:not(.has-validation) {
+    > .form-control:not(:last-child),
+    > .custom-select:not(:last-child),
+    > .custom-file:not(:last-child) .custom-file-label,
+    > .custom-file:not(:last-child) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+
+  &.has-validation {
+    > .form-control:nth-last-child(n + 3),
+    > .custom-select:nth-last-child(n + 3),
+    > .custom-file:nth-last-child(n + 3) .custom-file-label,
+    > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+}
+
+.input-group-prepend,
+.input-group-append {
+  display: flex;
+
+  .btn {
+    position: relative;
+    z-index: 2;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+
+  .btn + .btn,
+  .btn + .input-group-text,
+  .input-group-text + .input-group-text,
+  .input-group-text + .btn {
+    margin-left: calc(var(--pgn-size-form-input-width-border) * -1);
+  }
+}
+
+.input-group-prepend {
+  margin-right: calc(var(--pgn-size-form-input-width-border) * -1);
+}
+
+.input-group-append {
+  margin-left: calc(var(--pgn-size-form-input-width-border) * -1);
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
+  margin-bottom: 0;
+  font-weight: var(--pgn-typography-font-weight-normal);
+  line-height: var(--pgn-typography-form-input-line-height-base);
+  color: var(--pgn-color-form-input-group-addon-base);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--pgn-color-form-input-group-addon-bg);
+  border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-group-addon-border);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-base));
+  @include border-radius(var(--pgn-size-form-input-radius-border-base));
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+.input-group-lg > .form-control:not(textarea),
+.input-group-lg > .custom-select {
+  height: var(--pgn-size-form-input-height-lg);
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .custom-select,
+.input-group-lg > .input-group-prepend > .input-group-text,
+.input-group-lg > .input-group-append > .input-group-text,
+.input-group-lg > .input-group-prepend > .btn,
+.input-group-lg > .input-group-append > .btn {
+  padding: var(--pgn-spacing-form-input-padding-y-lg) var(--pgn-spacing-form-input-padding-x-lg);
+  line-height: var(--pgn-typography-form-input-line-height-lg);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-lg));
+  @include border-radius(var(--pgn-size-form-input-radius-border-lg));
+}
+
+.input-group-sm > .form-control:not(textarea),
+.input-group-sm > .custom-select {
+  height: var(--pgn-size-form-input-height-sm);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .custom-select,
+.input-group-sm > .input-group-prepend > .input-group-text,
+.input-group-sm > .input-group-append > .input-group-text,
+.input-group-sm > .input-group-prepend > .btn,
+.input-group-sm > .input-group-append > .btn {
+  padding: var(--pgn-spacing-form-input-padding-y-sm) var(--pgn-spacing-form-input-padding-x-sm);
+  line-height: var(--pgn-typography-form-input-line-height-sm);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-sm));
+  @include border-radius(var(--pgn-size-form-input-radius-border-sm));
+}
+
+.input-group-lg > .custom-select,
+.input-group-sm > .custom-select {
+  padding-right:
+    calc(
+      var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)
+    );
+}
+
+.input-group > .input-group-prepend > .btn,
+.input-group > .input-group-prepend > .input-group-text,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
+  @include border-right-radius(0);
+}
+
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  @include border-left-radius(0);
+}

package/dist/Form/_mixins.scss

@@ -3,7 +3,7 @@
   $padding-y,
   $line-height,
   $font-size,
-  $border-width
+  $label-initial-border-width
 ) {
   padding: 0 $padding-x;
 
@@ -19,12 +19,225 @@
   $padding-y,
   $line-height,
   $font-size,
-  $border-width
+  $label-float-border-width
 ) {
   .pgn__form-control-floating-label-text {
     $half-leading: calc(($line-height - .8) / 2);
     $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%);
 
-    transform: translateY(-$padding-y) scale(.75)  translateY(-$percent-height-minus-no-bottom-leading);
+    transform:
+      translateY(calc($padding-y * -1)) scale(.75)
+      translateY(calc($percent-height-minus-no-bottom-leading * -1));
+  }
+}
+
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `var(--pgn-color-form-input-focus-border)` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($ignore-warning: false) {
+  &:focus {
+    color: var(--pgn-color-form-input-focus-base);
+    background-color: var(--pgn-color-form-input-focus-bg);
+    border-color: var(--pgn-color-form-input-focus-border);
+    outline: 0;
+    box-shadow: var(--pgn-elevation-form-input-focus);
+  }
+
+  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+@mixin form-validation-state-selector($state) {
+  @if ($state == "valid" or $state == "invalid") {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+
+  @else {
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+}
+
+@mixin form-validation-state(
+  $state, $color, $icon, $form-tooltip-color,
+  $form-tooltip-bg, $focus-box-shadow-color, $checked-border-color
+) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: var(--pgn-spacing-form-control-select-feedback-margin-top);
+
+    @include font-size(var(--pgn-typography-form-feedback-font-size));
+
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding:
+      var(--pgn-spacing-form-control-select-feedback-tooltip-padding-y)
+      var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x);
+    margin-top: .1rem;
+
+    @include font-size(var(--pgn-typography-form-feedback-tooltip-font-size));
+
+    line-height: var(--pgn-typography-form-feedback-tooltip-line-height);
+    color: $form-tooltip-color;
+    background-color: $form-tooltip-bg;
+
+    @include border-radius(var(--pgn-size-form-feedback-tooltip-border-radius));
+
+    // See https://github.com/twbs/bootstrap/pull/31557
+    // Align tooltip to form elements
+    .form-row > .col > &,
+    .form-row > [class*="col-"] > & {
+      left: calc(var(--pgn-size-form-grid-gutter-width) * .5);
+    }
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: var(--pgn-size-form-input-height-inner-base) !important;
+        background-image: $icon;
+        background-repeat: no-repeat;
+        background-position: right var(--pgn-size-form-input-height-inner-quarter) center;
+        background-size: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  select.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: calc(var(--pgn-spacing-form-input-padding-x-base) * 4) !important;
+        background-position: right calc(var(--pgn-spacing-form-input-padding-x-base) * 2) center;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: var(--pgn-size-form-input-height-inner-base);
+        background-position:
+          top var(--pgn-size-form-input-height-inner-quarter)
+          right var(--pgn-size-form-input-height-inner-quarter);
+      }
+    }
+  }
+
+  .custom-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: var(--pgn-spacing-form-control-select-feedback-icon-padding-right) !important;
+        background:
+          var(--pgn-other-content-form-control-select-bg),
+          var(--pgn-color-form-control-select-bg-base) $icon
+          var(--pgn-spacing-form-control-select-feedback-icon-position) / var(--pgn-size-form-control-select-feedback-icon) no-repeat; // stylelint-disable-line max-line-length
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          border-color: $color;
+        }
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          border-color: $checked-border-color;
+
+          @include gradient-bg($checked-border-color);
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+        }
+
+        &:not(:checked) ~ .custom-control-label::before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-file-label {
+        border-color: $color;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          border-color: $color;
+          box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+        }
+      }
+    }
   }
 }

package/dist/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Form","FormControl","FormLabel","FormGroup","FormControlFeedback","FormText","FormControlDecoratorGroup","FormRadio","RadioControl","FormRadioSet","FormRadioSetContext","FormAutosuggest","FormAutosuggestOption","FormCheckbox","CheckboxControl","FormSwitch","SwitchControl","FormCheckboxSet","FormSwitchSet","FormCheckboxSetContext","useCheckboxSetValues","Control","Radio","RadioSet","Autosuggest","AutosuggestOption","Checkbox","CheckboxSet","Switch","SwitchSet","Label","Group","Text","default","FormCheck","FormFile","InputGroup"],"sources":["../../src/Form/index.jsx"],"sourcesContent":["import Form from 'react-bootstrap/Form';\nimport FormControl from './FormControl';\nimport FormLabel from './FormLabel';\nimport FormGroup from './FormGroup';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormText from './FormText';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\nimport FormRadio, { RadioControl } from './FormRadio';\nimport FormRadioSet from './FormRadioSet';\nimport FormRadioSetContext from './FormRadioSetContext';\nimport FormAutosuggest from './FormAutosuggest';\nimport FormAutosuggestOption from './FormAutosuggestOption';\nimport FormCheckbox, { CheckboxControl } from './FormCheckbox';\nimport FormSwitch, { SwitchControl } from './FormSwitch';\nimport FormCheckboxSet from './FormCheckboxSet';\nimport FormSwitchSet from './FormSwitchSet';\nimport FormCheckboxSetContext from './FormCheckboxSetContext';\nimport useCheckboxSetValues from './useCheckboxSetValues';\n\nForm.Control = FormControl;\nForm.Radio = FormRadio;\nForm.RadioSet = FormRadioSet;\nForm.Autosuggest = FormAutosuggest;\nForm.AutosuggestOption = FormAutosuggestOption;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxSet = FormCheckboxSet;\nForm.Switch = FormSwitch;\nForm.SwitchSet = FormSwitchSet;\nForm.Label = FormLabel;\nForm.Group = FormGroup;\nForm.Text = FormText;\n\nexport default Form;\nexport {\n  FormControl,\n  FormLabel,\n  FormRadio,\n  FormRadioSet,\n  FormRadioSetContext,\n  FormCheckbox,\n  FormSwitch,\n  FormAutosuggest,\n  FormAutosuggestOption,\n  FormCheckboxSet,\n  FormCheckboxSetContext,\n  FormGroup,\n  FormControlDecoratorGroup,\n  FormControlFeedback,\n  FormText,\n  CheckboxControl,\n  RadioControl,\n  SwitchControl,\n  FormSwitchSet,\n  useCheckboxSetValues,\n};\n\nexport { default as FormCheck } from 'react-bootstrap/FormCheck';\nexport { default as FormFile } from 'react-bootstrap/FormFile';\nexport { default as InputGroup } from 'react-bootstrap/InputGroup';\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,sBAAsB;AACvC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,yBAAyB,MAAM,6BAA6B;AACnE,OAAOC,SAAS,IAAIC,YAAY,QAAQ,aAAa;AACrD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,YAAY,IAAIC,eAAe,QAAQ,gBAAgB;AAC9D,OAAOC,UAAU,IAAIC,aAAa,QAAQ,cAAc;AACxD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzDpB,IAAI,CAACqB,OAAO,GAAGpB,WAAW;AAC1BD,IAAI,CAACsB,KAAK,GAAGf,SAAS;AACtBP,IAAI,CAACuB,QAAQ,GAAGd,YAAY;AAC5BT,IAAI,CAACwB,WAAW,GAAGb,eAAe;AAClCX,IAAI,CAACyB,iBAAiB,GAAGb,qBAAqB;AAC9CZ,IAAI,CAAC0B,QAAQ,GAAGb,YAAY;AAC5Bb,IAAI,CAAC2B,WAAW,GAAGV,eAAe;AAClCjB,IAAI,CAAC4B,MAAM,GAAGb,UAAU;AACxBf,IAAI,CAAC6B,SAAS,GAAGX,aAAa;AAC9BlB,IAAI,CAAC8B,KAAK,GAAG5B,SAAS;AACtBF,IAAI,CAAC+B,KAAK,GAAG5B,SAAS;AACtBH,IAAI,CAACgC,IAAI,GAAG3B,QAAQ;AAEpB,eAAeL,IAAI;AACnB,SACEC,WAAW,EACXC,SAAS,EACTK,SAAS,EACTE,YAAY,EACZC,mBAAmB,EACnBG,YAAY,EACZE,UAAU,EACVJ,eAAe,EACfC,qBAAqB,EACrBK,eAAe,EACfE,sBAAsB,EACtBhB,SAAS,EACTG,yBAAyB,EACzBF,mBAAmB,EACnBC,QAAQ,EACRS,eAAe,EACfN,YAAY,EACZQ,aAAa,EACbE,aAAa,EACbE,oBAAoB;AAGtB,SAASa,OAAO,IAAIC,SAAS,QAAQ,2BAA2B;AAChE,SAASD,OAAO,IAAIE,QAAQ,QAAQ,0BAA0B;AAC9D,SAASF,OAAO,IAAIG,UAAU,QAAQ,4BAA4B"}
+{"version":3,"file":"index.js","names":["Form","FormControl","FormLabel","FormGroup","FormControlFeedback","FormText","FormControlDecoratorGroup","FormRadio","RadioControl","FormRadioSet","FormRadioSetContext","FormAutosuggest","FormAutosuggestOption","FormCheckbox","CheckboxControl","FormSwitch","SwitchControl","FormCheckboxSet","FormSwitchSet","FormCheckboxSetContext","useCheckboxSetValues","Control","Radio","RadioSet","Autosuggest","AutosuggestOption","Checkbox","CheckboxSet","Switch","SwitchSet","Label","Group","Text","default","FormCheck","FormFile","InputGroup"],"sources":["../../src/Form/index.jsx"],"sourcesContent":["import Form from 'react-bootstrap/Form';\nimport FormControl from './FormControl';\nimport FormLabel from './FormLabel';\nimport FormGroup from './FormGroup';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormText from './FormText';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\nimport FormRadio, { RadioControl } from './FormRadio';\nimport FormRadioSet from './FormRadioSet';\nimport FormRadioSetContext from './FormRadioSetContext';\nimport FormAutosuggest from './FormAutosuggest';\nimport FormAutosuggestOption from './FormAutosuggestOption';\nimport FormCheckbox, { CheckboxControl } from './FormCheckbox';\nimport FormSwitch, { SwitchControl } from './FormSwitch';\nimport FormCheckboxSet from './FormCheckboxSet';\nimport FormSwitchSet from './FormSwitchSet';\nimport FormCheckboxSetContext from './FormCheckboxSetContext';\nimport useCheckboxSetValues from './useCheckboxSetValues';\n\nForm.Control = FormControl;\nForm.Radio = FormRadio;\nForm.RadioSet = FormRadioSet;\nForm.Autosuggest = FormAutosuggest;\nForm.AutosuggestOption = FormAutosuggestOption;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxSet = FormCheckboxSet;\nForm.Switch = FormSwitch;\nForm.SwitchSet = FormSwitchSet;\nForm.Label = FormLabel;\nForm.Group = FormGroup;\nForm.Text = FormText;\n\nexport default Form;\nexport {\n  FormControl,\n  FormLabel,\n  FormRadio,\n  FormRadioSet,\n  FormRadioSetContext,\n  FormCheckbox,\n  FormSwitch,\n  FormAutosuggest,\n  FormAutosuggestOption,\n  FormCheckboxSet,\n  FormCheckboxSetContext,\n  FormGroup,\n  FormControlDecoratorGroup,\n  FormControlFeedback,\n  FormText,\n  CheckboxControl,\n  RadioControl,\n  SwitchControl,\n  FormSwitchSet,\n  useCheckboxSetValues,\n};\n\nexport { default as FormCheck } from 'react-bootstrap/FormCheck';\nexport { default as FormFile } from 'react-bootstrap/FormFile';\nexport { default as InputGroup } from 'react-bootstrap/InputGroup';\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,sBAAsB;AACvC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,yBAAyB,MAAM,6BAA6B;AACnE,OAAOC,SAAS,IAAIC,YAAY,QAAQ,aAAa;AACrD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,YAAY,IAAIC,eAAe,QAAQ,gBAAgB;AAC9D,OAAOC,UAAU,IAAIC,aAAa,QAAQ,cAAc;AACxD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzDpB,IAAI,CAACqB,OAAO,GAAGpB,WAAW;AAC1BD,IAAI,CAACsB,KAAK,GAAGf,SAAS;AACtBP,IAAI,CAACuB,QAAQ,GAAGd,YAAY;AAC5BT,IAAI,CAACwB,WAAW,GAAGb,eAAe;AAClCX,IAAI,CAACyB,iBAAiB,GAAGb,qBAAqB;AAC9CZ,IAAI,CAAC0B,QAAQ,GAAGb,YAAY;AAC5Bb,IAAI,CAAC2B,WAAW,GAAGV,eAAe;AAClCjB,IAAI,CAAC4B,MAAM,GAAGb,UAAU;AACxBf,IAAI,CAAC6B,SAAS,GAAGX,aAAa;AAC9BlB,IAAI,CAAC8B,KAAK,GAAG5B,SAAS;AACtBF,IAAI,CAAC+B,KAAK,GAAG5B,SAAS;AACtBH,IAAI,CAACgC,IAAI,GAAG3B,QAAQ;AAEpB,eAAeL,IAAI;AACnB,SACEC,WAAW,EACXC,SAAS,EACTK,SAAS,EACTE,YAAY,EACZC,mBAAmB,EACnBG,YAAY,EACZE,UAAU,EACVJ,eAAe,EACfC,qBAAqB,EACrBK,eAAe,EACfE,sBAAsB,EACtBhB,SAAS,EACTG,yBAAyB,EACzBF,mBAAmB,EACnBC,QAAQ,EACRS,eAAe,EACfN,YAAY,EACZQ,aAAa,EACbE,aAAa,EACbE,oBAAoB;AAGtB,SAASa,OAAO,IAAIC,SAAS,QAAQ,2BAA2B;AAChE,SAASD,OAAO,IAAIE,QAAQ,QAAQ,0BAA0B;AAC9D,SAASF,OAAO,IAAIG,UAAU,QAAQ,4BAA4B","ignoreList":[]}

package/dist/Form/useCheckboxSetValues.js

@@ -1,6 +1,6 @@
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

package/dist/Form/useCheckboxSetValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckboxSetValues.js","names":["useReducer","checkboxValuesReducer","state","action","type","concat","_toConsumableArray","value","filter","useCheckboxSetValues","initialState","arguments","length","undefined","_useReducer","_useReducer2","_slicedToArray","dispatch","dispatchers","add","remove","set","clear"],"sources":["../../src/Form/useCheckboxSetValues.jsx"],"sourcesContent":["import { useReducer } from 'react';\n\nconst checkboxValuesReducer = (state, action) => {\n  switch (action.type) {\n    case 'add':\n      return [...state, action.value];\n    case 'remove':\n      return state.filter(value => value !== action.value);\n    case 'set':\n      return [...action.value];\n    case 'clear':\n    default:\n      return [];\n  }\n};\n\nconst useCheckboxSetValues = (initialState = []) => {\n  const [state, dispatch] = useReducer(checkboxValuesReducer, initialState);\n\n  const dispatchers = {\n    add: (value) => dispatch({ type: 'add', value }),\n    remove: (value) => dispatch({ type: 'remove', value }),\n    set: (value) => dispatch({ type: 'set', value }),\n    clear: () => dispatch({ type: 'clear' }),\n  };\n  return [state, dispatchers];\n};\n\nexport default useCheckboxSetValues;\n"],"mappings":";;;;;;;;;;AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAK,EAAEC,MAAM,EAAK;EAC/C,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,KAAK;MACR,UAAAC,MAAA,CAAAC,kBAAA,CAAWJ,KAAK,IAAEC,MAAM,CAACI,KAAK;IAChC,KAAK,QAAQ;MACX,OAAOL,KAAK,CAACM,MAAM,CAAC,UAAAD,KAAK;QAAA,OAAIA,KAAK,KAAKJ,MAAM,CAACI,KAAK;MAAA,EAAC;IACtD,KAAK,KAAK;MACR,OAAAD,kBAAA,CAAWH,MAAM,CAACI,KAAK;IACzB,KAAK,OAAO;IACZ;MACE,OAAO,EAAE;EACb;AACF,CAAC;AAED,IAAME,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA,EAA0B;EAAA,IAAtBC,YAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAC7C,IAAAG,WAAA,GAA0Bd,UAAU,CAACC,qBAAqB,EAAES,YAAY,CAAC;IAAAK,YAAA,GAAAC,cAAA,CAAAF,WAAA;IAAlEZ,KAAK,GAAAa,YAAA;IAAEE,QAAQ,GAAAF,YAAA;EAEtB,IAAMG,WAAW,GAAG;IAClBC,GAAG,EAAE,SAAAA,IAACZ,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,KAAK;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IAChDa,MAAM,EAAE,SAAAA,OAACb,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,QAAQ;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IACtDc,GAAG,EAAE,SAAAA,IAACd,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,KAAK;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IAChDe,KAAK,EAAE,SAAAA,MAAA;MAAA,OAAML,QAAQ,CAAC;QAAEb,IAAI,EAAE;MAAQ,CAAC,CAAC;IAAA;EAC1C,CAAC;EACD,OAAO,CAACF,KAAK,EAAEgB,WAAW,CAAC;AAC7B,CAAC;AAED,eAAeT,oBAAoB"}
+{"version":3,"file":"useCheckboxSetValues.js","names":["useReducer","checkboxValuesReducer","state","action","type","concat","_toConsumableArray","value","filter","useCheckboxSetValues","initialState","arguments","length","undefined","_useReducer","_useReducer2","_slicedToArray","dispatch","dispatchers","add","remove","set","clear"],"sources":["../../src/Form/useCheckboxSetValues.jsx"],"sourcesContent":["import { useReducer } from 'react';\n\nconst checkboxValuesReducer = (state, action) => {\n  switch (action.type) {\n    case 'add':\n      return [...state, action.value];\n    case 'remove':\n      return state.filter(value => value !== action.value);\n    case 'set':\n      return [...action.value];\n    case 'clear':\n    default:\n      return [];\n  }\n};\n\nconst useCheckboxSetValues = (initialState = []) => {\n  const [state, dispatch] = useReducer(checkboxValuesReducer, initialState);\n\n  const dispatchers = {\n    add: (value) => dispatch({ type: 'add', value }),\n    remove: (value) => dispatch({ type: 'remove', value }),\n    set: (value) => dispatch({ type: 'set', value }),\n    clear: () => dispatch({ type: 'clear' }),\n  };\n  return [state, dispatchers];\n};\n\nexport default useCheckboxSetValues;\n"],"mappings":";;;;;;;;;;AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAK,EAAEC,MAAM,EAAK;EAC/C,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAK,KAAK;MACR,UAAAC,MAAA,CAAAC,kBAAA,CAAWJ,KAAK,IAAEC,MAAM,CAACI,KAAK;IAChC,KAAK,QAAQ;MACX,OAAOL,KAAK,CAACM,MAAM,CAAC,UAAAD,KAAK;QAAA,OAAIA,KAAK,KAAKJ,MAAM,CAACI,KAAK;MAAA,EAAC;IACtD,KAAK,KAAK;MACR,OAAAD,kBAAA,CAAWH,MAAM,CAACI,KAAK;IACzB,KAAK,OAAO;IACZ;MACE,OAAO,EAAE;EACb;AACF,CAAC;AAED,IAAME,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA,EAA0B;EAAA,IAAtBC,YAAY,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,EAAE;EAC7C,IAAAG,WAAA,GAA0Bd,UAAU,CAACC,qBAAqB,EAAES,YAAY,CAAC;IAAAK,YAAA,GAAAC,cAAA,CAAAF,WAAA;IAAlEZ,KAAK,GAAAa,YAAA;IAAEE,QAAQ,GAAAF,YAAA;EAEtB,IAAMG,WAAW,GAAG;IAClBC,GAAG,EAAE,SAAAA,IAACZ,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,KAAK;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IAChDa,MAAM,EAAE,SAAAA,OAACb,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,QAAQ;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IACtDc,GAAG,EAAE,SAAAA,IAACd,KAAK;MAAA,OAAKU,QAAQ,CAAC;QAAEb,IAAI,EAAE,KAAK;QAAEG,KAAK,EAALA;MAAM,CAAC,CAAC;IAAA;IAChDe,KAAK,EAAE,SAAAA,MAAA;MAAA,OAAML,QAAQ,CAAC;QAAEb,IAAI,EAAE;MAAQ,CAAC,CAAC;IAAA;EAC1C,CAAC;EACD,OAAO,CAACF,KAAK,EAAEgB,WAAW,CAAC;AAC7B,CAAC;AAED,eAAeT,oBAAoB","ignoreList":[]}

package/dist/Hyperlink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","isRequiredIf","Launch","Icon","withDeprecatedProps","DeprTypes","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","props","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","func","oneOf","bool","content","deprType","MOVED","newName"],"sources":["../../src/Hyperlink/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\nconst Hyperlink = React.forwardRef((props, ref) => {\n  const {\n    className,\n    destination,\n    children,\n    target,\n    onClick,\n    externalLinkAlternativeText,\n    externalLinkTitle,\n    variant,\n    isInline,\n    showLaunchIcon,\n    ...attrs\n  } = props;\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n  */\n  target: PropTypes.string,\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkAlternativeText: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkTitle: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** specify the link style. By default, it will be underlined. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default withDeprecatedProps(Hyperlink, 'Hyperlink', {\n  /** specifies the text or element that a URL should be associated with */\n  content: {\n    deprType: DeprTypes.MOVED,\n    newName: 'children',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","isRequiredIf","Launch","Icon","withDeprecatedProps","DeprTypes","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","props","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","func","oneOf","bool","content","deprType","MOVED","newName"],"sources":["../../src/Hyperlink/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\nconst Hyperlink = React.forwardRef((props, ref) => {\n  const {\n    className,\n    destination,\n    children,\n    target,\n    onClick,\n    externalLinkAlternativeText,\n    externalLinkTitle,\n    variant,\n    isInline,\n    showLaunchIcon,\n    ...attrs\n  } = props;\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n  */\n  target: PropTypes.string,\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkAlternativeText: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkTitle: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** specify the link style. By default, it will be underlined. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default withDeprecatedProps(Hyperlink, 'Hyperlink', {\n  /** specifies the text or element that a URL should be associated with */\n  content: {\n    deprType: DeprTypes.MOVED,\n    newName: 'children',\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/Hyperlink/index.scss

@@ -4,6 +4,6 @@
   text-align: start;
 
   &__external-icon {
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: var(--pgn-spacing-spacer-2);
   }
 }

package/dist/Icon/index.js

@@ -1,11 +1,11 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["src", "id", "className", "hidden", "screenReaderText", "svgAttrs", "size"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';

package/dist/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/Icon/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__icon {
   display: block;
   height: 1.5rem; // 24px, Assumes base font size to be 16px
@@ -8,28 +6,28 @@
   flex-shrink: 0;
 
   &.pgn__icon__inline {
-    width: $icon-inline;
-    height: $icon-inline;
+    width: var(--pgn-size-icon-inline);
+    height: var(--pgn-size-icon-inline);
   }
 
   &.pgn__icon__xs {
-    width: $icon-xs;
-    height: $icon-xs;
+    width: var(--pgn-size-icon-xs);
+    height: var(--pgn-size-icon-xs);
   }
 
   &.pgn__icon__sm {
-    width: $icon-sm;
-    height: $icon-sm;
+    width: var(--pgn-size-icon-sm);
+    height: var(--pgn-size-icon-sm);
   }
 
   &.pgn__icon__md {
-    width: $icon-md;
-    height: $icon-md;
+    width: var(--pgn-size-icon-md);
+    height: var(--pgn-size-icon-md);
   }
 
   &.pgn__icon__lg {
-    width: $icon-lg;
-    height: $icon-lg;
+    width: var(--pgn-size-icon-lg);
+    height: var(--pgn-size-icon-lg);
   }
 }
 

package/dist/IconButton/_mixins.scss

@@ -0,0 +1,4 @@
+@mixin btn-icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+}